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

$3

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

function App() {
return (



);
}
`

Componentes Disponibles

$3

- 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

$3

- 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)

$3

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

$3

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

`bash


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.

$3

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

`js
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
}
`

$3

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

`bash


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