Wiki

Has cargado una revisión vieja del documento! Si la guardas crearás una versión nueva con estos datos.

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

<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 más detalles sobre los parámetros disponibles y su implementación, consulte la documentación específica de cada componente.

===== Componentes =====

=== Componentes Generales  ===
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:estructura-pagina-libreria|Estructura página]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:list-table-component| List Table → Tabla de Listado de datos]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:layout-modal-component| Layout Modal → Contenedor Modal]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:loader-component|Loader → Indicador de Carga]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:menu-bar-component|Menu Bar → Barra de Navegación]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:title-page-component|Title Page → Encabezado de Página]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:button-component|Button → Botones de acciones]]

=== Componentes de formulario ===
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:estructura-formulario|Estructura formulario]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:form-item-component|Form Item → Contenedor item de formulario]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-text-component| Input Field (Text) → Campo de texto]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-button-component|Input Field (Button) → Campo con botón]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-dropdown-component|Input Field (Dropdown) → Campo de selección desplegable]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-date-component|Input Field (Date) → Campo de selección de fecha]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-upload-component|Input Field (Upload) → Campo de subida de archivos]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-mask-component|Input Field (Mask) → Campo con máscara]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-checkbox-component|Input Field (Checkbox) → Campo de casilla de verificación]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-radiobutton-component|Input Field (RadioButton) → Campo de casilla de selección]]
  * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:textarea-component|Textarea → Área de texto]]

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

Resumen de la edición

Wiki

Herramientas de usuario

Herramientas del sitio

Herramientas de la página