Add new documentation folder

packages/document/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*storybook.log

packages/document/.storybook/addon-gh-repository/Tool.tsx

@@ -0,0 +1,17 @@
+import { A, IconButton, Icons, Separator } from '@storybook/components'
+import React from 'react'
+import { ADDON_NAME, REPOSITORY_URL, TOOL_ID } from './constants'
+
+export const Tool = () => {
+  return (
+    <>
+      <Separator />
+      <IconButton key={TOOL_ID} active={false} title={ADDON_NAME}>
+        <A target='_blank' href={REPOSITORY_URL}>
+          <Icons icon='github' />
+          &nbsp;&nbsp;repository
+        </A>
+      </IconButton>
+    </>
+  )
+}

packages/document/.storybook/addon-gh-repository/constants.ts

@@ -0,0 +1,5 @@
+export const ADDON_ID = 'addon-gh-repository'
+export const ADDON_NAME = 'View repository'
+export const TOOL_ID = `${ADDON_ID}/tool`
+export const REPOSITORY_URL =
+  'https://github.com/commercelayer/commercelayer-react-components'

packages/document/.storybook/addon-gh-repository/manager.tsx

@@ -0,0 +1,13 @@
+import { addons, types } from "@storybook/manager-api"
+import React from "react"
+import { Tool } from "./Tool"
+import { ADDON_ID, ADDON_NAME } from "./constants"
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: ADDON_NAME,
+    type: types.TOOL,
+    match: ({ viewMode }) => !!viewMode?.match(/^(story|docs)$/),
+    render: () => <Tool />,
+  })
+})

packages/document/.storybook/commercelayer.theme.ts

@@ -0,0 +1,11 @@
+import { create } from '@storybook/theming'
+
+export default create({
+  base: 'light',
+  brandTitle: 'Commerce Layer',
+  // brandUrl: 'https://example.com',
+  brandImage: './app-logo.png',
+  brandTarget: '_self',
+
+  textColor: '#101111'
+})

packages/document/.storybook/main.ts

@@ -0,0 +1,78 @@
+import { resolve } from "node:path"
+import type { StorybookConfig } from "@storybook/react-vite"
+import remarkGfm from "remark-gfm"
+import { type UserConfig, mergeConfig } from "vite"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+const viteOverrides: UserConfig = {
+  base: process.env.VITE_BASE_URL,
+  plugins: [
+    tsconfigPaths({
+      projects: [
+        resolve(import.meta.dirname, "../../react-components/tsconfig.json"),
+        resolve(import.meta.dirname, "../tsconfig.json"),
+      ],
+    }),
+  ],
+}
+
+const storybookConfig: StorybookConfig = {
+  async viteFinal(config) {
+    return mergeConfig(config, viteOverrides)
+  },
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  // @ts-expect-error This 'managerEntries' exists.
+  managerEntries: [
+    resolve(import.meta.dirname, "./addon-gh-repository/manager.tsx"),
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  features: {
+    storyStoreV7: true,
+  },
+  docs: {
+    autodocs: true,
+    docsMode: true,
+  },
+  typescript: {
+    check: false,
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop) => {
+        if (["children", "className"].includes(prop.name)) {
+          return true
+        }
+
+        if (prop.parent != null) {
+          return (
+            !prop.parent.fileName.includes("@types/react") &&
+            !prop.parent.fileName.includes("@emotion")
+          )
+        }
+        return true
+      },
+    },
+  },
+}
+
+export default storybookConfig

packages/document/.storybook/manager-head.html

@@ -0,0 +1,3 @@
+<meta name="description" content="Official React Components for Commerce Layer applications." key="desc" />
+<link rel="icon" type="image/png" href="https://data.commercelayer.app/assets/images/favicons/favicon-32x32.png" />
+<link rel="stylesheet" href="https://data.commercelayer.app/assets/css/storybook-manager.css" />

packages/document/.storybook/preview-head.html

@@ -0,0 +1,13 @@
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link
+  href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"
+  rel="stylesheet"
+/>
+<link 
+  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,500;1,500&display=swap" 
+  rel="stylesheet"
+/>
+<link rel="stylesheet" href="storybook-preview.css" />
+<script>
+  window.global = window;
+</script>

packages/document/.storybook/preview.tsx

@@ -0,0 +1,143 @@
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subtitle,
+  Title,
+} from "@storybook/blocks"
+import type { Decorator, Parameters } from "@storybook/react"
+import React from "react"
+import { worker } from "../mocks/browser"
+
+export const parameters: Parameters = {
+  layout: "centered",
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  backgrounds: {
+    values: [
+      {
+        name: "overlay",
+        value: "#F8F8F8",
+      },
+    ],
+  },
+  options: {
+    storySort: {
+      method: "alphabetical",
+      order: [
+        "Getting Started",
+        // [
+        //   "Welcome",
+        //   "Applications",
+        //   "Custom apps",
+        //   "Token provider",
+        //   "Core SDK provider",
+        // ],
+        // "Atoms",
+        // "Forms",
+        // ["react-hook-form"],
+        // "Hooks",
+        // "Lists",
+        // "Composite",
+        // "Resources",
+        // "Examples",
+      ],
+    },
+  },
+  docs: {
+    page: () => (
+      <React.Fragment>
+        <Title />
+        <Subtitle />
+        <Description />
+        <Primary />
+        <Controls />
+        <Stories includePrimary={false} />
+      </React.Fragment>
+    ),
+    // source: {
+    //   transform: (input: string) =>
+    //     prettier.format(input, {
+    //       parser: 'babel',
+    //       plugins: [prettierBabel]
+    //     }),
+    // },
+  },
+}
+
+// export const withContainer: Decorator = (Story, context) => {
+//   const { containerEnabled } = context.globals
+//   if (containerEnabled === true) {
+//     return (
+//       <Container minHeight={false}>
+//         <Story />
+//       </Container>
+//     )
+//   }
+
+//   return <Story />
+// }
+
+// export const withLocale: Decorator = (Story, context) => {
+//   const locale = "en-US"
+//   return (
+//     <I18NProvider enforcedLocaleCode={locale}>
+//       <Story />
+//     </I18NProvider>
+//   )
+// }
+
+// export const decorators: Decorator[] = [withLocale, withContainer]
+
+// export const globals = {
+//   [PARAM_KEY]: true,
+// }
+
+// Storybook executes this module in both bootstap phase (Node)
+// and a story's runtime (browser). However, we cannot call `setupWorker`
+// in Node environment, so need to check if we're in a browser.
+if (typeof global.process === "undefined") {
+  // Start the mocking when each story is loaded.
+  // Repetitive calls to the `.start()` method do not register a new worker,
+  // but check whether there's an existing once, reusing it, if so.
+  worker.start({
+    serviceWorker: {
+      url: `${import.meta.env.BASE_URL}mockServiceWorker.js`,
+    },
+    quiet: import.meta.env.PROD,
+    onUnhandledRequest: !import.meta.env.PROD
+      ? (req, reqPrint) => {
+          const url = new URL(req.url)
+          if (url.hostname === "mock.localhost") {
+            reqPrint.warning()
+          }
+        }
+      : () => {},
+  })
+}
+
+const argTypesEnhancers: Preview["argTypesEnhancers"] = [
+  (context) => {
+    // when the className prop comes from `JSX.IntrinsicElements['div' | 'span']`
+    // and is not documented, we add a default description
+    if (
+      "className" in context.argTypes &&
+      context.argTypes.className.description === ""
+    ) {
+      context.argTypes.className.description =
+        "CSS class name for the base component"
+    }
+
+    return context.argTypes
+  },
+]
+
+export default {
+  parameters,
+  argTypesEnhancers,
+}

packages/document/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

packages/document/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)