UI Library (@c80/ui)

Librería de componentes de interfaz de usuario reutilizables para Angular, diseñada para acelerar el desarrollo de aplicaciones con una experiencia visual consistente y componentes listos para producción.

Componentes incluidos

c80-icon

Componente para mostrar íconos SVG personalizables, con soporte para distintos tipos, colores, tamaños y modo botón.

Props principales:

• icon: 'check' | 'cancel' | 'edit' | 'delete' | 'add' (ícono a mostrar)
• color: 'primary' | 'secondary' | 'warn' (color del ícono)
• size: number (escala del ícono, por defecto 1)
• button: boolean (si es true, renderiza como botón nativo)
• disabled: boolean (deshabilita el ícono/botón)
• type: 'button' | 'submit' | 'reset' (tipo de botón si aplica)
• iconClick: EventEmitter<Event> (emite evento al hacer click si es botón)

Ejemplos:

<c80-icon icon="check"></c80-icon>
<c80-icon icon="delete" color="warn" [button]="true" (iconClick)="onDelete()"></c80-icon>
<c80-icon icon="add" [size]="2"></c80-icon>

c80-table

Componente de tabla editable y dinámica, con soporte para operaciones CRUD, definición de columnas, edición en línea y acciones integradas. Ahora desacoplado: recibe los datos como observable y emite eventos para las acciones.

Props principales:

• data$: Observable<T[]> (observable con los datos a mostrar)
• columns: C80TableColDef[] (definición de columnas: accessor, label, tipo, visible)
• create: EventEmitter<Partial<T>> (emite al crear una fila)
• update: EventEmitter<{ id: number, changes: Partial<T> }> (emite al editar una fila)
• delete: EventEmitter<number> (emite al borrar una fila)
• errorEvent: EventEmitter<string> (emite errores de operación)

Definición de columna:

interface C80TableColDef {
  accessor: string;
  label: string;
  visible?: boolean;
  type?: 'string' | 'number' | 'boolean';
}

Ejemplo de uso:

<c80-table
  [data$]="users$"
  [columns]="userColumns"
  (create)="onCreate($event)"
  (update)="onUpdate($event)"
  (delete)="onDelete($event)"
  (errorEvent)="onError($event)"></c80-table>

userColumns = [
  { accessor: 'id', label: 'ID', type: 'number', visible: false },
  { accessor: 'name', label: 'Nombre', type: 'string' },
  { accessor: 'active', label: 'Activo', type: 'boolean' }
];

users$: Observable<User[]> = this.userService.getAll();

onCreate(row: Partial<User>) {
  // Lógica para crear usuario
}
onUpdate(evt: { id: number, changes: Partial<User> }) {
  // Lógica para actualizar usuario
}
onDelete(id: number) {
  // Lógica para borrar usuario
}

Instalación y uso

Esta librería está pensada para ser utilizada dentro del monorepo Nx. Para usar los componentes, impórtalos directamente:

import { C80IconComponent, C80TableComponent } from '@c80/ui';

Estructura del proyecto

• src/lib/icon/: Componente de íconos (c80-icon)
• src/lib/table/: Componente de tablas (c80-table)
• src/index.ts: Punto de entrada público de la librería

Publicación y visualización en npm

Una vez publicada, la librería puede consultarse en: https://www.npmjs.com/package/@c80/ui

Desarrollo y contribución

1. Clona el repositorio y navega a libs/ui.
2. Realiza los cambios necesarios en los componentes o estilos.
3. Ejecuta pruebas y build local:

   pnpm nx test ui
   pnpm nx build ui

4. Realiza un PR siguiendo las convenciones del repositorio.

Contacto y soporte

Para reportar errores, solicitar funcionalidades o recibir soporte, utiliza el sistema de issues del repositorio o contacta al equipo de desarrollo.

© 2025 c80. Todos los derechos reservados.

1. Clona el repositorio y navega a la carpeta libs/ui.
2. Realiza los cambios necesarios en los componentes o estilos.
3. Ejecuta las pruebas y la build local:

   pnpm nx test ui
   pnpm nx build ui

4. Realiza un PR siguiendo las convenciones del repositorio.

Publicación y visualización en npm

Esta librería puede ser publicada y visualizada en el registro de npm para su distribución y consulta pública. Una vez publicada, puedes encontrarla buscando el nombre del paquete en npmjs.com:

https://www.npmjs.com/package/@c80/ui

Desde la página de npm podrás consultar la documentación, versiones, dependencias y descargar el paquete para su uso externo si así se habilita.

Contacto y soporte

Para reportar errores, solicitar nuevas funcionalidades o recibir soporte, utiliza el sistema de issues del repositorio o contacta al equipo de desarrollo.

© 2025 c80. Todos los derechos reservados.