create-huenei-frontend 0.1.2

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

@@ -0,0 +1,163 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Settings } from "lucide-react";
+
+export function PersonalizacionTab() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Settings className="h-5 w-5" />
+          <CardTitle>Personalización y Configuración</CardTitle>
+        </div>
+        <CardDescription>
+          Cómo personalizar el template según las necesidades del proyecto.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+          <h3 className="text-lg font-semibold mb-3">Índice</h3>
+          <ul className="space-y-2 text-sm">
+            <li>
+              <a href="#personalizacion-tema" className="text-blue-600 hover:underline">
+                Tema y colores
+              </a>
+            </li>
+            <li>
+              <a href="#personalizacion-tailwind" className="text-blue-600 hover:underline">
+                Configuración de Tailwind CSS v4
+              </a>
+            </li>
+            <li>
+              <a href="#personalizacion-alias" className="text-blue-600 hover:underline">
+                Alias de importación
+              </a>
+            </li>
+            <li>
+              <a href="#personalizacion-dependencias" className="text-blue-600 hover:underline">
+                Agregar nuevas dependencias
+              </a>
+            </li>
+            <li>
+              <a href="#personalizacion-skills" className="text-blue-600 hover:underline">
+                Skills y Reglas del Proyecto
+              </a>
+            </li>
+            <li>
+              <a href="#personalizacion-testing" className="text-blue-600 hover:underline">
+                Testing
+              </a>
+            </li>
+          </ul>
+        </div>
+        <Separator />
+        <div id="personalizacion-tema">
+          <h3 className="text-lg font-semibold mb-2">Tema y colores</h3>
+          <p className="text-slate-600 mb-3">
+            Los colores se configuran en{" "}
+            <code className="bg-slate-100 px-1 rounded">src/index.css</code> usando{" "}
+            <code className="bg-slate-100 px-1 rounded">@theme</code> y en{" "}
+            <code className="bg-slate-100 px-1 rounded">components.json</code> para shadcn/ui.
+          </p>
+          <div className="mt-3 p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              <strong>Nota:</strong> Los colores deben seguir el diseño de Figma. No inventar
+              paletas de colores.
+            </p>
+          </div>
+        </div>
+        <Separator />
+        <div id="personalizacion-tailwind">
+          <h3 className="text-lg font-semibold mb-2">Configuración de Tailwind CSS v4</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>
+          <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm">
+            <pre className="text-xs">
+              {`@theme {
+  --color-primary: #3b82f6;
+  --font-sans: system-ui, sans-serif;
+  /* ... más tokens */
+}`}
+            </pre>
+          </div>
+        </div>
+        <Separator />
+        <div id="personalizacion-alias">
+          <h3 className="text-lg font-semibold mb-2">Alias de importación</h3>
+          <p className="text-slate-600 mb-3">
+            Los alias están configurados en{" "}
+            <code className="bg-slate-100 px-1 rounded">tsconfig.json</code> y{" "}
+            <code className="bg-slate-100 px-1 rounded">vite.config.ts</code>:
+          </p>
+          <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm space-y-1">
+            <div>
+              <code>@/components</code> → <code>src/components</code>
+            </div>
+            <div>
+              <code>@/lib</code> → <code>src/lib</code>
+            </div>
+            <div>
+              <code>@/routes</code> → <code>src/routes</code>
+            </div>
+          </div>
+          <p className="text-sm text-slate-600 mt-2">
+            Evitar imports relativos profundos. Usar siempre el alias{" "}
+            <code className="bg-slate-100 px-1 rounded">@/</code>.
+          </p>
+        </div>
+        <Separator />
+        <div id="personalizacion-dependencias">
+          <h3 className="text-lg font-semibold mb-2">Agregar nuevas dependencias</h3>
+          <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm mb-2">
+            <code>pnpm add [nombre-paquete]</code>
+          </div>
+          <p className="text-sm text-slate-600 mb-3">
+            Para dependencias de desarrollo, usa{" "}
+            <code className="bg-slate-100 px-1 rounded">-D</code>:
+          </p>
+          <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm">
+            <code>pnpm add -D [nombre-paquete]</code>
+          </div>
+        </div>
+        <Separator />
+        <div id="personalizacion-skills">
+          <h3 className="text-lg font-semibold mb-2">Skills y Reglas del Proyecto</h3>
+          <p className="text-slate-600 mb-3">
+            El proyecto incluye skills y reglas en{" "}
+            <code className="bg-slate-100 px-1 rounded">.cursor/skills/</code> que definen:
+          </p>
+          <ul className="list-disc list-inside space-y-2 text-slate-600">
+            <li>Arquitectura y estructura del proyecto</li>
+            <li>Reglas de routing con TanStack Router</li>
+            <li>Uso de componentes shadcn/ui</li>
+            <li>Reglas de UI y estilos con Tailwind</li>
+            <li>Configuración de testing</li>
+            <li>Comportamiento de la IA en el proyecto</li>
+          </ul>
+          <div className="mt-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              <strong>Importante:</strong> Estas skills guían a Cursor para mantener la consistencia
+              y seguir las mejores prácticas del proyecto.
+            </p>
+          </div>
+        </div>
+        <Separator />
+        <div id="personalizacion-testing">
+          <h3 className="text-lg font-semibold mb-2">Testing</h3>
+          <p className="text-slate-600 mb-3">
+            El proyecto está configurado con Vitest y React Testing Library:
+          </p>
+          <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm mb-2">
+            <code>pnpm test</code>
+          </div>
+          <p className="text-sm text-slate-600">
+            Los tests se encuentran junto a los componentes o en{" "}
+            <code className="bg-slate-100 px-1 rounded">src/test/</code>.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,138 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Zap } from "lucide-react";
+
+export function RutasTab() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Zap className="h-5 w-5" />
+          <CardTitle>Rutas y Navegación</CardTitle>
+        </div>
+        <CardDescription>
+          Sistema de rutas type-safe con TanStack Router usando file-based routing.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+          <h3 className="text-lg font-semibold mb-3">Índice</h3>
+          <ul className="space-y-2 text-sm">
+            <li>
+              <a href="#rutas-principios" className="text-blue-600 hover:underline">
+                Principios
+              </a>
+            </li>
+            <li>
+              <a href="#rutas-crear" className="text-blue-600 hover:underline">
+                Crear una nueva ruta
+              </a>
+            </li>
+            <li>
+              <a href="#rutas-dinamicas" className="text-blue-600 hover:underline">
+                Rutas dinámicas
+              </a>
+            </li>
+            <li>
+              <a href="#rutas-navegacion" className="text-blue-600 hover:underline">
+                Navegación
+              </a>
+            </li>
+            <li>
+              <a href="#rutas-restricciones" className="text-blue-600 hover:underline">
+                Restricciones importantes
+              </a>
+            </li>
+          </ul>
+        </div>
+        <Separator />
+        <div id="rutas-principios">
+          <h3 className="text-lg font-semibold mb-2">Principios</h3>
+          <ul className="list-disc list-inside space-y-2 text-slate-600">
+            <li>Usar exclusivamente file-based routing</li>
+            <li>
+              Las rutas viven en <code className="bg-slate-100 px-1 rounded">src/routes/</code>
+            </li>
+            <li>La URL es fuente de verdad</li>
+            <li>Un componente por archivo</li>
+          </ul>
+        </div>
+        <Separator />
+        <div id="rutas-crear">
+          <h3 className="text-lg font-semibold mb-2">Crear una nueva ruta</h3>
+          <p className="text-slate-600 mb-3">
+            Las rutas se crean automáticamente basándose en la estructura de archivos:
+          </p>
+          <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm">
+            <pre className="text-xs">
+              {`// src/routes/nueva-ruta.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/nueva-ruta')({
+  component: NuevaRuta,
+})
+
+function NuevaRuta() {
+  return <div>Contenido de la ruta</div>
+}`}
+            </pre>
+          </div>
+        </div>
+        <Separator />
+        <div id="rutas-dinamicas">
+          <h3 className="text-lg font-semibold mb-2">Rutas dinámicas</h3>
+          <p className="text-slate-600 mb-3">
+            Para rutas con parámetros, usa el prefijo{" "}
+            <code className="bg-slate-100 px-1 rounded">$</code> en el nombre del archivo:
+          </p>
+          <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm">
+            <pre className="text-xs">
+              {`// src/routes/usuario.$id.tsx
+export const Route = createFileRoute('/usuario/$id')({
+  component: Usuario,
+})
+
+function Usuario() {
+  const { id } = Route.useParams()
+  return <div>Usuario: {id}</div>
+}`}
+            </pre>
+          </div>
+        </div>
+        <Separator />
+        <div id="rutas-navegacion">
+          <h3 className="text-lg font-semibold mb-2">Navegación</h3>
+          <p className="text-slate-600 mb-3">
+            Usar <code className="bg-slate-100 px-1 rounded">Link</code> de TanStack Router. No usar{" "}
+            <code className="bg-slate-100 px-1 rounded">useNavigate</code> directamente:
+          </p>
+          <div className="bg-slate-100 rounded-lg p-4 font-mono text-sm">
+            <pre className="text-xs">
+              {`import { Link } from '@tanstack/react-router'
+
+<Link to="/proyectos">Proyectos</Link>
+<Link 
+  to="/proyectos/$proyectoId" 
+  params={{ proyectoId: '1' }}
+>
+  Ver Proyecto
+</Link>`}
+            </pre>
+          </div>
+        </div>
+        <Separator />
+        <div id="rutas-restricciones">
+          <h3 className="text-lg font-semibold mb-2">Restricciones importantes</h3>
+          <ul className="list-disc list-inside space-y-2 text-slate-600">
+            <li>
+              No usar <code className="bg-slate-100 px-1 rounded">useEffect</code> para sincronizar
+              URL o params
+            </li>
+            <li>Loaders y actions solo para datos</li>
+            <li>El router se regenera automáticamente al agregar/modificar rutas</li>
+          </ul>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}