design-system-lendaas-com

Este repositorio aloja tres recursos:
2,787
Install
npm install design-system-lendaas-com
Latest Version:0.1.64
Vue:3
License:ISC
Last Updated:Jan 18, 2023
Links: npm
Maintainer: lendaas

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

Version History

Version Released Vue License
0.1.64 ^3.2.37 ISC
0.1.63 ^3.2.37 ISC
0.1.62 ^3.2.37 ISC
0.1.61 ^3.2.37 ISC
0.1.60 ^3.2.37 ISC