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

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.

• Estructura página
• List Table → Tabla de Listado de datos
• Layout Modal → Contenedor Modal
• Loader → Indicador de Carga
• Menu Bar → Barra de Navegación
• Title Page → Encabezado de Página
• Button → Botones de acciones

• Estructura formulario
• Form Item → Contenedor item de formulario
• Input Field (Text) → Campo de texto
• Input Field (Button) → Campo con botón
• Input Field (Dropdown) → Campo de selección desplegable
• Input Field (Date) → Campo de selección de fecha
• Input Field (Upload) → Campo de subida de archivos
• Input Field (Mask) → Campo con máscara
• Input Field (Checkbox) → Campo de casilla de verificación
• Input Field (RadioButton) → Campo de casilla de selección
• Textarea → Área de texto

←Regresar