ProductNavList

Product grid — variant-driven responsive column layout for the homepage, hot-stock, /products listing, and brand pages.

Product Cards

Brand (2-col)

Brand, single product (full width)

Products listing

Hot stock

Homepage

Empty (Coming soon)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ProductNavList — new gap story (epic #1647 Wave 6, #1663). // // Same catalog/metadata-db import-graph tradeoff as product-nav-item.stories.tsx // (ProductNavList composes ProductNavItem / HomeProductNavItem, both real // components) — see that file's header comment for the rationale. Fixture // image slugs are nonexistent `/images/p/sg-mock-*` paths, resolved to a // placeholder by the styleguide's `image-placeholder` plugin. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ProductNavList } from './product-nav-list'; import type { ProductEnhanced } from '@/lib/types/product-enhanced'; import type { Brand } from '@/src/types/brand'; const meta: StoryMeta = { title: 'ProductNavList', category: 'Product Cards', description: 'Product grid — variant-driven responsive column layout for the homepage, hot-stock, /products listing, and brand pages.', usage: `import { ProductNavList } from '@/components/shared/product-nav-list';\n\n<ProductNavList products={products} variant="products-listing" />`, }; export default meta; const mockBrand: Brand = { slug: 'oxi', name: 'OXI Instruments', svg: null }; function mockProducts(count: number): ProductEnhanced[] { return Array.from({ length: count }, (_, i) => ({ slug: `sg-mock-product-${i}`, name: `Mock Module ${i + 1}`, subtitle: null, brand: mockBrand, imgSrc: `/images/p/sg-mock-product-${i}/1200w.webp`, blurHash: '000000', description: 'モジュラーシンセサイザー用のモックモジュールです。', detailHref: `/products/sg-mock-product-${i}-intro/`, mercariProductId: `mock-id-${i}`, mercariStatus: null, price: 12800 + i * 3000, priceLabel: null, index: i, })); } export const BrandVariant = defineStory({ name: 'Brand (2-col)', render: () => ( <div className="max-w-[680px]"> <ProductNavList products={mockProducts(4)} variant="brand" /> </div> ), }); export const SingleProductBrandVariant = defineStory({ name: 'Brand, single product (full width)', render: () => ( <div className="max-w-[680px]"> <ProductNavList products={mockProducts(1)} variant="brand" /> </div> ), }); export const ProductsListingVariant = defineStory({ name: 'Products listing', render: () => ( <div className="max-w-[900px]"> <ProductNavList products={mockProducts(6)} variant="products-listing" /> </div> ), }); export const HotstockVariant = defineStory({ name: 'Hot stock', render: () => ( <div className="max-w-[900px]"> <ProductNavList products={mockProducts(6)} variant="hotstock" /> </div> ), }); export const HomepageVariant = defineStory({ name: 'Homepage', render: () => ( <div className="max-w-[900px]"> <ProductNavList products={mockProducts(8)} variant="homepage" /> </div> ), }); export const Empty = defineStory({ name: 'Empty (Coming soon)', render: () => ( <div className="max-w-[680px]"> <ProductNavList products={[]} variant="brand" /> </div> ), });