@m4l/components 0.1.39 → 0.1.41

package/src/components/PropertyValue/index.tsx

@@ -1,74 +0,0 @@
-// react
-
-// mui
-
-// external libraries
-
-// componentes estilados
-
-import { WrapperPropertyValue as Wrapper, Property, Value } from './styles';
-// internal components
-
-// sub components
-// skeleton
-import { SKTProperty } from './skeleton';
-// types
-import type { PropertyValueProps } from './types';
-import { useResponsiveDesktop } from '@m4l/graphics';
-import { useModuleSkeleton } from '@m4l/core';
-
-export function PropertyValue(props: PropertyValueProps) {
-    const {
-        property,
-        value,
-        propertyWidth = 200,
-        valueHeight = 'auto',
-        valueWidth = '100',
-        valueWidthMobile,
-        isForm,
-    } = props;
-
-    const isDesktop = useResponsiveDesktop();
-    const isSkeleton = useModuleSkeleton();
-    const getValueW = (): number => {
-        if (valueWidthMobile && !isDesktop) {
-            return valueWidthMobile;
-        }
-        if (valueWidth === 75 && isDesktop) {
-            return 75;
-        } else if (valueWidth === 75 && !isDesktop) {
-            return 100;
-        }
-
-        if (valueWidth === 50 && isDesktop) {
-            return 50;
-        } else if (valueWidth === 50 && !isDesktop) {
-            return 100;
-        }
-
-        if ((valueWidth === 25 && isDesktop) || (valueWidth === 12.5 && isDesktop)) {
-            return valueWidth;
-        }
-
-        if (valueWidth === 25 && !isDesktop) {
-            return 50;
-        }
-
-        if (valueWidth === 12.5 && !isDesktop) {
-            return 25;
-        }
-
-        return 100;
-    };
-
-    return (
-        <Wrapper id="WrapperPropertyValue" isForm={isForm} propertyWidth={propertyWidth}>
-            <Property id="Property" isForm={isForm} propertyWidth={propertyWidth}>
-                {isSkeleton ? <SKTProperty /> : property}
-            </Property>
-            <Value id="Value" valueWidth={getValueW()} valueHeight={valueHeight}>
-                {value}
-            </Value>
-        </Wrapper>
-    );
-}

package/src/components/PropertyValue/skeleton.tsx

@@ -1,10 +0,0 @@
-import { Skeleton } from '@mui/material';
-import { SKTWrapperProperty } from './styles';
-
-export function SKTProperty() {
-    return (
-        <SKTWrapperProperty>
-            <Skeleton variant="text" width={68} height={14} />
-        </SKTWrapperProperty>
-    );
-}

package/src/components/PropertyValue/styles.tsx

@@ -1,75 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { WrapperProps, WrapperPropertyProps, WrapperValueProps } from './types';
-
-export const WrapperPropertyValue = styled('div', {
-    shouldForwardProp: prop =>
-        prop !== 'propertyWidth' && prop !== 'propertyHeight' && prop !== 'isForm',
-})<WrapperProps>(({ propertyWidth, isForm, theme }) => ({
-    display: 'grid',
-    gridTemplateColumns: '1fr',
-    alignItems: 'flex-start',
-    width: '100%',
-    padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
-    ':hover': {
-        backgroundColor: isForm ? 'unset' : (theme.palette as any).grid?.rowHover,
-    },
-    borderBottom: isForm ? 'none' : `1px solid ${theme.palette.divider}`,
-    flexDirection: 'column',
-    [theme.breakpoints.up('sm')]: {
-        gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : '150px 1fr',
-        gap: theme.spacing(2),
-        alignItems: 'center',
-    },
-}));
-
-export const Property = styled('div', {
-    shouldForwardProp: prop =>
-        prop !== 'propertyWidth' && prop !== 'propertyHeight' && prop !== 'isForm',
-})<WrapperPropertyProps>(({ propertyWidth, isForm, theme }) => ({
-    width: '100%',
-    minWidth: '100%',
-    ...theme.typography.subtitle2,
-    color: theme.palette.text.primary,
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-
-    position: 'relative',
-    [theme.breakpoints.up('sm')]: {
-        borderRight: isForm ? 'none' : `1px solid ${theme.palette.divider}`,
-        paddingRight: theme.spacing(2),
-        textAlign: 'right',
-        width: propertyWidth || '150px',
-        minWidth: propertyWidth || '150px',
-        justifyContent: 'flex-end',
-    },
-    overflow: 'hidden',
-    overflowWrap: 'break-word',
-}));
-
-export const Value = styled('div', {
-    shouldForwardProp: prop =>
-        prop !== 'valueWidth' && prop !== 'valueHeight' && prop !== 'withGrid',
-})<WrapperValueProps>(({ valueWidth, valueHeight, theme }) => ({
-    flexGrow: '1',
-    ...theme.typography.body2,
-    color: theme.palette.text.secondary,
-
-    position: 'relative',
-    padding: '1px',
-    maxWidth: `${valueWidth}%`,
-    width: `${valueWidth}%`,
-    height: valueHeight,
-    marginTop: theme.spacing(1),
-    [theme.breakpoints.up('sm')]: {
-        marginTop: '0px',
-    },
-    overflow: 'auto',
-    overflowWrap: 'break-word',
-}));
-
-export const SKTWrapperProperty = styled('div')(() => ({
-    display: 'flex',
-    justifyContent: 'flex-end',
-}));

package/src/components/PropertyValue/types.ts

@@ -1,22 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface PropertyProps {
-    propertyWidth?: number;
-}
-export interface ValueProps {
-    valueHeight?: number | string;
-    valueWidth?: number;
-    valueWidthMobile?: number;
-}
-
-export interface PropertyValueProps extends PropertyProps, ValueProps {
-    property: string;
-    value: number | string | ReactNode;
-    isForm?: boolean;
-}
-
-export type WrapperProps = PropertyProps & Pick<PropertyValueProps, 'isForm'>;
-
-export type WrapperPropertyProps = WrapperProps;
-
-export type WrapperValueProps = Omit<ValueProps, 'valueWidthMobile'>;

package/src/components/ResizeableWindow/index.tsx

@@ -1,31 +0,0 @@
-// react
-
-// mui
-
-// external libraries
-
-// componentes estilados
-
-import { WrapperResizeable } from './styles';
-// internal components
-
-// sub components
-
-// types
-import { ResizeableProps } from './types';
-
-export function ResizeableWindow(props: ResizeableProps) {
-    const { children, width = 200, height = 200, maxHeigth, maxWidth, ...other } = props;
-
-    return (
-        <WrapperResizeable
-            width={width}
-            height={height}
-            maxConstraints={maxHeigth && maxWidth ? [maxWidth, maxHeigth] : undefined}
-            resizeHandles={['se', 'nw']}
-            {...other}
-        >
-            {children}
-        </WrapperResizeable>
-    );
-}

package/src/components/ResizeableWindow/styles.tsx

@@ -1,76 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { ResizableBox } from 'react-resizable';
-
-export const WrapperResizeable = styled(ResizableBox)(({ theme }) => ({
-    // variante desktop
-
-    '&.react-resizable': {
-        position: 'relative',
-        width: '100%',
-        height: '100%',
-    },
-    '& .react-resizable-handle': {
-        position: 'absolute',
-        width: '20px',
-        height: '20px',
-        margin: '4px',
-        backgroundRepeat: 'no-repeat',
-        backgroundOrigin: 'content-box',
-        boxSizing: 'border-box',
-        /* background-image: url('data:image/svg+xml',base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')', */
-        backgroundColor: theme.palette.action.active,
-        mask: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
-        backgroundImage: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
-        backgroundPosition: 'bottom right',
-        padding: '0 3px 3px 0',
-    },
-    '& .react-resizable-handle-sw': {
-        bottom: '0',
-        left: '0',
-        cursor: 'sw-resize',
-        transform: 'rotate(90deg)',
-    },
-    '.react-resizable-handle-se': {
-        bottom: '0',
-        right: '0',
-        cursor: 'se-resize',
-    },
-    '& .react-resizable-handle-nw': {
-        top: '0',
-        left: '0',
-        cursor: 'nw-resize',
-        transform: 'rotate(180deg)',
-    },
-    '& .react-resizable-handle-ne': {
-        top: '0',
-        right: '0',
-        cursor: 'ne-resize',
-        transform: 'rotate(270deg)',
-    },
-    '& .react-resizable-handle-w, .react-resizable-handle-e': {
-        top: '50%',
-        marginTop: '-10px',
-        cursor: 'ew-resize',
-    },
-    '& .react-resizable-handle-w': {
-        left: '0',
-        transform: 'rotate(135deg)',
-    },
-    '& .react-resizable-handle-e': {
-        right: '0',
-        transform: 'rotate(315deg) ',
-    },
-    '& .react-resizable-handle-n,.react-resizable-handle-s': {
-        left: '50%',
-        marginLeft: '-10px',
-        cursor: 'ns-resize',
-    },
-    '& .react-resizable-handle-n': {
-        top: '0',
-        transform: 'rotate(225deg)',
-    },
-    '& .react-resizable-handle-s': {
-        bottom: '0',
-        transform: 'rotate(45deg)',
-    },
-}));

package/src/components/ResizeableWindow/types.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-import { ResizableBoxProps } from 'react-resizable';
-
-type InternalResizeableProps = {
-    children: ReactNode;
-    width?: number;
-    height?: number;
-    maxWidth?: number;
-    maxHeigth?: number;
-};
-
-export type ResizeableProps = InternalResizeableProps & Partial<ResizableBoxProps>;
-
-// {
-//     children: ReactNode;
-//     width: number;
-//     height: number;
-//     maxWidth?: number;
-//     maxHeigth?: number;
-// }

package/src/components/ScrollBar/index.tsx

@@ -1,61 +0,0 @@
-import SimpleBarReact from 'simplebar-react';
-// @mui
-import { alpha, styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
-import { ReactElement } from 'react';
-
-// ----------------------------------------------------------------------
-
-const RootStyle = styled('div')(() => ({
-    flexGrow: 1,
-    height: '100%',
-    overflow: 'hidden',
-}));
-
-const SimpleBarStyle = styled(SimpleBarReact)(({ theme }) => ({
-    maxHeight: '100%',
-    '& .simplebar-scrollbar': {
-        '&:before': {
-            backgroundColor: alpha(theme.palette.grey[600], 0.48),
-        },
-        '&.simplebar-visible:before': {
-            opacity: 1,
-        },
-    },
-    '& .simplebar-track.simplebar-vertical': {
-        width: 10,
-    },
-    '& .simplebar-track.simplebar-horizontal .simplebar-scrollbar': {
-        height: 6,
-    },
-    '& .simplebar-mask': {
-        zIndex: 'inherit',
-    },
-}));
-
-// ----------------------------------------------------------------------
-
-interface Props {
-    children?: ReactElement;
-}
-
-export function ScrollBar({ children }: Props) {
-    const userAgent = typeof navigator === 'undefined' ? 'SSR' : navigator.userAgent;
-
-    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-        userAgent,
-    );
-
-    /// /
-    if (isMobile) {
-        return <Box sx={{ overflowX: 'auto' }}>{children}</Box>;
-    }
-
-    return (
-        <RootStyle>
-            <SimpleBarStyle autoHide={false}>{children}</SimpleBarStyle>
-        </RootStyle>
-    );
-}
-
-export default ScrollBar;

package/src/components/ScrollBar/styles.tsx

@@ -1,29 +0,0 @@
-import { alpha, styled } from '@mui/material/styles';
-import SimpleBarReact from 'simplebar-react';
-
-export const RootStyle = styled('div')(() => ({
-    flexGrow: 1,
-    height: '100%',
-    overflow: 'hidden',
-}));
-
-export const SimpleBarStyle = styled(SimpleBarReact)(({ theme }) => ({
-    maxHeight: '100%',
-    '& .simplebar-scrollbar': {
-        '&:before': {
-            backgroundColor: alpha(theme.palette.grey[600], 0.48),
-        },
-        '&.simplebar-visible:before': {
-            opacity: 1,
-        },
-    },
-    '& .simplebar-track.simplebar-vertical': {
-        width: 10,
-    },
-    '& .simplebar-track.simplebar-horizontal .simplebar-scrollbar': {
-        height: 6,
-    },
-    '& .simplebar-mask': {
-        zIndex: 'inherit',
-    },
-}));

package/src/components/ScrollBar/types.tsx

@@ -1,8 +0,0 @@
-import { SxProps } from '@mui/material';
-import type { ReactNode } from 'react';
-import type { Props as SimpleProps } from 'simplebar-react';
-
-export interface ScrollBarProps extends SimpleProps {
-    children: ReactNode;
-    sx?: SxProps;
-}

package/src/components/ScrollToTop/index.ts

@@ -1,14 +0,0 @@
-import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-
-// ----------------------------------------------------------------------
-
-export function ScrollToTop() {
-    const { pathname } = useLocation();
-
-    useEffect(() => {
-        window.scrollTo(0, 0);
-    }, [pathname]);
-
-    return null;
-}

package/src/components/SplitLayout/index.tsx

@@ -1,43 +0,0 @@
-// external libraries
-import SplitterLayout from 'react-splitter-layout';
-
-// import 'react-splitter-layout/lib/index.css';
-// componentes estilados
-import { SplitDetail, SplitMaster, WrapperSplit } from './styles';
-
-// sub components
-
-// types
-import { SplitLayoutProps } from './types';
-// hooks
-
-export function SplitLayout(props: SplitLayoutProps) {
-    const {
-        splitPosition,
-        firstPart,
-        secondPart,
-        secondParrtInitialSize = 50,
-        percentage = true,
-    } = props;
-
-    //////
-
-    return (
-        <WrapperSplit id="WrapperSplit" className={`split_${splitPosition}`}>
-            <SplitterLayout
-                vertical={splitPosition === 'vertical'}
-                percentage={percentage}
-                secondaryInitialSize={secondParrtInitialSize}
-            >
-                <SplitMaster id="splitMaster">
-                    {typeof firstPart === 'function' ? firstPart() : firstPart}
-                </SplitMaster>
-                {splitPosition !== 'none' && (
-                    <SplitDetail id="detail2">
-                        {typeof secondPart === 'function' ? secondPart() : secondPart}
-                    </SplitDetail>
-                )}
-            </SplitterLayout>
-        </WrapperSplit>
-    );
-}

package/src/components/SplitLayout/styles.tsx

@@ -1,144 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-export const WrapperSplit = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative',
-    flexGrow: 1,
-    // left: '0px',
-    // right: '0px',
-    // top: '0px',
-    // bottom: '0px',
-    // margin: '10px',
-    // width: "100%",
-    // height: "100%",
-    overflow: 'hidden',
-
-    // Configuracion por defecto en horizontal
-    '& .splitter-layout': {
-        position: 'absolute',
-        display: 'flex',
-        flexDirection: 'row',
-        width: '100%',
-        height: '100%',
-        overflow: 'hidden',
-    },
-
-    // Configuracion de ambos paneles a dividir
-    '& .splitter-layout .layout-pane': {
-        position: 'relative',
-        flex: '0 0 auto',
-        overflow: 'auto',
-    },
-
-    // Configuración del panel principal
-    '& .splitter-layout .layout-pane.layout-pane-primary': {
-        flex: '1 1 auto',
-    },
-    // Configuración del cursor en horizontal
-    '& .splitter-layout.layout-changing': {
-        cursor: 'col-resize',
-    },
-    // Configuración barran grande cuando es horizontal
-    '& .splitter-layout > .layout-splitter': {
-        display: 'flex',
-        alignItems: 'center',
-        backgroundColor: theme.palette.divider,
-        /* zIndex: '1', */
-        boxSizing: 'border-box',
-        backgroundClip: 'padding-box',
-        // Propiedades del horizontal
-        width: '11px',
-        margin: '0 5px',
-        borderLeft: '5px solid hsla(0, 0%, 100%, 0)',
-        borderRight: '5px solid hsla(0, 0%, 100%, 0)',
-        cursor: 'col-resize',
-        justifyContent: 'center',
-        height: '100%',
-    },
-    // Configuración divisorra interna posición horizontal del split
-    '& .splitter-layout .layout-splitter:before': {
-        content: `""`,
-        height: '45px',
-        width: '4px',
-        top: 'calc(50% - 22.5px)',
-        position: 'absolute',
-        background: theme.palette.grey[500],
-        borderRadius: '6px',
-    },
-    // Hover de la barra externa en posición horizontal
-    '& .splitter-layout > .layout-splitter:hover': {
-        borderLeft: `5px solid ${theme.palette.grey[500_8]}`,
-        borderRight: `5px solid ${theme.palette.grey[500_8]}`,
-    },
-    // Configuración del cursor en horizontal
-    '& .splitter-layout.splitter-layout-vertical.layout-changing': {
-        cursor: 'row-resize',
-    },
-    // Barra divisora vertical del split
-    '& .splitter-layout.splitter-layout-vertical > .layout-splitter': {
-        height: '11px !important',
-        width: '100% !important',
-        margin: '5px 0',
-        borderTop: '5px solid hsla(0, 0%, 100%, 0)',
-        borderBottom: '5px solid hsla(0, 0%, 100%, 0)',
-        cursor: 'row-resize',
-    },
-    // Configuración barra divisora interna vertical del split
-    '& .splitter-layout.splitter-layout-vertical .layout-splitter:before': {
-        width: '45px !important',
-        height: '4px !important',
-        left: 'calc(50% - 22.5px)',
-        top: 'unset',
-    },
-    // Color del hover y el arrastrando del splitter
-    '& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before':
-        {
-            // barra interna vertical
-            background: theme.palette.primary.main,
-        },
-
-    // Dirección flex cuando es verticall
-    '& .splitter-layout.splitter-layout-vertical': {
-        flexDirection: 'column',
-    },
-
-    // Borde gris cuando esta en over y es vertical
-
-    '& .splitter-layout.splitter-layout-vertical > .layout-splitter:hover': {
-        borderTop: `5px solid ${theme.palette.grey[500_8]}`,
-        borderBottom: `5px solid ${theme.palette.grey[500_8]}`,
-    },
-}));
-
-export const SplitMaster = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-    overflow: 'hidden',
-}));
-
-export const SplitDetail = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-    position: 'absolute',
-    left: '0px',
-    right: '0px',
-    top: '0px',
-    bottom: '0px',
-}));
-
-/*
-
-
-  
-
-  
-
-
-*/

package/src/components/SplitLayout/types.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-
-export type SplitPosition = 'vertical' | 'horizontal' | 'none';
-
-export interface SplitLayoutProps {
-    splitPosition: SplitPosition;
-    percentage?: boolean;
-    secondParrtInitialSize?: number;
-    // onChangeSplitPosition: (newPosition: SplitPosition) => void;
-    firstPart: ((props?: any) => JSX.Element) | ReactNode;
-    secondPart: ((props?: any) => JSX.Element) | ReactNode;
-    // children: ReactNode;
-}

package/src/components/WrapperComponent/index.tsx

@@ -1,11 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-import { WrapperComponentProps } from './types';
-
-export function WrapperComponent(props: WrapperComponentProps): JSX.Element {
-    const { children, type = 'fragment' } = props;
-
-    if (type === 'fragment') {
-        return <>{children}</>;
-    }
-    return <> {children}</>;
-}

package/src/components/WrapperComponent/types.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface WrapperComponentProps {
-    children: ReactNode;
-    type?: 'fragment';
-}