ModuleDialog

Fullscreen MetaModule reference detail dialog: thumbnail strip, title bar with 基本情報/パネルの説明 tabs, close/prev/next controls, and a scrollable content region.

MetaModule Reference

Closed (renders nothing)

Open (single-section module)

Open (annotated module — 基本情報/パネルの説明 tabs)

Open (English locale)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ModuleDialog — new gap story (epic #1647 Wave 6, #1663). // // ModuleDialog fetches `/metamodule-ref/detail/{slug}.json` (and, when // annotated, `/metamodule-ref/annotations[-ja]/{slug}.json`) on mount — those // static JSON files are build artifacts of the main site, not present in the // isolated styleguide preview, so the fetch reliably 404s and the dialog // settles into its real error state (no MSW mocking needed; this IS the // dialog's genuine network-unavailable behavior, not a stand-in for it). The // chrome around that content region — thumb strip, title (read live from the // matching ModuleCard's `data-mm-*` attributes, exactly like production), // close/prev/next controls, and the 基本情報/パネルの説明 tab bar — renders // fully and is what these variants demonstrate. // // A matching `<ModuleCard>` is rendered alongside each dialog (same slug) so // `readCardTitle`/`hasAnnotationForSlug` — which query the DOM for // `[data-mm-slug]`, exactly as they do in production — resolve real data // instead of falling back to blank strings. // // ModuleDialog portals into `document.body` as `position: fixed; inset: 0` // (unlike BaseDialog/NotifyMeDialog, it has no `portalContainer` prop for an // embedded/absolute story mode — see mobile-menu-drawer.stories.tsx for the // same situation). The catalog's preview iframe sizes itself from // `document.body.scrollHeight` (preview-app.tsx), which a `position: fixed` // element does NOT contribute to — so an "Open" variant's iframe would stay // at its ~180px default and clip the fullscreen chrome. `<HeightReserve>` // below is a plain normal-flow spacer (no dialog content of its own) sized to // comfortably fit the thumb strip + top bar + a short content region, so the // reported body height — and therefore the iframe — is tall enough for the // portaled dialog's `inset: 0` to actually cover. import type { ComponentChildren } from 'preact'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import ModuleDialog from './module-dialog'; import ModuleCard from './module-card'; import { MM_GRID_CLASS } from './layout-classes'; import type { ModuleListItem } from '@/lib/types/metamodule-ref'; const meta: StoryMeta = { title: 'ModuleDialog', category: 'MetaModule Reference', description: 'Fullscreen MetaModule reference detail dialog: thumbnail strip, title bar with 基本情報/パネルの説明 tabs, close/prev/next controls, and a scrollable content region.', usage: `import ModuleDialog from '@/src/components/metamodule-ref/module-dialog';\n\n<ModuleDialog slug={openSlug} visibleSlugs={slugs} onClose={close} onNavigate={setOpenSlug} />`, }; export default meta; const plainModule: ModuleListItem = { slug: '21khz-d', plugin: '21kHz', brand: '21kHz', name: 'D∞', image: '/images/modules/21khz-d.png', tags: ['Tuner', 'Utility'], cpuLoad: '2 – 3%', description: 'A tuner utility module.', }; const annotatedModule: ModuleListItem = { slug: 'airwindows-distortion', plugin: 'Airwindows', brand: 'Airwindows', name: 'Distortion', image: '/images/modules/airwindows-distortion.png', tags: ['Distortion', 'Effect'], cpuLoad: '3 – 5%', description: 'A single Airwindows distortion effect.', }; const VISIBLE_SLUGS = ['4ms-djembe-drum', plainModule.slug, 'mi-plaits']; const ANNOTATED_VISIBLE_SLUGS = ['4ms-djembe-drum', annotatedModule.slug, 'mi-plaits']; /** See the file header comment — a normal-flow height budget for the portaled fixed dialog. */ const HeightReserve = ({ children }: { children?: ComponentChildren }) => ( <div style={{ minHeight: '640px' }}>{children}</div> ); export const Closed = defineStory({ name: 'Closed (renders nothing)', render: () => ( <div className="min-h-[80px] flex items-center justify-center border border-dashed border-zd-gray/40"> <span className="text-muted text-xs">slug=null — ModuleDialog renders nothing</span> <ModuleDialog slug={null} visibleSlugs={VISIBLE_SLUGS} onClose={() => {}} onNavigate={() => {}} /> </div> ), }); export const Open = defineStory({ name: 'Open (single-section module)', render: () => ( <HeightReserve> <ul data-mm-grid data-mm-layout="small" class={MM_GRID_CLASS}> <ModuleCard module={plainModule} /> </ul> <ModuleDialog slug={plainModule.slug} visibleSlugs={VISIBLE_SLUGS} onClose={() => {}} onNavigate={() => {}} /> </HeightReserve> ), }); export const OpenAnnotated = defineStory({ name: 'Open (annotated module — 基本情報/パネルの説明 tabs)', render: () => ( <HeightReserve> <ul data-mm-grid data-mm-layout="small" class={MM_GRID_CLASS}> <ModuleCard module={annotatedModule} annotated /> </ul> <ModuleDialog slug={annotatedModule.slug} visibleSlugs={ANNOTATED_VISIBLE_SLUGS} onClose={() => {}} onNavigate={() => {}} /> </HeightReserve> ), }); export const OpenEnglishLocale = defineStory({ name: 'Open (English locale)', render: () => ( <HeightReserve> <ul data-mm-grid data-mm-layout="small" class={MM_GRID_CLASS}> <ModuleCard module={plainModule} locale="en" /> </ul> <ModuleDialog slug={plainModule.slug} visibleSlugs={VISIBLE_SLUGS} onClose={() => {}} onNavigate={() => {}} locale="en" /> </HeightReserve> ), });