CECOC UI Kit

CECOC UI Kit es una biblioteca comprensiva y reutilizable de componentes React, que mejora la consistencia de la interfaz de usuario y acelera el desarrollo dentro de CECOC. Es compatibe con JavaScript y TypeScript.

🚀 Instalación

Para instalar la librería, será necesario configurar el archivo .npmrc de nuestro equipo para que cuando se instalen las dependencias, npm sepa que esta librería se encuentra alojada en artifactory. Este paso solo hay que hacerlo una vez, y habrá que seguir los siguientes pasos:

1. Copiar y pegar el siguiente código en el archivo ~/.npmrc (en Windows %USERPROFILE%/.npmrc). De esta forma, npm tiene acceso desde cualquiera de los proyectos al repositorio de artefactos de JFrog (donde se encuentra nuestra librería @cecoc/ui-kit:

   @cecoc:registry=https://articloudpro.jfrog.io/artifactory/api/npm/construccion-npm-deploy/
   //articloudpro.jfrog.io/artifactory/api/npm/construccion-npm-deploy/:_authToken=<TOKEN>
   https://registry.npmjs.org/

2. Ahora hay que sustituir <TOKEN> por el token de autenticación. Para ello debes acceder a https://articloudpro.jfrog.io/ui/repos/tree/General/construccion-npm.
3. Pulsar en el botón Set me up
4. Hacer clic en Generate token & Create Instructions
5. Copiar el token generado y sustituirlo en <TOKEN> del archivo ~/.npmrc
6. Guarda los cambios y abre tu proyecto con vscode
7. Instalar la librería ejecutando el comando npm install @cecoc/ui-kit
8. 🥳 Y ya puedes usar la libraría en tus proyectos 🥳

📦 Dependencias

Asegúrate de tener las siguientes dependencias en tu proyecto:

• react y react-dom versión ^18.2.0.

Esta librería tiene dependencias con otras librerías externas como AntDesign o Material UI.

💼 Uso

Para usar cualquier componente de @cecoc/ui-kit, simplemente impórtalo en tu archivo:

import React from 'react'
import { Button } from '@cecoc/ui-kit'

export const Home = () => {
  return <Button>Esto es un botón</Button>
}

📚 Documentación

Todos los componentes de la librería están documentados en StoryBook. Puedes acceder desde: https://docuhub.cecoc.dev/ y haciendo click en UI kit Storybook.

⚠️ IMPORTANTE ⚠️ Es posible que no tengas permisos para acceder al docuhub o no aparezca el acceso a StoryBook. Consulta con el administrador si fuese necesario.

🧪 Pruebas

Para ejecutar las pruebas:

npm run test

Si quieres ejecutar un archivo de test en concreto, escribe lo siguiente:

npm test ./Button.spec.tsx

🌐 Contribuciones

Para cualquier contribución que desees hacer, crea una rama nueva siguiendo GitFlow (creando una rama feature/<nombre_de_la_rama> partiendo desde develop) y haz una Pull Request cuando termines.

Es importante que puedas visualizar tus cambios en tiempo real mientras haces tus desarrollos en la librería, para ello nosotros usamos npm link, un comando que permite hacer un "bypass" en tu proyecto y consumir la librería en local mediante un enlace simbólico (o acceso directo). Es muy sencillo de utilizar, sigue los siguientes pasos:

1. Clona este proyecto en tu equipo
2. Ejecuta npm install en la raiz del este proyecto
3. Abre un segundo proyecto en local, que será el que consuma la librería y donde puedas visualizar los cambios (por ejemplo Backoffice, APP de obra o el proyecto base)
4. En la librería, ejecuta el comando npm link, esto "liberará" la librería para que pueda ser consumida por otro proyecto en local
5. En el proyecto que consume la librería, ejecuta el comando npm link @cecoc/ui-kit
6. De esta forma, tu proyecto está consumiendo de la librería en local. Cada vez que hagas un cambio en la librería, es necesario que la compiles ejecutando npm run build y de esa forma podrás ver los cambios en tiempo real.
7. Si en algún momento necesitas eliminar el enlace del proyecto que consume la librería, ejecuta npm unlink @cecoc/ui-kit

Una vez ya tienes todo el desarrollo hecho, antes de hacer la PR, ejecuta los tests para comprobar que todo funciona correctamente y no has roto nada. También haz una limpieza del código y pasa el ESlint y Prettier para comprobar si hay algo que no esté correcto. Es vital que también compilar el proyecto en local para verificar que no hay errores de compilación.

En cuanto a las tags o el versionado, no tienes de qué preocuparte, eso lo gestiona automáticamente la pipeline después de hacer la PR. Solo debes hacer los commits siguiendo Conventional Commits, tal y como se define después.

🤖 Política de versionado

Para garantizar la coherencia y previsibilidad en el uso de "CECOC UI Kit", adoptamos una política de versionado basada en el esquema SemVer (Versionado Semántico). El versionado se genera automáticamente, por lo que no es necesario que el desarrollador intervenga. Esta sección describe cómo gestionamos y lanzamos nuevas versiones.

Esquema de Versionado Semántico (SemVer)

El esquema de versionado se representa con tres números separados por puntos: MAJOR.MINOR.PATCH

1. MAJOR: Incrementado cuando hay cambios incompatibles que requieren que el usuario cambie algo acerca de su configuración o cuando se ha eliminado un componente obsoleto, es decir, que ya no recibe soporte.

2. MINOR: Incrementado cuando se añaden nuevos componentes o nuevas características de una manera compatible hacia atrás.

3. PATCH: Incrementado con correcciones de errores compatibles hacia atrás.

⬆️ Commits Convencionales

Adoptamos la convención de Conventional Commits para nuestros mensajes de commit. Esto nos facilita la generación de changelogs automáticos y el manejo de la versión semántica.

Un commit convencional debe tener un encabezado que incluya un tipo, un ámbito opcional y un mensaje descriptivo. Por ejemplo:

feat(auth): implementar la autenticación basada en tokens

• feat(auth): feat es el tipo de comit (feat, fix, docs, style, refactor, test, chore) y auth es el ámbito del commit, aunque esto es opcional

• implementar la autenticación basada en tokens: Resumen/mensaje del commit

Los tipos principales son:

• feat: Una nueva característica para el usuario.
• fix: Corrección de un error para el usuario.
• docs: Cambios en la documentación.
• style: Cambios que no afectan el significado del código (espacios, formato, etc.).
• refactor: Cambio de código que ni corrige un error ni añade una característica.
• test: Adición de pruebas o correcciones en las existentes.
• chore: Cambios en el proceso de construcción o herramientas auxiliares y bibliotecas.

Antes de contribuir al proyecto, por favor asegúrate de estar familiarizado con estos lineamientos.

⚙️ Build

Si deseas compilar el proyecto por ti mismo:

npm run build

📩 Contacto

Si necesitas más información o tienes alguna duda, contacta con el ⚔️👨‍💻 Equipo de Frontend 👨‍💻⚔️.