@m4l/graphics 0.1.19 → 0.1.20

package/dist/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "license": "UNLICENSED",
   "author": "M4L Team",
   "scripts": {
@@ -9,7 +9,8 @@
     "build": "tsc && vite build && yarn build:package",
     "build:monorepo": "tsc && vite build && yarn build:package",
     "release": "yarn build && npm publish ./dist",
-    "release:monorepo": "yarn build:monorepo && npm publish ./dist",
+    "release:monorepo": "yarn build:monorepo",
+    "publish": "npm publish ./dist",
     "lint": "npx eslint src",
     "lint:fix": "npm run lint -- --fix",
     "prettier": "npx prettier src --check",
@@ -58,9 +59,7 @@
     "vite": "3.1.0",
     "vite-plugin-dts": "1.2.0"
   },
-  "files": [
-    "*"
-  ],
+  "files": ["dist/**"],
   "source": "src/index.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/.eslintignore

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

package/.eslintrc.cjs

@@ -1,118 +0,0 @@
-/* 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

@@ -1,24 +0,0 @@
-# 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

@@ -1,15 +0,0 @@
-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

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

package/.prettierrc.json

@@ -1,26 +0,0 @@
-{
-  "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

@@ -1,50 +0,0 @@
-{
-    "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/src/components/ProgressBarStyle/index.tsx

@@ -1,39 +0,0 @@
-// @mui
-import { useTheme } from '@mui/material/styles';
-import { GlobalStyles } from '@mui/material';
-
-// -------------ddd---------------------------------------------------------
-
-export function ProgressBarStyle() {
-    const theme = useTheme();
-
-    return (
-        <GlobalStyles
-            styles={{
-                '#nprogress': {
-                    pointerEvents: 'none',
-                    '& .bar': {
-                        top: 0,
-                        left: 0,
-                        height: 2,
-                        width: '100%',
-                        position: 'fixed',
-                        zIndex: theme.zIndex.snackbar,
-                        backgroundColor: theme.palette.primary.main,
-                        boxShadow: `0 0 2px ${theme.palette.primary.main}`,
-                    },
-                    '& .peg': {
-                        right: 0,
-                        opacity: 1,
-                        width: 100,
-                        height: '100%',
-                        display: 'block',
-                        position: 'absolute',
-                        transform: 'rotate(3deg) translate(0px, -4px)',
-                        boxShadow: `0 0 10px ${theme.palette.primary.main}, 0 0 5px ${theme.palette.primary.main}`,
-                    },
-                },
-            }}
-        />
-    );
-}

package/src/components/index.ts

@@ -1,3 +0,0 @@
-export { ProgressBarStyle } from './ProgressBarStyle';
-
-//---

package/src/contexts/FormatterContext/index.tsx

@@ -1,131 +0,0 @@
-/* eslint-disable import/no-duplicates */
-import { createContext, useState, useEffect, useCallback } from 'react';
-import { EmitEvents, useHostTools, usePropageteMF } from '@m4l/core';
-import { FormatterProviderProps, FormatterContextProps, Formatters } from './types';
-import { useFirstRender } from '../../hooks/useFirstRender';
-
-// ----------------------------------------------------------------------
-
-const FormatterContext = createContext<FormatterContextProps | null>(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
- */
-function FormatterProvider(props: FormatterProviderProps) {
-    const { children, isMicroFrontEnd, currencyFormatter, numberFormatter, dateFormatter } = props;
-
-    const currencyDecimalDigits = currencyFormatter?.decimalDigits || 0;
-    const currencyCode = currencyFormatter?.code || 'USD';
-
-    const decimalSymbol = numberFormatter?.decimalSymbol || (0.1).toLocaleString().substring(1, 2);
-    const thousandsSymbol =
-        numberFormatter?.thousandsSymbol || (1000).toLocaleString().substring(1, 2);
-
-    const dateFormat = dateFormatter?.dateFormat || 'yyyy-MM-dd';
-    const dateMask = dateFormatter?.dateMask || '____-__-__';
-
-    const datetimeFormat = dateFormatter?.datetimeFormat || 'yyyy-MM-dd HH:mm:ss';
-    const datetimeMask = dateFormatter?.datetimeMask || '____-__-__ __:__:__';
-
-    const timeFormat = dateFormatter?.timeFormat || 'HH:mm:ss';
-    const timeMask = dateFormatter?.timeMask || '__:__:__';
-
-    const formatDate =
-        dateFormatter?.formatDate ||
-        (() => {
-            throw new Error('Incorrect use of formatDate');
-        });
-
-    const firstRender = useFirstRender();
-    const { events_emit } = useHostTools();
-    const [currentFormatterValues, setCurrentFormatterValues] = useState<Formatters>({
-        currencyFormatter: {
-            decimalDigits: currencyDecimalDigits,
-            code: currencyCode,
-        },
-        numberFormatter: { decimalSymbol, thousandsSymbol },
-        dateFormatter: {
-            dateFormat,
-            dateMask,
-            datetimeFormat,
-            datetimeMask,
-            timeFormat,
-            timeMask,
-            formatDate,
-        },
-    });
-
-    const onChangeFormatter = useCallback((newFormmaterValues: Formatters) => {
-        setCurrentFormatterValues(newFormmaterValues);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    //Matricular la propagación hacia los microfronends
-    usePropageteMF({
-        isMicroFrontEnd,
-        event: EmitEvents.EMMIT_EVENT_HOST_FORMATTER_CHANGE,
-        setHandler: onChangeFormatter,
-    });
-
-    useEffect(() => {
-        if (isMicroFrontEnd) {
-            return;
-        }
-
-        if (firstRender) {
-            return;
-        }
-
-        const newFormatterValues: Formatters = {
-            currencyFormatter: { decimalDigits: currencyDecimalDigits, code: currencyCode },
-            numberFormatter: { decimalSymbol, thousandsSymbol },
-            dateFormatter: {
-                dateFormat,
-                dateMask,
-                datetimeFormat,
-                datetimeMask,
-                timeFormat,
-                timeMask,
-                formatDate,
-            },
-        };
-
-        setCurrentFormatterValues(newFormatterValues);
-
-        events_emit(EmitEvents.EMMIT_EVENT_HOST_FORMATTER_CHANGE, newFormatterValues);
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        firstRender,
-        currencyCode,
-        currencyDecimalDigits,
-        decimalSymbol,
-        thousandsSymbol,
-        dateFormat,
-        dateMask,
-        datetimeFormat,
-        datetimeMask,
-        timeFormat,
-        timeMask,
-        formatDate,
-    ]);
-
-    return (
-        <FormatterContext.Provider
-            value={{
-                ...currentFormatterValues,
-            }}
-        >
-            {children}
-        </FormatterContext.Provider>
-    );
-}
-
-export { FormatterProvider, FormatterContext };

package/src/contexts/FormatterContext/types.ts

@@ -1,73 +0,0 @@
-import type { Locale } from 'date-fns';
-import { ReactNode } from 'react';
-
-export interface CurrencyFormatter {
-    code: string;
-    // 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 {
-    //Formatos asociados a la moneda
-    currencyFormatter?: CurrencyFormatter;
-    //Formatos asociados a los numeros
-    dateFormatter?: OptionalDateFormatter;
-    //Formatos asociados a las fechas
-    numberFormatter?: NumberFormatter;
-}
-/**
- * @interface
- */
-export interface FormatterProviderProps extends OptionalFormatters {
-    //Propiedad que permite identificar el rol del componente, si es host hay algun cambio de algun parametro, lo propaga a los MFs, de lo contrario, esta escuchando los cambios del host
-    isMicroFrontEnd: boolean;
-
-    //Componentes a los que se va a dar cobertura
-    children: ReactNode;
-}
-
-export type FormatterContextProps = Formatters;

package/src/contexts/HostThemeContext/index.tsx

@@ -1,85 +0,0 @@
-import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
-import { CssBaseline } from '@mui/material';
-import {
-    ThemeOptions,
-    createTheme,
-    ThemeProvider as MUIThemeProvider,
-    StyledEngineProvider,
-} from '@mui/material/styles';
-
-// muis
-// hooks
-// utils
-// config
-// @type
-import { HostThemeContextType, HostThemeProviderProps } from './types';
-import { EmitEvents, useHostTools } from '@m4l/core';
-
-// ----------------------------------------------------------------------
-
-const HostThemeContext = createContext<HostThemeContextType | null>(null);
-
-function HostThemeProvider(props: HostThemeProviderProps) {
-    const { children, hostThemeOptions, fnComponentsOverrides, isMicroFrontEnd } = props;
-    const [finalThemeOptions, setFinalThemeOptions] = useState<ThemeOptions>(hostThemeOptions);
-    const { events_add_listener, events_remove_listener, events_emit } = useHostTools();
-    const [isFirstTime, setIsFirstTime] = useState(true);
-
-    const finalTheme = useMemo(() => {
-        const theme = createTheme(finalThemeOptions);
-        theme.components = fnComponentsOverrides(theme);
-        return theme;
-    }, [finalThemeOptions]);
-
-    const onUpdateOverrides = useCallback((newThemeOptions: ThemeOptions) => {
-        setFinalThemeOptions(newThemeOptions);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    //Matricular el cambio de tema si es
-    useEffect(() => {
-        if (isMicroFrontEnd) {
-            events_add_listener(EmitEvents.EMMIT_EVENT_HOST_THEME_CHANGE, onUpdateOverrides);
-        }
-        return () => {
-            if (isMicroFrontEnd) {
-                events_remove_listener(EmitEvents.EMMIT_EVENT_HOST_THEME_CHANGE, onUpdateOverrides);
-            }
-        };
-    }, []);
-
-    //Cuando cambie las opciones del tema debido al usuario
-    useEffect(() => {
-        if (isFirstTime) {
-            setIsFirstTime(false);
-            return;
-        }
-
-        if (!isMicroFrontEnd) {
-            setFinalThemeOptions(hostThemeOptions);
-            events_emit(EmitEvents.EMMIT_EVENT_HOST_THEME_CHANGE, hostThemeOptions);
-        }
-    }, [hostThemeOptions]);
-
-    // const updateHostThemeOptions = useCallback((newThemeOptions: ThemeOptions) => {
-    //     setFinalThemeOptions(newThemeOptions);
-    // }, []);
-
-    return (
-        <HostThemeContext.Provider
-            value={{
-                hostThemeOptions: finalThemeOptions,
-                fnComponentsOverrides,
-            }}
-        >
-            <StyledEngineProvider injectFirst>
-                <MUIThemeProvider theme={finalTheme}>
-                    <CssBaseline enableColorScheme />
-                    {children}
-                </MUIThemeProvider>
-            </StyledEngineProvider>
-        </HostThemeContext.Provider>
-    );
-}
-
-export { HostThemeProvider, HostThemeContext };

package/src/contexts/HostThemeContext/types.ts

@@ -1,16 +0,0 @@
-import type { ThemeOptions, Theme } from '@mui/material/styles';
-import type { ReactNode } from 'react';
-
-export type EventFunListener = (...args: any[]) => void;
-
-export interface HostThemeType {
-    hostThemeOptions: ThemeOptions;
-    fnComponentsOverrides: (theme: Theme) => any;
-}
-
-export interface HostThemeProviderProps extends HostThemeType {
-    isMicroFrontEnd: boolean;
-    children: ReactNode;
-}
-
-export type HostThemeContextType = HostThemeType;