@m4l/graphics 0.1.0 → 0.1.4

package/contexts/HostThemeContext/index.js

@@ -37,7 +37,6 @@ function HostThemeProvider(props) {
     }
     return () => {
       if (isMicroFrontEnd) {
-        console.log("****** REMOVE LISTENER host_theme_change");
         events_remove_listener("host_theme_change", onUpdateOverrides);
       }
     };

package/contexts/LocalesContext/index.d.ts

@@ -7,7 +7,7 @@ export declare type LangType = {
     icon: string;
 };
 export declare type LocalesContextProps = {
-    currentLang: any;
+    currentLang: LangType;
     onChangeLang: (newlang: string) => void;
     allLang: Array<LangType>;
 };

package/contexts/LocalesContext/index.js

@@ -33,10 +33,11 @@ function LocalesProvider({
   }], []);
   const [currentLang, setCurrentLang] = useState(LANGS.find((_lang) => _lang.value === langStorage) || LANGS[0]);
   const onChangeLang = (newlang) => {
+    console.log("onChangeLang", newlang);
     setLangStorage(newlang);
     setCurrentLang(LANGS.find((_lang) => _lang.value === newlang) || LANGS[0]);
-    console.log("new lagn", newlang, currentLang);
   };
+  console.log("Render LocalesProvider", langStorage);
   return /* @__PURE__ */ jsx(LocalesContext.Provider, {
     value: {
       currentLang,

package/index.d.ts

@@ -6,5 +6,9 @@ export type { GradientsPaletteOptions } from './theme/palette';
 export type { ChartPaletteOptions } from './theme/palette';
 export type { GridPaletteOptions } from './theme/palette';
 export { defaultThemeOptions } from './theme/defaultThemeOptions';
+export { shadows, customShadows } from './theme/shadows';
+export { palette, type ColorSchema } from './theme/palette';
+export { getColorPresets, colorPresets, defaultPreset } from './utils/getColorPresets';
+export { getFontValue as GetFontValue } from './utils/getFontValue';
 export { default as fnComponentsOverrides } from './theme/overrides';
 export type { HostThemeType } from './types';

package/index.js

@@ -6,6 +6,9 @@ export { u as useIsMountedRef, a as useOffSetTop } from "./hooks/index.js";
 export { u as useLocales } from "./hooks/useLocales/index.js";
 export { u as useHostTheme } from "./hooks/useHostTheme/index.js";
 export { d as defaultThemeOptions } from "./theme/defaultThemeOptions.js";
+export { c as customShadows, s as shadows } from "./theme/shadows.js";
+export { p as palette } from "./theme/palette.js";
+export { a as GetFontValue, c as colorPresets, d as defaultPreset, g as getColorPresets } from "./utils/index.js";
 export { f as fnComponentsOverrides } from "./theme/overrides.js";
 import "@mui/material/styles";
 import "@mui/material";
@@ -19,6 +22,3 @@ import "date-fns/locale/en-US";
 import "@m4l/core";
 import "@mui/material/useMediaQuery";
 import "./theme/typography.js";
-import "./utils/index.js";
-import "./theme/palette.js";
-import "./theme/shadows.js";

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "@m4l/graphics",
-  "version": "0.1.0",
+  "version": "0.1.4",
   "license": "UNLICENSED",
   "author": "M4L Team",
   "dependencies": {
     "@m4l/core": "*",
-    "@mui/material": "^5.8.7",
     "@mui/x-date-pickers": "^5.0.0-beta.3",
-    "date-fns": "^2.29.2",
-    "react": "^17.0.0 || 18.x"
+    "date-fns": "^2.29.2"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.10.4",
+    "@mui/system": "^5.10.4",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "files": [
     "*"

package/theme/palette.d.ts

@@ -320,3 +320,4 @@ export declare const palette: {
         readonly divider: string;
     };
 };
+export default palette;

package/theme/shadows.d.ts

@@ -60,7 +60,7 @@ export declare const customShadows: {
         dropdown: string;
     };
 };
-declare const shadows: {
+export declare const shadows: {
     light: Shadows;
     dark: Shadows;
 };

package/utils/getColorPresets.d.ts

@@ -146,7 +146,7 @@ export declare const redPreset: {
     darker: string;
     contrastText: string;
 };
-export default function getColorPresets(presetsKey: ThemeColorPresets): {
+export declare function getColorPresets(presetsKey: ThemeColorPresets): {
     LightSelected: string;
     LightSelectedHover: string;
     DarkSelected: string;
@@ -167,3 +167,4 @@ export default function getColorPresets(presetsKey: ThemeColorPresets): {
     darker: string;
     contrastText: string;
 };
+export default getColorPresets;

package/utils/getFontValue.d.ts

@@ -16,7 +16,7 @@ export declare function responsiveFontSizes({ sm, md, lg }: {
         fontSize: string;
     };
 };
-export declare function GetFontValue(variant: Variant): {
+export declare function getFontValue(variant: Variant): {
     fontSize: number;
     lineHeight: number;
     fontWeight: import("csstype").Property.FontWeight | undefined;

package/utils/index.js

@@ -1,6 +1,9 @@
-import "@mui/material/styles";
-import "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material/styles";
+import { u as useResponsive } from "../hooks/useResponsive/index.js";
 import { p as palette } from "../theme/palette.js";
+function remToPx(value) {
+  return Math.round(parseFloat(value) * 16);
+}
 function pxToRem(value) {
   return `${value / 16}rem`;
 }
@@ -17,6 +20,25 @@ function responsiveFontSizes({ sm, md, lg }) {
     }
   };
 }
+function useWidth() {
+  const theme = useTheme();
+  const keys = [...theme.breakpoints.keys].reverse();
+  return keys.reduce((output, key) => {
+    const matches = useResponsive("up", key);
+    return !output && matches ? key : output;
+  }, null) || "xs";
+}
+function getFontValue(variant) {
+  const theme = useTheme();
+  const breakpoints = useWidth();
+  const key = theme.breakpoints.up(breakpoints === "xl" ? "lg" : breakpoints);
+  const hasResponsive = variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "h5" || variant === "h6";
+  const getFont = hasResponsive && theme.typography[variant][key] ? theme.typography[variant][key] : theme.typography[variant];
+  const fontSize = remToPx(getFont.fontSize);
+  const lineHeight = Number(theme.typography[variant].lineHeight) * fontSize;
+  const { fontWeight, letterSpacing } = theme.typography[variant];
+  return { fontSize, lineHeight, fontWeight, letterSpacing };
+}
 const colorPresets = [
   {
     name: "default",
@@ -88,4 +110,4 @@ function getColorPresets(presetsKey) {
     default: defaultPreset
   }[presetsKey];
 }
-export { getColorPresets as g, pxToRem as p, responsiveFontSizes as r };
+export { getFontValue as a, colorPresets as c, defaultPreset as d, getColorPresets as g, pxToRem as p, responsiveFontSizes as r };