@soyfri/shared-library 1.5.0-beta.3 → 1.5.0

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/styles.css

@@ -0,0 +1,112 @@
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
+@layer properties;
+.invisible {
+  visibility: hidden;
+}
+.visible {
+  visibility: visible;
+}
+.absolute {
+  position: absolute;
+}
+.relative {
+  position: relative;
+}
+.sticky {
+  position: sticky;
+}
+.container {
+  width: 100%;
+}
+.block {
+  display: block;
+}
+.flex {
+  display: flex;
+}
+.grid {
+  display: grid;
+}
+.hidden {
+  display: none;
+}
+.inline-block {
+  display: inline-block;
+}
+.inline-flex {
+  display: inline-flex;
+}
+.table {
+  display: table;
+}
+.h-full {
+  height: 100%;
+}
+.w-full {
+  width: 100%;
+}
+.transform {
+  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+}
+.items-center {
+  align-items: center;
+}
+.border {
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+}
+.lowercase {
+  text-transform: lowercase;
+}
+.outline {
+  outline-style: var(--tw-outline-style);
+  outline-width: 1px;
+}
+.transition {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--tw-ease, ease);
+  transition-duration: var(--tw-duration, 0s);
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-border-style: solid;
+      --tw-outline-style: solid;
+    }
+  }
+}

package/package.json

@@ -1,10 +1,22 @@
 {
   "name": "@soyfri/shared-library",
-  "version": "1.5.0-beta.3",
+  "version": "1.5.0",
   "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",
@@ -28,140 +40,37 @@
     "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/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/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"
-    },
-    "./hooks/ClipBoard": {
-      "import": "./hooks/ClipBoard/ClipBoard.js",
-      "require": "./hooks/ClipBoard/ClipBoard.cjs",
-      "types": "./hooks/ClipBoard/ClipBoard.d.ts"
-    }
   }
 }