create-huenei-frontend 0.1.2

package/templates/help/src/components/documentacion/stack.tsx

@@ -0,0 +1,401 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { Zap, Code, FileText, Database, Palette } from "lucide-react";
+
+export function StackTab() {
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>Índice del Stack Tecnológico</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+            <ul className="space-y-2 text-sm">
+              <li>
+                <a href="#stack-vite" className="text-blue-600 hover:underline">
+                  Vite
+                </a>
+              </li>
+              <li>
+                <a href="#stack-react" className="text-blue-600 hover:underline">
+                  React 19 + TypeScript
+                </a>
+              </li>
+              <li>
+                <a href="#stack-zod" className="text-blue-600 hover:underline">
+                  Zod - Validación de Esquemas
+                </a>
+              </li>
+              <li>
+                <a href="#stack-query" className="text-blue-600 hover:underline">
+                  TanStack Query
+                </a>
+              </li>
+              <li>
+                <a href="#stack-router" className="text-blue-600 hover:underline">
+                  TanStack Router
+                </a>
+              </li>
+              <li>
+                <a href="#stack-tailwind" className="text-blue-600 hover:underline">
+                  Tailwind CSS v4
+                </a>
+              </li>
+              <li>
+                <a href="#stack-shadcn" className="text-blue-600 hover:underline">
+                  shadcn/ui
+                </a>
+              </li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+      {/* Vite */}
+      <Card id="stack-vite">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Zap className="h-5 w-5" />
+            <CardTitle>Vite</CardTitle>
+          </div>
+          <CardDescription>Build tool ultra-rápido para desarrollo y producción.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Características</h3>
+            <ul className="list-disc list-inside space-y-2 text-slate-600">
+              <li>HMR (Hot Module Replacement) instantáneo</li>
+              <li>Build optimizado con rolldown</li>
+              <li>
+                Configuración en <code className="bg-slate-100 px-1 rounded">vite.config.ts</code>
+              </li>
+            </ul>
+          </div>
+          <Separator />
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Scripts disponibles</h3>
+            <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm space-y-2">
+              <div>
+                <code>pnpm dev</code> - Servidor de desarrollo
+              </div>
+              <div>
+                <code>pnpm build</code> - Build para producción
+              </div>
+              <div>
+                <code>pnpm preview</code> - Preview del build
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* React + TypeScript */}
+      <Card id="stack-react">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Code className="h-5 w-5" />
+            <CardTitle>React 19 + TypeScript</CardTitle>
+          </div>
+          <CardDescription>Framework y lenguaje base del proyecto.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Características</h3>
+            <ul className="list-disc list-inside space-y-2 text-slate-600">
+              <li>React 19 con todas sus mejoras</li>
+              <li>TypeScript estricto para type safety</li>
+              <li>React Compiler habilitado para optimizaciones automáticas</li>
+              <li>StrictMode activado por defecto</li>
+            </ul>
+          </div>
+          <Separator />
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Configuración</h3>
+            <ul className="list-disc list-inside space-y-2 text-slate-600">
+              <li>
+                <code className="bg-slate-100 px-1 rounded">tsconfig.json</code> - Configuración
+                principal
+              </li>
+              <li>
+                <code className="bg-slate-100 px-1 rounded">tsconfig.app.json</code> - Configuración
+                de la app
+              </li>
+              <li>
+                Alias <code className="bg-slate-100 px-1 rounded">@/</code> configurado para imports
+              </li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Zod */}
+      <Card id="stack-zod">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <FileText className="h-5 w-5" />
+            <CardTitle>Zod - Validación de Esquemas</CardTitle>
+          </div>
+          <CardDescription>
+            Validación de datos y tipos con TypeScript-first schema validation.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Uso con React Hook Form</h3>
+            <p className="text-slate-600 mb-3">
+              Zod se integra perfectamente con React Hook Form usando{" "}
+              <code className="bg-slate-100 px-1 rounded">@hookform/resolvers</code>:
+            </p>
+            <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm">
+              <pre className="text-xs">
+                {`import { useForm } from "react-hook-form";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import * as z from "zod";
+
+const schema = z.object({
+  email: z.string().email("El email no es válido"),
+  password: z.string().min(6, "Mínimo 6 caracteres"),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+const form = useForm<FormValues>({
+  resolver: standardSchemaResolver(schema),
+});`}
+              </pre>
+            </div>
+          </div>
+          <Separator />
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Ventajas</h3>
+            <ul className="list-disc list-inside space-y-2 text-slate-600">
+              <li>Type safety end-to-end</li>
+              <li>Validación en runtime y compile-time</li>
+              <li>Mensajes de error personalizables</li>
+              <li>Inferencia automática de tipos TypeScript</li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* TanStack Query */}
+      <Card id="stack-query">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Database className="h-5 w-5" />
+            <CardTitle>TanStack Query</CardTitle>
+          </div>
+          <CardDescription>
+            Manejo de estado del servidor, caché y sincronización de datos.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Configuración</h3>
+            <p className="text-slate-600 mb-3">
+              El QueryClient está configurado en{" "}
+              <code className="bg-slate-100 px-1 rounded">src/lib/queryClient.ts</code>:
+            </p>
+            <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm">
+              <pre className="text-xs">
+                {`export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60_000,        // 1 minuto
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});`}
+              </pre>
+            </div>
+          </div>
+          <Separator />
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Ejemplo de uso</h3>
+            <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm">
+              <pre className="text-xs">
+                {`import { useQuery } from '@tanstack/react-query';
+
+function MyComponent() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['users'],
+    queryFn: async () => {
+      const res = await fetch('/api/users');
+      return res.json();
+    },
+  });
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+  
+  return <div>{/* Render data */}</div>;
+}`}
+              </pre>
+            </div>
+          </div>
+          <Separator />
+          <div>
+            <h3 className="text-lg font-semibold mb-2">DevTools</h3>
+            <p className="text-slate-600">
+              TanStack Query DevTools está disponible en desarrollo para inspeccionar queries, caché
+              y estado.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* TanStack Router */}
+      <Card id="stack-router">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Zap className="h-5 w-5" />
+            <CardTitle>TanStack Router</CardTitle>
+          </div>
+          <CardDescription>Enrutamiento type-safe y file-based routing.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold mb-2">File-based Routing</h3>
+            <p className="text-slate-600 mb-3">
+              Las rutas se generan automáticamente desde la estructura de archivos en{" "}
+              <code className="bg-slate-100 px-1 rounded">src/routes/</code>:
+            </p>
+            <ul className="list-disc list-inside space-y-2 text-slate-600">
+              <li>
+                <code className="bg-slate-100 px-1 rounded">index.tsx</code> → <code>/</code>
+              </li>
+              <li>
+                <code className="bg-slate-100 px-1 rounded">proyectos.tsx</code> →{" "}
+                <code>/proyectos</code>
+              </li>
+              <li>
+                <code className="bg-slate-100 px-1 rounded">proyectos.$proyectoId.tsx</code> →{" "}
+                <code>/proyectos/:proyectoId</code>
+              </li>
+            </ul>
+          </div>
+          <Separator />
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Características</h3>
+            <ul className="list-disc list-inside space-y-2 text-slate-600">
+              <li>Type-safe routing con autocompletado</li>
+              <li>
+                Preload automático con{" "}
+                <code className="bg-slate-100 px-1 rounded">defaultPreload: 'intent'</code>
+              </li>
+              <li>Code splitting automático</li>
+              <li>Router DevTools para debugging</li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Tailwind CSS */}
+      <Card id="stack-tailwind">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Palette className="h-5 w-5" />
+            <CardTitle>Tailwind CSS v4</CardTitle>
+          </div>
+          <CardDescription>Framework CSS utility-first con configuración moderna.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Configuración</h3>
+            <p className="text-slate-600 mb-3">
+              Tailwind CSS v4 se configura directamente en el archivo CSS usando{" "}
+              <code className="bg-slate-100 px-1 rounded">@theme</code>:
+            </p>
+            <ul className="list-disc list-inside space-y-2 text-slate-600">
+              <li>
+                Plugin Vite: <code className="bg-slate-100 px-1 rounded">@tailwindcss/vite</code>
+              </li>
+              <li>
+                Configuración en <code className="bg-slate-100 px-1 rounded">src/index.css</code>
+              </li>
+              <li>No usar estilos inline</li>
+              <li>Mobile-first approach</li>
+            </ul>
+          </div>
+          <Separator />
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Reglas importantes</h3>
+            <ul className="list-disc list-inside space-y-2 text-slate-600">
+              <li>Figma define layout, spacing y jerarquía</li>
+              <li>
+                Priorizar <code className="bg-slate-100 px-1 rounded">gap</code> sobre{" "}
+                <code className="bg-slate-100 px-1 rounded">margin</code>
+              </li>
+              <li>Usar tokens definidos, no valores arbitrarios</li>
+              <li>Mantener consistencia visual</li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* shadcn/ui */}
+      <Card id="stack-shadcn">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Code className="h-5 w-5" />
+            <CardTitle>shadcn/ui</CardTitle>
+          </div>
+          <CardDescription>
+            Componentes UI reutilizables construidos con Radix UI y Tailwind CSS.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold mb-3">Componentes instalados</h3>
+            <div className="flex flex-wrap gap-2">
+              <Badge>Card</Badge>
+              <Badge>Button</Badge>
+              <Badge>Badge</Badge>
+              <Badge>Input</Badge>
+              <Badge>PasswordInput</Badge>
+              <Badge>Textarea</Badge>
+              <Badge>Label</Badge>
+              <Badge>Form</Badge>
+              <Badge>Breadcrumb</Badge>
+              <Badge>Separator</Badge>
+              <Badge>Tabs</Badge>
+            </div>
+          </div>
+          <Separator />
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Reglas de uso</h3>
+            <ul className="list-disc list-inside space-y-2 text-slate-600">
+              <li>
+                Importar desde <code className="bg-slate-100 px-1 rounded">@/components/ui</code>
+              </li>
+              <li>No modificar componentes base</li>
+              <li>Extender solo vía composición</li>
+              <li>Componentes UI sin lógica de negocio</li>
+            </ul>
+          </div>
+          <Separator />
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Instalar nuevos componentes</h3>
+            <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm mb-2">
+              <code>pnpm dlx shadcn@latest add [nombre-componente]</code>
+            </div>
+            <p className="text-sm text-slate-600">
+              Visita{" "}
+              <a
+                href="https://ui.shadcn.com/docs/components"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:underline"
+              >
+                la documentación oficial
+              </a>{" "}
+              para ver todos los componentes disponibles.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  );
+}

package/templates/help/src/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "badge inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none transition-colors overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "badge-primary",
+        secondary: "badge-secondary",
+        destructive: "badge-error",
+        outline: "badge-outline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/templates/help/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,106 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn("breadcrumbs text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn("flex flex-wrap items-center gap-1.5 wrap-break-words sm:gap-2.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-base-content transition-colors", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-base-content font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/templates/help/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "btn inline-flex items-center justify-center gap-2 whitespace-nowrap [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "btn-primary",
+        destructive: "btn-error",
+        outline: "btn-outline btn-primary",
+        secondary: "btn-secondary",
+        ghost: "btn-ghost",
+        link: "btn-link",
+      },
+      size: {
+        default: "btn-md",
+        sm: "btn-sm",
+        lg: "btn-lg",
+        icon: "btn-square",
+        "icon-sm": "btn-square btn-sm",
+        "icon-lg": "btn-square btn-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/templates/help/src/components/ui/card.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn("card bg-base-100 shadow-sm border border-base-300 px-4 py-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "card-header @container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("card-title leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-base-content/70 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("card-body px-6", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("card-actions flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };