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

pnpm install

Scripts principais

| Comando | Descrição | | ---------------------- | --------------------------------------------------------------------------------------- | | pnpm dev | Playground local (src/App.tsx) para inspecionar o kit em tempo real. | | pnpm build | Gera os artefatos em dist/ (ESM, CJS e tipos) prontos para publicação no npm. | | 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 as variáveis CSS (modo claro/escuro) e @plugin "tailwindcss-animate" para animações.
• iconsax-react é a biblioteca oficial de ícones; exemplos de uso aparecem no App.tsx e nas stories.

Publicação no npm

1. Ajuste package.json (nome/versão, descrição, palavras-chave, etc.).
2. Gere o build: pnpm run build.
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/<nome> ou fix/<nome>.
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 <componente> para inputs, forms, banners, etc.