Skip to content

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

Merged
acasazza merged 1 commit intov5.0.0from
v5/docs/skus-story-storybook-v10
Apr 7, 2026
Merged

📚 docs(document): add SKUs story and upgrade Storybook to v10#735
acasazza merged 1 commit intov5.0.0from
v5/docs/skus-story-storybook-v10

Conversation

@acasazza
Copy link
Copy Markdown
Member

@acasazza acasazza commented Apr 7, 2026

Summary

Closes #733
Closes #730
Relates to #727

  • Upgrade all @storybook/* packages to ^10.3.4 (from mixed v8/v10 state)
  • Add @storybook/addon-mcp + .mcp.json MCP server config at repo root
  • Create packages/document/src/stories/skus/001.skus.mdx — documentation for all 5 SKU components (SkusContainer, Skus, SkuField, SkuListsContainer, SkuList) with prop tables, requirement/children badges, and code examples
  • Create packages/document/src/stories/skus/skus.stories.tsx — interactive visual-test stories
  • Add MSW mock handlers for /api/skus and /api/sku_lists/:id

Bug fixes

  • SkuListSkus rendered empty: SkuList was registering the list ID but never bridging the fetched SKU data into SkuContext, so <Skus> had nothing to iterate. Fixed by wrapping children with SkuContext.Provider containing the resolved skuLists[id] data.
  • Mock data out of sync: MSW fixture SKU codes didn't match the story values, causing stale/wrong data in Storybook. Updated mocks/data/skus.js and mocks/data/sku_lists.js with matching codes and the correct SKU list ID (yZjQIDxrly).

New features

  • SkuListsContainerparams prop: Added an optional params?: QueryParamsRetrieve<SkuList> prop. Default behavior keeps include: ["skus"] (no fields filter → all SKU fields are returned). Consumers can pass any valid retrieve params to override or extend the default (e.g. restrict fields, add extra includes).
  • Stories updated: Added a second SkuListsContainer story (custom params) to demonstrate the new params prop with explicit include and fields customization.

Test plan

  • pnpm storybook starts without errors in packages/document
  • Storybook sidebar shows "Skus" section with "Overview" and "Stories" pages
  • All 5 SKU components are documented in the Overview page
  • SkuListsContainer — default include (skus) story renders SKU name and code from the real API
  • SkuListsContainer — custom params story renders with explicit field selection
  • SkusContainer — name and code and SkuField — image stories render correctly
  • pnpm --filter document run mcp starts the MCP server

…erver

- Upgrade all @storybook/* packages to ^10.3.4
- Add @storybook/addon-mcp with .mcp.json MCP server config
- Add stories/skus/001.skus.mdx with docs for all 5 SKU components
- Add stories/skus/skus.stories.tsx with 3 visual-test stories
- Add MSW mocks for /api/skus and /api/sku_lists/:id

Closes #733
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Apr 7, 2026

npm i https://pkg.pr.new/@commercelayer/react-components@735

commit: 99541b5

@acasazza acasazza merged commit f9c36c9 into v5.0.0 Apr 7, 2026
4 checks passed
@acasazza acasazza deleted the v5/docs/skus-story-storybook-v10 branch April 7, 2026 16:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment