@m4l/graphics 0.1.11 → 0.1.13

package/components/ProgressBarStyle/index.d.ts

@@ -1 +1,2 @@
-export declare function ProgressBarStyle(): any;
+/// <reference types="react" />
+export declare function ProgressBarStyle(): JSX.Element;

package/contexts/FormatterContext/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { FormatterProviderProps, Formatters } from './types';
+declare const FormatterContext: import("react").Context<Formatters | null>;
+/**
+ * @function
+ * Componente encargado de proveer un contexto que permita saber los diferentes forrmatos,
+ * Segunda linea
+ * @param props Objeto de propiedades
+ * @version 1.0.0
+ * @author Juan Andrés Escobar
+ * @date 2023-02-11
+ * @beta
+ * @link
+ */
+declare function FormatterProvider(props: FormatterProviderProps): JSX.Element;
+export { FormatterProvider, FormatterContext };

package/contexts/FormatterContext/types.d.ts

@@ -0,0 +1,55 @@
+import type { Locale } from 'date-fns';
+import { ReactNode } from 'react';
+export interface CurrencyFormatter {
+    symbol: string;
+    decimalDigits: number;
+}
+export interface NumberFormatter {
+    decimalSymbol: string;
+    thousandsSymbol: string;
+}
+/**
+ * @author
+ */
+export interface DateFormatter {
+    dateFormat: string;
+    datetimeFormat: string;
+    dateMask: string;
+    datetimeMask: string;
+    timeFormat: string;
+    timeMask: string;
+    formatDate: (date: Date | number, format: string, options?: any) => string;
+}
+export interface OptionalDateFormatter {
+    dateFormat?: string;
+    datetimeFormat?: string;
+    dateMask?: string;
+    datetimeMask?: string;
+    timeFormat?: string;
+    timeMask?: string;
+    formatDate: (date: Date | number, format: string, options?: {
+        locale?: Locale;
+        weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+        firstWeekContainsDate?: number;
+        useAdditionalWeekYearTokens?: boolean;
+        useAdditionalDayOfYearTokens?: boolean;
+    }) => string;
+}
+export interface Formatters {
+    currencyFormatter: CurrencyFormatter;
+    dateFormatter: DateFormatter;
+    numberFormatter: NumberFormatter;
+}
+export interface OptionalFormatters {
+    currencyFormatter?: CurrencyFormatter;
+    dateFormatter?: OptionalDateFormatter;
+    numberFormatter?: NumberFormatter;
+}
+/**
+ * @interface
+ */
+export interface FormatterProviderProps extends OptionalFormatters {
+    isMicroFrontEnd: boolean;
+    children: ReactNode;
+}
+export declare type FormatterContextProps = Formatters;

package/contexts/HostThemeContext/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { HostThemeProviderProps } from './types';
 declare const HostThemeContext: import("react").Context<import("./types").HostThemeType | null>;
-declare function HostThemeProvider(props: HostThemeProviderProps): any;
+declare function HostThemeProvider(props: HostThemeProviderProps): JSX.Element;
 export { HostThemeProvider, HostThemeContext };

package/contexts/LocalesContext/index.3fcfbe02.js

@@ -0,0 +1,108 @@
+import { createContext as k, useState as _, useCallback as x, useEffect as L } from "react";
+import { AdapterDateFns as F } from "@mui/x-date-pickers/AdapterDateFns";
+import { LocalizationProvider as U } from "@mui/x-date-pickers";
+import { useEnvironment as P, useNetwork as I, useHostTools as j, useLocalStorageWithListener as w, EmitEvents as u } from "@m4l/core";
+import S from "date-fns/locale/en-US";
+import { jsx as g } from "react/jsx-runtime";
+async function B(t, e, o) {
+  const s = f(t), r = { ...t };
+  let i;
+  return s === "es" ? i = (await import("date-fns/locale/es")).default : s === "fr" ? i = (await import("date-fns/locale/fr")).default : s === "en-US" ? i = S : (i = S, r.lang = "en", r.script = void 0, r.region = "US", r.url_icon = `${e}/${o}/frontend/commons/assets/icons/langs/lang_en.svg`, r.name = "English US*"), {
+    ...r,
+    module: i,
+    localeString: f(r)
+  };
+}
+function f(t) {
+  let e = t.lang;
+  return t.script && t.script !== "" && (e = e + "-" + t.script), t.region && t.region !== "" && (e = e + "-" + t.region), e;
+}
+function y(t) {
+  try {
+    const e = new Intl.Locale(t);
+    return {
+      lang: e.language || "",
+      script: e.script,
+      region: e.region
+    };
+  } catch {
+    return {
+      lang: "en",
+      script: void 0,
+      region: "US"
+    };
+  }
+}
+const G = k(null);
+function J(t) {
+  const {
+    children: e,
+    isMicroFrontEnd: o,
+    localeHost: s,
+    getLocaleFromNetwork: r
+  } = t;
+  if (o && !s)
+    throw Error("Must set localeHost in microfrontend");
+  if (!o && !r)
+    throw Error("Must set getLocaleFromNetwork in host");
+  const {
+    domain_token: i,
+    host_static_assets: v,
+    environment_assets: h
+  } = P(), {
+    networkOperation: C
+  } = I(), {
+    events_add_listener: N,
+    events_remove_listener: T,
+    events_emit: H
+  } = j(), [a, d] = _(() => {
+    if (o)
+      return s;
+  }), [l, m] = w("localeHost", navigator.language), [M, A] = _(""), p = x((n) => {
+    d(n);
+  }, []);
+  if (L(() => (o && N(u.EMMIT_EVENT_HOST_LOCALE_CHANGE, p), () => {
+    o && T(u.EMMIT_EVENT_HOST_LOCALE_CHANGE, p);
+  }), []), L(() => {
+    let n = !0;
+    if (!o && !!r && !(l === M && l !== ""))
+      return C({
+        method: "POST",
+        endPoint: "na/locales",
+        data: {
+          ...y(l),
+          domain_token: i
+        }
+      }).then((E) => {
+        n && r(E.data, v, h).then((c) => {
+          d(c), A(c.localeString), l !== c.localeString && m(c.localeString), H(u.EMMIT_EVENT_HOST_LOCALE_CHANGE, c);
+        });
+      }).finally(() => {
+      }), function() {
+        n = !1;
+      };
+  }, [l]), !a)
+    return /* @__PURE__ */ g("div", {});
+  const O = (n) => {
+    (n.lang !== a.lang || n.script !== a.script || n.region !== a.region) && m(f(n));
+  };
+  return /* @__PURE__ */ g(G.Provider, {
+    value: {
+      currentLocale: a,
+      onChangeLocale: O
+    },
+    children: /* @__PURE__ */ g(U, {
+      dateAdapter: F,
+      adapterLocale: a.module,
+      dateFormats: {
+        hours24h: "23"
+      },
+      children: e
+    })
+  });
+}
+export {
+  G as L,
+  J as a,
+  B as g
+};

package/contexts/LocalesContext/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { LocalesProviderProps, LocalesContextProps } from './types';
 declare const LocalesContext: import("react").Context<LocalesContextProps | null>;
-declare function LocalesProvider(props: LocalesProviderProps): any;
+declare function LocalesProvider(props: LocalesProviderProps): JSX.Element;
 export { LocalesProvider, LocalesContext };

package/contexts/index.bd12693a.js

@@ -0,0 +1,80 @@
+import { createContext as p, useState as D, useCallback as k, useEffect as v } from "react";
+import { useHostTools as C, usePropageteMF as R, EmitEvents as b } from "@m4l/core";
+import { u as h } from "../hooks/index.de62e8aa.js";
+import { jsx as V } from "react/jsx-runtime";
+import "./LocalesContext/index.3fcfbe02.js";
+import "date-fns/locale/en-US";
+import "./HostThemeContext/index.a6a62c70.js";
+const x = p(null);
+function L(g) {
+  const {
+    children: T,
+    isMicroFrontEnd: r,
+    currencyFormatter: F,
+    numberFormatter: y,
+    dateFormatter: t
+  } = g, o = F?.decimalDigits || 0, a = F?.symbol || "$", m = y?.decimalSymbol || 0.1 .toLocaleString().substring(1, 2), s = y?.thousandsSymbol || 1e3 .toLocaleString().substring(1, 2), n = t?.dateFormat || "yyyy-MM-dd", c = t?.dateMask || "____-__-__", i = t?.datetimeFormat || "yyyy-MM-dd HH:mm:ss", _ = t?.datetimeMask || "____-__-__ __:__:__", d = t?.timeFormat || "HH:mm:ss", u = t?.timeMask || "__:__:__", l = t?.formatDate || (() => {
+    throw new Error("Incorrect use of formatDate");
+  }), M = h(), {
+    events_emit: H
+  } = C(), [f, E] = D({
+    currencyFormatter: {
+      decimalDigits: o,
+      symbol: a
+    },
+    numberFormatter: {
+      decimalSymbol: m,
+      thousandsSymbol: s
+    },
+    dateFormatter: {
+      dateFormat: n,
+      dateMask: c,
+      datetimeFormat: i,
+      datetimeMask: _,
+      timeFormat: d,
+      timeMask: u,
+      formatDate: l
+    }
+  });
+  console.log("FormatterProvider", r, f.dateFormatter.formatDate);
+  const S = k((e) => {
+    E(e);
+  }, []);
+  return R({
+    isMicroFrontEnd: r,
+    event: b.EMMIT_EVENT_HOST_FORMATTER_CHANGE,
+    setHandler: S
+  }), v(() => {
+    if (r || M)
+      return;
+    const e = {
+      currencyFormatter: {
+        decimalDigits: o,
+        symbol: a
+      },
+      numberFormatter: {
+        decimalSymbol: m,
+        thousandsSymbol: s
+      },
+      dateFormatter: {
+        dateFormat: n,
+        dateMask: c,
+        datetimeFormat: i,
+        datetimeMask: _,
+        timeFormat: d,
+        timeMask: u,
+        formatDate: l
+      }
+    };
+    E(e), H(b.EMMIT_EVENT_HOST_FORMATTER_CHANGE, e);
+  }, [M, a, o, m, s, n, c, i, _, d, u, l]), /* @__PURE__ */ V(x.Provider, {
+    value: {
+      ...f
+    },
+    children: T
+  });
+}
+export {
+  x as F,
+  L as a
+};

package/contexts/index.d.ts

@@ -1,3 +1,5 @@
+export * from './FormatterContext';
+export type { Formatters, DateFormatter, NumberFormatter, CurrencyFormatter, } from './FormatterContext/types';
 export * from './LocalesContext';
 export type { NetworkLocaleType, LocaleType } from './LocalesContext/types';
 export { getLocaleFromNetwork } from './LocalesContext/helper';

package/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export { useFormatter } from './useFormatter';
 export { useResponsive, useResponsiveDesktop } from './useResponsive';
 export { useIsMountedRef } from './useIsMountedRef';
 export { useLocales } from './useLocales';

package/hooks/index.de62e8aa.js

@@ -0,0 +1,44 @@
+import { useRef as s, useEffect as e, useContext as u, useState as f } from "react";
+import { F as i } from "../contexts/index.bd12693a.js";
+import "@mui/material/styles";
+import "@mui/material/useMediaQuery";
+import "../contexts/LocalesContext/index.3fcfbe02.js";
+import "../contexts/HostThemeContext/index.a6a62c70.js";
+function w() {
+  const t = s(!0);
+  return e(
+    () => () => {
+      t.current = !1;
+    },
+    []
+  ), t.current;
+}
+const F = () => {
+  const t = u(i);
+  if (!t)
+    throw new Error("useFormatter context must be use inside FormatterProvider");
+  return t;
+};
+function x() {
+  const t = s(!0);
+  return e(
+    () => () => {
+      t.current = !1;
+    },
+    []
+  ), t;
+}
+function T(t) {
+  const [n, r] = f(!1), o = t || 100;
+  return e(() => (window.onscroll = () => {
+    window.pageYOffset > o ? r(!0) : r(!1);
+  }, () => {
+    window.onscroll = null;
+  }), [o]), n;
+}
+export {
+  F as a,
+  x as b,
+  T as c,
+  w as u
+};

package/hooks/useFirstRender/index.d.ts

@@ -0,0 +1 @@
+export declare function useFirstRender(): boolean;

package/hooks/useFormatter/index.d.ts

@@ -0,0 +1 @@
+export declare const useFormatter: () => import("../..").Formatters;

package/hooks/useLocales/{index.ca679977.js → index.8154a401.js}

@@ -1,5 +1,5 @@
 import { useContext as o } from "react";
-import { L as t } from "../../contexts/LocalesContext/index.ca1e2149.js";
+import { L as t } from "../../contexts/LocalesContext/index.3fcfbe02.js";
 const n = () => {
   const e = o(t);
   if (!e)

package/index.js

@@ -1,46 +1,50 @@
 import { P as l } from "./components/ProgressBarStyle/index.fb6fd9ed.js";
-import { L as n, a as c, g as P } from "./contexts/LocalesContext/index.ca1e2149.js";
-import { H as C, a as g } from "./contexts/HostThemeContext/index.a6a62c70.js";
-import { u as L, a as T } from "./hooks/useResponsive/index.fc5e1b4f.js";
-import { u as w, a as O } from "./hooks/index.2942e1ab.js";
-import { u as S } from "./hooks/useLocales/index.ca679977.js";
-import { u as F } from "./hooks/useHostTheme/index.1c8e4ad7.js";
-import { d as z } from "./theme/defaultThemeOptions.9b9e7503.js";
-import { c as D, s as G } from "./theme/shadows.bf8dc290.js";
-import { p as M } from "./theme/palette.2baf72f5.js";
-import { C as V, a as b, c as j, d as q, g as A } from "./utils/index.d8b24456.js";
-import { f as J } from "./theme/overrides.7958c0ab.js";
+import { F as n, a as c } from "./contexts/index.bd12693a.js";
+import { L as C, a as h, g as v } from "./contexts/LocalesContext/index.3fcfbe02.js";
+import { H as g, a as L } from "./contexts/HostThemeContext/index.a6a62c70.js";
+import { a as H, b as w, c as O } from "./hooks/index.de62e8aa.js";
+import { u as S, a as k } from "./hooks/useResponsive/index.fc5e1b4f.js";
+import { u as y } from "./hooks/useLocales/index.8154a401.js";
+import { u as B } from "./hooks/useHostTheme/index.1c8e4ad7.js";
+import { d as G } from "./theme/defaultThemeOptions.9b9e7503.js";
+import { c as M, s as N } from "./theme/shadows.bf8dc290.js";
+import { p as j } from "./theme/palette.2baf72f5.js";
+import { C as A, a as E, c as J, d as K, g as Q } from "./utils/index.d8b24456.js";
+import { f as W } from "./theme/overrides.7958c0ab.js";
 import "@mui/material/styles";
 import "@mui/material";
 import "react/jsx-runtime";
 import "react";
-import "@mui/x-date-pickers/AdapterDateFns";
-import "@mui/x-date-pickers";
 import "@m4l/core";
 import "date-fns/locale/en-US";
+import "@mui/x-date-pickers/AdapterDateFns";
+import "@mui/x-date-pickers";
 import "@mui/material/useMediaQuery";
 import "./theme/typography.f5eadf47.js";
 export {
-  V as Capitalize,
-  b as GetFontValue,
-  C as HostThemeContext,
-  g as HostThemeProvider,
-  n as LocalesContext,
-  c as LocalesProvider,
+  A as Capitalize,
+  n as FormatterContext,
+  c as FormatterProvider,
+  E as GetFontValue,
+  g as HostThemeContext,
+  L as HostThemeProvider,
+  C as LocalesContext,
+  h as LocalesProvider,
   l as ProgressBarStyle,
-  j as colorPresets,
-  D as customShadows,
-  q as defaultPreset,
-  z as defaultThemeOptions,
-  J as fnComponentsOverrides,
-  A as getColorPresets,
-  P as getLocaleFromNetwork,
-  M as palette,
-  G as shadows,
-  F as useHostTheme,
+  J as colorPresets,
+  M as customShadows,
+  K as defaultPreset,
+  G as defaultThemeOptions,
+  W as fnComponentsOverrides,
+  Q as getColorPresets,
+  v as getLocaleFromNetwork,
+  j as palette,
+  N as shadows,
+  H as useFormatter,
+  B as useHostTheme,
   w as useIsMountedRef,
-  S as useLocales,
+  y as useLocales,
   O as useOffSetTop,
-  L as useResponsive,
-  T as useResponsiveDesktop
+  S as useResponsive,
+  k as useResponsiveDesktop
 };

package/package.json

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

package/contexts/LocalesContext/index.ca1e2149.js

@@ -1,111 +0,0 @@
-import { createContext as T, useState as k, useCallback as w, useEffect as E } from "react";
-import { AdapterDateFns as A } from "@mui/x-date-pickers/AdapterDateFns";
-import { LocalizationProvider as F } from "@mui/x-date-pickers";
-import { useEnvironment as O, useNetwork as P, useHostTools as U, useLocalStorage as j, EmitEvents as h, setLocalStorage as x } from "@m4l/core";
-import v from "date-fns/locale/en-US";
-import { jsx as g } from "react/jsx-runtime";
-async function q(o, t, n) {
-  const l = u(o), e = { ...o };
-  console.log("baseLocale initia", o, t, n);
-  let i;
-  return l === "es" ? i = (await import("date-fns/locale/es")).default : l === "fr" ? i = (await import("date-fns/locale/fr")).default : l === "en-US" ? i = v : (i = v, e.lang = "en", e.script = void 0, e.region = "US", e.url_icon = `${t}/${n}/frontend/commons/assets/icons/langs/lang_en.svg`, e.name = "English US*"), console.log("getLocale", l, e, i), {
-    ...e,
-    module: i,
-    localeString: u(e)
-  };
-}
-function u(o) {
-  let t = o.lang;
-  return o.script && o.script !== "" && (t = t + "-" + o.script), o.region && o.region !== "" && (t = t + "-" + o.region), console.log(
-    "joinLocale",
-    o.region && o.region !== "",
-    o.region,
-    t + "-" + o.region,
-    t,
-    o
-  ), t;
-}
-function $(o) {
-  console.log("splitLocale", o);
-  const t = new Intl.Locale(o);
-  return {
-    lang: t.language || "",
-    script: t.script,
-    region: t.region
-  };
-}
-const I = T(null);
-function B(o) {
-  const {
-    children: t,
-    isMicroFrontEnd: n,
-    localeHost: l,
-    getLocaleFromNetwork: e
-  } = o;
-  if (n && !l)
-    throw Error("Must set localeHost in microfrontend");
-  if (!n && !e)
-    throw Error("Must set getLocaleFromNetwork in host");
-  const {
-    domain_token: i,
-    host_static_assets: f,
-    environment_assets: d
-  } = O(), {
-    networkOperation: S
-  } = P(), {
-    events_add_listener: L,
-    events_remove_listener: H,
-    events_emit: C
-  } = U(), [s, m] = k(() => {
-    if (n)
-      return l;
-  }), [p, N] = j("localeHost", navigator.language), _ = w((r) => {
-    m(r);
-  }, []);
-  if (E(() => (n && L(h.EMMIT_EVENT_HOST_LOCALE_CHANGE, _), () => {
-    n && H("host_theme_change", _);
-  }), []), E(() => {
-    let r = !0;
-    if (!n && !!e)
-      return console.log("newLocaleString", `${f}/${d}/frontend/commons/assets/icons/langs/lang_en.svg`), S({
-        method: "POST",
-        endPoint: "na/locales",
-        data: {
-          ...$(p),
-          domain_token: i
-        }
-      }).then((c) => {
-        console.log("Response", c), r && e(c.data, f, d).then((a) => {
-          m(a), x("localeHost", a.localeString), console.log("Set localeHost", a.localeString), C(h.EMMIT_EVENT_HOST_LOCALE_CHANGE, a);
-        });
-      }).finally(() => {
-      }), function() {
-        r = !1;
-      };
-  }, [p]), !s)
-    return /* @__PURE__ */ g("div", {
-      children: "Cargando localeHost"
-    });
-  const M = (r) => {
-    (r.lang !== s.lang || r.script !== s.script || r.region !== s.region) && N(u(r));
-  };
-  return /* @__PURE__ */ g(I.Provider, {
-    value: {
-      currentLocale: s,
-      onChangeLocale: M
-    },
-    children: /* @__PURE__ */ g(F, {
-      dateAdapter: A,
-      adapterLocale: s.module,
-      dateFormats: {
-        hours24h: "23"
-      },
-      children: t
-    })
-  });
-}
-export {
-  I as L,
-  B as a,
-  q as g
-};

package/contexts/index.a0e7894e.js

@@ -1,3 +0,0 @@
-import "./LocalesContext/index.ca1e2149.js";
-import "date-fns/locale/en-US";
-import "./HostThemeContext/index.a6a62c70.js";

package/hooks/index.2942e1ab.js

@@ -1,26 +0,0 @@
-import { useRef as n, useEffect as s, useState as r } from "react";
-import "@mui/material/styles";
-import "@mui/material/useMediaQuery";
-import "../contexts/LocalesContext/index.ca1e2149.js";
-import "../contexts/HostThemeContext/index.a6a62c70.js";
-function a() {
-  const e = n(!0);
-  return s(
-    () => () => {
-      e.current = !1;
-    },
-    []
-  ), e;
-}
-function m(e) {
-  const [f, t] = r(!1), o = e || 100;
-  return s(() => (window.onscroll = () => {
-    window.pageYOffset > o ? t(!0) : t(!1);
-  }, () => {
-    window.onscroll = null;
-  }), [o]), f;
-}
-export {
-  m as a,
-  a as u
-};