A customizable React Button component with Tailwind CSS
npm install he-button-custom-libraryUna librería completa de componentes UI para React construida con TypeScript y Tailwind CSS, siguiendo principios de diseño atómico.
- 🧩 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
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.)
``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ículaDocumentació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 installIniciar Storybook para desarrollo
npm run storybookConstruir la librería
npm run buildModo desarrollo con watch
npm run devEjecutar 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`)