@clicoh/orion-library 0.2.28 → 1.0.0-b

package/README.md

@@ -1,36 +1,216 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+# 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.

package/assets/css/base.css

@@ -28,6 +28,7 @@ body {
   color: var(--body-text-color);
   background: var(--body-bg-color);
   @apply text-sm;
+  font-family: 'Noto Sans', sans-serif;
 }
 
 .Toastify__toast-icon {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicoh/orion-library",
-  "version": "0.2.28",
+  "version": "1.0.0b",
   "main": "index.js",
   "scripts": {
     "build": "tsc --project tsconfig.components.json",
@@ -15,24 +15,19 @@
   "dependencies": {
     "@floating-ui/react": "0.26.19",
     "clsx": "2.1.1",
-    "next": "14.0.4",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "react-icons": "5.2.1",
     "react-toastify": "10.0.5",
     "swr": "2.2.5",
     "zustand": "4.5.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "7.6.20",
-    "@storybook/addon-essentials": "7.6.20",
-    "@storybook/addon-interactions": "7.6.20",
-    "@storybook/addon-links": "7.6.20",
-    "@storybook/addon-onboarding": "1.0.11",
-    "@storybook/blocks": "7.6.20",
-    "@storybook/nextjs": "7.6.20",
-    "@storybook/react": "7.6.20",
-    "@storybook/test": "7.6.20",
+    "@chromatic-com/storybook": "^4.1.2",
+    "@storybook/addon-a11y": "^10.0.7",
+    "@storybook/addon-docs": "^10.0.7",
+    "@storybook/addon-vitest": "^10.0.7",
+    "@storybook/react-vite": "^10.0.7",
     "@types/copyfiles": "2",
     "@types/node": "20",
     "@types/react": "18.3.1",
@@ -40,18 +35,21 @@
     "@types/tailwindcss": "3.1.0",
     "autoprefixer": "10.4.19",
     "eslint": "8",
-    "eslint-config-next": "14.0.4",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-storybook": "0.6.15",
+    "eslint-plugin-storybook": "10.0.7",
     "husky": "8.0.3",
     "lint-staged": "15.2.7",
     "postcss": "8",
     "prettier": "3.3.2",
     "prettier-plugin-tailwindcss": "0.6.8",
-    "storybook": "7.6.20",
+    "storybook": "^10.0.7",
     "tailwindcss": "3.4.4",
-    "typescript": "5.5.4"
+    "typescript": "5.5.4",
+    "vitest": "^4.0.9",
+    "playwright": "^1.56.1",
+    "@vitest/browser-playwright": "^4.0.9",
+    "@vitest/coverage-v8": "^4.0.9"
   },
   "engines": {
     "node": ">=22.0.0"