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

package/dist/package.json

@@ -0,0 +1,197 @@
+{
+  "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/package.json

@@ -1,38 +1,10 @@
 {
   "name": "@soyfri/shared-library",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./styles.css": "./dist/styles.css",
-    "./mui": {
-      "types": "./dist/mui.d.ts"
-    },
-    "./components/*": {
-      "types": "./dist/components/*/index.d.ts",
-      "import": "./dist/components/*/*.js",
-      "require": "./dist/components/*/*.cjs"
-    },
-    "./hooks/*": {
-      "types": "./dist/hooks/*/index.d.ts",
-      "import": "./dist/hooks/*/*.js",
-      "require": "./dist/hooks/*/*.cjs"
-    },
-    "./package.json": "./package.json"
-  },
+  "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",

package/rollup.config.cjs

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

@@ -0,0 +1,230 @@
+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`.',
+      },
+    },
+  },
+};