@m4l/graphics 0.0.14 → 0.0.18

package/dist/commonjs.js

@@ -0,0 +1 @@
+

package/dist/components/Page/index.js

@@ -0,0 +1,31 @@
+import { forwardRef } from "react";
+import { W } from "../../react-helmet-async.js";
+import { Box } from "@mui/material";
+import { u as useLocales } from "../../hooks/useLocales/index.js";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+const Page = forwardRef((props, ref) => {
+  const {
+    children,
+    title = "",
+    meta,
+    ...other
+  } = props;
+  const {
+    currentLang
+  } = useLocales();
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(W, {
+      children: [/* @__PURE__ */ jsx("title", {
+        children: `${title} | Made4Labs`
+      }), /* @__PURE__ */ jsx("html", {
+        lang: currentLang.value
+      }), meta]
+    }), /* @__PURE__ */ jsx(Box, {
+      ref,
+      ...other,
+      children
+    })]
+  });
+});
+Page.displayName = "Page";
+export { Page as P };

package/dist/components/ProgressBarStyle/index.js

@@ -0,0 +1,34 @@
+import { useTheme } from "@mui/material/styles";
+import { GlobalStyles } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+function ProgressBarStyle() {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(GlobalStyles, {
+    styles: {
+      "#nprogress": {
+        pointerEvents: "none",
+        "& .bar": {
+          top: 0,
+          left: 0,
+          height: 2,
+          width: "100%",
+          position: "fixed",
+          zIndex: theme.zIndex.snackbar,
+          backgroundColor: theme.palette.primary.main,
+          boxShadow: `0 0 2px ${theme.palette.primary.main}`
+        },
+        "& .peg": {
+          right: 0,
+          opacity: 1,
+          width: 100,
+          height: "100%",
+          display: "block",
+          position: "absolute",
+          transform: "rotate(3deg) translate(0px, -4px)",
+          boxShadow: `0 0 10px ${theme.palette.primary.main}, 0 0 5px ${theme.palette.primary.main}`
+        }
+      }
+    }
+  });
+}
+export { ProgressBarStyle as P };

package/dist/components/index.js

@@ -0,0 +1,4 @@
+import "@mui/material/styles";
+import "@mui/material";
+import "react/jsx-runtime";
+import "./Page/index.js";

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

@@ -0,0 +1,3 @@
+import "./LocalesContext/index.js";
+import "./HostThemeContext/index.js";
+import "../react-helmet-async.js";

package/dist/hooks/index.js

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