@quintarai/ui

Biblioteca personalizada de componentes React Quintara AI.

Repositorio: https://gitlab.com/leoquintara/quintarai-ui.git

1. Objetivos

• Reutilización: centralizar componentes UI reutilizables para proyectos React.
• Consistencia: mantener una experiencia visual y de interacción uniforme.
• Productividad: reducir tiempo de desarrollo (componentes listos + utilidades comunes).
• Compatibilidad: funcionar correctamente en proyectos consumidores como Gatsby/React.

2. Instalación del paquete

2.1 Instalación desde registry (recomendado)

yarn add @quintara.ai/ui

o

npm i @quintara.ai/ui

2.2 Peer dependencies

El consumidor debe instalar (o ya tener instalados) estos paquetes:

• react
• react-dom
• styled-components
• iconoir-react

3. Estructura

Estructura general:

src/
  components/
    (componentes UI)
  constants/
    (constantes compartidas)
  utils/
    (helpers/utilidades compartidas)

dist/
  index.js / index.esm.js / index.d.ts
  components.js / components.esm.js / components.d.ts
  constants.js / constants.esm.js / constants.d.ts
  utils.js / utils.esm.js / utils.d.ts

Puntos de entrada:

• src/index.ts
• src/components/index.ts
• src/constants/index.ts
• src/utils/index.ts

4. Arquitectura

• Compilación: Rollup genera salidas CJS y ESM en dist/.
• Tipos: se genera .d.ts para cada entry.
• Aliases internos:
  • @components → src/components
  • @utils → src/utils
  • @constants → src/constants

5. Cómo utilizar un componente

Import recomendado (por subpath):

import React from "react";
import { Button, Flex, Text } from "@quintara.ai/ui/components";

export default function Example() {
  return (
    <Flex $items="center" $justify="center" $gap={12}>
      <Text $type="strong">Hola</Text>
      <Button theme="primary" onClick={() => console.log("click")}>
        Aceptar
      </Button>
    </Flex>
  );
}

6. Constantes

Las constantes compartidas viven en src/constants y se exponen por:

import { REGEX } from "@quintara.ai/ui/constants";

REGEX.email.test("[email protected]");

6. Utils

Las utilidades compartidas viven en src/utils y se exponen por:

import { hasWindow, slugify } from "@quintara.ai/ui/utils";

if (hasWindow()) {
  slugify("Hola Mundo");
}

7. Vínculos a DBGrid y React Super CSS

• DBGrid (sistema de grid/breakpoints):

  • https://www.npmjs.com/package/dbgrid

• @digitalbooting/react-super-css:

  • https://www.npmjs.com/package/@digitalbooting/react-super-css

8. Autor

Quintara AI

https://gitlab.com/leoquintara