Aulapp UI Kit

Kit de componentes React construído com Vite (library mode), shadcn/ui, Tailwind CSS 4 e Iconsax. O objetivo é publicar este pacote no npm e reutilizá-lo em múltiplas aplicações, com Storybook integrado para desenvolvimento e documentação isolada.

Stack

- React 19 + TypeScript
- Vite 7 configurado para build de biblioteca (ES/CJS + declarações .d.ts)
- Tailwind CSS 4 + @tailwindcss/postcss + tokens do shadcn/ui
- shadcn/ui + Radix UI para primitives
- Iconsax como biblioteca de ícones padrão
- Storybook 10 (builder Vite) + Vitest + Playwright para rodar histórias como testes

Pré-requisitos

- Node.js 20+
- pnpm 10 (corepack enable pnpm facilita o setup)

Instalação

``bash
pnpm install
`

Scripts principais

| Comando | Descrição |
| ---------------------- | --------------------------------------------------------------------------------------- |
| pnpm dev | Playground local (src/App.tsx) para inspecionar o kit em tempo real. |
| pnpm build | Build padrão (dev/preview do repo). |
| pnpm build:lib | Gera os artefatos em dist/ (ESM, CJS, tipos e style.css) prontos para publicação. |
| pnpm storybook | Sobe o Storybook em http://localhost:6006 com Tailwind e Iconsax carregados. |
| pnpm storybook:build | Exporta a documentação estática para storybook-static/. |
| pnpm test | Executa o Vitest com o addon do Storybook (cada story roda em Chromium via Playwright). |
| pnpm storybook:test | Atalho direto para o projeto de testes do Storybook. |
| pnpm lint | Executa ESLint, incluindo regras específicas para .stories. |

Estrutura

`
src/
├─ components/
│ └─ ui/
│ ├─ button.tsx # componente base usando shadcn/ui + Radix Slot
│ └─ button.stories.tsx # documentação e testes isolados (Storybook)
├─ lib/utils.ts # helper cn (clsx + tailwind-merge)
├─ index.ts # ponto de entrada do pacote (reexporta os componentes públicos)
└─ App.tsx # showcase local consumindo o UI Kit
`

Tailwind + Tokens + Iconsax

- Tailwind 4 roda através de @tailwindcss/postcss, configurado em postcss.config.cjs.
- O tema (tailwind.config.ts) replica os tokens do shadcn e já define variantes personalizadas.
- src/index.css contém os tokens (CSS variables) e estilos específicos do kit (sem utilities/preflight).
- iconsax-react é a biblioteca oficial de ícones; exemplos de uso aparecem no App.tsx e nas stories.

Uso no app consumidor (import global único e sem colisão)

Para evitar conflitos com o Tailwind do app (ex.: classes responsivas md:* sendo sobrescritas),
o UI Kit publica apenas tokens/estilos próprios em um arquivo de estilo dedicado.

No seu main.tsx/index.tsx, faça um único import global:

`ts
import 'ies2-aulapp-ui-kit/style.css'
`

> Nota: não importe CSS a partir do entrypoint JS do pacote (import { Button } ...).
> O import de estilos é intencionalmente explícito.

Publicação no npm

1. Ajuste package.json (nome/versão, descrição, palavras-chave, etc.).
2. Gere o build da lib: pnpm run build:lib.
3. (Opcional) Gere a doc estática: pnpm run storybook:build e publique em algum CDN.
4. Faça login no npm (npm login) e rode npm publish --access public.

> Importante: apenas os módulos exportados por src/index.ts serão incluídos no pacote. Sempre reexporte novos componentes ali.

Contribuição

1. Abra uma issue descrevendo o componente ou ajuste desejado.
2. Crie uma branch feat/ ou fix/.
3. Toda alteração deve incluir stories/variantes e passar por pnpm lint, pnpm test e pnpm build.
4. Envie o PR com screenshots/GIFs atualizados do Storybook.

Próximos passos sugeridos

- Adicionar tokens de fundação (cores, tipografia, espaçamentos) como páginas dedicadas no Storybook.
- Automatizar publicação (GitHub Actions + npm) e deploy do Storybook (Vercel/Netlify).
- Expandir a galeria usando pnpm dlx shadcn@latest add ` para inputs, forms, banners, etc.