draives-components

Biblioteca de componentes UI do Draives - React components com Tailwind CSS.

Instalação

npm install draives-components

Dependências Requeridas

npm install react react-dom tailwindcss

Dependências Opcionais

Para componentes específicos, você pode precisar instalar:

• DataTable: @tanstack/react-table
• MapViewer: @react-google-maps/api
• Markdown: react-markdown remark-gfm rehype-prism-plus
• Modal/SideModal: framer-motion
• Masked Inputs: react-number-format react-hook-form

Configuração

1. Configurar Tailwind

Adicione o preset do Draives no seu tailwind.config.js:

export default {
  content: [
    // ... seus arquivos
    './node_modules/draives-components/dist/**/*.js',
  ],
  presets: [require('draives-components/tailwind.config')],
}

2. Importar Estilos

No seu arquivo CSS principal:

@import 'draives-components/styles';

Ou no seu entry point:

import 'draives-components/styles';

3. Configurar CSS Variables

Adicione as variáveis CSS ao seu :root:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
}

Uso

import { Button, Input, Card, Flex, Typography } from 'draives-components';

function App() {
  return (
    <Card p={4}>
      <Flex direction="col" gap={4}>
        <Typography variant="title2">Login</Typography>
        <Input label="Email" placeholder="[email protected]" />
        <Input label="Senha" type="password" />
        <Button>Entrar</Button>
      </Flex>
    </Card>
  );
}

Componentes Disponíveis

Layout

• Flex - Flexbox container
• Row - Flex row
• Col - Flex column
• Grid - CSS Grid container
• ResizablePanel - Painel redimensionável

Typography

• Typography - Componente de texto com variantes

Data Input

• Input - Input de texto
• TextArea - Área de texto
• Select - Select dropdown
• FileInput - Upload de arquivo
• CurrencyInput - Input de moeda
• DecimalInput - Input decimal
• PercentageInput - Input de porcentagem

Display

• Card - Card container
• FileViewer - Visualizador de arquivos
• MapViewer - Mapa do Google
• Markdown - Renderizador Markdown
• ImageGalleryModal - Galeria de imagens

Feedback

• Button - Botão
• Badge - Badge/tag
• Modal - Modal dialog
• SideModal - Modal lateral
• ConfirmModal - Modal de confirmação
• Toggle - Toggle switch
• Progress - Barra de progresso
• CircularProgress - Progresso circular
• Toast / ToastProvider - Notificações toast
• Typewriter - Efeito de digitação

Utilities

• cn - Merge de classes (clsx + tailwind-merge)
• formatFileSize - Formatação de tamanho de arquivo
• getFileIcon - Ícone baseado no tipo de arquivo

Licença

MIT