Visão Geral

Componentes Raaghu

Componentes de UI avançados e ricos em recursos para funcionalidades complexas. Construídos sobre elementos para criar soluções completas.

Duas Maneiras de Usar os Componentes

Opção 1: Do Código-Fonte/Storybook

Clonar Repositório:

git clone https://github.com/Wai-Technologies/raaghu-react.git
cd raaghu-react
npm install

Uso:

// Importar do código-fonte local
import RdsCompChart from '../raaghu-react/src/rds-comp-chart';
import RdsCompGrid from '../raaghu-react/src/rds-comp-grid';
import RdsCompDatepicker from '../raaghu-react/src/rds-comp-datepicker';

function Dashboard() {
  return (
    <>
      {/* Seu código aqui */}
    </>
  );
}

Opção 2: Pacote NPM (Recomendado)

Instalação:

## Instalar pacote principal
npm install @waiin/raaghu-react

## Instalar pacote de tema
npm install @waiin/raaghu-react-themes

Configurar Tema:

import '@waiin/raaghu-react-themes/build/styles/default.css';

Uso:

import { RdsCompChart, RdsCompGrid, RdsCompDatepicker } from '@waiin/raaghu-react';

function Dashboard() {
  return (
    <>
      {/* Seu código aqui */}
    </>
  );
}

Componentes Mais Populares

Componentes de Gráfico

Visualização de dados simplificada:

Usando Pacote NPM:

import { RdsCompChart } from '@waiin/raaghu-react';

<RdsCompChart
  type="bar"
  height={300}
/>

Usando do Código-Fonte:

import RdsCompChart from '../raaghu-react/src/rds-comp-chart';

<RdsCompChart
  type="bar"
  height={300}
/>

Tipos Disponíveis: bar, line, pie, doughnut, area, gauge

Grade de Dados

Tabelas poderosas com ordenação, filtragem e paginação:

Usando Pacote NPM:

import { RdsCompGrid } from '@waiin/raaghu-react';

<RdsCompGrid
  data={userData}
  pageSize={10}
/>

Usando do Código-Fonte:

import RdsCompGrid from '../raaghu-react/src/rds-comp-grid';

<RdsCompGrid
  data={userData}
  pageSize={10}
/>

Seletores de Data e Hora

Seleção aprimorada de data/hora:

Usando Pacote NPM:

import { RdsCompDatepicker, RdsCompTimePicker } from '@waiin/raaghu-react';

<RdsCompDatepicker value={selectedDate} onChange={setSelectedDate} format="DD/MM/YYYY" />
<RdsCompTimePicker value={selectedTime} onChange={setSelectedTime} format="12" />

Usando do Código-Fonte:

import RdsCompDatepicker from '../raaghu-react/src/rds-comp-datepicker';
import RdsCompTimePicker from '../raaghu-react/src/rds-comp-time-picker';

<RdsCompDatepicker value={selectedDate} onChange={setSelectedDate} format="DD/MM/YYYY" />
<RdsCompTimePicker value={selectedTime} onChange={setSelectedTime} format="12" />

Interface de Chat IA

Componentes modernos de chat:

Usando Pacote NPM:

import { RdsCompAiChatBot } from '@waiin/raaghu-react';

<RdsCompAiChatBot
  title="Suporte ao Cliente"
  placeholder="Digite sua mensagem..."
  onSend={handleMessage}
  showTyping={true}
/>

Usando do Código-Fonte:

import RdsCompAiChatBot from '../raaghu-react/src/rds-comp-ai-chat-bot';

<RdsCompAiChatBot
  title="Suporte ao Cliente"
  placeholder="Digite sua mensagem..."
  onSend={handleMessage}
  showTyping={true}
/>

Comparação Rápida

Recurso	Pacote NPM	Do Código-Fonte
Configuração	npm install	Clonar repositório
Atualizações	npm update	git pull manual
Tamanho do Bundle	Otimizado	Código-fonte completo
Customização	Limitada	Acesso total
Ideal Para	Aplicações de produção	Desenvolvimento/customização

Categorias Disponíveis

Temos 52 componentes organizados em 6 categorias principais:

• 📊 Gráficos e Dados (13) - Todos os tipos de gráficos, grades de dados, visualizações
• 🤖 IA e Chat (9) - Chatbots, mensagens, interfaces de IA
• 📝 Formulários e Entradas (5) - Seletores de data, seletor de cores, assinatura eletrônica
• 🎨 Mídia e Conteúdo (8) - Reprodutores de vídeo/áudio, editor de texto, exibição de código
• 🧭 Navegação e Layout (7) - Grades, quadros Kanban, estruturas em árvore
• 🔧 Utilitários e Interativos (10) - Notificações, spinners, mapas, tours

Exemplos Rápidos

Gráfico de Painel:

import { RdsCompChartLine } from '@waiin/raaghu-react';
<RdsCompChartLine data={salesData} responsive />

Grade de Gerenciamento de Usuários:

import { RdsCompGrid } from '@waiin/raaghu-react';
<RdsCompGrid data={users} columns={userColumns} pagination />

Seletor de Data de Evento:

import { RdsCompDatepicker } from '@waiin/raaghu-react';
<RdsCompDatepicker value={eventDate} onChange={setEventDate} />

Chat de Suporte:

import { RdsCompAiChatBot } from '@waiin/raaghu-react';
<RdsCompAiChatBot title="Central de Ajuda" onSend={handleSupport} />

Começando

1. Escolha sua abordagem (pacote NPM ou código-fonte)
2. Escolha uma categoria que atenda às suas necessidades
3. Navegue pelo Storybook para exemplos interativos e listas completas de componentes
4. Copie os exemplos de código e personalize para o seu projeto

Informações do Pacote

• Pacote Único: @waiin/raaghu-react contém todos os componentes
• Pacote de Tema: @waiin/raaghu-react-themes para estilização
• Navegue por Tudo: Visite nosso Storybook para o catálogo completo de componentes
• TypeScript: Definições de tipo completas incluídas
• Responsivo: Design mobile-first
• Acessível: Compatível com WCAG 2.1 AA