@m4l/components 0.1.35 → 0.1.37

package/src/components/modal/WindowBase/subcomponents/Header/index.tsx

@@ -0,0 +1,44 @@
+import { useEnvironment } from '@m4l/core';
+
+import { HeaderProps } from './types';
+import { WrapperHeader, IconHeader, ModalTitle } from './styles';
+
+import { IconButton } from '@mui/material';
+import { Icon } from '../../../../Icon';
+
+export const Header = (props: HeaderProps) => {
+    const { host_static_assets, environment_assets } = useEnvironment();
+
+    const { variant, title, onClickCancel } = props;
+
+    const iconSrcWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/warning.svg`;
+    const iconSrcError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/error.svg`;
+    const iconSrcInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/info.svg`;
+    const iconDefault = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/icon_bar_title.svg`;
+
+    return (
+        <WrapperHeader id="Header" className="m4l_draggable_handle">
+            <IconHeader variant={variant}>
+                <Icon
+                    src={
+                        variant === 'warning'
+                            ? iconSrcWarning
+                            : variant === 'delete'
+                            ? iconSrcError
+                            : variant === 'info'
+                            ? iconSrcInfo
+                            : iconDefault
+                    }
+                ></Icon>
+            </IconHeader>
+
+            <ModalTitle variant={variant}>{title}</ModalTitle>
+
+            <IconButton onClick={onClickCancel} aria-label="click">
+                <Icon
+                    src={`${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/close.svg`}
+                />
+            </IconButton>
+        </WrapperHeader>
+    );
+};

package/src/components/modal/WindowBase/subcomponents/Header/styles.tsx

@@ -0,0 +1,44 @@
+import { styled } from '@mui/material/styles';
+import { getThemeVariantColor } from '../../../../../utils';
+
+import { VariantProps } from '../../types';
+
+export const WrapperHeader = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    minHeight: theme.spacing(5),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    overflow: 'hidden',
+}));
+
+export const IconTitleContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    flexGrow: 1,
+    alignItems: 'center',
+    cursor: 'move',
+    ...theme.typography.subtitle1,
+    color: theme.palette.text.primary,
+}));
+
+export const IconHeader = styled('div')<VariantProps>(({ theme, variant }) => ({
+    // width: "24px",
+    // height: "24px",
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: theme.spacing(1.5),
+    '& > span': {
+        background: getThemeVariantColor(theme, variant),
+    },
+}));
+
+export const ModalTitle = styled('div')<VariantProps>(({ theme, variant }) => ({
+    ...theme.typography.subtitle1,
+    color: getThemeVariantColor(theme, variant),
+    width: '100%',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+}));

package/src/components/modal/WindowBase/subcomponents/Header/types.ts

@@ -0,0 +1,3 @@
+import { WindowBaseProps } from '../../types';
+
+export type HeaderProps = Pick<WindowBaseProps, 'title' | 'variant' | 'onClickCancel'>;

package/src/components/modal/WindowBase/types.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { VariantColor } from '../../../utils/types';
+
+export interface WindowBaseProps {
+    title: string;
+    variant?: VariantColor;
+    children: ReactNode;
+    onClickCancel?: () => void;
+}
+
+export type VariantProps = Pick<WindowBaseProps, 'variant'>;

package/src/components/modal/WindowConfirm/dictionary.ts

@@ -0,0 +1,11 @@
+import { Dictionary } from '@m4l/core';
+
+import { getCommonActionsDictionary } from '../../CommonActions/dictionary';
+
+export function getModalDialogComponentsDictionary() {
+    return ['modal_dialog'].concat(getCommonActionsDictionary());
+}
+
+export const defaultModalDialogDictionary: Dictionary = {
+    modal_dialog: {},
+};

package/src/components/modal/WindowConfirm/index.tsx

@@ -0,0 +1,42 @@
+//mui
+
+//external libraries
+//hooks
+import { useModal } from '../../../hooks';
+//Styled components
+
+//css
+//import "./resizeable.css"
+//hooks
+
+import { Actions } from '../../CommonActions/components/Actions';
+import { ActionCancel, ActionIntro } from '../../CommonActions';
+
+import { WindowConfirmProps } from './types';
+import { MessageIlustration } from './subcomponents/MessageIlustration';
+import { getVariantColor } from '../../../utils';
+import { WindowBase } from '../WindowBase';
+
+//types
+
+export const WindowConfirm = (props: WindowConfirmProps) => {
+    const { variant, title, onClickCancel, onClickIntro } = props;
+
+    const { closeModal } = useModal();
+
+    const onCloseCancel = () => {
+        onClickCancel && onClickCancel();
+        closeModal();
+    };
+    // //
+    return (
+        <WindowBase title={title} variant={variant} onClickCancel={onClickCancel}>
+            <MessageIlustration />
+
+            <Actions>
+                <ActionCancel onClick={onCloseCancel} />{' '}
+                <ActionIntro onClick={onClickIntro} color={getVariantColor(variant)} />
+            </Actions>
+        </WindowBase>
+    );
+};

package/src/components/modal/WindowConfirm/styles.ts

@@ -0,0 +1,9 @@
+import { styled } from '@mui/material/styles';
+
+export const WrapperWindowConfirm = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    overflow: 'hidden',
+    padding: theme.spacing(3),
+}));

package/src/components/modal/WindowConfirm/subcomponents/MessageIlustration/index.tsx

@@ -0,0 +1,44 @@
+import { ModalConfirmProps } from './types';
+import { Typography } from '@mui/material';
+import {
+    WrapperMessageIlustration,
+    ModalContent,
+    IllustrationContainer,
+    MessageContainer,
+} from './styles';
+
+import { useEnvironment } from '@m4l/core';
+
+import { Icon } from '../../../../Icon';
+export const MessageIlustration = (props: ModalConfirmProps) => {
+    const {
+        variant = 'info',
+        msg = 'Are you sure you want to perform this action? Once complete, the information will be deleted.',
+    } = props;
+    const { host_static_assets, environment_assets } = useEnvironment();
+    const illustrationWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
+    const illustrationError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
+    const illustrationInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_info.svg`;
+
+    return (
+        <WrapperMessageIlustration>
+            <ModalContent>
+                <IllustrationContainer variant={variant}>
+                    <Icon
+                        src={
+                            variant === 'warning'
+                                ? illustrationWarning
+                                : variant === 'delete'
+                                ? illustrationError
+                                : illustrationInfo
+                        }
+                        size="230px"
+                    />
+                </IllustrationContainer>
+                <MessageContainer>
+                    <Typography variant="body1">{msg}</Typography>
+                </MessageContainer>
+            </ModalContent>
+        </WrapperMessageIlustration>
+    );
+};

package/src/components/modal/WindowConfirm/subcomponents/MessageIlustration/styles.tsx

@@ -0,0 +1,57 @@
+import { styled } from '@mui/material/styles';
+import { VariantProps } from './types';
+
+// export const ContainerActions = styled('div')(({ theme }) => ({
+//     paddingTop: theme.spacing(3),
+//     marginRight: theme.spacing(1.5),
+//     display: 'flex',
+//     flexDirection: 'row',
+//     justifyContent: 'flex-end',
+//     '& > button': {
+//         marginLeft: '10px',
+//     },
+//     '& .MuiLoadingButton-root ': {
+//         minWidth: '80px',
+//     },
+// }));
+
+export const WrapperMessageIlustration = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+}));
+
+export const ModalContent = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gridGap: theme.spacing(5),
+    flexGrow: 1,
+    [theme.breakpoints.up('sm')]: {
+        display: 'grid',
+        flexDirection: 'row',
+        gridTemplateColumns: '1fr 1fr',
+    },
+}));
+
+export const IllustrationContainer = styled('div')<VariantProps>(({ theme, variant }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '& > span': {
+        background:
+            variant === 'warning'
+                ? theme.palette.warning.main
+                : variant === 'delete'
+                ? theme.palette.error.main
+                : variant === 'info'
+                ? theme.palette.info.main
+                : 'theme.palette.text.primary',
+    },
+}));
+
+export const MessageContainer = styled('div')<VariantProps>(() => ({
+    display: 'flex',
+    alignItems: 'center',
+}));

package/src/components/modal/WindowConfirm/subcomponents/MessageIlustration/types.ts

@@ -0,0 +1,9 @@
+import { VariantColor } from '../../../../../utils/types';
+
+export interface ModalConfirmProps {
+    variant?: VariantColor;
+    msg?: string;
+}
+export interface VariantProps {
+    variant?: VariantColor;
+}

package/src/components/modal/WindowConfirm/types.ts

@@ -0,0 +1,13 @@
+import { VariantColor } from '../../../utils/types';
+
+export interface WindowConfirmProps {
+    title: string;
+    variant?: VariantColor;
+    titleAccept?: string;
+    msg: string;
+
+    onClickIntro?: () => void;
+    onClickCancel?: () => void;
+}
+
+export type VariantProps = Pick<WindowConfirmProps, 'variant'>;

package/src/components/modal/index.ts

@@ -0,0 +1,5 @@
+export { ModalDialog } from './ModalDialog';
+export * from './ModalDialog/dictionary';
+
+export * from './WindowConfirm';
+export * from './WindowBase';

package/src/components/mui_extended/Accordion/components/AccordionLabel.tsx

@@ -0,0 +1,23 @@
+import { Skeleton } from '@mui/material';
+import { Icon } from '../../../Icon';
+import { Label, WrapperAccordionLabel } from '../styles';
+import { AccordionLabelProps } from '../types';
+
+export const AccordionLabel = (props: AccordionLabelProps) => {
+    const { isSkeleton, label, SKTWidht, SKTHeight, labelIcon } = props;
+    return (
+        <div>
+            {isSkeleton ? (
+                <WrapperAccordionLabel>
+                    {labelIcon && <Skeleton variant="circular" width={'16px'} height={'16px'} />}
+                    <Skeleton variant="text" width={SKTWidht} height={SKTHeight} />
+                </WrapperAccordionLabel>
+            ) : (
+                <WrapperAccordionLabel>
+                    {labelIcon && <Icon src={labelIcon} />}
+                    <Label>{label}</Label>
+                </WrapperAccordionLabel>
+            )}
+        </div>
+    );
+};

package/src/components/mui_extended/Accordion/index.tsx

@@ -0,0 +1,47 @@
+import { Accordion as MUIAcordion, AccordionDetails, AccordionSummary } from '@mui/material';
+import { IconButton } from '../IconButton';
+
+import { AccordionProps } from './types';
+import { useEnvironment, useModuleSkeleton } from '@m4l/core';
+import { AccordionLabel } from './components/AccordionLabel';
+
+export function Accordion(props: AccordionProps) {
+    const { label, SKTWidht, SKTHeight, children, accordionProps, summaryProps, labelIcon } = props;
+    const { host_static_assets, environment_assets } = useEnvironment();
+    const isSkeleton = useModuleSkeleton();
+
+    return (
+        <MUIAcordion
+            variant="outlined"
+            square
+            TransitionProps={{ unmountOnExit: true }}
+            defaultExpanded
+            {...accordionProps}
+        >
+            {/* {isSkeleton && <SKTAccordionWrapper>
+                <Skeleton variant="text" width={SKTWidht} height={SKTHeight} /><Skeleton variant="circular" width={"20px"} height={"20px"} />
+            </SKTAccordionWrapper>} */}
+
+            <AccordionSummary
+                aria-controls="expanded-content"
+                disableTouchRipple={false}
+                expandIcon={
+                    <IconButton
+                        aria-label="settings"
+                        src={`${host_static_assets}/${environment_assets}/frontend/components/accordion/assets/icons/expanded.svg`}
+                    />
+                }
+                {...summaryProps}
+            >
+                <AccordionLabel
+                    isSkeleton={isSkeleton}
+                    label={label}
+                    SKTWidht={SKTWidht}
+                    SKTHeight={SKTHeight}
+                    labelIcon={labelIcon}
+                />
+            </AccordionSummary>
+            <AccordionDetails>{children}</AccordionDetails>
+        </MUIAcordion>
+    );
+}

package/src/components/mui_extended/Accordion/styles.tsx

@@ -0,0 +1,25 @@
+import { styled } from '@mui/material/styles';
+
+export const SKTAccordionWrapper = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: theme.spacing(0.5),
+    height: theme.spacing(4.5),
+    minHeight: theme.spacing(4.5),
+    backgroundColor: theme.palette.background.header,
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    marginBottom: '0px',
+}));
+
+export const WrapperAccordionLabel = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    gap: theme.spacing(2),
+}));
+
+export const Label = styled('span')(({ theme }) => ({
+    ...theme.typography.subtitle2,
+}));

package/src/components/mui_extended/Accordion/types.ts

@@ -0,0 +1,21 @@
+import { AccordionProps as MUIAccordionProps, AccordionSummaryProps } from '@mui/material';
+import type { ReactNode } from 'react';
+
+export type AccordionProps = {
+    label: string;
+
+    children: ReactNode;
+    accordionProps?: MUIAccordionProps;
+    summaryProps?: AccordionSummaryProps;
+    labelIcon?: string;
+
+    // skeleton
+
+    SKTWidht?: string | number;
+    SKTHeight?: string | number;
+};
+
+export interface AccordionLabelProps
+    extends Pick<AccordionProps, 'label' | 'SKTWidht' | 'SKTHeight' | 'labelIcon'> {
+    isSkeleton: boolean;
+}

package/src/components/mui_extended/Avatar/index.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { Avatar as MUIAvatar } from '@mui/material';
+import { AvatarProps } from './types';
+import { useModuleSkeleton } from '@m4l/core';
+import { SkeletonAvatar } from './subcomponents/SkeletonAvatar';
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+    ({ color = 'default', children, sx, ...other }, ref) => {
+        const theme = useTheme();
+        const isSkeleton = useModuleSkeleton();
+
+        if (isSkeleton) {
+            return <SkeletonAvatar />;
+        }
+
+        if (color === 'default') {
+            return (
+                <MUIAvatar ref={ref} sx={{ cursor: 'pointer', ...sx }} {...other}>
+                    {children}
+                </MUIAvatar>
+            );
+        }
+
+        return (
+            <MUIAvatar
+                ref={ref}
+                sx={{
+                    fontWeight: theme.typography.fontWeightMedium,
+                    color: theme.palette[color].contrastText,
+                    backgroundColor: theme.palette[color].main,
+                    cursor: 'pointer',
+                    ...sx,
+                }}
+                {...other}
+            >
+                {children}
+            </MUIAvatar>
+        );
+    },
+);
+Avatar.displayName = 'Avatar';
+
+export default Avatar;

package/src/components/mui_extended/Avatar/subcomponents/SkeletonAvatar/index.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from '@mui/material';
+
+export const SkeletonAvatar = () => {
+    return <Skeleton variant="circular" width={'32px'} height={'32px'} />;
+};

package/src/components/mui_extended/Avatar/types.ts

@@ -0,0 +1,7 @@
+import { AvatarProps as MUIAvatarProps } from '@mui/material';
+
+type AvatarColor = 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
+
+export interface AvatarProps extends MUIAvatarProps {
+    color?: AvatarColor;
+}

package/src/components/mui_extended/BoxIcon/index.tsx

@@ -0,0 +1,21 @@
+import { Box } from '@mui/material';
+import { BoxIconProps } from './types';
+
+// ----------------------------------------------------------------------
+
+export function BoxIcon({ src, sx }: BoxIconProps) {
+    return (
+        <Box
+            component="span"
+            sx={{
+                width: 20,
+                height: 20,
+                display: 'inline-block',
+                bgcolor: 'currentColor',
+                mask: `url(${src}) no-repeat center / contain`,
+                WebkitMask: `url(${src}) no-repeat center / contain`,
+                ...sx,
+            }}
+        />
+    );
+}

package/src/components/mui_extended/BoxIcon/types.ts

@@ -0,0 +1,5 @@
+import { BoxProps } from '@mui/material';
+
+export interface BoxIconProps extends BoxProps {
+    src: string;
+}

package/src/components/mui_extended/Breadcrumbs/components/LinkItem/index.tsx

@@ -0,0 +1,38 @@
+// react
+import { Link as RouterLink } from 'react-router-dom';
+// m4l
+import { useModuleDictionary } from '@m4l/core';
+// mui
+import { Box, Link } from '@mui/material';
+// hooks
+
+// types
+import { LinkItemProps } from './types';
+
+// utils
+
+export function LinkItem({ link }: LinkItemProps) {
+    const { href, name, icon, dictionaryField: dictionaryDescription } = link;
+    const { getLabel } = useModuleDictionary();
+
+    return (
+        <Link
+            key={name}
+            variant="body2"
+            component={RouterLink}
+            to={href || '#'}
+            sx={{
+                lineHeight: 2,
+                display: 'flex',
+                alignItems: 'center',
+                color: 'text.primary',
+                '& > div': { display: 'inherit' },
+            }}
+        >
+            {icon && <Box sx={{ mr: 1, '& svg': { width: 20, height: 20 } }}>{icon}</Box>}
+            {dictionaryDescription !== undefined && getLabel
+                ? getLabel(dictionaryDescription)
+                : name}
+        </Link>
+    );
+}

package/src/components/mui_extended/Breadcrumbs/components/LinkItem/types.ts

@@ -0,0 +1,5 @@
+import { TLink } from '../../types';
+
+export type LinkItemProps = {
+    link: TLink;
+};

package/src/components/mui_extended/Breadcrumbs/index.tsx

@@ -0,0 +1,86 @@
+// react
+import { useMemo } from 'react';
+//m4l
+import { useModuleDictionary } from '@m4l/core';
+// @mui
+import { Box, Typography, Breadcrumbs as MUIBreadcrumbs } from '@mui/material';
+
+// sub components
+import { LinkItem } from './components/LinkItem';
+// hooks
+
+// types
+import type { BreadcrumbsProps } from './types';
+
+// utils
+
+// ----------------------------------------------------------------------
+
+export function Breadcrumbs(props: BreadcrumbsProps) {
+    const { links, activeLast = false, ...other } = props;
+
+    const { getLabel } = useModuleDictionary();
+
+    const currentLink = useMemo(() => {
+        if (links.length === 0) return '';
+
+        const { dictionaryField } = links[links.length - 1];
+
+        return getLabel(dictionaryField);
+
+        // return links[links.length - 1].name;
+    }, [getLabel, links]);
+
+    const listDefault = useMemo(
+        () => links.map(link => <LinkItem key={link.name} link={link} />),
+        [links],
+    );
+
+    const listActiveLast = useMemo(
+        () =>
+            links.map(link =>
+                link.name !== currentLink ? (
+                    <LinkItem key={link.name} link={link} />
+                ) : (
+                    <Typography
+                        key={link.name}
+                        variant="body2"
+                        sx={{
+                            maxWidth: 260,
+                            overflow: 'hidden',
+                            whiteSpace: 'nowrap',
+                            color: 'text.disabled',
+                            textOverflow: 'ellipsis',
+                        }}
+                    >
+                        {currentLink}
+                    </Typography>
+                ),
+            ),
+        [currentLink, links],
+    );
+
+    return (
+        <MUIBreadcrumbs
+            id="MUIBreadcrumbs"
+            separator={
+                <Box
+                    component="span"
+                    sx={{
+                        width: 4,
+                        height: 4,
+                        mx: 0.5,
+                        borderRadius: '50%',
+                        bgcolor: 'text.disabled',
+                    }}
+                />
+            }
+            {...other}
+        >
+            {activeLast ? listDefault : listActiveLast}
+        </MUIBreadcrumbs>
+    );
+}
+
+// ----------------------------------------------------------------------
+export default Breadcrumbs;

package/src/components/mui_extended/Breadcrumbs/types.ts

@@ -0,0 +1,14 @@
+import { BreadcrumbsProps as MUIBreadcrumbsProps } from '@mui/material';
+import { ReactElement } from 'react';
+
+export type TLink = {
+    href?: string;
+    name: string;
+    dictionaryField: string;
+    icon?: ReactElement;
+};
+
+export interface BreadcrumbsProps extends MUIBreadcrumbsProps {
+    links: TLink[];
+    activeLast?: boolean;
+}