@m4l/components 0.1.35 → 0.1.37

package/src/components/animate/DialogAnimate.tsx

@@ -0,0 +1,64 @@
+import { m, AnimatePresence } from 'framer-motion';
+// @mui
+import { Dialog, Box, Paper, DialogProps } from '@mui/material';
+//
+import { varFade } from './variants';
+
+// ----------------------------------------------------------------------
+
+export interface Props extends DialogProps {
+    variants?: Record<string, unknown>;
+    onClose?: VoidFunction;
+}
+
+export default function DialogAnimate({
+    open = false,
+    variants,
+    onClose,
+    children,
+    sx,
+    ...other
+}: Props) {
+    return (
+        <AnimatePresence>
+            {open && (
+                <Dialog
+                    fullWidth
+                    maxWidth="xs"
+                    open={open}
+                    onClose={onClose}
+                    PaperComponent={props => (
+                        <Box
+                            component={m.div}
+                            {...(variants ||
+                                varFade({
+                                    distance: 120,
+                                    durationIn: 0.32,
+                                    durationOut: 0.24,
+                                    easeIn: 'easeInOut',
+                                }).inUp)}
+                            sx={{
+                                width: '100%',
+                                height: '100%',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <Box
+                                onClick={onClose}
+                                sx={{ width: '100%', height: '100%', position: 'fixed' }}
+                            />
+                            <Paper sx={sx} {...props}>
+                                {props.children}
+                            </Paper>
+                        </Box>
+                    )}
+                    {...other}
+                >
+                    {children}
+                </Dialog>
+            )}
+        </AnimatePresence>
+    );
+}

package/src/components/animate/FabButtonAnimate.tsx

@@ -0,0 +1,108 @@
+import { m } from 'framer-motion';
+import { forwardRef, ReactNode } from 'react';
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, Fab, FabProps, SxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+interface Props extends Omit<FabProps, 'color'> {
+    sxWrap?: SxProps;
+    color?:
+        | 'inherit'
+        | 'default'
+        | 'primary'
+        | 'secondary'
+        | 'info'
+        | 'success'
+        | 'warning'
+        | 'error';
+}
+
+const FabButtonAnimate = forwardRef<HTMLButtonElement, Props>(
+    ({ color = 'primary', size = 'large', children, sx, sxWrap, ...other }, ref) => {
+        const theme = useTheme();
+
+        if (
+            color === 'default' ||
+            color === 'inherit' ||
+            color === 'primary' ||
+            color === 'secondary'
+        ) {
+            return (
+                <AnimateWrap size={size} sxWrap={sxWrap}>
+                    <Fab ref={ref} size={size} color={color} sx={sx} {...other}>
+                        {children}
+                    </Fab>
+                </AnimateWrap>
+            );
+        }
+
+        return (
+            <AnimateWrap size={size} sxWrap={sxWrap}>
+                <Fab
+                    ref={ref}
+                    size={size}
+                    sx={{
+                        boxShadow: (theme as any).customShadows[color],
+                        color: theme.palette[color].contrastText,
+                        bgcolor: theme.palette[color].main,
+                        '&:hover': {
+                            bgcolor: theme.palette[color].dark,
+                        },
+                        ...sx,
+                    }}
+                    {...other}
+                >
+                    {children}
+                </Fab>
+            </AnimateWrap>
+        );
+    },
+);
+
+FabButtonAnimate.displayName = 'FabButtonAnimate';
+export default FabButtonAnimate;
+
+// ----------------------------------------------------------------------
+
+type AnimateWrapProp = {
+    children: ReactNode;
+    size: 'small' | 'medium' | 'large';
+    sxWrap?: SxProps;
+};
+
+const varSmall = {
+    hover: { scale: 1.07 },
+    tap: { scale: 0.97 },
+};
+
+const varMedium = {
+    hover: { scale: 1.06 },
+    tap: { scale: 0.98 },
+};
+
+const varLarge = {
+    hover: { scale: 1.05 },
+    tap: { scale: 0.99 },
+};
+
+function AnimateWrap({ size, children, sxWrap }: AnimateWrapProp) {
+    const isSmall = size === 'small';
+    const isLarge = size === 'large';
+
+    return (
+        <Box
+            component={m.div}
+            whileTap="tap"
+            whileHover="hover"
+            variants={(isSmall && varSmall) || (isLarge && varLarge) || varMedium}
+            sx={{
+                display: 'inline-flex',
+                ...sxWrap,
+            }}
+        >
+            {children}
+        </Box>
+    );
+}

package/src/components/animate/IconButtonAnimate/index.tsx

@@ -0,0 +1,54 @@
+import { m } from 'framer-motion';
+import { forwardRef } from 'react';
+// @mui
+import { Box, IconButton, IconButtonProps } from '@mui/material';
+import { AnimateWrapProp } from './types';
+
+const varSmall = {
+    hover: { scale: 1.1 },
+    tap: { scale: 0.95 },
+};
+
+const varMedium = {
+    hover: { scale: 1.09 },
+    tap: { scale: 0.97 },
+};
+
+const varLarge = {
+    hover: { scale: 1.08 },
+    tap: { scale: 0.99 },
+};
+
+// ----------------------------------------------------------------------
+function AnimateWrap({ size, children }: AnimateWrapProp) {
+    const isSmall = size === 'small';
+    const isLarge = size === 'large';
+
+    return (
+        <Box
+            component={m.div}
+            whileTap="tap"
+            whileHover="hover"
+            variants={(isSmall && varSmall) || (isLarge && varLarge) || varMedium}
+            sx={{
+                display: 'inline-flex',
+            }}
+        >
+            {children}
+        </Box>
+    );
+}
+
+export const IconButtonAnimate = forwardRef<HTMLButtonElement, IconButtonProps>(
+    ({ children, size = 'medium', ...other }, ref) => (
+        <AnimateWrap size={size}>
+            <IconButton size={size} ref={ref} {...other}>
+                {children}
+            </IconButton>
+        </AnimateWrap>
+    ),
+);
+
+IconButtonAnimate.displayName = 'IconButtonAnimate';
+
+// ----------------------------------------------------------------------

package/src/components/animate/IconButtonAnimate/types.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+
+export type AnimateWrapProp = {
+    children: ReactNode;
+    size: 'small' | 'medium' | 'large';
+};

package/src/components/animate/LoadingScreen/index.tsx

@@ -0,0 +1,76 @@
+import { m } from 'framer-motion';
+// @mui
+import { alpha } from '@mui/material/styles';
+import { Box } from '@mui/material';
+//
+import Logo from '../../../assets/Logo';
+import { LoadingScreenProps } from './types';
+import { RootStyle } from './styles';
+
+export function LoadingScreen(props: LoadingScreenProps) {
+    const { isDashboard, variant = 'fullpage', ...other } = props;
+    return (
+        <>
+            {/* <ProgressBar /> */}
+
+            {!isDashboard && (
+                <RootStyle variant={variant} {...other}>
+                    <m.div
+                        initial={{ rotateY: 0 }}
+                        animate={{ rotateY: 360 }}
+                        transition={{
+                            duration: 2,
+                            ease: 'easeInOut',
+                            repeatDelay: 1,
+                            repeat: Infinity,
+                        }}
+                    >
+                        <Logo disabledLink sx={{ width: 32, height: 32 }} />
+                    </m.div>
+
+                    <Box
+                        component={m.div}
+                        animate={{
+                            scale: [1.2, 1, 1, 1.2, 1.2],
+                            rotate: [270, 0, 0, 270, 270],
+                            opacity: [0.25, 1, 1, 1, 0.25],
+                            borderRadius: ['25%', '25%', '50%', '50%', '25%'],
+                        }}
+                        transition={{ ease: 'linear', duration: 3.2, repeat: Infinity }}
+                        sx={{
+                            width: 50,
+                            height: 50,
+                            borderRadius: '25%',
+                            position: 'absolute',
+                            border: theme => `solid 3px ${alpha(theme.palette.primary.dark, 0.24)}`,
+                        }}
+                    />
+
+                    <Box
+                        component={m.div}
+                        animate={{
+                            scale: [1, 1.2, 1.2, 1, 1],
+                            rotate: [0, 270, 270, 0, 0],
+                            opacity: [1, 0.25, 0.25, 0.25, 1],
+                            borderRadius: ['25%', '25%', '50%', '50%', '25%'],
+                        }}
+                        transition={{
+                            ease: 'linear',
+                            duration: 3.2,
+                            repeat: Infinity,
+                        }}
+                        sx={{
+                            width: 60,
+                            height: 60,
+                            borderRadius: '25%',
+                            position: 'absolute',
+                            border: theme => `solid 8px ${alpha(theme.palette.primary.dark, 0.24)}`,
+                        }}
+                    />
+                </RootStyle>
+            )}
+        </>
+    );
+}
+
+export default LoadingScreen;

package/src/components/animate/LoadingScreen/styles.tsx

@@ -0,0 +1,21 @@
+import { styled } from '@mui/material';
+import { RootStyleProps } from './types';
+
+export const RootStyle = styled('div', {
+    shouldForwardProp: props => props !== 'variant',
+})<RootStyleProps>(({ theme, variant }) => ({
+    right: 0,
+    bottom: 0,
+    zIndex: 99999,
+    width: '100%',
+    height: '100%',
+    position: 'fixed',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.palette.background.default,
+    ...(variant === 'microfrontend' && {
+        position: 'relative',
+        zIndex: 0,
+    }),
+}));

package/src/components/animate/LoadingScreen/types.ts

@@ -0,0 +1,8 @@
+export type LoadingScreenVariant = 'fullpage' | 'microfrontend';
+
+export type RootStyleProps = Pick<LoadingScreenProps, 'variant'>;
+
+export type LoadingScreenProps = {
+    isDashboard?: boolean;
+    variant?: LoadingScreenVariant;
+};

package/src/components/animate/MotionContainer/index.tsx

@@ -0,0 +1,43 @@
+import { m, MotionProps } from 'framer-motion';
+// @mui
+import { Box, BoxProps } from '@mui/material';
+//
+import { varContainer } from '../variants/container';
+
+// ----------------------------------------------------------------------
+
+type IProps = BoxProps & MotionProps;
+
+export interface Props extends IProps {
+    animate?: boolean;
+    action?: boolean;
+}
+
+export function MotionContainer({ animate, action = false, children, ...other }: Props) {
+    if (action) {
+        return (
+            <Box
+                component={m.div}
+                initial={false}
+                animate={animate ? 'animate' : 'exit'}
+                variants={varContainer()}
+                {...other}
+            >
+                {children}
+            </Box>
+        );
+    }
+
+    return (
+        <Box
+            component={m.div}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            variants={varContainer()}
+            {...other}
+        >
+            {children}
+        </Box>
+    );
+}

package/src/components/animate/MotionInView.tsx

@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+import { m, useAnimation, MotionProps } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+// @mui
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+type Props = BoxProps & MotionProps;
+
+interface MotionInViewProps extends Props {
+    threshold?: number | number[];
+}
+
+export default function MotionInView({
+    children,
+    variants,
+    transition,
+    threshold,
+    ...other
+}: MotionInViewProps) {
+    const controls = useAnimation();
+    const [ref, inView] = useInView({
+        threshold: threshold || 0,
+        triggerOnce: true,
+    });
+
+    useEffect(() => {
+        if (!variants) return;
+        if (inView) {
+            controls.start(Object.keys(variants)[1]);
+        } else {
+            controls.start(Object.keys(variants)[0]);
+        }
+    }, [controls, inView, variants]);
+
+    return (
+        <Box
+            ref={ref}
+            component={m.div}
+            initial={variants ? Object.keys(variants)[0] : false}
+            animate={controls}
+            variants={variants}
+            transition={transition}
+            {...other}
+        >
+            {children}
+        </Box>
+    );
+}

package/src/components/animate/MotionLazyContainer/index.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { LazyMotion } from 'framer-motion';
+
+// ----------------------------------------------------------------------
+
+// eslint-disable-next-line import/extensions
+const loadFeatures = () => import('../features.js' as any).then(res => res.default);
+
+type Props = {
+    children: ReactNode;
+};
+
+export function MotionLazyContainer({ children }: Props) {
+    return (
+        <LazyMotion strict features={loadFeatures}>
+            {children}
+        </LazyMotion>
+    );
+}

package/src/components/animate/PropagateLoader/index.tsx

@@ -0,0 +1,12 @@
+import { useTheme } from '@mui/material';
+import { PropagateLoader as Loader } from 'react-spinners';
+import { WrapperPropageteLoader } from './syles';
+
+export const PropagateLoader = () => {
+    const { palette } = useTheme();
+    return (
+        <WrapperPropageteLoader>
+            <Loader color={palette.primary.main} />
+        </WrapperPropageteLoader>
+    );
+};

package/src/components/animate/PropagateLoader/syles.tsx

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material';
+
+export const WrapperPropageteLoader = styled('div')(({ theme }) => ({
+    right: 0,
+    bottom: 0,
+    zIndex: 99999,
+    width: '100%',
+    height: '100%',
+    position: 'fixed',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: theme.palette.background.default,
+}));

package/src/components/animate/TextAnimate.tsx

@@ -0,0 +1,34 @@
+import { m, MotionProps } from 'framer-motion';
+// @mui
+import { Box, BoxProps } from '@mui/material';
+//
+import { varFade } from './variants';
+
+// ----------------------------------------------------------------------
+
+type Props = BoxProps & MotionProps;
+
+interface TextAnimateProps extends Props {
+    text: string;
+}
+
+export default function TextAnimate({ text, variants, sx, ...other }: TextAnimateProps) {
+    return (
+        <Box
+            component={m.h1}
+            sx={{
+                typography: 'h1',
+                overflow: 'hidden',
+                display: 'inline-flex',
+                ...sx,
+            }}
+            {...other}
+        >
+            {text.split('').map((letter, index) => (
+                <m.span key={index} variants={variants || varFade().inUp}>
+                    {letter}
+                </m.span>
+            ))}
+        </Box>
+    );
+}

package/src/components/animate/features.js

@@ -0,0 +1,3 @@
+import { domMax } from 'framer-motion';
+
+export default domMax;

package/src/components/animate/index.ts

@@ -0,0 +1,15 @@
+// ----------------------------------------------------------------------
+
+export * from './variants';
+
+// export { default as DialogAnimate } from './DialogAnimate';
+// export { default as TextAnimate } from './TextAnimate';
+
+// export { default as FabButtonAnimate } from './FabButtonAnimate';
+export { IconButtonAnimate } from './IconButtonAnimate';
+
+// export { default as MotionInView } from './MotionInView';
+export { MotionContainer } from './MotionContainer';
+export { MotionLazyContainer } from './MotionLazyContainer';
+export { LoadingScreen } from './LoadingScreen';
+export { PropagateLoader } from './PropagateLoader';

package/src/components/animate/type.ts

@@ -0,0 +1,44 @@
+// ----------------------------------------------------------------------
+
+type EaseType =
+    | 'linear'
+    | 'easeIn'
+    | 'easeOut'
+    | 'easeInOut'
+    | 'circIn'
+    | 'circOut'
+    | 'circInOut'
+    | 'backIn'
+    | 'backOut'
+    | 'backInOut'
+    | 'anticipate'
+    | number[];
+
+export type VariantsType = {
+    distance?: number;
+    durationIn?: number;
+    durationOut?: number;
+    easeIn?: EaseType;
+    easeOut?: EaseType;
+};
+
+export type TranHoverType = {
+    duration?: number;
+    ease?: EaseType;
+};
+
+export type TranEnterType = {
+    durationIn?: number;
+    easeIn?: EaseType;
+};
+
+export type TranExitType = {
+    durationOut?: number;
+    easeOut?: EaseType;
+};
+
+export type BackgroundType = {
+    colors?: string[];
+    duration?: number;
+    ease?: EaseType;
+};

package/src/components/animate/variants/actions.ts

@@ -0,0 +1,7 @@
+// ----------------------------------------------------------------------
+
+export const varHover = (scale?: number) => ({
+    hover: {
+        scale: scale || 1.1,
+    },
+});