@imperiohub/lp-templates

Versión actual: 0.2.4

Paquete centralizado de templates para landing pages del ecosistema ImperioHub SaaS.

📦 Instalación

npm install @imperiohub/lp-templates

🎯 ¿Qué es este paquete?

Un sistema unificado que proporciona:

• Schemas de templates: Estructura de datos estandarizada
• Validación con Zod: Validación runtime de contenido
• Componentes React: UI pre-diseñada para renderizar landing pages
• TypeScript types: Type safety completo en todo el ecosistema
• Sistema de temas SCSS: Variables CSS customizables por landing

🚀 Guías de Uso

Para Backend (Node.js + Prisma)

Guía completa paso a paso para integrar los templates en tu backend:

👉 Guía de Backend

Incluye:

• Instalación y setup inicial
• Cómo crear/validar landing pages
• Seeds de templates en Prisma
• Validación de contenido con Zod
• Manejo de errores
• Testing

Para Frontend Cliente (React)

Guía para renderizar landing pages en aplicaciones de cliente:

👉 Guía de Cliente

Incluye:

• Setup de estilos CSS/SCSS
• Renderizar landing pages dinámicamente
• Customización de temas
• Server-side rendering (SSR)
• Optimización de performance

📚 Estructura del Proyecto

@imperiohub/lp-templates/
├── dist/                      # Build output
│   ├── schemas/              # Schemas + validadores (sin React)
│   ├── components/           # Componentes React
│   ├── generator/            # Utilidades Prisma (sin React)
│   └── lp-templates.css      # Estilos compilados
├── docs/                     # Documentación
│   ├── README-BACKEND.md    # Guía para backend
│   └── README-CLIENTE.md    # Guía para frontend cliente
└── src/                      # Código fuente

🎨 Templates Disponibles

| Template | Slug | Descripción | |----------|------|-------------| | Menu Template | menu | Landing page para menús de restaurantes con categorías, items y precios | | Hero con Beneficios | servicios-hero-beneficios | Landing de servicios con título hero y lista de ventajas | | Home Page V1 | home-page-v1 | Home page genérica con bloques de navegación |

🔄 Exports Modulares

El paquete ofrece imports modulares para optimizar el bundle size:

// ✅ Solo schemas y validadores (SIN React - para Node.js)
import {
  menuTemplate,
  validateContent
} from '@imperiohub/lp-templates/schemas';

// ✅ Solo componentes React (CON React - para frontend)
import {
  MenuTemplate,
  TemplateRenderer
} from '@imperiohub/lp-templates/components';

// ✅ Solo generator para Prisma (SIN React - para seeds)
import {
  initializeTemplates
} from '@imperiohub/lp-templates/generator';

⚡ Quick Start

Backend (Validar contenido)

import { validateContent, menuTemplate } from '@imperiohub/lp-templates/schemas';

const content = {
  headerTitle: 'Mi Restaurante',
  headerSubtitle: 'Comida casera',
  // ... más campos
};

try {
  const validContent = validateContent(content, menuTemplate);
  // ✅ Content validado y tipado
} catch (error) {
  // ❌ Error de validación
  console.error(error.errors);
}

Frontend Cliente (Renderizar landing)

import '@imperiohub/lp-templates/dist/lp-templates.css';
import { TemplateRenderer } from '@imperiohub/lp-templates/components';

function LandingPage({ slug, content }) {
  return <TemplateRenderer templateSlug={slug} content={content} />;
}

🛠️ Scripts de Desarrollo

npm run build        # Compilar el paquete
npm run verify       # Verificar que el build es correcto
npm run typecheck    # Verificar tipos TypeScript
npm run lint         # Linter
npm run dev          # Modo desarrollo con Vite

📖 Documentación Completa

• Guía de Backend: Setup en Node.js, Prisma, validación, seeds
• Guía de Cliente: Renderizado React, temas SCSS, SSR

🆕 Changelog

v0.2.4 (Diciembre 2025)

• ✅ Reestructuración de documentación en carpeta docs/
• ✅ README principal simplificado con links a guías específicas

v0.2.3 (Diciembre 2025)

• ✅ FIX CRÍTICO: Archivos .d.ts intermedios ahora se copian correctamente
• ✅ Script de verificación de build (npm run verify)
• ✅ Generación correcta de todos los archivos de tipos

Ver changelog completo

🤝 Contribuir

Para agregar un nuevo template, consulta la sección "Crear un Nuevo Template" en la guía de backend.

📄 Licencia

MIT © ImperioHub