create-huenei-frontend 0.1.2

package/dist/templates/clean/src/index.css

@@ -0,0 +1,104 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@plugin "daisyui" {
+  logs: true;
+}
+
+/* Main theme */
+
+@plugin "daisyui/theme" {
+  name: "huenei";
+  default: true;
+  prefersdark: false;
+  color-scheme: light;
+  --color-base-100: oklch(100% 0 0);
+  --color-base-200: oklch(97% 0 0);
+  --color-base-300: oklch(94% 0 0);
+  --color-base-content: oklch(0% 0 0);
+  --color-primary: oklch(15.906% 0 0);
+  --color-primary-content: oklch(100% 0 0);
+  --color-secondary: oklch(21.455% 0.001 17.278);
+  --color-secondary-content: oklch(100% 0 0);
+  --color-accent: oklch(26.861% 0 0);
+  --color-accent-content: oklch(100% 0 0);
+  --color-neutral: oklch(0% 0 0);
+  --color-neutral-content: oklch(100% 0 0);
+  --color-info: oklch(79.54% 0.103 205.9);
+  --color-info-content: oklch(15.908% 0.02 205.9);
+  --color-success: oklch(90.13% 0.153 164.14);
+  --color-success-content: oklch(18.026% 0.03 164.14);
+  --color-warning: oklch(88.37% 0.135 79.94);
+  --color-warning-content: oklch(17.674% 0.027 79.94);
+  --color-error: oklch(78.66% 0.15 28.47);
+  --color-error-content: oklch(15.732% 0.03 28.47);
+  --radius-selector: 2rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+/* Toastify theme */
+:root {
+  --toastify-color-light: #fff;
+  --toastify-color-dark: #121212;
+  --toastify-color-info: #3498db;
+  --toastify-color-success: #07bc0c;
+  --toastify-color-warning: #f1c40f;
+  --toastify-color-error: hsl(6, 78%, 57%);
+  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
+
+  --toastify-icon-color-info: var(--toastify-color-info);
+  --toastify-icon-color-success: var(--toastify-color-success);
+  --toastify-icon-color-warning: var(--toastify-color-warning);
+  --toastify-icon-color-error: var(--toastify-color-error);
+
+  --toastify-container-width: fit-content;
+  --toastify-toast-width: 320px;
+  --toastify-toast-offset: 16px;
+  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
+  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
+  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
+  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
+  --toastify-toast-background: #fff;
+  --toastify-toast-padding: 14px;
+  --toastify-toast-min-height: 64px;
+  --toastify-toast-max-height: 800px;
+  --toastify-toast-bd-radius: 6px;
+  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  --toastify-font-family: sans-serif;
+  --toastify-z-index: 9999;
+  --toastify-text-color-light: #757575;
+  --toastify-text-color-dark: #fff;
+
+  /* Used only for colored theme */
+  --toastify-text-color-info: #fff;
+  --toastify-text-color-success: #fff;
+  --toastify-text-color-warning: #fff;
+  --toastify-text-color-error: #fff;
+
+  --toastify-spinner-color: #616161;
+  --toastify-spinner-color-empty-area: #e0e0e0;
+  --toastify-color-progress-light: linear-gradient(
+    to right,
+    #4cd964,
+    #5ac8fa,
+    #007aff,
+    #34aadc,
+    #5856d6,
+    #ff2d55
+  );
+  --toastify-color-progress-dark: #bb86fc;
+  --toastify-color-progress-info: var(--toastify-color-info);
+  --toastify-color-progress-success: var(--toastify-color-success);
+  --toastify-color-progress-warning: var(--toastify-color-warning);
+  --toastify-color-progress-error: var(--toastify-color-error);
+  /* used to control the opacity of the progress trail */
+  --toastify-color-progress-bgo: 0.2;
+}
+
+@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));

package/dist/templates/clean/src/lib/queryClient.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60_000,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});

package/dist/templates/clean/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/dist/templates/clean/src/main.tsx

@@ -0,0 +1,33 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { RouterProvider } from "@tanstack/react-router";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ToastContainer } from "react-toastify";
+
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { router } from "./router";
+import { queryClient } from "@/lib/queryClient";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      <TanStackRouterDevtools router={router} initialIsOpen={false} />
+      <ReactQueryDevtools initialIsOpen={false} />
+      <ToastContainer
+        position="bottom-center"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick={false}
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="light"
+      />
+    </QueryClientProvider>
+  </StrictMode>
+);

package/dist/templates/clean/src/routeTree.gen.ts

@@ -0,0 +1,77 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as OtraRutaRouteImport } from './routes/otra-ruta'
+import { Route as IndexRouteImport } from './routes/index'
+
+const OtraRutaRoute = OtraRutaRouteImport.update({
+  id: '/otra-ruta',
+  path: '/otra-ruta',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/otra-ruta': typeof OtraRutaRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/otra-ruta': typeof OtraRutaRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/otra-ruta': typeof OtraRutaRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/otra-ruta'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/otra-ruta'
+  id: '__root__' | '/' | '/otra-ruta'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  OtraRutaRoute: typeof OtraRutaRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/otra-ruta': {
+      id: '/otra-ruta'
+      path: '/otra-ruta'
+      fullPath: '/otra-ruta'
+      preLoaderRoute: typeof OtraRutaRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  OtraRutaRoute: OtraRutaRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/dist/templates/clean/src/router.tsx

@@ -0,0 +1,13 @@
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+})
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}

package/dist/templates/clean/src/routes/__root.tsx

@@ -0,0 +1,82 @@
+import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+
+function NotFound() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-4xl">404 - Página no encontrada</CardTitle>
+          <CardDescription>La página que buscas no existe o ha sido movida.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button asChild>
+            <Link to="/">Volver al inicio</Link>
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <div className="min-h-screen bg-base-100">
+        {/* Header */}
+        <header className="bg-base-100 shadow-sm">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex justify-between items-center py-6">
+              <div className="flex items-center">
+                <Link to="/" className="text-2xl font-bold text-base-content">
+                  Huenei
+                </Link>
+              </div>
+              <nav className="hidden md:flex space-x-8 items-center">
+                <Link
+                  to="/"
+                  className="text-base-content/70 hover:text-base-content transition-colors [&.active]:text-base-content [&.active]:font-semibold"
+                >
+                  Inicio
+                </Link>
+                <Link
+                  to="/otra-ruta"
+                  className="text-base-content/70 hover:text-base-content transition-colors [&.active]:text-base-content [&.active]:font-semibold"
+                >
+                  Enrutamiento
+                </Link>
+                <a
+                  href="https://huenei.com/documentacion"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="btn btn-primary [&.active]:text-base-content [&.active]:font-semibold flex items-center gap-2"
+                >
+                  <span>Documentación</span>
+                  <ExternalLink size={10} />
+                </a>
+              </nav>
+            </div>
+          </div>
+        </header>
+
+        {/* Main Content */}
+        <main>
+          <Outlet />
+        </main>
+
+        {/* Footer */}
+        <footer className="bg-base-100 border-t border-base-300 mt-16">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            <div className="text-center text-base-content/70">
+              <p>&copy; {new Date().getFullYear()} Huenei. Todos los derechos reservados.</p>
+              <p className="mt-2 text-sm">Template base para proyectos de frontend</p>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </>
+  ),
+  notFoundComponent: NotFound,
+});

package/dist/templates/clean/src/routes/index.tsx

@@ -0,0 +1,187 @@
+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>
+
+      {/* 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>
+  );
+}