@soyfri/shared-library 2.0.0-beta.21 → 2.0.0-beta.23

package/.github/workflows/publish.yml

@@ -1,107 +0,0 @@
-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

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

package/.storybook/main.ts

@@ -1,19 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,37 +0,0 @@
-# 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/Readme.md

@@ -1,243 +0,0 @@
-# @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/build.js

@@ -1,117 +0,0 @@
-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}/index.d.ts`
-    };
-  });
-};
-
-// Procesar componentes
-processDirectories(srcComponentsDir, distComponentsDir, 'components');
-
-// Procesar hooks
-processDirectories(srcHooksDir, distHooksDir, 'hooks');
-
-// Add CSS export before sealing newExports
-newExports['./styles.css'] = './styles.css';
-
-// Crear una copia del package.json original para dist
-const distPackageJson = { ...originalPackageJson };
-distPackageJson.exports = newExports;
-distPackageJson.sideEffects = ['*.css'];
-
-// Corregir rutas — el package.json vive en dist/, no en la raíz
-distPackageJson.main = './index.cjs';
-distPackageJson.module = './index.js';
-distPackageJson.types = './index.d.ts';
-
-// Eliminar propiedades innecesarias
-delete distPackageJson.scripts;
-delete distPackageJson.devDependencies;
-delete distPackageJson.dependencies;
-delete distPackageJson.private;
-delete distPackageJson.overrides;
-// "type": "module" en dist/ causes Vite to serve as native ESM, bypassing dedup
-// and resolving React from shared-library/node_modules instead of the host.
-// The exports "import"/"require" conditions already handle ESM/CJS distinction.
-delete distPackageJson.type;
-
-// 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

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

package/cleanDirectories.js

@@ -1,40 +0,0 @@
-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();