xertica-ui 1.0.0

package/components/TemplateContent.tsx

@@ -0,0 +1,629 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { Badge } from './ui/badge';
+import { Alert, AlertDescription, AlertTitle } from './ui/alert';
+import { Checkbox } from './ui/checkbox';
+import { RadioGroup, RadioGroupItem } from './ui/radio-group';
+import { Switch } from './ui/switch';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Textarea } from './ui/textarea';
+import { Progress } from './ui/progress';
+import { Separator } from './ui/separator';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
+import { Settings, User, Mail, Phone, Calendar, Search, Menu, ChevronRight } from 'lucide-react';
+import { Slider } from './ui/slider';
+import { toast } from 'sonner';
+import { ScrollArea } from './ui/scroll-area';
+import { ThemeToggle } from './ThemeToggle';
+import { LanguageSelector } from './LanguageSelector';
+
+interface TemplateContentProps {
+  sidebarExpanded: boolean;
+  assistenteExpanded?: boolean;
+  onToggleSidebar?: () => void;
+  onToggleAssistente?: () => void;
+}
+
+export function TemplateContent({ sidebarExpanded, assistenteExpanded = false, onToggleSidebar, onToggleAssistente }: TemplateContentProps) {
+  const [progress, setProgress] = useState(45);
+  const [sliderValue, setSliderValue] = useState([50]);
+  const [switchEnabled, setSwitchEnabled] = useState(false);
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    toast.success('Formulário enviado com sucesso!');
+  };
+
+  return (
+    <div
+      className={`flex-1 flex flex-col overflow-hidden transition-all duration-300 ${sidebarExpanded ? 'md:pl-64' : 'md:pl-20'
+        } ${assistenteExpanded ? 'md:pr-[420px]' : 'md:pr-20'
+        }`}
+    >
+      {/* Header fixo */}
+      <header className="bg-card shadow-sm border-b border-border px-[24px] py-[14px] flex-shrink-0">
+        <div className="flex items-center justify-between p-[0px]">
+          <div className="flex items-center gap-2 text-muted-foreground">
+            {/* Botão menu para mobile */}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onToggleSidebar}
+              className="md:hidden mr-2 p-2"
+            >
+              <Menu className="w-5 h-5" />
+            </Button>
+            <span className="text-primary [font-weight:var(--font-weight-medium)]">Xertica.ai</span>
+            <ChevronRight className="w-4 h-4" />
+            <span className="text-foreground [font-weight:var(--font-weight-medium)]">Template Page</span>
+          </div>
+
+          {/* Controles do usuário */}
+          <div className="flex items-center gap-3">
+            {/* Badge de versão */}
+            <Badge variant="default" className="hidden sm:flex">v1.0.0</Badge>
+
+            {/* Seletor de idioma */}
+            <LanguageSelector variant="minimal" showIcon={false} className="hidden sm:flex" />
+
+            {/* Toggle de tema */}
+            <ThemeToggle className="hover:bg-accent" />
+          </div>
+        </div>
+      </header>
+
+      {/* Área de conteúdo */}
+      <main className="flex-1 overflow-hidden bg-muted">
+        <ScrollArea className="h-full">
+          <div className="p-2 sm:p-4 md:p-6">
+            <div className="max-w-6xl mx-auto space-y-8">
+              {/* Cabeçalho da página */}
+              <div className="space-y-2">
+                <h2>Template Page</h2>
+                <p className="text-muted-foreground">
+                  Template completo com componentes do Xertica UI Design System
+                </p>
+              </div>
+
+              {/* Alert Examples */}
+              <section>
+                <h3 className="mb-4">Alerts</h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Alert variant="info">
+                    <AlertTitle>Informação</AlertTitle>
+                    <AlertDescription>
+                      Este é um exemplo de alerta informativo usando os componentes do Design System.
+                    </AlertDescription>
+                  </Alert>
+
+                  <Alert variant="error">
+                    <AlertTitle>Erro</AlertTitle>
+                    <AlertDescription>
+                      Ocorreu um erro ao processar sua solicitação.
+                    </AlertDescription>
+                  </Alert>
+
+                  <Alert variant="success">
+                    <AlertTitle>Sucesso</AlertTitle>
+                    <AlertDescription>
+                      Operação realizada com sucesso!
+                    </AlertDescription>
+                  </Alert>
+
+                  <Alert variant="warning">
+                    <AlertTitle>Aviso</AlertTitle>
+                    <AlertDescription>
+                      Atenção: Esta ação não pode ser desfeita.
+                    </AlertDescription>
+                  </Alert>
+                </div>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Cards & Tabs */}
+              <section>
+                <h3 className="mb-4">Cards & Tabs</h3>
+
+                <Tabs defaultValue="overview" className="w-full">
+                  <TabsList className="grid w-full grid-cols-4">
+                    <TabsTrigger value="overview">Visão Geral</TabsTrigger>
+                    <TabsTrigger value="forms">Formulários</TabsTrigger>
+                    <TabsTrigger value="data">Dados</TabsTrigger>
+                    <TabsTrigger value="settings">Configurações</TabsTrigger>
+                  </TabsList>
+
+                  {/* Overview Tab */}
+                  <TabsContent value="overview" className="space-y-4">
+                    <div className="grid gap-4 md:grid-cols-3">
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>Total de Usuários</CardTitle>
+                          <CardDescription>Últimos 30 dias</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="text-foreground">
+                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">1,234</span>
+                            <Badge variant="default" className="ml-2">+12%</Badge>
+                          </div>
+                        </CardContent>
+                      </Card>
+
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>Receita Total</CardTitle>
+                          <CardDescription>Mês atual</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="text-foreground">
+                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">R$ 45,2k</span>
+                            <Badge variant="secondary" className="ml-2">+8%</Badge>
+                          </div>
+                        </CardContent>
+                      </Card>
+
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>Taxa de Conversão</CardTitle>
+                          <CardDescription>Semana atual</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="text-foreground">
+                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">3.2%</span>
+                            <Badge variant="outline" className="ml-2">-2%</Badge>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </div>
+
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>Progress & Sliders</CardTitle>
+                        <CardDescription>Exemplos de componentes de progresso</CardDescription>
+                      </CardHeader>
+                      <CardContent className="space-y-6">
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between">
+                            <Label>Progresso do Projeto</Label>
+                            <span className="[font-size:var(--text-small)] text-muted-foreground">{progress}%</span>
+                          </div>
+                          <Progress value={progress} className="w-full" />
+                          <div className="flex gap-2">
+                            <Button size="sm" onClick={() => setProgress(Math.max(0, progress - 10))}>-10%</Button>
+                            <Button size="sm" onClick={() => setProgress(Math.min(100, progress + 10))}>+10%</Button>
+                          </div>
+                        </div>
+
+                        <Separator />
+
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between">
+                            <Label>Volume</Label>
+                            <span className="[font-size:var(--text-small)] text-muted-foreground">{sliderValue[0]}%</span>
+                          </div>
+                          <Slider
+                            value={sliderValue}
+                            onValueChange={setSliderValue}
+                            min={0}
+                            max={100}
+                            step={1}
+                            className="w-full"
+                          />
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </TabsContent>
+
+                  {/* Forms Tab */}
+                  <TabsContent value="forms" className="space-y-4">
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>Formulário de Cadastro</CardTitle>
+                        <CardDescription>Preencha os campos abaixo para criar uma nova conta</CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <form onSubmit={handleFormSubmit} className="space-y-4">
+                          <div className="grid gap-4 md:grid-cols-2">
+                            <div className="space-y-2">
+                              <Label htmlFor="firstName">Nome</Label>
+                              <Input id="firstName" placeholder="João" />
+                            </div>
+                            <div className="space-y-2">
+                              <Label htmlFor="lastName">Sobrenome</Label>
+                              <Input id="lastName" placeholder="Silva" />
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <Label htmlFor="email">E-mail</Label>
+                            <div className="relative">
+                              <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                              <Input id="email" type="email" placeholder="joao@exemplo.com" className="pl-10" />
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <Label htmlFor="phone">Telefone</Label>
+                            <div className="relative">
+                              <Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                              <Input id="phone" type="tel" placeholder="(11) 99999-9999" className="pl-10" />
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <Label htmlFor="role">Cargo</Label>
+                            <Select>
+                              <SelectTrigger id="role">
+                                <SelectValue placeholder="Selecione um cargo" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="developer">Desenvolvedor</SelectItem>
+                                <SelectItem value="designer">Designer</SelectItem>
+                                <SelectItem value="manager">Gerente</SelectItem>
+                                <SelectItem value="analyst">Analista</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+
+                          <div className="space-y-2">
+                            <Label htmlFor="bio">Biografia</Label>
+                            <Textarea
+                              id="bio"
+                              placeholder="Conte-nos um pouco sobre você..."
+                              rows={4}
+                            />
+                          </div>
+
+                          <Separator />
+
+                          <div className="space-y-4">
+                            <h4>Preferências</h4>
+
+                            <div className="space-y-3">
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="newsletter" />
+                                <Label htmlFor="newsletter" className="font-normal">
+                                  Receber newsletter por e-mail
+                                </Label>
+                              </div>
+
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="notifications" />
+                                <Label htmlFor="notifications" className="font-normal">
+                                  Ativar notificações push
+                                </Label>
+                              </div>
+
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="updates" />
+                                <Label htmlFor="updates" className="font-normal">
+                                  Receber atualizações sobre novos recursos
+                                </Label>
+                              </div>
+                            </div>
+
+                            <Separator />
+
+                            <div className="space-y-3">
+                              <Label>Tipo de Conta</Label>
+                              <RadioGroup defaultValue="personal">
+                                <div className="flex items-center space-x-2">
+                                  <RadioGroupItem value="personal" id="personal" />
+                                  <Label htmlFor="personal" className="font-normal">Pessoal</Label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <RadioGroupItem value="business" id="business" />
+                                  <Label htmlFor="business" className="font-normal">Empresarial</Label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <RadioGroupItem value="enterprise" id="enterprise" />
+                                  <Label htmlFor="enterprise" className="font-normal">Enterprise</Label>
+                                </div>
+                              </RadioGroup>
+                            </div>
+                          </div>
+                        </form>
+                      </CardContent>
+                      <CardFooter className="flex justify-between">
+                        <Button variant="outline">Cancelar</Button>
+                        <Button onClick={handleFormSubmit}>Criar Conta</Button>
+                      </CardFooter>
+                    </Card>
+                  </TabsContent>
+
+                  {/* Data Tab */}
+                  <TabsContent value="data" className="space-y-4">
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>Lista de Usuários</CardTitle>
+                        <CardDescription>Gerenciar usuários do sistema</CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="mb-4">
+                          <div className="relative">
+                            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                            <Input placeholder="Buscar usuários..." className="pl-10" />
+                          </div>
+                        </div>
+
+                        <div className="rounded-[var(--radius-lg)] border border-border overflow-hidden">
+                          <Table>
+                            <TableHeader>
+                              <TableRow>
+                                <TableHead>Nome</TableHead>
+                                <TableHead>E-mail</TableHead>
+                                <TableHead>Cargo</TableHead>
+                                <TableHead>Status</TableHead>
+                                <TableHead className="text-right">Ações</TableHead>
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              <TableRow>
+                                <TableCell>Ana Silva</TableCell>
+                                <TableCell>ana.silva@exemplo.com</TableCell>
+                                <TableCell>Desenvolvedora</TableCell>
+                                <TableCell>
+                                  <Badge variant="default">Ativo</Badge>
+                                </TableCell>
+                                <TableCell className="text-right">
+                                  <Button variant="ghost" size="sm">Editar</Button>
+                                </TableCell>
+                              </TableRow>
+                              <TableRow>
+                                <TableCell>Bruno Costa</TableCell>
+                                <TableCell>bruno.costa@exemplo.com</TableCell>
+                                <TableCell>Designer</TableCell>
+                                <TableCell>
+                                  <Badge variant="default">Ativo</Badge>
+                                </TableCell>
+                                <TableCell className="text-right">
+                                  <Button variant="ghost" size="sm">Editar</Button>
+                                </TableCell>
+                              </TableRow>
+                              <TableRow>
+                                <TableCell>Carla Oliveira</TableCell>
+                                <TableCell>carla.oliveira@exemplo.com</TableCell>
+                                <TableCell>Gerente</TableCell>
+                                <TableCell>
+                                  <Badge variant="secondary">Ausente</Badge>
+                                </TableCell>
+                                <TableCell className="text-right">
+                                  <Button variant="ghost" size="sm">Editar</Button>
+                                </TableCell>
+                              </TableRow>
+                              <TableRow>
+                                <TableCell>Diego Santos</TableCell>
+                                <TableCell>diego.santos@exemplo.com</TableCell>
+                                <TableCell>Analista</TableCell>
+                                <TableCell>
+                                  <Badge variant="outline">Inativo</Badge>
+                                </TableCell>
+                                <TableCell className="text-right">
+                                  <Button variant="ghost" size="sm">Editar</Button>
+                                </TableCell>
+                              </TableRow>
+                            </TableBody>
+                          </Table>
+                        </div>
+                      </CardContent>
+                      <CardFooter className="flex justify-between items-center">
+                        <p className="text-muted-foreground">
+                          Mostrando 4 de 127 usuários
+                        </p>
+                        <div className="flex gap-2">
+                          <Button variant="outline" size="sm">Anterior</Button>
+                          <Button variant="outline" size="sm">Próximo</Button>
+                        </div>
+                      </CardFooter>
+                    </Card>
+                  </TabsContent>
+
+                  {/* Settings Tab */}
+                  <TabsContent value="settings" className="space-y-4">
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>Configurações do Sistema</CardTitle>
+                        <CardDescription>Gerencie as configurações gerais</CardDescription>
+                      </CardHeader>
+                      <CardContent className="space-y-6">
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-1">
+                            <Label>Modo Escuro</Label>
+                            <p className="text-muted-foreground">
+                              Ativar tema escuro na interface
+                            </p>
+                          </div>
+                          <Switch checked={switchEnabled} onCheckedChange={setSwitchEnabled} />
+                        </div>
+
+                        <Separator />
+
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-1">
+                            <Label>Notificações por E-mail</Label>
+                            <p className="text-muted-foreground">
+                              Receber atualizações importantes por e-mail
+                            </p>
+                          </div>
+                          <Switch defaultChecked />
+                        </div>
+
+                        <Separator />
+
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-1">
+                            <Label>Notificações Push</Label>
+                            <p className="text-muted-foreground">
+                              Receber notificações instantâneas no navegador
+                            </p>
+                          </div>
+                          <Switch />
+                        </div>
+
+                        <Separator />
+
+                        <div className="space-y-3">
+                          <Label>Idioma</Label>
+                          <Select defaultValue="pt-br">
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="pt-br">Português (Brasil)</SelectItem>
+                              <SelectItem value="en">English</SelectItem>
+                              <SelectItem value="es">Español</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        <Separator />
+
+                        <div className="space-y-3">
+                          <Label>Fuso Horário</Label>
+                          <Select defaultValue="america-sao-paulo">
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="america-sao-paulo">América/São Paulo (GMT-3)</SelectItem>
+                              <SelectItem value="america-new-york">América/Nova York (GMT-5)</SelectItem>
+                              <SelectItem value="europe-london">Europa/Londres (GMT+0)</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </CardContent>
+                      <CardFooter className="flex justify-between">
+                        <Button variant="outline">Restaurar Padrões</Button>
+                        <Button>Salvar Alterações</Button>
+                      </CardFooter>
+                    </Card>
+                  </TabsContent>
+                </Tabs>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Button Variants */}
+              <section>
+                <h3 className="mb-4">Botões</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Variações de Botões</CardTitle>
+                    <CardDescription>Diferentes estilos e tamanhos de botões</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-6">
+                    <div className="space-y-3">
+                      <Label>Variantes</Label>
+                      <div className="flex flex-wrap gap-3">
+                        <Button variant="default">Default</Button>
+                        <Button variant="secondary">Secondary</Button>
+                        <Button variant="outline">Outline</Button>
+                        <Button variant="ghost">Ghost</Button>
+                        <Button variant="link">Link</Button>
+                        <Button variant="destructive">Destructive</Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-3">
+                      <Label>Tamanhos</Label>
+                      <div className="flex flex-wrap items-center gap-3">
+                        <Button size="sm">Small</Button>
+                        <Button size="default">Default</Button>
+                        <Button size="lg">Large</Button>
+                        <Button size="icon">
+                          <Settings className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-3">
+                      <Label>Com Ícones</Label>
+                      <div className="flex flex-wrap gap-3">
+                        <Button>
+                          <User className="mr-2 h-4 w-4" />
+                          Perfil
+                        </Button>
+                        <Button variant="secondary">
+                          <Mail className="mr-2 h-4 w-4" />
+                          Mensagens
+                        </Button>
+                        <Button variant="outline">
+                          <Calendar className="mr-2 h-4 w-4" />
+                          Agendar
+                        </Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-3">
+                      <Label>Estados</Label>
+                      <div className="flex flex-wrap gap-3">
+                        <Button disabled>Desabilitado</Button>
+                        <Button variant="outline" disabled>Outline Desabilitado</Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Badges */}
+              <section>
+                <h3 className="mb-4">Badges</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Variações de Badges</CardTitle>
+                    <CardDescription>Diferentes estilos de badges para status e tags</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-wrap gap-3">
+                      <Badge variant="default">Default</Badge>
+                      <Badge variant="secondary">Secondary</Badge>
+                      <Badge variant="outline">Outline</Badge>
+                      <Badge variant="destructive">Destructive</Badge>
+                      <Badge className="bg-success text-success-foreground">Success</Badge>
+                      <Badge className="bg-warning text-warning-foreground">Warning</Badge>
+                      <Badge className="bg-info text-info-foreground">Info</Badge>
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              {/* Footer Note */}
+              <Card className="mt-8">
+                <CardHeader>
+                  <CardTitle>Template CLI-Ready</CardTitle>
+                  <CardDescription>Como usar este template</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <p className="text-muted-foreground">
+                    Este template está pronto para ser usado como base para novos projetos. Todos os componentes
+                    utilizam as variáveis CSS definidas em <code className="bg-muted px-2 py-1 rounded-[var(--radius-sm)] [font-size:var(--text-small)]">/styles/xertica/tokens.css</code>
+                    e seguem a arquitetura CLI-first do Xertica UI.
+                  </p>
+                  <Alert variant="info">
+                    <AlertTitle>Dica</AlertTitle>
+                    <AlertDescription>
+                      Copie este arquivo como ponto de partida para suas páginas. Todos os componentes são reutilizáveis
+                      e customizáveis através das variáveis CSS.
+                    </AlertDescription>
+                  </Alert>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </ScrollArea>
+      </main>
+    </div>
+  );
+}