@m4l/components 0.1.39 → 0.1.41

package/src/components/DynamicFilter/types.ts

@@ -1,112 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

package/src/components/HelmetPage/index.tsx

@@ -1,33 +0,0 @@
-//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

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

package/src/components/Icon/index.tsx

@@ -1,84 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,81 +0,0 @@
-/* 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

@@ -1,33 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,50 +0,0 @@
-/* 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 ? (
-
-    //         ) :  ? (
-
-    //         ) : (
-
-    //         )}
-    //     </>
-    // );
-}