# `stories/`

Storybook content for the MirAI design system.

## Run

```bash
npm i
npm run storybook
# → http://localhost:6006
```

## Conventions

- **MDX for foundations** (color, type, spacing, logo). Reference docs first; React only where a live demo carries its weight.
- **`.stories.tsx` for components.** Use the `satisfies Meta<typeof Component>` pattern for autocomplete-safe args.
- **One story per state** that matters (`Primary`, `Hover`, `Disabled`, `WithIcon`) plus an `AllVariants` overview for the docs page.
- **`controls: { disable: true }`** on overview stories — controls only make sense on single-variant stories.

## Story order

The sidebar order is locked in [`.storybook/preview.ts`](../.storybook/preview.ts):

```
Introduction
Foundations
  ├── Colors
  ├── Typography
  ├── Spacing, Radius & Shadow
  └── Logo
Components
Patterns
```

When you add a section, update `storySort` so it lands in the right place.

## Adding a component

1. Drop the implementation in [`ui_kits/ask/`](../ui_kits/ask) (or wherever it lives in the consumer project).
2. Add `stories/Components/<Name>.stories.tsx` with:
   - A meta object describing the component.
   - One story per documented variant.
   - An `AllVariants` story for the autodocs page.
3. Link the underlying token (`shadcn.css` variable, `tokens.json` path) in the docs description so changes propagate cleanly.