Design-system-lendaas-com NPM

design-system-lendaas-com

Este repositorio aloja tres recursos:

a) Una librería de componentes publicada en npm b) Un sitio web que utiliza Storybook y permite navegar/probar los componentes publicados en la librería c) Nuestro CDN

Configurar el repositorio en tu equipo

nvm use
npm i
npm run start

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 design-system-lendaas-com@latest

En el main.ts de tu aplicación registra globalmente la librería:

import LendaasDesignSystem from 'design-system-lendaas-com'
import 'design-system-lendaas-com/dist/style.css'
const app = createApp(App)
app.use(LendaasDesignSystem)

En el .vue donde desees importar el componente, simplemente úsalo:

<LendaasButton label="Lendaas" 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í.

CDN

En este repositorio también gestionamos nuestra Red de Distribución de Contenido (CDN: Content Distribution Network). Nos permite compartir recursos estáticos de uso recurrente a través del dominio cdn.lendaas.com.

Puedes ver el contenido que gestionamos actualmente en la carpeta ./cdn.

Scripts de ejecución

Script	Comando	Descripción
ts-check	vue-tsc --noEmit	Valida que typescript compile correctamente
lib-build	vite build	Construye la biblioteca que será publicada en NPM
preview	vite storybook-static	Sirve storybook a partir del código construido
lint	eslint .	Valida estilo del código usando eslint
storybook-start	start-storybook -p 6006	Sirve la interfaz del design system usando storybook
serve-local-cdn	node ./cdn-local/index.js	Sirve los recursos estáticos del cdn usando express
start	npm-run-all --parallel storybook-start serve-local-cdn	Sirve la interfaz del design system y el cdn
storybook-build	build-storybook	Construye el sitio del design system usando storybook
css-build	node-sass --omit-source-map-url src/sass/mystyles.scss src/css/mystyles.css	Construye el CSS a partir del SASS/SCSS
css-watch	npm run css-build -- --watch	Construye el CSS a partir del SASS/SCSS cada que haya cambios
build-all	npm-run-all --sequential css-build ts-check lib-build	Construye el CSS, valida typescript y construye la librería
test:unit	vitest --environment jsdom	Ejecuta test unitarios usando vitest
test:cov	vitest --environment jsdom --coverage	Ejecuta test unitarios usando vitest con coverage