ModuleCard

SSR-only MetaModule reference card: panel thumbnail + name/plugin + (list layout) CPU load, tags, and description columns.

MetaModule Reference

Small layout

List layout (CPU load / tags / description columns)

No tags / no description (list layout "—")

Annotated (data-mm-annot)

All layouts

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ModuleCard — new gap story (epic #1647 Wave 6, #1663). // // ModuleCard's layout classes are gated behind `[data-mm-layout=X]` ANCESTOR // selectors (see layout-classes.ts / module-card.tsx's own header comment), so // each variant wraps the card(s) in the same `<ul data-mm-grid // data-mm-layout="...">` shell the real `/metamodule-ref/` page renders // (metamodule-ref-page.tsx) — without it every layout renders identically to // "small". import type { ComponentChildren } from 'preact'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import ModuleCard from './module-card'; import { MM_GRID_CLASS } from './layout-classes'; import type { ModuleListItem } from '@/lib/types/metamodule-ref'; const meta: StoryMeta = { title: 'ModuleCard', category: 'MetaModule Reference', description: 'SSR-only MetaModule reference card: panel thumbnail + name/plugin + (list layout) CPU load, tags, and description columns.', usage: `import ModuleCard from '@/src/components/metamodule-ref/module-card';\n\n<ul data-mm-grid data-mm-layout="small"><ModuleCard module={module} /></ul>`, }; export default meta; const sampleModule: ModuleListItem = { slug: '21khz-d', plugin: '21kHz', brand: '21kHz', name: 'D∞', image: '/images/modules/21khz-d.png', tags: ['Tuner', 'Utility', 'Polyphonic'], cpuLoad: '2 – 3%', description: 'A tuner utility module with a wide detection range.', cpuLoadPoly: '10 – 29%', }; const noTagsNoDescription: ModuleListItem = { slug: 'mi-plaits', plugin: 'Mutable Instruments', brand: 'Mutable Instruments', name: 'Plaits', image: '/images/modules/mi-plaits.png', tags: [], cpuLoad: null, description: '', }; /** `<ul data-mm-grid data-mm-layout="...">` shell mirroring metamodule-ref-page.tsx. */ const GridShell = ({ layout, children, }: { layout: 'small' | 'large' | 'tiles' | 'list'; children: ComponentChildren; }) => ( <ul data-mm-grid data-mm-layout={layout} class={MM_GRID_CLASS}> {children} </ul> ); export const SmallLayout = defineStory({ name: 'Small layout', render: () => ( <GridShell layout="small"> <ModuleCard module={sampleModule} /> </GridShell> ), }); export const ListLayout = defineStory({ name: 'List layout (CPU load / tags / description columns)', render: () => ( <GridShell layout="list"> <ModuleCard module={sampleModule} /> </GridShell> ), }); export const NoTagsNoDescription = defineStory({ name: 'No tags / no description (list layout "—")', render: () => ( <GridShell layout="list"> <ModuleCard module={noTagsNoDescription} /> </GridShell> ), }); export const Annotated = defineStory({ name: 'Annotated (data-mm-annot)', render: () => ( <GridShell layout="small"> <ModuleCard module={sampleModule} annotated /> </GridShell> ), }); export const AllLayouts = defineStory({ name: 'All layouts', render: () => ( <div className="flex flex-col gap-vgap-md"> {(['small', 'large', 'tiles', 'list'] as const).map((layout) => ( <div key={layout}> <p className="text-muted text-xs pb-vgap-2xs">{layout}</p> <GridShell layout={layout}> <ModuleCard module={sampleModule} /> </GridShell> </div> ))} </div> ), });