Fernando UI Kit

Biblioteca de componentes em React construída com Vite + TypeScript + TailwindCSS + Storybook + Jest e preparada para ser publicada no npm sem dependências adicionais além de React.

Tecnologias configuradas

• Vite (React + TS) em modo biblioteca, gerando bundles ES e CJS + tipos .d.ts
• TailwindCSS 4 + plugin oficial do Vite, com Tailwind Variants e Tailwind Merge para estilização consistente
• Storybook 10 com builder Vite e addons de A11y, Docs e Vitest
• Jest 29 + React Testing Library para testes unitários em JSDOM
• Configurações de lint, PostCSS e scripts de build/publicação prontos

Scripts principais

| Script | Descrição | | --- | --- | | npm run dev | Playground local com Vite para testar os componentes em tempo real | | npm run storybook | Inicia o Storybook (porta 6006) com o componente Button e suas variações | | npm run test | Executa a suíte Jest em modo headless | | npm run build | Limpa dist/, gera declarações TypeScript e empacota a lib em formato ES/CJS + CSS | | npm run build-storybook | Exporta a documentação do Storybook como site estático |

Usando o componente

import { Button } from '@fernando/ui-kit';

export function Example() {
  return <Button variant="outline" intent="success">Enviar</Button>;
}

O CSS gerado pelo Tailwind é importado automaticamente quando você usa a biblioteca, mas também está disponível via import '@fernando/ui-kit/style.css' caso queira controlar a ordem de carregamento.

Publicação no npm

1. Atualize package.json (name, version, description, etc.)
2. Garanta que os testes e o Storybook estão ok:

   npm run lint
   npm run test
   npm run storybook

3. Gere o pacote final:

   npm run build

4. Faça login no npm (npm login) e publique:

   npm publish --access public

Após publicado, instale a lib via npm install @fernando/ui-kit em qualquer projeto React 18+ ou 19+.*** End Patch