Descripción General de Componentes UI

Biblioteca de componentes pre-construida incluida en cada plugin generado por whatalo init, diseñada para coincidir con la apariencia del admin con soporte automático de tema claro/oscuro.

Los plugins generados con whatalo init incluyen una biblioteca de componentes UI pre-construida ubicada en src/components/whatalo-ui/. Estos componentes están diseñados para coincidir con la apariencia del admin, con soporte automático para tema claro/oscuro y sin dependencias externas.

Sistema de Diseño

La biblioteca utiliza propiedades CSS personalizadas con un prefijo consistente:

Concepto	Detalles
Prefijo de tokens	`--wui-*`
Prefijo de clases	`.wui-*`
Cambio de tema	Atributo `[data-theme="dark"]` en `document.documentElement`
Dependencias	Pure React + CSS — no requiere paquetes externos

Componentes Disponibles

Diecisiete componentes en tres categorías:

Categoría	Componentes
Layout	`Page`, `PageHeader`, `Layout`, `Layout.Section`, `Card`, `Box`, `BlockStack`, `InlineStack`, `Divider`
Contenido	`Text`, `Badge`, `Banner`, `List`, `List.Item`, `Spinner`
Acciones	`Button`, `Link`, `Accordion`

Hooks Disponibles

Hook	Propósito
`useAutoResize()`	Reporta automáticamente la altura del iframe al host del admin
`useThemeSync()`	Sincroniza el tema del admin (claro/oscuro) con tu plugin

Importar Componentes

import {
  Page,
  PageHeader,
  Card,
  Text,
  Button,
  Banner,
  useAutoResize,
  useThemeSync,
} from "./components/whatalo-ui";

Personalización

Estos componentes viven dentro de tu proyecto, no en un paquete npm. Puedes modificar cualquier componente o extender los tokens de diseño libremente. El archivo styles.css contiene todas las definiciones de tokens.

Tokens de Tema

/* Tema claro (predeterminado) */
:root {
  --wui-bg: #ffffff;
  --wui-bg-secondary: #f8f9fa;
  --wui-text: #1a1a2e;
  --wui-text-secondary: #64748b;
  --wui-border: #e2e8f0;
  --wui-primary: #6366f1;
  --wui-radius: 8px;
  --wui-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Tema oscuro — se activa cuando el admin cambia a modo oscuro */
[data-theme="dark"] {
  --wui-bg: #1a1a2e;
  --wui-bg-secondary: #252540;
  --wui-text: #e8e8e8;
  --wui-text-secondary: #94a3b8;
  --wui-border: #334155;
  --wui-primary: #818cf8;
}

Comportamiento del Scroll

El admin gestiona el scroll del contenedor del iframe. El CSS base de tu plugin establece:

html,
body {
  overflow: hidden;
  background: transparent;
}

El fondo de tu plugin hereda del admin. El hook useAutoResize() reporta la altura de tu contenido para que el admin pueda redimensionar el iframe en consecuencia.