Web Synth/Module Picker

Modal picker listing every Web Synth module manifest for adding a module to a patch.

Web Synth

All nineteen modules

Closed with trigger

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Migrated to the default-export story contract (issue #2051). `render` returns // the client island `<PickerHarness />` without executing it, so the module is // SSR-import-safe and the picker's hooks only run inside the preview iframe. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import type { JSX } from 'preact'; import { useState } from 'preact/hooks'; import { WEB_SYNTH_MODULE_REGISTRY, type WebSynthModuleType } from './module-registry'; import { WebSynthModulePicker } from './module-picker'; const meta: StoryMeta = { title: 'Web Synth/Module Picker', category: 'Web Synth', description: 'Modal picker listing every Web Synth module manifest for adding a module to a patch.', usage: `import { WebSynthModulePicker } from '@/src/components/web-synth/module-picker';\n\n<WebSynthModulePicker open onOpenChange={setOpen} manifests={manifests} onPick={onPick} />`, }; export default meta; const storyStyle: JSX.CSSProperties = { minHeight: '46rem', padding: 'var(--zaudio-sp-3xl)', background: 'var(--zaudio-patch-panel)', color: 'var(--zaudio-text)', }; function PickerHarness({ initiallyOpen = true }: { initiallyOpen?: boolean }) { const [open, setOpen] = useState(initiallyOpen); const [lastPick, setLastPick] = useState<WebSynthModuleType | null>(null); return ( <div style={storyStyle}> <button type="button" onClick={() => setOpen(true)}> ＋ module </button> {lastPick && <p>Last picked: {lastPick}</p>} <WebSynthModulePicker open={open} onOpenChange={setOpen} manifests={Object.values(WEB_SYNTH_MODULE_REGISTRY)} onPick={setLastPick} /> </div> ); } export const AllNineteenModules = defineStory({ name: 'All nineteen modules', render: () => <PickerHarness />, }); export const ClosedWithTrigger = defineStory({ name: 'Closed with trigger', render: () => <PickerHarness initiallyOpen={false} />, });