@m4l/components 0.1.35 → 0.1.37

package/src/components/PropertyValue/index.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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