Orion Library

Librería de componentes React para proyectos Next.js, construida con TypeScript y TailwindCSS.

Instalación

Instala la librería usando npm:

npm install @clicoh/orion-library

O con yarn:

yarn add @clicoh/orion-library

O con pnpm:

pnpm add @clicoh/orion-library

Configuración

1. Configurar TailwindCSS

Agrega la ruta de la librería a tu archivo tailwind.config.ts para que los estilos sean detectados:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@clicoh/orion-library/**/*.{js,ts,jsx,tsx}",
  ],
  // ... resto de tu configuración
};

export default config;

2. Importar estilos base (opcional)

Si necesitas los estilos base de la librería, importa el CSS en tu layout principal:

import '@clicoh/orion-library/assets/css/base.css';

Uso

Importar componentes

Puedes importar los componentes que necesites desde la librería:

import { Button, Input, Card, Modal } from '@clicoh/orion-library';

function MyComponent() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Input placeholder="Enter text..." />
    </div>
  );
}

Componentes disponibles

La librería incluye componentes organizados por categorías:

00-base

• Colors - Sistema de colores
• Each - Renderizado de listas
• RootLayout - Layout base
• Show - Renderizado condicional
• Typography components

01-atoms

• Badge - Insignias
• Button - Botones
• Checkbox - Casillas de verificación
• FileUpload - Carga de archivos
• Heading - Encabezados
• Input - Campos de entrada
• List - Listas
• Logo - Logo
• MultiSelect - Selección múltiple
• OtpInput - Input para códigos OTP
• Paragraph - Párrafos
• RadialProgressBar - Barra de progreso radial
• Radio - Botones de radio
• Select - Selectores
• Spinner - Indicadores de carga
• Switch - Interruptores
• Toast - Notificaciones
• Tooltip - Tooltips

02-molecules

• Accordion - Acordeones
• Avatar - Avatares
• Breadcrumb - Migas de pan
• ButtonGroup - Grupos de botones
• Container - Contenedores
• Dropdown - Menús desplegables
• Filter - Filtros
• Menu - Menús
• Modal - Modales
• Pagination - Paginación
• SlideOver - Paneles deslizantes
• Tab - Pestañas
• Table - Tablas

03-organisms

• AsideFilters - Filtros laterales
• AsideMenu - Menú lateral
• DataTable - Tablas de datos
• Header - Encabezado
• ModalMultiple - Modales múltiples

04-templates

• DashboardTemplate - Plantilla de dashboard
• LoginTemplate - Plantilla de login
• SideFilterTemplate - Plantilla con filtros laterales

Hooks

La librería también incluye hooks personalizados:

import { useFilterStore, useSegments } from '@clicoh/orion-library';

Interfaces

Interfaces TypeScript disponibles:

import type { AppResponse, LayoutProps } from '@clicoh/orion-library';

Utilidades

Funciones de utilidad:

import { generateUniqueId, calculateFileSize } from '@clicoh/orion-library';

Ejemplo completo

import { Button, Input, Modal } from '@clicoh/orion-library';
import { useState } from 'react';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="p-4">
      <Input
        placeholder="Escribe algo..."
        className="mb-4"
      />

      <Button
        variant="primary"
        onClick={() => setIsOpen(true)}
      >
        Abrir Modal
      </Button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <h2>Contenido del Modal</h2>
      </Modal>
    </div>
  );
}

Desarrollo

Para trabajar en la librería localmente:

# Instalar dependencias
npm install

# Ejecutar Storybook
npm run storybook

# Compilar la librería
npm run build

Requisitos

• React 18.3.1 o superior
• Next.js 14.0.4 o superior
• TailwindCSS configurado en tu proyecto

Licencia

Ver el archivo LICENSE en el repositorio.