icaro-lib-teste

Uma biblioteca de componentes React utilizando Shadcn-UI, construída com Vite e TypeScript.

Instalação

npm install icaro-lib-teste

Configuração

1. Instale as dependências necessárias

Certifique-se de ter React e React DOM instalados:

npm install react react-dom

2. Configure o Tailwind CSS

Esta biblioteca usa Tailwind CSS para estilos. Instale e configure o Tailwind no seu projeto:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. Importe o CSS global

Adicione as diretivas do Tailwind no seu arquivo CSS principal (geralmente src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Importe os estilos da biblioteca

No seu arquivo de entrada (geralmente src/main.tsx ou src/index.tsx), importe o CSS da biblioteca:

import 'icaro-lib-teste/src/index.css';

Uso

import { Button, Input, Checkbox, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from 'icaro-lib-teste';

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Input placeholder="Digite algo" />
      <Checkbox />
      <AlertDialog>
        <AlertDialogTrigger>Open</AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}

Componentes Disponíveis

• Button: Um botão estilizado.
• Input: Campo de entrada de texto.
• Checkbox: Caixa de seleção.
• AlertDialog: Diálogo de alerta com trigger, conteúdo, cabeçalho, etc.

Desenvolvimento

Para contribuir ou modificar a biblioteca:

1. Clone o repositório.
2. Instale as dependências: npm install.
3. Execute o servidor de desenvolvimento: npm run dev.
4. Faça suas modificações.
5. Execute o build: npm run build.
6. Teste localmente: npm pack.

Licença

MIT