npm package: @spira-mexico/ui-kit
Description: Simple React UI Kit for learning package publishing
Latest version: 1.0.3

# @spira-mexico/ui-kit

[![npm version](https://img.shields.io/npm/v/@spira-mexico/ui-kit.svg)](https://www.npmjs.com/package/@spira-mexico/ui-kit)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

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

```bash
npm install @spira-mexico/ui-kit
```

o con yarn:

```bash
yarn add @spira-mexico/ui-kit
```

## 🔧 Uso

### Importación básica

```jsx
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:**
```jsx
<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:**
```jsx
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:**
```jsx
<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](src/components/Animations/README.md) para más detalles.

## 🏗️ Desarrollo

### Prerequisitos

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

### Configuración local

1. Clona el repositorio:
```bash
git clone https://github.com/spira-mexico/ui-kit.git
cd ui-kit
```

2. Instala las dependencias:
```bash
npm install
```

3. Ejecuta Storybook para desarrollo:
```bash
npm run storybook
```

4. Construye el paquete:
```bash
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:

```bash
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](https://github.com/spira-mexico)

Link del proyecto: [https://github.com/spira-mexico/ui-kit](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!