@ussebastian/kitdigital-react

Librería en React del Kit Digital USS

Esta librería es una implementación de los componentes del Kit Digital de la Universidad San Sebastián (USS). Son una encapsulación de los componentes del kit USS en Vanilla JS.

Instalación

yarn add @ussebastian/kitdigital-react@beta
# o
npm i @ussebastian/kitdigital-react@beta

Nota:

El tag @beta es para versiones en desarrollo, no para versiones estables.

Importación

Todos los estilos del kit digital USS se deben importar el archivo CSS del kit base.

CSS

@import "@ussebastian/kitdigital/dist/css/main.css";

Se debe cargar el archivo css en el framework o proyecto que se esté usando.

JS

import { Button, Icon } from "@ussebastian/kitdigital-react";

todos los componentes se encuentran exportan desde el mismo archivo, por lo que se pueden importar de forma global.

Servidor de Desarrollo

Para usar el servidor de desarrollo, se debe ejecutar el siguiente comando:

npm run dev

Esto iniciará un servidor de desarrollo en http://localhost:5173 donde se listarán todos los ejemplos de los componentes desarrollados. hasta ahora.

Ejemplo para Next.js

// in pages/_app.js

import "@ussebastian/kitdigital/dist/css/main.css";

Comandos disponibles

# levanta servidor de desarrollo, donde se pueden ver los ejemplos
npm run dev

# Esto ejecuta todos los comandos de building, css, hmtl, js
npm run build

# construye el sitio de ejemplos de manera estática
npm run build:site

Sobre los Ejemplos

Sirven como referencia en el sitio de documentación. Es importante que los ejemplos se muestren tal como los vería un usuario final. Para ello, hemos implementado un formato que oculta la importación relativa de los componentes en el repositorio y la reemplaza por la forma correcta al importar desde la librería.

Comentarios

Los ejemplos no deben tener comentarios en la misma línea, ya que estos se descomentan para mostrar código no ejecutable, como las importaciones de componentes, en la documentación. La importación real de los componentes se envuelve en comentarios de la siguiente manera:

/* remove start */
import { Icon } from "../components/Icon/Icon";
import { Button } from "../components/Button/Button";
/* remove end */

Todo lo que esté dentro de /* remove start */ y /* remove end */ se eliminará del ejemplo de código. Todos los comentarios con // se descomentarán, por lo que solo se debe comentar código de la siguiente manera: /* así */.

Quedando los ejemplos de la siguiente manera:

// import { Button, Icon } from "@ussebastian/kitdigital-react";
/* remove start */
import { Icon } from "../components/Icon/Icon";
import { Button } from "../components/Button/Button";
/* remove end */

para que en el sitio de documentación se muestre el siguiente código:

import { Button, Icon } from "@ussebastian/kitdigital-react";

Changelog

v0.15.0

Descripción general:

Esta versión se centra en organizar y depurar los ejemplos de componentes para alinearlos con el kit base, distribuyéndolos para evitar sobrecargar cada ejemplo. Estos ejemplos se utilizarán en el sitio de documentación, y esta organización mejorará su legibilidad. Además, se han enriquecido componentes como Button y CarouselHero con nuevas propiedades y funcionalidades para cubrir necesidades previamente no atendidas.

Esta versión aún no incluye todos los componentes del kit USS. La sección TODO ha sido actualizada para reflejar los cambios y tareas pendientes.

Cambios de implementación:

Button:

• prop float fue eliminado, delegamos el posinamiento de los botones al usuario, en lugar de ser un prop del componente.

• prop variant tuvo los siguientes cambios (Ejemplos disponibles):

  • icon fue agregado para la variante de botón con solo icono (Button2.tsx).
  • icon-sm fue agregado para la variante de botón con solo icono y tamaño pequeño (Button2.tsx).
  • full-width fue agregado para la variante 'full-width' del botón (Button3.tsx).
  • slide-prev fue agregado para la variante 'slide-prev' del botón. se usa para botones de navegación (Button4.tsx).
  • slide-next fue agregado para la variante 'slide-next' del botón. se usa para botones de navegación (Button4.tsx).
  • themeToggle fue eliminado, se debe construir el boton con la variante icon y el icono ri-sun-line y ri-moon-line (Button5.tsx).

• prop sizefue modificado, para mantener la consistencia con el resto de props de tamaños, paso de aceptar small | undefined a sm | undefined (Button6.tsx).

CarouselHero:

• prop loop fue agregado para la propiedad loop del componente (CarouselHero.tsx).

Pagination

Se dejó de implementar la "paginación automática", o que el componente se configurara automáticamente con base en 3 props, debido a que la implementación estaba incompleta. Creemos que es mejor mantener el componente simple y limpio en esta primera instancia.

Las siguientes propiedades fueron eliminadas del componente Pagination (components/Pagination.tsx):

• pages: Esta propiedad fue eliminada.
• currentPage: Esta propiedad fue eliminada.
• onChange: Esta propiedad fue eliminada.

Table

• prop size fue agregado para la propiedad size del componente (Table.tsx).
• prop stripes fue agregado para la propiedad stripes del componente (Table.tsx).
• prop stripesOdd fue agregado para la propiedad stripesOdd del componente (Table.tsx).

TableCell & TableHeaderCell

• prop align fue agregado para dar soporte a las alineaciones de las celdas (Table.tsx).

Tag

• prop isFilter fue agregado para dar soporte a la propiedad al filter tag del Kit base (Tag3.tsx).

Tooltip

• prop delay fue eliminado, se deja el valor por defecto del kit base 350ms (Tooltip.tsx).
• prop offset fue eliminado, se deja el valor por defecto del kit base 12px (Tooltip.tsx).

TODOs

• [x] Organizar ejemplos de componentes (para el sitio de documentación)
• [ ] Corregir el build:site
• [ ] Implementacion del Footer
• [ ] Implementacion del Header
• [ ] Implementacion del CarouselContent
• [ ] Implementacion del _Nav component