1.0.0 • Published 9 months ago

esto-es-una-prueba-ui-components v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
9 months ago

Libreria de Components Help Center

¡Bienvenido! Esta es una biblioteca de componentes de React creada bajo el patron Atomic Design, hemos creado componentes para que puedan ser usados en nuestros diferentes proyectos en el tiempo.

Instalación

npm i @cencosud-ds/lib-ui-components

Además se debe agregar lo siguiente en el archivo .npmrc

@cencosud-ds:registry=https://gitlab.com/api/v4/projects/45737248/packages/npm/
//gitlab.com/api/v4/projects/45737248/packages/npm/:_authToken=${AUTH_TOKEN}

Scripts disponibles

En este proyecto puedes ejecutar:

npm run storybook

Despliega la herramienta de visualización de componentes añadidos a la librería en el puerto 6006.

Más información en Storybook

npm run clean

Ejecuta la herramienta para eliminar el directorio 'dist' de forma recursiva en el sistema de archivos.

npm run build

Elimina el directorio dist generado anteriormente y luego ejecuta el empaquetamiento de la libreria mediante rollup

Más información en Rollup

npm run test-release

Mediante este comando se puede ejecutar el versionador localmente con el uso de un personal token

npm run lint

npm run lint:fix

Comprueba el código en busca de errores y corrige automáticamente.

Más información en ESLint y Stylelint.

npm run format

npm run format:fix

Comprueba el código según un formato y lo aplica automáticamente.

Más información en Prettier.

Convención de Commits

En este proyecto, seguimos una convención de commits para mantener un historial de cambios claro y organizado. Al seguir esta convención, facilitamos la comprensión de los cambios realizados en el proyecto y mejoramos la colaboración entre los miembros del equipo.

Formato del Commit

Cada commit debe seguir el siguiente formato:

  • <tipo>: Indica el propósito o la categoría del cambio. Puede ser uno de los siguientes:
    • feat: Nuevas características o funcionalidades añadidas.
    • fix: Corrección de errores o bugs.
    • docs: Actualizaciones o mejoras en la documentación.
    • chore: Tareas de mantenimiento, actualización de dependencias, configuraciones, etc.

Algunos ejemplos

#<tipo>:<descripcion>
feat: Añadir funcionalidad de inicio de sesión con autenticación JWT
fix: Corregir error de consulta a la base de datos
docs: Actualizar instrucciones de instalación
chore: Actualizar dependencias del proyecto

Recomendaciones

Es necesario hacer un commit con el formato indicado, debido a que el proyecto tiene un validador de formato que no permitira que se agregue un formato diferente para los commits.

Uso en proyectos externos

Para utilizar los componentes de esta biblioteca hay que importar los estilos en un componente, idealmente el principal de tu App.

También es necesario agregar las propiedades en el nodo body del DOM para que se carguen los estilos de acuerdo a la bandera. (A considerar que pueda definirse un elemento distinto en futuras versiones).

// import styles in main Component only
import '@cencosud-ds/hc-lib-ui-components/styles';
<body data-country="cl" data-flag="paris" data-theme="">
  ...
</body>

Los valores disponibles son: | data-country | data-flag | | :----------: | :-------: | | cl | paris | | cl | easy | | cl | jumbo | | cl | sisa | | cl | spid | | pe | wong |

data-theme
vacio
contrast
import { Button } from '@cencosud-ds/lib-ui-components';

const MyComponent = () => {
  return (
    <div>
      <Button> Click me!</Button>
    </div>
  );
};
classnamesexternal-svg-loaderreactreact-dom
@everything-registry/sub-chunk-1617
1.0.0

9 months ago