veleta-templates

v0.3.11

Published

12 days ago

Veleta restaurant menu templates as Stencil Web Components.

0High
0Medium
0Low

vivancodev

Veleta Templates

Proyecto Stencil completamente configurado con TypeScript, Tailwind CSS y PostCSS.

Características

✅ TypeScript completamente configurado
✅ Tailwind CSS configurado y funcionando dentro de los componentes
✅ PostCSS con autoprefixer
✅ OutputTargets: dist, dist-custom-elements, www
✅ Compatible con Astro, Ionic Angular y Web Components puros
✅ Componente <veleta-default-template> con tipos TypeScript

Requisitos Previos

Node.js 16 o superior
npm 7 o superior

Instalación

npm install

Desarrollo

Para iniciar el servidor de desarrollo con hot-reload:

npm run start

Esto iniciará el servidor en http://localhost:3333 y abrirá automáticamente el navegador con la página de prueba.

Construcción

Para construir el proyecto para producción:

npm run build

Esto generará:

dist/ - Build estándar de Stencil
dist-custom-elements/ - Build para Web Components independientes
www/ - Build para testing local

Uso

Como Web Component puro

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="module" src="./dist/veleta-templates/veleta-templates.esm.js"></script>
</head>
<body>
  <veleta-default-template id="menu"></veleta-default-template>
  <script>
    document.getElementById('menu').data = {
      menu: {
        id: 'm1',
        businessId: 'b1',
        name: 'Casa Veleta',
        slug: 'casa-veleta',
        active: true,
        createdAt: '2026-01-01T00:00:00.000Z',
        updatedAt: '2026-01-01T00:00:00.000Z',
        sections: [
          {
            id: 's1',
            menuId: 'm1',
            title: 'Entradas',
            order: 1,
            createdAt: '2026-01-01T00:00:00.000Z',
            updatedAt: '2026-01-01T00:00:00.000Z',
            dishes: [
              { id: 'd1', name: 'Ensalada César', price: 12.5, available: true, order: 1 }
            ]
          }
        ]
      }
    };
  </script>
</body>
</html>

En Astro

Instala el paquete en tu proyecto Astro:

npm install ./path/to/veleta-templates

Usa el componente en tu archivo .astro:

---
import { defineCustomElement } from 'veleta-templates/dist/veleta-templates/veleta-templates.esm.js';
import type { TemplateData } from 'veleta-templates/dist/types/template-data';

const menuData: TemplateData = {
  menu: {
    id: 'm1',
    businessId: 'b1',
    name: 'Casa Veleta',
    slug: 'casa-veleta',
    active: true,
    createdAt: '2026-01-01T00:00:00.000Z',
    updatedAt: '2026-01-01T00:00:00.000Z',
    sections: [],
  },
};
---

<veleta-default-template data={menuData}></veleta-default-template>

<script>
  defineCustomElement();
</script>

En Ionic Angular

Instala el paquete:

npm install ./path/to/veleta-templates

En tu módulo Angular, importa CUSTOM_ELEMENTS_SCHEMA:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Importante para usar Web Components
  bootstrap: [AppComponent]
})
export class AppModule {}

En tu componente TypeScript:

import { Component } from '@angular/core';
import type { TemplateData } from 'veleta-templates/dist/types/template-data';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  menuData: TemplateData = {
    menu: {
      id: 'm1',
      businessId: 'b1',
      name: 'Casa Veleta',
      slug: 'casa-veleta',
      active: true,
      createdAt: '2026-01-01T00:00:00.000Z',
      updatedAt: '2026-01-01T00:00:00.000Z',
      sections: [],
    },
  };
}

En tu template HTML:

<veleta-default-template [data]="menuData"></veleta-default-template>

Importa los estilos en angular.json o en tu styles.css:

"styles": [
  "node_modules/veleta-templates/dist/veleta-templates/veleta-templates.css"
]

Estructura del Proyecto

veleta-templates/
├── src/
│   ├── components/
│   │   └── menu-template-a/
│   │       ├── menu-template-a.tsx    # Componente principal
│   │       └── menu-template-a.css    # Estilos con Tailwind
│   ├── types/
│   │   ├── menu.ts                    # Tipos TypeScript
│   │   └── index.ts                   # Exportación de tipos
│   ├── global/
│   │   └── app.css                    # Estilos globales
│   ├── components.ts                  # Exportación de componentes
│   ├── index.ts                       # Punto de entrada
│   └── index.html                     # Página de prueba
├── stencil.config.ts                  # Configuración de Stencil
├── tailwind.config.js                 # Configuración de Tailwind
├── postcss.config.js                  # Configuración de PostCSS
├── tsconfig.json                      # Configuración de TypeScript
└── package.json                       # Dependencias y scripts

Componentes

veleta-default-template

Componente que renderiza el árbol del menú (TemplateData).

Props:

| Prop | Tipo | Default | Descripción | | ---------- | --------------- | ------- | ---------------------------------------------------------------------- | | data | TemplateData | — | Árbol del menú como objeto (recomendado para Angular, React, Vue). | | dataJson | string (JSON) | '{}' | Mismo árbol como string JSON (para uso con atributos HTML / Astro). |

Usa uno u otro — son equivalentes.

Theming y branding del negocio

El componente es responsable de su propia estética: colores, tipografía y micro-interacciones viven dentro del Web Component (variables CSS internas como --veleta-primary, --veleta-bg, etc.). El consumidor no envía datos del negocio, theme ni configuración de plantilla — sólo el árbol del menú. Para sobreescribir colores puntualmente:

veleta-default-template {
  --veleta-primary: #b91c1c;
  --veleta-bg: #fffaf0;
}

Shape de TemplateData:

interface TemplateData {
  menu: {
    id: string;
    businessId: string;
    name: string;
    slug: string;
    active: boolean;
    description?: string;
    photoUrl?: string;        // hero opcional
    createdAt: string;        // ISO
    updatedAt: string;        // ISO
    sections: Array<{
      id: string;
      menuId: string;
      title: string;
      order: number;
      description?: string;
      createdAt: string;      // ISO
      updatedAt: string;      // ISO
      dishes: Array<{
        id: string;
        name: string;
        price: number;
        available: boolean;   // los `available: false` no se renderizan
        order: number;
        description?: string;
      }>;
    }>;
  };
}

sections y dishes deben llegar ya ordenados por order desde el backend. Los platos con available === false se omiten de la vista pública.

Compatibilidad: el componente acepta temporalmente el payload plano legacy ({ menu, sections, business?, config?, templateData? }) y lo normaliza al nuevo shape, ignorando business / config / templateData. Emite un console.warn una vez por carga.

Scripts Disponibles

npm run build - Construye el proyecto para producción
npm run start - Inicia el servidor de desarrollo con hot-reload
npm test - Ejecuta los tests
npm run test.watch - Ejecuta los tests en modo watch
npm run generate - Genera un nuevo componente

Configuración

Tailwind CSS

El proyecto está configurado para usar Tailwind CSS dentro de los componentes Stencil. Las clases de Tailwind se pueden usar directamente en el JSX de los componentes.

PostCSS

PostCSS está configurado con:

Tailwind CSS
Autoprefixer (para compatibilidad con navegadores)

TypeScript

TypeScript está configurado con:

Decoradores experimentales habilitados
JSX configurado para Stencil
Tipos estrictos

Compatibilidad

Este proyecto es compatible con:

✅ Astro
✅ Ionic Angular
✅ Web Components puros (Vanilla JS)
✅ React (usando Web Components)
✅ Vue (usando Web Components)
✅ Cualquier framework que soporte Web Components

Licencia

MIT