Merge pull request #25 from jeffreylauwers/feature/codetabs-of-prop

jeffreylauwers · web-flow · commit 4d967d2641f2 · 2026-02-24T09:27:57.000+01:00
feat(storybook): CodeTabs React tab dynamisch via of={Story.Default}
diff --git a/packages/storybook/src/Button.docs.mdx b/packages/storybook/src/Button.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<Button variant="strong">Tekst</Button>`}
+  of={ButtonStories.Default}
   html={`<button type="button" class="dsn-button dsn-button--strong dsn-button--size-default">Tekst</button>`}
 />
 
diff --git a/packages/storybook/src/Checkbox.docs.mdx b/packages/storybook/src/Checkbox.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<Checkbox id="checkbox-1" />`}
+  of={CheckboxStories.Default}
   html={`<div class="dsn-checkbox">
   <input type="checkbox" class="dsn-checkbox__input" id="checkbox-1" />
   <span class="dsn-checkbox__control" aria-hidden="true">
diff --git a/packages/storybook/src/CheckboxGroup.docs.mdx b/packages/storybook/src/CheckboxGroup.docs.mdx
@@ -16,11 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<CheckboxGroup>
-  <CheckboxOption label="Sport" />
-  <CheckboxOption label="Muziek" />
-  <CheckboxOption label="Reizen" />
-</CheckboxGroup>`}
+  of={CheckboxGroupStories.Default}
   html={`<div class="dsn-checkbox-group">
   <label class="dsn-checkbox-option">
     <div class="dsn-checkbox">
diff --git a/packages/storybook/src/CheckboxOption.docs.mdx b/packages/storybook/src/CheckboxOption.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<CheckboxOption label="Optie label" />`}
+  of={CheckboxOptionStories.Default}
   html={`<label class="dsn-checkbox-option">
   <div class="dsn-checkbox">
     <input type="checkbox" class="dsn-checkbox__input" />
diff --git a/packages/storybook/src/DateInput.docs.mdx b/packages/storybook/src/DateInput.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<DateInput />`}
+  of={DateInputStories.Default}
   html={`<div class="dsn-date-input-wrapper">
   <input type="date" class="dsn-text-input dsn-date-input" />
   <!-- calendar button (niet-focusbaar, voor muisgebruikers) -->
diff --git a/packages/storybook/src/DateInputGroup.docs.mdx b/packages/storybook/src/DateInputGroup.docs.mdx
@@ -16,11 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<DateInputGroup
-  id="geboortedatum"
-  value={{ day: '', month: '', year: '' }}
-  onChange={(val) => console.log(val)}
-/>`}
+  of={DateInputGroupStories.Default}
   html={`<div class="dsn-date-input-group">
   <div class="dsn-date-input-group__field">
     <label class="dsn-date-input-group__label" for="geboortedatum-dag">Dag</label>
diff --git a/packages/storybook/src/EmailInput.docs.mdx b/packages/storybook/src/EmailInput.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<EmailInput placeholder="naam@voorbeeld.nl" />`}
+  of={EmailInputStories.Default}
   html={`<input type="email" inputmode="email" class="dsn-text-input" autocomplete="email" placeholder="naam@voorbeeld.nl" />`}
 />
 
diff --git a/packages/storybook/src/FormField.docs.mdx b/packages/storybook/src/FormField.docs.mdx
@@ -16,9 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<FormField label="E-mailadres" htmlFor="email">
-  <EmailInput id="email" placeholder="naam@voorbeeld.nl" />
-</FormField>`}
+  of={FormFieldStories.Default}
   html={`<div class="dsn-form-field">
   <label class="dsn-form-field-label" for="email">E-mailadres</label>
   <input type="email" class="dsn-text-input" id="email" placeholder="naam@voorbeeld.nl" />
diff --git a/packages/storybook/src/FormFieldDescription.docs.mdx b/packages/storybook/src/FormFieldDescription.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<FormFieldDescription>Beschrijving tekst.</FormFieldDescription>`}
+  of={FormFieldDescriptionStories.Default}
   html={`<p class="dsn-form-field-description">Beschrijving tekst.</p>`}
 />
 
diff --git a/packages/storybook/src/FormFieldErrorMessage.docs.mdx b/packages/storybook/src/FormFieldErrorMessage.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<FormFieldErrorMessage>Dit veld is verplicht.</FormFieldErrorMessage>`}
+  of={FormFieldErrorMessageStories.Default}
   html={`<p class="dsn-form-field-error-message">
   <!-- exclamation-circle icon -->
   Dit veld is verplicht.
diff --git a/packages/storybook/src/FormFieldLabel.docs.mdx b/packages/storybook/src/FormFieldLabel.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<FormFieldLabel htmlFor="input-1">Label</FormFieldLabel>`}
+  of={FormFieldLabelStories.Default}
   html={`<label class="dsn-form-field-label" for="input-1">Label</label>`}
 />
 
diff --git a/packages/storybook/src/FormFieldStatus.docs.mdx b/packages/storybook/src/FormFieldStatus.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<FormFieldStatus>45 van 100 karakters</FormFieldStatus>`}
+  of={FormFieldStatusStories.Default}
   html={`<p class="dsn-form-field-status">45 van 100 karakters</p>`}
 />
 
diff --git a/packages/storybook/src/FormFieldset.docs.mdx b/packages/storybook/src/FormFieldset.docs.mdx
@@ -16,13 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<FormFieldset legend="Interesses">
-  <CheckboxGroup>
-    <CheckboxOption label="Sport" />
-    <CheckboxOption label="Muziek" />
-    <CheckboxOption label="Reizen" />
-  </CheckboxGroup>
-</FormFieldset>`}
+  of={FormFieldsetStories.Default}
   html={`<fieldset class="dsn-form-field">
   <legend class="dsn-form-field-label">Interesses</legend>
   <div class="dsn-checkbox-group">
diff --git a/packages/storybook/src/Heading.docs.mdx b/packages/storybook/src/Heading.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<Heading level={2}>Koptekst</Heading>`}
+  of={HeadingStories.Default}
   html={`<h2 class="dsn-heading dsn-heading--heading-2">Koptekst</h2>`}
 />
 
diff --git a/packages/storybook/src/Icon.docs.mdx b/packages/storybook/src/Icon.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<Icon name="star" />`}
+  of={IconStories.Default}
   html={`<svg class="dsn-icon" aria-hidden="true">
   <!-- SVG pad via Tabler Icons — ingeladen via iconMap -->
 </svg>`}
diff --git a/packages/storybook/src/Link.docs.mdx b/packages/storybook/src/Link.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<Link href="#">Linktekst</Link>`}
+  of={LinkStories.Default}
   html={`<a href="#" class="dsn-link">Linktekst</a>`}
 />
 
diff --git a/packages/storybook/src/NumberInput.docs.mdx b/packages/storybook/src/NumberInput.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<NumberInput placeholder="0" />`}
+  of={NumberInputStories.Default}
   html={`<input type="text" inputmode="numeric" pattern="[0-9]*" class="dsn-text-input" autocomplete="off" placeholder="0" />`}
 />
 
diff --git a/packages/storybook/src/OptionLabel.docs.mdx b/packages/storybook/src/OptionLabel.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<OptionLabel>Label</OptionLabel>`}
+  of={OptionLabelStories.Default}
   html={`<span class="dsn-option-label">Label</span>`}
 />
 
diff --git a/packages/storybook/src/OrderedList.docs.mdx b/packages/storybook/src/OrderedList.docs.mdx
@@ -16,11 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<OrderedList>
-  <li>Stap één</li>
-  <li>Stap twee</li>
-  <li>Stap drie</li>
-</OrderedList>`}
+  of={OrderedListStories.Default}
   html={`<ol class="dsn-ordered-list">
   <li>Stap één</li>
   <li>Stap twee</li>
diff --git a/packages/storybook/src/Paragraph.docs.mdx b/packages/storybook/src/Paragraph.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<Paragraph>Dit is een alinea tekst.</Paragraph>`}
+  of={ParagraphStories.Default}
   html={`<p class="dsn-paragraph dsn-paragraph--default">Dit is een alinea tekst.</p>`}
 />
 
diff --git a/packages/storybook/src/PasswordInput.docs.mdx b/packages/storybook/src/PasswordInput.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<PasswordInput placeholder="Wachtwoord" />`}
+  of={PasswordInputStories.Default}
   html={`<input type="password" class="dsn-text-input" autocomplete="current-password" placeholder="Wachtwoord" />`}
 />
 
diff --git a/packages/storybook/src/Radio.docs.mdx b/packages/storybook/src/Radio.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<Radio id="radio-1" name="radio-groep" />`}
+  of={RadioStories.Default}
   html={`<div class="dsn-radio">
   <input type="radio" class="dsn-radio__input" id="radio-1" name="radio-groep" />
   <span class="dsn-radio__control" aria-hidden="true">
diff --git a/packages/storybook/src/RadioGroup.docs.mdx b/packages/storybook/src/RadioGroup.docs.mdx
@@ -16,11 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<RadioGroup>
-  <RadioOption name="groep" label="Optie één" />
-  <RadioOption name="groep" label="Optie twee" />
-  <RadioOption name="groep" label="Optie drie" />
-</RadioGroup>`}
+  of={RadioGroupStories.Default}
   html={`<div class="dsn-radio-group">
   <label class="dsn-radio-option">
     <div class="dsn-radio">
diff --git a/packages/storybook/src/RadioOption.docs.mdx b/packages/storybook/src/RadioOption.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<RadioOption name="radio-groep" label="Optie label" />`}
+  of={RadioOptionStories.Default}
   html={`<label class="dsn-radio-option">
   <div class="dsn-radio">
     <input type="radio" class="dsn-radio__input" name="radio-groep" />
diff --git a/packages/storybook/src/SearchInput.docs.mdx b/packages/storybook/src/SearchInput.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<SearchInput placeholder="Zoeken..." />`}
+  of={SearchInputStories.Default}
   html={`<div class="dsn-search-input-wrapper">
   <!-- search icon (decoratief, niet-interactief) -->
   <input type="search" class="dsn-text-input dsn-search-input" placeholder="Zoeken..." />
diff --git a/packages/storybook/src/Select.docs.mdx b/packages/storybook/src/Select.docs.mdx
@@ -16,11 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<Select>
-  <option value="">Kies een optie</option>
-  <option value="1">Optie 1</option>
-  <option value="2">Optie 2</option>
-</Select>`}
+  of={SelectStories.Default}
   html={`<div class="dsn-select-wrapper">
   <select class="dsn-text-input dsn-select">
     <option value="">Kies een optie</option>
diff --git a/packages/storybook/src/TelephoneInput.docs.mdx b/packages/storybook/src/TelephoneInput.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<TelephoneInput placeholder="06 12345678" />`}
+  of={TelephoneInputStories.Default}
   html={`<input type="tel" inputmode="tel" class="dsn-text-input" autocomplete="tel" placeholder="06 12345678" />`}
 />
 
diff --git a/packages/storybook/src/TextArea.docs.mdx b/packages/storybook/src/TextArea.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<TextArea placeholder="Voer uw bericht in" rows={4} />`}
+  of={TextAreaStories.Default}
   html={`<textarea class="dsn-text-area" rows="4" placeholder="Voer uw bericht in"></textarea>`}
 />
 
diff --git a/packages/storybook/src/TextInput.docs.mdx b/packages/storybook/src/TextInput.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<TextInput placeholder="Voer tekst in" />`}
+  of={TextInputStories.Default}
   html={`<input type="text" class="dsn-text-input" placeholder="Voer tekst in" />`}
 />
 
diff --git a/packages/storybook/src/TimeInput.docs.mdx b/packages/storybook/src/TimeInput.docs.mdx
@@ -16,7 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<TimeInput />`}
+  of={TimeInputStories.Default}
   html={`<div class="dsn-time-input-wrapper">
   <input type="time" class="dsn-text-input dsn-time-input" />
   <!-- clock button (niet-focusbaar, voor muisgebruikers) -->
diff --git a/packages/storybook/src/UnorderedList.docs.mdx b/packages/storybook/src/UnorderedList.docs.mdx
@@ -16,11 +16,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
 </PreviewFrame>
 
 <CodeTabs
-  react={`<UnorderedList>
-  <li>Item één</li>
-  <li>Item twee</li>
-  <li>Item drie</li>
-</UnorderedList>`}
+  of={UnorderedListStories.Default}
   html={`<ul class="dsn-unordered-list">
   <li>Item één</li>
   <li>Item twee</li>
diff --git a/packages/storybook/src/components/CodeTabs.tsx b/packages/storybook/src/components/CodeTabs.tsx
@@ -4,8 +4,17 @@ import './CodeTabs.css';
 
 interface CodeTabsProps {
   /**
-   * @deprecated — React tab now uses SourceType.DYNAMIC to show live story code
-   * that updates with Controls. This prop is kept for backward compatibility but ignored.
+   * Story export to show in the React tab. Required for live code that updates with Controls.
+   * Pass the Default story export from the component's stories file:
+   * `of={ButtonStories.Default}`
+   *
+   * The Source block subscribes to STORY_ARGS_UPDATED so the code updates automatically
+   * when the user changes props via the Controls panel.
+   */
+  of: unknown;
+  /**
+   * @deprecated — kept for backward compatibility with existing .docs.mdx files.
+   * No longer used. The React tab reads live code from the story referenced by `of`.
    */
   react?: string;
   /** HTML/CSS markup snippet for the HTML/CSS tab */
@@ -16,15 +25,13 @@ type Tab = 'react' | 'html';
 
 /**
  * CodeTabs — two-tab code viewer shown below PreviewFrame on every doc page.
- * - React tab (default): shows the JSX/TSX snippet
- * - HTML/CSS tab: shows the equivalent vanilla HTML markup
+ * - React tab (default): shows live story code via `Source of={story}`, updates with Controls
+ * - HTML/CSS tab: shows the equivalent vanilla HTML markup (static)
  *
  * Syntax highlighting via Storybook's built-in Source block from @storybook/blocks.
- * The React tab uses Source without explicit type (defaults to AUTO, which resolves to
- * DYNAMIC for stories with args). This shows live story code and updates with Controls.
  * The tab bar uses design token CSS variables so it responds to dark mode.
  */
-export function CodeTabs({ html }: CodeTabsProps) {
+export function CodeTabs({ of: storyRef, html }: CodeTabsProps) {
   const [activeTab, setActiveTab] = useState<Tab>('react');
 
   const tabBarStyle: React.CSSProperties = {
@@ -81,7 +88,10 @@ export function CodeTabs({ html }: CodeTabsProps) {
       </div>
       <div style={codeWrapperStyle}>
         {activeTab === 'react' ? (
-          <Source dark />
+          // Source with explicit `of` subscribes to STORY_ARGS_UPDATED and
+          // updates the displayed code when the user changes Controls.
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          <Source of={storyRef as any} dark />
         ) : (
           <Source code={html} language="html" dark />
         )}
