saludtools-ui-library v0.1.0
Saluid UI Components Library - Vue 3
@saludtools/ui es una collecion de componentes utilizadas por saludtools.
Explore el catalogo de storybook.
Reglas de estilo de codigo
El proyecto se encuentra configurado con Eslint + Prettier + Stylelint los cuales no permitira seguir una convencion de codigo ya establecida. Para la escritura del codigo se utiliza como lenguaje base TypeSrcipt siguiendo la guia de estilo de JavaScript Standard.
Extensiones recomendadas
Instalación
npm install saludtools-ui
Nota: A futuro cambiara la cuenta a organizacion @saludtools, por lo que el paquete pasara a llamarse @saludtoos/ui
Desarrollo
Para realizar la instalacion de dependencia sugerimos utilizar npm install
Storybook
Puede levantar el servidor de storybook utilizando el siguiente comando:
npm run storybook
El servidor se ejecutara por defecto en el puerto 6006.
Nota: Las configuracion de Storybook fueron modificadas para permitir el uso de Vite el cual mejora los tiempos de carga respecto a Webpack que es el utilizado por defecto.
Generacion de variables y utilerias de CSS apartir de design tokens
Para la generacion de utilerias de CSS se utiliza las reglas establecidas por TailwinCSS 3. Por lo tanto nuestro design tokens tendra una estructura muy parecida (este se encuentra en la raiz del proyecto con el nombre de design-token.json). Para ver las configuraciones permitidas por TailwinCSS puede entrar desde aqui.
Dentro de la carpeta plugins se encuentra una extension personalizada la cual nos permitira extender la funcionalidad de TailwinCSS para poder generar automaticamente apartir de los design tokens la variables y utilerias de CSS necesarias. Para correr este script ejecutamos el siguiente comando.
npm run buid:css
Nota: Este script solo es necesario ejecutarlo en caso de modificar el design-token.json, ya que este genera dentro de la carpeta src/themes dos ficheros, uno con el nombre de varibles.css y el otro con el nombre utilities.css. Esto se encuentra sobre el tracking de git.
Publicar nueva version
Para generar una nueva release es necesario generar la actualizacion de version en el package.json, package-lock.json y tambien agregar un correspondiente tag en git. Para esto ejecutamos los siguientes comandos.
npm version "v0.2.0" -m "Release version %s"
git push && git push --tags
2 years ago