xertica-ui 1.0.0

package/App.tsx

@@ -0,0 +1,182 @@
+import React, { useState, useEffect, useLayoutEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router';
+import { LoginPage } from './components/LoginPage';
+import { ForgotPasswordPage } from './components/ForgotPasswordPage';
+import { VerifyEmailPage } from './components/VerifyEmailPage';
+import { ResetPasswordPage } from './components/ResetPasswordPage';
+import { HomePage } from './components/HomePage';
+import { TemplatePage } from './components/TemplatePage';
+import { ThemeProvider } from './contexts/ThemeContext';
+import { LanguageProvider } from './contexts/LanguageContext';
+import { ApiKeyProvider } from './contexts/ApiKeyContext';
+import { AssistenteProvider } from './contexts/AssistenteContext';
+import { BrandColorsProvider } from './contexts/BrandColorsContext';
+import { GoogleMapsLoaderProvider } from './components/ui/google-maps-loader';
+import { Toaster } from './components/ui/sonner';
+import { XerticaAssistant } from './components/ui/xertica-assistant';
+
+// Garantir que o Light Mode seja aplicado imediatamente
+if (typeof window !== 'undefined') {
+  // Remover classe dark imediatamente
+  document.documentElement.classList.remove('dark');
+  
+  // Se não há tema salvo, definir light mode
+  const savedTheme = localStorage.getItem('xertica-theme');
+  if (!savedTheme) {
+    localStorage.setItem('xertica-theme', 'light');
+  }
+}
+
+// Protected Route component
+function ProtectedRoute({ children, user }: { children: React.ReactNode; user: { email: string } | null }) {
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+  return <>{children}</>;
+}
+
+// Auth wrapper component
+function AuthWrapper() {
+  const [user, setUser] = useState<{ email: string } | null>(null);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  // Check for existing user session on mount
+  useEffect(() => {
+    const savedUser = localStorage.getItem('xertica_user');
+    if (savedUser) {
+      setUser(JSON.parse(savedUser));
+    }
+  }, []);
+
+  // Redirect authenticated users away from login and auth pages
+  useEffect(() => {
+    const authPages = ['/login', '/forgot-password', '/verify-email', '/reset-password'];
+    if (user && authPages.includes(location.pathname)) {
+      navigate('/home', { replace: true });
+    }
+  }, [user, location.pathname, navigate]);
+
+  const handleLogin = (email: string, password: string) => {
+    // Aceita qualquer credencial não vazia
+    if (email.trim() && password.trim()) {
+      const userData = { email };
+      setUser(userData);
+      localStorage.setItem('xertica_user', JSON.stringify(userData));
+      navigate('/home');
+      return true;
+    }
+    return false;
+  };
+
+  const handleLogout = () => {
+    setUser(null);
+    localStorage.removeItem('xertica_user');
+    navigate('/login');
+  };
+
+  return (
+    <div className="min-h-screen bg-muted overflow-x-hidden max-w-full">
+      <Routes>
+        <Route 
+          path="/login" 
+          element={
+            user ? (
+              <Navigate to="/home" replace />
+            ) : (
+              <LoginPage onLogin={handleLogin} />
+            )
+          } 
+        />
+        <Route 
+          path="/forgot-password" 
+          element={
+            user ? (
+              <Navigate to="/home" replace />
+            ) : (
+              <ForgotPasswordPage />
+            )
+          } 
+        />
+        <Route 
+          path="/verify-email" 
+          element={
+            user ? (
+              <Navigate to="/home" replace />
+            ) : (
+              <VerifyEmailPage />
+            )
+          } 
+        />
+        <Route 
+          path="/reset-password" 
+          element={
+            user ? (
+              <Navigate to="/home" replace />
+            ) : (
+              <ResetPasswordPage />
+            )
+          } 
+        />
+        <Route 
+          path="/home" 
+          element={
+            <ProtectedRoute user={user}>
+              <HomePage user={user} onLogout={handleLogout} />
+            </ProtectedRoute>
+          } 
+        />
+        <Route 
+          path="/template" 
+          element={
+            <ProtectedRoute user={user}>
+              <TemplatePage user={user} onLogout={handleLogout} />
+            </ProtectedRoute>
+          } 
+        />
+        <Route 
+          path="/" 
+          element={<Navigate to={user ? "/home" : "/login"} replace />} 
+        />
+        <Route 
+          path="*" 
+          element={<Navigate to={user ? "/home" : "/login"} replace />} 
+        />
+      </Routes>
+
+      {/* Mobile Floating Assistant Button - Removed */}
+    </div>
+  );
+}
+
+export default function App() {
+  // Garantir Light Mode como padrão antes da renderização
+  useLayoutEffect(() => {
+    const root = document.documentElement;
+    const savedTheme = localStorage.getItem('xertica-theme');
+    
+    if (!savedTheme || savedTheme === 'light') {
+      root.classList.remove('dark');
+      localStorage.setItem('xertica-theme', 'light');
+    }
+  }, []);
+
+  return (
+    <ApiKeyProvider>
+      <GoogleMapsLoaderProvider>
+        <LanguageProvider>
+          <BrandColorsProvider>
+            <ThemeProvider>
+              <AssistenteProvider>
+                <Router>
+                  <AuthWrapper />
+                  <Toaster position="top-right" richColors />
+                </Router>
+              </AssistenteProvider>
+            </ThemeProvider>
+          </BrandColorsProvider>
+        </LanguageProvider>
+      </GoogleMapsLoaderProvider>
+    </ApiKeyProvider>
+  );
+}

package/README.md

@@ -0,0 +1,330 @@
+# Xertica UI
+
+Design System completo com componentes React e Tailwind CSS v4.0, construído com TypeScript seguindo arquitetura CLI-first (modelo Shadcn).
+
+## 🚀 Início Rápido (CLI)
+
+Para criar um novo projeto utilizando o Xertica UI:
+
+```bash
+npx xertica-ui init meu-projeto
+```
+
+O CLI irá guiá-lo através da configuração:
+1. **Componentes**: Escolha quais componentes incluir.
+2. **Páginas**: Opte por incluir ou não Login, Home e Template.
+3. **Instalação**: Dependências são instaladas automaticamente.
+
+### Desenvolvimento no Projeto Clona
+
+Após a inicialização:
+
+```bash
+cd meu-projeto
+npm run dev
+```
+
+Acesse: **http://localhost:5173**
+Login padrão: Use qualquer email e senha.
+
+## 📋 Pré-requisitos
+
+- Node.js 18+ instalado
+- npm, yarn ou pnpm
+
+## 🔧 Instalação
+
+O método recomendado é usar o CLI:
+```bash
+npx xertica-ui init meu-app
+```
+
+Para desenvolvimento do próprio pacote/biblioteca:
+1. Clone o repositório:
+```bash
+git clone [URL_DO_REPOSITORIO]
+cd xertica-ui
+```
+
+2. Instale as dependências:
+```bash
+npm install
+```
+
+## 📁 Estrutura do Projeto
+
+```
+xertica-ui/
+├── components/
+│   ├── ui/                      # 156 componentes do Design System
+│   │   ├── index.ts             # Export central
+│   │   ├── button.tsx
+│   │   ├── card.tsx
+│   │   ├── alert.tsx
+│   │   ├── map.tsx
+│   │   ├── xertica-assistant.tsx
+│   │   └── ... (todos os componentes)
+│   │
+│   ├── examples/                # Exemplos de uso (Maps)
+│   ├── figma/                   # Componentes Figma
+│   ├── media/                   # Players de áudio/vídeo
+│   │
+│   ├── HomePage.tsx             # Página Home
+│   ├── TemplatePage.tsx         # Template completo
+│   ├── LoginPage.tsx            # Login
+│   └── ... (componentes auxiliares)
+│
+├── contexts/                    # Contextos React
+│   ├── ThemeContext.tsx
+│   ├── LanguageContext.tsx
+│   └── ...
+│
+├── styles/
+│   └── xertica/
+│       ├── tokens.css           # Design Tokens (Source of Truth)
+│       ├── base.css             # Base styles + Tailwind
+│       ├── theme-map.css        # Theme mapping
+│       └── integrations/        # CSS overrides
+│
+├── App.tsx                      # Componente raiz
+├── routes.tsx                   # Configuração de rotas
+└── package.json                 # Dependências
+```
+
+## 🚀 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
+- **Radix UI** - Componentes acessíveis e não estilizados
+- **Shadcn/ui** - Modelo CLI-first para componentes
+- **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
+
+```bash
+npm run dev
+```
+
+O projeto será aberto automaticamente em `http://localhost:5173`
+
+### Build de Produção
+
+```bash
+npm run build
+```
+
+### Preview da Build de Produção
+
+```bash
+npm run preview
+```
+
+### Type Check
+
+```bash
+npm run type-check
+```
+
+## 🎨 Design System
+
+### Sistema de Tokens CSS
+
+Todos os estilos são baseados em variáveis CSS definidas em `/styles/xertica/tokens.css`:
+
+```css
+/* Cores */
+--primary: rgba(44, 39, 91, 1);
+--background: rgba(255, 255, 255, 1);
+--foreground: rgba(9, 9, 11, 1);
+
+/* Tipografia */
+--text-h1: 2rem;
+--text-h2: 1.75rem;
+--text-stats: 2.25rem;
+--font-weight-medium: 500;
+--font-weight-bold: 700;
+
+/* Radius */
+--radius: 6px;
+--radius-button: 12px;
+--radius-card: 12px;
+
+/* Spacing */
+--spacing-4: 1rem;
+--spacing-8: 2rem;
+```
+
+### Customização
+
+Edite `/styles/xertica/tokens.css` e todo o sistema se adapta automaticamente:
+
+```css
+:root {
+  --primary: rgba(255, 0, 0, 1);  /* Vermelho customizado */
+  --radius: 16px;                  /* Bordas mais arredondadas */
+}
+```
+
+### Tipografia
+
+- **Fonte**: Roboto (400, 500, 600, 700, 800)
+- **Tamanhos**: Definidos via variáveis CSS (`--text-*`)
+- **Zero classes Tailwind** de font-size ou font-weight hardcoded
+
+## 🌓 Dark Mode
+
+Suporte completo a Dark Mode com toggle manual. A preferência é salva em `localStorage`.
+
+Troca via atributo `data-mode="dark"` ou classe `.dark`
+
+## 🔐 Autenticação
+
+Sistema de autenticação simulada que aceita qualquer credencial não vazia:
+
+- **Email**: qualquer@email.com
+- **Senha**: qualquer senha
+
+## 🗺️ Rotas
+
+- `/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)
+- `/template` - Template com todos os componentes (protegida)
+
+## 🤖 Integração com Gemini AI
+
+O assistente Xertica usa Google Gemini AI. Configure a API Key:
+
+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](https://aistudio.google.com/app/apikey)
+
+## 📦 Componentes UI (156 total)
+
+### Layout & Structure
+Card, Separator, AspectRatio, Resizable
+
+### Navigation
+Tabs, Breadcrumb, NavigationMenu, Sidebar, Pagination
+
+### Buttons & Interactions
+Button, Toggle, ToggleGroup
+
+### Forms & Inputs
+Input, Textarea, Label, Checkbox, RadioGroup, Switch, Slider, Select, InputOTP, Form, Calendar
+
+### Overlays & Dialogs
+Dialog, AlertDialog, Sheet, Drawer, Popover, Tooltip, HoverCard
+
+### Menus
+DropdownMenu, ContextMenu, Menubar, Command
+
+### Feedback & Notifications
+Alert, Badge, Progress, Skeleton, Toast (Sonner), NotificationBadge
+
+### Data Display
+Avatar, Table, Chart, Empty, StatsCard, Timeline, TreeView
+
+### Utility Components
+Collapsible, Accordion, ScrollArea, Carousel, Stepper, FileUpload, Rating, Search
+
+### Maps
+Map, RouteMap, SimpleMap (Google Maps integration)
+
+### Xertica Custom
+XerticaAssistant, PageHeader
+
+### Hooks
+useMobile, useIsMobile
+
+## 🎯 Funcionalidades
+
+- ✅ Sistema de autenticação completo
+- ✅ 156 componentes CLI-ready
+- ✅ Design System baseado em variáveis CSS
+- ✅ Dark mode completo
+- ✅ Assistente AI integrado
+- ✅ Sistema de notificações (toast)
+- ✅ Design responsivo
+- ✅ Arquitetura CLI-first (modelo Shadcn)
+- ✅ TypeScript completo
+- ✅ Zero CSS oculto
+
+## 📱 Responsividade
+
+Totalmente responsivo com breakpoints:
+
+- Mobile: 320px+
+- Tablet: 768px+
+- Desktop: 1024px+
+
+## 🔄 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: `utils.ts`)
+- **Contextos**: PascalCase com sufixo Context (ex: `ThemeContext.tsx`)
+- **CSS**: Variáveis CSS em vez de classes Tailwind para tipografia
+
+## 🐛 Troubleshooting
+
+### CSS não carrega
+
+1. Verifique se todas as dependências estão instaladas:
+```bash
+npm install
+```
+
+2. Limpe o cache do Vite:
+```bash
+rm -rf node_modules/.vite
+npm run dev
+```
+
+### Erros de TypeScript
+
+Execute a verificação de tipos:
+```bash
+npm run type-check
+```
+
+### Porta em uso
+
+Altere a porta em `vite.config.ts`:
+```ts
+server: {
+  port: 3001,
+}
+```
+
+## 📄 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.

package/assets/xertica-logo.svg

@@ -0,0 +1,38 @@
+<svg
+  fill="none"
+  preserveAspectRatio="xMidYMid meet"
+  viewBox="0 0 1543 289"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g id="Xertica.ai">
+    <path d="M1352.82 239.808V285.425H1304.73V239.808H1352.82Z" fill="#00BEFF" />
+    <path d="M814.8 284.848H766.711V77.4971H814.8V284.848Z" fill="#00BEFF" />
+    <path d="M1543 284.438H1514.2V160.28H1543V284.438Z" fill="#00BEFF" />
+    <path 
+      clip-rule="evenodd"
+      d="M1432.83 157.796C1446.98 157.796 1459.14 162.515 1468.58 170.709V160.28H1497.38V284.438H1468.58V274.01C1459.14 282.451 1446.98 286.921 1432.83 286.921C1395.1 286.921 1368.29 260.352 1368.29 222.359C1368.29 184.616 1395.1 157.796 1432.83 157.796ZM1432.83 183.778C1410.79 183.778 1396.27 199.061 1396.27 222.359C1396.27 245.658 1410.79 260.94 1432.83 260.94C1454.63 260.94 1468.9 245.658 1468.9 222.359C1468.9 199.06 1454.63 183.778 1432.83 183.778Z"
+      fill="#00BEFF"
+      fill-rule="evenodd"
+    />
+    <path d="M947.87 73.3516C1002.88 73.3516 1044.42 107.647 1053.57 159.234H1004.68C997.221 132.988 976.34 117.308 947.87 117.308C911.387 117.308 887.337 142.612 887.337 181.176C887.337 219.739 911.387 245.036 947.87 245.036C976.34 245.036 997.221 229.356 1004.68 203.109H1053.57C1044.47 254.701 1003.26 289 947.87 289C884.853 289 840.078 244.626 840.078 181.176C840.078 118.142 884.854 73.3516 947.87 73.3516Z" fill="#00BEFF" />
+    <path d="M88.4971 39.8242L157.353 142.191L83.5371 251.524L60.9277 284.854H0L96.3154 142.191L5.37695 7H66.3047L88.4971 39.8242Z" fill="#00BEFF" />
+    <path d="M254.314 284.855H193.387L151.914 223.71L182.548 178.551L254.314 284.855Z" fill="#00BEFF" />
+    <path 
+      clip-rule="evenodd"
+      d="M1179.14 73.3477C1202.77 73.3477 1223.08 81.2286 1238.84 94.9121V77.4971H1286.94V284.847H1238.84V267.431C1223.09 281.528 1202.77 288.992 1179.14 288.992C1116.12 288.992 1071.35 244.622 1071.35 181.172C1071.35 118.139 1116.12 73.3478 1179.14 73.3477ZM1179.14 117.308C1142.66 117.308 1118.61 142.604 1118.61 181.172C1118.61 219.739 1142.66 245.035 1179.14 245.035C1215.21 245.035 1238.84 219.739 1238.84 181.172C1238.84 142.605 1215.21 117.308 1179.14 117.308Z"
+      fill="#00BEFF"
+      fill-rule="evenodd"
+    />
+    <path d="M1543 145.383H1514.2V118.067H1543V145.383Z" fill="#00BEFF" />
+    <path d="M672.466 77.501H736.31V121.457H672.466V211.448C672.466 230.939 682.415 240.891 702.313 240.891H736.309V284.852H698.999C649.246 284.851 625.203 259.968 625.203 211.449V7H672.466V77.501Z" fill="#00BEFF" />
+    <path d="M814.8 52.6172H766.711V7H814.8V52.6172Z" fill="#00BEFF" />
+    <path 
+      clip-rule="evenodd"
+      d="M354.069 73.3516C417.086 73.3517 461.864 118.143 461.864 181.176C461.864 187.396 461.031 193.615 460.204 199.422H295.197C301.829 228.864 323.392 246.696 354.069 246.696C372.724 246.696 389.309 241.721 399.675 226.376H452.742C441.132 265.774 400.501 288.996 354.069 288.996C291.053 288.996 246.274 244.626 246.273 181.176C246.273 118.142 291.053 73.3516 354.069 73.3516ZM354.068 115.65C325.044 115.65 303.902 131.826 296.44 158.78H410.863C403.819 131.826 382.672 115.65 354.068 115.65Z"
+      fill="#00BEFF"
+      fill-rule="evenodd"
+    />
+    <path d="M596.957 121.453H562.962C543.064 121.453 533.114 131.409 533.114 150.899V284.847H485.852V150.899C485.852 102.38 509.894 77.4972 559.647 77.4971H596.957V121.453Z" fill="#00BEFF" />
+    <path d="M182.552 98.6992L151.922 53.3906L188.014 0H248.941L182.552 98.6992Z" fill="#00BEFF" />
+  </g>
+</svg>

package/assets/xertica-x-logo.svg

@@ -0,0 +1,21 @@
+<svg
+  fill="none"
+  preserveAspectRatio="xMidYMid meet"
+  viewBox="0 0 258 282"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g id="Xertica X">
+    <path 
+      d="M67.2666 0.0361328L89.7793 33.3447L159.63 137.228L84.7471 248.178L61.8115 282H0L97.7109 137.228L5.45508 0.0361328H67.2666Z" 
+      fill="#00BEFF" 
+    />
+    <path 
+      d="M258 282H196.185L154.114 219.951L185.192 174.123L258 282Z" 
+      fill="#00BEFF" 
+    />
+    <path 
+      d="M252.696 0.186523L185.042 100.142L154.106 54.0693L190.884 0L252.696 0.186523Z" 
+      fill="#00BEFF" 
+    />
+  </g>
+</svg>