@m4l/components 7.0.0 → 7.1.2

package/contexts/RealTimeContext/RealTimeContext.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useRef, useEffect } from "react";
+import { c as createRealTimeStore } from "./store.js";
+import atmosphere from "atmosphere.js";
+const RealTimeContext = createContext(null);
+function RealTimeProvider(props) {
+  const { children, ...other } = props;
+  const realTimeStoreRef = useRef();
+  if (!realTimeStoreRef.current) {
+    realTimeStoreRef.current = createRealTimeStore({
+      ...other
+    });
+  }
+  useEffect(() => {
+    const host = "localhost";
+    const port = "8080";
+    const path = "/servlet-kafka-websockets/events/tracking";
+    const request = {
+      url: `http://${host}:${port}${path}`,
+      contentType: "application/json",
+      logLevel: "debug",
+      transport: "websocket",
+      fallbackTransport: "long-polling",
+      reconnectInterval: 2e3
+    };
+    const socket = atmosphere;
+    let subSocket;
+    request.onOpen = function(_response) {
+      sendValidateRequest();
+    };
+    request.onReopen = function(_response) {
+      sendValidateRequest();
+    };
+    request.onMessage = function(_response) {
+    };
+    request.onClose = function(_response) {
+    };
+    const disconnect = () => {
+      socket.unsubscribe?.();
+    };
+    const connect = () => {
+      disconnect();
+      subSocket = socket.subscribe?.(request);
+    };
+    const sendValidateRequest = () => {
+      subSocket?.push?.(
+        JSON.stringify({
+          action: "subscribe",
+          // "sucribre" | "unsuscribe"
+          session_id: "133gbfd561d51f6eb1er51t1g1",
+          //sesion del usuario
+          version: "1.0.0",
+          //Version de la peticion
+          resource_type_id: "rt_devices",
+          // "rt_devices" | "rt_session"
+          consumer_type: "batch",
+          // "batch" | "one_by_one"
+          rate_limit: 5,
+          //En segundos cuando es en batch
+          resources_id: ["all"],
+          // id de los recursos a los que se suscribe, o puede ser 'all' para incluir todos
+          projections: []
+        })
+      );
+    };
+    connect();
+    return () => {
+      disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(RealTimeContext.Provider, { value: realTimeStoreRef.current, children });
+}
+export {
+  RealTimeProvider as R,
+  RealTimeContext as a
+};

package/contexts/RealTimeContext/index.d.ts

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

package/contexts/RealTimeContext/index.js

@@ -0,0 +1 @@
+

package/contexts/RealTimeContext/store.d.ts

@@ -0,0 +1,19 @@
+import { RealTimeStateWithActions, InitialRealTimeStoreProps } from './types';
+/**
+ * Crea el Store, por defecto inicia en estado 'init'
+ * @param initProps propiedades iniciales del store
+ * @returns
+ */
+/**
+ * TODO: Documentar
+ */
+export declare function createRealTimeStore(initProps: InitialRealTimeStoreProps): Omit<Omit<import('zustand').StoreApi<RealTimeStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: RealTimeStateWithActions | Partial<RealTimeStateWithActions> | ((state: RealTimeStateWithActions) => RealTimeStateWithActions | Partial<RealTimeStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: RealTimeStateWithActions | Partial<RealTimeStateWithActions> | ((state: import('immer/dist/internal').WritableDraft<RealTimeStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+};
+export type RealTimeStoreType = ReturnType<typeof createRealTimeStore>;

package/contexts/RealTimeContext/store.js

@@ -0,0 +1,58 @@
+import { createStore } from "zustand";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import cloneDeep from "lodash.clonedeep";
+import merge from "lodash.merge";
+function createRealTimeStore(initProps) {
+  const startProps = {
+    status: "init",
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, _get) => ({
+        ...startProps,
+        realTimeActions: {
+          /**
+           * TODO: Documentar
+           */
+          init: () => {
+            set((state) => {
+              state.status = "init";
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setResourceDataByMessages: (atmosphereMessage) => {
+            set((state) => {
+              if (atmosphereMessage.type === "event" && Array.isArray(atmosphereMessage?.data.messages)) {
+                atmosphereMessage.data.messages.forEach((message) => {
+                  if (message?.id && (typeof message?.id === "string" || typeof message.id === "number")) {
+                    if (!state.hasResources[message?.id]) {
+                      state.hasResources[message.id] = cloneDeep(message);
+                    } else {
+                      merge(state.hasResources[message.id], message);
+                    }
+                  }
+                });
+              }
+            });
+          },
+          /**
+           * TODO: Documentar
+           */
+          setStatus: (newStatus) => {
+            set((state) => {
+              state.status = newStatus;
+            });
+          }
+        }
+      })),
+      { name: `Real Time Store: ${initProps.storeId}` }
+    )
+  );
+}
+export {
+  createRealTimeStore as c
+};

package/contexts/RealTimeContext/types.d.ts

@@ -0,0 +1,96 @@
+import { ReactNode } from 'react';
+/**
+ * Identificación del tipo de recurso
+ */
+export type ResourceTypeId = 'rt_devices';
+/**
+ * Identificación del recurso
+ */
+export type ResourceId = number | string;
+export interface AthmosphereMessage {
+    id: ResourceId;
+    [key: string | number]: any;
+}
+/**
+ * Estado de la conexión de tiempo real
+ */
+export type RealTimeStatus = 'init' | 'conecting' | 'connected' | 'standby';
+export type AtmosphereMessageType = 'success' | 'event' | 'error';
+export type AtmosphereMessageAction = 'subscribe' | 'unsuscribe' | 'event';
+/**
+ * Mensajes que llegan desde atmosphere
+ */
+export interface AtmosphereMessageResponse {
+    type: 'success';
+    action: 'subscribe' | 'unsuscribe';
+    data: {
+        resources: Record<ResourceId, 'active' | 'inactive' | 'suspended'>;
+    };
+}
+export interface AtmosphereMessageEvent {
+    type: 'event';
+    action: 'event';
+    data: {
+        version: string;
+        type: 'fisrt' | 'update' | 'delete';
+        messages: AthmosphereMessage[];
+    };
+}
+export interface AtmosphereMessageError {
+    type: 'error';
+    action: 'subscribe' | 'unsuscribe';
+    data: {
+        status: number;
+        message: string;
+    };
+}
+export type AtmosphereMessage = AtmosphereMessageResponse | AtmosphereMessageEvent | AtmosphereMessageError;
+/**
+ * Store del tiempo real, actualizado por sockets
+ */
+export interface RealTimeState {
+    /**
+     * Id del store
+     */
+    storeId: string;
+    /**
+     * Estado de la conexión de tiempo real
+     */
+    status: RealTimeStatus;
+    /**
+     * TODO: Documentar
+     */
+    host: string;
+    /**
+     * TODO: Documentar
+     */
+    port: string;
+    /**
+     * TODO: Documentar
+     */
+    path: string;
+    /**
+     * Datos del tiempo real
+     */
+    hasResources: Record<ResourceId, any>;
+}
+export interface RealTimeStateWithActions extends RealTimeState {
+    realTimeActions: {
+        /**
+         * @description
+         */
+        init(): void;
+        /**
+         * Actualiza el store con los mensajes
+         */
+        setResourceDataByMessages: (atmosphereMessage: AtmosphereMessage) => void;
+        /**
+         * Actualiza el estado del store
+         */
+        setStatus: (newState: RealTimeStatus) => void;
+    };
+}
+export type InitialRealTimeStoreProps = Omit<RealTimeState, 'status'>;
+export interface RealTimeProviderProps extends InitialRealTimeStoreProps {
+    children: ReactNode;
+}

package/contexts/index.d.ts

@@ -5,3 +5,4 @@ export type { FormInitialValues, FormStatusLoad, } from '../components/hook-form
 export { RHFormProvider, FormProviderCustom, useCustomForm, } from '../components/hook-form/RHFormContext';
 export { getFormComponentsDictionary } from '../components/hook-form/RHFormContext/dictionary';
 export { useAppearanceComponentStore, AppearanceComponentProvider, } from './AppearanceComponentContext';
+export * from './RealTimeContext';

package/contexts/index.js

@@ -0,0 +1 @@
+

package/helpers/cookies/cookies.d.ts

@@ -1,4 +1,13 @@
-import type { CookiesDeleteProps, CookiesGetProps, CookiesPutProps } from './types';
+import { CookiesDeleteProps, CookiesGetProps, CookiesPutProps } from './types';
+/**
+ * TODO: Documentar
+ */
 export declare function getCookie({ networkOperation, params, withToast, }: CookiesGetProps): Promise<any>;
+/**
+ * TODO: Documentar
+ */
 export declare function setCookie({ networkOperation, endPoint, value, withToast, }: CookiesPutProps): Promise<any>;
+/**
+ * TODO: Documentar
+ */
 export declare function deleteCookie({ networkOperation, data, withToast, }: CookiesDeleteProps): Promise<any>;

package/helpers/cookies/cookies.js

@@ -0,0 +1,45 @@
+function getCookie({
+  networkOperation,
+  params,
+  withToast = {}
+}) {
+  return networkOperation({
+    method: "GET",
+    endPoint: "cookies",
+    parms: params ?? {},
+    toastSuccess: withToast?.success ?? false,
+    toastError: withToast?.error ?? false
+  });
+}
+function setCookie({
+  networkOperation,
+  endPoint,
+  value,
+  withToast = {}
+}) {
+  return networkOperation({
+    method: "PUT",
+    endPoint: `cookies/${endPoint}`,
+    data: { value: JSON.stringify(value) },
+    toastSuccess: withToast?.success ?? false,
+    toastError: withToast?.error ?? false
+  });
+}
+function deleteCookie({
+  networkOperation,
+  data,
+  withToast = {}
+}) {
+  return networkOperation({
+    method: "DELETE",
+    endPoint: "cookies",
+    data,
+    toastSuccess: withToast?.success ?? false,
+    toastError: withToast?.error ?? false
+  });
+}
+export {
+  deleteCookie as d,
+  getCookie as g,
+  setCookie as s
+};

package/helpers/cookies/index.js

@@ -0,0 +1 @@
+

package/helpers/cookies/types.d.ts

@@ -1,8 +1,8 @@
-import type { NetworkProps } from '@m4l/core';
+import { NetworkProps } from '@m4l/core';
 /**
  * Type que se usa para definir los filtros del api de cookies
  */
-declare type CookieField = {
+type CookieField = {
     /**
      * n define el nombre del campo, para las cookies se usa 'container_id' | 'id' que se envian en el endPoint al guardar una cookie
      * Ejemplo del endPoint `cookies/container_id/id` con valores sería `cookies/123/456`
@@ -19,7 +19,7 @@ declare type CookieField = {
      */
     o1: string | number;
 };
-export declare type CookieParams = {
+export type CookieParams = {
     f: CookieField[];
 };
 interface CookieFunctionBase {

package/hocs/index.js

@@ -0,0 +1 @@
+

package/hocs/withSizeProvider/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_CONTAINER_WIDTH = 1280;
+export declare const DEFAULT_CONTAINER_HEIGHT = 480;

package/hocs/withSizeProvider/index.d.ts

@@ -0,0 +1,5 @@
+import { HOCWithSizeProviderProps, SizeProviderComponentProps } from './types';
+/**
+ * TODO: Documentar
+ */
+export declare function withSizeProvider<T extends SizeProviderComponentProps>(Component: React.ComponentType<T>): (props: HOCWithSizeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/hocs/withSizeProvider/types.d.ts

@@ -0,0 +1,25 @@
+export interface SizeProviderComponentProps {
+    /**
+     * Requerido para detectar el cambio de ancho del contenedor
+     */
+    containerWidth?: number | undefined;
+    /**
+     * Requerido para detectar el cambio de altura del contenedor
+     */
+    containerHeight?: number | undefined;
+}
+export type WidthProviderProps = {};
+export type HOCWithSizeProviderProps = {
+    /**
+     * If true, withSizeProvider will measure the container's width before mounting children.
+     * Use this if you'd like to completely eliminate any resizing animation on
+     * application/component mount.
+     */
+    measureBeforeMount?: boolean | undefined;
+    /**
+     * Referencia el contendedor que se va a observar
+     */
+    containerRef: React.RefObject<HTMLDivElement>;
+    defaultContainerWidth?: number;
+    defaultContainerHeight?: number;
+};

package/hocs/withToggle/index.d.ts

@@ -1,3 +1,6 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ToggleableProps } from './types';
+/**
+ * TODO: Documentar
+ */
 export declare function withToggle<T extends ToggleableProps>(Component: React.ComponentType<T>): (props: T) => import("react/jsx-runtime").JSX.Element;

package/hocs/withToggle/index.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+function withToggle(Component) {
+  return (props) => {
+    const { isToggled: propIsToggled, onToggle: propOnToggle, ...rest } = props;
+    const [internalIsToggled, setInternalIsToggled] = useState(props.defaultIsPressed || false);
+    const isToggled = propIsToggled !== void 0 ? propIsToggled : internalIsToggled;
+    const onToggle = propOnToggle !== void 0 ? propOnToggle : () => setInternalIsToggled((prev) => !prev);
+    return /* @__PURE__ */ jsx(Component, { ...rest, onToggle, isToggled });
+  };
+}
+export {
+  withToggle as w
+};

package/hocs/withToggle/types.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 export interface ToggleableProps {
     isToggled?: boolean;
     onToggle?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     defaultIsPressed?: boolean;
 }
-export declare type ComponentWithToggleProps = {
+export type ComponentWithToggleProps = {
     onToggle: (e: React.MouseEvent<HTMLButtonElement>, isPressed?: boolean) => void;
     defaultIsPressed?: boolean;
     isPressed?: boolean;

package/hooks/index.js

@@ -0,0 +1 @@
+

package/hooks/useComponentSize/index.js

@@ -0,0 +1 @@
+

package/hooks/useComponentSize/useComponentSize.d.ts

@@ -1,7 +1,7 @@
 import { Sizes } from '@m4l/styles';
 /**
  * hook usado para obtener el valor por defecto para los componentes que usan la prop size
- * @return { currentSize, setDefaultSize } objeto con el valor por default del size y la función para cambiarlo
+ * @returns objeto con el valor por default del size y la función para cambiarlo
  */
 export declare function useComponentSize(componentSize?: Sizes | null | undefined): {
     currentSize: Sizes;

package/hooks/useComponentSize/useComponentSize.js

@@ -0,0 +1,9 @@
+import { u as useAppearanceComponentStore } from "../../contexts/AppearanceComponentContext/useAppearanceComponentStore.js";
+function useComponentSize(componentSize = null) {
+  const defaultSize = useAppearanceComponentStore((state) => state.defaultSize);
+  const setDefaultSize = useAppearanceComponentStore((state) => state.actions.setDefaultSize);
+  return { currentSize: componentSize ?? defaultSize, setDefaultSize };
+}
+export {
+  useComponentSize as u
+};

package/hooks/useComponentSize/useComponentSize.stories.d.ts

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Sizes } from '@m4l/styles';
+/**
+ * TODO: Documentar
+ */
+declare const ComponentSizeBase: ({ propSize }: {
+    propSize?: Sizes;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook usado para obtener el valor por default para la propiedad `size` de los componentes.
+ *
+ * El hook está en la ruta `packages/m4l_components/src/hooks/useComponentSize/useComponentSize.ts`.
+ *
+ * Ejemplo:
+ *
+ * ```jsx
+ *  import { useComponentSize } from './useComponentSize';
+ *
+ *  const Button = ({ size }) => {
+ *   // currentSize sería la variable que debemos usar para calcular el size del componente en los estilos.
+ *   const { currentSize } = useComponentSize(size);
+ *
+ *   return (...);
+ * };
+ * ```
+ *
+ * El valor por defecto para toda la aplicación se encuentra en `packages/m4l_styles/src/config.ts`
+ * y es `'medium'`, se puede obtener de la constante `DEFAULT_SIZE` desde `@m4l/styles`.
+ *
+ * Este valor por defecto es pasado a través del contexto `AppearanceComponentProvider` que se
+ * encuentra en `packages/m4l_components/src/contexts/AppearanceComponentContext/AppearanceComponentContext.tsx`
+ */
+declare const meta: Meta<typeof ComponentSizeBase>;
+export default meta;
+type Story = StoryObj<typeof ComponentSizeBase>;
+/**
+ * Base useComponentSize hook, cuando no se envía el size `currentSize` es el valor por default
+ */
+export declare const Base: Story;
+/**
+ * With prop size
+ */
+export declare const WithPropSize: Story;
+/**
+ * With inner context
+ */
+export declare const WithInnerContext: Story;

package/hooks/useFormAddEdit/dictionary.js

@@ -0,0 +1,6 @@
+const getformAddEditDictionary = () => {
+  return "form_add_edit";
+};
+export {
+  getformAddEditDictionary as g
+};

package/hooks/useFormAddEdit/index.d.ts

@@ -1,6 +1,9 @@
 import { FormStatusLoad } from '../../components/hook-form/RHFormContext/types';
 import { UseFormAddEditProps } from './types';
 import { FieldValues } from 'react-hook-form';
+/**
+ * TODO: Documentar
+ */
 export declare function useFormAddEdit<TValues extends FieldValues = FieldValues, TEndpointValues extends FieldValues = FieldValues>(props: UseFormAddEditProps<TValues, TEndpointValues>): {
     formValues: TValues;
     statusLoad: FormStatusLoad;

package/hooks/useFormAddEdit/index.js

@@ -0,0 +1,86 @@
+import { jsx } from "react/jsx-runtime";
+import { useNetwork, useFlagsStore, useModuleDictionary } from "@m4l/core";
+import { useState, useEffect } from "react";
+import { u as useModal } from "../useModal/index.js";
+import { W as WindowConfirm } from "../../components/modal/WindowConfirm/index.js";
+function useFormAddEdit(props) {
+  const {
+    initialValues,
+    objectId,
+    endPoint,
+    formatDataEnpoint,
+    queryParamas,
+    isRemote = true,
+    omitCallEnpoint = false
+  } = props;
+  const { openModal } = useModal();
+  const [formValues, setFormValues] = useState(initialValues);
+  const [statusLoad, setStatusLoad] = useState(
+    objectId === void 0 ? "new" : "edit"
+  );
+  const { networkOperation } = useNetwork();
+  const addFlag = useFlagsStore((state) => state.flagsActions.addFlag);
+  const { getLabel } = useModuleDictionary();
+  const setRefresh = () => {
+    if (statusLoad === "ready") {
+      setStatusLoad("edit");
+    }
+  };
+  useEffect(() => {
+    let mounted = true;
+    if (statusLoad === "edit") {
+      if (omitCallEnpoint) {
+        addFlag("form_loaded");
+        setStatusLoad("ready");
+        return;
+      }
+      networkOperation({
+        method: "GET",
+        endPoint: queryParamas ? `${endPoint}/${objectId}?${queryParamas}` : `${endPoint}/${objectId}`,
+        isRemote
+      }).then(
+        (response) => {
+          if (mounted) {
+            if (formatDataEnpoint) {
+              setFormValues(formatDataEnpoint(response));
+            } else {
+              setFormValues(response.data);
+            }
+            setStatusLoad("reload_values_provider");
+          }
+        },
+        () => {
+          setStatusLoad("error");
+          openModal({
+            window: /* @__PURE__ */ jsx(
+              WindowConfirm,
+              {
+                variant: "delete",
+                title: getLabel("form_add_edit.label_error_title"),
+                msg: getLabel("form_add_edit.error_authorization_message"),
+                onClickIntro: () => close()
+              }
+            ),
+            variant: "delete"
+          });
+          addFlag("form_loaded");
+        }
+      );
+    } else if (statusLoad === "new" || statusLoad === "reload_values_provider") {
+      addFlag("form_loaded");
+      setStatusLoad("ready");
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [statusLoad]);
+  useEffect(() => {
+    if (statusLoad === "ready" && objectId !== void 0) {
+      setStatusLoad("edit");
+    }
+  }, [objectId]);
+  return { formValues, statusLoad, setRefresh };
+}
+export {
+  useFormAddEdit as u
+};

package/hooks/useFormAddEdit/types.d.ts

@@ -1,5 +1,5 @@
 import { FieldValues } from 'react-hook-form';
-export declare type ResponseEndpoint<TEndpointValues = FieldValues> = {
+export type ResponseEndpoint<TEndpointValues = FieldValues> = {
     data: TEndpointValues;
 };
 export interface UseFormAddEditProps<TValues = FieldValues, TEndpointValues = FieldValues> {

package/hooks/useFormFocus/index.d.ts

@@ -4,4 +4,7 @@ import { FormFocusHookReturnType } from './types';
  * componentes de formulario. Aporta los estados Focus, TabSelected y
  *
  */
+/**
+ * TODO: Documentar
+ */
 export declare const useFormFocus: <ElmentType extends HTMLElement>() => FormFocusHookReturnType<ElmentType>;

package/hooks/useFormFocus/index.js

@@ -0,0 +1,21 @@
+import { useState } from "react";
+const useFormFocus = () => {
+  const [isFocus, setIsFocus] = useState(false);
+  const [isTabSelected, setIsTabSelected] = useState(false);
+  const handlerFocus = () => {
+    setIsFocus(true);
+  };
+  const handlerOnKeyUp = (event) => {
+    if (event.key === "Tab") {
+      setIsTabSelected(true);
+    }
+  };
+  const handlerOnBlur = () => {
+    setIsFocus(false);
+    setIsTabSelected(false);
+  };
+  return { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur };
+};
+export {
+  useFormFocus as u
+};

package/hooks/useFormReadyForUpdate/index.js

@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+function useFormReadyForUpdate() {
+  const [readyToUpdate, setReadyToUpdate] = useState(false);
+  const { control } = useFormContext();
+  const statusLoad = useWatch({
+    control,
+    name: "statusLoad"
+  });
+  useEffect(() => {
+    if (statusLoad !== "ready") {
+      return;
+    }
+    setReadyToUpdate(true);
+  }, [statusLoad]);
+  return readyToUpdate;
+}
+export {
+  useFormReadyForUpdate as u
+};