@jfdev/webcomps-storybook v0.7.5

Sistema de Componentes (SFC)

Sistema normalizado basado en componentes.

Prefacio

La misión principal de este proyecto es el crear un sistema de normalizado basado en componentes que agilice la construcción de aplicativos digitales y facilite la transformación, evolución y mejora continua de la compañía.

Nos apoyamos en el framework javascript Vue.js y en la herramienta de desarrollo de componentes UI Storybook.

Información detallada sobre la mision, arquetipo, objetivos y alcances, fases, guia de diseño y desarrollo, entre otras cosas puede ser encontrada aqui: http://confluence.es.wcorp.carrefour.com/pages/viewpage.action?pageId=39227626

Prerrequisitos

Tener instalado el NVM (Node Version Manager) (https://github.com/creationix/nvm), para el proyecto se debe instalar a partir de la versión 8.9+ (8.11.0+ recomendada) de nvm, con el se instalara el NPM (Node Package Manager), asegurarse que se encuentre en la versión 3+ para obtener un mejor árbol de dependencias.

Para empezar

Ejecutar el siguiente comando en tu consola: npm run storybook para inicializar el proyecto de documentación de componentes en el puerto: 6006, este comando preparara el entorno del proyecto y abrirá su explorador por defecto en la dirección: http://localhost:6006.

Instalaciones

Después de clonar el proyecto y de tener la versión inidicada de nvm, debes ejecutar el siguiente comando en tu consola para instalar las dependencias del proyecto:

npm install

¿Cómo funciona?

La idea principal es que el usuario pueda incorporar cada unos de los componentes en su vista de manera individual y sin dependencias.

Dentro de la carpeta de componentes verá que cada componente tiene la siguiente estructura de carpeta (componente botón como ejemplo):

button /
| - src /
    | - Button.vue /
    | - style.scss /
| - stories /
    | - Button.stories.js
    | - Template.vue
| - CHANGELOG.md
| - README.md

• src: el corazón del components, en esta carpeta encontrará el componente vue y el archivo index.js con su configuración de exportación.
• stories: archivo de configuración para storybook sobre este componente y el template a mostrar.

Producción

Ejecutar el siguiente comando en tu consola: npm run build, este generara una carpeta llamada dist en el directorio raíz del proyecto. En esta carpeta se encuentra todo la libreria de componentes, consta de un archivo de estilos y de multiples archivos js, entre ellos un paquete CommonJS para consumir a través de paquetes y un paquete UMD para consumir directamente en navegadores o con cargadores AMD.

Para compilarlo para producción, solo necesita hacer los siguientes pasos:

1. npm run build
2. npm pack

Esto generara un archivo con extension .tgz, desplace ese archivo al directorio raiz de su proyecto y instalelo como si fuera una dependencia: npm i jfdev-webcomps-storybook.tgz

Los mismos pasos de la instalación, si desea integrar todo el conjunto de componentes, simplemente no olvide de mover el paquete.tgz a la carpeta de paquetes y eliminarlo después de su instalación.

Generador

Para crear la plantilla basica de un componente contamos con la herramienta sg-generator https://github.com/mediamonks/seng-generator, en el archivo .senggenerator se encuentra la configuración inicial de la libreria.

Para generar un componente debemos ejecutar el siguiente comando:

  npx seng-generator component <COMPONENT_NAME>

Ese comando tomará como referencia el template que se encuentra en la ruta ./build/template/component y generará la carpeta con el nombre que se coloque en <COMPONENT_NAME> y la alojará en el directorio ./catalog/components.