@m4l/graphics 0.0.13 → 0.0.16

package/dist/components/mui_extended/index.js

@@ -0,0 +1,53 @@
+import { LoadingButton as LoadingButton$1 } from "@mui/lab";
+import { Skeleton, Typography as Typography$1 } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+const WrapperSKTLoadingButton = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  borderRadius: theme.spacing(1),
+  overflow: "hidden"
+}));
+const SKTLoadingButton = () => /* @__PURE__ */ jsx(WrapperSKTLoadingButton, {
+  id: "WrapperSKTLoadingButton",
+  children: /* @__PURE__ */ jsx(Skeleton, {
+    variant: "rectangular",
+    width: "100%",
+    height: "48px"
+  })
+});
+const LoadingButton = (props) => {
+  const {
+    isSkeleton,
+    children,
+    ...other
+  } = props;
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTLoadingButton, {});
+  }
+  return /* @__PURE__ */ jsx(LoadingButton$1, {
+    ...other,
+    children
+  });
+};
+function Typography(props) {
+  const {
+    skeletonProps = {},
+    ...other
+  } = props;
+  const {
+    isSkeleton = "false",
+    width = "100%",
+    height = "14px"
+  } = skeletonProps;
+  return isSkeleton ? /* @__PURE__ */ jsx(Skeleton, {
+    variant: "text",
+    width,
+    height
+  }) : /* @__PURE__ */ jsx(Typography$1, {
+    ...other
+  });
+}
+export { LoadingButton as L, Typography as T };

package/dist/contexts/index.js

@@ -0,0 +1,174 @@
+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 };

package/dist/hooks/index.js

@@ -0,0 +1,65 @@
+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 "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(() => () => {
+    isMounted.current = false;
+  }, []);
+  return isMounted;
+}
+function useOffSetTop(top) {
+  const [offsetTop, setOffSetTop] = useState(false);
+  const isTop = top || 100;
+  useEffect(() => {
+    window.onscroll = () => {
+      if (window.pageYOffset > isTop) {
+        setOffSetTop(true);
+      } else {
+        setOffSetTop(false);
+      }
+    };
+    return () => {
+      window.onscroll = null;
+    };
+  }, [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 };