ProductGridItem

SSR-only product grid card for the /products/ listing — thumbnail, name/description, price slot, and status/bundle/brand badge overlays.

Product Cards

Default

Bundle + brand badge (corner flip to top-right)

Bundle, no brand badge (bottom-right, brand-page context)

Sold status (ribbon, price still shown)

Discontinued (card-treatment: grayscale image, no ribbon, no price)

Price range (multi-price group minimum)

Incoming, price label (pre-order)

Time Sale integration (SSR shows the normal price)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ProductGridItem — new coverage (epic #1647, wave 6 / #1660). // THE canonical product card (see root CLAUDE.md's detailHref reference pattern). // // Fixtures use real image slugs + brand slugs (oxi-coral, oxi-one-mk2-black, // addac104-0-front) already present in metadata-db.json / brands.mjs so the // thumbnail + brand-corner logo render for real in the preview — matching the // precedent set by components/mdx/related-products.stories.tsx, which pulls // real catalog data directly (no mock layer). `ProductGridInput`/`ProductGridItemProps` // aren't exported by the component, so their shape is derived inline (STORIES rule — // see arrow-tag.stories.tsx for the same pattern) rather than widening the // component's public surface just for story typing. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import ProductGridItem from './product-grid-item'; type ProductGridItemProps = Parameters<typeof ProductGridItem>[0]; type ProductGridInput = ProductGridItemProps['product']; const meta: StoryMeta = { title: 'ProductGridItem', category: 'Product Cards', description: 'SSR-only product grid card for the /products/ listing — thumbnail, name/description, price slot, and status/bundle/brand badge overlays.', usage: `import ProductGridItem from '@/src/components/products/product-grid-item';\n\n<ProductGridItem product={product} locale="ja" />`, }; export default meta; const baseProduct: ProductGridInput = { slug: 'oxi-coral', name: 'OXI Coral', nameEn: 'OXI Coral', description: '8ボイスのマルチティンバーなポリシンセモジュール。シンセ、サンプラー、ドラムの機能を統合。', descriptionEn: '8-voice multitimbral polysynth module combining synth, sampler, and drum functions.', imgSrc: '/images/p/coral-0-front__og', detailHref: '/products/oxi-coral-intro/', mercariProductId: 'RnEDoRrFWVBKhA9H58VZPh', brand: 'oxi', price: 66800, }; export const Default = defineStory({ name: 'Default', render: () => <ProductGridItem product={baseProduct} locale="ja" />, }); export const BundleTopRightWithBrandBadge = defineStory({ name: 'Bundle + brand badge (corner flip to top-right)', render: () => ( <ProductGridItem product={{ ...baseProduct, slug: 'addac120s-system-bundle-demo', name: 'ADDAC120 System Bundle', imgSrc: '/images/p/addac104-0-front', brand: 'addac', price: 450000, bundle: { componentSlugs: ['addac104', 'addac107'] }, }} locale="ja" showBrandLogo={true} /> ), }); export const BundleNoBrandBadge = defineStory({ name: 'Bundle, no brand badge (bottom-right, brand-page context)', render: () => ( <ProductGridItem product={{ ...baseProduct, slug: 'addac120s-system-bundle-demo', name: 'ADDAC120 System Bundle', imgSrc: '/images/p/addac104-0-front', brand: 'addac', price: 450000, bundle: { componentSlugs: ['addac104', 'addac107'] }, }} locale="ja" showBrandLogo={false} /> ), }); export const SoldStatus = defineStory({ name: 'Sold status (ribbon, price still shown)', render: () => <ProductGridItem product={{ ...baseProduct, mercariStatus: 'sold' }} locale="ja" />, }); export const DiscontinuedStatus = defineStory({ name: 'Discontinued (card-treatment: grayscale image, no ribbon, no price)', render: () => ( <ProductGridItem product={{ ...baseProduct, mercariStatus: 'discontinued' }} locale="ja" /> ), }); export const PriceRange = defineStory({ name: 'Price range (multi-price group minimum)', render: () => ( <ProductGridItem product={{ ...baseProduct, slug: 'oxi-one-mk2-black', name: 'OXI ONE MKII', imgSrc: '/images/p/oxi-one-mk2-02-angle', price: 138420, priceRange: true, }} locale="ja" /> ), }); export const IncomingWithPriceLabel = defineStory({ name: 'Incoming, price label (pre-order)', render: () => ( <ProductGridItem product={{ ...baseProduct, mercariStatus: 'incoming', priceLabel: '入荷次第販売' }} locale="ja" /> ), }); export const TimeSaleSlug = defineStory({ name: 'Time Sale integration (SSR shows the normal price)', render: () => ( <div class="flex flex-col gap-vgap-xs"> <ProductGridItem product={baseProduct} locale="ja" /> <p class="font-futura text-xs text-zd-subtext max-w-[220px]"> `oxi-coral` carries a live Time Sale record — `SalePriceSlot` always renders the plain normal price at SSR time; the sale layout only appears after client hydration reads `Date.now()` inside the active window. </p> </div> ), });