📚 docs(document): add SKUs story and upgrade Storybook to v10

.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "storybook": {
+      "command": "pnpm",
+      "args": ["--filter", "document", "run", "mcp"]
+    }
+  }
+}

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

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

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

@@ -1,4 +1,4 @@
-import { addons, types } from "@storybook/manager-api"
+import { addons, types } from "storybook/manager-api"
 import React from "react"
 import { Tool } from "./Tool"
 import { ADDON_ID, ADDON_NAME } from "./constants"

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

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming'
+import { create } from 'storybook/theming'
 
 export default create({
   base: 'light',

packages/document/.storybook/main.ts

@@ -21,21 +21,16 @@ const storybookConfig: StorybookConfig = {
     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],
-          },
+  addons: ["@storybook/addon-links", {
+    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"),
@@ -47,12 +42,8 @@ const storybookConfig: StorybookConfig = {
   core: {
     disableTelemetry: true,
   },
-  features: {
-    storyStoreV7: true,
-  },
   docs: {
-    autodocs: true,
-    docsMode: true,
+    docsMode: true
   },
   typescript: {
     check: false,

packages/document/.storybook/preview.tsx

@@ -5,8 +5,8 @@ import {
   Stories,
   Subtitle,
   Title,
-} from "@storybook/blocks"
-import type { Decorator, Parameters } from "@storybook/react"
+} from "@storybook/addon-docs/blocks"
+import type { Decorator, Parameters, Preview } from "@storybook/react-vite"
 import React from "react"
 import { worker } from "../mocks/browser"
 
@@ -19,18 +19,19 @@ export const parameters: Parameters = {
     },
   },
   backgrounds: {
-    values: [
-      {
+    options: {
+      overlay: {
         name: "overlay",
         value: "#F8F8F8",
-      },
-    ],
+      }
+    },
   },
   options: {
     storySort: {
       method: "alphabetical",
       order: [
         "Getting Started",
+        "Skus",
         // [
         //   "Welcome",
         //   "Applications",
@@ -140,4 +141,5 @@ const argTypesEnhancers: Preview["argTypesEnhancers"] = [
 export default {
   parameters,
   argTypesEnhancers,
-}
+  tags: ["autodocs"]
+};

packages/document/mocks/data/sku_lists.js

@@ -0,0 +1,70 @@
+import { http, HttpResponse } from 'msw'
+
+const skuListData = {
+  id: 'SkuListAbc01',
+  type: 'sku_lists',
+  links: {
+    self: 'https://react-components-store.commercelayer.io/api/sku_lists/SkuListAbc01'
+  },
+  attributes: {
+    name: 'Summer Collection',
+    slug: 'summer-collection',
+    description: 'Our summer collection SKU list.',
+    image_url: null,
+    manual: true,
+    sku_count: 2,
+    created_at: '2023-01-01T00:00:00.000Z',
+    updated_at: '2023-01-01T00:00:00.000Z',
+    reference: null,
+    reference_origin: null,
+    metadata: {}
+  },
+  relationships: {
+    skus: {
+      data: [
+        { type: 'skus', id: 'SkuAbc001' },
+        { type: 'skus', id: 'SkuAbc002' }
+      ]
+    }
+  },
+  meta: { mode: 'test' }
+}
+
+const included = [
+  {
+    id: 'SkuAbc001',
+    type: 'skus',
+    links: { self: 'https://react-components-store.commercelayer.io/api/skus/SkuAbc001' },
+    attributes: {
+      code: 'TSHIRTMM000000FFFFFFXLXX',
+      name: 'Black T-Shirt XL',
+      image_url: 'https://img.commercelayer.io/skus/TSHIRTMM000000FFFFFFXLXX.png'
+    },
+    relationships: {},
+    meta: { mode: 'test' }
+  },
+  {
+    id: 'SkuAbc002',
+    type: 'skus',
+    links: { self: 'https://react-components-store.commercelayer.io/api/skus/SkuAbc002' },
+    attributes: {
+      code: 'PANTSMM000000FFFFFFXXXX',
+      name: 'Black Pants',
+      image_url: 'https://img.commercelayer.io/skus/PANTSMM000000FFFFFFXXXX.png'
+    },
+    relationships: {},
+    meta: { mode: 'test' }
+  }
+]
+
+export default [
+  http.get(
+    'https://react-components-store.commercelayer.io/api/sku_lists/:id',
+    () => {
+      return HttpResponse.json({
+        data: skuListData,
+        included
+      })
+    }
+  )
+]

packages/document/mocks/data/skus.js

@@ -0,0 +1,73 @@
+import { http, HttpResponse } from 'msw'
+
+const skuList = [
+  {
+    id: 'SkuAbc001',
+    type: 'skus',
+    links: { self: 'https://react-components-store.commercelayer.io/api/skus/SkuAbc001' },
+    attributes: {
+      code: 'TSHIRTMM000000FFFFFFXLXX',
+      name: 'Black T-Shirt XL',
+      description: 'A comfortable black t-shirt in XL size.',
+      image_url: 'https://img.commercelayer.io/skus/TSHIRTMM000000FFFFFFXLXX.png',
+      do_not_ship: false,
+      do_not_track: false,
+      pieces_per_pack: null,
+      weight: null,
+      unit_of_weight: null,
+      hs_tariff_number: null,
+      inbound_tracking: null,
+      created_at: '2023-01-01T00:00:00.000Z',
+      updated_at: '2023-01-01T00:00:00.000Z',
+      reference: null,
+      reference_origin: null,
+      metadata: {}
+    },
+    relationships: {},
+    meta: { mode: 'test' }
+  },
+  {
+    id: 'SkuAbc002',
+    type: 'skus',
+    links: { self: 'https://react-components-store.commercelayer.io/api/skus/SkuAbc002' },
+    attributes: {
+      code: 'PANTSMM000000FFFFFFXXXX',
+      name: 'Black Pants',
+      description: 'Classic black pants.',
+      image_url: 'https://img.commercelayer.io/skus/PANTSMM000000FFFFFFXXXX.png',
+      do_not_ship: false,
+      do_not_track: false,
+      pieces_per_pack: null,
+      weight: null,
+      unit_of_weight: null,
+      hs_tariff_number: null,
+      inbound_tracking: null,
+      created_at: '2023-01-01T00:00:00.000Z',
+      updated_at: '2023-01-01T00:00:00.000Z',
+      reference: null,
+      reference_origin: null,
+      metadata: {}
+    },
+    relationships: {},
+    meta: { mode: 'test' }
+  }
+]
+
+// MSW v2 handler (canonical pattern for this project — existing handlers use the v1 compat shim).
+// This broad match intercepts all GET /api/skus requests regardless of query params.
+// Add more specific handlers above this one if you need different responses per query.
+export default [
+  http.get(
+    'https://react-components-store.commercelayer.io/api/skus',
+    () => {
+      return HttpResponse.json({
+        data: skuList,
+        meta: { record_count: 2, page_count: 1 },
+        links: {
+          first: 'https://react-components-store.commercelayer.io/api/skus?page[number]=1',
+          last: 'https://react-components-store.commercelayer.io/api/skus?page[number]=1'
+        }
+      })
+    }
+  )
+]

packages/document/mocks/handlers.js

@@ -3,6 +3,8 @@ import bundles from './data/bundles'
 import lineItems from './data/line_items'
 import markets from './data/markets'
 import orders from './data/orders'
+import skus from './data/skus'
+import skuLists from './data/sku_lists'
 import tags from './data/tags'
 
 export const handlers = [
@@ -11,5 +13,7 @@ export const handlers = [
   ...lineItems,
   ...markets,
   ...orders,
+  ...skus,
+  ...skuLists,
   ...tags
 ]

packages/document/package.json

@@ -8,37 +8,34 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "mcp": "storybook mcp"
   },
   "dependencies": {
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.0",
+    "@chromatic-com/storybook": "^5.1.1",
     "@eslint/js": "^9.39.2",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^10.1.11",
-    "@storybook/addon-mdx-gfm": "^8.6.14",
-    "@storybook/addon-onboarding": "^10.1.11",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^10.1.11",
-    "@storybook/react-vite": "^10.1.11",
-    "@storybook/test": "^8.6.15",
-    "@storybook/theming": "^8.6.14",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-links": "^10.3.3",
+    "@storybook/addon-mcp": "^0.4.2",
+    "@storybook/addon-onboarding": "^10.3.3",
+    "@storybook/icons": "^2.0.1",
+    "@storybook/react": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
     "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.26",
-    "eslint-plugin-storybook": "^10.1.11",
+    "eslint-plugin-storybook": "^10.3.3",
     "globals": "^17.0.0",
     "msw": "^2.12.7",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.1.11",
+    "storybook": "^10.3.3",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.53.0",
     "vite": "^7.3.1",