CaseBuilderStage

Exploded-view SVG stage: fetches the vendored pre-stamped net SVG at runtime, paints panel fills from the derived colour map, and exposes one delegated click listener. Hover/selected/transparent stroke states are pure CSS.

Product-Specific Blocks

40HP 3DP · first preset

40HP ACR · all clear

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for the Case Builder exploded-view SVG stage (#1931). `render` stays // pure/sync/SSR-safe per the story contract — the SVG fetch + paint happen in // the component's mount effect, never here; in the SSR catalog eval the stage // renders its loading overlay. The colour-derivation logic is covered by // case-builder-logic.test.ts. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { SvgStage } from './svg-stage'; import { firstPresetColorIds } from './case-builder-logic'; import { derivePanelColors } from '@/src/lib/case-builder/utils/panel-colors'; const meta: StoryMeta = { title: 'CaseBuilderStage', category: 'Product-Specific Blocks', description: 'Exploded-view SVG stage: fetches the vendored pre-stamped net SVG at runtime, paints panel fills from the derived colour map, and exposes one delegated click listener. Hover/selected/transparent stroke states are pure CSS.', usage: `import { SvgStage } from '@/src/components/case-builder/svg-stage';\n\n<SvgStage caseType="zudo-block-40-3DP-A" material="3dp" panelColors={...} panelColorIds={...} selectedPanel={null} bgColor="#a8a8a8" gridColor="#969696" locale="ja" onPanelClick={() => {}} />`, }; export default meta; const noop = () => {}; export const ThreeUKurobeni = defineStory({ name: '40HP 3DP · first preset', render: () => { const caseType = 'zudo-block-40-3DP-A'; const panelColorIds = firstPresetColorIds(caseType); return ( <div style={{ maxWidth: '640px' }}> <SvgStage caseType={caseType} panelColorIds={panelColorIds} panelColors={derivePanelColors(panelColorIds, '3dp')} material="3dp" selectedPanel="side1" bgColor="#a8a8a8" gridColor="#969696" locale="ja" onPanelClick={noop} /> </div> ); }, }); export const AcrylicClear = defineStory({ name: '40HP ACR · all clear', render: () => { const caseType = 'zudo-block-40-ACR-A'; const panelColorIds = Object.fromEntries( Object.keys(firstPresetColorIds(caseType)).map((id) => [id, 'clear']), ); return ( <div style={{ maxWidth: '640px' }}> <SvgStage caseType={caseType} panelColorIds={panelColorIds} panelColors={derivePanelColors(panelColorIds, 'acrylic')} material="acrylic" selectedPanel={null} bgColor="#a8a8a8" gridColor="#969696" locale="en" onPanelClick={noop} /> </div> ); }, });