@spira-mexico/ui-kit

Un kit de componentes React simple y reutilizable para aprender la publicación de paquetes npm.

🚀 Características

• ⚡ Componentes React ligeros y eficientes
• 📦 Empaquetado con Rollup para óptima distribución
• 📚 Documentación interactiva con Storybook
• 🎨 Estilos inline para fácil integración
• 🔧 Soporte para React 17 y 18

📦 Instalación

npm install @spira-mexico/ui-kit

o con yarn:

yarn add @spira-mexico/ui-kit

🔧 Uso

Importación básica

import { Button } from '@spira-mexico/ui-kit';

function App() {
  return (
    <Button 
      label="Haz clic aquí" 
      onClick={() => console.log('¡Botón presionado!')} 
    />
  );
}

Componentes disponibles

Button

Un componente de botón básico con estilos predefinidos.

Props:

• label (string): Texto que se muestra en el botón
• onClick (function): Función que se ejecuta al hacer clic

Ejemplo:

<Button 
  label="Mi Botón" 
  onClick={() => alert('¡Hola mundo!')} 
/>

Animation 🎬

Componente de animaciones fácil de usar, inspirado en react-reveal pero mejorado. Perfecto para principiantes.

Características principales:

• 🎭 16+ animaciones predefinidas (fadeIn, bounce, zoom, slide, etc.)
• 🌊 Animación en cascada para múltiples elementos
• 👁️ Detección automática de viewport
• ⚡ Alto rendimiento con motion/react
• 🎨 Totalmente personalizable

Ejemplo básico:

import { Animation, FadeIn, ZoomIn } from '@spira-mexico/ui-kit';

// Forma básica
<Animation effect="fadeInUp" duration={0.8}>
  <div>¡Contenido animado!</div>
</Animation>

// Componentes de conveniencia (más legible)
<FadeIn delay={0.5}>
  <h1>Título con fade in</h1>
</FadeIn>

<ZoomIn easing="bounce">
  <button>Botón con zoom in y rebote</button>
</ZoomIn>

Animación en cascada:

<Animation effect="slideInUp" cascade={true} cascadeDelay={0.2}>
  <div>Primer elemento</div>
  <div>Segundo elemento (0.2s después)</div>
  <div>Tercer elemento (0.4s después)</div>
</Animation>

Props principales:

• effect: Tipo de animación (fadeIn, fadeInUp, zoomIn, bounceIn, etc.)
• delay: Retraso antes de iniciar (segundos)
• duration: Duración de la animación (segundos)
• easing: Curva de animación (easeOut, spring, bounce, etc.)
• cascade: Animar elementos hijos secuencialmente
• triggerOnce: Animar solo una vez al entrar al viewport

Ver la documentación completa de Animation para más detalles.

🏗️ Desarrollo

Prerequisitos

• Node.js (versión 14 o superior)
• npm o yarn

Configuración local

1. Clona el repositorio:

git clone https://github.com/spira-mexico/ui-kit.git
cd ui-kit

2. Instala las dependencias:

npm install

3. Ejecuta Storybook para desarrollo:

npm run storybook

4. Construye el paquete:

npm run build

Scripts disponibles

• npm run build - Construye la librería para producción
• npm run storybook - Inicia el servidor de desarrollo de Storybook
• npm run prepublishOnly - Se ejecuta automáticamente antes de publicar

📚 Storybook

Para explorar los componentes de manera interactiva:

npm run storybook

Esto abrirá Storybook en http://localhost:6006 donde podrás ver y probar todos los componentes disponibles.

🏗️ Estructura del proyecto

ui-kit/
├── src/
│   ├── components/
│   │   ├── Button/
│   │   │   ├── Button.jsx
│   │   │   └── Button.stories.jsx
│   │   └── Animations/
│   │       ├── Animations.jsx        # Componente de animaciones
│   │       ├── Animations.stories.jsx # Historias de Storybook
│   │       └── README.md            # Documentación detallada
│   └── index.js                     # Punto de entrada
├── dist/                            # Archivos construidos (generados)
├── .storybook/                      # Configuración de Storybook
├── package.json
├── rollup.config.js                 # Configuración de Rollup
└── README.md

🤝 Contribuir

1. Fork el proyecto
2. Crea tu rama de 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

📋 Requisitos de sistema

• React ^17.0.0 || ^18.0.0
• react-dom ^17.0.0 || ^18.0.0

📄 Licencia

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

📧 Contacto

Spira México - @spira-mexico

Link del proyecto: https://github.com/spira-mexico/ui-kit

🚀 Roadmap

• [ ] Añadir más componentes básicos (Input, Card, Modal)
• [ ] Implementar sistema de temas
• [ ] Añadir tests unitarios
• [ ] Mejorar documentación de TypeScript
• [ ] Soporte para CSS Modules

⭐ ¡Dale una estrella a este repo si te fue útil!