@m4l/components 9.2.0 → 9.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.0",
+  "version": "9.2.2",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"
@@ -42,6 +42,7 @@
     "react-intersection-observer": "^9.4.0",
     "react-leaflet": "^4.2.1",
     "react-resizable": "^3.0.4",
+    "react-rnd": "^10.5.2",
     "react-router-dom": "6.3.0",
     "react-spinners": "^0.13.8",
     "react-toastify": "10.0.5",

package/storybook/components/Areas/AreasViewer/{AreasViewr.stories.d.ts → AreasViewer.stories.d.ts}

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { PaperForm } from '../../../../src/components/PaperForm';
-import { AreasAdmin } from '../../../../src/components/areas/components/AreasAdmin/AreasAdmin';
-declare const meta: Meta<typeof AreasAdmin>;
+import { AreasViewer } from '../../../../src/components/areas/components/AreasViewer/AreasViewer';
+declare const meta: Meta<typeof AreasViewer>;
 type Story = StoryObj<typeof PaperForm>;
 export declare const Default: Story;
 export default meta;

package/storybook/components/Areas/AreasViewer/hooks/useWindowsActions.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente que define las acciones del header para "clientes"
+ */
+export declare function useWindowsActions(moduleId: string): null;

package/storybook/components/Areas/AreasViewer/subcomponents/AreasViewerRender.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Render AreasViewer
+ */
+export declare const AreasViewerRender: () => import("react/jsx-runtime").JSX.Element;

package/storybook/components/Areas/AreasViewer/subcomponents/Launcher/Launcher.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+/**
+ * Layout de prueba para lanzar popups con replaceMeId.
+ */
+export declare const Launcher: React.FC;

package/storybook/components/Areas/AreasViewer/subcomponents/Launcher/PopupButton.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+interface PopupButtonProps {
+    title: string;
+    iconUrl: string;
+    dynamicParams: Record<string, any>;
+    /** Si se pasa este id, se intentará reemplazar el popup existente */
+    windowType?: 'simple_popup' | 'microfrontend_userd_add_edit_popup' | 'microfrontend_users_list_layout';
+    replaceMeId?: string;
+    onClick?: () => void;
+    /** Callback para notificar que se ha generado un id, en caso de no recibir uno por props */
+    onPopupCreated?: (id: string) => void;
+}
+export declare const heightWindow = 180;
+export declare const widthWindow = 460;
+export declare const marginWindow = 10;
+/**
+ * Botón que lanza un popup. Si se proporciona un replaceMeId, se usará ese id para reemplazar el popup existente;
+ * si no, se genera uno nuevo (incluyendo el currentAreaId) y se notifica al padre mediante onPopupCreated.
+ */
+export declare const PopupButton: React.FC<PopupButtonProps>;
+export {};

package/storybook/components/Areas/AreasViewer/subcomponents/Launcher/PopupContentExample.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente de ejemplo para el contenido de un popup.
+ */
+export declare const PopupContentExample: () => import("react/jsx-runtime").JSX.Element;

package/storybook/components/Areas/AreasViewer/subcomponents/layouts/ClientsLayout.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente que define las acciones del header para "clientes"
+ */
+export declare function CustomersLayout(): import("react/jsx-runtime").JSX.Element;

package/storybook/components/Areas/AreasViewer/subcomponents/layouts/UsersLayout.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Componente que define las acciones del header para "usuarios"
+ */
+export declare function UsersLayout(): import("react/jsx-runtime").JSX.Element;

package/storybook/components/DragResizeWindowRND/stories/DragResizeWindowRND.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DragResizeWindowRND } from '../../../../src/components/DragResizeWindowRND/DragResizeWindowRND';
+declare const meta: Meta<typeof DragResizeWindowRND>;
+type Story = StoryObj<typeof DragResizeWindowRND>;
+export declare const Default: Story;
+export declare const AllowHeightResizeContainer: Story;
+export declare const Hidden: Story;
+export default meta;

package/storybook/components/DragResizeWindowRND/stories/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const heightWindow = 180;
+export declare const widthWindow = 260;
+export declare const marginWindow = 10;

package/storybook/components/DragResizeWindowRND/stories/subcomponents/ContentExample.d.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO: Documentar
+ */
+export declare const ContentExample: React.FC<Record<string, any>>;

package/storybook/components/DragResizeWindowRND/stories/subcomponents/RNDWindowsContainer/RNDWindowsContainer.d.ts

@@ -0,0 +1,5 @@
+import { WindowsContainerProps } from './types';
+/**
+ * Contendor de ventanas
+ */
+export declare const RNDWindowsContainer: import('react').ForwardRefExoticComponent<WindowsContainerProps & import('react').RefAttributes<HTMLDivElement>>;

package/storybook/components/DragResizeWindowRND/stories/subcomponents/RNDWindowsContainer/index.d.ts

@@ -0,0 +1 @@
+export * from './RNDWindowsContainer';

package/storybook/components/DragResizeWindowRND/stories/subcomponents/RNDWindowsContainer/types.d.ts

@@ -0,0 +1,4 @@
+export type WindowsContainerProps = {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+};

package/storybook/components/{Areas/AreasViewer → DragResizeWindowRND/stories}/subcomponents/WithExtendedContainer.d.ts

@@ -1,5 +1,5 @@
 import { StoryContext, StoryFn } from '@storybook/react';
 /**
- * con contenedor extendido
+ * TODO: Documentar
  */
 export declare const WithExtendedContainer: (MyStory: StoryFn, context: StoryContext) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/DragResizeWindowRND/stories/types.d.ts

@@ -0,0 +1,3 @@
+import { StoryObj } from '@storybook/react';
+import { DragResizeWindowRND } from '../../../../src/components/DragResizeWindowRND/DragResizeWindowRND';
+export type StoryDragResizeWindowRNDType = StoryObj<typeof DragResizeWindowRND>;

package/storybook/components/PopupsViewer/basic.stories.d.ts

@@ -1,6 +1,16 @@
 import { Meta } from '@storybook/react';
 import { PopupsViewer } from '../../../src/components/popups/components/PopupsViewer/PopupsViewer';
-import { StoryPopupsProviderType } from './types';
 declare const meta: Meta<typeof PopupsViewer>;
 export default meta;
-export declare const Base: StoryPopupsProviderType;
+export declare const Base: {
+    parameters: {
+        initialPopups: import('../../../src/components/popups/components/PopupsProvider/contexts/PopupsContext/types').PopupInitialProps[] | undefined;
+    };
+    args: {};
+};
+export declare const DynamicPopups: {
+    parameters: {
+        initialPopups: import('../../../src/components/popups/components/PopupsProvider/contexts/PopupsContext/types').PopupInitialProps[] | undefined;
+    };
+    args: {};
+};

package/storybook/components/PopupsViewer/subcomponents/PopupActions.d.ts

@@ -1,4 +1,6 @@
 /**
- * Componente que define las acciones del popup
+ * Componente que define las acciones del popup.
+ * Este componente muestra un popup con acciones personalizadas, como mostrar toasts,
+ * iniciar/detener la carga y refrescar el contenido.
  */
 export declare function PopupActions(): import("react/jsx-runtime").JSX.Element;

package/storybook/components/PopupsViewer/subcomponents/PopupContentExample.d.ts

@@ -1,4 +1,5 @@
+import { default as React } from 'react';
 /**
- * TODO: Documentar
+ * Componente de ejemplo para mostrar en un popup.
  */
 export declare const PopupContentExample: React.FC<Record<string, any>>;

package/storybook/components/PopupsViewer/subcomponents/initialPopups.d.ts

@@ -3,4 +3,4 @@ export declare const heightWindow = 180;
 export declare const widthWindow = 260;
 export declare const marginWindow = 10;
 export declare const baseInitialPopups: PopupsProviderProps['initialPopups'];
-export declare const variantSmallIntialPopups: PopupsProviderProps['initialPopups'];
+export declare const variantSmallInitialPopups: PopupsProviderProps['initialPopups'];

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useHeaderActions/helper.d.ts

@@ -1,22 +0,0 @@
-import { GetLabelType } from '@m4l/core';
-import { AreaWindowAction, WindowOptions } from '../../../../../../../../types';
-/**
- * Get the main actions for the window
- */
-export declare function getMainActions(isMobile: boolean | undefined, moduleActions: AreaWindowAction[]): AreaWindowAction[];
-type GetMenuActionsType = {
-    windowId: string;
-    isMobile?: boolean;
-    moduleActions: AreaWindowAction[];
-    urlPrefix: string;
-    saveModuleCookies: (wd: string) => void;
-    resetModuleCookies: (wd: string) => void;
-    version?: string;
-    windowOptions?: WindowOptions;
-    getLabel: GetLabelType;
-};
-/**
- *  Get the menu actions for the window
- */
-export declare function getMenuActions(options: GetMenuActionsType): AreaWindowAction[];
-export {};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useHeaderActions/useHeaderActions.d.ts

@@ -1,28 +0,0 @@
-import { WindowBaseAction } from '../../../../../../../../../WindowBase/types';
-interface UseHeaderActionsParams {
-    windowId: string;
-    areaId: string;
-    menuActions?: WindowBaseAction[];
-}
-/**
- * Hook useHeaderActions
- *
- * Se encarga de combinar y configurar las acciones del header de una ventana.
- * Utiliza información del entorno (assets, diccionarios) y del store para agregar
- * acciones predefinidas (como collapse/expand y maximize/normalize).
- * @param {UseHeaderActionsParams} params - Parámetros que incluyen las acciones definidas,
- * el id de la ventana y el id del área.
- * @returns {Object} Un objeto con tres arrays: leftActions, menuActions y rightActions.
- * @example
- * const { leftActions, menuActions, rightActions } = useHeaderActions({
- *   windowId: 'win_456',
- *   areaId: 'area_123',
- *   menuActions: [],
- * });
- */
-export declare const useHeaderActions: ({ windowId, areaId, menuActions, }: UseHeaderActionsParams) => {
-    leftActions: WindowBaseAction[];
-    menuActions: WindowBaseAction[];
-    rightActions: WindowBaseAction[];
-};
-export {};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useHeaderActions/useHeaderActions.js

@@ -1,155 +0,0 @@
-import { useMemo } from "react";
-import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { u as useAreasStore } from "../../../../../../../../hooks/useAreas/index.js";
-import { I as ICONS } from "../../../../../../../../icons.js";
-import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../../../../../dictionary.js";
-import { g as getMainActions, a as getMenuActions } from "./helper.js";
-import { shallow } from "zustand/shallow";
-import { useIsMobile } from "@m4l/graphics";
-const useHeaderActions = ({
-  windowId,
-  areaId,
-  menuActions = []
-}) => {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const isMobile = useIsMobile();
-  const urlPrefix = `${host_static_assets}/${environment_assets}`;
-  const moduleActions = useAreasStore(
-    (state) => {
-      const window = state.hashWindows[windowId];
-      return window?.moduleActions || [];
-    },
-    shallow
-  );
-  const mainActions = useMemo(() => {
-    return getMainActions(!isMobile, moduleActions).map((action) => ({
-      ...action,
-      place: "left",
-      iconUrl: action.iconUrl || "",
-      label: action.label || ""
-    }));
-  }, [!isMobile, moduleActions]);
-  const windowOptions = useAreasStore(
-    (state) => state.hashWindows[windowId]?.windowOptions,
-    shallow
-  );
-  const { saveModuleCookies, resetModuleCookies } = useAreasStore(
-    (state) => state.windowActions,
-    shallow
-  );
-  const menuActionsInside = useMemo(() => {
-    return getMenuActions({
-      windowId,
-      isMobile,
-      moduleActions,
-      urlPrefix,
-      saveModuleCookies,
-      resetModuleCookies,
-      windowOptions: windowOptions || { allowPersistCookies: false },
-      getLabel
-    }).map((action) => ({
-      ...action,
-      place: "inside",
-      iconUrl: action.iconUrl || "",
-      label: action.label || ""
-    }));
-  }, [windowId, isMobile, moduleActions, urlPrefix, saveModuleCookies, resetModuleCookies, windowOptions, getLabel]);
-  const predefActions = useMemo(() => {
-    const groups = {
-      left: [],
-      inside: [],
-      right: []
-    };
-    menuActions.forEach((action) => {
-      if (action.place === "left") {
-        groups.left.push(action);
-      } else if (action.place === "inside") {
-        groups.inside.push(action);
-      } else if (action.place === "right") {
-        groups.right.push(action);
-      }
-    });
-    return groups;
-  }, [menuActions]);
-  const collapsed = useAreasStore(
-    (state) => {
-      const area = state.hashAreas[areaId];
-      if (area && area.currentBreakpoint && area.layouts && area.layouts[area.currentBreakpoint]) {
-        return area.layouts[area.currentBreakpoint].find(
-          (li) => li.i === windowId
-        )?.colapsed || false;
-      }
-      return false;
-    },
-    shallow
-  );
-  const maximizedId = useAreasStore(
-    (state) => state.hashAreas[areaId]?.maximizedId,
-    shallow
-  );
-  const { maximizeLayout, normalizeLayouts, colapseLayoutItem, unColapseLayoutItem } = useAreasStore((state) => state.areaActions);
-  const headerRightActions = useMemo(() => {
-    const actions = [];
-    actions.push({
-      place: "right",
-      key: "maximize",
-      iconUrl: maximizedId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.MAXIMIZE}`,
-      label: maximizedId ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_minimize_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_maximize_window)),
-      /**
-       * Acción de maximize/normalize.
-       */
-      onClick: () => {
-        if (maximizedId) {
-          normalizeLayouts(areaId);
-        } else {
-          maximizeLayout(areaId, windowId);
-        }
-      },
-      disabled: false
-    });
-    if (!maximizedId) {
-      actions.push({
-        place: "right",
-        key: "collapseToggle",
-        iconUrl: !collapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.COLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.UNCOLPASE}`,
-        label: !collapsed ? getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_collapse_window)) : getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_uncollapse_window)),
-        /**
-         * Acción de collapse/expand.
-         */
-        onClick: () => {
-          if (collapsed) {
-            unColapseLayoutItem(areaId, windowId);
-          } else {
-            colapseLayoutItem(areaId, windowId);
-          }
-        },
-        disabled: false
-      });
-    }
-    return actions;
-  }, [
-    collapsed,
-    maximizedId,
-    host_static_assets,
-    environment_assets,
-    getLabel,
-    areaId,
-    windowId,
-    colapseLayoutItem,
-    unColapseLayoutItem,
-    normalizeLayouts,
-    maximizeLayout
-  ]);
-  const combinedInsideActions = useMemo(() => {
-    return [...menuActionsInside, ...predefActions.inside];
-  }, [menuActionsInside, predefActions.inside]);
-  return {
-    leftActions: [...mainActions, ...predefActions.left],
-    menuActions: combinedInsideActions,
-    rightActions: [...predefActions.right, ...headerRightActions]
-  };
-};
-export {
-  useHeaderActions as u
-};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Component/types.d.ts

@@ -1,10 +0,0 @@
-import { WindowToolsMF } from '../../../../../../../../contexts/WindowToolsMFContext/types';
-import { DynamicMFStore } from '../../../../../../../../contexts/DynamicMFParmsContext/store';
-import { JSX_REACT_NODE } from '../../../../../../../../types';
-export interface ComponentProps {
-    moduleId: string;
-    windowTools: WindowToolsMF;
-    dynamicMFStore: DynamicMFStore;
-    component: JSX_REACT_NODE;
-    componentProps?: Record<string, any>;
-}

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/MicroFrontend/MicroFrontend.d.ts

@@ -1,8 +0,0 @@
-import { default as React } from 'react';
-import { MicroFrontendProps } from './types';
-/**
- * Componente encargado de renderizar un microfrontend.
- * @param props MicroFrontendProps
- */
-export declare const MicroFrontend: (props: MicroFrontendProps) => import("react/jsx-runtime").JSX.Element;
-export declare const MemonizedMicroFrontend: React.MemoExoticComponent<(props: MicroFrontendProps) => import("react/jsx-runtime").JSX.Element>;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/MicroFrontend/MicroFrontend.js

@@ -1,10 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import React from "react";
-import { M as MFLoader } from "../../../../../../../../../MFLoader/MFLoader.js";
-const MicroFrontend = (props) => {
-  return /* @__PURE__ */ jsx(MFLoader, { ...props });
-};
-const MemonizedMicroFrontend = React.memo(MicroFrontend);
-export {
-  MemonizedMicroFrontend as M
-};

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/MicroFrontend/types.d.ts

@@ -1,8 +0,0 @@
-import { MFBaseProps } from '../../../../../../../../types';
-import { WindowToolsMF } from '../../../../../../../../contexts/WindowToolsMFContext/types';
-import { DynamicMFStore } from '../../../../../../../../contexts/DynamicMFParmsContext/store';
-export interface MicroFrontendProps extends MFBaseProps {
-    moduleId: string;
-    windowTools: WindowToolsMF;
-    dynamicMFStore: DynamicMFStore;
-}

package/components/popups/components/PopupsProvider/hooks/useHeaderActionsPopups/helper.d.ts

@@ -1,28 +0,0 @@
-import { GetLabelType } from '@m4l/core';
-import { AreaWindowAction, WindowOptions } from '../../../../../areas/types';
-/**
- * Obtiene las acciones principales para un popup.
- * @param isDesktop Indica si se está en un dispositivo de escritorio.
- * @param moduleActions Acciones definidas para el módulo.
- * @returns Array de acciones principales.
- */
-export declare function getMainActionsForPopups(isDesktop: boolean | undefined, moduleActions: AreaWindowAction[]): AreaWindowAction[];
-type GetMenuActionsForPopupsType = {
-    popupId: string;
-    isDesktop?: boolean;
-    moduleActions: AreaWindowAction[];
-    urlPrefix: string;
-    version?: string;
-    windowOptions?: WindowOptions;
-    getLabel: GetLabelType;
-    saveModuleCookies: (wd: string) => void;
-    resetModuleCookies: (wd: string) => void;
-};
-/**
- * Obtiene las acciones del menú para un popup.
- * A diferencia del helper para áreas, aquí no se agregan acciones relacionadas con cookies.
- * @param options Objeto con las opciones para construir las acciones.
- * @returns Array de acciones para el menú.
- */
-export declare function getMenuActionsForPopups(options: GetMenuActionsForPopupsType): AreaWindowAction[];
-export {};

package/components/popups/components/PopupsProvider/hooks/useHeaderActionsPopups/helper.js

@@ -1,44 +0,0 @@
-import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../../areas/dictionary.js";
-import { I as ICONS } from "../../../../../areas/icons.js";
-function getMenuActionsForPopups(options) {
-  const {
-    popupId,
-    isDesktop,
-    moduleActions,
-    urlPrefix,
-    saveModuleCookies,
-    resetModuleCookies,
-    getLabel,
-    windowOptions = { allowPersistCookies: false }
-  } = options;
-  let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
-  if (isDesktop !== void 0 && isDesktop) {
-    menuActions = menuActions.filter((action) => action.visibility === "normal");
-  }
-  if (windowOptions.allowPersistCookies) {
-    const saveCookiesAction = {
-      type: "menuItem",
-      startIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.SAVE_COOKIES}`,
-      onClick: () => saveModuleCookies(popupId),
-      disabled: false,
-      visibility: "normal",
-      label: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_persist_module_cookies)),
-      key: "save_cookies"
-    };
-    menuActions.push(saveCookiesAction);
-    const resetCookiesAction = {
-      type: "menuItem",
-      startIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS.RESET_COOKIES}`,
-      onClick: () => resetModuleCookies(popupId),
-      disabled: false,
-      visibility: "normal",
-      label: getLabel(getAreasDictionary(AREAS_DICCTIONARY.label_reset_module_cookies)),
-      key: "reset_cookes"
-    };
-    menuActions.push(resetCookiesAction);
-  }
-  return menuActions;
-}
-export {
-  getMenuActionsForPopups as g
-};