@boostdev/design-system-components 0.1.13 → 0.1.14

package/src/stories/Introduction.mdx

@@ -0,0 +1,129 @@
+import {Meta} from '@storybook/blocks';
+import {Button} from "../components/interaction/Button/index.ts";
+import componentsPackageJson from '../../package.json';
+import foundationPackageJson from '../../node_modules/@boostdev/design-system-foundation/package.json';
+import './Introduction.css';
+import {ButtonGroup} from "../components/layout/ButtonGroup/index.ts";
+import {Card} from "../components/layout/Card/index.ts";
+
+<Meta title="Introduction"/>
+
+
+
+<div>
+    <div>
+        <img src="../../src/static/logo.svg" alt="BoostDev logo" width={200}/>
+        <div className="title">Design System Foundation {foundationPackageJson.version} &<br/> Components {componentsPackageJson.version}</div>
+    </div>
+    <div className="main-description">
+        <p>
+            Accessible, token-driven React components. Zero extra runtime.
+        </p>
+        <ButtonGroup variant="content">
+            <Button variant="secondary" href="https://www.npmjs.com/package/@boostdev/foundation">DS Foundation</Button>
+            <Button variant="secondary" href="https://www.npmjs.com/package/@boostdev/components">DS Components</Button>
+        </ButtonGroup>
+    </div>
+    ---
+
+    ## Installation
+
+    ```bash
+    pnpm add @boostdev/components @boostdev/design-system-foundation
+    ```
+
+    Import the CSS once at your app root:
+
+    ```ts
+    import '@boostdev/design-system-foundation/css';
+    import '@boostdev/components/css';
+    ```
+
+    For **Next.js / RSC**, use the `/client` subpath:
+
+    ```ts
+    import {Button, Card} from '@boostdev/components/client';
+    ```
+
+    ---
+
+    ## Components
+
+    <div className="utl-main-grid grid">
+
+        <Card className="card">
+            <strong>UI</strong>
+            <div className="cardContent">
+                Badge · Typography · Alert · Avatar · Loading · Skeleton · Separator · Tooltip · Progress ·
+                ProgressCircle · Tabs · Breadcrumb · Accordion · Pagination · Link · Table · DescriptionList ·
+                NotificationBanner · SkipLink · Carousel · Calendar
+            </div>
+        </Card>
+
+        <Card className="card">
+            <strong>Interaction</strong>
+            <div className="cardContent">
+                Button · Dialog · Toast · Rating · Popover · DropdownMenu · Command · Drawer
+            </div>
+        </Card>
+
+        <Card className="card">
+            <strong>Form</strong>
+            <div className="cardContent">
+                FormInput · Checkbox · Radio · Switch · Select · Textarea · Slider · NumberInput · FileInput · Combobox
+            </div>
+        </Card>
+
+        <Card className="card">
+            <strong>Layout</strong>
+            <div className="cardContent">
+                ButtonGroup · Card · SectionHeader · IconWrapper
+            </div>
+        </Card>
+    </div>
+
+    ---
+
+    ## Design tokens
+
+    All components consume tokens from `@boostdev/design-system-foundation`. Override semantic tokens to retheme
+    everything at once:
+
+    ```css
+    @layer tokens.override {
+        :root {
+            --color_cta:         var(--BASE__color--orange);
+            --color_on-cta:      var(--BASE__color--white);
+            --color_interactive: var(--BASE__color--orange);
+            --color_active:      var(--BASE__color--orange);
+            --color_on-active:   var(--BASE__color--white);
+        }
+    }
+    ```
+
+    Dark mode is applied via `[data-theme="dark"]` or `prefers-color-scheme`. Use the **Theme** toolbar button at the
+    top of Storybook to toggle.
+
+    ---
+
+    ## MCP server
+
+    The design system exposes a live MCP server at `https://ds.boostdev.nl/api/mcp`.
+    AI coding agents can connect to it to query component props and tokens without reading source files directly.
+
+
+<table>
+<thead>
+<tr><th>Tool</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`ds_get_component`</td><td>Full props interface for a named component</td></tr>
+<tr><td>`ds_list_components`</td><td>All components grouped by category</td></tr>
+<tr><td>`ds_list_tokens`</td><td>Design tokens, filterable by group</td></tr>
+<tr><td>`ds_search`</td><td>Keyword search across components and tokens</td></tr>
+<tr><td>`ds_get_guide`</td><td>Returns the AGENTS.md usage guide</td></tr>
+</tbody>
+</table>
+
+
+</div>