creditu-design-system

creditu-design-system

Este repositorio es una librería que se encuentra publicada en https://www.npmjs.com/package/creditu-design-system, la cual sirve de base para construir nuestro design system en los nuevos repositorios de frontend que vayamos construyendo en Vue 3. De cara a los repositorios ya existentes con Vue 2, esta librería no es compatible, pero sirve como una guía de diseño para que te puedas orientar en el uso de los estilos de componentes que utilizamos en nuestro producto digital.

Pasos y pre-requisitos para levantar el repo en local

• Descarga el repo
• Instala node 16. Si usas nvm, ejecuta el comando nvm use 16
• Instala node con npm install
• Levanta storybook con npm run storybook

Pasos para usarlo como librería

Para usar este repositorio como librería en otra aplicación Vue 3 compatible, sigue los siguientes pasos:

• En tu repositorio ejecuta el comando npm i creditu-design-system@latest
• En el archivo main de tu aplicación declara globalmente la librería:

   // @ts-ignore
   import CredituDesignSystem from 'creditu-design-system'
   import 'creditu-design-system/dist/style.css'
   const app = createApp(App)
   app.use(CredituDesignSystem)
  

• En el archivo .vue donde desees importar el componente, en el template declaralo de la siguiente manera:

  <CrediButton label="Creditú" backgroundColor="primary" iconLeft="fa fa-solid fa-code">
  

Creación de nuevos componentes

Para crear nuevos componentes y publicarlos lee este artículo en nuestra wiki aquí.