@m4l/components 0.1.35 → 0.1.36

package/package.json

@@ -1,7 +1,20 @@
 {
   "name": "@m4l/components",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "license": "UNLICENSED",
+  "scripts": {
+    "typescript": "tsc",
+    "build:package": "node ../../scripts/buildpackage.js",
+    "build": "tsc && vite build && yarn build:package",
+    "build:monorepo": "tsc && vite build && yarn build:package",
+    "release:monorepo": "yarn build && npm publish ./dist",
+    "lint": "npx eslint src",
+    "lint:fix": "npm run lint -- --fix",
+    "prettier": "npx prettier src --check",
+    "prettier:fix": "npm run prettier -- --write",
+    "format": "npm run prettier:fix && npm run lint:fix",
+    "coverage": "vitest run --coverage"
+  },
   "dependencies": {
     "@hookform/resolvers": "^2.9.10",
     "@m4l/core": "*",
@@ -29,20 +42,73 @@
     "react-router-dom": "6.3.0",
     "yup": "^0.32.11"
   },
+  "devDependencies": {
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@mui/lab": "^5.0.0-alpha.89",
+    "@mui/material": "^5.10.4",
+    "@mui/system": "^5.10.4",
+    "@mui/x-date-pickers": "^5.0.0-beta.3",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.1",
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^16.7.10",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/react-lazy-load-image-component": "^1.5.2",
+    "@types/react-resizable": "^3.0.1",
+    "@types/react-splitter-layout": "^3.0.2",
+    "@typescript-eslint/eslint-plugin": "5.27.1",
+    "@typescript-eslint/parser": "5.27.1",
+    "@vitejs/plugin-react": "1.3.2",
+    "base-64": "^1.0.0",
+    "clsx": "^1.2.1",
+    "eslint": "8.17.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-import-resolver-alias": "1.1.2",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.30.0",
+    "eslint-plugin-react-hooks": "4.5.0",
+    "eslint-plugin-unused-imports": "2.0.0",
+    "framer-motion": "^6.5.0",
+    "lodash": "^4.17.21",
+    "nprogress": "^0.2.0",
+    "prettier": "2.6.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.0.0",
+    "react-data-grid": "7.0.0-beta.13",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.0.0",
+    "react-draggable": "^4.4.5",
+    "react-dropzone": "^14.2.2",
+    "react-intersection-observer": "^9.4.0",
+    "react-json-view": "^1.21.3",
+    "react-resizable": "^3.0.4",
+    "react-splitter-layout": "^4.0.0",
+    "rollup": "2.79.0",
+    "typescript": "4.6.3",
+    "vite": "3.1.0",
+    "vite-plugin-dts": "1.2.0",
+    "vitest": "^0.23.4",
+    "yup": "^0.32.11"
+  },
   "files": [
     "*"
   ],
   "source": "src/index.ts",
-  "main": "./index.js",
-  "module": "./index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "type": "module",
-  "types": "./index.d.ts",
+  "types": "./src/index.ts",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
   "engines": {
     "node": ">=12.0.0"
-  },
-  "private": false
-}
+  }
+}

package/src/@types/index.ts

@@ -0,0 +1,46 @@
+import { EmitEvents } from '@m4l/core';
+import { NewWindow } from '../components';
+
+declare module '@m4l/core' {
+    interface EmmitEventsGuard {
+        [EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW]: NewWindow;
+    }
+}
+
+declare module '@mui/material/styles/createPalette' {
+    interface TypeBackground {
+        neutral: string;
+        autofill: string;
+        header: string;
+    }
+    interface SimplePaletteColorOptions {
+        lighter?: string;
+        darker?: string;
+        LightSelected?: string;
+        LightSelectedHover?: string;
+        DarkSelected?: string;
+        DarkSelectedHover?: string;
+    }
+    interface PaletteColor {
+        lighter?: string;
+        darker?: string;
+        LightSelected?: string;
+        LightSelectedHover?: string;
+        DarkSelected?: string;
+        DarkSelectedHover?: string;
+    }
+}
+
+declare module '@mui/material' {
+    interface Color {
+        0: string;
+        500_8: string;
+        500_12: string;
+        500_16: string;
+        500_24: string;
+        500_32: string;
+        500_48: string;
+        500_56: string;
+        500_80: string;
+    }
+}

package/src/assets/Logo.tsx

@@ -0,0 +1,87 @@
+import { Link as RouterLink } from 'react-router-dom';
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+interface Props extends BoxProps {
+    disabledLink?: boolean;
+}
+
+export function Logo({ disabledLink = false, sx }: Props) {
+    const theme = useTheme();
+    const PRIMARY_LIGHT = theme.palette.primary.light;
+    const PRIMARY_MAIN = theme.palette.primary.main;
+    const PRIMARY_DARK = theme.palette.primary.dark;
+
+    const logo = (
+        <Box sx={{ width: 40, height: 40, ...sx }}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="100%"
+                height="100%"
+                viewBox="0 0 512 512"
+            >
+                <defs>
+                    <linearGradient id="BG1" x1="100%" x2="50%" y1="9.946%" y2="50%">
+                        <stop offset="0%" stopColor={PRIMARY_DARK} />
+                        <stop offset="100%" stopColor={PRIMARY_MAIN} />
+                    </linearGradient>
+                    <linearGradient id="BG2" x1="50%" x2="50%" y1="0%" y2="100%">
+                        <stop offset="0%" stopColor={PRIMARY_LIGHT} />
+                        <stop offset="100%" stopColor={PRIMARY_MAIN} />
+                    </linearGradient>
+                    <linearGradient id="BG3" x1="50%" x2="50%" y1="0%" y2="100%">
+                        <stop offset="0%" stopColor={PRIMARY_LIGHT} />
+                        <stop offset="100%" stopColor={PRIMARY_MAIN} />
+                    </linearGradient>
+                </defs>
+                <g fillRule="evenodd" clipRule="evenodd">
+                    <path fill="url(#BG1)" d="m1.9 136.9 208.3 120.3v240.5L1.9 377.5z" />
+                    <path fill="url(#BG2)" d="m226.8 257.2 208.5-120.3v240.6L226.8 497.8z" />
+                    <path fill="url(#BG3)" d="M218.6 242.8 10.2 122.5 218.6 2.2 427 122.5z" />
+                </g>
+            </svg>
+            {/* <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512">
+        <defs>
+          <linearGradient id="BG1" x1="100%" x2="50%" y1="9.946%" y2="50%">
+            <stop offset="0%" stopColor={PRIMARY_DARK} />
+            <stop offset="100%" stopColor={PRIMARY_MAIN} />
+          </linearGradient>
+          <linearGradient id="BG2" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stopColor={PRIMARY_LIGHT} />
+            <stop offset="100%" stopColor={PRIMARY_MAIN} />
+          </linearGradient>
+          <linearGradient id="BG3" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stopColor={PRIMARY_LIGHT} />
+            <stop offset="100%" stopColor={PRIMARY_MAIN} />
+          </linearGradient>
+        </defs>
+        <g fill={PRIMARY_MAIN} fillRule="evenodd" stroke="none" strokeWidth="1">
+          <path
+            fill="url(#BG1)"
+            d="M183.168 285.573l-2.918 5.298-2.973 5.363-2.846 5.095-2.274 4.043-2.186 3.857-2.506 4.383-1.6 2.774-2.294 3.939-1.099 1.869-1.416 2.388-1.025 1.713-1.317 2.18-.95 1.558-1.514 2.447-.866 1.38-.833 1.312-.802 1.246-.77 1.18-.739 1.111-.935 1.38-.664.956-.425.6-.41.572-.59.8-.376.497-.537.69-.171.214c-10.76 13.37-22.496 23.493-36.93 29.334-30.346 14.262-68.07 14.929-97.202-2.704l72.347-124.682 2.8-1.72c49.257-29.326 73.08 1.117 94.02 40.927z"
+          />
+          <path
+            fill="url(#BG2)"
+            d="M444.31 229.726c-46.27-80.956-94.1-157.228-149.043-45.344-7.516 14.384-12.995 42.337-25.267 42.337v-.142c-12.272 0-17.75-27.953-25.265-42.337C189.79 72.356 141.96 148.628 95.69 229.584c-3.483 6.106-6.828 11.932-9.69 16.996 106.038-67.127 97.11 135.667 184 137.278V384c86.891-1.611 77.962-204.405 184-137.28-2.86-5.062-6.206-10.888-9.69-16.994"
+          />
+          <path
+            fill="url(#BG3)"
+            d="M450 384c26.509 0 48-21.491 48-48s-21.491-48-48-48-48 21.491-48 48 21.491 48 48 48"
+          />
+        </g>
+      </svg> */}
+        </Box>
+    );
+
+    if (disabledLink) {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return <>{logo}</>;
+    }
+
+    return <RouterLink to="/">{logo}</RouterLink>;
+}
+
+export default Logo;

package/src/components/BadgeStatus.tsx/index.tsx

@@ -0,0 +1,84 @@
+// @mui
+import { Theme, useTheme, styled } from '@mui/material/styles';
+import { BadgeSize, BadgeStatusEnum, Props } from './types';
+
+// ----------------------------------------------------------------------
+
+const RootStyle = styled('span')(
+    ({
+        theme,
+        ownerState,
+    }: {
+        theme: Theme;
+        ownerState: {
+            size: BadgeSize;
+            status: BadgeStatusEnum;
+        };
+    }) => {
+        const { status, size } = ownerState;
+
+        return {
+            width: 10,
+            height: 10,
+            display: 'flex',
+            borderRadius: '50%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            '&:before, &:after': {
+                content: "''",
+                borderRadius: 1,
+                backgroundColor: theme.palette.common.white,
+            },
+
+            ...(size === 'small' && { width: 8, height: 8 }),
+
+            ...(size === 'large' && { width: 12, height: 12 }),
+
+            ...(status === 'offline' && { backgroundColor: 'transparent' }),
+
+            ...(status === 'away' && {
+                backgroundColor: theme.palette.warning.main,
+                '&:before': {
+                    width: 2,
+                    height: 4,
+                    transform: 'translateX(1px) translateY(-1px)',
+                },
+                '&:after': {
+                    width: 2,
+                    height: 4,
+                    transform: 'translateY(1px) rotate(125deg)',
+                },
+            }),
+
+            ...(status === 'busy' && {
+                backgroundColor: theme.palette.error.main,
+                '&:before': { width: 6, height: 2 },
+            }),
+
+            ...(status === 'online' && {
+                backgroundColor: theme.palette.success.main,
+            }),
+
+            ...(status === 'invisible' && {
+                backgroundColor: theme.palette.text.disabled,
+                '&:before': {
+                    width: 6,
+                    height: 6,
+                    borderRadius: '50%',
+                },
+            }),
+
+            ...(status === 'unread' && {
+                backgroundColor: theme.palette.info.main,
+            }),
+        };
+    },
+);
+
+// ----------------------------------------------------------------------
+
+export default function BadgeStatus({ size = 'medium', status = 'offline', sx }: Props) {
+    const theme = useTheme();
+
+    return <RootStyle ownerState={{ status, size }} sx={sx} theme={theme} />;
+}

package/src/components/BadgeStatus.tsx/types.ts

@@ -0,0 +1,17 @@
+import { BoxProps } from '@mui/material';
+
+export type BadgeStatusEnum =
+    | 'away'
+    | 'busy'
+    | 'unread'
+    | 'online'
+    | 'offline'
+    | 'invisible'
+    | string;
+
+export type BadgeSize = 'small' | 'medium' | 'large';
+
+export interface Props extends BoxProps {
+    size?: BadgeSize;
+    status?: BadgeStatusEnum;
+}

package/src/components/CommonActions/components/ActionCancel/index.tsx

@@ -0,0 +1,16 @@
+// @m4l
+import { useModuleDictionary } from '@m4l/core';
+// @mui
+import { ButtonProps } from '@mui/material';
+// internal components
+import { Button } from '../../../mui_extended/Button';
+
+export const ActionCancel = (props: ButtonProps) => {
+    const { getLabel } = useModuleDictionary();
+
+    return (
+        <Button variant="outlined" color="inherit" {...props}>
+            {getLabel('common_actions.cancel')}
+        </Button>
+    );
+};

package/src/components/CommonActions/components/ActionFormCancel/index.tsx

@@ -0,0 +1,63 @@
+// react
+import { useFormContext, useFormState } from 'react-hook-form';
+
+// m4l
+import { useModuleSkeleton, useModuleDictionary } from '@m4l/core';
+// mui
+import { Skeleton } from '@mui/material';
+// internal components
+import { Button } from '../../../mui_extended/Button';
+import { useCallback } from 'react';
+
+// external libraries
+// styled conmponents
+// types
+
+// hooks
+import { useModal } from '../../../../hooks/useModal';
+import { WindowConfirm } from '../../../modal';
+
+// utils
+
+// ----------------------------------------------------------------------
+
+export function ActionFormCancel() {
+    const { getLabel } = useModuleDictionary();
+    const isSkeleton = useModuleSkeleton();
+    const { openModal } = useModal();
+
+    const { control } = useFormContext();
+    const { isDirty } = useFormState({
+        control,
+    });
+
+    const onConfirmQuit = useCallback(() => {}, []);
+
+    const onClickCancel = useCallback(() => {
+        //
+
+        if (isDirty) {
+            openModal({
+                window: (
+                    <WindowConfirm
+                        variant="warning"
+                        title={getLabel('form_provider.confirm_quit_title')}
+                        msg={getLabel('form_provider.confirm_quit_msg')}
+                        onClickIntro={onConfirmQuit}
+                    />
+                ),
+            });
+        } else {
+            onConfirmQuit();
+        }
+    }, [getLabel, isDirty, openModal]);
+
+    if (isSkeleton) {
+        return <Skeleton variant="text" width={57} height={30} />;
+    }
+    return (
+        <Button variant="outlined" color="inherit" onClick={onClickCancel}>
+            {getLabel('common_actions.cancel')}
+        </Button>
+    );
+}

package/src/components/CommonActions/components/ActionFormCancel/types.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from '@mui/material';
+import { NavigateOptions, To } from 'react-router-dom';
+
+export interface ActionFormCancelProps extends ButtonProps {
+    to: To;
+    navigateOptions?: NavigateOptions;
+}

package/src/components/CommonActions/components/ActionFormIntro/index.tsx

@@ -0,0 +1,42 @@
+// react
+import { useFormContext, useFormState } from 'react-hook-form';
+// m4l
+import { useModuleSkeleton, useModuleDictionary } from '@m4l/core';
+// mui
+import { LoadingButton, LoadingButtonProps } from '@mui/lab';
+import { Skeleton } from '@mui/material';
+// internal components
+
+// external libraries
+// styled conmponents
+// types
+// hooks
+// utils
+
+// ----------------------------------------------------------------------
+
+export function ActionFormIntro(props: LoadingButtonProps) {
+    const { getLabel } = useModuleDictionary();
+    const isSkeleton = useModuleSkeleton();
+
+    const { control } = useFormContext();
+
+    const { isSubmitting } = useFormState({
+        control,
+    });
+
+    if (isSkeleton) {
+        return <Skeleton variant="text" width={57} height={30} />;
+    }
+    return (
+        <LoadingButton
+            variant="contained"
+            type="submit"
+            color="primary"
+            loading={isSubmitting}
+            {...props}
+        >
+            {getLabel('common_actions.intro')}
+        </LoadingButton>
+    );
+}

package/src/components/CommonActions/components/ActionIntro/index.tsx

@@ -0,0 +1,16 @@
+// @m4l
+import { useModuleDictionary } from '@m4l/core';
+// @mui
+import { ButtonProps } from '@mui/material';
+// internal components
+import { Button } from '../../../mui_extended/Button';
+
+export const ActionIntro = (props: ButtonProps) => {
+    const { getLabel } = useModuleDictionary();
+
+    return (
+        <Button variant="contained" type="submit" color="primary" {...props}>
+            {getLabel('common_actions.intro')}
+        </Button>
+    );
+};

package/src/components/CommonActions/components/Actions/index.tsx

@@ -0,0 +1,14 @@
+// m4l
+
+// mui
+
+// styled components
+import { WrapperStandarActions } from './styles';
+// types
+import type { CommonActionsProps } from './types';
+
+export const Actions = (props: CommonActionsProps) => {
+    const { children } = props;
+
+    return <WrapperStandarActions id="WrapperStandarActions">{children}</WrapperStandarActions>;
+};

package/src/components/CommonActions/components/Actions/styles.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material/styles';
+
+export const WrapperStandarActions = styled('div')(({ theme }) => ({
+    paddingTop: theme.spacing(3),
+    margin: theme.spacing(0, 1.5),
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    '& > button': {
+        marginLeft: '10px',
+    },
+}));

package/src/components/CommonActions/components/Actions/types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface CommonActionsProps {
+    children: ReactNode;
+}

package/src/components/CommonActions/dictionary.ts

@@ -0,0 +1,14 @@
+import type { Dictionary } from '@m4l/core';
+
+export function getCommonActionsDictionary() {
+    return ['common_actions'];
+}
+
+export const defaultCommonActionsDictionary: Dictionary = {
+    common_actions: {
+        cancel: 'Cancel',
+        intro: 'Intro',
+        confirm_quit_title: 'Confirm',
+        confirm_quit_msg: 'Are your sure exit?',
+    },
+};

package/src/components/CommonActions/index.ts

@@ -0,0 +1,9 @@
+export { Actions } from './components/Actions';
+
+export { ActionCancel } from './components/ActionCancel';
+export { ActionIntro } from './components/ActionIntro';
+
+export { ActionFormCancel } from './components/ActionFormCancel';
+export { ActionFormIntro } from './components/ActionFormIntro';
+
+export * from './dictionary';