Xertica UI

Design System completo com componentes React e Tailwind CSS v4.0, construído com TypeScript e Shadcn UI.

🚀 Início Rápido

npm install
npm run dev

Acesse: http://localhost:3000

Login: Use qualquer email e senha (não vazios)

📋 Pré-requisitos

• Node.js 18+ instalado
• npm, yarn ou pnpm

🔧 Instalação

1. Clone o repositório:

git clone [URL_DO_REPOSITORIO]
cd xertica-ui

2. Instale as dependências:

npm install

3. (Opcional) Configure variáveis de ambiente:

cp .env.example .env
# Edite o arquivo .env com suas API keys (opcional)

📁 Estrutura da Árvore do Projeto

xertica-ui/
├── assets/                       # Recursos estáticos (SVGs, imagens)
│   ├── xertica-logo.svg
│   └── xertica-x-logo.svg
│
├── components/                   # Componentes React
│   ├── design-system-docs/      # Documentação interativa dos componentes
│   │   ├── README.md
│   │   ├── CHECKLIST.md
│   │   ├── MIGRATION_GUIDE.md
│   │   ├── index.ts
│   │   ├── accordion.tsx
│   │   ├── alert.tsx
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── map.tsx
│   │   ├── xertica-assistant.tsx
│   │   └── ... (todos os componentes documentados)
│   │
│   ├── examples/                # Exemplos de uso dos componentes
│   │   ├── index.ts
│   │   ├── DrawingMapExample.tsx
│   │   ├── FilterableMapExample.tsx
│   │   ├── LocationPickerExample.tsx
│   │   ├── MapExamples.tsx
│   │   ├── MapShowcase.tsx
│   │   ├── RouteMapExamples.tsx
│   │   └── SimpleFilterableMap.tsx
│   │
│   ├── figma/                   # Componentes específicos do Figma
│   │   └── ImageWithFallback.tsx
│   │
│   ├── media/                   # Componentes de mídia
│   │   ├── AudioPlayer.tsx
│   │   ├── FloatingMediaWrapper.tsx
│   │   └── VideoPlayer.tsx
│   │
│   ├── ui/                      # Componentes Shadcn/ui base
│   │   ├── accordion.tsx
│   │   ├── alert-dialog.tsx
│   │   ├── alert.tsx
│   │   ├── aspect-ratio.tsx
│   │   ├── avatar.tsx
│   │   ├── badge.tsx
│   │   ├── breadcrumb.tsx
│   │   ├── button.tsx
│   │   ├── calendar.tsx
│   │   ├── card.tsx
│   │   ├── carousel.tsx
│   │   ├── chart.tsx
│   │   ├── checkbox.tsx
│   │   ├── collapsible.tsx
│   │   ├── command.tsx
│   │   ├── context-menu.tsx
│   │   ├── dialog.tsx
│   │   ├── drawer.tsx
│   │   ├── dropdown-menu.tsx
│   │   ├── form.tsx
│   │   ├── google-maps-loader.tsx
│   │   ├── hover-card.tsx
│   │   ├── input-otp.tsx
│   │   ├── input.tsx
│   │   ├── label.tsx
│   │   ├── map-config.ts
│   │   ├── map-layers.tsx
│   │   ├── map.exports.ts
│   │   ├── map.tsx
│   │   ├── menubar.tsx
│   │   ├── navigation-menu.tsx
│   │   ├── page-header.tsx
│   │   ├── pagination.tsx
│   │   ├── popover.tsx
│   │   ├── progress.tsx
│   │   ├── radio-group.tsx
│   │   ├── resizable.tsx
│   │   ├── route-map.tsx
│   │   ├── scroll-area.tsx
│   │   ├── select.tsx
│   │   ├── separator.tsx
│   │   ├── sheet.tsx
│   │   ├── sidebar.tsx
│   │   ├── simple-map.tsx
│   │   ├── skeleton.tsx
│   │   ├── slider.tsx
│   │   ├── sonner.tsx
│   │   ├── switch.tsx
│   │   ├── table.tsx
│   │   ├── tabs.tsx
│   │   ├── textarea.tsx
│   │   ├── toggle-group.tsx
│   │   ├── toggle.tsx
│   │   ├── tooltip.tsx
│   │   ├── use-mobile.ts
│   │   ├── utils.ts
│   │   ├── xertica-assistant.tsx
│   │   └── ... (documentações *.md)
│   │
│   ├── index.ts                 # Barrel exports
│   ├── AssistantAdvancedExamples.tsx
│   ├── AssistantDemo.tsx
│   ├── AssistantShowcase.tsx
│   ├── AssistenteExpandidoPage.tsx
│   ├── AssistenteXertica.tsx
│   ├── AudioPlayer.tsx
│   ├── CodeBlock.tsx
│   ├── ComponentDocumentation.tsx
│   ├── ComponentsPage.tsx
│   ├── DesignSystemPage.tsx
│   ├── DocumentEditor.tsx
│   ├── ForgotPasswordPage.tsx
│   ├── FormattedDocument.tsx
│   ├── HomeContent.tsx
│   ├── HomePage.tsx
│   ├── LanguageSelector.tsx
│   ├── LoginPage.tsx
│   ├── MapPage.tsx
│   ├── MarkdownMessage.tsx
│   ├── ModernChatInput.tsx
│   ├── PlaceholderPage.tsx
│   ├── PodcastPlayer.tsx
│   ├── PropsTable.tsx
│   ├── ResetPasswordPage.tsx
│   ├── SettingsPage.tsx
│   ├── Sidebar.tsx
│   ├── ThemeToggle.tsx
│   ├── VerifyEmailPage.tsx
│   ├── XerticaAssistantAdvancedExamples.tsx
│   ├── XerticaAssistantPage.tsx
│   ├── XerticaAssistantShowcase.tsx
│   ├── XerticaLogo.tsx
│   ├── XerticaOrbe.tsx
│   └── XerticaXLogo.tsx
│
├── contexts/                    # Contextos React (state management)
│   ├── ApiKeyContext.tsx       # Gerenciamento de API Keys
│   ├── AssistenteContext.tsx   # Estado do assistente AI
│   ├── BrandColorsContext.tsx  # Cores da marca
│   ├── LanguageContext.tsx     # Idioma da aplicação
│   └── ThemeContext.tsx        # Tema claro/escuro
│
├── guidelines/                  # Diretrizes do projeto
│   └── Guidelines.md
│
├── hooks/                       # Custom React hooks
│   └── useTheme.ts
│
├── imports/                     # Componentes e SVGs importados do Figma
│   ├── Podcast.tsx
│   ├── XerticaAi.tsx
│   ├── XerticaX.tsx
│   ├── svg-aueiaqngck.ts
│   ├── svg-v9krss1ozd.ts
│   └── svg-vhrdofe3qe.ts
│
├── styles/                      # Estilos globais e CSS
│   └── globals.css             # CSS global com Design Tokens
│
├── utils/                       # Funções utilitárias
│   └── gemini.ts               # Integração com Gemini AI
│
├── App.tsx                      # Componente raiz da aplicação
├── main.tsx                     # Entry point (renderização inicial)
├── routes.tsx                   # Configuração de rotas (React Router)
├── index.html                   # HTML base
├── package.json                 # Dependências e scripts
├── tsconfig.json                # Configuração do TypeScript
├── tsconfig.node.json           # TypeScript config para Node (Vite)
├── vite.config.ts               # Configuração do Vite
├── vite-env.d.ts                # Declarações de tipos para Vite
├── postcss.config.js            # Configuração do PostCSS
├── eslint.config.js             # Configuração do ESLint
├── .env.example                 # Exemplo de variáveis de ambiente
├── .gitignore                   # Arquivos ignorados pelo Git
├── Attributions.md              # Atribuições de recursos
└── README.md                    # Este arquivo

🚀 Tecnologias

• React 18.3 - Biblioteca JavaScript para interfaces
• TypeScript 5.7 - Superset tipado do JavaScript
• Tailwind CSS v4.0 - Framework CSS utility-first
• Vite 6.0 - Build tool e dev server ultrarrápido
• React Router 7 - Roteamento client-side
• Motion 10.18 - Animações fluidas (Framer Motion)
• Radix UI - Componentes acessíveis e não estilizados
• Shadcn/ui - Biblioteca de componentes UI
• Lucide React - Ícones SVG
• Sonner - Toast notifications elegantes
• Recharts - Gráficos e visualizações de dados
• Google Generative AI - Integração com Gemini

🏃 Executando o Projeto

Modo de Desenvolvimento

npm run dev

O projeto será aberto automaticamente em http://localhost:3000

Build de Produção

npm run build

Preview da Build de Produção

npm run preview

Type Check

npm run type-check

🎨 Design System

O projeto utiliza um Design System completo definido em /styles/globals.css:

Cores Principais

• Primary: #2C275B - Cor primária Xertica
• Background: #FFFFFF (light) / #0F0E19 (dark)
• Sidebar: #2C275B

Tipografia

• Fonte: Roboto (400, 500, 600, 700, 800)
• Tamanhos: H1 (32px), H2 (28px), H3 (24px), H4 (20px), P (14px)

Raios de Borda

• Botões: 12px (rounded-[12px])
• Cards: 12px (rounded-[12px])
• Inputs: 4px (rounded-[4px])

Sombras

• Cards: 0px 0px 48px 0px rgba(0, 0, 0, 0.1)

📚 Design System Documentation

O projeto inclui documentação completa dos componentes em /components/design-system-docs/:

• Exemplos interativos de todos os componentes
• Props tables e código de exemplo
• Guias de uso e best practices
• Componentes de showcase e demonstração

Acesse /design-system na aplicação para visualizar a documentação completa.

🌓 Dark Mode

O sistema possui suporte completo a Dark Mode com toggle manual. A preferência é salva em localStorage.

🔐 Autenticação

O sistema possui autenticação simulada que aceita qualquer credencial não vazia. Para fins de desenvolvimento, use:

• Email: [email protected]
• Senha: qualquer senha

🗺️ Rotas Principais

• /login - Página de login
• /forgot-password - Recuperação de senha
• /verify-email - Verificação de email
• /reset-password - Redefinição de senha
• /home - Página principal (protegida)
• /assistente-expandido - Assistente AI em tela cheia (protegida)
• /settings - Configurações (protegida)

🤖 Integração com Gemini AI

Para usar o assistente AI, você precisa configurar uma API Key do Google Gemini:

1. Acesse o assistente AI
2. Clique em "Configurar API Key"
3. Insira sua chave da API do Google Gemini
4. A chave é salva localmente no navegador

Obter API Key: Google AI Studio

🎯 Funcionalidades

• ✅ Sistema de autenticação completo
• ✅ Sidebar recolhível (80px ↔ 256px)
• ✅ Assistente AI lateral e página dedicada
• ✅ Editor de documentos integrado
• ✅ Dark mode completo
• ✅ Seletor de idioma visual
• ✅ Sistema de notificações (toast)
• ✅ Animações fluidas
• ✅ Design responsivo
• ✅ Cards de analytics/métricas
• ✅ Histórico de conversas
• ✅ Favoritos e documentos salvos

📱 Responsividade

O projeto é totalmente responsivo com breakpoints:

• Mobile: 320px+
• Tablet: 768px+
• Desktop: 1024px+

🛠️ Componentes Shadcn/ui Disponíveis

O projeto inclui todos os componentes da biblioteca Shadcn/ui:

• Accordion, Alert, Alert Dialog, Avatar, Badge, Breadcrumb
• Button, Calendar, Card, Carousel, Chart, Checkbox
• Collapsible, Command, Context Menu, Dialog, Drawer
• Dropdown Menu, Form, Hover Card, Input, Label
• Menubar, Navigation Menu, Popover, Progress
• Radio Group, Scroll Area, Select, Separator
• Sheet, Skeleton, Slider, Switch, Table, Tabs
• Textarea, Toggle, Tooltip, e mais...

🔄 Scripts Disponíveis

• npm run dev - Inicia servidor de desenvolvimento
• npm run build - Cria build de produção
• npm run preview - Preview da build
• npm run type-check - Verifica tipos TypeScript
• npm run lint - Executa linter

📝 Convenções de Código

• Componentes: PascalCase (ex: LoginPage.tsx)
• Utilitários: camelCase (ex: gemini.ts)
• Contextos: PascalCase com sufixo Context (ex: ThemeContext.tsx)

🐛 Troubleshooting

CSS não carrega

1. Verifique se todas as dependências estão instaladas:

npm install

2. Limpe o cache do Vite:

rm -rf node_modules/.vite
npm run dev

Erros de TypeScript

Execute a verificação de tipos:

npm run type-check

Porta 3000 em uso

Altere a porta em vite.config.ts:

server: {
  port: 3001, // ou outra porta
}

📄 Licença

Este projeto é privado e proprietário.

👥 Autor

Xertica AI Team

Nota: Este é um projeto de demonstração. Para uso em produção, implemente autenticação real, validação de segurança e testes adequados.