npm package: @innovardix-com-mx/capi-ui
Description: Biblioteca de componentes React con Ant Design y Tailwind CSS
Author: Innovardix
Latest version: 0.2.4

# capi-ui

<div align="center">

![Version](https://img.shields.io/badge/version-0.1.23-blue.svg)
![React](https://img.shields.io/badge/react-19.0.0-61dafb.svg)
![TypeScript](https://img.shields.io/badge/typescript-5.7.3-blue.svg)
![Ant Design](https://img.shields.io/badge/antd-5.24.0-1890ff.svg)
![TailwindCSS](https://img.shields.io/badge/tailwindcss-4.1.11-38bdf8.svg)

**Una librería completa de componentes React para crear interfaces de usuario modernas y dinámicas**

[Demo en vivo](https://capi-ui.netlify.app/) | [Documentación](https://github.com/8Wada/capi-ui) | [Reportar un error](https://github.com/8Wada/capi-ui/issues)

</div>

---

## 📋 Tabla de Contenidos

- [Características](#-características)
- [Instalación](#-instalación)
- [Componentes Principales](#-componentes-principales)
- [Guía de Inicio Rápido](#-guía-de-inicio-rápido)
- [Documentación de Componentes](#-documentación-de-componentes)
- [Hooks Personalizados](#-hooks-personalizados)
- [API y Configuración](#-api-y-configuración)
- [Desarrollo](#-desarrollo)
- [Scripts Disponibles](#-scripts-disponibles)
- [Tecnologías](#-tecnologías)
- [Contribuir](#-contribuir)
- [Licencia](#-licencia)

## ✨ Características

- 🎨 **Componentes Dinámicos**: Formularios, tablas y CRUD completamente configurables
- 🔐 **Sistema de Permisos**: Control granular de acceso basado en roles
- 📊 **Exportación de Datos**: Soporte para Excel y PDF
- 📤 **Carga Masiva**: Importación de datos mediante archivos Excel/CSV
- 🎯 **TypeScript First**: Totalmente tipado para mejor experiencia de desarrollo
- 🚀 **React Query**: Gestión de estado del servidor integrada
- 💅 **Estilos Modernos**: Combinación de Ant Design y Tailwind CSS
- 📱 **Responsive**: Diseño adaptable a todos los dispositivos
- 🎭 **Storybook**: Documentación interactiva de componentes
- ⚡ **Optimizado**: Bundle optimizado con Vite

## 📦 Instalación

### Usando npm

```bash
npm install @innovardix-com-mx/capi-ui
```

### Usando pnpm

```bash
pnpm install @innovardix-com-mx/capi-ui
```

o

```bash
pnpm add @innovardix-com-mx/capi-ui
```

### Usando yarn

```bash
yarn add @innovardix-com-mx/capi-ui
```

## 📚 Peer Dependencies

La librería requiere las siguientes dependencias instaladas en tu proyecto:

```json
{
  "antd": "^5.24.0",
  "axios": "^1.7.9",
  "dayjs": "^1.11.13",
  "react": "19.0.0",
  "react-dom": "19.0.0"
}
```

### Instalación de Peer Dependencies

```bash
npm install antd axios dayjs react react-dom
```

### Importar estilos

No olvides importar los estilos CSS en tu aplicación:

```tsx
import '@innovardix-com-mx/capi-ui/dist/style.css';
```

## 🧩 Componentes Principales

### 🎯 DynamicCrud

Componente completo CRUD con tabla, formulario modal y acciones personalizables.

```tsx
import { DynamicCrud } from '@innovardix-com-mx/capi-ui';

<DynamicCrud
  title="Gestión de Usuarios"
  description="Administra los usuarios del sistema"
  columns={[
    { title: 'Nombre', dataIndex: 'name', key: 'name' },
    { title: 'Email', dataIndex: 'email', key: 'email' },
  ]}
  fields={[
    { name: 'name', label: 'Nombre', type: 'text', required: true },
    { name: 'email', label: 'Email', type: 'email', required: true },
  ]}
  data={users}
  onCreate={handleCreate}
  onEdit={handleEdit}
  onDelete={handleDelete}
/>
```

### 📝 DynamicForm

Formulario dinámico generado a partir de configuración JSON.

```tsx
import { DynamicForm } from '@innovardix-com-mx/capi-ui';

<DynamicForm
  mode="create"
  title="Nuevo Usuario"
  layout="vertical"
  cols={2}
  fields={[
    { name: 'name', label: 'Nombre', type: 'text', required: true },
    { name: 'email', label: 'Email', type: 'email', required: true },
    { name: 'age', label: 'Edad', type: 'number' },
    { name: 'active', label: 'Activo', type: 'switch' },
  ]}
  onSubmit={handleSubmit}
/>
```

### 📊 DynamicTable

Tabla configurable con búsqueda, filtros, paginación y exportación.

```tsx
import { DynamicTable } from '@innovardix-com-mx/capi-ui';

<DynamicTable
  title="Lista de Productos"
  columns={columns}
  data={products}
  loading={isLoading}
  showCreateButton
  onCreate={handleCreate}
  onEdit={handleEdit}
  onDelete={handleDelete}
  exportToExcel={{
    fileName: 'productos',
    sheetName: 'Productos',
    data: products,
    columns: columns
  }}
  searchConfig={{
    searchableFields: ['name', 'category', 'price']
  }}
/>
```

### 🔘 Btn (Button)

Botón versátil con presets, variantes de color e iconos.

```tsx
import { Btn } from '@innovardix-com-mx/capi-ui';

// Botón con preset
<Btn preset="save" variant="success">Guardar</Btn>
<Btn preset="delete" variant="danger">Eliminar</Btn>
<Btn preset="edit" variant="info">Editar</Btn>

// Botón personalizado
<Btn 
  icon={<CustomIcon />} 
  variant="warning"
  size="large"
>
  Acción Personalizada
</Btn>

// Solo icono
<Btn preset="add" iconOnly />
```

### 🔐 PermissionsProvider

Sistema de gestión de permisos basado en roles.

```tsx
import { PermissionsProvider, usePermissions } from '@innovardix-com-mx/capi-ui';

// Configurar permisos
const permissionsConfig = {
  users: {
    admin: ['create', 'read', 'update', 'delete'],
    user: ['read'],
  }
};

// Envolver tu aplicación
<PermissionsProvider role="admin" config={permissionsConfig}>
  <App />
</PermissionsProvider>

// Usar en componentes
function UserActions() {
  const { canCreate, canDelete } = usePermissions('users');
  
  return (
    <>
      {canCreate && <Btn preset="add">Crear</Btn>}
      {canDelete && <Btn preset="delete">Eliminar</Btn>}
    </>
  );
}
```

### 📤 BulkUploadModal

Modal para carga masiva de datos con validación.

```tsx
import { BulkUploadModal } from '@innovardix-com-mx/capi-ui';

<BulkUploadModal
  title="Importar Usuarios"
  visible={showModal}
  config={{
    allowedFormats: ['xlsx', 'csv'],
    maxFileSize: 5,
    templateFields: [
      { name: 'name', label: 'Nombre', required: true },
      { name: 'email', label: 'Email', required: true },
    ]
  }}
  onValidateData={validateUsers}
  onFinish={importUsers}
  onCancel={() => setShowModal(false)}
/>
```

### 🔍 SharedField

Campo de formulario compartido con validación y tipos múltiples.

```tsx
import { SharedField } from '@innovardix-com-mx/capi-ui';

<SharedField
  name="username"
  label="Usuario"
  type="text"
  required={true}
  placeholder="Ingresa tu usuario"
  validations={{
    minLength: 3,
    maxLength: 20,
    pattern: /^[a-zA-Z0-9]+$/
  }}
/>
```

## 🎣 Hooks Personalizados

### useCrudOperations

Hook para operaciones CRUD con React Query integrado.

```tsx
import { useCrudOperations } from '@innovardix-com-mx/capi-ui';

function UserManagement() {
  const {
    data: users,
    isLoading,
    createItemAsync,
    updateItemAsync,
    deleteItemAsync,
    refetch
  } = useCrudOperations({
    getAll: () => api.getUsers(),
    create: (user) => api.createUser(user),
    update: (user) => api.updateUser(user),
    delete: (user) => api.deleteUser(user.id),
    idField: 'id',
    entityName: 'usuario'
  });

  const handleCreate = async (values) => {
    await createItemAsync(values);
  };

  return <DynamicTable data={users} loading={isLoading} />;
}
```

### useFetchQuery

Hook wrapper de React Query con configuración predeterminada.

```tsx
import { useFetchQuery } from '@innovardix-com-mx/capi-ui';

const { data, isLoading, error } = useFetchQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  config: {
    onSuccess: (data) => console.log('Datos cargados:', data),
    onError: (error) => console.error('Error:', error)
  }
});
```

### useNotification

Hook para mostrar notificaciones del sistema.

```tsx
import { openNotification } from '@innovardix-com-mx/capi-ui';

openNotification('success', 'Operación exitosa', 'Los datos se guardaron correctamente');
openNotification('error', 'Error', 'No se pudo completar la operación');
openNotification('warning', 'Advertencia', 'Revisa los datos ingresados');
openNotification('info', 'Información', 'Proceso en curso');
```

### useAsync

Hook para manejar operaciones asíncronas.

```tsx
import { useAsync } from '@innovardix-com-mx/capi-ui';

function DataDisplay() {
  const { data, loading, error } = useAsync(
    async () => await fetchData(),
    [dependency]
  );

  if (loading) return <Spin />;
  if (error) return <Alert type="error" message={error.message} />;
  
  return <div>{JSON.stringify(data)}</div>;
}
```

## ⚙️ API y Configuración

### Configuración de API en DynamicForm

```tsx
<DynamicForm
  apiConfig={{
    url: 'https://api.example.com/users',
    method: 'POST',
    headers: {
      'Authorization': 'Bearer token',
      'Content-Type': 'application/json'
    },
    responseDataPath: 'data.user'
  }}
/>
```

### Tipos de Campos de Formulario

- `text` - Campo de texto
- `textarea` - Área de texto
- `number` - Número
- `email` - Email
- `password` - Contraseña
- `select` - Lista desplegable
- `multiselect` - Selección múltiple
- `checkbox` - Casilla de verificación
- `radio` - Botones de radio
- `switch` - Interruptor
- `date` - Selector de fecha
- `daterange` - Rango de fechas
- `time` - Selector de hora
- `upload` - Carga de archivos
- `slider` - Deslizador
- `color` - Selector de color

### Validaciones

```tsx
{
  required: true,
  minLength: 5,
  maxLength: 50,
  min: 0,
  max: 100,
  pattern: /^[A-Z]/,
  email: true,
  url: true,
  customValidator: (value) => value !== 'admin' || 'No se permite este valor'
}
```

## 🚀 Tecnologías

- **React 19** - Librería de UI
- **TypeScript 5.7** - Tipado estático
- **Vite 6** - Build tool y dev server
- **Ant Design 5** - Framework de componentes UI
- **Tailwind CSS 4** - Framework de utilidades CSS
- **TanStack Query (React Query)** - Gestión de estado del servidor
- **Storybook 8** - Desarrollo y documentación de componentes
- **React Icons** - Iconos
- **Axios** - Cliente HTTP
- **Day.js** - Manejo de fechas
- **jsPDF & jsPDF-AutoTable** - Generación de PDFs
- **XLSX** - Manejo de archivos Excel
- **AJV** - Validación de esquemas JSON

## 👥 Autores

- **@RKamey** - *Colaborador*
- **@8Wada** - *Colaborador*

---

<div align="center">

**Hecho con ❤️ por el equipo de Innovardix**

</div>