@m4l/core 0.0.21 → 0.0.24

package/.eslintignore

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

package/.eslintrc.cjs

@@ -0,0 +1,109 @@
+/* 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",
+        '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)],['@hooks', path.resolve(__dirname)||'/hooks/']],
+              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/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+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/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/core",
   "private": false,
-  "version": "0.0.21",
+  "version": "0.0.24",
   "license": "UNLICENSED",
   "author": "M4L Team",
   "scripts": {
@@ -57,9 +57,7 @@
     "vite-plugin-mkcert": "^1.6.4",
     "vitest": "^0.15.2"
   },
-  "files": [
-    "dist"
-  ],
+
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",

package/package_with_dependicies.json

@@ -0,0 +1,75 @@
+{
+  "name": "m4l_core",
+  "private": false,
+  "version": "1.0.2",
+  "license": "UNLICENSED",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "npx eslint src",
+    "lint:fix": "npm run lint -- --fix",
+    "prettier": "npx prettier src --check",
+    "prettier:fix": "npm run prettier -- --write",
+    "format": "npm run prettier:fix && npm run lint:fix",
+    "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\""
+  },
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.8.2",
+    "history": "^5.3.0",
+    "nprogress": "^0.2.0",
+    "react": "^17.0.0 || 18.x",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "6.3.0",
+    "react-toastify": "^9.0.3",
+    "snakecase-keys": "^5.4.2"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.40",
+    "@types/nprogress": "^0.2.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
+    "@vitejs/plugin-react": "^1.3.0",
+    "eslint": "^8.17.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "json": "^11.0.0",
+    "prettier": "^2.6.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.9",
+    "vite-plugin-dts": "^1.2.0",
+    "vite-plugin-mkcert": "^1.6.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.8.2",
+    "react": "^17.0.0 || 18.x",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "6.3.0",
+    "react-toastify": "^9.0.3"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/m4l_core.umd.js",
+  "module": "./dist/m4l_core.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/m4l_core.es.js",
+      "require": "./dist/m4l_core.umd.js"
+    }
+  }
+}

package/src/contexts/EnvironmentContext/index.tsx

@@ -0,0 +1,37 @@
+//react
+import { createContext, useState } from 'react';
+// mui
+// hooks
+// utils
+// config
+// @type
+import { EnvironmentContextType, EnvironmentProviderProps } from './types';
+
+// ----------------------------------------------------------------------
+
+const initialValue: EnvironmentContextType = {
+    isLocalhost: true,
+    host: '',
+    domain_token: '',
+    host_api_local: '',
+    host_api_remote: '',
+    host_static_assets: '',
+    environment: '',
+};
+
+const EnvironmentContext = createContext<EnvironmentContextType>(initialValue);
+
+function EnvironmentProvider(props: EnvironmentProviderProps) {
+    const { children, ...other } = props;
+
+    const [finalEnvironment] = useState<EnvironmentContextType>(other);
+
+    // console.log('Por aca', finalEnvironment);
+    return (
+        <EnvironmentContext.Provider value={finalEnvironment}>
+            {children}
+        </EnvironmentContext.Provider>
+    );
+}
+
+export { EnvironmentProvider, EnvironmentContext };

package/{dist/contexts/EnvironmentContext/types.d.ts → src/contexts/EnvironmentContext/types.ts}

@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
 import { EnvironmentType } from '../../types';
+
 export interface EnvironmentProviderProps extends EnvironmentType {
     children: ReactNode;
 }
-export declare type EnvironmentContextType = EnvironmentType;
+
+export type EnvironmentContextType = EnvironmentType;

package/src/contexts/FlagsContext/index.tsx

@@ -0,0 +1,50 @@
+import { createContext, useCallback, useState } from 'react';
+import { voidFunction } from '../../utils/voidFunction';
+
+// mui
+// hooks
+// utils
+// config
+// @type
+import { FlagsContextProps, Flag, FlagsProviderProps } from './types';
+
+// ----------------------------------------------------------------------
+
+const initialState: FlagsContextProps = {
+    flags: [],
+    clearFlags: voidFunction,
+    addFlag: voidFunction,
+};
+
+const FlagsContext = createContext<FlagsContextProps>(initialState);
+
+function FlagsProvider({ children }: FlagsProviderProps) {
+    const [flags, setFlags] = useState<Array<Flag>>([]);
+
+    const clearFlags = useCallback(() => {
+        setFlags([]);
+    }, []);
+
+    const addFlag = useCallback((newFlag: Flag) => {
+        setFlags(oldFlags => {
+            if (oldFlags.findIndex(f => f === newFlag) < 0) {
+                return [...oldFlags, newFlag];
+            }
+            return [...oldFlags];
+        });
+    }, []);
+
+    return (
+        <FlagsContext.Provider
+            value={{
+                flags,
+                addFlag,
+                clearFlags,
+            }}
+        >
+            {children}
+        </FlagsContext.Provider>
+    );
+}
+
+export { FlagsProvider, FlagsContext };

package/src/contexts/FlagsContext/types.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface FlagsProviderProps {
+    children: ReactNode;
+}
+
+export type Flag = string;
+
+// Interface para almacenar el estado del contexto
+// Interface para indicar las propiedas y metodos que comparte el contexto
+export interface FlagsContextProps {
+    flags: Array<Flag>;
+    clearFlags: () => void;
+    addFlag: (flag: Flag) => void;
+}

package/src/contexts/HostToolsContext/index.tsx

@@ -0,0 +1,34 @@
+import { createContext, useState } from 'react';
+import { HostToolsType } from '../../types';
+import { voidFunction } from '../../utils/voidFunction';
+
+// mui
+
+// hooks
+// utils
+// config
+// @type
+import type { HostToolsContextType, HostToolsProviderProps } from './types';
+
+// ----------------------------------------------------------------------
+
+const initialValue: HostToolsContextType = {
+    toast: () => 0,
+    startProgress: voidFunction,
+    stopProgress: voidFunction,
+    events_add_listener: voidFunction,
+    events_remove_listener: voidFunction,
+    events_emit: voidFunction,
+};
+
+const HostToolsContext = createContext<HostToolsContextType>(initialValue);
+
+function HostToolsProvider(props: HostToolsProviderProps) {
+    const { children, ...hostTools } = props;
+
+    const [finalTools] = useState<HostToolsType>(hostTools);
+
+    return <HostToolsContext.Provider value={finalTools}>{children}</HostToolsContext.Provider>;
+}
+
+export { HostToolsProvider, HostToolsContext };

package/{dist/contexts/HostToolsContext/types.d.ts → src/contexts/HostToolsContext/types.ts}

@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
 import { HostToolsType } from '../../types';
+
 export interface HostToolsProviderProps extends HostToolsType {
     children: ReactNode;
 }
-export declare type HostToolsContextType = HostToolsType;
+
+export type HostToolsContextType = HostToolsType;

package/src/contexts/ModuleDictionaryContext/index.tsx

@@ -0,0 +1,109 @@
+//react
+import { createContext, useCallback, useLayoutEffect, useState } from 'react';
+//m4l
+// mui
+// hooks
+// utils
+// config
+// @type
+import { ModuleDictionaryContextProps, ModuleDictionaryProviderProps } from './types';
+
+import { useEnvironment, useFlags, useHostTools, useNetwork } from '../../hooks';
+import { ModuleDictionary } from '../../types/dictionary';
+// ----------------------------------------------------------------------
+
+const initialState: ModuleDictionaryContextProps = {
+    getLabel: () => '..',
+    getModuleLabel: () => 'No dictionary context',
+};
+
+const ModuleDictionaryContext = createContext<ModuleDictionaryContextProps>(initialState);
+
+function ModuleDictionaryProvider(props: ModuleDictionaryProviderProps) {
+    const {
+        children,
+        componentsDictionary,
+        moduleId,
+        moduleName = 'module_name',
+        currentLang = 'us',
+        isAuth = true,
+    } = props;
+    const { addFlag } = useFlags();
+    // Cargar el diccionario
+    const [moduleDictionary, setModuleDictionary] = useState<ModuleDictionary | undefined>(
+        undefined,
+    );
+    const { domain_token } = useEnvironment();
+    const { startProgress, stopProgress } = useHostTools();
+    const { networkOperation } = useNetwork();
+
+    useLayoutEffect(() => {
+        let mounted = true;
+        startProgress();
+
+        networkOperation({
+            method: 'GET',
+            endPoint: isAuth ? `dictionaries/${moduleId}` : `na/dictionaries/${moduleId}`,
+            parms: {
+                comps: componentsDictionary,
+                ...(isAuth ? {} : { domain_token }),
+            },
+            // isRemote: false
+        })
+            .then((response: any) => {
+                if (mounted) {
+                    /// /console.log("useEffect - ModuleProvider - response");
+
+                    setModuleDictionary({
+                        ...response,
+                    });
+
+                    addFlag('dictionary_loaded');
+                }
+            })
+            .finally(() => {
+                stopProgress();
+            });
+
+        return function cleanUp() {
+            mounted = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentLang]);
+
+    const getLabel = useCallback(
+        (key: string) => {
+            if (moduleDictionary === undefined) return 'No dictionary';
+            if (key === undefined) return 'No key';
+
+            const parts = key.split('.');
+
+            if (parts.length === 2) {
+                if (moduleDictionary[parts[0]] && (moduleDictionary as any)[parts[0]][parts[1]]) {
+                    return (moduleDictionary as any)[parts[0]][parts[1]];
+                }
+            } else if (parts.length === 1) {
+                if (moduleDictionary.data && (moduleDictionary as any).data[key]) {
+                    return (moduleDictionary as any).data[key];
+                }
+            }
+
+            return `No dictionary:${key}`;
+        },
+        [moduleDictionary],
+    );
+    const getModuleLabel = useCallback(() => getLabel(moduleName), [moduleName, getLabel]);
+    return (
+        <ModuleDictionaryContext.Provider
+            value={{
+                moduleDictionary: moduleDictionary,
+                getLabel,
+                getModuleLabel,
+            }}
+        >
+            {children}
+        </ModuleDictionaryContext.Provider>
+    );
+}
+
+export { ModuleDictionaryProvider, ModuleDictionaryContext };

package/src/contexts/ModuleDictionaryContext/types.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import type { GetLabelType, ModuleDictionary } from 'src/types/dictionary';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ModuleDictionaryProviderProps {
+    currentLang?: string;
+    isAuth?: boolean;
+    moduleId: number;
+    moduleName?: string; //la llave donde reposa el nombre del modulo en el diccionario
+    componentsDictionary: string[];
+    children: ReactNode;
+}
+
+export interface ModuleDictionaryContextProps {
+    moduleDictionary?: ModuleDictionary;
+    getLabel: GetLabelType;
+    getModuleLabel: () => string;
+}

package/src/contexts/NetworkContext/index.tsx

@@ -0,0 +1,44 @@
+import { createContext, useCallback } from 'react';
+
+// mui
+// hooks
+import useEnvironment from '../../hooks/useEnvironment';
+import useHostTools from '../../hooks/useHostTools';
+// utils
+// config
+// @type
+import type { NetworkProps } from '../../types';
+import type { NetworkContextType, NetworkProviderProps } from './types';
+
+// ----------------------------------------------------------------------
+
+const initialValue: NetworkContextType = {
+    networkOperation: () => Promise.resolve(),
+};
+
+const NetworkContext = createContext<NetworkContextType>(initialValue);
+
+function NetworkProvider(props: NetworkProviderProps) {
+    const { children, axiosOperation } = props;
+    const environment = useEnvironment();
+    const hostTools = useHostTools();
+
+    const networkOperation = useCallback(
+        async (networkProps: NetworkProps) => {
+            return axiosOperation(networkProps, environment, hostTools);
+        },
+        [axiosOperation],
+    );
+
+    return (
+        <NetworkContext.Provider
+            value={{
+                networkOperation,
+            }}
+        >
+            {children}
+        </NetworkContext.Provider>
+    );
+}
+
+export { NetworkProvider, NetworkContext };

package/{dist/contexts/NetworkContext/types.d.ts → src/contexts/NetworkContext/types.ts}

@@ -1,11 +1,15 @@
 import { ReactNode } from 'react';
 import { AxiosOperation, NetworkProps } from '../../types';
-export declare type EventFunListener = (...args: any[]) => void;
+
+export type EventFunListener = (...args: any[]) => void;
+
 export interface NetworkType {
     networkOperation: (props: NetworkProps) => Promise<any>;
 }
+
 export interface NetworkProviderProps {
     axiosOperation: AxiosOperation;
     children: ReactNode;
 }
-export declare type NetworkContextType = NetworkType;
+
+export type NetworkContextType = NetworkType;

package/src/contexts/index.ts

@@ -0,0 +1,5 @@
+export { EnvironmentContext, EnvironmentProvider } from './EnvironmentContext';
+export { HostToolsContext, HostToolsProvider } from './HostToolsContext';
+export { NetworkContext, NetworkProvider } from './NetworkContext';
+export { FlagsContext, FlagsProvider } from './FlagsContext';
+export { ModuleDictionaryContext, ModuleDictionaryProvider } from './ModuleDictionaryContext';