Raizen Banking UI Kit

Uma biblioteca de componentes UI inspirada no design do Raizen Banking, construída com Tamagui para React e React Native.

Instalação

npm install @luizmauro/ui-kit

Configuração

import { TamaguiProvider } from '@tamagui/core'
import { config } from '@luizmauro/ui-kit/tamagui.config'

export default function App() {
  return (
    <TamaguiProvider config={config}>
      {/* Sua aplicação */}
    </TamaguiProvider>
  )
}

Componentes

Layout Completo

import { Layout, BalanceCard, ActionButton } from '@luizmauro/ui-kit'
import { CreditCard, DollarSign, Users } from '@tamagui/lucide-icons'

const sidebarItems = [
  { id: 'home', label: 'Início', icon: <Home size={20} /> },
  { 
    id: 'payments', 
    label: 'Pagamentos', 
    icon: <CreditCard size={20} />,
    expandable: true,
    children: [
      { id: 'anticipation', label: 'Antecipação de recebíveis', active: true }
    ]
  }
]

function App() {
  return (
    <Layout 
      sidebarItems={sidebarItems}
      userName="João Silva"
      userRole="Administrador"
    >
      <BalanceCard
        title="Disponível para antecipação"
        balance={40985.88}
        details={[
          { label: 'Será recebido', value: 'R$ 12.900,00' },
          { label: 'Data do crédito', value: 'dd/mm/aaaa' }
        ]}
      />
    </Layout>
  )
}

Componentes Individuais

BalanceCard

<BalanceCard
  title="Disponível para antecipação"
  balance={40985.88}
  details={[
    { label: 'Será recebido', value: 'R$ 12.900,00' },
    { label: 'Data do crédito', value: 'dd/mm/aaaa' }
  ]}
/>

ActionButton

<ActionButton
  title="Configure sua antecipação automática"
  variant="primary"
  fullWidth
  onPress={() => console.log('Configurar')}
/>

StatusBadge

<StatusBadge label="Ativo" variant="success" />
<StatusBadge label="Pendente" variant="warning" />
<StatusBadge label="Erro" variant="error" />

InfoCard

<InfoCard
  title="Histórico de antecipações"
  icon={<History size={20} />}
  onPress={() => navigate('/history')}
/>

Breadcrumb

<Breadcrumb
  items={[
    { label: 'Antecipação de recebíveis', active: true }
  ]}
/>

Tema e Cores

O tema segue as cores do Raizen Banking:

• Primary: #4A4A4A (cinza escuro)
• Background: #FFFFFF (branco)
• Surface: #F9FAFB (cinza claro)
• Text: #111827 (preto)
• Border: #E5E7EB (cinza borda)

Componentes Disponíveis

• Layout - Layout completo com header e sidebar
• Header - Cabeçalho com logo e informações do usuário
• Sidebar - Menu lateral navegável
• BalanceCard - Card para exibir saldos e valores
• ActionButton - Botões de ação personalizáveis
• InfoCard - Cards informativos clicáveis
• StatusBadge - Badges de status coloridos
• Breadcrumb - Navegação breadcrumb
• Button - Botão básico
• Card - Card genérico
• Input - Campo de entrada
• Text - Componente de texto

Licença

MIT