@m4l/components 7.1.3 → 7.2.0

package/.gitignore

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

package/.gitlab-ci.yml

@@ -0,0 +1,7 @@
+include:
+  - project: 'made4labs/engineering/frontend/libraries/cicd-settings'
+    ref: main
+    file: /.libraries-deployments-template.yml
+
+variables:
+  GIT_SUBMODULE_STRATEGY: recursive

package/.storybook/constants.ts

@@ -0,0 +1,40 @@
+import { ThemeUserColor } from '@m4l/styles';
+
+export const MODES = {
+  light: 'light',
+  dark: 'dark',
+};
+
+export const MODES_BACKGROUNDS: Record<keyof Omit<typeof MODES, 'both'>, string> = {
+  light: '#ffffff',
+  dark: '#252c2c',
+};
+
+export const MODES_ITEMS = [
+  { value: MODES.light, title: '🌞 Light' },
+  { value: MODES.dark, title: '🌑 Dark' },
+];
+
+export const COLORS_THEME: Record<ThemeUserColor, ThemeUserColor> = {
+  patronus: 'patronus',
+  blaze: 'blaze',
+  brown: 'brown',
+  grass: 'grass',
+  turqui: 'turqui',
+};
+
+export const COLORS_THEME_ITEMS: Record<string, string>[] = [
+  { value: COLORS_THEME.patronus, title: '🔵 Patronus' },
+  { value: COLORS_THEME.blaze, title: '🟠 Blaze' },
+  { value: COLORS_THEME.brown, title: '🟤 Brown' },
+  { value: COLORS_THEME.grass, title: '🟢 Grass' },
+  { value: COLORS_THEME.turqui, title: '⚫ Turqui' },
+];
+
+export const USER = `carloszapata@gmail.com`;
+export const PWD = `Mayuscula123.`;
+export const DATABASE = '';
+export const ENVIRONMENT_ASSETS = 'd1';
+export const HOST_API_LOCAL = 'http://localhost:3000/domain';
+export const HOST_API_REMOTE = 'https://lab1.stage.made4labs.com/api/v1/domain';
+export const HOST_STATIC_ASSETS = 'https://s3.amazonaws.com/static.made4labs/environments';

package/.storybook/decorators/WithContexts/WithContexts.tsx

@@ -0,0 +1,61 @@
+import { StoryContext, StoryFn } from '@storybook/react';
+
+import { ThemeSettingsProvider } from '@m4l/graphics';
+import { CommonFlags } from '@m4l/core';
+
+import { getNoItemSelectedComponentsDictionary, MFIsolationApp } from '../../../src';
+import { AppWithTheme } from './subcomponents/AppWithTheme';
+
+import {
+  ENVIRONMENT_ASSETS,
+  HOST_API_LOCAL,
+  HOST_API_REMOTE,
+  HOST_STATIC_ASSETS,
+  PWD,
+  USER,
+  DATABASE,
+} from '../../constants';
+
+/**
+ * Decorator that adds the context of the theme to the story.
+ */
+export const WithContexts = (Story: StoryFn, { globals, parameters }: StoryContext) => {
+  const { themeMode, themeColor } = globals ?? {};
+  const { isolationForceSkeleton, isolationComponentsDictionary } = parameters ?? {};
+
+  return (
+    <MFIsolationApp
+      moduleId="users_list"
+      user={USER}
+      pwd={PWD}
+      database={DATABASE}
+      host_api_local={HOST_API_LOCAL}
+      host_api_remote={HOST_API_REMOTE}
+      host_static_assets={HOST_STATIC_ASSETS}
+      environment_assets={ENVIRONMENT_ASSETS}
+      skeletonFlags={[
+        isolationForceSkeleton ? 'forceSkeleton' : CommonFlags.FLAG_DICTIONARY_LOADED,
+      ]}
+      privileges={[]}
+      onLoad={() => {}}
+      componentsDictionary={
+        isolationComponentsDictionary || getNoItemSelectedComponentsDictionary()
+      }
+      observedDivRef={{} as Element | Text}
+      >
+      <ThemeSettingsProvider
+        themeSettingsForced={{
+          themeMode: themeMode,
+          themeDirection: 'rtl',
+          themeColor: themeColor,
+          themeStretch: false,
+          themeLayout: 'vertical',
+        }}
+      >
+        <AppWithTheme themeMode={themeMode} themeColor={themeColor}>
+          <Story />
+        </AppWithTheme>
+      </ThemeSettingsProvider>
+    </MFIsolationApp>
+  );
+};

package/.storybook/decorators/WithContexts/index.ts

@@ -0,0 +1 @@
+export * from './WithContexts';

package/.storybook/decorators/WithContexts/styles.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material/styles';
+
+export const RootStyle = styled('div')(({ theme }) => ({
+  padding: 25,
+  backgroundColor: theme.vars.palette.background.default,
+  borderColor: theme.vars.palette.primary.main,
+  borderStyle: 'solid',
+  borderWidth: 1,
+  width: '100%',
+  height: '100%',
+  fontSize: 'inherit',
+}));

package/.storybook/decorators/WithContexts/subcomponents/AppWithTheme.tsx

@@ -0,0 +1,40 @@
+import { HostThemeProvider, useThemeSettingsStore } from '@m4l/graphics';
+import { fnComponentsOverrides } from '@m4l/styles';
+
+
+import { AppThemeProps } from '../types';
+import { RootStyle } from '../styles';
+import { useEffect } from 'react';
+
+/**
+ * AppWithTheme es un componente que se encarga de proveer el contexto de tema a la aplicación.
+ */
+export const AppWithTheme = ({ themeMode, themeColor, children }: AppThemeProps) => {
+  const themeOptions = useThemeSettingsStore(state => state.themeOptions);
+  const currentThemeSettings = useThemeSettingsStore(state => state.themeUserSettings);
+  const setThemeSettings = useThemeSettingsStore(state => state.settingsActions.setThemeSettings);
+
+  const isMobile: boolean | undefined = undefined;
+
+  useEffect(() => {
+    setThemeSettings({
+      ...currentThemeSettings,
+      themeMode,
+      themeColor,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [themeMode, themeColor]);
+
+  return (
+    <RootStyle>
+      <HostThemeProvider
+        isMicroFrontEnd={false}
+        hostThemeOptions={themeOptions}
+        fnComponentsOverrides={fnComponentsOverrides}
+        isMobileForced={isMobile}
+      >
+        {children}
+      </HostThemeProvider>
+    </RootStyle>
+  );
+};

package/.storybook/decorators/WithContexts/types.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+import { ThemeSettingsType } from '@m4l/graphics';
+
+export type AppThemeProps = {
+  themeMode: ThemeSettingsType['themeMode'];
+  themeColor: ThemeSettingsType['themeColor'];
+  children: ReactNode;
+};

package/.storybook/decorators/WithForm/WithForm.tsx

@@ -0,0 +1,16 @@
+import type { StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { RHFormProvider } from '../../../src';
+
+/**
+ * Decorator that adds the form context to the story.
+ */
+export const WithForms = ({ values = {}, validationSchema = {} }) => {
+  return function WithFormStory(Story: StoryFn) {
+    return (
+      <RHFormProvider onSubmit={fn()} values={values} validationSchema={validationSchema}>
+        <Story />
+      </RHFormProvider>
+    );
+  };
+};

package/.storybook/decorators/WithForm/index.ts

@@ -0,0 +1 @@
+export * from './WithForm';

package/.storybook/decorators/WithFormAutoValidation/WithFormAutoValidation.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { StoryFn } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+
+/**
+ * Decorador para que el Story ejecute automaticamente las validaciones de react-hook-fom.
+ * Se debe usar con el decorador WithForm que es el que configura el formulario y su contexto.
+ * @param Story
+ */
+export const WithFormAutoValidation = (Story: StoryFn) => {
+  const { trigger } = useFormContext();
+
+  useEffect(() => {
+    trigger();
+  }, [trigger]);
+
+  return <Story />;
+};

package/.storybook/decorators/WithFormAutoValidation/index.ts

@@ -0,0 +1 @@
+export * from './WithFormAutoValidation';

package/.storybook/decorators/WithMapProvider/WithMapProvider.tsx

@@ -0,0 +1,40 @@
+//react
+//storybook
+import type { StoryContext, StoryFn } from '@storybook/react';
+// storybook decorators
+// internal components
+import { MapProvider } from '../../../src/components/maps/components/Map/contexts/MapContext';
+// subcomponents
+// types
+import { WindowsContainer } from '../WithWindowsContainer/subcomponents/WindowsContainer';
+import { MapGpsToolsProvider } from '../../../src/components/maps/components/MapGpsTools';
+
+//constants
+import { LAYER_MARKS_ABCD_my_gps_devices } from './constants';
+
+// Define un decorador que modifica los props
+/**
+ * Decorador que añade el contexto de Mapa a la historia.
+ */
+export const WithMapProvider = (MyStory: StoryFn, { parameters }:StoryContext) => {
+
+
+  const initialLayers = parameters?.map?.initialLayers || LAYER_MARKS_ABCD_my_gps_devices;
+
+  const storeId = parameters?.map?.storeId || 'WithMapProvider';
+  return (
+    <WindowsContainer>
+      <MapProvider
+        googleMapsApiKey="AIzaSyDfhTK9us4kuqPTeFIm89yB3uvk2_G5AMw"
+        googleMapVersion="weekly"
+        initialLayers={initialLayers}
+        storeId={storeId}
+
+      >
+        <MapGpsToolsProvider>
+          <MyStory />
+        </MapGpsToolsProvider>
+      </MapProvider>
+    </WindowsContainer>
+  );
+};

package/.storybook/decorators/WithMapProvider/constants.ts

@@ -0,0 +1,206 @@
+import { CommonFeatureRender, MapPopupMyGps } from '../../../src';
+import { LayerStore } from '../../../src/components/maps/components/Map/contexts/MapContext/types';
+import { ENVIRONMENT_ASSETS, HOST_STATIC_ASSETS } from '../../constants';
+
+export const LAYER_MARKS_ABCD_my_gps_devices:LayerStore[] =[
+  {
+    layerId: 'my_gps_devices',
+    name: 'My gps devices',
+    clusterAble: true,
+    popupComponent: MapPopupMyGps,
+    geoJsonObject: {
+      object: {
+        type: 'FeatureCollection',
+
+        features: [
+          {
+            type: 'Feature',
+            id: 10001,
+            geometry: {
+              type: 'Point',
+              coordinates: [-75.58660090089732, 6.216601050665157],
+            },
+            properties: {
+              subType: 'Marker',
+              iconRotate: 90,
+              iconOffsetRotate: -90,
+              scaleIcon: 1,
+              className: 'myMark',
+              label: 'LRQ864',
+              labelBkColor: '#FFFFFF',
+              labelColor: '#0000FF',
+              markerColor: 'green', //"#ffeb3b",
+              iconUrl: `${HOST_STATIC_ASSETS}/${ENVIRONMENT_ASSETS}/frontend/components/map/assets/icons/devices/moving.svg`,
+              deviceData: {
+                id: 10001,
+                name: 'LRQ864',
+                imageUrl:
+                      'https://gps.guardian.click/images/v2_renault_kangoo_32.a4b915e61537dc7d3cef75109ae9657b.png',
+                current: {
+                  group: {
+                    id: 1,
+                    name: 'Group 1',
+                  },
+                  vpts: {
+                    vpt_gnss: {
+                      address: { value: 'Calle 1 # 2-3' },
+                      speed: { value: 15 },
+                      status: { value: 0 },
+                      course: { value: 175 },
+                      lat: { value: 6.216601050665157 },
+                      lon: { value: -75.58660090089732 },
+                    },
+                    vpt_modem: {
+                      last_connection: new Date(),
+                    },
+                  },
+                },
+              },
+            },
+          },
+          {
+            type: 'Feature',
+            id: 10002,
+            geometry: {
+              type: 'Point',
+              coordinates: [-75.587206488, 6.217678981],
+            },
+            properties: {
+              subType: 'Marker',
+              iconRotate: 45,
+              iconOffsetRotate: -90,
+              scaleIcon: 0.7,
+              label: 'B-JYV389',
+              labelBkColor: '#37be59',
+              markerColor: '#ff008f',
+              iconUrl: `${HOST_STATIC_ASSETS}/${ENVIRONMENT_ASSETS}/frontend/components/map/assets/icons/devices/pickup.svg`,
+
+              deviceData: {
+                id: 10002,
+                name: 'B-JJYV389',
+                imageUrl: '/maps/assets/icons/pickup.svg',
+                current: {
+                  group: {
+                    id: 1001,
+                    name: 'Grupo 1',
+                  },
+                  vpts: {
+                    vpt_gnss: {
+                      address: { value: 'Calle 1 # 2-3' },
+                      speed: { value: 15 },
+                      status: { value: 0 },
+                      course: { value: 45 },
+                      lat: { value: 6.217678981 },
+                      lon: { value: -75.587206488 },
+                    },
+                    vpt_modem: {
+                      last_connection: new Date(
+                        '2024-07-26T14:57:00.000Z',
+                      ),
+                    },
+                  },
+                },
+              },
+            },
+          },
+          {
+            type: 'Feature',
+            id: 10003,
+            geometry: {
+              type: 'Point',
+              coordinates: [-75.585195762, 6.217130672],
+            },
+            properties: {
+              subType: 'Marker',
+              iconRotate: 45,
+              iconOffsetRotate: -90,
+              scaleIcon: 0.7,
+              label: 'JIV284',
+              labelBkColor: '#37be59',
+              labelColor: '#000000',
+              iconUrl: `${HOST_STATIC_ASSETS}/${ENVIRONMENT_ASSETS}/frontend/components/map/assets/icons/devices/lorry.svg`,
+              deviceData: {
+                id: 10003,
+                name: 'JIV284',
+                imageUrl: '/maps/assets/icons/pickup.svg',
+                current: {
+                  group: {
+                    id: 1,
+                    name: 'Grupo 1',
+                  },
+                  vpts: {
+                    vpt_gnss: {
+                      address: { value: 'Calle 1 # 2-3' },
+                      speed: { value: 15 },
+                      status: { value: 0 },
+                      course: { value: 45 },
+                      lat: { value: 6.217130672 },
+                      lon: { value: -75.585195762 },
+                    },
+                    vpt_modem: {
+                      last_connection: new Date(
+                        '2024-07-26T14:57:00.000Z',
+                      ),
+                    },
+                  },
+                },
+              },
+            },
+          },
+          {
+            type: 'Feature',
+            id: 10004,
+            geometry: {
+              type: 'Point',
+              coordinates: [-75.5865, 6.217],
+            },
+            properties: {
+              subType: 'Marker',
+              iconRotate: 270,
+              iconOffsetRotate: -90,
+              scaleIcon: 0.7,
+              label: 'MIJ000',
+              markerColor: '#ff008f',
+              // labelBkColor: '#37be59',
+              // labelColor: "#000000",
+              iconUrl: `${HOST_STATIC_ASSETS}/${ENVIRONMENT_ASSETS}/frontend/components/map/assets/icons/devices/dump.svg`,
+              deviceData: {
+                id: 10004,
+                name: 'MIJ000',
+                imageUrl: '/maps/assets/icons/pickup.svg',
+                current: {
+                  group: {
+                    id: 1,
+                    name: 'Grupo 1',
+                  },
+                  vpts: {
+                    vpt_gnss: {
+                      address: { value: 'Calle 1 # 2-3' },
+                      speed: { value: 15 },
+                      status: { value: 0 },
+                      course: { value: 45 },
+                      lat: { value:  6.217 },
+                      lon: { value: -75.5865 },
+                    },
+                    vpt_modem: {
+                      last_connection: new Date(
+                        '2024-07-26T14:57:00.000Z',
+                      ),
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+    cluster: false,
+    visible: true,
+    autoFocus: false,
+    deleteAble: true,
+    renderFeature: CommonFeatureRender,
+
+    // visible: true,
+  },
+];

package/.storybook/decorators/WithMapProvider/index.ts

@@ -0,0 +1 @@
+export * from './WithMapProvider';

package/.storybook/decorators/WithPopupsProvider/WithPopupsProvider.tsx

@@ -0,0 +1,27 @@
+import type { StoryFn, StoryContext } from '@storybook/react';
+
+import { PopupsProvider } from '../../../src/components/popups/components/PopupsProvider';
+
+import { useStateRef } from '../../../src/hooks/useStateRef';
+import { WindowsContainer } from '../WithWindowsContainer/subcomponents/WindowsContainer';
+/**
+ * Decora la historia con el proveedor de popups, puede recibir initialPopups como parametro de ella
+ */
+export const WithPopupsProvider = (MyStory: StoryFn, { parameters }: StoryContext) => {
+  const [refDiv, setRef] = useStateRef<HTMLDivElement | null>(null);
+  return (
+
+    <WindowsContainer ref={setRef}>
+      {refDiv && (
+      <PopupsProvider
+            containerElement={refDiv}
+            baseZindex={0}
+            storeId={'story 1.0'}
+            initialPopups={parameters?.initialPopups || []}
+          >
+        <MyStory />
+      </PopupsProvider>
+        )}
+    </WindowsContainer>
+  );
+};

package/.storybook/decorators/WithPopupsProvider/index.ts

@@ -0,0 +1 @@
+export * from './WithPopupsProvider';

package/.storybook/decorators/WithScaleIcons/WithScaleIcons.tsx

@@ -0,0 +1,16 @@
+import type { StoryFn } from '@storybook/react';
+
+/**
+ * Decorador para escalar íconos en las historias de Storybook.
+ * @param MyStory
+ * @param context
+ */
+export const WithScaleIcons = (Story: StoryFn) => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+      <div style={{ transform: 'scale(4)' }}>
+        <Story />
+      </div>
+    </div>
+  );
+};

package/.storybook/decorators/WithScaleIcons/index.ts

@@ -0,0 +1 @@
+export * from './WithScaleIcons';

package/.storybook/decorators/WithWindowsContainer/WithWindowsContainer.tsx

@@ -0,0 +1,15 @@
+import type { StoryFn } from '@storybook/react';
+
+import { WindowsContainer } from './subcomponents/WindowsContainer';
+
+/**
+ * Decora la historia con el proveedor de popups, puede recibir initialPopups como parametro de ella
+ */
+export const WithWindowsContainer = (MyStory: StoryFn) => {
+
+  return (
+    <WindowsContainer >
+      <MyStory />
+    </WindowsContainer>
+  );
+};

package/.storybook/decorators/WithWindowsContainer/index.ts

@@ -0,0 +1 @@
+export * from './WithWindowsContainer';

package/.storybook/decorators/WithWindowsContainer/subcomponents/WindowsContainer/WindowsContainer.tsx

@@ -0,0 +1,26 @@
+import  { forwardRef } from 'react';
+import { WindowsContainerProps } from './types';
+
+/**
+ * Contendor de ventanas
+ */
+export const WindowsContainer = forwardRef<HTMLDivElement, WindowsContainerProps>((props, ref) => {
+  const { children } = props;
+  return (
+    <div
+    ref={ref}
+    style={{
+      width: '100%',
+      height: '400px',
+      position: 'relative',
+      // padding: '5px', Dañana los mapas
+      resize: 'both',
+      overflow: 'auto',
+      border: '1px dotted gray',
+    }}
+      >
+      {children}
+    </div>
+  );
+
+});

package/.storybook/decorators/WithWindowsContainer/subcomponents/WindowsContainer/index.ts

@@ -0,0 +1 @@
+export * from './WindowsContainer';

package/.storybook/decorators/WithWindowsContainer/subcomponents/WindowsContainer/types.ts

@@ -0,0 +1,3 @@
+export type WindowsContainerProps = {
+    children: React.ReactNode;
+}

package/.storybook/decorators/WithWrapper/WithWrapper.tsx

@@ -0,0 +1,31 @@
+import type { StoryFn } from '@storybook/react';
+import type { WithWrapperParameters } from './types';
+
+/**
+ * Un decorador de Storybook que envuelve una historia dentro de un contenedor centrado con
+ * altura, ancho y otros parámetros de estilo personalizables.
+ * @param {StoryFn} Story - La función de la historia que renderiza el componente.
+ * @param {object} context - El objeto de contexto que contiene los parámetros de Storybook.
+ * @param {Parameters} context.parameters - Parámetros personalizados para el contenedor, incluyendo `height` y `width`.
+ * @returns {JSX.Element} - Un elemento `div` que envuelve y centra la historia.
+ * @example
+ * // Uso en una historia de Storybook:
+ * export default {
+ *   title: 'MiComponente',
+ *   decorators: [WithWrapper],
+ * };
+ *
+ * const Template = (args) => <MiComponente {...args} />;
+ *
+ * export const Default = Template.bind({});
+ * Default.parameters = { height: '200px', width: '200px' };
+ */
+export const WithWrapper = (Story: StoryFn, { parameters }: { parameters: WithWrapperParameters }) => {
+  const { height = '100px', width = '100px', ...others } = parameters;
+
+  return (
+    <div style={{ height, width, display: 'flex', justifyContent: 'center', alignItems: 'center', ...others }}>
+      <Story />
+    </div>
+  );
+};

package/.storybook/decorators/WithWrapper/index.ts

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

package/.storybook/decorators/WithWrapper/types.ts

@@ -0,0 +1,11 @@
+/**
+ * Interfaz que define los parámetros personalizados aceptados por el decorador `WithWrapper`.
+ * [height] - Altura opcional del contenedor. Por defecto es '100px'.
+ * [width] - Ancho opcional del contenedor. Por defecto es '100px'.
+ * [key: string] - Propiedades adicionales opcionales que se aplicarán al estilo del contenedor.
+ */
+export interface WithWrapperParameters {
+    height?: string;
+    width?: string;
+    [key: string]: any;
+  }

package/.storybook/decorators/index.tsx

@@ -0,0 +1,7 @@
+export * from './WithContexts';
+export * from './WithPopupsProvider';
+export * from './WithForm';
+export * from './WithFormAutoValidation';
+export * from './WithWindowsContainer';
+export * from './WithScaleIcons';
+export * from './WithWrapper';