@m4l/components 7.2.0 → 7.2.2

package/src/components/LinearProgressIndeterminate/classes/index.tsx

@@ -1,34 +0,0 @@
-import { generateUtilityClasses } from '@mui/material';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-
-import { LinearProgressIndeterminateClasses } from './types';
-
-import { LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME } from './constants';
-import { getComponentUtilityClass } from '../../../utils';
-
-export const linearProgressIndeterminateClasses: LinearProgressIndeterminateClasses =
-  generateUtilityClasses(
-    LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME,
-    [
-      /* elements */
-      'root',
-      'windowLinearProgressBar',
-      /* states or variants of elements */
-    ],
-    LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME,
-  );
-
-/**
- * TODO: Documentar
- */
-export const getLinearProgressIndeterminateUtilityClasses = () => {
-  const slots = {
-    root: ['root'],
-    windowLinearProgressBar: ['windowLinearProgressBar'],
-  };
-  return composeClasses(
-    slots,
-    getComponentUtilityClass(LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME),
-    {},
-  );
-};

package/src/components/LinearProgressIndeterminate/classes/types.ts

@@ -1,12 +0,0 @@
-import { getLinearProgressIndeterminateUtilityClasses } from '.';
-
-export interface LinearProgressIndeterminateClasses {
-  /* elements */
-  root: string;
-  windowLinearProgressBar: string;
-  /* states or variants of elements */
-}
-
-export type LinearProgressIndeterminateClassesKey = keyof LinearProgressIndeterminateClasses;
-
-export type Classes = ReturnType<typeof getLinearProgressIndeterminateUtilityClasses>;

package/src/components/LinearProgressIndeterminate/index.ts

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

package/src/components/LinearProgressIndeterminate/styles.ts

@@ -1,5 +0,0 @@
-import { styled } from '@mui/material';
-
-export const LinearProgressIndeterminateRoot = styled('div')(({ theme }) => ({
-  ...theme.components?.M4LinearProgressIndeterminate?.styleOverrides || {},
-}));

package/src/components/LinearProgressIndeterminate/tests/constants.ts

@@ -1 +0,0 @@
-export const ICON_PREFIX = 'M4LinearProgressIndeterminate';

package/src/components/LinearProgressIndeterminate/tests/index.test.tsx

@@ -1,35 +0,0 @@
-import { describe, expect } from 'vitest';
-import { render, screen } from '../../../test/utils';
-/* import { getByText } from '@testing-library/dom'; */
-
-import { useModuleSkeleton } from '@m4l/core';
-
-import { linearProgressIndeterminateClasses } from '../classes';
-
-import { getNameLinearProgressIndeterminateDataTestId } from './utils';
-import { LinearProgressIndeterminate } from '..';
-
-// Create a mock fetch function
-
-vi.mock('@m4l/core');
-(useModuleSkeleton as jest.Mock).mockReturnValue({ isSkeleton: false });
-
-vi.mock('@mui/system', () => ({
-  alpha: vi.fn((color, value) => `${color}-${value}`),
-}));
-
-describe('LinearProgressIndeterminate pruebas unitarias', () => {
-  it('Debería tener la clase root', async () => {
-    render(<LinearProgressIndeterminate />);
-    const element = await screen.findByTestId(getNameLinearProgressIndeterminateDataTestId('root'));
-    expect(element).toHaveClass(linearProgressIndeterminateClasses.root);
-  });
-
-  it('Debería tener la clase windowLinearProgressBar', async () => {
-    render(<LinearProgressIndeterminate />);
-    const element = await screen.findByTestId(
-      getNameLinearProgressIndeterminateDataTestId('windowLinearProgressBar'),
-    );
-    expect(element).toHaveClass(linearProgressIndeterminateClasses.windowLinearProgressBar);
-  });
-});

package/src/components/LinearProgressIndeterminate/tests/utils.ts

@@ -1,11 +0,0 @@
-import type { LinearProgressIndeterminateClassesKey } from '../classes/types';
-import { ICON_PREFIX } from './constants';
-
-/**
- * TODO: Documentar
- */
-export const getNameLinearProgressIndeterminateDataTestId = (
-  KEY: LinearProgressIndeterminateClassesKey,
-) => {
-  return `${ICON_PREFIX}-${KEY}`;
-};

package/src/components/Loadable/index.tsx

@@ -1,20 +0,0 @@
-import { ElementType, Suspense } from 'react';
-import { PropagateLoader } from '../animate/PropagateLoader';
-
-/**
- * Función que envuelve un componente en un componente Suspense con un loader de propagación como fallback.
- * @param Component El componente a ser cargado dinámicamente.
- * @returns Un componente funcional que carga dinámicamente el componente proporcionado.
- */
-
-/**
- * TODO: Documentar
- */
-export const Loadable = (Component: ElementType) =>
-  function EmbededLoadable(props: any) {
-    return (
-      <Suspense fallback={<PropagateLoader />}>
-        <Component {...props} />
-      </Suspense>
-    );
-  };

package/src/components/LoadingError/LoadingError.tsx

@@ -1,85 +0,0 @@
-import { AreasLoadingErrorProps } from './types';
-import { LinearProgressIndeterminate } from '../LinearProgressIndeterminate';
-import { Icon } from '../Icon';
-import { useEnvironment, useModuleDictionary } from '@m4l/core';
-import { ICONS } from '../areas/icons';
-import { Button } from '../mui_extended/Button';
-import { Typography } from '../mui_extended/Typography';
-import { loadingErrorUtilityClasses } from './classes';
-import { Classes } from './classes/types';
-import { LoadingErrorRoot } from './styles';
-
-//Este componente de React que se utiliza para mostrar un mensaje de error de carga en una aplicación web.
-
-/**
- *
- * @param {AreasLoadingErrorProps} props El componente LoadingError espera recibir ciertas propiedades que están definidas en el tipo AreasLoadingErrorProps.
- * @param {status} props.status Indica el estado actual del componente. Puede tener valores como 'error', 'cargando' u otros estados definidos por la aplicación.
- * @param {Function} props.action - Es una función que se ejecutará cuando se presione el botón de error. Esta función puede contener lógica para manejar el error o realizar alguna acción específica cuando ocurra un error.
- * @param {string} props.title -  Es una cadena de texto que representa el título del mensaje de error. Este título se mostrará en el componente cuando ocurra un error.
- * @param {string} props.description - Es una cadena de texto que proporciona una descripción detallada del error. Esta descripción se mostrará junto al título en el componente de mensaje de error.
- * @param {string} props.recommendation -  Es una cadena de texto que proporciona una recomendación sobre cómo manejar el error o qué acciones tomar para resolverlo.
- * @param {string} props.introMessage -  Es una cadena de texto que proporciona un mensaje introductorio adicional. Este mensaje se mostrará en el componente antes de mostrar el título, la descripción y la recomendación del error.
- * @param {string} props.errorIcon - Es una cadena de texto que representa la ruta o el identificador del ícono que se mostrará junto al mensaje de error.
- * @returns {JSX.Element} Elemento JSX que representa el componente.
- */
-
-/**
- * TODO: Documentar
- */
-export const LoadingError = (props: AreasLoadingErrorProps) => {
-  const { status, action, title, description, recommendation, introMessage, errorIcon } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-
-  //Creacion de classes
-  const classes: Classes = loadingErrorUtilityClasses();
-
-  // console.log('test status view', status);
-
-  return (
-    <LoadingErrorRoot className={classes.root}>
-      {status !== 'error' ? (
-        <div className={classes.loadingErrorLoading}>
-          <LinearProgressIndeterminate />
-        </div>
-      ) : (
-        <div className={classes.loadingError}>
-          <Icon
-            className={classes.loadingErrorIcon}
-            src={
-              errorIcon
-                ? errorIcon
-                : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NAVIGATE_ERROR}`
-            }
-          />
-
-          <div className={classes.titleDescription}>
-            <Typography variant="h3" skeletonWidth={'100px'} className={classes.loadingErrorTitle}>
-              {title ? title : getLabel('loading_error.label_error_title')}
-            </Typography>
-            <Typography
-              variant="subtitle"
-              skeletonWidth={'100px'}
-              className={classes.loadingErrorDescription}
-            >
-              {description ? description : getLabel('loading_error.label_error_description')}
-            </Typography>
-          </div>
-
-          <div className={classes.loadingErrorDivider} />
-          <Typography
-            variant="paragraph"
-            skeletonWidth={'100px'}
-            className={classes.loadingErrorTextAction}
-          >
-            {recommendation ? recommendation : getLabel('loading_error.label_error_recommendation')}
-          </Typography>
-          <Button onClick={action}>
-            {introMessage ? introMessage : getLabel('loading_error.label_error_intro')}
-          </Button>
-        </div>
-      )}
-    </LoadingErrorRoot>
-  );
-};

package/src/components/LoadingError/classes/constants.ts

@@ -1 +0,0 @@
-export const componentName = 'M4LoadingError';

package/src/components/LoadingError/classes/index.tsx

@@ -1,56 +0,0 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-
-/* import { OwnerState } from '../../contexts/BaseContext/types'; */
-import { componentName } from './constants';
-import { LoadingErrorClassesType } from './types';
-
-/**
- * Clases de utilidad para el componente de carga de error.
- */
-
-/* ****Classes: Inventario completo de clases del componente. */
-export const loadingErrorClasses: LoadingErrorClassesType = generateUtilityClasses(componentName, [
-  /* elements */
-  'root',
-  'loadingErrorLoading',
-  'loadingError',
-  'loadingErrorIcon',
-  'loadingErrorTitle',
-  'loadingErrorDescription',
-  'loadingErrorDivider',
-  'loadingErrorTextAction',
-  'titleDescription',
-  /* states or variants of elements */
-]);
-
-/**
- * Obtiene la clase de utilidad para un slot específico del componente de carga de error.
- * @param slot El slot para el que se desea obtener la clase de utilidad.
- * @returns La clase de utilidad correspondiente al slot especificado.
- */
-export function getLoadingErrorUtilityClass(slot: string): string {
-  return generateUtilityClass(componentName, slot);
-}
-/**
- * Función para generar todas las clases de utilidad del componente de carga de error.
- * @returns Un objeto que contiene todas las clases de utilidad generadas.
- */
-export const loadingErrorUtilityClasses = () => {
-  const slots = {
-    root: ['root'],
-    loadingErrorLoading: ['loadingErrorLoading'],
-    loadingError: ['loadingError'],
-    loadingErrorIcon: ['loadingErrorIcon'],
-    loadingErrorTitle: ['loadingErrorTitle'],
-    loadingErrorDescription: ['loadingErrorDescription'],
-    loadingErrorDivider: ['loadingErrorDivider'],
-    loadingErrorTextAction: ['loadingErrorTextAction'],
-    titleDescription: ['titleDescription'],
-  };
-
-  const composedClasses = composeClasses(slots, getLoadingErrorUtilityClass, {});
-  return {
-    ...composedClasses,
-  };
-};

package/src/components/LoadingError/classes/types.ts

@@ -1,20 +0,0 @@
-import { loadingErrorUtilityClasses } from '.';
-
-export interface LoadingErrorClassesType {
-  /* elements */
-  root: string;
-  loadingErrorLoading: string;
-  loadingError: string;
-  loadingErrorIcon: string;
-  loadingErrorTitle: string;
-  loadingErrorDescription: string;
-  loadingErrorDivider: string;
-  loadingErrorTextAction: string;
-  titleDescription: string;
-  /* states or variants of elements */
-}
-
-/* MFLoaderClassesKey: Tipo de dato usado para construir los components overrides en el objeto del tema. */
-export type MFLoaderClassesKey = keyof LoadingErrorClassesType;
-
-export type Classes = ReturnType<typeof loadingErrorUtilityClasses>;

package/src/components/LoadingError/dictionary.ts

@@ -1,3 +0,0 @@
-export const getLoadingErrorComponentsDictionary = () => {
-  return ['loading_error'];
-};

package/src/components/LoadingError/index.ts

@@ -1,2 +0,0 @@
-export { LoadingError } from './LoadingError';
-export { getLoadingErrorComponentsDictionary } from './dictionary';

package/src/components/LoadingError/styles.ts

@@ -1,5 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const LoadingErrorRoot = styled('div')(({ theme }) => ({
-  ...theme?.components?.M4LoadingError?.styleOverrides || {},
-}));

package/src/components/LoadingError/types.ts

@@ -1,18 +0,0 @@
-import { AreaStatus, AreasStatus } from '../areas/contexts/AreasContext/types';
-
-export interface AreasLoadingErrorProps {
-  /**Indica el estado actual del componente. Puede tener valores como 'error', 'cargando' u otros estados definidos por la aplicación. */
-  status: AreasStatus | AreaStatus;
-  /** Es una función que se ejecutará cuando se presione el botón de error.*/
-  action: () => void;
-  /**Es una cadena de texto que representa el título del mensaje de error. Este título se mostrará en el componente cuando ocurra un error. */
-  title?: string;
-  /**Es una cadena de texto que proporciona una descripción detallada del error. */
-  description?: string;
-  /** Es una cadena de texto que proporciona una recomendación sobre cómo manejar el error o qué acciones tomar para resolverlo.  */
-  recommendation?: string;
-  /** Es una cadena de texto que proporciona un mensaje introductorio adicional. */
-  introMessage?: string;
-  /**Es una cadena de texto que representa la ruta o el identificador del ícono que se mostrará junto al mensaje de error. */
-  errorIcon?: string;
-}

package/src/components/MFIsolationApp/MFIsolationApp.tsx

@@ -1,167 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
-import { createBrowserHistory } from 'history';
-import EventEmitter from 'eventemitter3';
-import NProgress from 'nprogress';
-
-import { getLocaleFromNetwork, LocalesProvider, ResponsiveContainerProvider } from '@m4l/graphics';
-import {
-  AuthProvider,
-  axiosOperation,
-  EnvironmentProvider,
-  EnvironmentType,
-  EventListenerBase,
-  HostToolsProvider,
-  HostToolsType,
-  Maybe,
-  NetworkProvider,
-} from '@m4l/core';
-
-import { MFAuthApp } from './subcomponents/MFAuthApp';
-
-import type { MFIsolationAppProps } from './types';
-import { AreasProvider } from '../areas';
-import { BaseModule } from '../BaseModule';
-import { createToaster, ToastContainer } from '../ToastContainer';
-import { TOAST_CONTAINER_ID } from './constants';
-import { AppearanceComponentProvider } from '../../contexts/AppearanceComponentContext/AppearanceComponentContext';
-
-const history = createBrowserHistory({ window });
-
-/**
- * TODO: Documentar
- */
-export function MFIsolationApp(props: MFIsolationAppProps) {
-  const {
-    children,
-    user,
-    pwd,
-    database = 'domain', // 'domain
-    host_api_local,
-    host_api_icons = 'https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/gclick/my_device_status/assets/icons', //'https://dev1.gclick.co/api/v1/main/na/icons',
-    host_api_remote,
-    host_static_assets,
-    environment_assets,
-    moduleId,
-    skeletonFlags,
-    moduleNameField,
-    privileges,
-    componentsDictionary,
-    onLoad,
-    activeAreasNetwork = false,
-    activeCookiesFromNetwork = false,
-    observedDivRef,
-  } = props;
-
-  const eventEmitter = useMemo(() => new EventEmitter(), []);
-
-  const events_add_listener = useCallback(
-    (eventName: string, handler: EventListenerBase) => {
-      eventEmitter.on(eventName, handler);
-    },
-    [eventEmitter],
-  );
-
-  const events_remove_listener = useCallback(
-    (eventName: string, handler: Maybe<EventListenerBase>) => {
-      if (handler === null) {
-        eventEmitter.removeListener(eventName);
-        return;
-      }
-      eventEmitter.removeListener(eventName, handler);
-    },
-    [eventEmitter],
-  );
-  const events_emit = useCallback(
-    (eventName: string, arg: any) => {
-      eventEmitter.emit(eventName, arg);
-    },
-    [eventEmitter],
-  );
-
-  /**
-   * TODO: Documentar
-   */
-  const startProgress = () => {
-    NProgress.configure({
-      showSpinner: true,
-    });
-
-    NProgress.start();
-  };
-
-  const stopProgress = () => {
-    NProgress.done();
-  };
-
-  const environment: EnvironmentType = useMemo(
-    () => ({
-      host: '',
-      isLocalhost: true,
-      domain_token: 'lab1',
-      database,
-      host_api_local,
-      host_api_icons,
-      host_api_remote,
-      host_static_assets,
-      environment_assets,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
-  const toaster = createToaster(TOAST_CONTAINER_ID);
-
-  const hostTools: HostToolsType = useMemo(
-    () => ({
-      history,
-      toast: toaster,
-      startProgress,
-      stopProgress,
-      events_add_listener,
-      events_remove_listener,
-      events_emit,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
-  return (
-    <EnvironmentProvider {...environment}>
-      <HostToolsProvider {...hostTools}>
-        <NetworkProvider axiosOperation={axiosOperation}>
-          <HistoryRouter history={history}>
-            <LocalesProvider isMicroFrontEnd={false} getLocaleFromNetwork={getLocaleFromNetwork}>
-              <AuthProvider>
-                <MFAuthApp user={user} pwd={pwd}>
-                  <ToastContainer containerId={TOAST_CONTAINER_ID} />
-                  <BaseModule
-                    moduleId={moduleId}
-                    privileges={privileges}
-                    skeletonFlags={skeletonFlags}
-                    componentsDictionary={componentsDictionary}
-                    moduleNameField={moduleNameField}
-                  >
-                    <AreasProvider
-                      onLoad={onLoad}
-                      loadAreasFromNetwork={activeAreasNetwork}
-                      loadCookiesFromNetwork={activeCookiesFromNetwork}
-                      onSelectLayout={modId => {
-                        // eslint-disable-next-line no-console
-                        console.log('onSelectLayout', modId);
-                      }}
-                    >
-                      <ResponsiveContainerProvider observedDivRef={observedDivRef}>
-                        <AppearanceComponentProvider>{children}</AppearanceComponentProvider>
-                      </ResponsiveContainerProvider>
-                    </AreasProvider>
-                  </BaseModule>
-                </MFAuthApp>
-              </AuthProvider>
-            </LocalesProvider>
-          </HistoryRouter>
-        </NetworkProvider>
-      </HostToolsProvider>
-    </EnvironmentProvider>
-  );
-}

package/src/components/MFIsolationApp/constants.ts

@@ -1 +0,0 @@
-export const TOAST_CONTAINER_ID = 'toast-host';

package/src/components/MFIsolationApp/index.ts

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

package/src/components/MFIsolationApp/subcomponents/MFAuthApp/MFAuthApp.tsx

@@ -1,68 +0,0 @@
-import { useEffect } from 'react';
-import { format } from 'date-fns';
-
-import { DomainCountry, DomainCountryProvider, useAuth } from '@m4l/core';
-import { FormatterProvider, HostThemeProvider } from '@m4l/graphics';
-import {  fnComponentsOverrides, getUserThemeOptions } from '@m4l/styles';
-
-import type { MFAuthAppProps } from './types';
-
-/**
- * TODO: Documentar
- */
-export function MFAuthApp(props: MFAuthAppProps) {
-  const { children, user, pwd } = props;
-  const { isAuthenticated, isInitialized, login, user: authUser } = useAuth();
-
-  useEffect(() => {
-    // Atenticarse si no lo logro en el paso anterior dado por el efecto de AuthProvider
-    if (isInitialized && isAuthenticated === false) {
-      login(user, pwd, false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isInitialized, isAuthenticated]);
-
-  if (!isAuthenticated) {return <div>Pendiente por autenticarse</div>;}
-
-  const domianCountry: DomainCountry = {
-    id: 1,
-    currency: 'USD',
-    currency_decimal_digits: 2,
-    decimal_symbol: '.',
-    thousands_symbol: ',',
-  };
-
-  if (authUser?.domainCountry) {
-    domianCountry.id = authUser?.domainCountry.id ?? domianCountry.id;
-    domianCountry.currency = authUser?.domainCountry.currency ?? domianCountry.currency;
-    domianCountry.currency_decimal_digits =
-      authUser?.domainCountry.currency_decimal_digits ?? domianCountry.currency_decimal_digits;
-    domianCountry.decimal_symbol =
-      authUser?.domainCountry.decimal_symbol ?? domianCountry.decimal_symbol;
-    domianCountry.thousands_symbol =
-      authUser?.domainCountry?.thousands_symbol ?? domianCountry.thousands_symbol;
-  }
-
-  return (
-    <HostThemeProvider
-      hostThemeOptions={getUserThemeOptions('light','patronus' )}
-      fnComponentsOverrides={fnComponentsOverrides}
-      isMicroFrontEnd={true}
-      >
-      <DomainCountryProvider {...domianCountry} isMicroFrontEnd={false}>
-        <FormatterProvider
-          isMicroFrontEnd={false}
-          dateFormatter={{
-            formatDate: format,
-          }}
-          currencyFormatter={{
-            code: domianCountry.currency,
-            decimalDigits: domianCountry.currency_decimal_digits,
-          }}
-        >
-          {children}
-        </FormatterProvider>
-      </DomainCountryProvider>
-    </HostThemeProvider>
-  );
-}

package/src/components/MFIsolationApp/subcomponents/MFAuthApp/index.ts

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

package/src/components/MFIsolationApp/subcomponents/MFAuthApp/types.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-
-export type MFAuthAppProps = {
-  user: string;
-  pwd: string;
-  children: ReactNode;
-};

package/src/components/MFIsolationApp/types.ts

@@ -1,16 +0,0 @@
-import { BaseModuleProps } from '../BaseModule';
-
-export type MFIsolationAppProps = BaseModuleProps & {
-  user: string;
-  pwd: string;
-  host_api_local: string;
-  host_api_icons?: string;
-  database?: string;
-  host_api_remote: string;
-  host_static_assets: string;
-  environment_assets: string;
-  onLoad: () => void;
-  activeAreasNetwork?: boolean;
-  activeCookiesFromNetwork?: boolean;
-  observedDivRef: Element | Text | null;
-};