CONTRATOS / PRIMER PILOTO
Guía de uso
Cómo construir y revisar los componentes sin depender de Holbran.
Un repositorio para la biblioteca
Los tokens, componentes, ejemplos y documentación viven en holbran-ui. La galería renderiza los mismos componentes Cotton que contiene el paquete.
- Modificar el token o componente en el repositorio UI.
- Generar la galería y revisar variantes y estados.
- Ejecutar pruebas y verificar el wheel aislado.
- Abrir un pull request y obtener una revisión para main.
- Tras la aprobación, publicar la galería privada desde main.
Esta etapa no añade la dependencia a Holbran ni cambia sus pantallas.
Contrato del piloto
- F1: formulario sencillo, campos y acciones.
- L1: listado sencillo, tabla, búsqueda, estados y paginación visual.
- F2: secciones, unidades, resumen y estados del formulario.
- L2: contexto operativo, importes, revisión y filtros visibles.
- R2: panel modal, borrador/aplicación, criterios y teclado.
- Consumidor: datos, permisos, validación de negocio, consultas, URLs y guardado.
- Galería: datos ficticios y simulaciones sin persistencia.
Los selects de esta versión son nativos. Selectores enriquecidos y adopción en la aplicación quedan para etapas posteriores.
Composición con Cotton
Ejemplo del contrato de componentes; no es una instrucción para instalarlo en Holbran.
<c-hui.panel>
<c-hui.form-errors :form="form" />
<c-hui.form-field :field="form.code" />
<c-hui.form-field :field="form.name" />
<c-hui.form-actions>
<c-hui.button type="submit">Guardar</c-hui.button>
</c-hui.form-actions>
</c-hui.panel>El formulario del consumidor se prepara con holbran_ui.forms.style_form. Para F2 se usa <c-hui.form-layout variant="sectioned"> con slots summary y actions; las unidades se vinculan con style_form(form, units={"amount": "USD"}). Para L2 se combina <c-hui.list variant="operational"> con context-bar y data-table density="operational". La biblioteca no conoce modelos ni servicios del dominio.
R2 · Biblioteca y consumidor
La biblioteca abre el panel, contiene el foco, conserva un borrador y devuelve el foco al cerrar. El consumidor aporta campos, valores aplicados, errores, URLs y resultados autorizados.
Aplicar solo confirma los valores tras un resultado válido. Cancelar, Escape o el fondo descarta el borrador. Limpiar y quitar criterios usan URLs del consumidor y conservan la búsqueda y el contexto.
R2 · Inicialización explícita
Importar initFilterDrawers desde holbran_ui/components.js e inicializar la región. La función se puede repetir tras reemplazos parciales sin duplicar listeners; destruir el controlador antes de retirar su diálogo. Requiere un navegador con dialog.showModal.
El Catálogo de ejemplo usa 24 productos ficticios y filtrado local; no es la implementación ni el backend del Catálogo de Holbran.
Revisar Catálogo R2 →