create-huenei-frontend 0.1.2

package/templates/help/src/routes/contacto.tsx

@@ -0,0 +1,60 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { toast } from "react-toastify";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+
+export const Route = createFileRoute("/contacto")({
+  component: Contacto,
+});
+
+function Contacto() {
+  const handleSubmit = () => {
+    toast.success("Mensaje enviado correctamente", { autoClose: 2500 });
+  };
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="text-center mb-16">
+        <h2 className="text-5xl font-bold text-base-content mb-6">Contacto</h2>
+        <p className="text-xl text-base-content/70 max-w-2xl mx-auto">
+          Ponte en contacto con el equipo de Huenei.
+        </p>
+      </div>
+
+      <div className="max-w-2xl mx-auto">
+        <Card>
+          <CardHeader>
+            <CardTitle>Envíanos un mensaje</CardTitle>
+            <CardDescription>
+              Completa el formulario y nos pondremos en contacto contigo lo antes posible.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form className="space-y-6">
+              <div className="space-y-2">
+                <Label htmlFor="nombre">Nombre</Label>
+                <Input type="text" id="nombre" name="nombre" placeholder="Tu nombre" />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input type="email" id="email" name="email" placeholder="tu@email.com" />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="mensaje">Mensaje</Label>
+                <Textarea id="mensaje" name="mensaje" rows={6} placeholder="Tu mensaje..." />
+              </div>
+
+              <Button type="button" className="w-full" size="lg" onClick={handleSubmit}>
+                Enviar Mensaje
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/help/src/routes/dashbord.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/dashbord")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/dashbord"!</div>;
+}

package/templates/help/src/routes/documentacion.tsx

@@ -0,0 +1,80 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { InicioTab } from "@/components/documentacion/inicio";
+import { EntornoTab } from "@/components/documentacion/entorno";
+import { FigmaMcpTab } from "@/components/documentacion/figma-mcp";
+import { InstalacionTab } from "@/components/documentacion/instalacion";
+import { EstructuraTab } from "@/components/documentacion/estructura";
+import { StackTab } from "@/components/documentacion/stack";
+import { RutasTab } from "@/components/documentacion/rutas";
+import { PersonalizacionTab } from "@/components/documentacion/personalizacion";
+
+export const Route = createFileRoute("/documentacion")({
+  component: Documentacion,
+});
+
+function Documentacion() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="text-center mb-16">
+        <h2 className="text-5xl font-bold text-slate-900 mb-6">Documentación</h2>
+        <p className="text-xl text-slate-600 max-w-2xl mx-auto">
+          Guía completa para utilizar y personalizar este template base de frontend.
+        </p>
+      </div>
+
+      <Tabs defaultValue="inicio" className="w-full">
+        <TabsList className="grid w-full grid-cols-2 md:grid-cols-3 lg:grid-cols-8">
+          <TabsTrigger value="inicio">Inicio</TabsTrigger>
+          <TabsTrigger value="entorno">Entorno</TabsTrigger>
+          <TabsTrigger value="figma-mcp">Figma MCP</TabsTrigger>
+          <TabsTrigger value="instalacion">Instalación</TabsTrigger>
+          <TabsTrigger value="estructura">Estructura</TabsTrigger>
+          <TabsTrigger value="stack">Stack</TabsTrigger>
+          <TabsTrigger value="rutas">Rutas</TabsTrigger>
+          <TabsTrigger value="personalizacion">Personalización</TabsTrigger>
+        </TabsList>
+
+        {/* Sección: Inicio */}
+        <TabsContent value="inicio" className="space-y-6">
+          <InicioTab />
+        </TabsContent>
+
+        {/* Sección: Entorno de Desarrollo */}
+        <TabsContent value="entorno" className="space-y-6">
+          <EntornoTab />
+        </TabsContent>
+
+        {/* Sección: Figma MCP */}
+        <TabsContent value="figma-mcp" className="space-y-6">
+          <FigmaMcpTab />
+        </TabsContent>
+
+        {/* Sección: Instalación */}
+        <TabsContent value="instalacion" className="space-y-6">
+          <InstalacionTab />
+        </TabsContent>
+
+        {/* Sección: Estructura */}
+        <TabsContent value="estructura" className="space-y-6">
+          <EstructuraTab />
+        </TabsContent>
+
+        {/* Sección: Stack Tecnológico */}
+        <TabsContent value="stack" className="space-y-6">
+          <StackTab />
+        </TabsContent>
+
+        {/* Sección: Rutas */}
+        <TabsContent value="rutas" className="space-y-6">
+          <RutasTab />
+        </TabsContent>
+
+        {/* Sección: Personalización */}
+        <TabsContent value="personalizacion" className="space-y-6">
+          <PersonalizacionTab />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

package/templates/help/src/routes/index.test.tsx

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Route } from './index'
+
+// Extraer el componente del Route para poder probarlo
+const IndexComponent = Route.options.component
+
+describe('Index Page', () => {
+  it('should render the main heading', () => {
+    render(<IndexComponent />)
+
+    const heading = screen.getByText('Template Base Frontend')
+    expect(heading).toBeInTheDocument()
+  })
+
+  it('should render the description text', () => {
+    render(<IndexComponent />)
+
+    const description = screen.getByText(
+      /Plataforma de desarrollo base para proyectos de frontend de Huenei/
+    )
+    expect(description).toBeInTheDocument()
+  })
+
+  it('should render all feature cards', () => {
+    render(<IndexComponent />)
+
+    expect(screen.getByText('TypeScript')).toBeInTheDocument()
+    expect(screen.getByText('Tailwind CSS')).toBeInTheDocument()
+    expect(screen.getByText('Vite')).toBeInTheDocument()
+  })
+
+  it('should render the CTA section', () => {
+    render(<IndexComponent />)
+
+    const ctaHeading = screen.getByText('¿Listo para comenzar?')
+    expect(ctaHeading).toBeInTheDocument()
+
+    const ctaButton = screen.getByText('Comenzar Proyecto')
+    expect(ctaButton).toBeInTheDocument()
+  })
+})

package/templates/help/src/routes/index.tsx

@@ -0,0 +1,211 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Code,
+  Palette,
+  Zap,
+  Database,
+  FileText,
+  Route as RouteIcon,
+  Settings,
+  BookOpen,
+} from "lucide-react";
+
+export const Route = createFileRoute("/")({
+  component: Index,
+});
+
+function Index() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="text-center mb-16">
+        <h2 className="text-5xl font-bold text-base-content mb-6">Huenei Frontend</h2>
+        <p className="text-xl text-base-content/70 max-w-2xl mx-auto mb-6">
+          Plantilla estandarizada para los proyectos de frontend
+        </p>
+        <div className="flex flex-wrap justify-center gap-2 mb-6">
+          <Badge variant="outline">Vite</Badge>
+          <Badge variant="outline">React 19</Badge>
+          <Badge variant="outline">TypeScript</Badge>
+          <Badge variant="outline">Zod</Badge>
+          <Badge variant="outline">Tailwind CSS v4</Badge>
+          <Badge variant="outline">TanStack Query</Badge>
+          <Badge variant="outline">TanStack Router</Badge>
+          <Badge variant="outline">shadcn/ui</Badge>
+          <Badge variant="outline">Vitest</Badge>
+        </div>
+      </div>
+
+      {/* CTA Section */}
+      <Card className="bg-info border-0 text-primary-content mb-8">
+        <CardContent className="pt-8 pb-8 text-center">
+          <h3 className="text-3xl font-bold mb-4">¿Listo para comenzar?</h3>
+          <p className="text-primary-content/90 mb-6 max-w-2xl mx-auto">
+            Este template está listo para ser personalizado según las necesidades de tu proyecto.
+            Consulta la documentación completa para conocer todas las características y mejores
+            prácticas.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link to="/documentacion">
+              <Button
+                size="default"
+                variant="ghost"
+                className="bg-base-100 text-primary hover:bg-base-200 w-full sm:w-auto"
+              >
+                <BookOpen className="w-4 h-4 mr-2" />
+                Ver Documentación
+              </Button>
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Features Grid */}
+      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
+        <Card className="hover:shadow-lg transition-shadow">
+          <CardHeader>
+            <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+              <Zap className="w-6 h-6 text-primary" />
+            </div>
+            <CardTitle>Vite</CardTitle>
+            <CardDescription>
+              Build tool ultra-rápido con HMR instantáneo y build optimizado con rolldown.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+
+        <Card className="hover:shadow-lg transition-shadow">
+          <CardHeader>
+            <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4">
+              <Code className="w-6 h-6 text-accent" />
+            </div>
+            <CardTitle>React 19 + TypeScript</CardTitle>
+            <CardDescription>
+              Framework moderno con React Compiler habilitado y type safety estricto.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+
+        <Card className="hover:shadow-lg transition-shadow">
+          <CardHeader>
+            <div className="w-12 h-12 bg-info/10 rounded-lg flex items-center justify-center mb-4">
+              <Database className="w-6 h-6 text-info" />
+            </div>
+            <CardTitle>TanStack Query</CardTitle>
+            <CardDescription>
+              Manejo de estado del servidor, caché y sincronización de datos con DevTools.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+
+        <Card className="hover:shadow-lg transition-shadow">
+          <CardHeader>
+            <div className="w-12 h-12 bg-success/10 rounded-lg flex items-center justify-center mb-4">
+              <RouteIcon className="w-6 h-6 text-success" />
+            </div>
+            <CardTitle>TanStack Router</CardTitle>
+            <CardDescription>
+              Enrutamiento type-safe con file-based routing y preload automático.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+
+        <Card className="hover:shadow-lg transition-shadow">
+          <CardHeader>
+            <div className="w-12 h-12 bg-warning/10 rounded-lg flex items-center justify-center mb-4">
+              <Palette className="w-6 h-6 text-warning" />
+            </div>
+            <CardTitle>Tailwind CSS v4</CardTitle>
+            <CardDescription>
+              Framework CSS utility-first con configuración moderna usando @theme.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+
+        <Card className="hover:shadow-lg transition-shadow">
+          <CardHeader>
+            <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-4">
+              <Code className="w-6 h-6 text-secondary" />
+            </div>
+            <CardTitle>shadcn/ui</CardTitle>
+            <CardDescription>
+              Componentes UI reutilizables construidos con Radix UI y Tailwind CSS.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+
+        <Card className="hover:shadow-lg transition-shadow">
+          <CardHeader>
+            <div className="w-12 h-12 bg-error/10 rounded-lg flex items-center justify-center mb-4">
+              <FileText className="w-6 h-6 text-error" />
+            </div>
+            <CardTitle>Zod</CardTitle>
+            <CardDescription>
+              Validación de esquemas TypeScript-first con integración para React Hook Form.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+
+        <Card className="hover:shadow-lg transition-shadow">
+          <CardHeader>
+            <div className="w-12 h-12 bg-neutral/10 rounded-lg flex items-center justify-center mb-4">
+              <Settings className="w-6 h-6 text-neutral" />
+            </div>
+            <CardTitle>Vitest</CardTitle>
+            <CardDescription>
+              Testing rápido con React Testing Library para componentes y lógica.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      </div>
+
+      {/* Quick Start Section */}
+      <div className="grid md:grid-cols-2 gap-6 mb-16">
+        <Card>
+          <CardHeader>
+            <CardTitle>Requisitos previos</CardTitle>
+            <CardDescription>Lo que necesitas para comenzar con este template</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ul className="list-disc list-inside space-y-2 text-base-content/70">
+              <li>Node.js 18+</li>
+              <li>pnpm</li>
+              <li>Conocimientos básicos de React y TypeScript</li>
+              <li>
+                <strong className="text-base-content">Cursor IDE</strong> (recomendado para mejor
+                experiencia de desarrollo)
+              </li>
+            </ul>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Comandos rápidos</CardTitle>
+            <CardDescription>Scripts principales para desarrollo y producción</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <h3 className="text-base font-semibold mb-3">Instalar dependencias</h3>
+            <div className="bg-base-200 rounded-lg p-3 font-mono text-sm text-base-content">
+              <code>pnpm install</code>
+            </div>
+            <h3 className="text-base font-semibold mb-3">Ejecutar en desarrollo</h3>
+            <div className="bg-base-200 rounded-lg p-3 font-mono text-sm text-base-content">
+              <code>pnpm dev</code>
+            </div>
+            <h3 className="text-base font-semibold mb-3">Build para producción</h3>
+            <div className="bg-base-200 rounded-lg p-3 font-mono text-sm text-base-content">
+              <code>pnpm build</code>
+            </div>
+            <h3 className="text-base font-semibold mb-3">Ejecutar tests</h3>
+            <div className="bg-base-200 rounded-lg p-3 font-mono text-sm text-base-content">
+              <code>pnpm test</code>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/help/src/routes/perfil.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/perfil')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/perfil"!</div>
+}

package/templates/help/src/routes/proyectos.$proyectoId.tsx

@@ -0,0 +1,156 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import proyectosData from "../data/proyectos.json";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import { ArrowLeft } from "lucide-react";
+
+export const Route = createFileRoute("/proyectos/$proyectoId")({
+  component: ProyectoDetalle,
+});
+
+interface Proyecto {
+  id: number;
+  titulo: string;
+  descripcion: string;
+  tecnologias: string[];
+  imagen: string;
+  estado: string;
+  fecha: string;
+}
+
+function ProyectoDetalle() {
+  const { proyectoId } = Route.useParams();
+  const proyecto = proyectosData.find((p) => p.id === Number(proyectoId)) as Proyecto | undefined;
+
+  if (!proyecto) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <Card>
+          <CardContent className="pt-8 pb-8 text-center">
+            <h1 className="text-4xl font-bold text-base-content mb-4">Proyecto no encontrado</h1>
+            <p className="text-base-content/70 mb-8">El proyecto que buscas no existe.</p>
+            <Button asChild variant="outline">
+              <Link to="/proyectos">
+                <ArrowLeft className="mr-2 h-4 w-4" />
+                Volver a Proyectos
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      {/* Breadcrumb */}
+      <Breadcrumb className="mb-8">
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link to="/proyectos">Proyectos</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbItem>
+            <BreadcrumbPage>{proyecto.titulo}</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      {/* Botón Volver */}
+      <Button asChild variant="ghost" className="mb-8">
+        <Link to="/proyectos">
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          Volver a Proyectos
+        </Link>
+      </Button>
+
+      {/* Contenido Principal */}
+      <Card className="overflow-hidden">
+        {/* Información del Proyecto */}
+        <CardHeader>
+          <div className="h-96 bg-base-200 overflow-hidden">
+            <img
+              src={proyecto.imagen}
+              alt={proyecto.titulo}
+              className="w-full h-full object-cover rounded-md"
+            />
+          </div>
+          <div className="flex items-center gap-4 mb-4">
+            <Badge
+              variant={proyecto.estado === "En Producción" ? "default" : "secondary"}
+              className={proyecto.estado === "En Producción" ? "badge-success" : "badge-warning"}
+            >
+              {proyecto.estado}
+            </Badge>
+            <span className="text-base-content/70 text-sm">
+              Fecha de inicio:{" "}
+              <span className="font-medium">
+                {new Date(proyecto.fecha).toLocaleDateString("es-ES", {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })}
+              </span>
+            </span>
+          </div>
+          <CardTitle className="text-4xl">{proyecto.titulo}</CardTitle>
+        </CardHeader>
+
+        <CardContent className="space-y-8">
+          {/* Descripción */}
+          <div>
+            <h2 className="text-2xl font-semibold text-base-content mb-4">Descripción</h2>
+            <CardDescription className="text-lg leading-relaxed">
+              {proyecto.descripcion}
+            </CardDescription>
+          </div>
+
+          {/* Tecnologías */}
+          <div>
+            <h2 className="text-2xl font-semibold text-base-content mb-4">
+              Tecnologías Utilizadas
+            </h2>
+            <div className="flex flex-wrap gap-3">
+              {proyecto.tecnologias.map((tech, index) => (
+                <Badge key={index} variant="default" className="text-sm">
+                  {tech}
+                </Badge>
+              ))}
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Información Adicional */}
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="text-lg font-semibold text-base-content mb-2">Estado del Proyecto</h3>
+              <p className="text-base-content/70">{proyecto.estado}</p>
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-base-content mb-2">Fecha de Inicio</h3>
+              <p className="text-base-content/70">
+                {new Date(proyecto.fecha).toLocaleDateString("es-ES", {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })}
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/help/src/routes/proyectos.tsx

@@ -0,0 +1,93 @@
+import { createFileRoute, Link, Outlet, useMatches } from "@tanstack/react-router";
+import proyectosData from "../data/proyectos.json";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+export const Route = createFileRoute("/proyectos")({
+  component: Proyectos,
+});
+
+interface Proyecto {
+  id: number;
+  titulo: string;
+  descripcion: string;
+  tecnologias: string[];
+  imagen: string;
+  estado: string;
+  fecha: string;
+}
+
+function Proyectos() {
+  const proyectos = proyectosData as Proyecto[];
+  const matches = useMatches();
+
+  // Verificar si hay una ruta hija activa (proyectoId)
+  const hasChildRoute = matches.some((match) => match.routeId === "/proyectos/$proyectoId");
+
+  // Si hay una ruta hija activa, solo renderizar el Outlet
+  if (hasChildRoute) {
+    return <Outlet />;
+  }
+
+  // Si no hay proyectoId, mostrar el listado
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="text-center mb-16">
+        <h2 className="text-5xl font-bold text-base-content mb-6">Proyectos</h2>
+        <p className="text-xl text-base-content/70 max-w-2xl mx-auto">
+          Explora los proyectos desarrollados con este template base.
+        </p>
+      </div>
+
+      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {proyectos.map((proyecto) => (
+          <Link
+            key={proyecto.id}
+            to="/proyectos/$proyectoId"
+            params={{ proyectoId: proyecto.id.toString() }}
+            className="block"
+          >
+            <Card className="overflow-hidden hover:shadow-lg transition-shadow cursor-pointer h-full">
+              <CardHeader>
+                <div className="h-48 bg-base-200 overflow-hidden">
+                  <img
+                    src={proyecto.imagen}
+                    alt={proyecto.titulo}
+                    className="w-full h-full object-cover rounded-md"
+                  />
+                </div>
+                <div className="flex items-center justify-between mb-3">
+                  <Badge
+                    variant={proyecto.estado === "En Producción" ? "default" : "secondary"}
+                    className={
+                      proyecto.estado === "En Producción" ? "badge-success" : "badge-warning"
+                    }
+                  >
+                    {proyecto.estado}
+                  </Badge>
+                  <span className="text-sm text-base-content/60">
+                    {new Date(proyecto.fecha).toLocaleDateString("es-ES", {
+                      year: "numeric",
+                      month: "short",
+                    })}
+                  </span>
+                </div>
+                <CardTitle>{proyecto.titulo}</CardTitle>
+                <CardDescription className="line-clamp-3">{proyecto.descripcion}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-2">
+                  {proyecto.tecnologias.map((tech, index) => (
+                    <Badge key={index} variant="outline">
+                      {tech}
+                    </Badge>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/help/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'