Librería Arkho UI

Una librería completa de componentes UI para React construida con TypeScript y Tailwind CSS, siguiendo principios de diseño atómico.

Características

• 🧩 Diseño Atómico: Componentes organizados desde átomos hasta plantillas
• 🎨 Múltiples Variantes: Sistema de diseño consistente en todos los componentes
• 📏 Tamaños Responsivos: Opciones de tamaño flexibles para todas las pantallas
• ⚡ TypeScript: Seguridad de tipos completa y soporte IntelliSense
• 🎯 Personalizable: Amplias opciones de personalización con Tailwind CSS
• 📱 Accesible: Construido siguiendo mejores prácticas de accesibilidad
• 🎭 Storybook: Documentación completa y ejemplos interactivos
• 🎨 Sistema de Diseño: Tokens consistentes y soporte de temas

Arquitectura de Componentes

La librería sigue principios de diseño atómico:

• Átomos: Bloques básicos de construcción (Button, Input, Label, etc.)
• Moléculas: Combinaciones simples de átomos (ButtonGroup, Footer, Header, etc.)
• Organismos: Secciones complejas de UI (DataTable, Layout, etc.)
• Plantillas: Diseños a nivel de página (DashboardTemplate, LoginTemplate, etc.)

Uso

Uso Básico

import { Button, ButtonGroup, Header, Footer } from ' ';

function App() {
  return (
    <div>
      {/* Átomos */}
      <Button variant="primary">Haz clic aquí</Button>
      
      {/* Moléculas */}
      <ButtonGroup 
        items={[
          { label: 'Guardar', onClick: () => {} },
          { label: 'Cancelar', onClick: () => {} }
        ]} 
      />
      
      <Header 
        user={{ name: 'Juan Pérez', email: '[email protected]', role: 'Admin', initials: 'JP' }}
        onLogout={() => {}}
      />
      
      <Footer 
        brand="Mi App"
        links={[
          { label: 'Inicio', href: '/' },
          { label: 'Acerca de', href: '/acerca' }
        ]}
      />
    </div>
  );
}

Componentes Disponibles

Átomos

• Button: Botones interactivos con múltiples variantes
• Input: Campos de entrada de formulario con estados de validación
• Label: Etiquetas de formulario con soporte de accesibilidad
• Avatar: Imágenes de perfil de usuario con iniciales de respaldo
• Badge: Indicadores de estado y etiquetas
• Modal: Diálogos superpuestos y ventanas emergentes
• Tooltip: Ayuda contextual e información
• Icons: Conjunto completo de iconos
• Cards: Contenedores de contenido
• Alert: Mensajes de notificación
• Breadcrumb: Migas de pan de navegación
• Checkbox: Casillas de verificación de formulario
• Pagination: Controles de navegación de página
• Select: Selección desplegable
• Sidebar: Barra lateral de navegación
• Skeleton: Marcadores de posición de carga
• Table: Tablas de datos

Moléculas

• ButtonGroup: Botones de acción agrupados
• Footer: Pie de página con enlaces y redes sociales
• Header: Encabezado de aplicación con menú de usuario
• UserMenu: Menú desplegable de perfil de usuario
• Form: Componentes de formulario (FormGrid, FormSection)

Organismos

• DataTable: Tablas de datos avanzadas con ordenamiento y filtrado
• Layout: Componentes de diseño de página

Plantillas

• DashboardTemplate: Diseño de página de panel de control
• LoginTemplate: Diseño de página de autenticación
• FormTemplate: Diseño de página de formulario
• FilterGridTemplate: Diseño de página de filtro y cuadrícula

Documentación de Storybook

La librería incluye documentación completa de Storybook con ejemplos interactivos:

# Iniciar Storybook
npm run storybook

Todos los componentes están documentados con:

• Controles interactivos
• Múltiples variantes y estados
• Ejemplos de uso
• Guías de accesibilidad
• Tokens de diseño

Estilos

Esta librería usa Tailwind CSS para los estilos. Necesitas tener Tailwind CSS instalado y configurado en tu proyecto.

Configuración de Tailwind

Asegúrate de que tu tailwind.config.js incluya el contenido de la librería:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@tu-usuario/arkho-ui/**/*.{js,ts,jsx,tsx}", // Agrega esta línea
  ],
  // ... resto de tu configuración
}

Sistema de Diseño

La librería sigue un sistema de diseño consistente con:

• Paleta de Colores: Colores primarios, secundarios, éxito, advertencia, peligro y neutros
• Tipografía: Tamaños y pesos de fuente consistentes
• Espaciado: Escala de espaciado estandarizada
• Sombras: Sistema de sombras consistente
• Radio de Borde: Valores unificados de radio de borde
• Transiciones: Animaciones y transiciones suaves

Desarrollo

# Instalar dependencias
npm install

# Iniciar Storybook para desarrollo
npm run storybook

# Construir la librería
npm run build

# Modo desarrollo con watch
npm run dev

# Ejecutar pruebas
npm test

Estructura del Proyecto

src/
├── ui/
│   ├── atoms/          # Componentes básicos
│   ├── molecule/       # Componentes compuestos
│   ├── organism/       # Componentes complejos
│   └── templates/      # Diseños de página
├── stories/           # Historias de Storybook
│   ├── atoms/         # Historias de átomos
│   └── molecule/      # Historias de moléculas
└── utils/             # Funciones utilitarias

Licencia

MIT

Contribuir

1. Haz fork del repositorio
2. Crea tu rama de funcionalidad (git checkout -b feature/funcionalidad-increible)
3. Confirma tus cambios (git commit -m 'Agregar alguna funcionalidad increíble')
4. Envía a la rama (git push origin feature/funcionalidad-increible)
5. Abre un Pull Request