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 |