Introducción al Kit Digital USS React

Instrucciones para el uso de los componentes de react

Esta versión del Kit Digital USS React se creó para facilitar el uso y la distribución de la librería en proyectos de React.

Actualmente no todos los componentes de la versión base están disponibles en la versión de React, se planea agregarlos gradualmente. Cabe mencionar que los componentes de la libreria base igual pueden ser utilizados en proyectos de React, pero la versión de React facilita y norma su uso.

Para instalar la librería de React:

1yarn add @ussebastian/kitdigital-react@latest
2# or
3npm i @ussebastian/kitdigital-react@latest

Importar el componente desestructurando el objeto:

1import { Button } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";

El Kit Digital USS React ofrece dos enfoques diferentes para implementar los componentes, cada uno con sus propias ventajas y casos de uso específicos.

El estilo imperativo utiliza componentes React como subcomponentes anidados, similar a HTML tradicional. Este enfoque ofrece máxima flexibilidad y control granular sobre cada elemento.

Características:

• Flexibilidad máxima: Control completo sobre cada elemento hijo
• Familiar: Similar a HTML/CSS tradicional
• Customización: Fácil agregar clases CSS personalizadas
• Debugging: Estructura más clara en DevTools

Ejemplo imperativo:

1import { Card, Tag, Button, Icon } from "@ussebastian/kitdigital-react";
2
3<Card>
4  <Card.Img src="/imagen.jpg" alt="Descripción" />
5  <Card.Body>
6    <Tag variant="primary">Etiqueta</Tag>
7    <h3>Título del card</h3>
8    <p>Descripción del contenido</p>
9    <Button variant="primary">
10      Acción
11      <Icon icon="ri-arrow-right-line" />
12    </Button>
13  </Card.Body>
14</Card>

El estilo declarativo utiliza un objeto de configuración que se pasa como prop al componente. Este enfoque es más conciso y está orientado a datos.

Características:

• Conciso: Menos líneas de código
• Orientado a datos: Ideal para contenido dinámico/CMS
• Consistencia: Estructura predefinida garantiza uniformidad
• Productividad: Desarrollo más rápido para casos comunes

Ejemplo declarativo:

1import { Card } from "@ussebastian/kitdigital-react";
2
3<Card
4  variant="simple"
5  content={{
6    img: {
7      src: "/imagen.jpg",
8      alt: "Descripción"
9    },
10    tag: {
11      label: "Etiqueta",
12      variant: "primary"
13    },
14    title: "Título del card",
15    description: "Descripción del contenido",
16    buttonCallToAction: {
17      variant: "primary",
18      label: "Acción",
19      icon: "ri-arrow-right-line"
20    }
21  }}
22/>

En los ejemplos de React puedes alternar entre ambos estilos de código. Haz clic en "Ver código" en cualquier ejemplo y usa el toggle para cambiar entre versiones. Tu preferencia se guarda automáticamente.