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

package/package.json

@@ -1,22 +1,10 @@
 {
   "name": "@soyfri/shared-library",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.3",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
-    "watch:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch",
-    "build": "vite build --mode lib",
-    "dev": "tsup --watch",
-    "rm": "node cleanDirectories",
-    "clean": "rimraf dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "dist": "node build"
-  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -40,37 +28,170 @@
     "react-hook-form": "^7.62.0",
     "tailwindcss": "^4.1.7"
   },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
-    "@rollup/plugin-alias": "^5.1.1",
-    "@rollup/plugin-commonjs": "^28.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-docs": "^9.0.15",
-    "@storybook/addon-onboarding": "^9.0.15",
-    "@storybook/addon-vitest": "^9.0.15",
-    "@storybook/react-vite": "^9.0.15",
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.5",
-    "@vitest/browser": "^3.1.4",
-    "@vitest/coverage-v8": "^3.1.4",
-    "chromatic": "^12.0.0",
-    "glob": "^11.0.2",
-    "playwright": "^1.52.0",
-    "prettier": "3.5.3",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.41.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "storybook": "^9.0.15",
-    "tsup": "^8.5.0",
-    "typescript": "^5.8.3",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^3.1.4"
-  },
   "overrides": {
     "storybook": "$storybook"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs",
+      "types": "./index.d.ts"
+    },
+    "./package.json": "./package.json",
+    "./components/Tooltip": {
+      "import": "./components/Tooltip/Tooltip.js",
+      "require": "./components/Tooltip/Tooltip.cjs",
+      "types": "./components/Tooltip/Tooltip.d.ts"
+    },
+    "./components/Timeline": {
+      "import": "./components/Timeline/Timeline.js",
+      "require": "./components/Timeline/Timeline.cjs",
+      "types": "./components/Timeline/Timeline.d.ts"
+    },
+    "./components/Tabs": {
+      "import": "./components/Tabs/Tabs.js",
+      "require": "./components/Tabs/Tabs.cjs",
+      "types": "./components/Tabs/Tabs.d.ts"
+    },
+    "./components/Table": {
+      "import": "./components/Table/Table.js",
+      "require": "./components/Table/Table.cjs",
+      "types": "./components/Table/Table.d.ts"
+    },
+    "./components/Stepper": {
+      "import": "./components/Stepper/Stepper.js",
+      "require": "./components/Stepper/Stepper.cjs",
+      "types": "./components/Stepper/Stepper.d.ts"
+    },
+    "./components/StatusMessage": {
+      "import": "./components/StatusMessage/StatusMessage.js",
+      "require": "./components/StatusMessage/StatusMessage.cjs",
+      "types": "./components/StatusMessage/StatusMessage.d.ts"
+    },
+    "./components/Stat": {
+      "import": "./components/Stat/Stat.js",
+      "require": "./components/Stat/Stat.cjs",
+      "types": "./components/Stat/Stat.d.ts"
+    },
+    "./components/Select": {
+      "import": "./components/Select/Select.js",
+      "require": "./components/Select/Select.cjs",
+      "types": "./components/Select/Select.d.ts"
+    },
+    "./components/ScrollTopButton": {
+      "import": "./components/ScrollTopButton/ScrollTopButton.js",
+      "require": "./components/ScrollTopButton/ScrollTopButton.cjs",
+      "types": "./components/ScrollTopButton/ScrollTopButton.d.ts"
+    },
+    "./components/PageLoader": {
+      "import": "./components/PageLoader/PageLoader.js",
+      "require": "./components/PageLoader/PageLoader.cjs",
+      "types": "./components/PageLoader/PageLoader.d.ts"
+    },
+    "./components/Modal": {
+      "import": "./components/Modal/Modal.js",
+      "require": "./components/Modal/Modal.cjs",
+      "types": "./components/Modal/Modal.d.ts"
+    },
+    "./components/MenuButton": {
+      "import": "./components/MenuButton/MenuButton.js",
+      "require": "./components/MenuButton/MenuButton.cjs",
+      "types": "./components/MenuButton/MenuButton.d.ts"
+    },
+    "./components/InputGroup": {
+      "import": "./components/InputGroup/InputGroup.js",
+      "require": "./components/InputGroup/InputGroup.cjs",
+      "types": "./components/InputGroup/InputGroup.d.ts"
+    },
+    "./components/Input": {
+      "import": "./components/Input/Input.js",
+      "require": "./components/Input/Input.cjs",
+      "types": "./components/Input/Input.d.ts"
+    },
+    "./components/Icon": {
+      "import": "./components/Icon/Icon.js",
+      "require": "./components/Icon/Icon.cjs",
+      "types": "./components/Icon/Icon.d.ts"
+    },
+    "./components/Gallery": {
+      "import": "./components/Gallery/Gallery.js",
+      "require": "./components/Gallery/Gallery.cjs",
+      "types": "./components/Gallery/Gallery.d.ts"
+    },
+    "./components/Flyout": {
+      "import": "./components/Flyout/Flyout.js",
+      "require": "./components/Flyout/Flyout.cjs",
+      "types": "./components/Flyout/Flyout.d.ts"
+    },
+    "./components/Drawer": {
+      "import": "./components/Drawer/Drawer.js",
+      "require": "./components/Drawer/Drawer.cjs",
+      "types": "./components/Drawer/Drawer.d.ts"
+    },
+    "./components/DateTimePicker": {
+      "import": "./components/DateTimePicker/DateTimePicker.js",
+      "require": "./components/DateTimePicker/DateTimePicker.cjs",
+      "types": "./components/DateTimePicker/DateTimePicker.d.ts"
+    },
+    "./components/DateRangePicker": {
+      "import": "./components/DateRangePicker/DateRangePicker.js",
+      "require": "./components/DateRangePicker/DateRangePicker.cjs",
+      "types": "./components/DateRangePicker/DateRangePicker.d.ts"
+    },
+    "./components/DatePicker": {
+      "import": "./components/DatePicker/DatePicker.js",
+      "require": "./components/DatePicker/DatePicker.cjs",
+      "types": "./components/DatePicker/DatePicker.d.ts"
+    },
+    "./components/Column": {
+      "import": "./components/Column/Column.js",
+      "require": "./components/Column/Column.cjs",
+      "types": "./components/Column/Column.d.ts"
+    },
+    "./components/Chip": {
+      "import": "./components/Chip/Chip.js",
+      "require": "./components/Chip/Chip.cjs",
+      "types": "./components/Chip/Chip.d.ts"
+    },
+    "./components/Card": {
+      "import": "./components/Card/Card.js",
+      "require": "./components/Card/Card.cjs",
+      "types": "./components/Card/Card.d.ts"
+    },
+    "./components/Button": {
+      "import": "./components/Button/Button.js",
+      "require": "./components/Button/Button.cjs",
+      "types": "./components/Button/Button.d.ts"
+    },
+    "./components/Avatar": {
+      "import": "./components/Avatar/Avatar.js",
+      "require": "./components/Avatar/Avatar.cjs",
+      "types": "./components/Avatar/Avatar.d.ts"
+    },
+    "./components/Autocomplete": {
+      "import": "./components/Autocomplete/Autocomplete.js",
+      "require": "./components/Autocomplete/Autocomplete.cjs",
+      "types": "./components/Autocomplete/Autocomplete.d.ts"
+    },
+    "./components/AppBar": {
+      "import": "./components/AppBar/AppBar.js",
+      "require": "./components/AppBar/AppBar.cjs",
+      "types": "./components/AppBar/AppBar.d.ts"
+    },
+    "./components/ActionMenu": {
+      "import": "./components/ActionMenu/ActionMenu.js",
+      "require": "./components/ActionMenu/ActionMenu.cjs",
+      "types": "./components/ActionMenu/ActionMenu.d.ts"
+    },
+    "./hooks/Wizard": {
+      "import": "./hooks/Wizard/Wizard.js",
+      "require": "./hooks/Wizard/Wizard.cjs",
+      "types": "./hooks/Wizard/Wizard.d.ts"
+    },
+    "./hooks/ClipBoard": {
+      "import": "./hooks/ClipBoard/ClipBoard.js",
+      "require": "./hooks/ClipBoard/ClipBoard.cjs",
+      "types": "./hooks/ClipBoard/ClipBoard.d.ts"
+    }
   }
 }

package/.dockerignore

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

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/build.js

@@ -1,139 +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.
-// IMPORTANTE: el workflow publica con `working-directory: dist`, por lo que
-// `dist/` es la RAÍZ del paquete publicado. Todos los paths acá son relativos
-// a dist/ (es decir, sin el prefijo "./dist/").
-const newExports = {
-  ".": {
-    "types": "./index.d.ts",
-    "import": "./index.js",
-    "require": "./index.cjs"
-  },
-  "./styles.css": "./styles.css",
-  "./mui": {
-    "types": "./mui.d.ts"
-  },
-  "./package.json": "./package.json"
-};
-
-// Función para procesar directorios y crear entradas en exports.
-//
-// Nota sobre los archivos generados por vite (según `vite.config.js`):
-//   - Runtime:     components/<Name>/<Name>.js  y  .cjs
-//   - Types barrel components/<Name>/index.d.ts  (el archivo barrel de src/components/<Name>/index.ts)
-//   - Types comp.: components/<Name>/<Name>.d.ts (el archivo del componente src/components/<Name>/<Name>.tsx)
-//
-// Para el consumer, el import `@soyfri/shared-library/components/<Name>` debe
-// resolver al BARREL, por lo tanto:
-//   - types  → ./components/<Name>/index.d.ts   (barrel types)
-//   - import → ./components/<Name>/<Name>.js    (barrel runtime)
-//   - require→ ./components/<Name>/<Name>.cjs   (barrel runtime)
-const processDirectories = (sourceDir, distSubDir, exportPrefix) => {
-  if (!existsSync(sourceDir)) {
-    console.log(`Directorio no encontrado: ${sourceDir}. Saltando.`);
-    return;
-  }
-
-  if (!existsSync(distSubDir)) {
-    mkdirSync(distSubDir, { recursive: true });
-  }
-
-  const moduleDirs = sync(`${sourceDir}/*/`);
-
-  console.log(`Buscando módulos en: ${sourceDir}`);
-
-  moduleDirs.forEach(moduleDirPath => {
-    const moduleName = basename(moduleDirPath);
-
-    // Saltar módulos privados (_shared, _utils, etc.) y los que no empiezan con mayúscula.
-    if (!/^[A-Z]/.test(moduleName)) {
-      console.log(`  - Saltando '${moduleName}' porque no empieza con mayúscula.`);
-      return;
-    }
-
-    console.log(`  - Módulo encontrado: ${moduleName}`);
-
-    // Asegurar que exista la carpeta en dist (vite ya la debería haber creado,
-    // pero esto es idempotente).
-    const distModuleFolder = join(distSubDir, moduleName);
-    if (!existsSync(distModuleFolder)) {
-      mkdirSync(distModuleFolder, { recursive: true });
-    }
-
-    const exportPath = `./${exportPrefix}/${moduleName}`;
-    newExports[exportPath] = {
-      "types": `./${exportPrefix}/${moduleName}/index.d.ts`,
-      "import": `./${exportPrefix}/${moduleName}/${moduleName}.js`,
-      "require": `./${exportPrefix}/${moduleName}/${moduleName}.cjs`
-    };
-  });
-};
-
-// Procesar componentes y hooks.
-processDirectories(srcComponentsDir, distComponentsDir, 'components');
-processDirectories(srcHooksDir, distHooksDir, 'hooks');
-
-// Construir el package.json de dist/ partiendo del original, pero corrigiendo
-// los paths de `main`, `module` y `types` para que sean flat (sin prefijo "dist/")
-// porque dist/ ES la raíz del paquete publicado.
-const distPackageJson = {
-  ...originalPackageJson,
-  main: "./index.cjs",
-  module: "./index.js",
-  types: "./index.d.ts",
-  exports: newExports,
-  // Declarar qué archivos forman parte del tarball.
-  files: [
-    "index.js",
-    "index.cjs",
-    "index.d.ts",
-    "index.js.map",
-    "index.cjs.map",
-    "mui.d.ts",
-    "styles.css",
-    "components",
-    "hooks",
-    "theme"
-  ],
-  // Side effects: el CSS tiene side effects, el resto es tree-shakeable.
-  sideEffects: ["**/*.css"]
-};
-
-// Eliminar propiedades innecesarias para el paquete publicado.
-delete distPackageJson.scripts;
-delete distPackageJson.devDependencies;
-delete distPackageJson.private;
-delete distPackageJson.overrides;
-
-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.');
-}
-
-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();