MSW Migration Checklist

[louis-bompart]

MSW Migration Checklist

Stories that need to be updated to use MSW handlers for API mocking.

---

General (1)

• .storybook/Crawling.stories.tsx

Commerce Components (41)

Facets & Filtering

• src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.new.stories.tsx
• src/components/commerce/atomic-commerce-category-facet/atomic-commerce-category-facet.new.stories.tsx
• src/components/commerce/atomic-commerce-facet/atomic-commerce-facet.new.stories.tsx
• src/components/commerce/atomic-commerce-facets/atomic-commerce-facets.new.stories.tsx
• src/components/commerce/atomic-commerce-numeric-facet/atomic-commerce-numeric-facet.new.stories.tsx
• src/components/commerce/atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet.new.stories.tsx

Search & Navigation

• src/components/commerce/atomic-commerce-did-you-mean/atomic-commerce-did-you-mean.new.stories.tsx
• src/components/commerce/atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.new.stories.tsx
• src/components/commerce/atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.new.stories.tsx
• src/components/commerce/atomic-commerce-sort-dropdown/atomic-commerce-sort-dropdown.new.stories.tsx
• src/components/commerce/atomic-commerce-refine-toggle/atomic-commerce-refine-toggle.new.stories.tsx

Results & Pagination

• src/components/commerce/atomic-commerce-load-more-products/atomic-commerce-load-more-products.new.stories.tsx
• src/components/commerce/atomic-commerce-no-products/atomic-commerce-no-products.new.stories.tsx
• src/components/commerce/atomic-commerce-pager/atomic-commerce-pager.new.stories.tsx
• src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.new.stories.tsx
• src/components/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.new.stories.tsx
• src/components/commerce/atomic-commerce-query-summary/atomic-commerce-query-summary.new.stories.tsx

Layout & UI

• src/components/commerce/atomic-commerce-layout/atomic-commerce-layout.new.stories.tsx
• src/components/commerce/atomic-commerce-text/atomic-commerce-text.new.stories.tsx

Interfaces

• src/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.new.stories.tsx

Product Templates (21)

• src/components/commerce/atomic-product-children/atomic-product-children.new.stories.tsx
• src/components/commerce/atomic-product-description/atomic-product-description.new.stories.tsx
• src/components/commerce/atomic-product-excerpt/atomic-product-excerpt.new.stories.tsx
• src/components/commerce/atomic-product-field-condition/atomic-product-field-condition.new.stories.tsx
• src/components/commerce/atomic-product-image/atomic-product-image.new.stories.tsx
• src/components/commerce/atomic-product-link/atomic-product-link.new.stories.tsx
• src/components/commerce/atomic-product-multi-value-text/atomic-product-multi-value-text.new.stories.tsx
• src/components/commerce/atomic-product-numeric-field-value/atomic-product-numeric-field-value.new.stories.tsx
• src/components/commerce/atomic-product-price/atomic-product-price.new.stories.tsx
• src/components/commerce/atomic-product-rating/atomic-product-rating.new.stories.tsx
• src/components/commerce/atomic-product-section-actions/atomic-product-section-actions.new.stories.tsx
• src/components/commerce/atomic-product-section-badges/atomic-product-section-badges.new.stories.tsx
• src/components/commerce/atomic-product-section-bottom-metadata/atomic-product-section-bottom-metadata.new.stories.tsx
• src/components/commerce/atomic-product-section-children/atomic-product-section-children.new.stories.tsx
• src/components/commerce/atomic-product-section-description/atomic-product-section-description.new.stories.tsx
• src/components/commerce/atomic-product-section-emphasized/atomic-product-section-emphasized.new.stories.tsx
• src/components/commerce/atomic-product-section-metadata/atomic-product-section-metadata.new.stories.tsx
• src/components/commerce/atomic-product-section-name/atomic-product-section-name.new.stories.tsx
• src/components/commerce/atomic-product-section-visual/atomic-product-section-visual.new.stories.tsx
• src/components/commerce/atomic-product-text/atomic-product-text.new.stories.tsx

Common Components (6)

• src/components/common/atomic-aria-live/atomic-aria-live.new.stories.tsx
• src/components/common/atomic-component-error/atomic-component-error.new.stories.tsx
• src/components/common/atomic-focus-trap/atomic-focus-trap.new.stories.tsx
• src/components/common/atomic-icon/atomic-icon.new.stories.tsx
• src/components/common/atomic-layout-section/atomic-layout-section.new.stories.tsx
• src/components/common/atomic-numeric-range/atomic-numeric-range.new.stories.tsx

Insight Components (5)

• src/components/insight/atomic-insight-edit-toggle/atomic-insight-edit-toggle.new.stories.tsx
• src/components/insight/atomic-insight-full-search-button/atomic-insight-full-search-button.new.stories.tsx
• src/components/insight/atomic-insight-generate-answer-button/atomic-insight-generate-answer-button.new.stories.tsx
• src/components/insight/atomic-insight-interface/atomic-insight-interface.new.stories.tsx
• src/components/insight/atomic-insight-layout/atomic-insight-layout.new.stories.tsx

IPX Components (2)

• src/components/ipx/atomic-ipx-button/atomic-ipx-button.new.stories.tsx
• src/components/ipx/atomic-ipx-modal/atomic-ipx-modal.new.stories.tsx

Search Components (31)

Facets

• src/components/search/atomic-facet/atomic-facet.new.stories.tsx
• src/components/search/atomic-rating-facet/atomic-rating-facet.new.stories.tsx
• src/components/search/atomic-rating-range-facet/atomic-rating-range-facet.new.stories.tsx

Search & Navigation

• src/components/search/atomic-breadbox/atomic-breadbox.new.stories.tsx
• src/components/search/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.new.stories.tsx
• src/components/search/atomic-search-box-recent-queries/atomic-search-box-recent-queries.new.stories.tsx
• src/components/search/atomic-smart-snippet-suggestions/atomic-smart-snippet-suggestions.new.stories.tsx
• src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.new.stories.tsx
• src/components/search/atomic-tab/atomic-tab.new.stories.tsx
• src/components/search/atomic-refine-toggle/atomic-refine-toggle.new.stories.tsx

Results & Pagination

• src/components/search/atomic-pager/atomic-pager.new.stories.tsx
• src/components/search/atomic-query-summary/atomic-query-summary.new.stories.tsx
• src/components/search/atomic-result-list/atomic-result-list.new.stories.tsx
• src/components/search/atomic-results-per-page/atomic-results-per-page.new.stories.tsx

Layout & UI

• src/components/search/atomic-search-layout/atomic-search-layout.new.stories.tsx
• src/components/search/atomic-text/atomic-text.new.stories.tsx
• src/components/search/atomic-html/atomic-html.new.stories.tsx

Interfaces

• src/components/search/atomic-search-interface/atomic-search-interface.new.stories.tsx

Result Templates (14)

• src/components/search/atomic-result-children-template/atomic-result-children-template.new.stories.tsx
• src/components/search/atomic-result-html/atomic-result-html.new.stories.tsx
• src/components/search/atomic-result-number/atomic-result-number.new.stories.tsx
• src/components/search/atomic-result-rating/atomic-result-rating.new.stories.tsx
• src/components/search/atomic-result-section-actions/atomic-result-section-actions.new.stories.tsx
• src/components/search/atomic-result-section-badges/atomic-result-section-badges.new.stories.tsx
• src/components/search/atomic-result-section-bottom-metadata/atomic-result-section-bottom-metadata.new.stories.tsx
• src/components/search/atomic-result-section-children/atomic-result-section-children.new.stories.tsx
• src/components/search/atomic-result-section-emphasized/atomic-result-section-emphasized.new.stories.tsx
• src/components/search/atomic-result-section-excerpt/atomic-result-section-excerpt.new.stories.tsx
• src/components/search/atomic-result-section-title-metadata/atomic-result-section-title-metadata.new.stories.tsx
• src/components/search/atomic-result-section-title/atomic-result-section-title.new.stories.tsx
• src/components/search/atomic-result-section-visual/atomic-result-section-visual.new.stories.tsx
• src/components/search/atomic-result-text/atomic-result-text.new.stories.tsx

---

Migration Guidelines

When migrating a story:

1. Import the appropriate Mock API (e.g., MockCommerceApi, MockSearchApi, MockInsightApi)
2. Create an API harness instance at the top level
3. Add MSW handlers to the parameters: msw: {handlers: [...apiHarness.handlers]}
4. Add a beforeEach hook to clear mocked responses
5. Configure the mock responses as needed for the component
6. Test the story to ensure it renders correctly

See the creating-stories skill for detailed patterns and examples.