@m4l/graphics 1.0.7 → 1.0.8

package/contexts/HostThemeContext/types.d.ts

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 export declare type EventFunListener = (...args: any[]) => void;
 export interface HostThemeType {
     hostThemeOptions: Theme;
-    fnComponentsOverrides: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => any;
+    fnComponentsOverrides: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => any;
 }
 export interface HostThemeProviderProps extends HostThemeType {
     isMicroFrontEnd: boolean;

package/contexts/ThemeSettingsContext/ThemeSettingsContext.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ThemeSettingsProviderProps } from './types';
+declare const ThemeSettingsContext: import("react").Context<(Omit<Omit<import("zustand").StoreApi<import("./types").ThemeSettingsStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: import("./types").ThemeSettingsStateWithActions | Partial<import("./types").ThemeSettingsStateWithActions> | ((state: import("./types").ThemeSettingsStateWithActions) => import("./types").ThemeSettingsStateWithActions | Partial<import("./types").ThemeSettingsStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: import("./types").ThemeSettingsStateWithActions | Partial<import("./types").ThemeSettingsStateWithActions> | ((state: import("immer/dist/internal").WritableDraft<import("./types").ThemeSettingsStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+}) | null>;
+declare function ThemeSettingsProvider({ children, themeSettings }: ThemeSettingsProviderProps): import("react").JSX.Element;
+export { ThemeSettingsProvider, ThemeSettingsContext };

package/contexts/ThemeSettingsContext/constants.d.ts

@@ -0,0 +1,2 @@
+import { ThemeSettingsType } from './types';
+export declare const defaultThemeSettings: ThemeSettingsType;

package/contexts/ThemeSettingsContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ThemeSettingsContext';
+export type {} from './SettingsContext/types';

package/contexts/ThemeSettingsContext/store.d.ts

@@ -0,0 +1,12 @@
+import { InitialThemeSettingsStoreProps, ThemeSettingsStateWithActions } from './types';
+import { WritableDraft } from 'immer/dist/internal';
+export declare const createThemeSettingsStore: (initialState: InitialThemeSettingsStoreProps) => Omit<Omit<import("zustand").StoreApi<ThemeSettingsStateWithActions>, "setState"> & {
+    setState<A extends string | {
+        type: unknown;
+    }>(partial: ThemeSettingsStateWithActions | Partial<ThemeSettingsStateWithActions> | ((state: ThemeSettingsStateWithActions) => ThemeSettingsStateWithActions | Partial<ThemeSettingsStateWithActions>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "setState"> & {
+    setState(nextStateOrUpdater: ThemeSettingsStateWithActions | Partial<ThemeSettingsStateWithActions> | ((state: WritableDraft<ThemeSettingsStateWithActions>) => void), shouldReplace?: boolean | undefined, action?: string | {
+        type: unknown;
+    } | undefined): void;
+};
+export declare type ThemeSettingsStore = ReturnType<typeof createThemeSettingsStore>;

package/contexts/ThemeSettingsContext/types.d.ts

@@ -0,0 +1,47 @@
+import { NetworkProps } from '@m4l/core';
+import { ThemeColorPresets } from '@m4l/styles';
+import { CssVarsTheme, Theme, PaletteColor } from '@mui/material/styles';
+import { ReactNode } from 'react';
+export declare type ThemeMode = 'light' | 'dark';
+export declare type ThemeDirection = 'rtl' | 'ltr';
+export declare type ThemeLayout = 'vertical' | 'horizontal';
+export declare type ThemeStretch = boolean;
+export declare type ThemeSettingsType = {
+    themeMode: ThemeMode;
+    themeDirection: ThemeDirection;
+    themeColorPresets: ThemeColorPresets;
+    themeStretch: ThemeStretch;
+    themeLayout: ThemeLayout;
+};
+export interface ThemeSettingsStore {
+    networkOperation: (props: NetworkProps) => Promise<any>;
+    currentThemeSettings: ThemeSettingsType;
+    currentPreset: PaletteColor;
+    themeOptions: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;
+    colorOption: {
+        name: string | undefined;
+        value: string;
+    }[];
+    setThemeSettings?: (newValue: ThemeSettingsType) => void;
+    open: boolean;
+}
+export declare type DefaultThemeSettingsStoreProps = ThemeSettingsStore;
+export declare type InitialThemeSettingsStoreProps = DefaultThemeSettingsStoreProps;
+export interface ThemeSettingsStateWithActions extends ThemeSettingsStore {
+    settingsActions: {
+        init: () => void;
+        onToggleStretch: VoidFunction;
+        onResetSetting: VoidFunction;
+        onChangeMode: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        onChangeDirection: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        onChangeColor: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        onChangeLayout: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        handleOpen: () => void;
+        setThemeOptions: (obj: any) => void;
+        setSettings: (newValue: any) => void;
+    };
+}
+export declare type ThemeSettingsProviderProps = {
+    themeSettings?: ThemeSettingsType;
+    children: ReactNode;
+};

package/contexts/index.acf54acf.js

@@ -0,0 +1,283 @@
+import "./FormatterContext/index.92336f4c.js";
+import "./LocalesContext/index.53f0b702.js";
+import { createContext as T, useRef as v, useMemo as y, useLayoutEffect as b } from "react";
+import { c as O, d as P, i as R, l as M } from "../node_modules.9eeccca4.js";
+import { jsx as x } from "react/jsx-runtime";
+import "date-fns/locale/en-US";
+import "./HostThemeContext/index.f53d14b8.js";
+import { useNetwork as E, useLocalStorageWithListener as w } from "@m4l/core";
+import { getColorPresets as m, getColorState as p, typography as L, palette as d, SECONDARY as N, COMMON as A, ERROR as D, WARNING as z, INFO as B, SUCCESS as $, shadows as S, createCustomShadows as j, defaultThemeOptions as C, defaultPreset as W, colorPresets as _ } from "@m4l/styles";
+import { alpha as I } from "@mui/system";
+const f = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, U = (o) => {
+  const n = {
+    ...o
+  };
+  return O(
+    P(
+      R((r, t) => ({
+        ...n,
+        responsiveContainerActions: {
+          setBreakpoint: (e) => {
+            r((s) => {
+              s.breakPoint = e, s.isUpSm = e !== "xs" && e !== "sm", s.isXs = e == "xs";
+            });
+          }
+        }
+      })),
+      { name: "Responsive Relative Store" }
+    )
+  );
+}, K = T(null), ne = (o) => {
+  const {
+    children: n,
+    observedDivRef: r
+  } = o, t = v();
+  t.current || (t.current = U({
+    breakPoint: "md",
+    isUpSm: !1,
+    isXs: !1
+  }));
+  const e = () => {
+    const i = r;
+    if (i instanceof HTMLElement && i.clientWidth) {
+      const l = Object.keys(f);
+      for (let c = 0; c < l.length; c++) {
+        const g = l[c];
+        if (i.clientWidth <= f[g]) {
+          t.current?.getState().responsiveContainerActions.setBreakpoint(g);
+          break;
+        }
+      }
+    }
+  }, s = y(() => M.exports.throttle(e, 200, {
+    leading: !1,
+    trailing: !0
+  }), [e]);
+  return b(() => {
+    const i = () => {
+      s();
+    }, l = r;
+    if (l && l instanceof Element) {
+      const c = new ResizeObserver((g) => {
+        i();
+      });
+      return c.observe(l), () => {
+        c.disconnect();
+      };
+    }
+  }, [r]), /* @__PURE__ */ x(K.Provider, {
+    value: t.current,
+    children: n
+  });
+}, u = {
+  themeMode: "light",
+  themeDirection: "ltr",
+  themeColorPresets: "patronus",
+  themeStretch: !1,
+  themeLayout: "horizontal"
+};
+function k(o, n = "m4l") {
+  const r = document.querySelector('[data-mui-color-scheme="light"]');
+  if (!r) {
+    console.error('Element with data-mui-color-scheme="light" not found.');
+    return;
+  }
+  Object.keys(o).forEach((t) => {
+    const e = o[t];
+    if (typeof e == "string" || typeof e == "number") {
+      const s = `--${n}-${t}`;
+      r.style.setProperty(s, e.toString());
+    } else
+      typeof e == "object" && e !== null && k(e, `${n}-${t}`);
+  });
+}
+const h = (o) => {
+  const n = o.currentThemeSettings || u;
+  console.log("getColorPresets", m(n.themeColorPresets)), console.log(
+    "getColorState",
+    p(n.themeColorPresets, n.themeMode)
+  );
+  const r = n.themeMode === "light";
+  o.themeOptions = {
+    ...o.themeOptions,
+    typography: L,
+    palette: {
+      ...o.themeOptions.palette,
+      ...r ? d.light : d.dark,
+      primary: m(n.themeColorPresets),
+      state: p(n.themeColorPresets, n.themeMode),
+      representative: n.themeMode === "light" ? m(n.themeColorPresets)?.light : m(n.themeColorPresets)?.darker,
+      secondary: {
+        ...N,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      },
+      common: {
+        ...A,
+        black: "#000",
+        white: "#fff",
+        background: "",
+        backgroundChannel: "",
+        onBackground: "",
+        onBackgroundChannel: ""
+      },
+      error: {
+        ...D,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      },
+      warning: {
+        ...z,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      },
+      info: {
+        ...B,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      },
+      success: {
+        ...$,
+        contrastText: "",
+        mainChannel: "",
+        lightChannel: "",
+        darkChannel: "",
+        contrastTextChannel: ""
+      }
+    },
+    shape: { borderRadius: 8 },
+    direction: n.themeDirection,
+    shadows: r ? S.light : S.dark,
+    customShadows: {
+      primary: `0 8px 16px 0 ${I(
+        m(n.themeColorPresets)?.main || "#fff",
+        0.2
+      )}`,
+      ...j(n.themeMode)
+    },
+    stretch: n.themeStretch
+  }, console.log("state.themeOptions", o.themeOptions), k(o.themeOptions);
+}, a = (o) => {
+  o.setThemeSettings && o.setThemeSettings(o.currentThemeSettings);
+}, X = (o) => O(
+  P(
+    R((n, r) => ({
+      ...o,
+      settingsActions: {
+        init: () => {
+          n((t) => {
+            h(t);
+          });
+        },
+        setThemeOptions: (t) => {
+          n((e) => {
+            e.themeOptions = { ...e.themeOptions, ...t };
+          });
+        },
+        setSettings: (t) => {
+          n((e) => {
+            e.currentThemeSettings = { ...t }, a(e), h(e);
+          });
+        },
+        onChangeMode: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeMode: t.target.value
+            }, a(e), h(e);
+          });
+        },
+        handleOpen: () => {
+          n((t) => {
+            t.open = !t.open;
+          });
+        },
+        onChangeDirection: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeDirection: t.target.value
+            }, a(e), h(e);
+          });
+        },
+        onChangeColor: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeColorPresets: t.target.value
+            }, a(e), h(e);
+          });
+        },
+        onChangeLayout: (t) => {
+          n((e) => {
+            e.currentThemeSettings = {
+              ...e.currentThemeSettings,
+              themeLayout: t.target.value
+            }, a(e), h(e);
+          });
+        },
+        onToggleStretch: () => {
+          n((t) => {
+            t.currentThemeSettings = {
+              ...t.currentThemeSettings,
+              themeStretch: !t.currentThemeSettings.themeStretch
+            }, a(t), h(t);
+          });
+        },
+        onResetSetting: () => {
+          n((t) => {
+            t.currentThemeSettings = {
+              ...u
+            }, a(t), h(t);
+          });
+        }
+      }
+    })),
+    { name: "ExampleStore" }
+  )
+), q = T(null);
+function oe({
+  children: o,
+  themeSettings: n
+}) {
+  const {
+    networkOperation: r
+  } = E(), [t, e] = w("theme_setting", u);
+  console.log("defaultThemeOptions", C);
+  const s = v();
+  return s.current || (s.current = X({
+    networkOperation: r,
+    currentThemeSettings: {
+      ...n ?? t
+    },
+    themeOptions: C,
+    currentPreset: W,
+    colorOption: _.map((i) => ({
+      name: i.name,
+      value: i.main
+    })),
+    open: !1,
+    setThemeSettings: n ? void 0 : e
+  }), s.current.getState().settingsActions.init()), /* @__PURE__ */ x(q.Provider, {
+    value: s.current,
+    children: o
+  });
+}
+export {
+  K as R,
+  q as T,
+  ne as a,
+  oe as b
+};

package/contexts/index.d.ts

@@ -6,4 +6,5 @@ export type { BreakpointType } from './ResponsiveContainerContext/types';
 export type { NetworkLocaleType, LocaleType } from './LocalesContext/types';
 export { getLocaleFromNetwork } from './LocalesContext/helper';
 export * from './HostThemeContext';
+export * from './ThemeSettingsContext/ThemeSettingsContext';
 export type { HostThemeType } from './HostThemeContext/types';

package/hooks/{index.eebf9e43.js → index.315d954d.js}

@@ -1,11 +1,11 @@
-import { useRef as r, useEffect as n, useState as f, useContext as i, useLayoutEffect as c } from "react";
+import { useRef as r, useEffect as n, useState as f, useContext as u, useLayoutEffect as c } from "react";
 import { H as m } from "../contexts/HostThemeContext/index.f53d14b8.js";
+import { u as a } from "../node_modules.9eeccca4.js";
+import { T as p } from "../contexts/index.acf54acf.js";
 import "../contexts/FormatterContext/index.92336f4c.js";
 import "../contexts/LocalesContext/index.53f0b702.js";
-import "../contexts/index.68603471.js";
-import "../node_modules.9eeccca4.js";
 import "@m4l/styles";
-function h() {
+function b() {
   const e = r(!0);
   return n(
     () => () => {
@@ -14,7 +14,7 @@ function h() {
     []
   ), e;
 }
-function v(e) {
+function g(e) {
   const [o, t] = f(!1), s = e || 100;
   return n(() => (window.onscroll = () => {
     window.pageYOffset > s ? t(!0) : t(!1);
@@ -22,8 +22,8 @@ function v(e) {
     window.onscroll = null;
   }), [s]), o;
 }
-const x = () => {
-  const e = i(m);
+const v = () => {
+  const e = u(m);
   if (!e)
     throw new Error("useHostTheme context must be use inside HostThemeProvider");
   return e;
@@ -34,17 +34,24 @@ function H(e) {
     const t = o?.current;
     if (!t)
       return;
-    const s = new ResizeObserver((u) => {
-      e(t, u[0]);
+    const s = new ResizeObserver((i) => {
+      e(t, i[0]);
     });
     return s.observe(t), () => {
       s.disconnect();
     };
   }, [e, o.current]), o;
 }
+function O(e, o) {
+  const t = u(p);
+  if (!t)
+    throw new Error("useSettingsStore context must be use inside SettignsContext");
+  return a(t, e, o);
+}
 export {
-  v as a,
-  x as b,
+  g as a,
+  v as b,
   H as c,
-  h as u
+  O as d,
+  b as u
 };

package/hooks/index.d.ts

@@ -8,3 +8,4 @@ export { useOffSetTop } from './useOffSetTop';
 export { useHostTheme } from './useHostTheme';
 export { useResizeObserver } from './useResizeObserver';
 export { useResponsiveDesktop } from './useResponsive';
+export { useThemeSettingsStore } from './useThemSettingsStore';

package/hooks/useResponsive/{index.b336bec4.js → index.f415f47d.js}

@@ -1,6 +1,6 @@
 import { useContext as t } from "react";
 import { u as r } from "../../node_modules.9eeccca4.js";
-import { R as n } from "../../contexts/index.68603471.js";
+import { R as n } from "../../contexts/index.acf54acf.js";
 import { useResponsive as i } from "@m4l/styles";
 function f(e, s) {
   const o = t(n);

package/hooks/useThemSettingsStore/index.d.ts

@@ -0,0 +1,2 @@
+import { ThemeSettingsStateWithActions } from '../../contexts/ThemeSettingsContext/types';
+export declare function useThemeSettingsStore<T>(selector: (state: ThemeSettingsStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;

package/index.js

@@ -1,15 +1,15 @@
-import { G as l } from "./components/GlobalStyle/index.b7393a44.js";
-import { F as C, a as R } from "./contexts/FormatterContext/index.92336f4c.js";
-import { L as c, a as F, g as L } from "./contexts/LocalesContext/index.53f0b702.js";
-import { R as b, a as g } from "./contexts/index.68603471.js";
-import { H, a as T } from "./contexts/HostThemeContext/index.f53d14b8.js";
-import { u as k } from "./hooks/useFirstRender/index.1e9b02fb.js";
-import { u as z } from "./hooks/useFormatter/index.57ac8cca.js";
-import { b as I, u as M, a as O, c as y } from "./hooks/index.eebf9e43.js";
-import { u as D } from "./hooks/useLocales/index.d5a80aff.js";
-import { u as N, a as W } from "./hooks/useResponsive/index.b336bec4.js";
-import { u as q } from "./hooks/useIsMobile/index.e9f29b1d.js";
-import { C as J, g as K } from "./utils/index.6909c662.js";
+import { G as v } from "./components/GlobalStyle/index.b7393a44.js";
+import { F as d, a as R } from "./contexts/FormatterContext/index.92336f4c.js";
+import { L as g, a as h, g as S } from "./contexts/LocalesContext/index.53f0b702.js";
+import { R as F, a as P, T as b, b as L } from "./contexts/index.acf54acf.js";
+import { H as k, a as w } from "./contexts/HostThemeContext/index.f53d14b8.js";
+import { u as G } from "./hooks/useFirstRender/index.1e9b02fb.js";
+import { u as M } from "./hooks/useFormatter/index.57ac8cca.js";
+import { b as y, u as A, a as D, c as E, d as N } from "./hooks/index.315d954d.js";
+import { u as j } from "./hooks/useLocales/index.d5a80aff.js";
+import { u as B, a as J } from "./hooks/useResponsive/index.f415f47d.js";
+import { u as Q } from "./hooks/useIsMobile/index.e9f29b1d.js";
+import { C as V, g as X } from "./utils/index.6909c662.js";
 import "@mui/material/styles";
 import "@mui/material";
 import "@m4l/styles";
@@ -21,27 +21,31 @@ import "@mui/x-date-pickers";
 import "date-fns/locale/en-US";
 import "./node_modules.9eeccca4.js";
 import "./commonjs.e3daa2e5.js";
+import "@mui/system";
 export {
-  J as Capitalize,
-  C as FormatterContext,
+  V as Capitalize,
+  d as FormatterContext,
   R as FormatterProvider,
-  l as GlobalStyles,
-  H as HostThemeContext,
-  T as HostThemeProvider,
-  c as LocalesContext,
-  F as LocalesProvider,
-  b as ResponsiveContainerContext,
-  g as ResponsiveContainerProvider,
-  K as getAnchorElPositionWindow,
-  L as getLocaleFromNetwork,
-  k as useFirstRender,
-  z as useFormatter,
-  I as useHostTheme,
-  q as useIsMobile,
-  M as useIsMountedRef,
-  D as useLocales,
-  O as useOffSetTop,
-  y as useResizeObserver,
-  N as useResponsiveContainerStore,
-  W as useResponsiveDesktop
+  v as GlobalStyles,
+  k as HostThemeContext,
+  w as HostThemeProvider,
+  g as LocalesContext,
+  h as LocalesProvider,
+  F as ResponsiveContainerContext,
+  P as ResponsiveContainerProvider,
+  b as ThemeSettingsContext,
+  L as ThemeSettingsProvider,
+  X as getAnchorElPositionWindow,
+  S as getLocaleFromNetwork,
+  G as useFirstRender,
+  M as useFormatter,
+  y as useHostTheme,
+  Q as useIsMobile,
+  A as useIsMountedRef,
+  j as useLocales,
+  D as useOffSetTop,
+  E as useResizeObserver,
+  B as useResponsiveContainerStore,
+  J as useResponsiveDesktop,
+  N as useThemeSettingsStore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "dependencies": {

package/contexts/index.68603471.js

@@ -1,73 +0,0 @@
-import "./FormatterContext/index.92336f4c.js";
-import "./LocalesContext/index.53f0b702.js";
-import { createContext as p, useRef as v, useMemo as f, useLayoutEffect as d } from "react";
-import { c as R, d as u, i as x, l as h } from "../node_modules.9eeccca4.js";
-import { jsx as S } from "react/jsx-runtime";
-import "date-fns/locale/en-US";
-import "./HostThemeContext/index.f53d14b8.js";
-const m = { xs: 600, sm: 900, md: 1200, lg: 1536, xl: 1920 }, b = (c) => {
-  const a = {
-    ...c
-  };
-  return R(
-    u(
-      x((o, n) => ({
-        ...a,
-        responsiveContainerActions: {
-          setBreakpoint: (e) => {
-            o((r) => {
-              r.breakPoint = e, r.isUpSm = e !== "xs" && e !== "sm", r.isXs = e == "xs";
-            });
-          }
-        }
-      })),
-      { name: "Responsive Relative Store" }
-    )
-  );
-}, C = p(null), B = (c) => {
-  const {
-    children: a,
-    observedDivRef: o
-  } = c, n = v();
-  n.current || (n.current = b({
-    breakPoint: "md",
-    isUpSm: !1,
-    isXs: !1
-  }));
-  const e = () => {
-    const i = o;
-    if (i instanceof HTMLElement && i.clientWidth) {
-      const t = Object.keys(m);
-      for (let s = 0; s < t.length; s++) {
-        const l = t[s];
-        if (i.clientWidth <= m[l]) {
-          n.current?.getState().responsiveContainerActions.setBreakpoint(l);
-          break;
-        }
-      }
-    }
-  }, r = f(() => h.exports.throttle(e, 200, {
-    leading: !1,
-    trailing: !0
-  }), [e]);
-  return d(() => {
-    const i = () => {
-      r();
-    }, t = o;
-    if (t && t instanceof Element) {
-      const s = new ResizeObserver((l) => {
-        i();
-      });
-      return s.observe(t), () => {
-        s.disconnect();
-      };
-    }
-  }, [o]), /* @__PURE__ */ S(C.Provider, {
-    value: n.current,
-    children: a
-  });
-};
-export {
-  C as R,
-  B as a
-};