@m4l/layouts 1.0.4 → 2.0.0

package/components/MFHostApp/index.6286a793.js

@@ -0,0 +1,78 @@
+import { unstable_HistoryRouter } from "react-router-dom";
+import { EnvironmentProvider, HostToolsProvider, NetworkProvider, DomainCountryProvider } from "@m4l/core";
+import { LocalesProvider, HostThemeProvider, ResponsiveContainerProvider, FormatterProvider } from "@m4l/graphics";
+import { BaseModule, WindowToolsMFProvider, DynamicMFParmsProvider } from "@m4l/components";
+import { jsx } from "react/jsx-runtime";
+function MFHostApp(props) {
+  const {
+    children,
+    currentLocale,
+    hostTheme,
+    environment,
+    hostTools,
+    axiosOperation,
+    formatters,
+    isAuth = true,
+    moduleId,
+    moduleNameField,
+    skeletonFlags,
+    privileges,
+    componentsDictionary,
+    dynamicMFStore,
+    windowTools,
+    observedDivRef
+  } = props;
+  return /* @__PURE__ */ jsx(EnvironmentProvider, {
+    ...environment,
+    children: /* @__PURE__ */ jsx(HostToolsProvider, {
+      ...hostTools,
+      children: /* @__PURE__ */ jsx(NetworkProvider, {
+        axiosOperation,
+        children: /* @__PURE__ */ jsx(LocalesProvider, {
+          isMicroFrontEnd: true,
+          localeHost: currentLocale,
+          children: /* @__PURE__ */ jsx(HostThemeProvider, {
+            isMicroFrontEnd: true,
+            ...hostTheme,
+            children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, {
+              observedDivRef,
+              children: /* @__PURE__ */ jsx(unstable_HistoryRouter, {
+                history: hostTools.history,
+                children: /* @__PURE__ */ jsx(DomainCountryProvider, {
+                  isMicroFrontEnd: true,
+                  id: dynamicMFStore?.getState().dynamicMFParameters?.id || 1,
+                  currency: formatters.currencyFormatter.code,
+                  currency_decimal_digits: formatters.currencyFormatter.decimalDigits,
+                  decimal_symbol: formatters.numberFormatter.decimalSymbol,
+                  thousands_symbol: formatters.numberFormatter.thousandsSymbol,
+                  children: /* @__PURE__ */ jsx(BaseModule, {
+                    isAuth,
+                    moduleId,
+                    moduleNameField,
+                    componentsDictionary,
+                    skeletonFlags,
+                    privileges,
+                    children: /* @__PURE__ */ jsx(FormatterProvider, {
+                      isMicroFrontEnd: true,
+                      ...formatters,
+                      children: /* @__PURE__ */ jsx(WindowToolsMFProvider, {
+                        ...windowTools,
+                        children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
+                          store: dynamicMFStore,
+                          children
+                        })
+                      })
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+}
+export {
+  MFHostApp as M
+};

package/components/MFHostApp/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { MFHostAppProps } from './types';
+export declare function MFHostApp(props: MFHostAppProps): import("react").JSX.Element;
+export default MFHostApp;

package/components/MFHostApp/types.d.ts

@@ -0,0 +1,16 @@
+import type { AxiosOperation, EnvironmentType, HostToolsType } from '@m4l/core';
+import { Formatters, LocaleType } from '@m4l/graphics';
+import { DynamicMFStore, WindowToolsMF, BaseModuleProps } from '@m4l/components';
+import { HostThemeType } from '@m4l/graphics';
+export interface ByHostProps {
+    environment: EnvironmentType;
+    hostTools: HostToolsType;
+    hostTheme: HostThemeType;
+    currentLocale: LocaleType;
+    axiosOperation: AxiosOperation;
+    formatters: Formatters;
+    dynamicMFStore: DynamicMFStore;
+    windowTools: WindowToolsMF;
+    observedDivRef: Element | Text | null;
+}
+export declare type MFHostAppProps = ByHostProps & BaseModuleProps;

package/components/MFNoAuthApp/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { MFNoAuthAppProps } from './types';
+export declare function MFNoAuthApp(props: MFNoAuthAppProps): import("react").JSX.Element;
+export default MFNoAuthApp;

package/components/MFNoAuthApp/types.d.ts

@@ -0,0 +1,9 @@
+import { Formatters } from '@m4l/graphics';
+import { WindowToolsMF, BaseModuleProps } from '@m4l/components';
+export interface ByHostProps {
+    formatters: Formatters;
+    windowTools: WindowToolsMF;
+}
+export interface MFNoAuthAppProps extends ByHostProps, BaseModuleProps {
+    observedDivRef: Element | Text | null;
+}

package/components/index.56bd7864.js

@@ -0,0 +1,47 @@
+import { DomainCountryProvider } from "@m4l/core";
+import { FormatterProvider, ResponsiveContainerProvider } from "@m4l/graphics";
+import { BaseModule } from "@m4l/components";
+import { jsx } from "react/jsx-runtime";
+function MFNoAuthApp(props) {
+  const {
+    children,
+    formatters,
+    moduleId,
+    moduleNameField,
+    skeletonFlags,
+    privileges,
+    componentsDictionary,
+    isAuth,
+    observedDivRef
+  } = props;
+  const domianCountry = {
+    id: 1,
+    currency: "USD",
+    currency_decimal_digits: 2,
+    decimal_symbol: ".",
+    thousands_symbol: ","
+  };
+  return /* @__PURE__ */ jsx(DomainCountryProvider, {
+    isMicroFrontEnd: true,
+    ...domianCountry,
+    children: /* @__PURE__ */ jsx(BaseModule, {
+      isAuth,
+      moduleId,
+      moduleNameField,
+      componentsDictionary,
+      skeletonFlags,
+      privileges,
+      children: /* @__PURE__ */ jsx(FormatterProvider, {
+        isMicroFrontEnd: true,
+        ...formatters,
+        children: /* @__PURE__ */ jsx(ResponsiveContainerProvider, {
+          observedDivRef,
+          children
+        })
+      })
+    })
+  });
+}
+export {
+  MFNoAuthApp as M
+};

package/components/index.d.ts

@@ -0,0 +1,3 @@
+export { MFNoAuthApp } from './MFNoAuthApp';
+export { MFHostApp } from './MFHostApp';
+export type { ByHostProps } from './MFHostApp/types';

package/contexts/AuthContext/index.59755369.js

@@ -0,0 +1,160 @@
+import { createContext, useReducer, useEffect } from "react";
+import { useHostTools, useNetwork, useEnvironment, useLocalStorageWithListener, EmitEvents, getLocalStorage, setLocalStorage } from "@m4l/core";
+import { jsx } from "react/jsx-runtime";
+var EnumTypes = /* @__PURE__ */ ((EnumTypes2) => {
+  EnumTypes2["Initial"] = "INITIALIZE";
+  EnumTypes2["Login"] = "LOGIN";
+  EnumTypes2["Logout"] = "LOGOUT";
+  return EnumTypes2;
+})(EnumTypes || {});
+const initialState = {
+  isAuthenticated: false,
+  isInitialized: false,
+  user: null
+};
+const JWTReducer = (state, action) => {
+  switch (action.type) {
+    case "INITIALIZE":
+      return {
+        isAuthenticated: action.payload.isAuthenticated,
+        isInitialized: true,
+        user: action.payload.user
+      };
+    case "LOGIN":
+      return {
+        ...state,
+        isAuthenticated: true,
+        user: action.payload.user
+      };
+    case "LOGOUT":
+      return {
+        ...state,
+        isAuthenticated: false,
+        user: null
+      };
+    default:
+      return state;
+  }
+};
+const AuthContext = createContext(null);
+function dispatchInitial(dispatch) {
+  dispatch({
+    type: EnumTypes.Initial,
+    payload: {
+      isAuthenticated: false,
+      user: null
+    }
+  });
+}
+function AuthProvider(props) {
+  const {
+    children
+  } = props;
+  const [state, dispatch] = useReducer(JWTReducer, initialState);
+  const {
+    events_add_listener
+  } = useHostTools();
+  const {
+    networkOperation
+  } = useNetwork();
+  const {
+    domain_token
+  } = useEnvironment();
+  const [nextValSession, setNextValSession] = useLocalStorageWithListener(
+    "vSession",
+    new Date().getTime() + ""
+  );
+  useEffect(() => {
+    const initialize = async () => {
+      networkOperation({
+        method: "GET",
+        endPoint: `auth/login`,
+        parms: {
+          user_data: true
+        },
+        checkUnAuthorized: false
+      }).then((response) => {
+        dispatch({
+          type: EnumTypes.Initial,
+          payload: {
+            isAuthenticated: true,
+            user: response.user
+          }
+        });
+        const useSaved = getLocalStorage("userData", {
+          email: response.user.email,
+          remember: true
+        });
+        if (useSaved?.email !== response.user.email) {
+          setLocalStorage("userData", {
+            email: response.user.email
+          }, true);
+        }
+      }).catch(() => {
+        dispatchInitial(dispatch);
+      });
+    };
+    initialize();
+  }, [nextValSession]);
+  const login = async (email, password, remember) => {
+    await networkOperation({
+      endPoint: `auth/login`,
+      method: "POST",
+      data: {
+        email,
+        password,
+        domain_token
+      }
+    }).then((response) => {
+      const user = response.data;
+      if (remember) {
+        setLocalStorage("userData", {
+          email,
+          remember
+        });
+      } else {
+        setLocalStorage("userData", {
+          email: "",
+          remember
+        });
+      }
+      dispatch({
+        type: EnumTypes.Login,
+        payload: {
+          user
+        }
+      });
+      setNextValSession(new Date().getTime() + "");
+    });
+  };
+  const logout = async (isAuthenticated) => {
+    if (isAuthenticated) {
+      await networkOperation({
+        endPoint: `auth/logout`,
+        method: "POST"
+      });
+    }
+    dispatch({
+      type: EnumTypes.Logout
+    });
+    setNextValSession(new Date().getTime() + "");
+  };
+  const onNetserviceUnautorized = () => {
+    logout(false);
+  };
+  useEffect(() => {
+    events_add_listener(EmitEvents.EMMIT_EVENT_NET_SERVICE_UNAUTHORIZED, onNetserviceUnautorized);
+  }, []);
+  return /* @__PURE__ */ jsx(AuthContext.Provider, {
+    value: {
+      ...state,
+      login,
+      logout
+    },
+    children
+  });
+}
+export {
+  AuthContext as A,
+  AuthProvider as a
+};

package/contexts/AuthContext/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { AuthProviderProps, SessionContextType } from './types';
+declare const AuthContext: import("react").Context<SessionContextType | null>;
+declare function AuthProvider(props: AuthProviderProps): import("react").JSX.Element;
+export { AuthContext, AuthProvider };

package/contexts/AuthContext/types.d.ts

@@ -0,0 +1,51 @@
+import { DomainCountry, Maybe } from '@m4l/core';
+import { ReactNode } from 'react';
+export declare enum EnumTypes {
+    Initial = "INITIALIZE",
+    Login = "LOGIN",
+    Logout = "LOGOUT"
+}
+export declare type AuthProviderProps = {
+    children: ReactNode;
+};
+export declare type ActionMap<M extends {
+    [index: string]: any;
+}> = {
+    [Key in keyof M]: M[Key] extends undefined ? {
+        type: Key;
+    } : {
+        type: Key;
+        payload: M[Key];
+    };
+};
+export declare type SessionAuthPayload = {
+    [EnumTypes.Initial]: {
+        isAuthenticated: boolean;
+        user: AuthUser;
+    };
+    [EnumTypes.Login]: {
+        user: AuthUser;
+    };
+    [EnumTypes.Logout]: undefined;
+};
+export declare type SessionActions = ActionMap<SessionAuthPayload>[keyof ActionMap<SessionAuthPayload>];
+export interface User {
+    email: string;
+    id: number;
+    first_name: string;
+    last_name: string;
+    account_id: number;
+    domain_country: DomainCountry;
+    avatar_url?: Maybe<string>;
+    user_type_id?: number;
+}
+export declare type AuthUser = Maybe<User>;
+export declare type AuthState = {
+    isAuthenticated: boolean;
+    isInitialized: boolean;
+    user: AuthUser;
+};
+export interface SessionContextType extends AuthState {
+    login: (email: string, password: string, remember: boolean) => object | undefined;
+    logout: (isAuthenticated: boolean) => Promise<void>;
+}

package/contexts/index.d.ts

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

package/contexts/index.ee173661.js

@@ -0,0 +1 @@
+

package/hooks/index.77acdde7.js

@@ -0,0 +1 @@
+

package/{dist/hooks → hooks}/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useMasterDetail';
+export * from './useAuth';
 export * from './useModule';

package/hooks/useAuth/index.ae68bf71.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { A as AuthContext } from "../../contexts/AuthContext/index.59755369.js";
+const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context)
+    throw new Error("Auth context must be use inside AuthProvider");
+  return context;
+};
+export {
+  useAuth as u
+};

package/hooks/useAuth/index.d.ts

@@ -0,0 +1,2 @@
+export declare const useAuth: () => import("../../contexts/AuthContext/types").SessionContextType;
+export default useAuth;

package/{dist/hooks/useMasterDetail/index.js → hooks/useMasterDetail/index.d45f2a86.js}

@@ -1,4 +1,6 @@
 import { useContext } from "react";
-import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/index.js";
+import { M as MasterDetailContext } from "../../layouts/MasterDetailLayout/index.748f7ada.js";
 const useMasterDetail = () => useContext(MasterDetailContext);
-export { useMasterDetail as u };
+export {
+  useMasterDetail as u
+};

package/{dist/hooks/useModule/index.js → hooks/useModule/index.b5f598b1.js}

@@ -1,9 +1,11 @@
 import { useContext } from "react";
-import { M as ModuleContext } from "../../layouts/ModuleLayout/index.js";
+import { M as ModuleContext } from "../../layouts/ModuleLayout/index.e7218171.js";
 const useModule = () => {
   const context = useContext(ModuleContext);
   if (!context)
     throw new Error("useModule context must be use inside ModuleContext");
   return context;
 };
-export { useModule as u };
+export {
+  useModule as u
+};

package/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './contexts';
+export * from './layouts';
+export * from './hooks';

package/index.js

@@ -0,0 +1,36 @@
+import { M } from "./components/index.56bd7864.js";
+import { M as M2 } from "./components/MFHostApp/index.6286a793.js";
+import { A, a } from "./contexts/AuthContext/index.59755369.js";
+import { a as a2, d, g } from "./layouts/ModuleLayout/index.e7218171.js";
+import { a as a3, d as d2, g as g2 } from "./layouts/MasterDetailLayout/index.748f7ada.js";
+import { N, d as d3, g as g3 } from "./layouts/NoAuthModuleLayout/index.83cd3ea3.js";
+import { u } from "./hooks/useMasterDetail/index.d45f2a86.js";
+import { u as u2 } from "./hooks/useAuth/index.ae68bf71.js";
+import { u as u3 } from "./hooks/useModule/index.b5f598b1.js";
+import "@m4l/core";
+import "@m4l/graphics";
+import "@m4l/components";
+import "react/jsx-runtime";
+import "react-router-dom";
+import "react";
+import "@mui/material/styles";
+import "@mui/material";
+import "@mui/base";
+export {
+  A as AuthContext,
+  a as AuthProvider,
+  M2 as MFHostApp,
+  M as MFNoAuthApp,
+  a3 as MasterDetailLayout,
+  a2 as ModuleLayout,
+  N as NoAuthModuleLayout,
+  d2 as defaultMasterDetailDictionary,
+  d as defaultModuleLayoutDictionary,
+  d3 as defaultNoAuthModuleLayoutDictionary,
+  g2 as getMasterDetailLayoutComponentsDictionary,
+  g as getModuleLayoutComponentsDictionary,
+  g3 as getNoAuthModuleLayoutComponentsDictionary,
+  u2 as useAuth,
+  u as useMasterDetail,
+  u3 as useModule
+};

package/{dist/layouts/MasterDetailLayout/index.d.ts → layouts/MasterDetailLayout/MasterDetailLayout.d.ts}

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { MasterDetailLayoutProps } from './types';
-export declare function MasterDetailLayout(props: MasterDetailLayoutProps): JSX.Element;
+export declare function MasterDetailLayout(props: MasterDetailLayoutProps): import("react").JSX.Element;

package/layouts/MasterDetailLayout/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LMasterDetailLayout";

package/layouts/MasterDetailLayout/classes/index.d.ts

@@ -0,0 +1,6 @@
+import { MasterDetailLayoutClassesType } from './types';
+export declare const masterDetailLayoutClasses: MasterDetailLayoutClassesType;
+export declare function getMasterDetailLayoutUtilityClass(slot: string): string;
+export declare const useMasterDetailLayoutUtilityClasses: () => {
+    root: string;
+};

package/layouts/MasterDetailLayout/classes/types.d.ts

@@ -0,0 +1,6 @@
+import { useMasterDetailLayoutUtilityClasses } from ".";
+export interface MasterDetailLayoutClassesType {
+    root: string;
+}
+export declare type MasterDetailLayoutClassesKey = keyof MasterDetailLayoutClassesType;
+export declare type Classes = ReturnType<typeof useMasterDetailLayoutUtilityClasses>;

package/{dist/layouts → layouts}/MasterDetailLayout/contexts/MasterDetailContext/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { MasterDetailContextProps, MasterDetailProviderProps } from './types';
 declare const MasterDetailContext: import("react").Context<MasterDetailContextProps>;
-declare function MasterDetailProvider(props: MasterDetailProviderProps): JSX.Element;
+declare function MasterDetailProvider(props: MasterDetailProviderProps): import("react").JSX.Element;
 export { MasterDetailProvider, MasterDetailContext };

package/{dist/layouts → layouts}/MasterDetailLayout/contexts/MasterDetailContext/types.d.ts

@@ -4,10 +4,9 @@ export interface MasterDetailContextStateProps {
     masterSelection?: MasterSelecion;
 }
 export interface MasterDetailProviderProps {
-    masterSelection: MasterSelecion;
-    setMasterSelection: (newMasterSelecion: MasterSelecion) => void;
     children: ReactNode;
+    onClickViewDetail: () => void;
 }
-export interface MasterDetailContextProps extends MasterDetailContextStateProps {
+export interface MasterDetailContextProps extends MasterDetailContextStateProps, Pick<MasterDetailProviderProps, 'onClickViewDetail'> {
     onChangeMasterSelection: (newMasterSelection: MasterSelecion) => void;
 }