@m4l/graphics 0.0.15 → 0.0.19

package/dist/contexts/HostThemeContext/index.js

@@ -0,0 +1,71 @@
+import { createContext, useState, useMemo, useCallback, useEffect } from "react";
+import { CssBaseline } from "@mui/material";
+import { createTheme, StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
+import { voidFunction, useHostTools, EmitEvents } from "@m4l/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+const initialValue = {
+  hostThemeOptions: {},
+  fnComponentsOverrides: voidFunction
+};
+const HostThemeContext = createContext(initialValue);
+function HostThemeProvider(props) {
+  const {
+    children,
+    hostThemeOptions,
+    fnComponentsOverrides,
+    isMicroFrontEnd
+  } = props;
+  const [finalThemeOptions, setFinalThemeOptions] = useState(hostThemeOptions);
+  const {
+    events_add_listener,
+    events_remove_listener,
+    events_emit
+  } = useHostTools();
+  const [isFirstTime, setIsFirstTime] = useState(true);
+  const finalTheme = useMemo(() => {
+    const theme = createTheme(finalThemeOptions);
+    theme.components = fnComponentsOverrides(theme);
+    return theme;
+  }, [finalThemeOptions]);
+  const onUpdateOverrides = useCallback((newThemeOptions) => {
+    console.debug("Emit HostThemeProvider", newThemeOptions);
+    setFinalThemeOptions(newThemeOptions);
+  }, []);
+  useEffect(() => {
+    if (isMicroFrontEnd) {
+      events_add_listener(EmitEvents.EMMIT_EVENT_HOST_THEME_CHANGE, onUpdateOverrides);
+    }
+    return () => {
+      if (isMicroFrontEnd) {
+        console.log("****** REMOVE LISTENER host_theme_change");
+        events_remove_listener("host_theme_change", onUpdateOverrides);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (isFirstTime) {
+      setIsFirstTime(false);
+      return;
+    }
+    if (!isMicroFrontEnd) {
+      setFinalThemeOptions(hostThemeOptions);
+      events_emit(EmitEvents.EMMIT_EVENT_HOST_THEME_CHANGE, hostThemeOptions);
+    }
+  }, [hostThemeOptions]);
+  return /* @__PURE__ */ jsx(HostThemeContext.Provider, {
+    value: {
+      hostThemeOptions: finalThemeOptions,
+      fnComponentsOverrides
+    },
+    children: /* @__PURE__ */ jsx(StyledEngineProvider, {
+      injectFirst: true,
+      children: /* @__PURE__ */ jsxs(ThemeProvider, {
+        theme: finalTheme,
+        children: [/* @__PURE__ */ jsx(CssBaseline, {
+          enableColorScheme: true
+        }), children]
+      })
+    })
+  });
+}
+export { HostThemeContext as H, HostThemeProvider as a };

package/dist/contexts/LocalesContext/index.js

@@ -0,0 +1,46 @@
+import { createContext, useMemo, useState } from "react";
+import esLocale from "date-fns/locale/es";
+import frLocale from "date-fns/locale/fr";
+import enLocale from "date-fns/locale/en-US";
+import { useLocalStorage, useEnvironment } from "@m4l/core";
+import { jsx } from "react/jsx-runtime";
+const LocalesContext = createContext(null);
+function LocalesProvider({
+  children
+}) {
+  const [langStorage, setLangStorage] = useLocalStorage("langStorage", "en");
+  const {
+    host_static_assets,
+    environment
+  } = useEnvironment();
+  const LANGS = useMemo(() => [{
+    label: "English",
+    value: "en",
+    locale: enLocale,
+    icon: `${host_static_assets}/${environment}/frontend/commons/assets/icons/langs/lang_en.svg`
+  }, {
+    label: "Espa\xF1ol",
+    value: "es",
+    locale: esLocale,
+    icon: `${host_static_assets}/${environment}/frontend/commons/assets/icons/langs/lang_es.svg`
+  }, {
+    label: "French",
+    value: "fr",
+    locale: frLocale,
+    icon: `${host_static_assets}/${environment}/frontend/commons/assets/icons/langs/lang_fr.svg`
+  }], []);
+  const [currentLang, setCurrentLang] = useState(LANGS.find((_lang) => _lang.value === langStorage) || LANGS[0]);
+  const onChangeLang = (newlang) => {
+    setLangStorage(newlang);
+    setCurrentLang(LANGS.find((_lang) => _lang.value === newlang) || LANGS[0]);
+  };
+  return /* @__PURE__ */ jsx(LocalesContext.Provider, {
+    value: {
+      currentLang,
+      onChangeLang,
+      allLang: LANGS
+    },
+    children
+  });
+}
+export { LocalesContext as L, LocalesProvider as a };

package/dist/contexts/index.js

@@ -1,174 +1,3 @@
-import { createContext, useMemo, useState, useCallback, useEffect } from "react";
-import { useLocalStorage, useEnvironment, voidFunction, useHostTools, EmitEvents, getLocalStorage, useNetwork, useFlags } from "@m4l/core";
-import { jsx, jsxs } from "react/jsx-runtime";
-import esLocale from "date-fns/locale/es";
-import frLocale from "date-fns/locale/fr";
-import enLocale from "date-fns/locale/en-US";
-import { CssBaseline } from "@mui/material";
-import { createTheme, StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
-import "react-helmet-async";
-const LocalesContext = createContext(null);
-function LocalesProvider({
-  children
-}) {
-  const [langStorage, setLangStorage] = useLocalStorage("langStorage", "en");
-  const {
-    host_static_assets,
-    environment
-  } = useEnvironment();
-  const LANGS = useMemo(() => [{
-    label: "English",
-    value: "en",
-    locale: enLocale,
-    icon: `${host_static_assets}/${environment}/frontend/commons/assets/icons/langs/lang_en.svg`
-  }, {
-    label: "Espa\xF1ol",
-    value: "es",
-    locale: esLocale,
-    icon: `${host_static_assets}/${environment}/frontend/commons/assets/icons/langs/lang_es.svg`
-  }, {
-    label: "French",
-    value: "fr",
-    locale: frLocale,
-    icon: `${host_static_assets}/${environment}/frontend/commons/assets/icons/langs/lang_fr.svg`
-  }], []);
-  const [currentLang, setCurrentLang] = useState(LANGS.find((_lang) => _lang.value === langStorage) || LANGS[0]);
-  const onChangeLang = (newlang) => {
-    setLangStorage(newlang);
-    setCurrentLang(LANGS.find((_lang) => _lang.value === newlang) || LANGS[0]);
-  };
-  return /* @__PURE__ */ jsx(LocalesContext.Provider, {
-    value: {
-      currentLang,
-      onChangeLang,
-      allLang: LANGS
-    },
-    children
-  });
-}
-const initialValue = {
-  hostThemeOptions: {},
-  fnComponentsOverrides: voidFunction
-};
-const HostThemeContext = createContext(initialValue);
-function HostThemeProvider(props) {
-  const {
-    children,
-    hostThemeOptions,
-    fnComponentsOverrides,
-    isMicroFrontEnd
-  } = props;
-  const [finalThemeOptions, setFinalThemeOptions] = useState(hostThemeOptions);
-  const {
-    events_add_listener,
-    events_remove_listener,
-    events_emit
-  } = useHostTools();
-  const [isFirstTime, setIsFirstTime] = useState(true);
-  const finalTheme = useMemo(() => {
-    const theme = createTheme(finalThemeOptions);
-    theme.components = fnComponentsOverrides(theme);
-    return theme;
-  }, [finalThemeOptions]);
-  const onUpdateOverrides = useCallback((newThemeOptions) => {
-    console.debug("Emit HostThemeProvider", newThemeOptions);
-    setFinalThemeOptions(newThemeOptions);
-  }, []);
-  useEffect(() => {
-    if (isMicroFrontEnd) {
-      events_add_listener(EmitEvents.EMMIT_EVENT_HOST_THEME_CHANGE, onUpdateOverrides);
-    }
-    return () => {
-      if (isMicroFrontEnd) {
-        console.log("****** REMOVE LISTENER host_theme_change");
-        events_remove_listener("host_theme_change", onUpdateOverrides);
-      }
-    };
-  }, []);
-  useEffect(() => {
-    if (isFirstTime) {
-      setIsFirstTime(false);
-      return;
-    }
-    if (!isMicroFrontEnd) {
-      setFinalThemeOptions(hostThemeOptions);
-      events_emit(EmitEvents.EMMIT_EVENT_HOST_THEME_CHANGE, hostThemeOptions);
-    }
-  }, [hostThemeOptions]);
-  return /* @__PURE__ */ jsx(HostThemeContext.Provider, {
-    value: {
-      hostThemeOptions: finalThemeOptions,
-      fnComponentsOverrides
-    },
-    children: /* @__PURE__ */ jsx(StyledEngineProvider, {
-      injectFirst: true,
-      children: /* @__PURE__ */ jsxs(ThemeProvider, {
-        theme: finalTheme,
-        children: [/* @__PURE__ */ jsx(CssBaseline, {
-          enableColorScheme: true
-        }), children]
-      })
-    })
-  });
-}
-const initialState = {
-  moduleId: 0,
-  styleOptions: {
-    company_logo_small_url: "",
-    company_logo_normal_url: ""
-  }
-};
-const ModuleContext = createContext(initialState);
-function ModuleProvider(props) {
-  const {
-    children,
-    moduleId
-  } = props;
-  const [styleOptions, setStyleOptions] = useState(getLocalStorage("styleOptions", {
-    company_logo_small_url: "",
-    company_logo_normal_url: ""
-  }));
-  const {
-    networkOperation
-  } = useNetwork();
-  const {
-    domain_token
-  } = useEnvironment();
-  const {
-    flags,
-    addFlag
-  } = useFlags();
-  useEffect(() => {
-    let mounted = true;
-    if (flags.findIndex((f) => f === "dictionary_loaded") < 0 || flags.findIndex((f) => f === "style_loaded") > -1) {
-      return;
-    }
-    networkOperation({
-      method: "GET",
-      endPoint: `style`,
-      parms: {
-        domain_token
-      }
-    }).then((response) => {
-      if (mounted) {
-        console.log("Result - ModuleProvider - Load Style", response);
-        setStyleOptions({
-          ...response.data
-        });
-        addFlag("style_loaded");
-      }
-    }).finally(() => {
-    });
-    return function cleanUp() {
-      mounted = false;
-    };
-  }, [flags]);
-  return /* @__PURE__ */ jsx(ModuleContext.Provider, {
-    value: {
-      styleOptions,
-      moduleId
-    },
-    children
-  });
-}
-export { HostThemeContext as H, LocalesContext as L, ModuleProvider as M, LocalesProvider as a, HostThemeProvider as b };
+import "./LocalesContext/index.js";
+import "./HostThemeContext/index.js";
+import "../react-helmet-async.js";

package/dist/hooks/index.js

@@ -1,37 +1,9 @@
-import { useContext, useRef, useEffect, useState } from "react";
-import { L as LocalesContext, H as HostThemeContext } from "../contexts/index.js";
-import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
+import { useRef, useEffect, useState } from "react";
+import "@mui/material/styles";
+import "@mui/material/useMediaQuery";
+import "../contexts/LocalesContext/index.js";
+import "../contexts/HostThemeContext/index.js";
 import "react-hook-form";
-const useLocales = () => {
-  const context = useContext(LocalesContext);
-  if (!context)
-    throw new Error("useLocales context must be use inside LocalesProvider");
-  return context;
-};
-function useResponsive(query, key, start, end) {
-  const theme = useTheme();
-  const mediaUp = useMediaQuery(theme.breakpoints.up(key));
-  const mediaDown = useMediaQuery(theme.breakpoints.down(key));
-  const mediaBetween = useMediaQuery(theme.breakpoints.between(start, end));
-  const mediaOnly = useMediaQuery(theme.breakpoints.only(key));
-  if (query === "up") {
-    return mediaUp;
-  }
-  if (query === "down") {
-    return mediaDown;
-  }
-  if (query === "between") {
-    return mediaBetween;
-  }
-  if (query === "only") {
-    return mediaOnly;
-  }
-}
-function useResponsiveDesktop() {
-  const isDesktop = useResponsive("up", "sm");
-  return isDesktop;
-}
 function useIsMountedRef() {
   const isMounted = useRef(true);
   useEffect(() => () => {
@@ -56,10 +28,4 @@ function useOffSetTop(top) {
   }, [isTop]);
   return offsetTop;
 }
-const useHostTheme = () => {
-  const context = useContext(HostThemeContext);
-  if (!context)
-    throw new Error("useHostTheme context must be use inside HostThemeProvider");
-  return context;
-};
-export { useResponsive as a, useResponsiveDesktop as b, useIsMountedRef as c, useOffSetTop as d, useHostTheme as e, useLocales as u };
+export { useOffSetTop as a, useIsMountedRef as u };

package/dist/hooks/useHostTheme/index.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { H as HostThemeContext } from "../../contexts/HostThemeContext/index.js";
+const useHostTheme = () => {
+  const context = useContext(HostThemeContext);
+  if (!context)
+    throw new Error("useHostTheme context must be use inside HostThemeProvider");
+  return context;
+};
+export { useHostTheme as u };

package/dist/hooks/useLocales/index.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { L as LocalesContext } from "../../contexts/LocalesContext/index.js";
+const useLocales = () => {
+  const context = useContext(LocalesContext);
+  if (!context)
+    throw new Error("useLocales context must be use inside LocalesProvider");
+  return context;
+};
+export { useLocales as u };

package/dist/hooks/useResponsive/index.js

@@ -0,0 +1,26 @@
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+function useResponsive(query, key, start, end) {
+  const theme = useTheme();
+  const mediaUp = useMediaQuery(theme.breakpoints.up(key));
+  const mediaDown = useMediaQuery(theme.breakpoints.down(key));
+  const mediaBetween = useMediaQuery(theme.breakpoints.between(start, end));
+  const mediaOnly = useMediaQuery(theme.breakpoints.only(key));
+  if (query === "up") {
+    return mediaUp;
+  }
+  if (query === "down") {
+    return mediaDown;
+  }
+  if (query === "between") {
+    return mediaBetween;
+  }
+  if (query === "only") {
+    return mediaOnly;
+  }
+}
+function useResponsiveDesktop() {
+  const isDesktop = useResponsive("up", "sm");
+  return isDesktop;
+}
+export { useResponsiveDesktop as a, useResponsive as u };