Cumplo UI Kit 🧰🔨

UI Component Library Kit - Cumplo

Bienvenido al Kit Digital de Cumplo. Esta librería está basada en Material UI y contiene componentes creados con la metodología de Atomic Design.

Para la creación de esta librería se ha utilizado la suma de los distintos conocimientos adquiridos por desarrolladores de Cumplo a nivel de frontend, por lo que para entender a profundidad como se desarrollan componentes en esta librería es necesario revisar nuestra sección de Articulos Reelevantes

Documentación 📚

https://branding.cumplo.cl

Instalación 📁

npm install --save cumplo-ui-kit

Archivos del Proyecto

.
├── example
├── src
      ├── assets
      ├── atoms
      ├── layout
      ├── molecules
      ├── organisms
      ├── themes
      ├── utils
├── .editorconfig
├── .eslingignore
├── .eslintrc
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── .jsconfig.json
├── package.json
└── README.md

1. /example: Contiene el proyecto ejemplo el cual es usado para desarrollar y probar componentes.
2. /src: Contiene los componentes y sus respectivas configuraciones
3. /src/assets: Contiene archivos como las fuentes, imagenes, svg, etc.
4. /src/atoms: Contiene los componentes tipo átomo
5. /src/layouts: Contiene los layouts
6. /src/molecules: Contiene los componentes tipo molécula
7. /src/organisms: Contiene los componentes tipo organismo
8. /src/themes: Contiene la configuración de tema de Material UI
9. /src/utils: Contiene funciones reutilizadas en componentes

Uso de la Librería

Para el uso de la librería es necesario utilizar el ThemeProvider, para así darle el contexto y estilos de Cumplo a los componentes. Es importante destacar que este ThemeProvider sobreescribira cualquier otro tema de Material UI que esté en el proyecto.

import React from "react";
import { ThemeProvider, Button, Layout } from "cumplo-ui-kit";
const App = () => {
  return (
    <ThemeProvider>
      <Layout>
        <Button>Hello world</Button>
      </Layout>
    </ThemeProvider>
  );
};
export default App;

Desarrollo de Componentes

Los componentes de esta librería son compilados desde el 'src/index.js', encargandose así de generar la carpeta 'dist' la cual contiene el código que se instala desde npm.

Para subir un nuevo componente a esta librería es necesario crear un nuevo branch hacía la rama devel con el formato component/new_component_name . Además deberá cumplir con el "Component Checklist" y en caso de ser aprobado esté será incluido y documentado en el proyecto front-branding para el siguiente release.

1. Modo desarrollo componentes

Watchmode de nuestros componentes, aquí escucharan los cambios realizados en la carpeta 'src'

npm run start

2. Uso de componentes

Acá podrás usar los componentes ya compilados que vayas desarrollando

cd example
npm run start

Checklist para nuevo componente:

• ✔️ Es el componente utilizado en dos o más proyectos, ó lo será en el futuro ?
• ✔️ Es el componente libre de lógica de negocio ?
• ✔️ Sigue el consenso de estandarización ?

Articulos Reelevantes 📰

• Atomic Design

Contribuyentes 🙋

Cumplinos que han sido parte del desarrollo de esta librería:

• Jorge Naranjo
• Joaquín Alegre
• Christopher Troc
• Matías Agustín Bustos
• Jauregui Crespo

License

All Rights Reserved © cumplo