postall-log

Uma biblioteca de componentes React reutilizáveis com sistema completo de Design Tokens para o projeto Postall Log.

🚀 Instalação

npm install postall-log

📦 Dependências necessárias

Esta biblioteca requer as seguintes dependências no seu projeto:

npm install react react-dom styled-components react-icons

🎯 Uso

Componentes

import { Button } from 'postall-log';

function App() {
  return (
    <div>
      <Button>Botão Padrão</Button>
      <Button variant="secondary">Botão Secundário</Button>
      <Button variant="outline" size="lg">Botão Outline</Button>
      <Button variant="success" iconLeft>Sucesso</Button>
      <Button variant="error" iconRight>Erro</Button>
    </div>
  );
}

🎨 Design Tokens (NOVO!)

import { theme, colors, spacing } from 'postall-log';
import styled from 'styled-components';

const MyCard = styled.div`
  background: ${theme.colors.white};
  border: 1px solid ${theme.colors.gray[200]};
  border-radius: ${theme.borderRadius.lg};
  padding: ${theme.spacing[4]};
  box-shadow: ${theme.shadows.sm};
  
  h2 {
    color: ${theme.colors.gray[900]};
    font-size: ${theme.typography.fontSize.xl};
    font-weight: ${theme.typography.fontWeight.semibold};
  }
`;

📖 Componentes

Button

Botão customizável com diferentes variantes e tamanhos.

Props:

• variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'success' | 'warning' | 'error' - Estilo do botão (padrão: 'primary')
• size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' - Tamanho do botão (padrão: 'md')
• fullWidth?: boolean - Ocupa toda largura disponível
• iconLeft?: boolean - Exibe ícone à esquerda
• iconRight?: boolean - Exibe ícone à direita
• children: ReactNode - Conteúdo do botão
• ...props - Todas as props padrão de HTMLButtonElement

🎨 Design Tokens

Cores disponíveis:

theme.colors.primary[600]    // Azul principal
theme.colors.secondary[500]  // Cinza
theme.colors.success[500]    // Verde
theme.colors.warning[500]    // Amarelo  
theme.colors.error[500]      // Vermelho
theme.colors.gray[100-900]   // Escala de cinza

Espaçamentos:

theme.spacing[1]   // 4px
theme.spacing[2]   // 8px
theme.spacing[4]   // 16px
theme.spacing[8]   // 32px

Tipografia:

theme.typography.fontSize.xs    // 12px
theme.typography.fontSize.base  // 16px
theme.typography.fontSize.xl    // 20px
theme.typography.fontWeight.semibold  // 600

Sombras:

theme.shadows.sm   // Sombra sutil
theme.shadows.lg   // Sombra pronunciada

🔧 Desenvolvimento

Comandos disponíveis:

# Compilar a biblioteca
npm run build

# Compilar em modo watch
npm run build:watch

# Executar ambiente de desenvolvimento
npm run dev

# Linting
npm run lint

📁 Estrutura

src/
├── components/
│   └── button/
│       └── index.tsx
├── tokens/
│   ├── colors.ts
│   ├── typography.ts
│   ├── spacing.ts
│   └── theme.ts
└── index.ts

🛠️ Build

A biblioteca é compilada usando tsup e gera:

• CommonJS (dist/index.cjs)
• ES Modules (dist/index.js)
• TypeScript declarations (dist/index.d.ts)

🎯 Benefícios do Design System

✅ Consistência visual automática
✅ Manutenção centralizada de estilos
✅ Escalabilidade para grandes equipes
✅ TypeScript completo
✅ Futuro dark mode só trocando tema

📚 Documentação Adicional

• Guia de Design Tokens
• Resolução de Problemas

📄 Licença

MIT