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

package/build.js

@@ -1,102 +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}/${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

@@ -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();

package/dist/package.json

@@ -1,197 +0,0 @@
-{
-  "name": "@soyfri/shared-library",
-  "version": "2.0.0-beta.4",
-  "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^7.1.0",
-    "@mui/lab": "^7.0.0-beta.16",
-    "@mui/material": "^7.1.2",
-    "@mui/x-date-pickers": "^8.5.3",
-    "@mui/x-date-pickers-pro": "^8.5.3",
-    "@storybook/test": "^8.6.14",
-    "@tailwindcss/cli": "^4.1.7",
-    "@vitejs/plugin-react": "^5.0.3",
-    "autoprefixer": "^10.4.21",
-    "dayjs": "^1.11.13",
-    "postcss": "^8.5.3",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-hook-form": "^7.62.0",
-    "tailwindcss": "^4.1.7"
-  },
-  "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/rollup.config.cjs

@@ -1,87 +0,0 @@
-const resolve = require('@rollup/plugin-node-resolve');
-const commonjs = require('@rollup/plugin-commonjs');
-const typescript = require('rollup-plugin-typescript2');
-const peerDepsExternal = require('rollup-plugin-peer-deps-external');
-const postcss = require('rollup-plugin-postcss');
-const terser = require('@rollup/plugin-terser');
-// const alias = require('@rollup/plugin-alias'); // 👈 Ya no necesitamos este plugin
-const { globSync } = require('glob');
-const path = require('path');
-const pkg = require('./package.json');
-const projectRootDir = path.resolve(__dirname);
-
-const componentEntryPoints = globSync('src/components/*/index.ts').reduce((acc, file) => {
-  const componentName = path.basename(path.dirname(file));
-  acc[`components/${componentName}`] = file;
-  return acc;
-}, {});
-
-const mainEntry = {
-  index: 'src/index.ts',
-};
-
-module.exports = {
-  input: {
-    ...mainEntry,
-    ...componentEntryPoints,
-  },
-  output: [
-    {
-      dir: 'dist/esm',
-      format: 'esm',
-      sourcemap: true,
-      preserveModules: true,
-      preserveModulesRoot: 'src',
-      entryFileNames: '[name].js',
-      chunkFileNames: '_chunks/chunk-[hash].js',
-      exports: 'named',
-    },
-    {
-      dir: 'dist/cjs',
-      format: 'cjs',
-      sourcemap: true,
-      preserveModules: true,
-      preserveModulesRoot: 'src',
-      entryFileNames: '[name].cjs',
-      chunkFileNames: '_chunks/chunk-[hash].cjs',
-      exports: 'named',
-    },
-  ],
-  plugins: [
-    peerDepsExternal(),
-    // 👈 Configura el alias dentro del plugin 'resolve'
-    resolve({
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      alias: {
-        entries: [
-          { find: '@soyfri/shared-library', replacement: path.resolve(projectRootDir, 'src') }
-        ]
-      }
-    }),
-    commonjs(),
-    typescript({
-      tsconfig: './tsconfig.json',
-      useTsconfigDeclarationDir: true,
-    }),
-    postcss({
-      config: {
-        path: './postcss.config.js',
-      },
-      extensions: ['.css'],
-      minimize: true,
-      extract: true,
-    }),
-    terser(),
-  ],
-  external: [
-    'react',
-    'react-dom',
-    /@mui\/.*/,
-    /@emotion\/.*/,
-    'dayjs',
-    'react-hook-form',
-    'tailwindcss',
-    'autoprefixer',
-    'postcss',
-  ],
-};

package/src/components/ActionMenu/ActionMenu.stories.tsx

@@ -1,230 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import {
-  Box,
-  Button,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Paper,
-  Chip,
-} from '@mui/material';
-import EditIcon from '@mui/icons-material/Edit';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import DeleteIcon from '@mui/icons-material/Delete';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import DownloadIcon from '@mui/icons-material/Download';
-import ShareIcon from '@mui/icons-material/Share';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-
-import { ActionMenu } from './ActionMenu';
-
-const meta: Meta<typeof ActionMenu> = {
-  title: 'Components/ActionMenu',
-  component: ActionMenu,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Menú de acciones compacto pensado para celdas de tabla, cabeceras y cualquier lugar donde hagan falta acciones secundarias detrás de un trigger. Reemplaza los patrones `<Dropdown>` de react-bootstrap.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ActionMenu>;
-
-// ── Stories ──────────────────────────────────────────────────────────────
-
-export const Default: Story = {
-  args: {
-    items: [
-      { label: 'Editar', icon: <EditIcon fontSize="small" />, onClick: fn() },
-      { label: 'Duplicar', icon: <ContentCopyIcon fontSize="small" />, onClick: fn() },
-      { label: 'Ver detalle', icon: <VisibilityIcon fontSize="small" />, onClick: fn() },
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Menú básico con trigger de 3 puntos (icono por defecto). Cada item tiene label + icono + onClick.',
-      },
-    },
-  },
-};
-
-export const WithDangerItem: Story = {
-  args: {
-    items: [
-      { label: 'Editar', icon: <EditIcon fontSize="small" />, onClick: fn() },
-      { label: 'Duplicar', icon: <ContentCopyIcon fontSize="small" />, onClick: fn() },
-      {
-        label: 'Eliminar',
-        icon: <DeleteIcon fontSize="small" />,
-        onClick: fn(),
-        danger: true,
-        dividerBefore: true,
-      },
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Item final marcado como `danger` (pintado en rojo) con `dividerBefore: true` para separarlo visualmente del resto. Patrón típico para acciones destructivas.',
-      },
-    },
-  },
-};
-
-export const WithDisabledItems: Story = {
-  args: {
-    items: [
-      { label: 'Editar', icon: <EditIcon fontSize="small" />, onClick: fn() },
-      {
-        label: 'Exportar',
-        icon: <DownloadIcon fontSize="small" />,
-        onClick: fn(),
-        disabled: true,
-      },
-      {
-        label: 'Compartir',
-        icon: <ShareIcon fontSize="small" />,
-        onClick: fn(),
-        disabled: true,
-      },
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Items deshabilitados condicionalmente — útil cuando una acción no aplica al estado actual del row (ej. exportar un recurso que aún no se procesó).',
-      },
-    },
-  },
-};
-
-export const CustomTrigger: Story = {
-  args: {
-    items: [
-      { label: 'Editar', icon: <EditIcon fontSize="small" />, onClick: fn() },
-      { label: 'Duplicar', icon: <ContentCopyIcon fontSize="small" />, onClick: fn() },
-      { label: 'Eliminar', icon: <DeleteIcon fontSize="small" />, onClick: fn(), danger: true },
-    ],
-    trigger: (
-      <Button variant="outlined" startIcon={<MoreHorizIcon />}>
-        Más
-      </Button>
-    ),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'El trigger por defecto es un IconButton de 3 puntos, pero podés pasar cualquier nodo (botón, chip, icono custom). El `onClick` del menú se inyecta automáticamente al trigger clonado.',
-      },
-    },
-  },
-};
-
-export const InsideTableCell: Story = {
-  render: () => {
-    const rows = [
-      { id: 1, name: 'Comercio A', status: 'Activo' },
-      { id: 2, name: 'Comercio B', status: 'Pendiente' },
-      { id: 3, name: 'Comercio C', status: 'Suspendido' },
-    ];
-
-    return (
-      <Paper sx={{ maxWidth: 720 }}>
-        <Table size="small">
-          <TableHead>
-            <TableRow>
-              <TableCell>ID</TableCell>
-              <TableCell>Comercio</TableCell>
-              <TableCell>Estado</TableCell>
-              <TableCell align="right">Acciones</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow key={row.id} hover>
-                <TableCell>{row.id}</TableCell>
-                <TableCell>{row.name}</TableCell>
-                <TableCell>
-                  <Chip
-                    label={row.status}
-                    size="small"
-                    color={
-                      row.status === 'Activo'
-                        ? 'success'
-                        : row.status === 'Pendiente'
-                          ? 'warning'
-                          : 'error'
-                    }
-                  />
-                </TableCell>
-                <TableCell align="right">
-                  <ActionMenu
-                    items={[
-                      {
-                        label: 'Ver detalle',
-                        icon: <VisibilityIcon fontSize="small" />,
-                        onClick: fn(() => console.log('Ver', row.id)),
-                      },
-                      {
-                        label: 'Editar',
-                        icon: <EditIcon fontSize="small" />,
-                        onClick: fn(() => console.log('Editar', row.id)),
-                      },
-                      {
-                        label: 'Eliminar',
-                        icon: <DeleteIcon fontSize="small" />,
-                        onClick: fn(() => console.log('Eliminar', row.id)),
-                        danger: true,
-                        dividerBefore: true,
-                      },
-                    ]}
-                  />
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </Paper>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Caso de uso principal: un `ActionMenu` por cada fila de una tabla. Reemplaza exactamente el patrón `DropDownActions` + `react-bootstrap Dropdown` usado hoy en Afiliaciones.',
-      },
-    },
-  },
-};
-
-export const DisabledTrigger: Story = {
-  args: {
-    disabled: true,
-    items: [
-      { label: 'Editar', icon: <EditIcon fontSize="small" />, onClick: fn() },
-      { label: 'Eliminar', icon: <DeleteIcon fontSize="small" />, onClick: fn(), danger: true },
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Cuando el row o la acción no tiene permisos, se puede deshabilitar el trigger entero pasando `disabled`.',
-      },
-    },
-  },
-};