@soyfri/shared-library 2.0.0-beta.3 → 2.0.0-beta.4

package/.dockerignore

@@ -0,0 +1,8 @@
+# Ignore dependencies, build artifacts, and local environment files
+node_modules
+dist
+
+# Ignore git and docker files
+.git
+.gitignore
+.dockerignore

package/.github/workflows/publish.yml

@@ -0,0 +1,107 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [v23.6.1]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          npm-version: '10.9.2'
+          cache: 'npm' # Se asume que package-lock.json está en el repositorio
+      
+      - name: Install dependencies
+        run: npm install --frozen-lockfile # Uso de --frozen-lockfile para CI/CD
+
+      - name: Remove underscore-prefixed directories
+        run: npm run rm --if-present
+
+      - name: Build package
+        run: npm run build --if-present
+      
+      - name: Dist package
+        run: npm run dist --if-present
+
+      - name: Upload build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist-package
+          path: dist/ # Guarda el directorio de distribución como un artefacto
+
+  publish:
+    runs-on: ubuntu-latest
+    needs: build # 👈 Depende del trabajo de construcción
+    environment: production # 👈 Asocia este trabajo con el ambiente 'production'
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        
+      - name: Download build artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist-package
+          path: dist/ # Descarga el artefacto en el directorio 'dist'
+
+      - name: Use Node.js 20.x for publishing
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          npm-version: '10.9.2'
+          registry-url: 'https://registry.npmjs.org'
+          
+      - name: Publish package
+        working-directory: dist
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+  
+  notify:
+    runs-on: ubuntu-latest
+    needs: publish
+    environment: production
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        
+      - name: Get package version
+        id: get_version
+        run: echo "PACKAGE_VERSION=$(npm pkg get version | tr -d '\"')" >> $GITHUB_ENV
+        
+      - name: Get commit message and author
+        id: get_commit_info
+        run: |
+          echo "COMMIT_MESSAGE=$(git log -1 --pretty=format:%s)" >> $GITHUB_ENV
+          echo "COMMIT_AUTHOR=$(git log -1 --pretty=format:%an)" >> $GITHUB_ENV
+        
+      - name: Send Discord notification (Success)
+        if: success()
+        uses: tsickert/discord-webhook@v5.3.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          content: "✅ **Publicación Exitosa:** Nueva versión de la librería de componentes en npm.\n**Paquete:** [@soyfri/shared-library](https://www.npmjs.com/package/@soyfri/shared-library/v/${{ env.PACKAGE_VERSION }})\n**Versión:** `v${{ env.PACKAGE_VERSION }}`\n**Notas del commit:** ${{ env.COMMIT_MESSAGE }}\n**Autor:** ${{ env.COMMIT_AUTHOR }}"
+          username: "GitHub Actions"
+          avatar-url: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
+      
+      - name: Send Discord notification (Failure)
+        if: failure()
+        uses: tsickert/discord-webhook@v5.3.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          content: "❌ **Publicación Fallida:** Falló la publicación de la librería de componentes en npm.\n**Commit:** ${{ env.COMMIT_MESSAGE }}\n**Autor:** ${{ env.COMMIT_AUTHOR }}"
+          username: "GitHub Actions"
+          avatar-url: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"

package/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "tabWidth": 2
+}

package/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)"
+  ],
+  "addons": [
+    "@storybook/addon-onboarding",
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-docs"
+  ],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  }
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react-vite'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

package/Dockerfile

@@ -0,0 +1,37 @@
+# Use a specific Node.js version for the build environment.
+FROM node:20-alpine AS builder
+
+# Set the working directory in the container.
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to leverage Docker's layer caching.
+# This step is cached and only re-runs if package*.json files change.
+COPY package*.json ./
+
+# Install project dependencies.
+RUN npm install
+
+# Copy the rest of your application's source code.
+COPY . .
+
+# Run the build script to create the distribution files.
+RUN npm run build --if-present
+
+RUN npm run dist --if-present
+
+# --- Final Stage: Create a lightweight image with only the build artifacts ---
+# Use a minimal base image. 'scratch' is the smallest, 'alpine' is also a good choice.
+FROM scratch
+
+# Set the working directory to the root of your library.
+WORKDIR /usr/src/app
+
+# Copy the built files from the 'builder' stage.
+COPY --from=builder /usr/src/app/dist ./dist
+
+# The final image contains only the 'dist' directory.
+# There is no need for EXPOSE or CMD as this is a component library, not a runnable application.
+
+# You can add a LABEL to describe the image if needed.
+LABEL maintainer="Your Name"
+LABEL version="1.0"

package/build.js

@@ -0,0 +1,102 @@
+import { readFileSync, existsSync, mkdirSync, writeFileSync, copyFileSync } from 'fs';
+import { join, basename } from 'path';
+import { sync } from 'glob';
+
+const projectRoot = process.cwd();
+const srcComponentsDir = join(projectRoot, 'src', 'components');
+const srcHooksDir = join(projectRoot, 'src', 'hooks');
+const distDir = join(projectRoot, 'dist');
+const distComponentsDir = join(distDir, 'components');
+const distHooksDir = join(distDir, 'hooks');
+const originalPackageJsonPath = join(projectRoot, 'package.json');
+const distPackageJsonPath = join(distDir, 'package.json');
+const readmePath = join(projectRoot, 'README.md');
+
+// Leer el package.json original
+const originalPackageJson = JSON.parse(readFileSync(originalPackageJsonPath, 'utf8'));
+
+// Inicializar el nuevo objeto exports
+let newExports = {
+  ".": {
+    "import": "./index.js",
+    "require": "./index.cjs",
+    "types": "./index.d.ts"
+  },
+  "./package.json": "./package.json"
+};
+
+// Función para procesar directorios de forma condicional y crear entradas en exports
+const processDirectories = (sourceDir, distDir, exportPrefix) => {
+  if (!existsSync(sourceDir)) {
+    console.log(`Directorio no encontrado: ${sourceDir}. Saltando.`);
+    return;
+  }
+  
+  if (!existsSync(distDir)) {
+    mkdirSync(distDir, { recursive: true });
+  }
+
+  const componentDirs = sync(`${sourceDir}/*/`);
+  
+  console.log(`Buscando módulos en: ${sourceDir}`);
+  
+  componentDirs.forEach(componentDirPath => {
+    const componentName = basename(componentDirPath);
+    
+    // Verificar si el nombre de la carpeta tiene la inicial en mayúscula
+    if (!/^[A-Z]/.test(componentName)) {
+      console.log(`  - Saltando '${componentName}' porque su carpeta no empieza con mayúscula.`);
+      return; // Saltar este componente
+    }
+
+    console.log(`  - Módulo encontrado: ${componentName}`);
+    
+    // Crear carpeta en dist
+    const distModuleFolder = join(distDir, componentName);
+    if (!existsSync(distModuleFolder)) {
+      mkdirSync(distModuleFolder, { recursive: true });
+    }
+
+    // Agregar entrada al objeto exports
+    const exportPath = `./${exportPrefix}/${componentName}`;
+    newExports[exportPath] = {
+      "import": `./${exportPrefix}/${componentName}/${componentName}.js`,
+      "require": `./${exportPrefix}/${componentName}/${componentName}.cjs`,
+      "types": `./${exportPrefix}/${componentName}/${componentName}.d.ts`
+    };
+  });
+};
+
+// Procesar componentes
+processDirectories(srcComponentsDir, distComponentsDir, 'components');
+
+// Procesar hooks
+processDirectories(srcHooksDir, distHooksDir, 'hooks');
+
+// Crear una copia del package.json original para dist
+const distPackageJson = { ...originalPackageJson };
+distPackageJson.exports = newExports;
+
+// Eliminar propiedades innecesarias
+delete distPackageJson.scripts;
+delete distPackageJson.devDependencies;
+delete distPackageJson.private;
+
+// Asegurarse de que el directorio 'dist' exista
+if (!existsSync(distDir)) {
+  mkdirSync(distDir, { recursive: true });
+}
+
+// Copiar README.md a la carpeta dist
+if (existsSync(readmePath)) {
+  copyFileSync(readmePath, join(distDir, 'README.md'));
+  console.log('Copiando README.md a la carpeta dist.');
+} else {
+  console.log('No se encontró README.md en la raíz del proyecto. Saltando.');
+}
+
+// Escribir el nuevo package.json en dist/
+writeFileSync(distPackageJsonPath, JSON.stringify(distPackageJson, null, 2), 'utf8');
+
+console.log(`\n'package.json' generado exitosamente en: ${distPackageJsonPath}`);
+console.log('Contenido de la propiedad "exports":', JSON.stringify(newExports, null, 2));

package/chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:6836406d3794ebfc4012fb25",
+  "zip": true
+}

package/cleanDirectories.js

@@ -0,0 +1,40 @@
+import { promises as fs } from 'fs';
+import { join } from 'path';
+
+// Define the folders to be cleaned (sub-folders will be deleted)
+const foldersToClean = ['components', 'hooks'];
+const srcPath = join(process.cwd(), 'src');
+
+const deleteLowercaseFolders = async () => {
+  console.log('Iniciando el proceso de eliminación de carpetas...');
+  
+  for (const parentFolder of foldersToClean) {
+    const parentPath = join(srcPath, parentFolder);
+
+    if (!await fs.stat(parentPath).catch(() => false)) {
+      console.log(`Directorio padre no encontrado: ${parentPath}. Saltando.`);
+      continue;
+    }
+
+    try {
+      // Leer el contenido del directorio padre y obtener información de los archivos
+      const entries = await fs.readdir(parentPath, { withFileTypes: true });
+
+      for (const entry of entries) {
+        // Check if the entry is a directory and its name starts with a lowercase letter.
+        if (entry.isDirectory() && /^[a-z]/.test(entry.name)) {
+          const folderPath = join(parentPath, entry.name);
+          await fs.rm(folderPath, { recursive: true, force: true });
+          console.log(`- Carpeta eliminada: ${folderPath}`);
+        }
+      }
+    } catch (error) {
+      console.error(`Error al procesar el directorio ${parentPath}:`, error);
+    }
+  }
+
+  console.log('Proceso de limpieza completado.');
+};
+
+// Execute the main function
+deleteLowercaseFolders();

package/dist/README.md

@@ -0,0 +1,243 @@
+# @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](#características)
+- [Instalación](#instalación)
+- [Uso](#uso)
+- [Componentes Disponibles](#componentes-disponibles)
+- [Desarrollo](#desarrollo)
+- [Scripts Disponibles](#scripts-disponibles)
+- [Storybook](#storybook)
+- [Testing](#testing)
+- [Tecnologías](#tecnologías)
+- [Estructura del Proyecto](#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
+
+```bash
+npm install @soyfri/shared-library
+```
+
+## 🚀 Uso
+
+```tsx
+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:
+```bash
+git clone <repository-url>
+cd shared-library
+```
+
+2. Instala las dependencias:
+```bash
+npm install
+```
+
+3. Inicia el entorno de desarrollo:
+```bash
+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
+
+```bash
+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
+
+```bash
+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`.
+        

package/{index.cjs → dist/index.cjs}

@@ -57,6 +57,30 @@ Object.defineProperty(exports, "Link", {
   enumerable: true,
   get: () => material.Link
 });
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: () => material.List
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: () => material.ListItem
+});
+Object.defineProperty(exports, "ListItemButton", {
+  enumerable: true,
+  get: () => material.ListItemButton
+});
+Object.defineProperty(exports, "ListItemIcon", {
+  enumerable: true,
+  get: () => material.ListItemIcon
+});
+Object.defineProperty(exports, "ListItemText", {
+  enumerable: true,
+  get: () => material.ListItemText
+});
+Object.defineProperty(exports, "ListSubheader", {
+  enumerable: true,
+  get: () => material.ListSubheader
+});
 Object.defineProperty(exports, "Paper", {
   enumerable: true,
   get: () => material.Paper

package/{index.cjs.map → dist/index.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/{index.js → dist/index.js}

@@ -1,6 +1,6 @@
 import './styles.css';/* empty css                */
 import { D, r } from "./resolvePreset-B-IB0ehH.js";
-import { Alert, AlertTitle, Backdrop, Box, CircularProgress, Collapse, Container, Divider, Fade, Grid, Grow, LinearProgress, Link, Paper, Skeleton, Snackbar, Stack, Typography, Zoom, alpha, styled, useMediaQuery, useTheme } from "@mui/material";
+import { Alert, AlertTitle, Backdrop, Box, CircularProgress, Collapse, Container, Divider, Fade, Grid, Grow, LinearProgress, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Paper, Skeleton, Snackbar, Stack, Typography, Zoom, alpha, styled, useMediaQuery, useTheme } from "@mui/material";
 export {
   Alert,
   AlertTitle,
@@ -16,6 +16,12 @@ export {
   Grow,
   LinearProgress,
   Link,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
   Paper,
   Skeleton,
   Snackbar,

package/{mui.d.ts → dist/mui.d.ts}

@@ -1,5 +1,6 @@
 export { Box, Stack, Grid, Container, Paper, Divider, } from '@mui/material';
 export { Typography, Link } from '@mui/material';
+export { List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, } from '@mui/material';
 export { CircularProgress, LinearProgress, Skeleton, Alert, AlertTitle, Snackbar, Backdrop, Fade, Grow, Zoom, Collapse, } from '@mui/material';
 export { useTheme, useMediaQuery, alpha, styled } from '@mui/material';
 export type { SxProps, Theme } from '@mui/material/styles';