====== Configuración librería UI Design System ======

[[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]]

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.

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

  * 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.

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

  * 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.

<code>
     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'
     })
</code>

**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.

<code>
    <lib-ada-list-table [configTable]="tableConfig" [tableHeaderColumns]="columns" [dataTable]="testData"  />
</code>
    
**Nota:** Para un uso correcto de los tipos de datos, puede importar las interfaces correspondientes desde la librería.

<code>
   import { ListTableComponent, ConfigTable, TableListColumns } from 'design-system';
</code>

Para obtener información detallada sobre los parámetros disponibles y su implementación, consulte la documentación específica de cada componente. Actualmente existen dos versiones disponibles, debido a que el sistema de diseño fue actualizado durante la migración, resultando en componentes con variantes tanto funcionales como visuales.

==== Componentes versión 1 ====

  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:documentacion-version-1| Documentación versión 1]]

==== Componentes versión 2 (Migración) ====

  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:documentacion-version-2| Documentación versión 2]]


[[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]]

----

//Documento actualizado: 03/03/2025//\\
//Elaborado por: Luis Ardila - Desarrollador frontEnd//