# Orion Library

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

## Instalación

Instala la librería usando npm:

```bash
npm install @clicoh/orion-library
```

O con yarn:

```bash
yarn add @clicoh/orion-library
```

O con pnpm:

```bash
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:

```typescript
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:

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

## Uso

### Importar componentes

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

```typescript
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:

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

### Interfaces

Interfaces TypeScript disponibles:

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

### Utilidades

Funciones de utilidad:

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

## Ejemplo completo

```typescript
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:

```bash
# 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.
