@m4l/components 7.1.2 → 7.2.0

package/.storybook/docs/Palette.mdx

@@ -0,0 +1,86 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+import { WithContexts } from '../decorators/WithContexts';
+
+
+import { colorsLight, colorsDark, keysColors, generalColors } from '../utils/getStylesColorsByMode';
+
+<Meta title="Palette" decorators={[WithContexts]} />
+
+# Palette
+
+
+<ColorPalette>
+  ## Light / Dark
+
+  {keysColors.map(colorKey => {
+    return (
+      <div key={colorKey} style={{
+        borderTopColor: colorsLight.background.main,
+        borderTopWidth: 2,
+        borderTopStyle: 'solid',
+        padding: 12,
+        marginBottom: 12
+      }}>
+        <h3>{colorKey}</h3>
+        <ColorItem
+          title={`theme.vars.palette.${colorKey}`}
+          subtitle="Light"
+          colors={typeof colorsLight[colorKey] === 'string' ? { [colorKey]: colorsLight[colorKey] } : colorsLight[colorKey]}
+        />
+        <ColorItem
+          title={`theme.vars.palette.${colorKey}`}
+          subtitle="Dark"
+          colors={typeof colorsDark[colorKey] === 'string' ? { [colorKey]: colorsDark[colorKey] } : colorsDark[colorKey]}
+        />
+      </div>
+    )
+  })}
+
+  ## General Colors
+
+  <h3>grey</h3>
+  <ColorItem
+    title="theme.vars.palette.grey"
+    subtitle="Base Greys"
+    colors={{
+      0: colorsLight.grey['0'],
+      50: colorsLight.grey['50'],
+      100: colorsLight.grey['100'],
+      200: colorsLight.grey['200'],
+      300: colorsLight.grey['300'],
+      400: colorsLight.grey['400'],
+      500: colorsLight.grey['500'],
+      600: colorsLight.grey['600'],
+      700: colorsLight.grey['700'],
+      800: colorsLight.grey['800'],
+      900: colorsLight.grey['900'],
+    }}
+  />
+  <ColorItem
+    title="theme.vars.palette.grey"
+    subtitle="Opacity Greys"
+    colors={{
+      5008: colorsLight.grey['5008'],
+      50012: colorsLight.grey['50012'],
+      50016: colorsLight.grey['50016'],
+      50024: colorsLight.grey['50024'],
+      50032: colorsLight.grey['50032'],
+      50048: colorsLight.grey['50048'],
+      50056: colorsLight.grey['50056'],
+      50080: colorsLight.grey['50080'],
+    }}
+  />
+
+  {generalColors.map(colorKey => {
+    return (
+      <div key={colorKey}>
+        <h3>{colorKey}</h3>
+        <ColorItem
+          title={`theme.vars.palette.${colorKey}`}
+          subtitle="General (Light/Dark)"
+          colors={typeof colorsLight[colorKey] === 'string' ? { [colorKey]: colorsLight[colorKey] } : colorsLight[colorKey]}
+        />
+      </div>
+    );
+  })}
+</ColorPalette>

package/.storybook/main.ts

@@ -0,0 +1,72 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname, resolve } from 'path';
+import { existsSync } from 'fs';
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)', '../storybook/**/*.stories.@(ts|tsx)', './docs/**/*.mdx'],
+
+  // stories: ['../src/components/StorybookTest/*.stories.@(ts|tsx)', './docs/**/*.mdx'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-designs'),
+    getAbsolutePath('storybook-addon-pseudo-states'),
+  ],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: '.storybook/storybook.vite.ts',
+      },
+    },
+  },
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  /**
+   * This function is called at the end of the Storybook configuration process.
+   */
+  async viteFinal(currentConfig, { configType }) {
+    // Merge custom configuration into the default config
+    const { mergeConfig } = await import('vite');
+    const isMonorepo = existsSync(resolve(__dirname, '../../../package.json'));
+    // console.log('********config2', resolve(__dirname, '../../../'), isMonorepo);
+
+    if (!currentConfig.resolve) {
+      currentConfig.resolve = {};
+    }
+
+    const alias = {
+      ...(isMonorepo && configType === 'DEVELOPMENT'
+        ? {
+            '@m4l/components': resolve(__dirname, '../../m4l_components/src'),
+            '@m4l/styles': resolve(__dirname, '../../m4l_styles/src'),
+            '@m4l/graphics': resolve(__dirname, '../../m4l_graphics/src'),
+            '@m4l/core': resolve(__dirname, '../../m4l_core/src'),
+          }
+        : {}),
+    };
+
+    const configWithMerge = {
+      resolve: {
+        alias,
+      },
+    };
+
+    return mergeConfig(currentConfig, configWithMerge);
+  },
+};
+
+export default config;

package/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

package/.storybook/preview.tsx

@@ -0,0 +1,52 @@
+import type { Preview } from '@storybook/react';
+import {
+  MODES_BACKGROUNDS,
+  COLORS_THEME,
+  COLORS_THEME_ITEMS,
+  MODES_ITEMS,
+  MODES,
+} from './constants';
+
+const preview: Preview = {
+  globalTypes: {
+    themeMode: {
+      name: 'Mode',
+      description: 'Select the mode for the theme',
+      defaultValue: MODES.light,
+      toolbar: {
+        items: MODES_ITEMS,
+        dynamicTitle: true,
+      },
+    },
+    themeColor: {
+      name: 'Color presets',
+      description: 'Select the palette for the theme',
+      defaultValue: COLORS_THEME.patronus,
+      toolbar: {
+        items: COLORS_THEME_ITEMS,
+        dynamicTitle: true,
+      },
+    },
+    isolationForceSkeleton: {
+      description: 'Change parameter in the Story to set the isSkeleton to true',
+      defaultValue: false,
+    },
+    isolationComponentsDictionary: {
+      description: 'Set the components dictionary of type string[]',
+      defaultValue: null,
+    },
+  },
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: MODES_BACKGROUNDS.light },
+        { name: 'dark', value: MODES_BACKGROUNDS.dark },
+      ],
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default preview;

package/.storybook/storybook.vite.ts

@@ -0,0 +1,5 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+export default defineConfig({
+  plugins: [react()],
+});

package/.storybook/utils/getGlobalsFromSearchParams.ts

@@ -0,0 +1,15 @@
+import { COLORS_THEME, MODES } from '../constants';
+
+/**
+ * Función que obtiene los parametros de la URL
+ */
+export function getGlobalsUrlParams() {
+  const urlSearch = new URL(window.location.href).search;
+  const searchParams = new URLSearchParams(urlSearch);
+  const globalsFlat = searchParams.get('globals')?.split(';');
+  const globals = Object.fromEntries(globalsFlat?.map(param => param?.split(':')) || []);
+  return {
+    mode: globals?.themeMode || MODES.light,
+    preset: globals?.themeColor || COLORS_THEME.patronus,
+  };
+}

package/.storybook/utils/getStylesColorsByMode.ts

@@ -0,0 +1,30 @@
+import { ThemeMode } from '@m4l/graphics';
+import { getPaletteByPreset, ThemeColorPresets } from '@m4l/styles';
+
+import { getGlobalsUrlParams } from './getGlobalsFromSearchParams';
+
+function getStylesColorsByMode(mode: ThemeMode, preset: ThemeColorPresets) {
+  return getPaletteByPreset(preset)[mode];
+}
+
+const globalTypes = getGlobalsUrlParams();
+
+export const colorsLight = getStylesColorsByMode('light', globalTypes.preset);
+export const colorsDark = getStylesColorsByMode('dark', globalTypes.preset);
+
+const keysToOmit = [
+  'mode',
+  'secondary',
+  'action',
+  'getContrastText',
+  'contrastThreshold',
+  'augmentColor',
+  'tonalOffset',
+  'grey',
+];
+
+export const generalColors = ['common', 'skeleton', 'info', 'success', 'error', 'warning'];
+
+export const keysColors: string[] = Object.keys(colorsLight).filter(
+  key => ![...keysToOmit, ...generalColors].includes(key),
+);

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint"]
+}

package/.vscode/settings.json

@@ -0,0 +1,21 @@
+{
+  "explorer.confirmDelete": false,
+  "code-runner.clearPreviousOutput": true,
+  "explorer.confirmDragAndDrop": true,
+  "liveServer.settings.donotShowInfoMsg": true,
+  "eslint.run": "onType",
+  "eslint.probe": ["javascriptreact", "typescript", "typescriptreact", "html", "markdown"],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact","json"],
+  "eslint.format.enable": true,
+  "editor.tabSize": 2, // Configuración general de tabSize
+  "editor.formatOnSave": true, // Configuración general de formatOnSave
+  "editor.detectIndentation": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint":"always"  },
+  "javascript.updateImportsOnFileMove.enabled": "always",
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint" // Configuración general de defaultFormatter
+
+  
+
+}

package/.yarnrc.yml

@@ -0,0 +1,39 @@
+logFilters:
+  - level: discard
+    pattern: "*eslint-plugin-import*"
+  - level: discard
+    pattern: "*eslint-plugin-react*"
+  - level: discard
+    pattern: "*eeslint-plugin-react-hooks*"
+  - level: discard
+    pattern: "*eslint-plugin-storybook*"
+  - level: discard
+    pattern: "*testing-library/react-hooks*"
+  - level: discard
+    pattern: "*Some peer dependencies are incorrectly met by dependencies*"
+  - level: discard
+    pattern: "*@m4l/components@workspace:. doesn't provide @mui/system*"
+  - level: discard
+    pattern: react is listed by your project with version 18.3.1 ** which doesn't satisfy what react-splitter-layout*
+
+nodeLinker: node-modules
+
+packageExtensions:
+  "@types/react-dom@*":
+    dependencies:
+      "@types/react-dom": ^18.0.0
+  "@types/react@*":
+    dependencies:
+      "@types/react": ^18.0.0
+  "@vitejs/plugin-react@*":
+    dependencies:
+      "@vitejs/plugin-react": ^4.0.0
+  glob@*:
+    dependencies:
+      glob: ^10.4.5
+  react-dom@*:
+    dependencies:
+      react-dom: ^18.0.0
+  react@*:
+    dependencies:
+      react: ^18.0.0

package/dist/components/DataGrid/assets/icons/datagrid.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13H6C3.245 13 1 10.755 1 8C1 5.245 3.245 3 6 3H10C12.755 3 15 5.245 15 8C15 10.755 12.755 13 10 13ZM6 4C3.795 4 2 5.795 2 8C2 10.205 3.795 12 6 12H10C12.205 12 14 10.205 14 8C14 5.795 12.205 4 10 4H6Z" fill="#2F3737"/>
+<path d="M10 11C8.345 11 7 9.655 7 8C7 6.345 8.345 5 10 5C11.655 5 13 6.345 13 8C13 9.655 11.655 11 10 11ZM10 6C8.895 6 8 6.895 8 8C8 9.105 8.895 10 10 10C11.105 10 12 9.105 12 8C12 6.895 11.105 6 10 6Z" fill="#2F3737"/>
+</svg>

package/dist/components/extended/react-resizable/Resizable/index.d.ts

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

package/dist/components/extended/react-resizable/ResizableBox/index.d.ts

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

package/dist/components/mui_extended/Skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import { SkeletonProps } from './types';
+/**
+ * El componente Skeleton es una extensión del componente Skeleton de Material UI,
+ * al cual se le ha agregado una capa de estilos con overrides definidos por el sistema de diseño.
+ * Este componente proporciona una experiencia de carga visual mientras los datos están siendo recuperados,
+ * y es altamente personalizable gracias a las propiedades y variantes específicas que se le han añadido.
+ */
+export declare const Skeleton: (props: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/mui_extended/Skeleton/Slots/skeletonEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum SkeletonSlots {
+    root = "root"
+}

package/dist/components/mui_extended/Skeleton/Slots/skeletonSlots.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledMUISkeleton: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SkeletonOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLSpanElement> | null | undefined;
+}, "children" | "height" | "width" | "animation" | "sx" | "classes" | "className" | "style" | "variant">, "children" | "ref" | "title" | "id" | "color" | "content" | "height" | "translate" | "width" | "animation" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "variant"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').SkeletonOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').SkeletonOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/dist/components/mui_extended/Skeleton/constants.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Nombre de clase para los slots del componente Skeleton.
+ */
+export declare const SKELETON_KEY_COMPONENT = "M4LSkeleton";
+/**
+ * Nombre de clase creado para aportar especificidad a los estilos del componente. Es usado para sobreescribir los estilos de MUI sin
+ * tener la necesidad de agregar valores en !important.
+ */
+export declare const SKELETON_CLASS_NAME_SPECIFY = "M4lclassCssSpecificity";

package/dist/components/mui_extended/Skeleton/index.d.ts

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

package/dist/components/mui_extended/Skeleton/skeleton.styles.d.ts

@@ -0,0 +1,2 @@
+import { SkeletonStyles } from './types';
+export declare const iconButtonStyles: SkeletonStyles;

package/dist/components/mui_extended/Skeleton/types.d.ts

@@ -0,0 +1,21 @@
+import { ComponentPalletColor } from '@m4l/styles';
+import { SkeletonProps as MUISkeletonProps, Theme } from '@mui/material';
+import { SkeletonSlots } from './Slots/skeletonEnum';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { SKELETON_KEY_COMPONENT } from './constants';
+/**
+ * ¨Define la propiedades del componente, se une a las capacidades originales de MUI Skeleton.
+ */
+export interface SkeletonProps extends MUISkeletonProps {
+    /**
+     * Nombre de identificador único para crear en el atributo data-testid.
+     */
+    dataTestid?: string;
+    /**
+     * Opción de color usada para pintar el componente.
+     */
+    color?: Extract<ComponentPalletColor, 'default'>;
+}
+export type SkeletonOwnerState = Pick<SkeletonProps, 'color' | 'variant'>;
+export type SkeletonSlotsType = keyof typeof SkeletonSlots;
+export type SkeletonStyles = Partial<OverridesStyleRules<SkeletonSlotsType, typeof SKELETON_KEY_COMPONENT, Theme> | undefined> | undefined;

package/dist/components/mui_extended/index.d.ts

@@ -0,0 +1,31 @@
+export { Accordion } from './Accordion';
+export * from './MenuActions';
+export * from './Tooltip';
+export * from './IconButton';
+export { Avatar } from './Avatar/Avatar';
+export { type AvatarProps } from './Avatar/types';
+export { BoxIcon } from './BoxIcon';
+export { Breadcrumbs } from './Breadcrumbs';
+export type { TLink } from './Breadcrumbs/types';
+export * from './Button/Button';
+export * from './CheckBox';
+export { CircularProgress } from './CircularProgress';
+export { Badge } from './Badge';
+export * from './ImageButton/ImageButton';
+export { LinearProgress } from './LinearProgress';
+export { LinkWithRoute } from './LinkWithRoute';
+export { LoadingButton } from './LoadingButton';
+export type { MenuAction, ComponentActionProps } from './MenuActions/types';
+export * from './Popover';
+export * from './Skeleton';
+export * from './Stack';
+export * from './Tabs';
+export * from './TabContent';
+export { Pager } from './Pager';
+export type { PagerProps } from './Pager/types';
+export { getPagerComponentsDictionary } from './Pager/dicctionary';
+export { Tab } from './Tab';
+export * from './TabContext';
+export * from './Typography/Typography';
+export * from './ToggleButton';
+export * from './ToggleIconButton';