@m4l/graphics 0.1.18 → 0.1.19

package/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/.eslintrc.cjs

@@ -0,0 +1,118 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
+const path = require('path');
+
+const prettierOptions = JSON.parse(fs.readFileSync(path.resolve(__dirname, '.prettierrc.json'), 'utf8'));
+
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+    },
+    extends: [
+        'plugin:react/recommended',
+        // 'airbnb',
+        'eslint:recommended',
+        'plugin:jsx-a11y/recommended',
+        'plugin:import/typescript',
+        'plugin:react/jsx-runtime',
+        'plugin:prettier/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'prettier',
+    ],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+    },
+    plugins: ['react', '@typescript-eslint', 'import', 'jsx-a11y', 'react-hooks', 'prettier', 'unused-imports'],
+    rules: {
+        'prettier/prettier': ['error', prettierOptions],
+        'react/jsx-filename-extension': [1, {extensions: ['.ts', '.tsx']}], //En que archivos va a haber jsx
+        '@typescript-eslint/no-explicit-any':"off",
+        'react/jsx-props-no-spreading':"off", //Que se pueda usar el spread
+        "react/prop-types":"off", //Desactivar los proptypes
+        "react/require-default-props":"off", //Cuando se usan props parametros opcionales no es necesariio definir los valores por defecto
+        "react/jsx-no-useless-fragment":"warn", //No usar jsx dentro de un fragment
+        "react/no-unstable-nested-components": [
+            "off",
+            { "allowAsProps": true  }
+          ],
+        "@typescript-eslint/no-empty-interface":"warn",
+        "@typescript-eslint/ban-ts-comment":"off",
+        "no-empty-pattern":"warn",
+        "no-shadow":"warn",  //que se puedan declarar las mismas variables dentro del scope
+        'no-console': 'off', //Que no se puedan imprimir en la consola 
+        "no-empty": "off",
+        // "no-empty-function": "error",
+        "@typescript-eslint/no-empty-function": "off","no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": [
+          "warn", // or "error"
+          { 
+            "argsIgnorePattern": "^_",
+            "varsIgnorePattern": "^_",
+            "caughtErrorsIgnorePattern": "^_"
+          }
+        ],
+        
+        'import/extensions': [
+            'off',
+            'ignorePackages',
+            {
+                // js: 'never',
+                // mjs: 'never',
+                // jsx: 'never',
+                ts: 'never',   //se especifica q tipo de librerias se pueden importar
+                tsx: 'never',
+            },
+        ],
+        'import/prefer-default-export': 'off',
+    },
+    overrides: [
+        {
+            files: ['**/*.ts?(x)','**/*.js?(x)'],
+            rules: {
+                'prettier/prettier': ['warn', prettierOptions],
+            },
+        },
+    ],
+    settings: {
+        "react": {
+            "createClass": "createReactClass", // Regex for Component Factory to use,
+                                               // default to "createReactClass"
+            "pragma": "React",  // Pragma to use, default to "React"
+            "fragment": "Fragment",  // Fragment to use (may be a property of <pragma>), default to "Fragment"
+            "version": "detect", // React version. "detect" automatically picks the version you have installed.
+                                 // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
+                                 // It will default to "latest" and warn if missing, and to "detect" in the future
+            "flowVersion": "0.53" // Flow version
+          },
+        'import/extensions': ['.js', '.mjs', '.jsx', '.ts', '.tsx'],
+        'import/resolver': {  //Permite encontrar los alias de los paths de importación
+            alias: {
+              map: [['~', path.resolve(__dirname)]],
+              extensions: ['.ts', '.js', '.tsx'],
+            },
+          },
+    },
+};
+
+// {
+//   "jsxSingleQuote": false,
+//   "singleQuote": true,
+//   "semi": true,
+//   "tabWidth": 4,
+//   "trailingComma": "all",
+//   "printWidth": 100,
+//   "bracketSpacing": false,
+//   "bracketSameLine": false,
+//   "useTabs": false,
+//   "arrowParens": "always",
+//   "endOfLine": "crlf",
+//   "proseWrap": "preserve",
+//   "quoteProps": "as-needed",
+//   "htmlWhitespaceSensitivity": "css"
+// }

package/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+package-lock.json
+
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+./docs/*

package/.gitlab-ci.yml

@@ -0,0 +1,15 @@
+cache:
+    key:
+        files:
+            - package.json
+    paths:
+        - node_modules/
+
+build:
+    script:
+        - npm i
+        - npm run typescript
+    tags:
+        - shell
+    rules:
+        - if: $CI_PIPELINE_SOURCE == 'merge_request_event'

package/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+yarn.lock

package/.prettierrc.json

@@ -0,0 +1,26 @@
+{
+  "printWidth": 100,
+  "endOfLine":"auto",
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens" : "avoid",
+  "bracketSpacing": true,
+  "bracketSameLine":false, 
+  "proseWrap": "never",
+  "quoteProps": "as-needed",
+  "singleAttributePerLine":false ,
+  
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "typescript" }
+    }
+  ]
+
+
+}
+
+

package/.vscode/settings.json

@@ -0,0 +1,50 @@
+{
+    "explorer.confirmDelete": false,
+    "code-runner.clearPreviousOutput": true,
+    "explorer.confirmDragAndDrop": false,
+    "liveServer.settings.donotShowInfoMsg": true,
+    "prettier.eslintIntegration": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    },
+    "eslint.probe": [
+        "javascriptreact",
+        "typescript",
+        "typescriptreact",
+        "html",
+        "markdown"
+    ],
+    "color-highlight.matchRgbWithNoFunction": true,
+    "color-highlight.matchWords": true,
+    "[typescript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "thunder-client.codeSnippetLanguage": "js-axios",
+    "editor.formatOnSave": false,
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "javascript.updateImportsOnFileMove.enabled": "always",
+    "typescript.updateImportsOnFileMove.enabled": "always",
+    // "git.autofetch": true,
+    "eslint.nodeEnv": "",
+    // "prettier.useEditorConfig": false,
+    // "prettier.typescriptEnable": [
+    //     "typescript",
+    //     "typescriptreact"
+    // ],
+    // "prettier.tabWidth": 4,
+    // "prettier.jsonEnable": [
+    //     "json"
+    // ],
+    // "prettier.trailingComma": "all",
+    // "prettier.singleQuote": true,
+    // "prettier.printWidth": 100,
+    // "prettier.bracketSpacing": true,
+    // "prettier.singleAttributePerLine": false,
+    // "prettier.graphqlEnable": [
+    //     "graphql"
+    // ],
+    // "eslint.rules.customizations": [],
+    // "eslint.runtime": ""
+}

package/{contexts/LocalesContext/index.3fcfbe02.js → dist/contexts/LocalesContext/index.5b555637.js}

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

package/{contexts/index.84089632.js → dist/contexts/index.2f4a4040.js}

@@ -1,4 +1,4 @@
 import "./FormatterContext/index.92336f4c.js";
-import "./LocalesContext/index.3fcfbe02.js";
+import "./LocalesContext/index.5b555637.js";
 import "date-fns/locale/en-US";
 import "./HostThemeContext/index.a6a62c70.js";

package/{hooks/index.a0cce694.js → dist/hooks/index.c13bc37e.js}

@@ -1,7 +1,7 @@
 import { useRef as f, useEffect as s, useState as n } from "react";
 import "../contexts/FormatterContext/index.92336f4c.js";
 import "../contexts/HostThemeContext/index.a6a62c70.js";
-import "../contexts/LocalesContext/index.3fcfbe02.js";
+import "../contexts/LocalesContext/index.5b555637.js";
 import "@mui/material/styles";
 import "@mui/material/useMediaQuery";
 function m() {

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

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

package/{index.d.ts → dist/index.d.ts}

@@ -14,3 +14,4 @@ export { getFontValue as GetFontValue } from './utils/getFontValue';
 export * from './utils/strings';
 export { default as fnComponentsOverrides } from './theme/overrides';
 export type { HostThemeType } from './types';
+export * from './utils/anchorEl';

package/dist/index.js

@@ -0,0 +1,55 @@
+import { P as d } from "./components/ProgressBarStyle/index.fb6fd9ed.js";
+import { F as c, a as P } from "./contexts/FormatterContext/index.92336f4c.js";
+import { L as C, a as F, g } from "./contexts/LocalesContext/index.5b555637.js";
+import { H as L, a as T } from "./contexts/HostThemeContext/index.a6a62c70.js";
+import { u as H } from "./hooks/useFirstRender/index.1e9b02fb.js";
+import { u as O } from "./hooks/useFormatter/index.57ac8cca.js";
+import { u as k } from "./hooks/useHostTheme/index.1c8e4ad7.js";
+import { u as y, a as z } from "./hooks/index.c13bc37e.js";
+import { u as B } from "./hooks/useLocales/index.f676279e.js";
+import { u as E, a as G } from "./hooks/useResponsive/index.fc5e1b4f.js";
+import { d as M } from "./theme/defaultThemeOptions.b2cdbe59.js";
+import { c as V, s as W } from "./theme/shadows.bf8dc290.js";
+import { p as q } from "./theme/palette.2baf72f5.js";
+import { C as K, a as Q, c as U, d as X, b as Y, g as Z } from "./utils/index.7ab4fc54.js";
+import { f as $ } from "./theme/overrides.7958c0ab.js";
+import "@mui/material/styles";
+import "@mui/material";
+import "react/jsx-runtime";
+import "react";
+import "@m4l/core";
+import "@mui/x-date-pickers/AdapterDateFns";
+import "@mui/x-date-pickers";
+import "date-fns/locale/en-US";
+import "@mui/material/useMediaQuery";
+import "./theme/typography.63fff3ec.js";
+import "./vendor.3b4b3674.js";
+export {
+  K as Capitalize,
+  c as FormatterContext,
+  P as FormatterProvider,
+  Q as GetFontValue,
+  L as HostThemeContext,
+  T as HostThemeProvider,
+  C as LocalesContext,
+  F as LocalesProvider,
+  d as ProgressBarStyle,
+  U as colorPresets,
+  V as customShadows,
+  X as defaultPreset,
+  M as defaultThemeOptions,
+  $ as fnComponentsOverrides,
+  Y as getAnchorElPositionWindow,
+  Z as getColorPresets,
+  g as getLocaleFromNetwork,
+  q as palette,
+  W as shadows,
+  H as useFirstRender,
+  O as useFormatter,
+  k as useHostTheme,
+  y as useIsMountedRef,
+  B as useLocales,
+  z as useOffSetTop,
+  E as useResponsive,
+  G as useResponsiveDesktop
+};

package/dist/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@m4l/graphics",
+  "version": "0.1.19",
+  "license": "UNLICENSED",
+  "author": "M4L Team",
+  "dependencies": {
+    "@m4l/core": "*",
+    "@mui/x-date-pickers": "^5.0.0-beta.3",
+    "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": [
+    "*"
+  ],
+  "source": "src/index.ts",
+  "main": "./index.js",
+  "module": "./index.js",
+  "type": "module",
+  "types": "./index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "private": false
+}

package/dist/theme/breakpoints.d.ts

@@ -0,0 +1,10 @@
+export declare const breakpoints: {
+    values: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+};
+export default breakpoints;

package/{theme/defaultThemeOptions.9b9e7503.js → dist/theme/defaultThemeOptions.b2cdbe59.js}

@@ -1,14 +1,16 @@
-import { alpha as t } from "@mui/material/styles";
-import { t as a } from "./typography.f5eadf47.js";
-import { p as r, G as e } from "./palette.2baf72f5.js";
+import { alpha as a } from "@mui/material/styles";
+import { t as e } from "./typography.63fff3ec.js";
+import { p as r, G as t } from "./palette.2baf72f5.js";
 import { s as o, c as s } from "./shadows.bf8dc290.js";
-import { g as i } from "../utils/index.d8b24456.js";
-const c = {
-  typography: a,
+import { g as i } from "../utils/index.7ab4fc54.js";
+import { b as m } from "../vendor.3b4b3674.js";
+const f = {
+  typography: e,
+  breakpoints: m,
   shadows: o.light,
   customShadows: {
     ...s.light,
-    primary: `0 8px 16px 0 ${t(i("default").main, 0.24)}`
+    primary: `0 8px 16px 0 ${a(i("default").main, 0.24)}`
   },
   palette: {
     ...r.light,
@@ -23,12 +25,12 @@ const c = {
       DarkSelected: "#142827",
       DarkSelectedHover: "#12342B"
     },
-    text: { primary: e[800], secondary: e[700], disabled: e[500] },
+    text: { primary: t[800], secondary: t[700], disabled: t[500] },
     secondary: {
       main: "#34ac4e"
     }
   }
 };
 export {
-  c as d
+  f as d
 };

package/{theme/typography.f5eadf47.js → dist/theme/typography.63fff3ec.js}

@@ -1,4 +1,4 @@
-import { p as t, r as e } from "../utils/index.d8b24456.js";
+import { p as t, r as e } from "../utils/index.7ab4fc54.js";
 const i = "Public Sans, sans-serif", o = {
   fontFamily: i,
   fontWeightRegular: 400,

package/dist/utils/anchorEl.d.ts

@@ -0,0 +1,13 @@
+export declare type AnchorEl = HTMLElement | (() => HTMLElement);
+export interface AnchorOrigin {
+    vertical: 'top' | 'center' | 'bottom' | number;
+    horizontal: 'left' | 'center' | 'right' | number;
+}
+export interface AnchorPosition {
+    top: number;
+    left: number;
+}
+export declare const getAnchorElPositionWindow: (anchorElement: HTMLElement, newWindowRect: Pick<DOMRect, 'width' | 'height'>, anchorOrigin: AnchorOrigin, transformOrigin: AnchorOrigin, marginThreshold?: number) => {
+    top: number;
+    left: number;
+};