@m4l/graphics 0.1.19 → 0.1.21

package/package.json

@@ -1,23 +1,8 @@
 {
   "name": "@m4l/graphics",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "license": "UNLICENSED",
   "author": "M4L Team",
-  "scripts": {
-    "typescript": "tsc",
-    "build:package": "node ../../scripts/buildpackage.js",
-    "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",
-    "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",
-    "test": "vitest",
-    "coverage": "vitest run --coverage"
-  },
   "dependencies": {
     "@m4l/core": "*",
     "@mui/x-date-pickers": "^5.0.0-beta.3",
@@ -30,47 +15,20 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "devDependencies": {
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
-    "@mui/material": "^5.10.4",
-    "@mui/system": "^5.10.4",
-    "@types/node": "^16.7.10",
-    "@types/nprogress": "^0.2.0",
-    "@types/react": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "5.27.1",
-    "@typescript-eslint/parser": "5.27.1",
-    "@vitejs/plugin-react": "1.3.2",
-    "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",
-    "prettier": "2.6.2",
-    "react": "^18.0.0",
-    "rollup": "2.79.0",
-    "typedoc": "^0.23.24",
-    "typescript": "4.6.3",
-    "vite": "3.1.0",
-    "vite-plugin-dts": "1.2.0"
-  },
   "files": [
     "*"
   ],
   "source": "src/index.ts",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "main": "./index.js",
+  "module": "./index.js",
   "type": "module",
-  "types": "./src/index.ts",
+  "types": "./index.d.ts",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
   "engines": {
     "node": ">=12.0.0"
-  }
-}
+  },
+  "private": false
+}

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/dist/package.json

@@ -1,34 +0,0 @@
-{
-  "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/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;