Design System Template ReactJS

Biblioteca de componentes React do Design System Vitrine, construida com TypeScript, Tailwind CSS 4 e Base UI.

Instalacao

pnpm add @design-system-template/react

Uso

// Importar o CSS (uma vez, no entry point do app)
import '@design-system-template/react/styles.css'

// Importar componentes (barrel)
import { Button, Modal } from '@design-system-template/react'

// Ou importar por componente (melhor tree-shaking)
import { Button } from '@design-system-template/react/button'
import { Modal } from '@design-system-template/react/modal'

Componentes

| Componente | Import path | |-----------|-------------| | Alert | ./alert | | Avatar | ./avatar | | Badge | ./badge | | Button | ./button | | Card | ./card | | Checkbox | ./checkbox | | Divider | ./divider | | Dropdown | ./dropdown | | Input | ./input | | Modal | ./modal | | Radio | ./radio | | Switch | ./switch | | Tag | ./tag | | Textarea | ./textarea | | Tooltip | ./tooltip |

Desenvolvimento

# Instalar dependencias
pnpm install

# Storybook (dev)
pnpm storybook

# Rodar testes
pnpm test

# Build da lib
pnpm build

# Lint
pnpm lint

Versionamento e changelog

Este projeto usa Changesets para versionamento automatico e geracao de changelog.

Ao fazer uma mudanca que afeta o pacote publicado:

pnpm changeset

O CLI pergunta:

1. Tipo de bump: patch (fix), minor (feature) ou major (breaking change)
2. Descricao da mudanca

Isso cria um arquivo em .changeset/ que deve ser commitado junto com o codigo.

No merge para master, o CI automaticamente:

1. Aplica os changesets pendentes (pnpm version-packages)
2. Atualiza a versao no package.json
3. Gera o CHANGELOG.md
4. Builda e publica no registry (pnpm release)

Scripts disponiveis:

| Script | Descricao | |--------|-----------| | pnpm changeset | Criar changeset para descrever mudanca | | pnpm version-packages | Aplicar versao (CI faz automaticamente) | | pnpm release | Build + publish (CI faz automaticamente) |

Stack

• React 18/19
• TypeScript 5.9
• Tailwind CSS 4
• Base UI (componentes headless)
• CVA (class-variance-authority)
• Storybook 10 (documentacao + interaction tests)
• Vitest 4 + Playwright (testes)
• Changesets (versionamento)