Documentacao de design system no Storybook com exemplos vivos

Crie o padrao de documentacao do design system [NOME DO DS] no Storybook, para [NUMERO] componentes utilizados por [NUMERO] desenvolvedores e [NUMERO] designers.

Stack: [REACT/VUE/ANGULAR] + [STORYBOOK VERSAO]. Deploy: [URL DO STORYBOOK].

**1) Estrutura de Navegacao do Storybook:**
- Sidebar hierarchy:
  - Getting Started (instalacao, configuracao, contribuicao)
  - Foundations (cores, tipografia, espacamento, icones, motion)
  - Components (organizados por [CATEGORIZACAO])
  - Patterns (composicoes de componentes)
  - Templates (layouts de pagina completos)
  - Changelog

**2) Template de Documentacao por Componente:**
Cada componente DEVE ter:

a) **Overview** (MDX page):
- Descricao em 1-2 frases
- Import statement
- Exemplo basico funcional
- Tabela de props com tipos, defaults e descricao

b) **Variants**:
- Story para cada variante (size, color, state)
- Controls interativos (knobs) para experimentacao
- Side-by-side comparison de variantes

c) **Usage Guidelines** (MDX):
- Quando usar este componente
- Quando NAO usar (e qual alternativa)
- Do's and Don'ts com screenshots
- Composicao com outros componentes

d) **Accessibility**:
- ARIA attributes necessarios
- Keyboard navigation
- Screen reader behavior
- Teste com axe DevTools (badge de status)

e) **Design Specs**:
- Link para Figma component
- Tokens utilizados
- Anatomia do componente
- Responsive behavior

**3) Addons Essenciais:**
- @storybook/addon-a11y (testes de acessibilidade)
- @storybook/addon-viewport (responsividade)
- @storybook/addon-docs (documentacao MDX)
- storybook-dark-mode (preview em dark mode)
- @storybook/addon-interactions (testes visuais)
- Chromatic (visual regression testing)

**4) Automacao:**
- Auto-generate de stories a partir de props (TypeScript)
- CI pipeline: build + deploy + visual regression
- Slack notification quando componente e atualizado
- Metrics: tracking de page views por componente

**5) Adocao:**
- Onboarding para novos devs (tutorial de 30 min)
- Checklist de PR: "componente documentado no Storybook?"
- Monthly newsletter com novos componentes
- Design system office hours (1h/semana)

Escreva o exemplo completo para o componente [COMPONENTE EXEMPLO: Button], incluindo codigo MDX e stories.