Arkho Test Library

Una librería moderna de componentes React construida con TypeScript y Tailwind CSS, siguiendo la metodología Atomic Design. Esta librería proporciona un conjunto completo de componentes reutilizables, desde átomos básicos hasta templates completos para acelerar el desarrollo de aplicaciones web.

🚀 Características

• Atomic Design: Componentes organizados en átomos, moléculas, organismos y templates
• TypeScript: Tipado completo para mejor experiencia de desarrollo
• Tailwind CSS: Estilos consistentes y personalizables
• Responsive Design: Componentes adaptables a diferentes tamaños de pantalla
• Accesibilidad: Cumplimiento de estándares WCAG
• Tree Shaking: Optimizado para bundles pequeños
• Modern React: Compatible con React 16+ y hooks

📦 Instalación

npm install arkho-test-library
# o
yarn add arkho-test-library

🔧 Dependencias Requeridas

Esta librería requiere las siguientes dependencias como peer dependencies:

npm install react react-dom tailwindcss
# o
yarn add react react-dom tailwindcss

Dependencias de Desarrollo (para usar la librería)

npm install @tailwindcss/vite class-variance-authority clsx lucide-react tailwind-merge
# o
yarn add @tailwindcss/vite class-variance-authority clsx lucide-react tailwind-merge

🎨 Configuración de Estilos

1. Configurar Tailwind CSS

Copia el archivo de configuración de Tailwind de la librería a tu proyecto:

# Copiar la configuración de Tailwind
cp node_modules/arkho-test-library/tailwind.config.js ./tailwind.config.arkho.js

2. Actualizar tu tailwind.config.js

// tailwind.config.js
const arkhoConfig = require('./tailwind.config.arkho.js');

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/arkho-test-library/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      ...arkhoConfig.theme.extend,
      // Tus personalizaciones adicionales aquí
    },
  },
  plugins: [
    ...arkhoConfig.plugins,
    // Tus plugins adicionales aquí
  ],
  corePlugins: {
    preflight: false, // Importante: deshabilitar preflight para evitar conflictos
  },
}

3. Importar estilos en tu aplicación

Los estilos se importan automáticamente cuando usas la librería, pero asegúrate de tener Tailwind CSS configurado correctamente en tu proyecto.

4. Personalizar variables CSS (opcional)

/* En tu archivo CSS principal */
:root {
  --arkho-primary: #your-primary-color;
  --arkho-secondary: #your-secondary-color;
  --arkho-success: #your-success-color;
  --arkho-error: #your-error-color;
  --arkho-warning: #your-warning-color;
  --arkho-info: #your-info-color;
}

🏗️ Estructura de Componentes

Átomos (Atoms)

Componentes básicos y reutilizables:

• Alert - Modal de confirmación con botones personalizables
• Avatar - Componente de avatar con diferentes tamaños y variantes
• Badge - Etiquetas con variantes de color (success, error, info, danger)
• Breadcrumb - Navegación de migas de pan
• Button - Botones con múltiples variantes y tamaños
• Cards - Tarjetas con diferentes estilos y layouts
• Checkbox - Casillas de verificación personalizables
• Icons - Wrapper para iconos de Lucide React
• Input - Campos de entrada con validación visual
• Label - Etiquetas para formularios
• Modal - Ventanas modales con overlay
• Pagination - Componente de paginación
• Select - Selectores desplegables
• Sidebar - Barra lateral navegable
• Skeleton - Placeholders de carga
• Table - Tablas con ordenamiento y acciones
• Tooltip - Tooltips informativos

Moléculas (Molecules)

Combinaciones de átomos:

• ButtonGroup - Grupos de botones relacionados
• Footer - Pie de página con enlaces sociales
• Form - Componentes de formulario (FormGrid, FormSection)
• Header - Encabezado con menú de usuario
• UserMenu - Menú desplegable de usuario

Organismos (Organisms)

Componentes complejos:

• DataTable - Tabla de datos con filtros, paginación y acciones
• Layout - Layout principal con header y sidebar

Templates

Plantillas completas para casos de uso comunes:

• DashboardTemplate - Template para dashboards con métricas y gráficos
• FilterGridTemplate - Template para pantallas con filtros y grilla de datos
• FormTemplate - Template para formularios con validación
• LoginTemplate - Template para pantallas de autenticación

🎯 Uso Básico

Importar componentes individuales

import { Button, Input, Modal } from 'arkho-test-library';

function MyComponent() {
  return (
    <div>
      <Button variant="primary" size="md">
        Click me
      </Button>
      <Input placeholder="Enter text..." />
      <Modal isOpen={true} onClose={() => {}}>
        Modal content
      </Modal>
    </div>
  );
}

Usar templates completos

import { LoginTemplate, DashboardTemplate } from 'arkho-test-library';

function App() {
  return (
    <LoginTemplate
      title="Iniciar Sesión"
      onSubmit={handleLogin}
      onForgotPassword={handleForgotPassword}
    />
  );
}

🎨 Personalización

⚠️ Solución de Problemas de Estilos

Si los estilos no se aplican correctamente, verifica:

1. Tailwind CSS instalado: Asegúrate de tener Tailwind CSS en tu proyecto
2. Configuración correcta: Incluye la configuración de la librería en tu tailwind.config.js
3. Content paths: Incluye "./node_modules/arkho-test-library/**/*.{js,ts,jsx,tsx}" en content
4. Preflight deshabilitado: Configura preflight: false en tu configuración de Tailwind
5. Build de la librería: Ejecuta yarn build en la librería antes de usarla

Ejemplo de configuración completa

// tailwind.config.js
const arkhoConfig = require('./tailwind.config.arkho.js');

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/arkho-test-library/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      ...arkhoConfig.theme.extend,
    },
  },
  plugins: [...arkhoConfig.plugins],
  corePlugins: {
    preflight: false, // Importante para evitar conflictos
  },
}

📚 Ejemplos de Uso

Dashboard con métricas

import { DashboardTemplate } from 'arkho-test-library';

const metrics = [
  {
    title: 'Usuarios Activos',
    value: '1,234',
    change: { value: 12, isPositive: true },
    color: 'green'
  },
  {
    title: 'Ventas',
    value: '$45,678',
    change: { value: -5, isPositive: false },
    color: 'red'
  }
];

function Dashboard() {
  return (
    <DashboardTemplate
      title="Mi Dashboard"
      metrics={metrics}
      onRefresh={() => console.log('Refresh')}
    />
  );
}

Formulario con validación

import { FormTemplate } from 'arkho-test-library';

const fields = [
  {
    name: 'name',
    label: 'Nombre',
    type: 'text',
    required: true,
    validation: {
      minLength: 2,
      maxLength: 50
    }
  },
  {
    name: 'email',
    label: 'Email',
    type: 'email',
    required: true
  }
];

function UserForm() {
  return (
    <FormTemplate
      title="Crear Usuario"
      fields={fields}
      onSubmit={handleSubmit}
      layout="grid"
    />
  );
}

Tabla de datos con filtros

import { FilterGridTemplate } from 'arkho-test-library';

const filters = [
  {
    key: 'name',
    label: 'Nombre',
    type: 'text',
    placeholder: 'Buscar por nombre...'
  },
  {
    key: 'status',
    label: 'Estado',
    type: 'select',
    options: [
      { label: 'Activo', value: 'active' },
      { label: 'Inactivo', value: 'inactive' }
    ]
  }
];

function UsersTable() {
  return (
    <FilterGridTemplate
      title="Usuarios"
      filters={filters}
      data={users}
      headers={headers}
      onFilterChange={handleFilterChange}
      onRefresh={handleRefresh}
    />
  );
}

🛠️ Desarrollo

Comandos disponibles

# Desarrollo
npm start          # Modo watch para desarrollo
npm run build      # Build de producción
npm test           # Ejecutar tests
npm run lint       # Linter
npm run size       # Análisis de tamaño del bundle

Estructura del proyecto

src/
├── ui/
│   ├── atoms/          # Componentes básicos
│   ├── molecule/       # Combinaciones de átomos
│   ├── organism/       # Componentes complejos
│   └── templates/      # Plantillas completas
├── utils/              # Utilidades compartidas
└── index.tsx          # Punto de entrada principal

📋 Requisitos del Sistema

• Node.js: >= 12
• React: >= 16
• TypeScript: >= 4.0 (recomendado)

🤝 Contribuir

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📄 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

👨‍💻 Autor

Brayan - Desarrollador de la librería Arkho

🔗 Enlaces Útiles

• Documentación de Tailwind CSS
• Guía de Atomic Design
• React TypeScript Cheatsheet

¿Necesitas ayuda? Abre un issue o contacta al equipo de desarrollo. ¿Necesitas ayuda? Abre un issue o contacta al equipo de desarrollo.