Conversation
commit: |
acasazza
force-pushed
the
v5/docs/getting-started-core-hooks
branch
from
c223fc1 to
937a82c
Compare
…dlers - Replace fire-and-forget worker.start() with Storybook's beforeAll hook so the service worker is registered before any story renders - Set onUnhandledRequest: 'bypass' to let auth calls (auth.commercelayer.io) pass through to the real network without console noise - Add POLOMXXX000000FFFFFFLXXX to mock SKU data with inventory/delivery info - Add GET /api/skus/:id handler so getSkuAvailability can retrieve individual SKU inventory (previously missing, causing silent failures) - Filter GET /api/skus list by filter[code_in] query param
- Delete mocks/ directory (browser.js, handlers.js, all data fixtures) - Delete public/mockServiceWorker.js - Remove msw devDependency, update-mocks script, and msw config block - Remove worker import, beforeAll hook, and MSW imports from preview.tsx - Stories now hit the real Commerce Layer API via useGetToken
Allow callers to customise the SKU fields fetched per list via an
optional params prop (QueryParamsRetrieve<SkuList>).
- include: ["skus"] is always enforced and merged with any
caller-supplied includes
- fields.skus defaults to ["code"] when the caller omits it,
preserving backwards-compat behaviour
- caller can pass fields: { skus: ["code", "name", "image_url"] }
to render additional SKU attributes via SkuField
- params added to useEffect dependency array so fetches re-run
when query params change
…SkuList Skus and SkuField were rendering nothing when used inside SkuList because SkuList was only registering its ID but never populating SkuContext, which is what the Skus component reads from. - SkuList now reads skuLists[id] from SkuListsContext and wraps its children with SkuContext.Provider, bridging the fetched skus so that Skus and SkuField work identically to how they do under SkusContainer - loading is true while skuLists[id] is undefined (not yet fetched) - Update SkuListsContainer story to request name field via params so SkuField attribute="name" renders correctly
acasazza
changed the title
core and hooks packages…nd getSkus util All three files are no longer used after the hooks refactor: - SkuListsReducer.ts — replaced by useSkuLists hook, no remaining imports - SkuReducer.ts — only provided SkuState type to SkuContext; inlined there - utils/getSkus.ts — SKU sorting helper, no remaining imports SkuState is now defined inline in SkuContext.ts alongside the context it shapes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #737
📚 New Storybook getting-started pages
006.core.mdx—@commercelayer/coregetSkus,retrieveSku,updateSku,getPrices,retrievePrice,updatePrice,getSkuAvailability,getSkuLists,retrieveSkuList,getAccessToken){ accessToken, params, options })007.hooks.mdx—@commercelayer/hooksuseSkus,usePrices,useSkuLists,useAvailability)data,isLoading,isValidating,error, fetch/retrieve/update/clear actions,mutate)useSkus,useSkuLists,usePrices,useAvailability🛠 Storybook (
packages/document) fixesmocks/directory,public/mockServiceWorker.js,mswdevDependency and all related config; stories now hit the real Commerce Layer API viauseGetTokenReact is not definedin custom toolbar addon — addedimport React from 'react'toTool.tsx(Storybook manager uses the classic JSX transform)Metaexport in all MDX files — updated import path from@storybook/addon-docs→@storybook/addon-docs/blocks(Storybook 10 subpath)✨ New features (
packages/react-components)SkuListsContainer— newparamspropCallers can now pass
QueryParamsRetrieveto control which SKU fields are fetched per list.include: ["skus"]is always enforced;fields.skusdefaults to["code"]for backwards compatibility.SkuList— bridge fix for<Skus>and<SkuField><Skus>and<SkuField>rendered nothing when used inside<SkuList>becauseSkuListonly registered its ID inSkuListsContextbut never populatedSkuContext, which is whatSkusreads from.SkuListnow wraps its children withSkuContext.Providercontaining its slice of the fetched SKU data — makingSkus+SkuFieldwork identically to how they do underSkusContainer.🧹 Refactor (
packages/react-components)SkuListsReducer.ts— zero consumers after the hooks refactor (dead code)SkuReducer.ts— only consumer wasSkuContext.tsimportingSkuState; type is now inlined directlyutils/getSkus.ts— zero consumers after the hooks refactor (dead code)🧪 Tests (
packages/hooks)useSkuLists.test.ts— 10 unit tests covering: initial state, lazy fetching, query params, loading state, error handling, clear, retrieve, params forwarding, and error on empty IDuseSkus.unit.test.ts— 2 unit tests (mocked core) covering themutateupdater branches: non-matching SKUs kept unchanged, and?? [result]fallback when cache is emptyTest plan
pnpm testinpackages/hooks)pnpm testinpackages/react-components)pnpm --filter hooks test -- --coveragepasses all thresholds (100/100/100/100)pnpm storybookstarts without errors inpackages/documentSkus/Stories > SkuListsContainer — list itemsstory renders SKU name and code for each item in the listSkus/Stories > SkusContainer — name and codestory renders correctly