RelatedProducts

Product cards for a set of related-product ids, pulled live from the real catalog (`src/data/products.mjs`) — no mock layer. Shows a warning for any id not found in the catalog.

Product Pages

Two products

Four products

Invalid id

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { RelatedProducts } from './related-products'; /** * Unlike PurchaseNav, RelatedProducts pulls live catalog data directly from * `src/data/products.mjs` — there is no mock layer. Variants below use * known-stable ids already in production MDX content, so they stay * accurate as long as those products remain in the catalog. */ const meta: StoryMeta = { title: 'RelatedProducts', category: 'Product Pages', description: 'Product cards for a set of related-product ids, pulled live from the real catalog (`src/data/products.mjs`) — no mock layer. Shows a warning for any id not found in the catalog.', usage: `import { RelatedProducts } from '@/components/mdx/related-products';\n\n<RelatedProducts ids={['oxi-coral', 'oxi-coral-bk']} />`, }; export default meta; /** * Two Products * * The default 2-col "brand" grid variant with a single-brand pair. * Same ids used live in `src/mdx/guides/oxi-coral-guide-ep1.mdx`. */ export const TwoProducts = defineStory({ name: 'Two products', render: () => <RelatedProducts ids={['oxi-coral', 'oxi-coral-bk']} />, }); /** * Four Products * * The exact 4-card grid rendered live via `MetaModuleExpanders` on * `/guides/4ms-podcast-richard-devine/` — the reference pattern this * component replaces PurchaseNav with in the Highlights mail archive. */ export const FourProducts = defineStory({ name: 'Four products', render: () => ( <RelatedProducts ids={[ 'metamodule', 'metamodule-audio-expander', 'metamodule-button-expander', 'metamodule-wifi-expander', ]} /> ), }); /** * Invalid Id * * Demonstrates the "以下の商品が見つかりませんでした" warning branch shown * when a requested id has no matching catalog product. */ export const InvalidId = defineStory({ name: 'Invalid id', render: () => <RelatedProducts ids={['nonexistent-product-demo']} />, });