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.

$3

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

$3

`bash
npm run dev
`

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

$3

`bash
npm run build
`

$3

`bash
npm run preview
`

$3

`bash
npm run type-check
`

🎨 Design System

$3

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;
`

$3

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 /
}
`

$3

- 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

📦 Componentes UI (156 total)

$3

- 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

$3

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
`

$3

Execute a verificação de tipos:
`bash
npm run type-check
`

$3

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.