VcvModuleRef

Grid of MetaModule-compatible VCV Rack modules, each linking to its VCV Library page.

MetaModule Reference

Default

Single module

Many modules (grid wraps to 3 columns)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for VcvModuleRef — new gap story (epic #1647 Wave 6, #1663). // // Module panel images are raw `static/images/modules/*.png` (see the // component's own header comment) — not part of the processed image // pipeline. The component derives each `<img src>` internally // (`/images/modules/${mmRefSlug}.png`), so no fixture wiring is needed here; // the styleguide's `image-placeholder` plugin's `PLACEHOLDER_PREFIXES` list // covers `/images/modules/*` (#2084), so these resolve to the placeholder SVG // instead of broken-image chrome. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { VcvModuleRef } from './vcv-module-ref'; const meta: StoryMeta = { title: 'VcvModuleRef', category: 'MetaModule Reference', description: 'Grid of MetaModule-compatible VCV Rack modules, each linking to its VCV Library page.', usage: `import { VcvModuleRef } from '@/components/mdx/vcv-module-ref';\n\n<VcvModuleRef modules={modules} />`, }; export default meta; const sampleModules = [ { plugin: 'AudibleInstruments', slug: 'Braids', name: 'Braids', description: 'Macro-oscillator with dozens of synthesis algorithms.', }, { plugin: 'AudibleInstruments', slug: 'Plaits', name: 'Plaits', description: 'Compact macro-oscillator, successor to Braids.', }, { plugin: 'Bogaudio', slug: 'ADSR', name: 'ADSR', description: 'Classic four-stage envelope generator.', }, ]; export const Default = defineStory({ name: 'Default', render: () => <VcvModuleRef modules={sampleModules} />, }); export const SingleModule = defineStory({ name: 'Single module', render: () => <VcvModuleRef modules={[sampleModules[0]!]} />, }); export const ManyModules = defineStory({ name: 'Many modules (grid wraps to 3 columns)', render: () => ( <VcvModuleRef modules={[ ...sampleModules, { plugin: 'Geodesics', slug: 'Pulsars', name: 'Pulsars', description: 'Chaotic dual-channel FM oscillator.', }, { plugin: 'Fundamental', slug: 'VCO', name: 'VCO', description: 'Basic analog-style voltage-controlled oscillator.', }, { plugin: '4ms', slug: 'QCD', name: 'QCD', description: 'Quad clock distributor with divisions and multiplications.', }, ]} /> ), });