@m4l/components 0.1.35 → 0.1.37

package/src/components/DynamicFilter/types.ts

@@ -0,0 +1,112 @@
+import { Maybe } from '@m4l/core';
+
+export type FieldType = 'number' | 'string' | 'boolean' | 'datetime';
+// | 'date'| 'time';
+// | 'select'
+// | 'in';
+
+export type OperandType = number | string | boolean | Date | [] | object;
+
+export type Operator = 'b' | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte' | 'c' | 'nc';
+
+export const OPERATORS: Array<Operator> = ['b', 'e', 'ne', 'gt', 'gte', 'lt', 'lte', 'c', 'nc'];
+
+export type StringOperator = 'c' | 'nc';
+export const STRING_OPERATORS: Array<StringOperator> = ['c', 'nc'];
+
+export type NumberOperator = 'b' | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
+export const NUMBER_OPERATORS: Array<NumberOperator> = ['b', 'e', 'ne', 'gt', 'gte', 'lt', 'lte'];
+
+export type BooleanOperator = 'e' | 'ne';
+export const BOOLEAN_OPERATORS: Array<BooleanOperator> = ['e', 'ne'];
+
+export type DateTimeOperator = 'b' | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
+export const DATE_TIME_OPERATORS: Array<DateTimeOperator> = [
+    'b',
+    'e',
+    'ne',
+    'gt',
+    'gte',
+    'lt',
+    'lte',
+];
+export type FieldPresence = 'initialized' | 'fixed' | 'optional';
+export interface Field {
+    name: string; //Nombre del campo que va a ser usado en el backend
+    label: string; //Como lo va a ver el usuario, se debe usar getLabel
+    type: FieldType; //tipo de campo,
+    multiple?: boolean; //Si se puede repetir, valor por defecto true
+    presence?: FieldPresence; //Si es obligatorio
+    urlIcon: string; //Icono a mostrar
+    defaultOperand1?: Maybe<OperandType>; //Valor por defecto a mostrar cuando se agrega manualmente o cuando es obligatorio
+    defaultOperand2?: Maybe<OperandType>; //Valor por defecto a mostrar cuando se agrega manualmente o cuando es obligatorio
+}
+export interface OptionOperator<T> {
+    id: T;
+    label: string;
+}
+
+export interface BaseApplyFilter {
+    id: number;
+    n: string; //field name
+    isSetted: boolean;
+    fixed: boolean;
+}
+export interface ValuesFilter {
+    o: Operator; // operator
+    labelOperator: string; //label operator
+    labelOperands: string | number; //label operands
+    o1?: Maybe<OperandType>; //operand 1
+    o2?: Maybe<OperandType>; //operand 2
+}
+
+export interface FormValuesFilter<T> {
+    valueOperator?: Maybe<OptionOperator<T>>;
+    valueOperand1?: Maybe<any>;
+    valueOperand2?: Maybe<any>;
+}
+
+export interface RawFilterFieldApply {
+    n: string; //fieldname
+    o: Operator; //operator
+    o1: Maybe<OperandType>; //operand1
+    o2: Maybe<OperandType>; //operand2
+}
+
+export type FilterFieldApply = BaseApplyFilter & ValuesFilter;
+
+export type InitialFilterFieldApply = Omit<
+    FilterFieldApply,
+    'id' | 'fixed' | 'isSetted' | 'labelOperator'
+>;
+
+export type FilterToAddApply = Omit<FilterFieldApply, 'id' | 'labelOperator'>;
+
+export type FilterToEditApply = Omit<FilterFieldApply, 'labelOperator'>;
+
+export interface FilterFormFieldApply
+    extends BaseApplyFilter,
+        ValuesFilter,
+        FormValuesFilter<Operator> {}
+
+export const ALL_FIELDS: Field = {
+    name: 'all',
+    label: 'dynamic_filter.all_fields',
+    urlIcon: '',
+    type: 'string',
+    multiple: true,
+    presence: 'optional',
+};
+
+export interface DynamicFilterProps {
+    isSkeleton?: boolean;
+    automatic?: boolean;
+    withAllField?: boolean;
+    fields: Array<Field>;
+    initialFilters?: Array<InitialFilterFieldApply>;
+
+    onChangeFilter: (
+        initialFilters: Array<InitialFilterFieldApply>,
+        rawFilters: Array<RawFilterFieldApply>,
+    ) => void;
+}

package/src/components/ErrorLabel/index.tsx

@@ -0,0 +1,10 @@
+import { Wrapper } from './styles';
+import { ErrorLabelProps } from './types';
+
+export const ErrorLabel = (props: ErrorLabelProps) => {
+    const { message } = props;
+
+    return <Wrapper>{message}</Wrapper>;
+};
+
+export default ErrorLabel;

package/src/components/ErrorLabel/styles.tsx

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material';
+
+export const Wrapper = styled('p')(({ theme }) => ({
+    ...theme.typography.caption,
+    color: theme.palette.error.main,
+    margin: '8px 14px 0 14px',
+}));

package/src/components/ErrorLabel/types.ts

@@ -0,0 +1,3 @@
+export interface ErrorLabelProps {
+    message: string;
+}

package/src/components/HelmetPage/index.tsx

@@ -0,0 +1,33 @@
+//react
+//external libraries
+import { Helmet } from 'react-helmet-async';
+
+// @mui
+
+// hooks ds
+import { useLocales } from '@m4l/graphics';
+import { useModuleSkeleton } from '@m4l/core';
+
+import { HelmetPageProps } from './types';
+
+export const HelmetPage = (props: HelmetPageProps) => {
+    const { children, title, meta, subtitle } = props;
+    const localeString = useLocales().currentLocale?.localeString;
+
+    const isSkeleton = useModuleSkeleton();
+
+    return (
+        <>
+            {!isSkeleton && (
+                <Helmet>
+                    <title>{`${title}${subtitle ? ` | ${subtitle}` : ''} `}</title>
+                    <html lang={localeString} />
+                    {meta}
+                </Helmet>
+            )}
+
+            {children}
+        </>
+    );
+};
+HelmetPage.displayName = 'Page';

package/src/components/HelmetPage/types.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+
+export interface HelmetPageProps {
+    children: ReactNode;
+    meta?: ReactNode;
+    title: string;
+    subtitle?: string;
+}

package/src/components/Icon/index.tsx

@@ -0,0 +1,84 @@
+import { IconProps } from './types';
+import { DivIcon, WrapperPlaceHolder } from './styles';
+import { useEffect, useMemo, useState } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { getPaletteColor } from '../../utils';
+
+/* interface MeansProps {
+    url: any;
+}
+
+ */
+
+export function Icon(props: IconProps) {
+    const {
+        src,
+        size = 'small',
+        bgColor = 'action.active',
+        rotationAngle,
+        angleTransition,
+    } = props;
+    const [resource, setResource] = useState<any | undefined>(undefined);
+    const theme = useTheme();
+
+    const finalSize = useMemo(() => {
+        switch (size) {
+            case 'extra-small':
+                return '12px';
+            case 'small':
+                return '16px';
+            case 'medium':
+                return '18px';
+            case 'large':
+                return '22px';
+        }
+
+        return size;
+    }, [size]);
+
+    useEffect(() => {
+        let mounted = true;
+        (async function networkOperation() {
+            await fetch(src)
+                .then(response => {
+                    return response.text() || '';
+                })
+                .then(xml => {
+                    xml =
+                        xml
+                            .match(
+                                /(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g, // Expresión regular para seleccionar solo las etiqueta svg más su contenido.
+                            )
+                            ?.toString() || '';
+                    if (mounted) {
+                        setResource(window.btoa(xml)); // cambio de formato utf8 a base64 compatible con atributos css de imagen.
+                    }
+                })
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                .catch(_err => {});
+        })();
+
+        return function clenUp() {
+            mounted = false;
+        };
+    }, [src]);
+
+    const placeHolder =
+        'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==';
+
+    return (
+        <WrapperPlaceHolder className="m4l_icon">
+            {resource ? (
+                <DivIcon
+                    src={resource}
+                    size={finalSize}
+                    bgColor={getPaletteColor(theme.palette, bgColor)}
+                    rotationAngle={rotationAngle}
+                    angleTransition={angleTransition}
+                />
+            ) : (
+                <img src={placeHolder} alt="icon_svg" width={finalSize} height={finalSize} />
+            )}
+        </WrapperPlaceHolder>
+    );
+}

package/src/components/Icon/styles.tsx

@@ -0,0 +1,36 @@
+import { styled } from '@mui/material';
+import { IconProps } from './types';
+
+export const DivIcon = styled('div', {
+    shouldForwardProp: props =>
+        props !== 'src' &&
+        props !== 'size' &&
+        props !== 'bgColor' &&
+        props !== 'rotationAngle' &&
+        props !== 'angleTransition',
+})<IconProps>(({ size, src, bgColor, rotationAngle, angleTransition }) => ({
+    maskPosition: 'center!important',
+    maskRepeat: 'no-repeat!important',
+    WebkitMaskRepeat: 'no-repeat!important',
+    width: size,
+    height: size,
+    backgroundColor: bgColor,
+    mask: `url('data:image/svg+xml;base64,${src}')`,
+    WebkitMask: `url('data:image/svg+xml;base64,${src}')`,
+    /*  transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.shorter,
+    }), */
+    ...(rotationAngle && {
+        transform: `rotate(${rotationAngle}deg)`,
+    }),
+    ...(angleTransition &&
+        rotationAngle && {
+            transition: `transform ${angleTransition}s ease-in-out`,
+        }),
+}));
+
+export const WrapperPlaceHolder = styled('div')(() => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+}));

package/src/components/Icon/types.ts

@@ -0,0 +1,15 @@
+export type SizeIcon = 'extra-small' | 'small' | 'normal' | 'large' | string;
+
+export interface IconProps {
+    src: string;
+    bgColor?: string | 'info' | 'warning' | 'error' | 'active' | 'selected' | 'disabled';
+    size?: SizeIcon;
+    rotationAngle?: number;
+    angleTransition?: number;
+}
+
+export type WrapperPlaceHolderProps = {
+    size: string;
+};
+//export type IconProps = OwnProps;
+// export interface DivIconProps extends OwnProps, SizeIconProps {}

package/src/components/Image/hoc/WithTrackWindowScroll.tsx

@@ -0,0 +1,93 @@
+import { ComponentType, useEffect, useRef, useState } from 'react';
+
+import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle';
+
+import { IntersectComponentScrollProps, ScrollPosition } from '../types';
+import { getScrollAncestor } from '../utils/get-scroll-ancestor';
+
+const getScrollX = () => (typeof window === 'undefined' ? 0 : window.scrollX || window.pageXOffset);
+const getScrollY = () => (typeof window === 'undefined' ? 0 : window.scrollY || window.pageYOffset);
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface withTrackWindowScrollProps {}
+
+export function WithTrackWindowScroll<P extends IntersectComponentScrollProps>(
+    BaseComponent: ComponentType<P>,
+) {
+    // eslint-disable-next-line react/display-name
+    return (props: P & withTrackWindowScrollProps) => {
+        const { delayMethod = 'throttle', useIntersectionObserver, delayTime = 300 } = props;
+        const baseComponentRef = useRef();
+
+        // const [scrollElement, setScrollElement] = useState<HTMLElement | Window>();
+
+        const [stateScrollPosition, setStateScrollPosition] = useState<ScrollPosition | undefined>(
+            !useIntersectionObserver
+                ? {
+                      x: getScrollX(),
+                      y: getScrollY(),
+                  }
+                : undefined,
+        );
+
+        useEffect(() => {
+            let delayedScroll: any;
+
+            const onChangeScroll = (): void => {
+                if (useIntersectionObserver) {
+                    return;
+                }
+                setStateScrollPosition({
+                    x: getScrollX(),
+                    y: getScrollY(),
+                });
+            };
+
+            if (
+                typeof window === 'undefined' ||
+                useIntersectionObserver ||
+                !baseComponentRef.current
+            ) {
+                return;
+            }
+
+            if (delayMethod === 'debounce') {
+                delayedScroll = debounce(onChangeScroll, delayTime);
+            } else if (delayMethod === 'throttle') {
+                delayedScroll = throttle(onChangeScroll, delayTime);
+            }
+
+            const scrollElement = getScrollAncestor(baseComponentRef.current);
+
+            scrollElement.addEventListener('scroll', delayedScroll, {
+                passive: true,
+            });
+            window.addEventListener('resize', delayedScroll, {
+                passive: true,
+            });
+
+            if (scrollElement !== window) {
+                window.addEventListener('scroll', delayedScroll, {
+                    passive: true,
+                });
+            }
+            return () => {
+                if (typeof window === 'undefined' || useIntersectionObserver) {
+                    return;
+                }
+
+                scrollElement.removeEventListener('scroll', delayedScroll);
+                window.removeEventListener('resize', delayedScroll);
+
+                if (scrollElement !== window) {
+                    window.removeEventListener('scroll', delayedScroll);
+                }
+            };
+        }, []);
+
+        return (
+            <BaseComponent ref={baseComponentRef} {...props} scrollPosition={stateScrollPosition} />
+        );
+    };
+}

package/src/components/Image/index.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable no-constant-condition */
+// @mui
+
+import { ImageProps } from './types';
+
+import { useModuleSkeleton } from '@m4l/core';
+import { useEffect, useMemo, useState } from 'react';
+import { LazyLoadComponent } from './subcomponents/LazyLoadComponent';
+
+import { WrapperImage } from './styles';
+import { Skeleton } from './subcomponents/Skeleton';
+
+type StatusLoad = 'initial' | 'loaded' | 'removed';
+
+export function Image(props: ImageProps) {
+    const {
+        src,
+        alt,
+        useIntersectionObserver = true,
+        threshold = 100,
+        width,
+        height,
+        skeletonVariant = 'image',
+    } = props;
+    const isSKeleton = useModuleSkeleton();
+    const [statusLoad, setStatusLoad] = useState<StatusLoad>('initial');
+
+    /*     useEffect(() => {
+        if (statusLoad !== 'initial') {
+            setStatusLoad('initial');
+        }
+    }, [src]); */
+
+    useEffect(() => {
+        let timer: ReturnType<typeof setTimeout>;
+
+        if (statusLoad === 'loaded' && !isSKeleton) {
+            timer = setTimeout(() => {
+                setStatusLoad('removed');
+            }, 3000);
+        }
+
+        return () => {
+            if (timer) {
+                clearTimeout(timer);
+            }
+        };
+    }, [statusLoad, isSKeleton]);
+
+    const onLoad = () => {
+        setStatusLoad('loaded');
+    };
+
+    const lazyLoadComponent = useMemo(() => {
+        const isImageLoaded = !isSKeleton && statusLoad !== 'initial';
+
+        return (
+            <WrapperImage
+                width={width}
+                height={height}
+                className={'m4l_image ' + (isImageLoaded ? 'loaded' : '')}
+            >
+                <LazyLoadComponent
+                    width={width}
+                    height={height}
+                    useIntersectionObserver={useIntersectionObserver}
+                    threshold={threshold}
+                >
+                    {statusLoad !== 'removed' ? (
+                        <Skeleton skeletonVariant={skeletonVariant} />
+                    ) : null}
+                    <img alt={alt} src={src} onLoad={onLoad} />
+                </LazyLoadComponent>
+            </WrapperImage>
+        );
+    }, [statusLoad, isSKeleton, src]);
+
+    return lazyLoadComponent;
+}
+
+export default Image;

package/src/components/Image/styles.tsx

@@ -0,0 +1,33 @@
+import { styled } from '@mui/material';
+import { BaseImageProps } from './types';
+
+export const WrapperImage = styled('div', {
+    shouldForwardProp: props => props !== 'width' && props !== 'height',
+})<BaseImageProps>(({ height, width }) => ({
+    position: 'relative',
+    width: width,
+    height: height,
+    minHeight: height,
+    minWidth: width,
+
+    '& > img ': {
+        opacity: 0,
+        position: 'absolute',
+        inset: '0',
+        width: '100%',
+        height: '100%',
+    },
+    '&.loaded > img': {
+        opacity: 1,
+        transition: 'opacity .5s',
+    },
+    '& .skeleton': {
+        opacity: 1,
+        width: width,
+        height: height,
+    },
+    '&.loaded .skeleton': {
+        opacity: 0,
+        transition: 'opacity .3s',
+    },
+}));

package/src/components/Image/subcomponents/BasicIntersectComponent/index.tsx

@@ -0,0 +1,64 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { IntersectComponentProps, IntersectComponentRef } from '../../types';
+
+const checkIntersections = (entries: IntersectionObserverEntry[]) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            (entry.target as any)?.setIsVisible(true);
+        }
+    });
+};
+
+const LAZY_LOAD_OBSERVERS: Record<number, IntersectionObserver> = {};
+
+const getObserver = (threshold: number) => {
+    LAZY_LOAD_OBSERVERS[threshold] =
+        LAZY_LOAD_OBSERVERS[threshold] ||
+        new IntersectionObserver(checkIntersections, {
+            rootMargin: threshold + 'px',
+        });
+
+    return LAZY_LOAD_OBSERVERS[threshold];
+};
+
+export const BasicIntersectComponent = forwardRef<HTMLSpanElement, IntersectComponentProps>(
+    (props, ref) => {
+        const { height, width, setIsVisible, threshold } = props;
+
+        const [observer] = useState<IntersectionObserver | undefined>(getObserver(threshold));
+
+        const intersectComponentRef = useRef<IntersectComponentRef>(null);
+
+        useImperativeHandle(ref, () => intersectComponentRef.current as HTMLSpanElement);
+
+        useEffect(() => {
+            if (observer && intersectComponentRef.current) {
+                intersectComponentRef.current.setIsVisible = setIsVisible;
+                observer.observe(intersectComponentRef.current);
+            }
+
+            return () => {
+                if (observer && intersectComponentRef.current) {
+                    observer.unobserve(intersectComponentRef.current);
+                }
+            };
+        }, []);
+
+        const styleProp: Record<string, any> = {
+            display: 'inline-block',
+        };
+
+        if (typeof width !== 'undefined') {
+            styleProp.width = width;
+        }
+
+        if (typeof height !== 'undefined') {
+            styleProp.height = height;
+            styleProp.minHeight = height;
+        }
+
+        return <span id="IntersectComponent" ref={intersectComponentRef} style={styleProp} />;
+    },
+);
+
+BasicIntersectComponent.displayName = 'IntersectComponent';

package/src/components/Image/subcomponents/LazyLoadComponent/index.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable prettier/prettier */
+// @mui
+
+import { useState } from 'react';
+import { LazyLoadComponentProps } from '../../types';
+import { isIntersectionObserverAvailable } from '../../utils/isIntersectionObserverAvailable';
+import { BasicIntersectComponent } from '../BasicIntersectComponent';
+// import { WithTrackWindowScroll } from '../hoc/WithTrackWindowScroll';
+
+
+// const IntersectComponentScroll = WithTrackWindowScroll(IntersectComponent);
+
+export function LazyLoadComponent(props: LazyLoadComponentProps) {
+    const { children, useIntersectionObserver, ...other } = props;
+    const [isVisible, setIsVisible] = useState(!(useIntersectionObserver && isIntersectionObserverAvailable()));
+
+    if (isVisible) {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return <>{children}</>;
+    }
+    
+    return (<BasicIntersectComponent
+        useIntersectionObserver={useIntersectionObserver}
+        setIsVisible={setIsVisible}
+        {...other}
+    />)
+    // if (useIntersectionObserver && isIntersectionObserverAvailable()) {
+    //     // eslint-disable-next-line react/jsx-no-useless-fragment
+    // } else {
+    //     return (
+    //             <IntersectComponentScroll
+    //                 useIntersectionObserver={useIntersectionObserver}
+    //                 setIsVisible={setIsVisible}
+    //                 {...other}
+    //             />
+    //     );
+    // }
+    // return (
+    //     // eslint-disable-next-line react/jsx-no-useless-fragment
+    //     <>
+    //         {isVisible ? (
+
+    //         ) :  ? (
+
+    //         ) : (
+
+    //         )}
+    //     </>
+    // );
+}