@roadlittledawn/docs-design-system-react 0.4.0 → 0.6.0

package/README.md

@@ -1,8 +1,9 @@
 # @roadlittledawn/docs-design-system-react
 
-React components for building documentation interfaces.
+[![npm version](https://img.shields.io/npm/v/@roadlittledawn/docs-design-system-react.svg)](https://www.npmjs.com/package/@roadlittledawn/docs-design-system-react)
+[![GitHub](https://img.shields.io/badge/github-repo-blue.svg)](https://github.com/roadlittledawn/docs-design-system)
 
-See [package on NPM](https://www.npmjs.com/package/@roadlittledawn/docs-design-system-react).
+React components for documentation content and MDX-driven sites.
 
 ## Installation
 
@@ -30,91 +31,9 @@ import "@roadlittledawn/docs-design-system-react/styles.css";
 
 ## Components
 
-### Callout
+Full component documentation with live examples, usage guidelines, and API documentation is available in Storybook:
 
-Highlight important information, warnings, tips, or notes.
-
-```tsx
-<Callout variant="tip">This is a helpful tip!</Callout>
-```
-
-### CodeBlock
-
-Syntax-highlighted code with copy functionality.
-
-```tsx
-<CodeBlock language="javascript">
-  {`const greeting = "Hello, world!";`}
-</CodeBlock>
-```
-
-### Collapser
-
-Expandable/collapsible sections for optional or detailed content.
-
-```tsx
-<Collapser title="More details">Hidden content revealed on expand.</Collapser>
-```
-
-### Card
-
-Clickable card for navigation or content grouping.
-
-```tsx
-<Card title="Getting Started" href="/docs/intro">
-  Learn the basics.
-</Card>
-```
-
-### CardGrid
-
-Grid layout for organizing multiple cards.
-
-```tsx
-<CardGrid columns={3}>
-  <Card title="Guide 1" href="/guide-1">
-    Description
-  </Card>
-  <Card title="Guide 2" href="/guide-2">
-    Description
-  </Card>
-</CardGrid>
-```
-
-### Typography
-
-Text component with semantic variants.
-
-```tsx
-<Typography variant="body">Paragraph text</Typography>
-```
-
-### Heading
-
-Semantic heading levels.
-
-```tsx
-<Heading level={2}>Section Title</Heading>
-```
-
-### Link
-
-Styled anchor with external link detection.
-
-```tsx
-<Link href="/docs">Internal link</Link>
-<Link href="https://example.com">External link</Link>
-```
-
-### Button
-
-Action button with variants.
-
-```tsx
-<Button variant="primary" onClick={handleClick}>
-  Click me
-</Button>
-```
+**[View Component Documentation →](https://docs-design-system-storybook.netlify.app/?path=/docs/components-button--docs)**
 
 ## Dark Mode
 
@@ -175,11 +94,7 @@ Listen for keyboard events.
 const isPressed = useKeyPress("Escape");
 ```
 
-## Documentation
-
-Full component documentation with live examples is available in our Storybook.
-
-**Storybook URL:** _Coming soon_
+Full hook documentation is available in [Storybook](https://docs-design-system-storybook.netlify.app).
 
 ## Development
 

package/dist/components/Button.stories.js

@@ -25,6 +25,13 @@ export var Primary = {
         variant: 'primary',
         children: 'Primary Button',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"primary\">Primary Button</Button>",
+            },
+        },
+    },
 };
 /**
  * The secondary button style is used for alternative or less important actions.
@@ -34,6 +41,13 @@ export var Secondary = {
         variant: 'secondary',
         children: 'Secondary Button',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"secondary\">Secondary Button</Button>",
+            },
+        },
+    },
 };
 /**
  * The outline button style is used for tertiary actions or when you need a more subtle button.
@@ -43,6 +57,13 @@ export var Outline = {
         variant: 'outline',
         children: 'Outline Button',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"outline\">Outline Button</Button>",
+            },
+        },
+    },
 };
 /**
  * Small button size for compact interfaces or less prominent actions.
@@ -53,6 +74,13 @@ export var Small = {
         size: 'sm',
         children: 'Small Button',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"primary\" size=\"sm\">Small Button</Button>",
+            },
+        },
+    },
 };
 /**
  * Medium is the default button size, suitable for most use cases.
@@ -63,6 +91,13 @@ export var Medium = {
         size: 'md',
         children: 'Medium Button',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"primary\" size=\"md\">Medium Button</Button>",
+            },
+        },
+    },
 };
 /**
  * Large button size for prominent calls-to-action.
@@ -73,6 +108,13 @@ export var Large = {
         size: 'lg',
         children: 'Large Button',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"primary\" size=\"lg\">Large Button</Button>",
+            },
+        },
+    },
 };
 /**
  * Disabled state for buttons that are temporarily unavailable.
@@ -83,16 +125,37 @@ export var Disabled = {
         children: 'Disabled Button',
         disabled: true,
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"primary\" disabled>Disabled Button</Button>",
+            },
+        },
+    },
 };
 /**
  * Example showing all button variants side by side for comparison.
  */
 export var AllVariants = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>\n  <Button variant=\"primary\">Primary</Button>\n  <Button variant=\"secondary\">Secondary</Button>\n  <Button variant=\"outline\">Outline</Button>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "outline", children: "Outline" })] })); },
 };
 /**
  * Example showing all button sizes side by side for comparison.
  */
 export var AllSizes = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>\n  <Button size=\"sm\">Small</Button>\n  <Button size=\"md\">Medium</Button>\n  <Button size=\"lg\">Large</Button>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }, children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "md", children: "Medium" }), _jsx(Button, { size: "lg", children: "Large" })] })); },
 };

package/dist/components/Callout.stories.js

@@ -24,6 +24,13 @@ export var Caution = {
         variant: 'caution',
         children: 'This operation cannot be undone. Make sure you have a backup before proceeding.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Callout variant=\"caution\">\n  This operation cannot be undone. Make sure you have a backup before proceeding.\n</Callout>",
+            },
+        },
+    },
 };
 /**
  * Important callout for critical information.
@@ -33,6 +40,13 @@ export var Important = {
         variant: 'important',
         children: 'All users must update their passwords by the end of the month to comply with the new security policy.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Callout variant=\"important\">\n  All users must update their passwords by the end of the month to comply with the new security policy.\n</Callout>",
+            },
+        },
+    },
 };
 /**
  * Tip callout for helpful suggestions.
@@ -42,6 +56,13 @@ export var Tip = {
         variant: 'tip',
         children: 'You can use keyboard shortcuts (Cmd+K or Ctrl+K) to quickly search the documentation.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Callout variant=\"tip\">\n  You can use keyboard shortcuts (Cmd+K or Ctrl+K) to quickly search the documentation.\n</Callout>",
+            },
+        },
+    },
 };
 /**
  * Course callout for learning-oriented content.
@@ -51,6 +72,13 @@ export var Course = {
         variant: 'course',
         children: 'In this section, you will learn how to configure your development environment and install the necessary dependencies.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Callout variant=\"course\">\n  In this section, you will learn how to configure your development environment and install the necessary dependencies.\n</Callout>",
+            },
+        },
+    },
 };
 /**
  * Callout with a custom title.
@@ -61,6 +89,13 @@ export var CustomTitle = {
         title: 'Security Notice',
         children: 'Two-factor authentication is now required for all administrator accounts.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Callout variant=\"important\" title=\"Security Notice\">\n  Two-factor authentication is now required for all administrator accounts.\n</Callout>",
+            },
+        },
+    },
 };
 /**
  * Callout without a title.
@@ -71,10 +106,24 @@ export var NoTitle = {
         title: null,
         children: 'This callout has no title and displays only the content.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Callout variant=\"tip\" title={null}>\n  This callout has no title and displays only the content.\n</Callout>",
+            },
+        },
+    },
 };
 /**
  * All callout variants displayed together for comparison.
  */
 export var AllVariants = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n  <Callout variant=\"caution\">\n    Caution: Be careful when modifying system files.\n  </Callout>\n  <Callout variant=\"important\">\n    Important: This feature requires administrator privileges.\n  </Callout>\n  <Callout variant=\"tip\">\n    Tip: Use the search function to find topics quickly.\n  </Callout>\n  <Callout variant=\"course\">\n    Course: This module covers the basics of component design.\n  </Callout>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Callout, { variant: "caution", children: "Caution: Be careful when modifying system files." }), _jsx(Callout, { variant: "important", children: "Important: This feature requires administrator privileges." }), _jsx(Callout, { variant: "tip", children: "Tip: Use the search function to find topics quickly." }), _jsx(Callout, { variant: "course", children: "Course: This module covers the basics of component design." })] })); },
 };

package/dist/components/Card.stories.js

@@ -24,6 +24,13 @@ export var Basic = {
         title: 'Getting Started',
         children: 'Learn the basics of using this documentation system.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Card title=\"Getting Started\">\n  Learn the basics of using this documentation system.\n</Card>",
+            },
+        },
+    },
 };
 /**
  * Clickable card that links to another page.
@@ -34,6 +41,13 @@ export var Clickable = {
         href: '/docs/api',
         children: 'Complete reference for all available components and utilities.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Card title=\"API Reference\" href=\"/docs/api\">\n  Complete reference for all available components and utilities.\n</Card>",
+            },
+        },
+    },
 };
 /**
  * Card with colored background.
@@ -45,6 +59,13 @@ export var ColoredBackground = {
         backgroundColor: 'blue',
         children: 'Check out our latest component additions.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Card title=\"New Feature\" titleColor=\"blue\" backgroundColor=\"blue\">\n  Check out our latest component additions.\n</Card>",
+            },
+        },
+    },
 };
 /**
  * Card without a title.
@@ -53,16 +74,37 @@ export var NoTitle = {
     args: {
         children: 'This card displays content without a title.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Card>This card displays content without a title.</Card>",
+            },
+        },
+    },
 };
 /**
  * All title color variants.
  */
 export var TitleColors = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n  <Card title=\"Blue Title\" titleColor=\"blue\">Content with blue title</Card>\n  <Card title=\"Green Title\" titleColor=\"green\">Content with green title</Card>\n  <Card title=\"Purple Title\" titleColor=\"purple\">Content with purple title</Card>\n  <Card title=\"Red Title\" titleColor=\"red\">Content with red title</Card>\n  <Card title=\"Yellow Title\" titleColor=\"yellow\">Content with yellow title</Card>\n  <Card title=\"Gray Title\" titleColor=\"gray\">Content with gray title</Card>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Card, { title: "Blue Title", titleColor: "blue", children: "Content with blue title" }), _jsx(Card, { title: "Green Title", titleColor: "green", children: "Content with green title" }), _jsx(Card, { title: "Purple Title", titleColor: "purple", children: "Content with purple title" }), _jsx(Card, { title: "Red Title", titleColor: "red", children: "Content with red title" }), _jsx(Card, { title: "Yellow Title", titleColor: "yellow", children: "Content with yellow title" }), _jsx(Card, { title: "Gray Title", titleColor: "gray", children: "Content with gray title" })] })); },
 };
 /**
  * All background color variants.
  */
 export var BackgroundColors = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n  <Card title=\"Blue\" backgroundColor=\"blue\">Card with blue background</Card>\n  <Card title=\"Green\" backgroundColor=\"green\">Card with green background</Card>\n  <Card title=\"Purple\" backgroundColor=\"purple\">Card with purple background</Card>\n  <Card title=\"Red\" backgroundColor=\"red\">Card with red background</Card>\n  <Card title=\"Yellow\" backgroundColor=\"yellow\">Card with yellow background</Card>\n  <Card title=\"Gray\" backgroundColor=\"gray\">Card with gray background</Card>\n  <Card title=\"White\" backgroundColor=\"white\">Card with white background</Card>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Card, { title: "Blue", backgroundColor: "blue", children: "Card with blue background" }), _jsx(Card, { title: "Green", backgroundColor: "green", children: "Card with green background" }), _jsx(Card, { title: "Purple", backgroundColor: "purple", children: "Card with purple background" }), _jsx(Card, { title: "Red", backgroundColor: "red", children: "Card with red background" }), _jsx(Card, { title: "Yellow", backgroundColor: "yellow", children: "Card with yellow background" }), _jsx(Card, { title: "Gray", backgroundColor: "gray", children: "Card with gray background" }), _jsx(Card, { title: "White", backgroundColor: "white", children: "Card with white background" })] })); },
 };

package/dist/components/CardGrid.stories.js

@@ -25,6 +25,13 @@ export var TwoColumns = {
         columns: 2,
         children: (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Getting Started", children: "Learn the basics of our documentation system." }), _jsx(Card, { title: "Components", children: "Explore all available UI components." }), _jsx(Card, { title: "Best Practices", children: "Follow guidelines for effective documentation." }), _jsx(Card, { title: "Examples", children: "See real-world usage examples." })] })),
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CardGrid columns={2}>\n  <Card title=\"Getting Started\">Learn the basics of our documentation system.</Card>\n  <Card title=\"Components\">Explore all available UI components.</Card>\n  <Card title=\"Best Practices\">Follow guidelines for effective documentation.</Card>\n  <Card title=\"Examples\">See real-world usage examples.</Card>\n</CardGrid>",
+            },
+        },
+    },
 };
 /**
  * Grid with 3 columns (default, responsive).
@@ -34,6 +41,13 @@ export var ThreeColumns = {
         columns: 3,
         children: (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Tutorials", children: "Step-by-step learning guides." }), _jsx(Card, { title: "How-To Guides", children: "Task-oriented instructions." }), _jsx(Card, { title: "Reference", children: "Technical reference documentation." }), _jsx(Card, { title: "Explanation", children: "Conceptual background information." }), _jsx(Card, { title: "API", children: "Complete API documentation." }), _jsx(Card, { title: "FAQ", children: "Frequently asked questions." })] })),
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CardGrid columns={3}>\n  <Card title=\"Tutorials\">Step-by-step learning guides.</Card>\n  <Card title=\"How-To Guides\">Task-oriented instructions.</Card>\n  <Card title=\"Reference\">Technical reference documentation.</Card>\n  <Card title=\"Explanation\">Conceptual background information.</Card>\n  <Card title=\"API\">Complete API documentation.</Card>\n  <Card title=\"FAQ\">Frequently asked questions.</Card>\n</CardGrid>",
+            },
+        },
+    },
 };
 /**
  * Grid with 4 columns (responsive).
@@ -43,6 +57,13 @@ export var FourColumns = {
         columns: 4,
         children: (_jsxs(_Fragment, { children: [_jsx(Card, { titleColor: "blue", backgroundColor: "blue", children: "Feature 1" }), _jsx(Card, { titleColor: "green", backgroundColor: "green", children: "Feature 2" }), _jsx(Card, { titleColor: "purple", backgroundColor: "purple", children: "Feature 3" }), _jsx(Card, { titleColor: "red", backgroundColor: "red", children: "Feature 4" }), _jsx(Card, { titleColor: "yellow", backgroundColor: "yellow", children: "Feature 5" }), _jsx(Card, { titleColor: "gray", backgroundColor: "gray", children: "Feature 6" }), _jsx(Card, { titleColor: "blue", backgroundColor: "blue", children: "Feature 7" }), _jsx(Card, { titleColor: "green", backgroundColor: "green", children: "Feature 8" })] })),
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CardGrid columns={4}>\n  <Card titleColor=\"blue\" backgroundColor=\"blue\">Feature 1</Card>\n  <Card titleColor=\"green\" backgroundColor=\"green\">Feature 2</Card>\n  <Card titleColor=\"purple\" backgroundColor=\"purple\">Feature 3</Card>\n  <Card titleColor=\"red\" backgroundColor=\"red\">Feature 4</Card>\n  <Card titleColor=\"yellow\" backgroundColor=\"yellow\">Feature 5</Card>\n  <Card titleColor=\"gray\" backgroundColor=\"gray\">Feature 6</Card>\n  <Card titleColor=\"blue\" backgroundColor=\"blue\">Feature 7</Card>\n  <Card titleColor=\"green\" backgroundColor=\"green\">Feature 8</Card>\n</CardGrid>",
+            },
+        },
+    },
 };
 /**
  * Grid with clickable cards.
@@ -52,4 +73,11 @@ export var ClickableCards = {
         columns: 3,
         children: (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Documentation", href: "/docs", children: "Complete documentation guide" }), _jsx(Card, { title: "API Reference", href: "/api", children: "Detailed API reference" }), _jsx(Card, { title: "Examples", href: "/examples", children: "Code examples and patterns" })] })),
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CardGrid columns={3}>\n  <Card title=\"Documentation\" href=\"/docs\">Complete documentation guide</Card>\n  <Card title=\"API Reference\" href=\"/api\">Detailed API reference</Card>\n  <Card title=\"Examples\" href=\"/examples\">Code examples and patterns</Card>\n</CardGrid>",
+            },
+        },
+    },
 };

package/dist/components/CodeBlock.stories.js

@@ -23,6 +23,13 @@ export var Basic = {
         code: "function greet(name: string) {\n  return `Hello, ${name}!`;\n}\n\nconsole.log(greet(\"World\"));",
         language: 'typescript',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"typescript\"\n  code={`function greet(name: string) {\n  return \\`Hello, \\${name}!\\`;\n}\n\nconsole.log(greet(\"World\"));`}\n/>",
+            },
+        },
+    },
 };
 /**
  * Code block with a filename displayed.
@@ -33,6 +40,13 @@ export var WithFilename = {
         language: 'jsx',
         filename: 'Button.jsx',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"jsx\"\n  filename=\"Button.jsx\"\n  code={`export const Button = ({ children, onClick }) => {\n  return (\n    <button onClick={onClick}>\n      {children}\n    </button>\n  );\n};`}\n/>",
+            },
+        },
+    },
 };
 /**
  * Code block with highlighted lines.
@@ -43,6 +57,13 @@ export var WithHighlightedLines = {
         language: 'javascript',
         highlightLines: [2, 3, 4],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"javascript\"\n  highlightLines={[2, 3, 4]}\n  code={`function calculateTotal(items) {\n  let total = 0;\n  for (const item of items) {\n    total += item.price * item.quantity;\n  }\n  return total;\n}`}\n/>",
+            },
+        },
+    },
 };
 /**
  * Multiple code snippets displayed in tabs.
@@ -70,6 +91,13 @@ export var WithTabs = {
             },
         ],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  snippets={[\n    {\n      code: `export const Button = ({ children }) => {\n  return <button>{children}</button>;\n};`,\n      language: 'jsx',\n      filename: 'Button.jsx',\n      tabTitle: 'Button.jsx',\n    },\n    {\n      code: `.button {\n  padding: 0.5rem 1rem;\n  background-color: blue;\n  color: white;\n}`,\n      language: 'css',\n      filename: 'Button.css',\n      tabTitle: 'Button.css',\n    },\n    {\n      code: `import { Button } from './Button';\n\nexport default {\n  component: Button,\n};`,\n      language: 'typescript',\n      filename: 'Button.stories.ts',\n      tabTitle: 'Button.stories.ts',\n    },\n  ]}\n/>",
+            },
+        },
+    },
 };
 /**
  * Multiple language versions with language dropdown.
@@ -99,6 +127,13 @@ export var WithLanguageDropdown = {
             },
         ],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  snippets={[\n    { code: `function greet(name: string): string {\n  return \\`Hello, \\${name}!\\`;\n}`, language: 'typescript', filename: 'greet.ts' },\n    { code: `function greet(name) {\n  return \\`Hello, \\${name}!\\`;\n}`, language: 'javascript', filename: 'greet.js' },\n    { code: `def greet(name):\n    return f\"Hello, {name}!\"`, language: 'python', filename: 'greet.py' },\n    { code: `def greet(name)\n  \"Hello, #{name}!\"\nend`, language: 'ruby', filename: 'greet.rb' },\n  ]}\n/>",
+            },
+        },
+    },
 };
 /**
  * Complex example with tabs and highlighted lines.
@@ -122,6 +157,13 @@ export var ComplexExample = {
             },
         ],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  snippets={[\n    {\n      code: `import React from 'react';\n\nexport function Button({ children, onClick }) {\n  return (\n    <button onClick={onClick} className=\"btn\">\n      {children}\n    </button>\n  );\n}`,\n      language: 'jsx',\n      filename: 'Button.jsx',\n      tabTitle: 'Button.jsx',\n      highlightLines: [3, 4, 5],\n    },\n    {\n      code: `.btn {\n  padding: 0.5rem 1rem;\n  background-color: #3b82f6;\n  color: white;\n  border-radius: 0.375rem;\n}`,\n      language: 'css',\n      filename: 'Button.css',\n      tabTitle: 'Button.css',\n      highlightLines: [2, 3],\n    },\n  ]}\n/>",
+            },
+        },
+    },
 };
 /**
  * Example using path prop to load from external markdown file.
@@ -131,6 +173,13 @@ export var WithPath = {
     args: {
         path: 'https://raw.githubusercontent.com/storybookjs/storybook/47e331ffbaa61a476ddb873bdb12bf46a93a5131/docs/_snippets/before-each-in-meta-mock-date.md',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock path=\"https://raw.githubusercontent.com/storybookjs/storybook/47e331ffbaa61a476ddb873bdb12bf46a93a5131/docs/_snippets/before-each-in-meta-mock-date.md\" />",
+            },
+        },
+    },
 };
 /**
  * JSON code example.
@@ -141,6 +190,13 @@ export var JSONExample = {
         language: 'json',
         filename: 'package.json',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"json\"\n  filename=\"package.json\"\n  code={`{\n  \"name\": \"docs-design-system\",\n  \"version\": \"0.1.0\",\n  \"dependencies\": {\n    \"react\": \"^18.0.0\"\n  }\n}`}\n/>",
+            },
+        },
+    },
 };
 /**
  * Bash/shell script example.
@@ -151,6 +207,13 @@ export var BashExample = {
         language: 'bash',
         filename: 'setup.sh',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"bash\"\n  filename=\"setup.sh\"\n  code={`#!/bin/bash\n\n# Install dependencies\nnpm install\n\n# Build the project\nnpm run build\n\n# Run tests\nnpm test`}\n/>",
+            },
+        },
+    },
 };
 /**
  * Multiple TSX files displayed as flat tabs with bottom-border accent.
@@ -172,6 +235,13 @@ export var WithFilenameTabs = {
             },
         ],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  snippets={[\n    {\n      code: `import { CodeBlock } from '@docs-design-system/ui';\n\nexport function Example() {\n  return (\n    <CodeBlock\n      code=\"console.log('hello')\"\n      language=\"typescript\"\n    />\n  );\n}`,\n      language: 'tsx',\n      filename: 'Example.tsx',\n      tabTitle: 'Example.tsx',\n    },\n    {\n      code: `import { CodeBlock } from '@docs-design-system/ui';\n\nexport function Advanced() {\n  return (\n    <CodeBlock\n      snippets={[\n        { code: 'const a = 1;', language: 'typescript', tabTitle: 'a.ts' },\n        { code: 'const b = 2;', language: 'typescript', tabTitle: 'b.ts' },\n      ]}\n    />\n  );\n}`,\n      language: 'tsx',\n      filename: 'Advanced.tsx',\n      tabTitle: 'Advanced.tsx',\n    },\n  ]}\n/>",
+            },
+        },
+    },
 };
 /**
  * Single snippet with a filename — displays a flat filename label in the header.
@@ -182,6 +252,13 @@ export var SingleFilename = {
         language: 'tsx',
         filename: 'page.tsx',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"tsx\"\n  filename=\"page.tsx\"\n  code={`export default function Home() {\n  return <h1>Welcome</h1>;\n}`}\n/>",
+            },
+        },
+    },
 };
 /**
  * PHP syntax highlighting example.
@@ -192,6 +269,13 @@ export var PHPExample = {
         language: 'php',
         filename: 'UserController.php',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"php\"\n  filename=\"UserController.php\"\n  code={`<?php\n\nnamespace App\\\\Http\\\\Controllers;\n\nuse Illuminate\\\\Http\\\\Request;\n\nclass UserController extends Controller\n{\n    public function index()\n    {\n        $users = User::all();\n        return view('users.index', compact('users'));\n    }\n\n    public function show(int $id)\n    {\n        $user = User::findOrFail($id);\n        return response()->json($user);\n    }\n}`}\n/>",
+            },
+        },
+    },
 };
 /**
  * Many tabs to verify horizontal scroll behavior.
@@ -231,4 +315,11 @@ export var ManyTabs = {
             },
         ],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  snippets={[\n    { code: `export const App = () => <div>App</div>;`, language: 'tsx', tabTitle: 'App.tsx' },\n    { code: `export const Header = () => <header>Header</header>;`, language: 'tsx', tabTitle: 'Header.tsx' },\n    { code: `export const Footer = () => <footer>Footer</footer>;`, language: 'tsx', tabTitle: 'Footer.tsx' },\n    { code: `export const Sidebar = () => <aside>Sidebar</aside>;`, language: 'tsx', tabTitle: 'Sidebar.tsx' },\n    { code: `export const Nav = () => <nav>Nav</nav>;`, language: 'tsx', tabTitle: 'Navigation.tsx' },\n    { code: `export const Content = () => <main>Content</main>;`, language: 'tsx', tabTitle: 'ContentArea.tsx' },\n  ]}\n/>",
+            },
+        },
+    },
 };