Bluetab Design System

Design System basado en HTML + CSS + JavaScript para Bluetab, con dos objetivos:

• Servir como catálogo local de componentes durante el desarrollo.
• Publicarse como paquete npm reusable en proyectos Phoenix/LiveView.

Scripts

npm install
npm run dev

Catálogo local (Vite):

http://localhost:5173/

Build de paquete publicable:

npm run build:lib

Build del catálogo estático:

npm run build:docs

Salida del catálogo: dist-docs/

Entrypoints del paquete

Este repositorio separa catálogo y librería:

• src/main.js: solo catálogo/documentación local.
• src/lib/index.js: entrada del paquete para consumo externo.
• src/lib/interactions.js: utilidades JS reutilizables.

Salidas principales en dist/:

• dist/bds.css: tokens + estilos de componentes.
• dist/bds.js: entrada principal del paquete.
• dist/interactions.js: subpath de interacciones.

Uso desde aplicaciones consumidoras

Guías para LiveView y otras apps:

• docs/how-to-use-design-system.md — instalación e imports
• docs/integration-patterns.md — layout, grid, código, dialogs, Phoenix

Qué puedes tocar primero

El archivo principal para parametrizar el diseño es:

src/styles/tokens.css

Ahí puedes cambiar:

• Colores de marca
• Tema claro/oscuro
• Tipografía
• Radios
• Sombras
• Espaciados
• Tamaños base

Estructura

src/
├─ main.js
├─ lib/
│  ├─ index.js
│  └─ interactions.js
├─ assets/
│  └─ logo-bluetab.svg
└─ styles/
   ├─ main.css
   ├─ tokens.css
   ├─ reset.css
   ├─ typography.css
   ├─ layout.css
   ├─ utilities.css
   └─ components/
      ├─ navigation.css
      ├─ buttons.css
      ├─ cards.css
      ├─ badges.css
      ├─ forms.css
      ├─ tables.css
      ├─ dialogs.css
      ├─ tabs.css
      ├─ data-viz.css
      ├─ code.css
      └─ feedback.css

Cómo añadir o cambiar componentes

Los ejemplos del catálogo están definidos en:

src/main.js

Busca el array COMPONENTS. Cada componente sigue esta forma:

{
  id: 'buttons',
  group: 'Componentes',
  icon: '▣',
  title: 'Buttons',
  description: '...',
  examples: [
    {
      title: 'Common buttons',
      html: `<button class="bt-button">Primary</button>`
    }
  ]
}

Release y versionado

Flujo recomendado:

1. Actualizar estilos/componentes en este repo.
2. Ejecutar npm run build:lib.
3. Subir versión (npm version patch|minor|major).
4. Publicar (npm publish o registry privado).
5. Actualizar dependencias en proyectos consumidores.

Reglas de versionado (SemVer):

• Patch: fixes sin ruptura.
• Minor: cambios compatibles (nuevos componentes/variantes).
• Major: cambios de ruptura (clases/tokens removidos o renombrados).