Configuración librería UI Design System

Esta librería funciona como un repositorio centralizado de componentes, permitiendo compartir y reutilizar elementos visuales de manera consistente en todas las aplicaciones. Al mantener un sistema de diseño unificado, garantiza la coherencia visual y mejora la eficiencia del desarrollo, reduciendo la duplicación de código y simplificando el mantenimiento de la interfaz de usuario.

Uso

Para comenzar, sigue estos pasos:

Crea un archivo .npmrc en la raíz del proyecto, el cual va a contener la configuración para instalación de la librería alojada en Nexus Repository.

    registry=https://registry.npmjs.org/
    //10.1.40.130:8081/repository/npm-hosted/:_auth=AUTH_TOKEN
    always-auth=true

Agregue la dependencia al archivo package.json en el bloque “dependencies” (Recuerde verificar la versión actual de la librería) e instale las dependencias.

   "design-system": "http://10.1.40.130:8081/repository/npm-hosted/design-system/-/design-system-0.0.1.tgz"

Para utilizar los componentes de la librería, deberá importarlos en el componente o módulo donde planee implementarlos. Puede realizar la importación de componentes individuales o múltiples según sus necesidades de desarrollo.

     import { ListTableComponent } from 'design-system';

     @Component({
       selector: 'app-payment-orders-list',
       standalone: true,
       imports: [ListTableComponent],
       templateUrl: './payment-orders-list.component.html',
       styleUrl: './payment-orders-list.component.scss'
     })

Nota: Asegúrese de que la librería esté correctamente instalada y configurada en el proyecto antes de realizar las importaciones.

Para implementar los componentes en el template, utilice los selectores específicos documentados para cada componente. Cada selector acepta diferentes parámetros y propiedades que puede configurar según las necesidades.

    <lib-ada-list-table [configTable]="tableConfig" [tableHeaderColumns]="columns" [dataTable]="testData"  />

Nota: Para un uso correcto de los tipos de datos, puede importar las interfaces correspondientes desde la librería.

   import { ListTableComponent, ConfigTable, TableListColumns } from 'design-system';

Para más detalles sobre los parámetros disponibles y su implementación, consulte la documentación específica de cada componente.

Componentes

Componentes Generales

Componentes de formulario

Versiones

Versión	Fecha de despliegue	Descripción
design-system-1.0.0.tgz	07/02/2025	Se realiza el despliegue de la primera versión de la librería.

←Regresar