CoralKnob

Visualizes the OXI Coral center encoder knob with its 10-position LED ring. Positions 1-5 are on the left (bottom to top), positions 6-10 are on the right (top to bottom). Supports engine, voice, midi, and custom label modes.

Product-Specific Blocks

Default

Engine active

Engine multiple active

Voice mode

MIDI mode

Custom labels

White color

In figure wrapper

Connected figures

Voice mode in figure

MIDI mode in figure

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { CoralKnob } from './coral-knob'; import { CoralKnobFigure } from './coral-knob-figure'; const meta: StoryMeta = { title: 'CoralKnob', category: 'Product-Specific Blocks', description: 'Visualizes the OXI Coral center encoder knob with its 10-position LED ring. Positions 1-5 are on the left (bottom to top), positions 6-10 are on the right (top to bottom). Supports engine, voice, midi, and custom label modes.', usage: `import { CoralKnob } from '@/components/mdx/coral-knob/coral-knob';\n\n<CoralKnob mode="engine" active={[3]} activeColor="pink" />`, }; export default meta; /** Default engine mode — all LEDs inactive */ export const Default = defineStory({ name: 'Default', render: () => <CoralKnob />, }); /** Engine mode with the 2 OP FM engine selected (position 3) */ export const EngineActive = defineStory({ name: 'Engine active', render: () => <CoralKnob mode="engine" active={[3]} activeColor="pink" />, }); /** Engine mode with multiple LEDs active */ export const EngineMultipleActive = defineStory({ name: 'Engine multiple active', render: () => <CoralKnob mode="engine" active={[1, 5, 6, 10]} activeColor="pink" />, }); /** Voice mode — shows Voice 1 through Voice 8, positions 9-10 unused */ export const VoiceMode = defineStory({ name: 'Voice mode', render: () => <CoralKnob mode="voice" active={[2]} activeColor="turquoise" />, }); /** MIDI mode — shows MIDI Ch 1-8, positions 9-10 unused */ export const MidiMode = defineStory({ name: 'MIDI mode', render: () => <CoralKnob mode="midi" active={[5]} activeColor="orange" />, }); /** Custom labels mode */ export const CustomLabels = defineStory({ name: 'Custom labels', render: () => ( <CoralKnob mode="custom" labels={['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']} active={[1, 6]} activeColor="white" /> ), }); /** White active color */ export const WhiteColor = defineStory({ name: 'White color', render: () => <CoralKnob mode="engine" active={[7]} activeColor="white" />, }); /** Wrapped in CoralKnobFigure for responsive article layout with caption */ export const InFigureWrapper = defineStory({ name: 'In figure wrapper', render: () => ( <div className="w-[800px] border border-dashed border-zd-white/20"> <CoralKnobFigure mode="engine" active={[3]} activeColor="pink" caption="2 OP FMエンジンが選択された状態" /> </div> ), }); /** Connected consecutive figures (no bottom padding on first) */ export const ConnectedFigures = defineStory({ name: 'Connected figures', render: () => ( <div className="w-[800px] border border-dashed border-zd-white/20"> <CoralKnobFigure mode="engine" active={[1]} activeColor="pink" caption="2 VCO Virtual Analogエンジン" connected /> <CoralKnobFigure mode="engine" active={[3]} activeColor="pink" caption="2 OP FMエンジン" /> </div> ), }); /** Voice mode in figure wrapper */ export const VoiceModeInFigure = defineStory({ name: 'Voice mode in figure', render: () => ( <div className="w-[800px] border border-dashed border-zd-white/20"> <CoralKnobFigure mode="voice" active={[4]} activeColor="turquoise" caption="ボイス4が選択された状態" /> </div> ), }); /** MIDI mode in figure wrapper */ export const MidiModeInFigure = defineStory({ name: 'MIDI mode in figure', render: () => ( <div className="w-[800px] border border-dashed border-zd-white/20"> <CoralKnobFigure mode="midi" active={[1]} activeColor="orange" caption="MIDIチャンネル1が選択された状態" /> </div> ), });