xertica-ui 2.1.5 → 2.1.7

package/CHANGELOG.md

@@ -7,6 +7,34 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.1.7] — 2026-05-19
+
+### Fixed
+
+- **`templates/TemplateContent.tsx` — wrapper raiz não era SPA-router-aware** — o `paddingLeft` manual foi substituído por `<PageContent>` (wrapper compartilhado de `shared/ui/PageContent.tsx`) eliminando código duplicado e garantindo que a lógica de offset do sidebar fique em um único lugar.
+- **`templates/TemplateContent.tsx` — `renderLink` tipado como `any`** — corrigido para `Record<string, unknown>` prevenindo erros silenciosos de tipos no spread `{...props}`.
+- **`templates/TemplateContent.tsx` — imports mortos removidos** — `Menu`, `ChevronRight`, `Trash2`, `Archive`, `ArrowRightLeft`, `History`, `FileEdit`, `Filter`, `Map` estavam no import mas não eram usados (ou eram usados mas faltavam). Sincronizado imports com uso real.
+- **`templates/TemplateContent.tsx` — `<h2>` raw na página** — substituído por `<PageHeader title=... subtitle=... />` para consistência com as regras do projeto.
+- **`templates/TemplatePage.tsx` — `user` tipado como `{ email: string }` em vez de `User`** — tipo corrigido para `User | null`; `onEvaluation` migrado de `console.log` para `toast.success/info`; componente agora usa `generateDemoResponse`, `richSuggestions`, `feedbackOptions` e `userName` dinâmico.
+- **`templates/HomePage.tsx` + `templates/AssistantPage.tsx` — `user` tipado como `{ email: string }`** — tipo corrigido para `User | null` em ambas as páginas.
+- **`templates/AssistantPage.tsx` — `userName="Ariel Santos"` hardcoded** — substituído por `user?.name ?? 'Usuário'` para usar o dado real do usuário autenticado.
+
+---
+
+## [2.1.6] — 2026-05-19
+
+### Fixed
+
+- **`templates/HomeContent.tsx` — JSX malformado causava crash da página** — tags `</div>`, `</ScrollArea>` e `</main>` estavam faltando após refatoração para `<PageContent>`, fazendo a página Home quebrar completamente ao renderizar.
+- **`templates/DashboardTemplate.tsx` — `StatsCard.trend` com tipo errado** — `trend` recebia um `number` primitivo (`trend={20.1}`) mas o prop exige um objeto `{ value: number; label?: string }`. Corrigido para `trend={{ value: 20.1, label: 'vs mês anterior' }}` em todos os 4 cards.
+- **`templates/DashboardTemplate.tsx` — `DonutBreakdownChart` com chaves acentuadas** — o `channelConfig` usava chaves como `Orgânico` que falhavam no lookup interno do chart. Renomeadas para ASCII (`organico`, `pago`, `social`, `direto`) com labels legíveis mantidas via `label:`.
+- **`templates/DashboardTemplate.tsx` — cast de `Badge.variant` sem type safety** — `event.status as 'default' | ...` foi substituído por um mapa `EVENT_BADGE_VARIANT` com tipagem `EventStatus` explícita.
+- **`templates/SettingsContent.tsx` — imports duplicados de `xertica-ui/hooks`** — `useTheme` e `useLayout` eram importados em duas linhas separadas do mesmo módulo. Unificados em um único import.
+- **`templates/SettingsContent.tsx` — `Separator`, `Badge` e `useNavigate` importados mas nunca usados** — removidos para evitar erros de lint/build.
+- **`templates/SettingsContent.tsx` — `Switch.onCheckedChange` com tipo incompatível** — `toggleTheme` é `() => void` mas `onCheckedChange` exige `(checked: boolean) => void`. Corrigido com wrapper arrow `() => toggleTheme()`.
+
+---
+
 ## [2.1.5] — 2026-05-19
 
 ### Fixed

package/README.md

@@ -2,7 +2,7 @@
 
 > **Enterprise-grade React design system** built on Tailwind CSS v4, Radix UI, and Lucide Icons — with a robust AI-first documentation layer for precise LLM-driven composition and autonomous agent interaction.
 
-[![npm version](https://img.shields.io/badge/npm-2.1.5-blue)](https://www.npmjs.com/package/xertica-ui)
+[![npm version](https://img.shields.io/badge/npm-2.1.7-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---

package/bin/cli.ts

@@ -18,7 +18,7 @@ const program = new Command();
 program
     .name('xertica-ui')
     .description('CLI to initialize Xertica UI projects')
-    .version('2.1.5');
+    .version('2.1.7');
 
 program
     .command('init')

package/dist/cli.js

@@ -534,7 +534,7 @@ var generateTokensCss = (theme) => {
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = path.dirname(__filename);
 var program = new Command();
-program.name("xertica-ui").description("CLI to initialize Xertica UI projects").version("2.1.5");
+program.name("xertica-ui").description("CLI to initialize Xertica UI projects").version("2.1.7");
 program.command("init").description("Initialize a new Xertica UI project").argument("[directory]", "Directory to initialize in", ".").action(async (directory) => {
   const targetDir = path.resolve(process.cwd(), directory);
   const templatesDir = path.resolve(__dirname, "../templates");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "description": "Xertica UI — Enterprise-grade React design system with Tailwind CSS v4, Radix UI, and AI-first documentation.",
   "type": "module",
   "main": "./dist/index.cjs.js",

package/templates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui-template",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "private": true,
   "type": "module",
   "scripts": {
@@ -19,7 +19,7 @@
     "react-hook-form": "^7.54.2",
     "react-router-dom": "^7.1.3",
     "sonner": "^1.7.3",
-    "xertica-ui": "^2.1.5",
+    "xertica-ui": "^2.1.7",
     "zod": "^3.24.1"
   },
   "devDependencies": {

package/templates/src/features/home/ui/HomeContent.tsx

@@ -108,7 +108,12 @@ export function HomeContent({ user }: HomeContentProps) {
                     </Button>
                   </CardFooter>
                 </Card>
-      </div>
+
+              </div>
+            </div>
+          </div>
+        </ScrollArea>
+      </main>
     </PageContent>
   );
 }

package/templates/src/features/settings/ui/SettingsContent.tsx

@@ -9,9 +9,8 @@ import {
   Button,
   Input,
   Label,
-  Separator,
   Switch,
-  Badge,
+  ScrollArea,
   Form,
   FormField,
   FormItem,
@@ -20,15 +19,12 @@ import {
   FormDescription,
   FormMessage,
 } from 'xertica-ui/ui';
-import { useTheme } from 'xertica-ui/hooks';
+import { Header } from 'xertica-ui/layout';
+import { useLayout, useTheme } from 'xertica-ui/hooks';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { toast } from 'sonner';
-import { useNavigate } from 'react-router-dom';
-import { useLayout } from 'xertica-ui/hooks';
-import { Header } from 'xertica-ui/layout';
-import { ScrollArea } from 'xertica-ui/ui';
 import { Link } from 'react-router-dom';
 import type { User } from '../../../shared/types/auth';
 
@@ -53,7 +49,6 @@ interface SettingsContentProps {
 export function SettingsContent({ user, onLogout }: SettingsContentProps) {
   const { sidebarExpanded, sidebarWidth } = useLayout();
   const { theme, toggleTheme } = useTheme();
-  const navigate = useNavigate();
   const [notificationsEnabled, setNotificationsEnabled] = useState(true);
 
   const form = useForm<ProfileValues>({
@@ -157,9 +152,10 @@ export function SettingsContent({ user, onLogout }: SettingsContentProps) {
                       Alterna entre tema claro e escuro.
                     </p>
                   </div>
+                  {/* toggleTheme is () => void; Switch.onCheckedChange expects (checked: boolean) => void */}
                   <Switch
                     checked={theme === 'dark'}
-                    onCheckedChange={toggleTheme}
+                    onCheckedChange={() => toggleTheme()}
                   />
                 </div>
               </CardContent>

package/templates/src/features/template/ui/DashboardTemplate.tsx

@@ -45,18 +45,28 @@ const accessConfig = {
   acessos: { label: 'Acessos', color: 'var(--chart-2)' },
 };
 
+// Keys without accents so the chart's internal config lookup is reliable
 const channelData = [
-  { name: 'Orgânico', value: 42 },
-  { name: 'Pago',     value: 28 },
-  { name: 'Social',   value: 18 },
-  { name: 'Direto',   value: 12 },
+  { name: 'organico', value: 42 },
+  { name: 'pago',     value: 28 },
+  { name: 'social',   value: 18 },
+  { name: 'direto',   value: 12 },
 ];
 
 const channelConfig = {
-  Orgânico: { label: 'Orgânico', color: 'var(--chart-1)' },
-  Pago:     { label: 'Pago',     color: 'var(--chart-2)' },
-  Social:   { label: 'Social',   color: 'var(--chart-3)' },
-  Direto:   { label: 'Direto',   color: 'var(--chart-4)' },
+  organico: { label: 'Orgânico', color: 'var(--chart-1)' },
+  pago:     { label: 'Pago',     color: 'var(--chart-2)' },
+  social:   { label: 'Social',   color: 'var(--chart-3)' },
+  direto:   { label: 'Direto',   color: 'var(--chart-4)' },
+};
+
+// Explicit Badge variant map — avoids unsafe string casts
+type EventStatus = 'info' | 'success' | 'destructive' | 'default';
+const EVENT_BADGE_VARIANT: Record<EventStatus, EventStatus> = {
+  info:        'info',
+  success:     'success',
+  destructive: 'destructive',
+  default:     'default',
 };
 
 // ─── Component ────────────────────────────────────────────────────────────────
@@ -75,30 +85,30 @@ export function DashboardTemplate() {
         }
       />
 
-      {/* ── KPI cards — use StatsCard from xertica-ui/ui ── */}
+      {/* ── KPI cards — StatsCard.trend expects { value: number } not a raw number ── */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         <StatsCard
           title="Receita Total"
           value="R$ 45.231,89"
-          trend={20.1}
+          trend={{ value: 20.1, label: 'vs mês anterior' }}
           icon={<DollarSign className="size-4" />}
         />
         <StatsCard
           title="Usuários Ativos"
           value="2.350"
-          trend={8.4}
+          trend={{ value: 8.4, label: 'vs mês anterior' }}
           icon={<Users className="size-4" />}
         />
         <StatsCard
           title="Vendas"
           value="12.234"
-          trend={19.2}
+          trend={{ value: 19.2, label: 'vs mês anterior' }}
           icon={<Activity className="size-4" />}
         />
         <StatsCard
           title="Taxa de Retenção"
           value="89,3%"
-          trend={1.2}
+          trend={{ value: 1.2, label: 'vs mês anterior' }}
           icon={<TrendingUp className="size-4" />}
         />
       </div>
@@ -165,17 +175,19 @@ export function DashboardTemplate() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {[
-                { time: '09:00', label: 'Login de João Silva',   status: 'info'    },
-                { time: '10:45', label: 'Fatura #INV004 paga',   status: 'success' },
-                { time: '11:30', label: 'Usuário bloqueado',     status: 'destructive' },
-                { time: '13:15', label: 'Relatório gerado',      status: 'default' },
-                { time: '15:00', label: 'Deploy v2.1.5',         status: 'success' },
-              ].map(event => (
+              {(
+                [
+                  { time: '09:00', label: 'Login de João Silva', status: 'info'        },
+                  { time: '10:45', label: 'Fatura #INV004 paga', status: 'success'     },
+                  { time: '11:30', label: 'Usuário bloqueado',   status: 'destructive' },
+                  { time: '13:15', label: 'Relatório gerado',    status: 'default'     },
+                  { time: '15:00', label: 'Deploy v2.1.5',       status: 'success'     },
+                ] as Array<{ time: string; label: string; status: EventStatus }>
+              ).map(event => (
                 <div key={event.time} className="flex items-center gap-3 text-sm">
                   <Badge variant="outline" className="font-mono shrink-0">{event.time}</Badge>
                   <span className="flex-1 text-muted-foreground">{event.label}</span>
-                  <Badge variant={event.status as 'default' | 'success' | 'info' | 'destructive'} className="text-[10px]">
+                  <Badge variant={EVENT_BADGE_VARIANT[event.status]} className="text-[10px]">
                     {event.status}
                   </Badge>
                 </div>

package/templates/src/features/template/ui/TemplateContent.tsx

@@ -59,6 +59,7 @@ import { Header, Sidebar } from 'xertica-ui/layout';
 import { useLayout } from 'xertica-ui/hooks';
 import { toast } from 'sonner';
 import { Link } from 'react-router-dom';
+import { PageContent } from '../../../shared/ui/PageContent';
 import {
   Settings,
   User,
@@ -67,23 +68,19 @@ import {
   Calendar,
   Search,
   PanelLeft,
-  Menu,
-  ChevronRight,
   Home,
   Users,
   Plus,
+  Clock,
   Trash2,
   Archive,
   ArrowRightLeft,
-  History,
   FileEdit,
-  Filter,
-  Clock,
   Map,
 } from 'lucide-react';
 
 export function TemplateContent() {
-  const { sidebarExpanded, sidebarWidth, toggleSidebar } = useLayout();
+  const { sidebarWidth } = useLayout();
   const [progress, setProgress] = useState(45);
   const [sliderValue, setSliderValue] = useState([50]);
   const [switchEnabled, setSwitchEnabled] = useState(false);
@@ -94,12 +91,7 @@ export function TemplateContent() {
   };
 
   return (
-    <div
-      style={{
-        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
-      }}
-      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
-    >
+    <PageContent>
       <Header
         showThemeToggle={true}
         showLanguageSelector={true}
@@ -107,19 +99,17 @@ export function TemplateContent() {
           { label: 'Design System', href: '/home' },
           { label: 'Página de Template' },
         ]}
-        renderLink={(href: string, props: any) => <Link to={href} {...props} />}
+        renderLink={(href: string, props: Record<string, unknown>) => <Link to={href} {...props} />}
       />
 
       <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">
-              <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>
+              <PageHeader
+                title="Template Page"
+                subtitle="Template completo com componentes do Xertica UI Design System"
+              />
 
               {/* Alert Examples */}
               <section>
@@ -865,6 +855,6 @@ export function TemplateContent() {
           </div>
         </ScrollArea>
       </main>
-    </div>
+    </PageContent>
   );
 }

package/templates/src/pages/AssistantPage.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo, useEffect } from 'react';
 import { toast } from 'sonner';
 import { useNavigate, Link } from 'react-router-dom';
+import type { User } from '../shared/types/auth';
 import { XerticaAssistant, generateDemoResponse } from 'xertica-ui/assistant';
 import { useLayout } from 'xertica-ui/hooks';
 import { Header } from 'xertica-ui/layout';
@@ -140,7 +141,7 @@ const GROUP_CONFIG = [
 // ─── Component ───────────────────────────────────────────────────────────────
 
 interface AssistantPageProps {
-  user: { email: string } | null;
+  user: User | null;
   onLogout: () => void;
 }
 
@@ -271,7 +272,7 @@ export function AssistantPage({ user, onLogout }: AssistantPageProps) {
               key={selectedId ?? 'new'}
               mode="fullPage"
               demoMode={true}
-              userName="Ariel Santos"
+              userName={user?.name ?? 'Usuário'}
               responseGenerator={generateDemoResponse}
               initialMessages={selectedConversation?.messages as any}
               richSuggestions={richSuggestions}

package/templates/src/pages/HomePage.tsx

@@ -8,7 +8,7 @@ import { HomeContent } from '../features/home';
 import { richSuggestions, feedbackOptions } from '../shared/config/assistant';
 
 interface HomePageProps {
-  user: { email: string } | null;
+  user: import('../shared/types/auth').User | null;
   onLogout: () => void;
 }
 

package/templates/src/pages/TemplatePage.tsx

@@ -1,16 +1,21 @@
 import React from 'react';
-import { XerticaAssistant } from 'xertica-ui/assistant';
+import { XerticaAssistant, generateDemoResponse } from 'xertica-ui/assistant';
 import { useLayout } from 'xertica-ui/hooks';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
 import { AppLayout } from '../app/components/AppLayout';
 import { TemplateContent } from '../features/template';
+import { richSuggestions, feedbackOptions } from '../shared/config/assistant';
+import type { User } from '../shared/types/auth';
 
 interface TemplatePageProps {
-  user: { email: string } | null;
+  user: User | null;
   onLogout: () => void;
 }
 
 export function TemplatePage({ user, onLogout }: TemplatePageProps) {
   const { assistenteExpanded, toggleAssistente } = useLayout();
+  const navigate = useNavigate();
 
   return (
     <AppLayout
@@ -20,7 +25,20 @@ export function TemplatePage({ user, onLogout }: TemplatePageProps) {
         <XerticaAssistant
           isExpanded={assistenteExpanded}
           onToggle={toggleAssistente}
-          onEvaluation={(id, type, reason) => console.log('Feedback:', id, type, reason)}
+          defaultTab="chat"
+          demoMode={true}
+          userName={user?.name ?? 'Usuário'}
+          responseGenerator={generateDemoResponse}
+          richSuggestions={richSuggestions}
+          feedbackOptions={feedbackOptions}
+          showHistory={false}
+          showFavorites={false}
+          onNavigateSettings={() => navigate('/settings')}
+          onNavigateFullPage={() => navigate('/assistente')}
+          onEvaluation={(_messageId, type, _reason) => {
+            if (type === 'like') toast.success('Obrigado pelo feedback positivo!');
+            else toast.info('Obrigado! Seu feedback nos ajuda a melhorar.');
+          }}
         />
       }
     >