Ragekit UI

Uma biblioteca de componentes React moderna e acessível, construída com Tailwind CSS e TypeScript.

🚀 Instalação

npm install ragekit
# ou
yarn add ragekit
# ou
pnpm add ragekit

📦 Pré-requisitos

Sua aplicação deve ter:

• React 18+
• Tailwind CSS 3+
• TypeScript (recomendado)

🎨 Configuração do Tailwind CSS

1. Instale o Tailwind CSS

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

2. Configure o tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/ragekit/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        // Design system colors
        orange: '#E27936',
        'dark-orange': '#C65A1A',
        'light-orange': '#F5E6D3',
        blue: '#2563EB',
        'dark-blue': '#1D4ED8',
        'light-blue': '#DBEAFE',
        green: '#059669',
        'dark-green': '#047857',
        'light-green': '#D1FAE5',
      },
      fontFamily: {
        satoshi: ['Satoshi', 'sans-serif'],
        baskerville: ['Baskerville', 'serif'],
      },
    },
  },
  plugins: [],
}

3. Configure o CSS global

No seu arquivo CSS principal (ex: src/index.css):

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap');

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

/* Importar estilos da biblioteca */
@import 'ragekit/styles.css';

🧩 Uso dos Componentes

Button

O componente Button oferece múltiplas variantes e suporte a ícones.

import { Button } from 'ragekit';

function App() {
  return (
    <div className="space-y-4">
      {/* Botão básico */}
      <Button label="Clique aqui" />
      
      {/* Com variantes */}
      <Button 
        label="Botão Primário" 
        variant="filled" 
        color="primary" 
        size="normal" 
      />
      
      {/* Com ícones */}
      <Button 
        label="Download" 
        leftIcon={<DownloadIcon />}
        variant="outlined"
        color="secondary"
      />
      
      {/* Como link */}
      <Button 
        label="Visitar site" 
        href="https://example.com"
        target="_blank"
        variant="text"
        color="tertiary"
      />
    </div>
  );
}

Props do Button

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | label | string | - | Texto do botão | | variant | 'filled' \| 'outlined' \| 'text' | 'filled' | Estilo visual | | color | 'primary' \| 'secondary' \| 'tertiary' | 'primary' | Cor do botão | | size | 'small' \| 'normal' \| 'large' | 'normal' | Tamanho | | leftIcon | ReactNode | - | Ícone à esquerda | | rightIcon | ReactNode | - | Ícone à direita | | href | string | - | URL para comportamento de link | | target | string | - | Target para links | | onClick | () => void | - | Handler de clique |

Input

Componente de input com suporte a labels, erros e validação.

import { Input } from 'ragekit';

function Form() {
  return (
    <div className="space-y-4">
      {/* Input básico */}
      <Input 
        label="Nome" 
        placeholder="Digite seu nome" 
      />
      
      {/* Com erro */}
      <Input 
        label="Email" 
        type="email"
        error="Email inválido"
        color="secondary"
      />
      
      {/* Com tamanho personalizado */}
      <Input 
        label="Mensagem" 
        size="large"
        color="tertiary"
        placeholder="Digite sua mensagem..."
      />
    </div>
  );
}

Props do Input

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | label | string | - | Label do campo | | error | string | - | Mensagem de erro | | color | 'primary' \| 'secondary' \| 'tertiary' | 'primary' | Cor do input | | size | 'small' \| 'normal' \| 'large' | 'normal' | Tamanho |

Text

Componente de texto com tipografia consistente.

import { Text } from 'ragekit';

function Content() {
  return (
    <div className="space-y-4">
      {/* Títulos */}
      <Text type="title" size="xl" color="primary">
        Título Principal
      </Text>
      
      {/* Subtítulos */}
      <Text type="subtitle" size="lg" font="satoshi">
        Subtítulo da seção
      </Text>
      
      {/* Texto normal */}
      <Text type="text" size="normal" color="secondary">
        Este é um parágrafo de texto normal com a fonte Satoshi.
      </Text>
      
      {/* Texto pequeno */}
      <Text type="text" size="small" font="baskerville">
        Texto pequeno com fonte Baskerville.
      </Text>
    </div>
  );
}

Props do Text

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | type | 'title' \| 'subtitle' \| 'text' | 'text' | Tipo de texto | | size | 'xs' \| 'sm' \| 'normal' \| 'lg' \| 'xl' \| '2xl' | 'normal' | Tamanho | | color | 'primary' \| 'secondary' \| 'tertiary' | - | Cor do texto | | font | 'satoshi' \| 'baskerville' | 'satoshi' | Fonte | | weight | 'light' \| 'normal' \| 'medium' \| 'semibold' \| 'bold' | - | Peso da fonte | | align | 'left' \| 'center' \| 'right' | 'left' | Alinhamento |

🎨 Design System

Cores

• Primary (Orange): #E27936 - Ações principais
• Secondary (Blue): #2563EB - Ações secundárias
• Tertiary (Green): #059669 - Sucesso/confirmação

Fontes

• Satoshi: Fonte principal para UI
• Baskerville: Fonte para títulos e textos especiais

Acessibilidade

Todos os componentes incluem:

• ✅ Suporte a navegação por teclado
• ✅ Focus rings visíveis
• ✅ Contraste adequado
• ✅ ARIA labels quando necessário

🔧 Desenvolvimento

Para contribuir com a biblioteca:

# Clone o repositório
git clone https://github.com/ragekit/ragekit-ui.git
cd ragekit-ui

# Instale as dependências
npm install

# Rode o Storybook
npm run storybook

# Build da biblioteca
npm run build:lib

# Testes
npm run test

📝 Licença

MIT License - veja o arquivo LICENSE para detalhes.

Feito com ❤️ pela equipe Ragekit.