@soyfri/shared-library

Una librería de componentes React reutilizables construida con Material-UI, TypeScript y Tailwind CSS, diseñada para proporcionar componentes UI consistentes y bien documentados.

📋 Tabla de Contenidos

• Características
• Instalación
• Uso
• Componentes Disponibles
• Desarrollo
• Scripts Disponibles
• Storybook
• Testing
• Tecnologías
• Estructura del Proyecto

✨ Características

• 🎨 Componentes tipados: Todos los componentes están construidos con TypeScript para mayor seguridad de tipos
• 📚 Documentación con Storybook: Cada componente incluye historias interactivas y documentación
• 🎯 Material-UI: Basado en Material-UI para un diseño consistente y accesible
• 🌈 Tailwind CSS: Integración con Tailwind para estilos utilitarios
• 🧪 Testing: Configurado con Vitest y Playwright para testing de componentes
• 📦 Build optimizado: Configuración con Rollup para generar builds ESM y CommonJS

📦 Instalación

npm install @soyfri/shared-library

🚀 Uso

import { Button, Table, Select } from '@soyfri/shared-library';
import '@soyfri/shared-library/dist/styles.css';

function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        Mi Botón
      </Button>
    </div>
  );
}

🧩 Componentes Disponibles

Button

Componente de botón personalizable basado en Material-UI con soporte para iconos, diferentes tamaños y estados.

Características:

• Variantes: text, outlined, contained
• Tamaños: small, medium, large
• Soporte para iconos de inicio y fin
• Estados de carga
• Completamente tipado

Table

Componente de tabla flexible con paginación interna y externa, ordenamiento y renderizado personalizado de columnas.

Características:

• Paginación interna automática
• Paginación externa controlada
• Columnas personalizables con renderizado custom
• Soporte para componentes complejos en celdas
• Completamente tipado con generics

Select

Componente select avanzado con soporte para selección múltiple, filtros, agrupación y renderizado personalizado.

Características:

• Selección simple y múltiple
• Filtrado de opciones
• Agrupación de opciones
• Renderizado personalizado con avatars
• Placeholder configurable

Avatar

Componente para mostrar avatares de usuarios con soporte para imágenes y texto.

Icon

Wrapper para iconos de Material-UI con propiedades consistentes.

Stat

Componente para mostrar estadísticas con diferentes plantillas de visualización.

Características:

• Plantilla simple
• Plantilla con chip
• Plantilla con lista de chips
• Colores personalizables

Column

Componente auxiliar para definir columnas en el componente Table.

🛠️ Desarrollo

Prerrequisitos

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

Configuración del entorno de desarrollo

1. Clona el repositorio:

git clone <repository-url>
cd shared-library

2. Instala las dependencias:

npm install

3. Inicia el entorno de desarrollo:

npm run dev

📜 Scripts Disponibles

• npm run build - Construye la librería para producción
• npm run dev - Inicia el modo de desarrollo con watch
• npm run build:css - Construye los estilos CSS
• npm run watch:css - Observa cambios en los estilos CSS
• npm run clean - Limpia la carpeta dist
• npm run prepare - Limpia y construye la librería
• npm run storybook - Inicia Storybook en modo desarrollo
• npm run build-storybook - Construye Storybook para producción
• npm run dist - Ejecuta el script de distribución personalizado

📚 Storybook

La librería incluye Storybook para documentación interactiva y desarrollo de componentes.

Iniciar Storybook

npm run storybook

Esto abrirá Storybook en http://localhost:6006 donde podrás:

• Ver todos los componentes disponibles
• Interactuar con las propiedades de cada componente
• Ver ejemplos de uso
• Acceder a la documentación detallada

Construir Storybook

npm run build-storybook

🧪 Testing

La librería está configurada con Vitest y Playwright para testing de componentes.

Configuración de Testing

• Vitest: Para unit tests y testing de componentes
• Playwright: Para testing de browser
• Storybook Test Addon: Para testing de historias de Storybook

🔧 Tecnologías

Dependencias Principales

• React 19.1.0: Librería de UI
• Material-UI 7.1.0: Sistema de diseño y componentes
• TypeScript 5.8.3: Tipado estático
• Tailwind CSS 4.1.7: Framework de CSS utilitario

Herramientas de Desarrollo

• Storybook 9.0.8: Documentación y desarrollo de componentes
• Rollup: Bundler para la construcción de la librería
• Vitest: Framework de testing
• Playwright: Testing de browser
• Prettier: Formateo de código

📁 Estructura del Proyecto

shared-library/
├── .storybook/          # Configuración de Storybook
├── src/
│   ├── components/      # Componentes de la librería
│   │   ├── Avatar/
│   │   ├── Button/
│   │   ├── Column/
│   │   ├── Icon/
│   │   ├── Select/
│   │   ├── Stat/
│   │   └── Table/
│   ├── index.ts         # Punto de entrada principal
│   └── styles.css       # Estilos globales
├── dist/                # Archivos construidos
├── package.json
├── tsconfig.json
├── tailwind.config.js
├── rollup.config.cjs
└── vitest.config.ts

Estructura de Componentes

Cada componente sigue una estructura consistente:

ComponentName/
├── ComponentName.tsx        # Implementación del componente
├── ComponentName.stories.tsx # Historias de Storybook
├── ComponentName.definition.ts # Definiciones de código (opcional)
├── index.ts                 # Exportaciones
└── types.ts                 # Tipos específicos (opcional)

🤝 Contribución

Para contribuir al proyecto:

1. Fork el repositorio
2. Crea una rama para tu feature (git checkout -b feature/nueva-funcionalidad)
3. Commit tus cambios (git commit -am 'Agrega nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Crea un Pull Request

📄 Licencia

ISC License

Versión actual: 1.0.1

Para más información y ejemplos detallados, consulta la documentación en Storybook ejecutando npm run storybook.