xertica-ui 2.1.2 → 2.1.3

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

@@ -1,100 +1,100 @@
-import React from 'react';
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  Button,
-  ScrollArea,
-  Badge,
-} from 'xertica-ui/ui';
-import { Header } from 'xertica-ui/layout';
-import { useLayout } from 'xertica-ui/hooks';
-import { ChevronRight, FileText } from 'lucide-react';
-import { useLocation, useNavigate, Link } from 'react-router-dom';
-import { getRouteByPath } from '../../../shared/config/navigation';
-
-interface HomeContentProps {
-  user?: { name?: string; email?: string; avatar?: string } | null;
-}
-
-export function HomeContent({ user }: HomeContentProps) {
-  const { sidebarExpanded, sidebarWidth } = useLayout();
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const labelTranslations: Record<string, string> = {
-    'home': 'Início',
-    'template': 'Template',
-  };
-
-  const currentRoute = getRouteByPath(location.pathname);
-  const breadcrumbLabel = currentRoute?.label
-    ? labelTranslations[currentRoute.label.toLowerCase()] || currentRoute.label
-    : 'Início';
-
-  return (
-    <div
-      style={{
-        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
-      }}
-      className="flex-1 flex flex-col overflow-hidden transition-all duration-300 bg-blue-500"
-    >
-      <Header
-        showThemeToggle={true}
-        showLanguageSelector={true}
-        breadcrumbs={[
-          { label: 'Design System', href: '/home' },
-          { label: 'Início' },
-        ]}
-        renderLink={(href: string, props: any) => <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>{`Bem-vindo, ${user?.name || 'usuário'}!`}</h2>
-                <p className="text-muted-foreground">
-                  Sua plataforma construída com Xertica UI Design System
-                </p>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <Card className="hover:shadow-xl transition-shadow duration-200 flex flex-col h-full">
-                  <CardHeader>
-                    <div className="flex items-center gap-3">
-                      <div className="p-2 bg-[var(--chart-2)]/20 rounded-[var(--radius)]">
-                        <FileText className="w-6 h-6 text-[var(--chart-2)]" />
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <CardTitle className="text-sm">Template CLI</CardTitle>
-                        <Badge variant="default" className="text-xs">Novo</Badge>
-                      </div>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="flex-1">
-                    <p className="text-muted-foreground">
-                      Página template pronta para uso no CLI com todos os componentes configurados.
-                    </p>
-                  </CardContent>
-                  <CardFooter>
-                    <Button
-                      variant="outline"
-                      className="w-full"
-                      onClick={() => navigate('/template')}
-                    >
-                      Visualizar
-                    </Button>
-                  </CardFooter>
-                </Card>
-              </div>
-            </div>
-          </div>
-        </ScrollArea>
-      </main>
-    </div>
-  );
-}
+import React from 'react';
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Button,
+  ScrollArea,
+  Badge,
+} from 'xertica-ui/ui';
+import { Header } from 'xertica-ui/layout';
+import { useLayout } from 'xertica-ui/hooks';
+import { ChevronRight, FileText } from 'lucide-react';
+import { useLocation, useNavigate, Link } from 'react-router-dom';
+import { getRouteByPath } from '../../../shared/config/navigation';
+
+interface HomeContentProps {
+  user?: { name?: string; email?: string; avatar?: string } | null;
+}
+
+export function HomeContent({ user }: HomeContentProps) {
+  const { sidebarExpanded, sidebarWidth } = useLayout();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const labelTranslations: Record<string, string> = {
+    'home': 'Início',
+    'template': 'Template',
+  };
+
+  const currentRoute = getRouteByPath(location.pathname);
+  const breadcrumbLabel = currentRoute?.label
+    ? labelTranslations[currentRoute.label.toLowerCase()] || currentRoute.label
+    : 'Início';
+
+  return (
+    <div
+      style={{
+        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
+      }}
+      className="flex-1 flex flex-col overflow-hidden transition-all duration-300 bg-blue-500"
+    >
+      <Header
+        showThemeToggle={true}
+        showLanguageSelector={true}
+        breadcrumbs={[
+          { label: 'Design System', href: '/home' },
+          { label: 'Início' },
+        ]}
+        renderLink={(href: string, props: any) => <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>{`Bem-vindo, ${user?.name || 'usuário'}!`}</h2>
+                <p className="text-muted-foreground">
+                  Sua plataforma construída com Xertica UI Design System
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <Card className="hover:shadow-xl transition-shadow duration-200 flex flex-col h-full">
+                  <CardHeader>
+                    <div className="flex items-center gap-3">
+                      <div className="p-2 bg-[var(--chart-2)]/20 rounded-[var(--radius)]">
+                        <FileText className="w-6 h-6 text-[var(--chart-2)]" />
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <CardTitle className="text-sm">Template CLI</CardTitle>
+                        <Badge variant="default" className="text-xs">Novo</Badge>
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="flex-1">
+                    <p className="text-muted-foreground">
+                      Página template pronta para uso no CLI com todos os componentes configurados.
+                    </p>
+                  </CardContent>
+                  <CardFooter>
+                    <Button
+                      variant="outline"
+                      className="w-full"
+                      onClick={() => navigate('/template')}
+                    >
+                      Visualizar
+                    </Button>
+                  </CardFooter>
+                </Card>
+              </div>
+            </div>
+          </div>
+        </ScrollArea>
+      </main>
+    </div>
+  );
+}

package/templates/src/features/template/index.ts

@@ -1,5 +1,5 @@
-export { TemplateContent } from './ui/TemplateContent';
-export { CrudTemplate } from './ui/CrudTemplate';
-export { DashboardTemplate } from './ui/DashboardTemplate';
-export { FormTemplate } from './ui/FormTemplate';
-export { LoginTemplate } from './ui/LoginTemplate';
+export { TemplateContent } from './ui/TemplateContent';
+export { CrudTemplate } from './ui/CrudTemplate';
+export { DashboardTemplate } from './ui/DashboardTemplate';
+export { FormTemplate } from './ui/FormTemplate';
+export { LoginTemplate } from './ui/LoginTemplate';

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

@@ -12,9 +12,9 @@ import {
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
-  Badge,
-  Card,
-} from "xertica-ui/ui";
+  Badge,
+  Card,
+} from "xertica-ui/ui";
 import { Search, Plus, MoreHorizontal } from "lucide-react";
 
 export function CrudTemplate() {

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

@@ -4,9 +4,9 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
-  Badge,
-  Button,
-} from "xertica-ui/ui";
+  Badge,
+  Button,
+} from "xertica-ui/ui";
 import { Users, DollarSign, Activity, TrendingUp } from "lucide-react";
 
 export function DashboardTemplate() {

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

@@ -1,120 +1,120 @@
-import React, { useState } from "react";
-import {
-  Button,
-  Input,
-  Label,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  CardFooter,
-  Checkbox,
-} from "xertica-ui/ui";
-
-interface FormValues {
-  fullName: string;
-  email: string;
-  notify: boolean;
-}
-
-interface FormErrors {
-  fullName?: string;
-  email?: string;
-}
-
-function validate(values: FormValues): FormErrors {
-  const errors: FormErrors = {};
-  if (values.fullName.trim().length < 3) errors.fullName = "Nome completo é obrigatório";
-  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) errors.email = "Formato inválido";
-  return errors;
-}
-
-export function FormTemplate() {
-  const [values, setValues] = useState<FormValues>({ fullName: "", email: "", notify: false });
-  const [errors, setErrors] = useState<FormErrors>({});
-  const [submitted, setSubmitted] = useState(false);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    const errs = validate(values);
-    setErrors(errs);
-    if (Object.keys(errs).length === 0) {
-      setSubmitted(true);
-      console.log("Formulário enviado:", values);
-    }
-  };
-
-  const handleReset = () => {
-    setValues({ fullName: "", email: "", notify: false });
-    setErrors({});
-    setSubmitted(false);
-  };
-
-  return (
-    <div className="p-6">
-      <Card className="mx-auto w-full max-w-2xl">
-        <CardHeader>
-          <CardTitle>Editar Perfil Corporativo</CardTitle>
-          <p className="text-sm text-muted-foreground">
-            Atualize os detalhes de sua conta e defina as preferências.
-          </p>
-        </CardHeader>
-
-        <form onSubmit={handleSubmit}>
-          <CardContent className="grid gap-6 md:grid-cols-2">
-            <div className="col-span-full space-y-2">
-              <Label htmlFor="fullName">Nome Completo</Label>
-              <Input
-                id="fullName"
-                placeholder="Seu nome"
-                value={values.fullName}
-                onChange={e => setValues(v => ({ ...v, fullName: e.target.value }))}
-              />
-              {errors.fullName && (
-                <p className="text-sm text-destructive">{errors.fullName}</p>
-              )}
-            </div>
-
-            <div className="col-span-full space-y-2">
-              <Label htmlFor="email">E-mail Corporativo</Label>
-              <Input
-                id="email"
-                type="email"
-                placeholder="nome@exemplo.com"
-                value={values.email}
-                onChange={e => setValues(v => ({ ...v, email: e.target.value }))}
-              />
-              {errors.email && (
-                <p className="text-sm text-destructive">{errors.email}</p>
-              )}
-            </div>
-
-            <div className="col-span-full flex items-center space-x-2">
-              <Checkbox
-                id="notify"
-                checked={values.notify}
-                onCheckedChange={checked =>
-                  setValues(v => ({ ...v, notify: checked === true }))
-                }
-              />
-              <Label htmlFor="notify" className="font-normal cursor-pointer text-sm">
-                Desejo receber notificações atualizadas por e-mail no final de cada dia constando o sumário.
-              </Label>
-            </div>
-
-            {submitted && (
-              <div className="col-span-full rounded-[var(--radius)] bg-[var(--chart-2)]/10 border border-[var(--chart-2)]/20 p-3">
-                <p className="text-sm text-[var(--chart-2)]">Perfil salvo com sucesso!</p>
-              </div>
-            )}
-          </CardContent>
-
-          <CardFooter className="flex justify-end gap-2 border-t pt-6 bg-muted/20">
-            <Button type="button" variant="ghost" onClick={handleReset}>Cancelar</Button>
-            <Button type="submit">Salvar Alterações</Button>
-          </CardFooter>
-        </form>
-      </Card>
-    </div>
-  );
-}
+import React, { useState } from "react";
+import {
+  Button,
+  Input,
+  Label,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+  Checkbox,
+} from "xertica-ui/ui";
+
+interface FormValues {
+  fullName: string;
+  email: string;
+  notify: boolean;
+}
+
+interface FormErrors {
+  fullName?: string;
+  email?: string;
+}
+
+function validate(values: FormValues): FormErrors {
+  const errors: FormErrors = {};
+  if (values.fullName.trim().length < 3) errors.fullName = "Nome completo é obrigatório";
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) errors.email = "Formato inválido";
+  return errors;
+}
+
+export function FormTemplate() {
+  const [values, setValues] = useState<FormValues>({ fullName: "", email: "", notify: false });
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const errs = validate(values);
+    setErrors(errs);
+    if (Object.keys(errs).length === 0) {
+      setSubmitted(true);
+      console.log("Formulário enviado:", values);
+    }
+  };
+
+  const handleReset = () => {
+    setValues({ fullName: "", email: "", notify: false });
+    setErrors({});
+    setSubmitted(false);
+  };
+
+  return (
+    <div className="p-6">
+      <Card className="mx-auto w-full max-w-2xl">
+        <CardHeader>
+          <CardTitle>Editar Perfil Corporativo</CardTitle>
+          <p className="text-sm text-muted-foreground">
+            Atualize os detalhes de sua conta e defina as preferências.
+          </p>
+        </CardHeader>
+
+        <form onSubmit={handleSubmit}>
+          <CardContent className="grid gap-6 md:grid-cols-2">
+            <div className="col-span-full space-y-2">
+              <Label htmlFor="fullName">Nome Completo</Label>
+              <Input
+                id="fullName"
+                placeholder="Seu nome"
+                value={values.fullName}
+                onChange={e => setValues(v => ({ ...v, fullName: e.target.value }))}
+              />
+              {errors.fullName && (
+                <p className="text-sm text-destructive">{errors.fullName}</p>
+              )}
+            </div>
+
+            <div className="col-span-full space-y-2">
+              <Label htmlFor="email">E-mail Corporativo</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="nome@exemplo.com"
+                value={values.email}
+                onChange={e => setValues(v => ({ ...v, email: e.target.value }))}
+              />
+              {errors.email && (
+                <p className="text-sm text-destructive">{errors.email}</p>
+              )}
+            </div>
+
+            <div className="col-span-full flex items-center space-x-2">
+              <Checkbox
+                id="notify"
+                checked={values.notify}
+                onCheckedChange={checked =>
+                  setValues(v => ({ ...v, notify: checked === true }))
+                }
+              />
+              <Label htmlFor="notify" className="font-normal cursor-pointer text-sm">
+                Desejo receber notificações atualizadas por e-mail no final de cada dia constando o sumário.
+              </Label>
+            </div>
+
+            {submitted && (
+              <div className="col-span-full rounded-[var(--radius)] bg-[var(--chart-2)]/10 border border-[var(--chart-2)]/20 p-3">
+                <p className="text-sm text-[var(--chart-2)]">Perfil salvo com sucesso!</p>
+              </div>
+            )}
+          </CardContent>
+
+          <CardFooter className="flex justify-end gap-2 border-t pt-6 bg-muted/20">
+            <Button type="button" variant="ghost" onClick={handleReset}>Cancelar</Button>
+            <Button type="submit">Salvar Alterações</Button>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+}

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

@@ -7,9 +7,9 @@ import {
   CardHeader,
   CardTitle,
   Input,
-  Button,
-  Label,
-} from "xertica-ui/ui";
+  Button,
+  Label,
+} from "xertica-ui/ui";
 import { LockIcon } from "lucide-react";
 
 export function LoginTemplate() {