Web Synth/Context Menu

Anchored popover menu (labels, checks, radios, actions) used across the Web Synth patcher.

Web Synth

Every item kind

Long list at viewport edges

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Migrated to the default-export story contract (issue #2051). Each `render` // returns a client island component (`<...Story />`) WITHOUT executing it — the // hooks/DOM work runs only inside the styleguide's client-only preview iframe, // so the module stays SSR-import-safe and `render()` stays pure + synchronous. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { useMemo, useState } from 'preact/hooks'; import { ContextMenu, type ContextMenuItem } from './context-menu'; import './context-menu.stories.css'; const meta: StoryMeta = { title: 'Web Synth/Context Menu', category: 'Web Synth', description: 'Anchored popover menu (labels, checks, radios, actions) used across the Web Synth patcher.', usage: `import { ContextMenu } from '@/src/components/web-synth/context-menu';\n\n<ContextMenu open anchor={anchorEl} items={items} onClose={close} ariaLabel="Options" />`, }; export default meta; function EveryItemKindStory() { const [anchor, setAnchor] = useState<HTMLButtonElement | null>(null); const [open, setOpen] = useState(true); const [scopeVisible, setScopeVisible] = useState(true); const [range, setRange] = useState<string | number>(2); const [status, setStatus] = useState('Checks and radios rerender without closing.'); const items = useMemo<ContextMenuItem[]>( () => [ { id: 'label', type: 'label', label: 'VCO — options' }, { id: 'check', type: 'check', label: 'Show scope', checked: scopeVisible, onCheckedChange: (checked) => { setScopeVisible(checked); setStatus(`Scope visibility: ${checked ? 'shown' : 'hidden'}`); }, }, { id: 'radio', type: 'radio', label: 'Time range', value: range, options: [ { label: '1x', value: 1 }, { label: '2x', value: 2 }, { label: '4x', value: 4 }, ], onValueChange: (value) => { setRange(value); setStatus(`Time range: ${value}x`); }, }, { id: 'separator', type: 'separator' }, { id: 'duplicate', type: 'action', label: 'Duplicate', onSelect: () => setStatus('Duplicate ran after the menu closed.'), }, { id: 'delete', type: 'action', label: 'Delete module', danger: true, onSelect: () => setStatus('Delete ran after the menu closed.'), }, ], [range, scopeVisible], ); return ( <div class="web-synth-menu-story"> <h2 class="web-synth-menu-story__heading">Every item kind</h2> <p class="web-synth-menu-story__copy"> The menu starts open. Toggle either controlled value, then use the trigger to reopen after an action. </p> <p class="web-synth-menu-story__status" aria-live="polite"> {status} </p> <button ref={setAnchor} type="button" class="web-synth-menu-story__trigger" aria-label="Open VCO options" onClick={() => setOpen(true)} > VCO ⋮ </button> <ContextMenu open={open} anchor={anchor} items={items} onClose={() => setOpen(false)} ariaLabel="VCO options" /> </div> ); } const edgeNames = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const; function ViewportEdgesStory() { const [anchor, setAnchor] = useState<HTMLButtonElement | null>(null); const [open, setOpen] = useState(false); const longItems = useMemo<ContextMenuItem[]>( () => [ { id: 'label', type: 'label', label: 'Long menu — edge check' }, ...Array.from({ length: 18 }, (_, index): ContextMenuItem => ({ id: `action-${index}`, type: 'action', label: `Module option ${index + 1}`, onSelect: () => undefined, })), ], [], ); const openFrom = (element: HTMLButtonElement) => { setAnchor(element); setOpen(true); }; return ( <div class="web-synth-menu-story web-synth-menu-story__edge-canvas"> <h2 class="web-synth-menu-story__heading">Long list at every viewport edge</h2> <p class="web-synth-menu-story__copy"> Each fixed trigger exercises right alignment, horizontal clamp, vertical flip, and the scrollable max-height. </p> {edgeNames.map((edge) => ( <button key={edge} type="button" class={`web-synth-menu-story__trigger web-synth-menu-story__edge-trigger web-synth-menu-story__edge-trigger--${edge}`} onClick={(event) => openFrom(event.currentTarget)} > {edge} ⋮ </button> ))} <ContextMenu open={open} anchor={anchor} items={longItems} onClose={() => setOpen(false)} ariaLabel="Long edge-position menu" /> </div> ); } export const EveryItemKind = defineStory({ name: 'Every item kind', render: () => <EveryItemKindStory />, }); export const LongListAtViewportEdges = defineStory({ name: 'Long list at viewport edges', render: () => <ViewportEdgesStory />, });