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.
- 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
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">
Para crear nuevos componentes y publicarlos lee este artículo en nuestra wiki aquí.