This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@eclass/ui-eclass-v8

@eclass/ui-eclass

ui-eclass es una librería de componentes que se ajusta a los estilos de diseño de Eclass.

Creada con ReactJs y Storybook más que una librería de componentes es un sistema de diseño creado en un entorno aislado de su aplicación que busca estandarizar los componentes utilizados en distintas plataformas de eClass.

Instalación

• Instalar con npm o yarn:

$ npm i ui-eclass

$ yarn add ui-eclass

Uso

Ejemplos:

import React from 'react';
import V8Button from 'ui-eclass/V8Button';

const App = () => (
    <V8Button onClick={() => console.log('thanks for clicking :)')}>
      Click me!
    </V8Button>
);

Desarrollo de componentes

instalar dependencias npm i yarn i

iniciar React Storybook

yarn develop

Abrir http://localhost:9009

Test

yarn test

Estructura de componentes

└──  ui-eclass
    ├── storybook
    └── src
    │   ├── components
    │   │   ├── Button /#raíz
    │   │   │  ├── Button.js /#lógica
    │   │   │  ├── Button.stories.js /#historias storybook
    │   │   ├── MyNewComponent
    │   │   │  ├── Button.js
    │   │   │  ├── Button.stories.js

Proptypes

Deben detallarse los proptypes para reflejarlo en la vista de documentación

Uso de Ramas

• master: código en el ambiente de producción. Todo código que esté acá está publicado y funcional. Además de validado por los test.
• dev: Esta rama es una de preproducción, en donde el código antes de ir a master debe ser publicado y aprobado.
• Es muy importante importante es que cada feat/fix/refactor del sistema que se vaya a crear/modificar. Debe estar contenido por una rama en donde se identifique al usuario y el feature. Ejemplo: feat/login.

Commits

Para versionar nuestro código debemos respetar el estándar de Nuestro código se versiona con el estandar de Semantic Commit Messages al hacer un git commit se ejecutarán las siguientes tareas previas al commit

❯ Running tasks for src/**/*.js
   ✔ eslint --fix
   ⠼ prettier-standard
     git add
 ↓ Running tasks for src/**/*.test.js [skipped]
   → No staged files match src/**/*.test.js
   ⠧ eslint --fix
   ⠧ prettier-standard
   ⠧ git add

Se corre el eslint a los archivos y se pasan por prettier. Luego si corren estas tareas se pasa al commit.

Estándar de commit semánticos

type(scope?): subject
body?
footer?

El encabezado del commit no debe tener más de 72 caracteres.

• type es obligatorio, más abajo podrás encontrar el estándar de sus posibles opciones y usos.
• scope es opcional, pero la forma correcta de escribirlo es siempre en Inglés usando lowerCamelCase. Además debe hacer referencia al cambio realizado.
• subject es obligatorio, es el encabezado del commit, debe ir en Español indicando en resúmen el porqué del commit.

Listado de type's

type	descripción
feat	Nueva característica
fix	Solución a errores
docs	Sólo cambios en documentacion
style	Cambios que no afectan el código, por ejemplo: espacios en blanco, formato, puntuaciones, comas, etc.
refactor	Un cambio de código que no corrije un error ni agrega una nueva característica
perf	Un cambio de código que mejora el performance de la aplicación
test	Agrega test nuevos o corrije alguno existente.
build	Cambios que afectan al deploy de la aplicación o dependencias externas
ci	Cambios en la configuración de la integración continua.
chore	Otros cambios que no modifiquen el src o archivos de test
revert	Revierte cambios a un estado anterior en los commit.

Ejemplo

• Acabamos de añadir una acción que nos trae los paises ordenados por su nombre de forma ascendente a-Z.

feat(actions): Agregamos acción para rescatar los paises ordenados por nombre ascendente
^--^  ^------------^
|     |
|     └─> Resúmen del cambio en tiempo presente
|
└───────> Types: chore, docs, feat, fix, refactor, style, or test.

License

MIT