@m4l/components 9.1.97 → 9.1.99

package/components/WindowBase/WindowBase.d.ts

@@ -5,7 +5,7 @@ import { WindowBaseProps } from './types';
  * It uses hooks like `useModal` and utility style classes.
  * @author cesar - automatic
  * @createdAt 2024-11-15 18:08:44 - automatic
- * @updatedAt 2025-02-04 15:44:12 - automatic
+ * @updatedAt 2025-02-07 11:59:47 - automatic
  * @updatedUser cesar - automatic
  */
 export declare const WindowBase: (props: WindowBaseProps) => import("react/jsx-runtime").JSX.Element;

package/components/WindowBase/WindowBase.js

@@ -22,6 +22,7 @@ const WindowBase = (props) => {
     className,
     isLoading,
     windowId,
+    onMouseDown,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -40,6 +41,7 @@ const WindowBase = (props) => {
         className: clsx(getComponentSlotRoot(WINDOW_BASE_KEY_COMPONENT), className),
         ...getPropDataTestId(WINDOW_BASE_KEY_COMPONENT, WindowBaseSlots.wrapperWindowBase, dataTestId),
         ownerState,
+        onMouseDown,
         children: [
           /* @__PURE__ */ jsx(
             HeaderWindowBase,

package/components/WindowBase/types.d.ts

@@ -8,7 +8,7 @@ import { ComponentPalletColor, Sizes } from '@m4l/styles';
  * Type representing a single action in the `WindowBase` component.
  * @author cesar - automatic
  * @createdAt 2024-12-23 09:48:25 - automatic
- * @updatedAt 2025-02-04 15:44:12 - automatic
+ * @updatedAt 2025-02-07 11:59:47 - automatic
  * @updatedUser cesar - automatic
  */
 export interface WindowBaseAction {
@@ -62,21 +62,25 @@ export interface WindowBaseProps {
     /**
      * The main title of the window.
      * This property is required and displayed prominently at the top of the window.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     title: string;
     /**
      * An optional subtitle for the window.
      * Typically displayed below the main title to provide additional context or details.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     subTitle?: string;
     /**
      * The content to be rendered inside the window.
      * This can include any valid React node or JSX.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     children: ReactNode;
     /**
      * URL of the icon displayed in the header of the window.
      * This is optional and used to provide a visual identifier for the window.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     iconUrl?: string;
     /**
@@ -84,6 +88,7 @@ export interface WindowBaseProps {
      * - `'outlined'`: Displays the window with an outlined border.
      * - `'text'`: Displays the window with minimal styling, emphasizing the content.
      * Default is `'outlined'` if not specified.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     variant?: 'outlined' | 'text';
     /**
@@ -91,51 +96,69 @@ export interface WindowBaseProps {
      * - `'small'`: A compact window size.
      * - `'medium'`: A standard window size.
      * Default is `'medium'` if not specified.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
     /**
      * The color theme of the window.
      * Restricted to `'default'`, which applies the default theme color.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     color?: Extract<ComponentPalletColor, 'default'>;
     /**
      * Indicates if the window is currently selected.
      * When `true`, the window may display a visual indicator to denote selection.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     selected?: boolean;
     /**
      * The version label for the window.
      * Useful for displaying version information (e.g., `1.0.0`) in the header or footer.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     version?: string;
     /**
      * A unique identifier for automated testing.
      * Provides a `data-testid` attribute for querying this component in tests.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     dataTestId?: string;
     /**
      * Callback function executed when the window is closed.
      * Typically triggered by a close button or similar action.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     onClose?: VoidFunction;
     /**
      * List of actions to display in the window.
      * Each action defines its placement, icon, label, and other properties.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     actions?: WindowBaseAction[];
     /**
      * An optional class name to apply to the root element of the component.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     className?: string;
     /**
      * Indicates if the window is in a loading state.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     isLoading?: boolean;
     /**
      * A unique identifier for the window.
      * This is used to identify and manage multiple windows.
+     * @createdAt 2025-02-07 11:56:13 - automatic
      */
     windowId?: string;
+    /**
+     * "onMouseDown" event handler for the window.
+     * @author cesar - automatic
+     * @createdAt 2025-02-07 11:56:13 - automatic
+     * @updatedAt 2025-02-07 11:56:13 - automatic
+     * @updatedUser cesar - automatic
+     */
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
 }
 /**
  * Type representing the possible values of `WindowBaseSlots`.

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/AreaGridLayout/index.d.ts

@@ -2,5 +2,9 @@ import { GridLayoutProps } from './types';
 /**
  * Retorna el componente GridLayout con las ventanas (layouts) y popups tomados del área de trabajo.
  * @returns JSX
+ * @author cesar - automatic
+ * @createdAt 2025-02-07 08:26:21 - automatic
+ * @updatedAt 2025-02-07 08:26:22 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare const AreaGridLayout: (props: GridLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/InnerForHooks/index.d.ts

@@ -1,5 +1,9 @@
 import { InnerForHooksProps } from './types';
 /**
  * TODO: Documentar
+ * @author cesar - automatic
+ * @createdAt 2025-02-05 09:37:08 - automatic
+ * @updatedAt 2025-02-05 09:37:08 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare const InnerForHooks: (props: InnerForHooksProps) => import("react/jsx-runtime").JSX.Element;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/InnerForHooks/index.js

@@ -1,27 +1,21 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { A as AreaGridLayout } from "../AreaGridLayout/index.js";
-import { P as PanelWindows } from "../PanelWindows/index.js";
 import clsx from "clsx";
 import { a as areasViewerClasses } from "../../../../classes/index.js";
 import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 import { L as LoadingError } from "../../../../../../../LoadingError/LoadingError.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
 const InnerForHooks = (props) => {
   const { areaId } = props;
-  const isDesktop = useResponsiveDesktop();
   const status = useAreasStore((state) => state.hashAreas[areaId].status);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx(
         areasViewerClasses.areaGridLayoutPanelContainer,
         `${areasViewerClasses.areaGridLayoutPanelContainer}-${areaId}`
       ),
-      children: [
-        status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, { areaId }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => {
-        } }),
-        isDesktop ? /* @__PURE__ */ jsx(PanelWindows, { areaId }) : null
-      ]
+      children: status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, { areaId }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => {
+      } })
     }
   );
 };

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

@@ -0,0 +1,32 @@
+import { WindowBaseAction } from '../../../../../../../../../../../src/components/WindowBase';
+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({
+ *   moduleActions: misAcciones,
+ *   windowId: 'win_456',
+ *   areaId: 'area_123',
+ * });
+ * @author cesar - automatic
+ * @createdAt 2025-02-05 08:48:16 - automatic
+ * @updatedAt 2025-02-06 14:50:07 - automatic
+ * @updatedUser cesar - automatic
+ */
+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

@@ -0,0 +1,163 @@
+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 "../../subcomponents/Header/helper.js";
+import { shallow } from "zustand/shallow";
+import { useResponsiveDesktop } from "@m4l/graphics";
+const useHeaderActions = ({
+  windowId,
+  areaId,
+  menuActions = []
+}) => {
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  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(isDesktop, moduleActions).map((action) => ({
+      ...action,
+      place: "left",
+      iconUrl: action.iconUrl || "",
+      label: action.label || ""
+    }));
+  }, [isDesktop, moduleActions]);
+  const windowOptions = useAreasStore(
+    (state) => state.hashWindows[windowId]?.windowOptions,
+    shallow
+  );
+  const { saveModuleCookies, resetModuleCookies } = useAreasStore(
+    (state) => state.windowActions,
+    shallow
+  );
+  const menuActionsInside = useMemo(() => {
+    return getMenuActions({
+      windowId,
+      isDesktop,
+      moduleActions,
+      urlPrefix,
+      saveModuleCookies,
+      resetModuleCookies,
+      windowOptions: windowOptions || { allowPersistCookies: false },
+      getLabel
+    }).map((action) => ({
+      ...action,
+      place: "inside",
+      iconUrl: action.iconUrl || "",
+      label: action.label || ""
+    }));
+  }, [windowId, isDesktop, 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 currentBreakpoint = state.hashAreas[areaId].currentBreakpoint;
+      if (currentBreakpoint) {
+        return state.hashAreas[areaId].layouts[currentBreakpoint].find(
+          (li) => li.i === windowId
+        )?.colapsed;
+      }
+      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)),
+      /**
+       * onClick de la acción de maximize/normalize.
+       * @author cesar - automatic
+       * @createdAt 2025-02-06 14:50:07 - automatic
+       * @updatedAt 2025-02-06 14:50:07 - automatic
+       * @updatedUser cesar - automatic
+       */
+      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)),
+        /**
+         * onClick de la acción de collapse/expand.
+         * @author cesar - automatic
+         * @createdAt 2025-02-06 14:50:07 - automatic
+         * @updatedAt 2025-02-06 14:50:07 - automatic
+         * @updatedUser cesar - automatic
+         */
+        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/hooks/useWindow/useWindow.d.ts

@@ -0,0 +1,35 @@
+import { WindowToolsMF } from '../../../../../../../../../../../src/components/areas/contexts';
+/**
+ * Hook useWindow
+ *
+ * Este hook encapsula toda la lógica relacionada con el estado y las funciones necesarias
+ * para el componente Window. Retorna un objeto con el estado, las acciones y las herramientas
+ * de la ventana.
+ * @param {string} areaId - Identificador del área.
+ * @param {string} windowId - Identificador de la ventana.
+ * @returns {Object} Un objeto con el estado, las acciones y las herramientas de la ventana.
+ * @author cesar - automatic
+ * @createdAt 2025-02-07 15:00:00 - automatic
+ * @updatedAt 2025-02-07 16:17:15 - automatic
+ * @updatedUser cesar - automatic
+ */
+export declare const useWindow: (areaId: string, windowId: string) => {
+    emergeType: "layout" | "popup" | "modal";
+    moduleId: string;
+    winType: "component" | "microfrontend";
+    title: string;
+    iconUrl: string;
+    version: string | undefined;
+    moduleCount: number | undefined;
+    selected: boolean;
+    mfProps: any;
+    component: any;
+    loading: boolean;
+    status: import('../../../../../../../../../../../src/components/areas/types').WindowStatus;
+    dynamicMFStore: Omit<import('zustand').StoreApi<import('../../../../../../../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions>, "setState"> & {
+        setState(nextStateOrUpdater: import('../../../../../../../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions | Partial<import('../../../../../../../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<import('../../../../../../../../contexts/DynamicMFParmsContext/store').DynamicMFStateWithActions>) => void), shouldReplace?: boolean | undefined): void;
+    };
+    windowTools: WindowToolsMF;
+    onTouch: () => void;
+    memoizedActions: import('../../../../../../../../..').WindowBaseAction[];
+};

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

@@ -0,0 +1,88 @@
+import { useMemo, useEffect } from "react";
+import { shallow } from "zustand/shallow";
+import { u as useAreasStore } from "../../../../../../../../hooks/useAreas/index.js";
+import { u as useHeaderActions } from "../useHeaderActions/useHeaderActions.js";
+import { c as createToaster } from "../../../../../../../../../ToastContainer/helpers/toaster.js";
+const useWindow = (areaId, windowId) => {
+  const [emergeType, moduleId, winType, title, iconUrl, version, moduleCount, selected, loading, status, dynamicMFStore] = useAreasStore((state) => {
+    const window = state.hashWindows[windowId];
+    const selected2 = state.hashAreas[areaId]?.currentLayoutId === windowId || state.hashAreas[areaId]?.currentPopUpId === windowId;
+    return [
+      window?.emergeType,
+      window?.moduleId,
+      window?.winType,
+      window?.title,
+      window?.iconUrl,
+      window?.version,
+      window?.moduleCount,
+      selected2,
+      window?.loading,
+      window?.status,
+      window?.dynamicMFStore
+    ];
+  }, shallow);
+  const mfProps = useAreasStore((state) => state.hashWindows[windowId]?.mfProps, shallow);
+  const component = useAreasStore(
+    (state) => state.hashWindows[windowId]?.component,
+    shallow
+  );
+  const { setActions, getCookie, getCookies, setCookie, close, startProgress, stopProgress, setFnQueryClose, setWindowTitle, loadCookiesFromApi } = useAreasStore((state) => state.windowActions, shallow);
+  const { selectLayout } = useAreasStore((state) => state.areaActions, shallow);
+  const onTouch = () => {
+    if (!selected) {
+      selectLayout(areaId, windowId);
+    }
+  };
+  const windowTools = useMemo(
+    () => ({
+      getWindowId: () => windowId,
+      setActions: (newActions) => {
+        setActions(windowId, newActions, version);
+      },
+      getCookie: (id) => getCookie(windowId, id),
+      getCookies: (type) => getCookies(windowId, type),
+      setCookie: (id, type, cookie) => setCookie(windowId, id, type, cookie),
+      close: () => close(windowId),
+      startProgress: () => startProgress(windowId),
+      stopProgress: () => stopProgress(windowId),
+      setFnQueryClose: (fnQueryClose) => setFnQueryClose(windowId, fnQueryClose),
+      toast: createToaster(windowId),
+      setWindowTitle: (newTitle) => setWindowTitle(windowId, newTitle)
+    }),
+    [windowId, version, setActions, getCookie, getCookies, setCookie, close, startProgress, stopProgress, setFnQueryClose, setWindowTitle]
+  );
+  useEffect(() => {
+    if (status === "init") {
+      loadCookiesFromApi(windowId);
+    }
+  }, [status, loadCookiesFromApi, windowId]);
+  const { leftActions, menuActions, rightActions } = useHeaderActions({
+    windowId,
+    areaId,
+    menuActions: []
+  });
+  const memoizedActions = useMemo(() => {
+    return [...leftActions, ...menuActions, ...rightActions];
+  }, [leftActions, menuActions, rightActions]);
+  return {
+    emergeType,
+    moduleId,
+    winType,
+    title,
+    iconUrl,
+    version,
+    moduleCount,
+    selected,
+    mfProps,
+    component,
+    loading,
+    status,
+    dynamicMFStore,
+    windowTools,
+    onTouch,
+    memoizedActions
+  };
+};
+export {
+  useWindow as u
+};

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

@@ -1,7 +1,20 @@
 import { default as React } from 'react';
 import { WindowProps } from './types';
 /**
- * TODO: Documentar
+ * Componente Window
+ *
+ * Este componente se encarga de renderizar la ventana en el AreasViewer.
+ * Lee los datos y configuraciones de la ventana desde el store de Zustand,
+ * crea herramientas para el microfrontend o componente y utiliza un hook
+ * personalizado para definir las acciones del header.
+ * @param {WindowProps} props - Propiedades del componente, que incluyen areaId y windowId.
+ * @returns {JSX.Element|null} Renderiza la ventana o null si aún no se carga.
+ * @example
+ * <Window areaId="area_123" windowId="win_456" />
+ * @author cesar - automatic
+ * @createdAt 2025-02-03 09:18:28 - automatic
+ * @updatedAt 2025-02-07 16:17:15 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare const Window: (props: WindowProps) => import("react/jsx-runtime").JSX.Element | null;
 export declare const MemonizedWindow: React.MemoExoticComponent<(props: WindowProps) => import("react/jsx-runtime").JSX.Element | null>;