@eventlook/sdk 1.4.0

package/src/components/animate/DialogAnimate.tsx

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { m } from 'framer-motion';
+import { forwardRef, ReactNode } from 'react';
+import { Box, IconButton, IconButtonProps, SxProps } from '@mui/material';
+
+interface Props extends IconButtonProps {
+  sxWrap?: SxProps;
+}
+
+const IconButtonAnimate = forwardRef<HTMLButtonElement, Props>(
+  ({ children, size = 'medium', sxWrap, ...other }, ref) => (
+    <AnimateWrap size={size} sxWrap={sxWrap}>
+      <IconButton size={size} ref={ref} {...other}>
+        {children}
+      </IconButton>
+    </AnimateWrap>
+  )
+);
+
+export default IconButtonAnimate;
+
+// ----------------------------------------------------------------------
+
+type AnimateWrapProp = {
+  children: ReactNode;
+  size: 'small' | 'medium' | 'large';
+  sxWrap?: SxProps;
+};
+
+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, 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/MotionContainer.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { m, MotionProps } from 'framer-motion';
+import { Box, BoxProps } from '@mui/material';
+import { varContainer } from './variants';
+
+type IProps = BoxProps & MotionProps;
+
+export interface Props extends IProps {
+  animate?: boolean;
+  action?: boolean;
+}
+
+export default 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/MotionLazyContainer.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import { LazyMotion } from 'framer-motion';
+
+// @ts-ignore
+const loadFeatures = () => import('./features.js').then((res) => res.default);
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function MotionLazyContainer({ children }: Props) {
+  return (
+    <LazyMotion strict features={loadFeatures}>
+      {children}
+    </LazyMotion>
+  );
+}

package/src/components/animate/MotionViewport.tsx

@@ -0,0 +1,37 @@
+import { m, MotionProps } from 'framer-motion';
+import React, { ReactNode } from 'react';
+import { Box, BoxProps } from '@mui/material';
+import useResponsive from '@hooks/useResponsive';
+import { varContainer } from '@components/animate/variants';
+
+type IProps = BoxProps & MotionProps;
+
+interface Props extends IProps {
+  children: ReactNode;
+  disableAnimatedMobile?: boolean;
+}
+
+export default function MotionViewport({
+  children,
+  disableAnimatedMobile = true,
+  ...other
+}: Props) {
+  const isDesktop = useResponsive('up', 'sm');
+
+  if (!isDesktop && disableAnimatedMobile) {
+    return <Box {...other}>{children}</Box>;
+  }
+
+  return (
+    <Box
+      component={m.div}
+      initial="initial"
+      whileInView="animate"
+      viewport={{ once: true, amount: 0.5 }}
+      variants={varContainer()}
+      {...other}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components/animate/TextAnimate.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { m, MotionProps } from 'framer-motion';
+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,2 @@
+import { domMax } from 'framer-motion';
+export default domMax;

package/src/components/animate/index.ts

@@ -0,0 +1,12 @@
+// ----------------------------------------------------------------------
+
+export * from './variants';
+
+export { default as DialogAnimate } from './DialogAnimate';
+export { default as TextAnimate } from './TextAnimate';
+
+export { default as IconButtonAnimate } from './IconButtonAnimate';
+
+export { default as MotionViewport } from './MotionViewport';
+export { default as MotionContainer } from './MotionContainer';
+export { default as MotionLazyContainer } from './MotionLazyContainer';

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

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

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

@@ -0,0 +1,106 @@
+// @types
+import { BackgroundType } from '@utils/types/animate';
+
+// ----------------------------------------------------------------------
+
+export const varBgColor = (props?: BackgroundType) => {
+  const colors = props?.colors || ['#19dcea', '#b22cff'];
+  const duration = props?.duration || 5;
+  const ease = props?.ease || 'linear';
+
+  return {
+    animate: {
+      background: colors,
+      transition: { duration, ease },
+    },
+  };
+};
+
+// ----------------------------------------------------------------------
+
+export const varBgKenburns = (props?: BackgroundType) => {
+  const duration = props?.duration || 5;
+  const ease = props?.ease || 'easeOut';
+
+  return {
+    top: {
+      animate: {
+        scale: [1, 1.25],
+        y: [0, -15],
+        transformOrigin: ['50% 16%', 'top'],
+        transition: { duration, ease },
+      },
+    },
+    right: {
+      animate: {
+        scale: [1, 1.25],
+        x: [0, 20],
+        y: [0, -15],
+        transformOrigin: ['84% 50%', 'right'],
+        transition: { duration, ease },
+      },
+    },
+    bottom: {
+      animate: {
+        scale: [1, 1.25],
+        y: [0, 15],
+        transformOrigin: ['50% 84%', 'bottom'],
+        transition: { duration, ease },
+      },
+    },
+    left: {
+      animate: {
+        scale: [1, 1.25],
+        x: [0, -20],
+        y: [0, 15],
+        transformOrigin: ['16% 50%', 'left'],
+        transition: { duration, ease },
+      },
+    },
+  };
+};
+
+// ----------------------------------------------------------------------
+
+export const varBgPan = (props?: BackgroundType) => {
+  const colors = props?.colors || ['#ee7752', '#e73c7e', '#23a6d5', '#23d5ab'];
+  const duration = props?.duration || 5;
+  const ease = props?.ease || 'linear';
+
+  const gradient = (deg: number) => `linear-gradient(${deg}deg, ${colors})`;
+
+  return {
+    top: {
+      animate: {
+        backgroundImage: [gradient(0), gradient(0)],
+        backgroundPosition: ['center 99%', 'center 1%'],
+        backgroundSize: ['100% 600%', '100% 600%'],
+        transition: { duration, ease },
+      },
+    },
+    right: {
+      animate: {
+        backgroundPosition: ['1% center', '99% center'],
+        backgroundImage: [gradient(270), gradient(270)],
+        backgroundSize: ['600% 100%', '600% 100%'],
+        transition: { duration, ease },
+      },
+    },
+    bottom: {
+      animate: {
+        backgroundImage: [gradient(0), gradient(0)],
+        backgroundPosition: ['center 1%', 'center 99%'],
+        backgroundSize: ['100% 600%', '100% 600%'],
+        transition: { duration, ease },
+      },
+    },
+    left: {
+      animate: {
+        backgroundPosition: ['99% center', '1% center'],
+        backgroundImage: [gradient(270), gradient(270)],
+        backgroundSize: ['600% 100%', '600% 100%'],
+        transition: { duration, ease },
+      },
+    },
+  };
+};

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

@@ -0,0 +1,98 @@
+// @types
+import { VariantsType } from '@utils/types/animate';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varBounce = (props?: VariantsType) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    // IN
+    in: {
+      animate: {
+        scale: [0.3, 1.1, 0.9, 1.03, 0.97, 1],
+        opacity: [0, 1, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] },
+    },
+    inUp: {
+      animate: {
+        y: [720, -24, 12, -4, 0],
+        scaleY: [4, 0.9, 0.95, 0.985, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: { ...varTranEnter({ durationIn, easeIn }) },
+      },
+      exit: {
+        y: [12, -24, 720],
+        scaleY: [0.985, 0.9, 3],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inDown: {
+      animate: {
+        y: [-720, 24, -12, 4, 0],
+        scaleY: [4, 0.9, 0.95, 0.985, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        y: [-12, 24, -720],
+        scaleY: [0.985, 0.9, 3],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inLeft: {
+      animate: {
+        x: [-720, 24, -12, 4, 0],
+        scaleX: [3, 1, 0.98, 0.995, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        x: [0, 24, -720],
+        scaleX: [1, 0.9, 2],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inRight: {
+      animate: {
+        x: [720, -24, 12, -4, 0],
+        scaleX: [3, 1, 0.98, 0.995, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        x: [0, -24, 720],
+        scaleX: [1, 0.9, 2],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+
+    // OUT
+    out: {
+      animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] },
+    },
+    outUp: {
+      animate: { y: [-12, 24, -720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] },
+    },
+    outDown: {
+      animate: { y: [12, -24, 720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] },
+    },
+    outLeft: {
+      animate: { x: [0, 24, -720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] },
+    },
+    outRight: {
+      animate: { x: [0, -24, 720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] },
+    },
+  };
+};

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

@@ -0,0 +1,28 @@
+// ----------------------------------------------------------------------
+
+export type Props = {
+  staggerIn?: number;
+  delayIn?: number;
+  staggerOut?: number;
+};
+
+export const varContainer = (props?: Props) => {
+  const staggerIn = props?.staggerIn || 0.05;
+  const delayIn = props?.staggerIn || 0.05;
+  const staggerOut = props?.staggerIn || 0.05;
+
+  return {
+    animate: {
+      transition: {
+        staggerChildren: staggerIn,
+        delayChildren: delayIn,
+      },
+    },
+    exit: {
+      transition: {
+        staggerChildren: staggerOut,
+        staggerDirection: -1,
+      },
+    },
+  };
+};

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

@@ -0,0 +1,70 @@
+// @types
+import { VariantsType } from '@utils/types/animate';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varFade = (props?: VariantsType) => {
+  const distance = props?.distance || 120;
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    // IN
+    in: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1, transition: varTranEnter },
+      exit: { opacity: 0, transition: varTranExit },
+    },
+    inUp: {
+      initial: { y: distance, opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inDown: {
+      initial: { y: -distance, opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inLeft: {
+      initial: { x: -distance, opacity: 0 },
+      animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inRight: {
+      initial: { x: distance, opacity: 0 },
+      animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+
+    // OUT
+    out: {
+      initial: { opacity: 1 },
+      animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outUp: {
+      initial: { y: 0, opacity: 1 },
+      animate: { y: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outDown: {
+      initial: { y: 0, opacity: 1 },
+      animate: { y: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outLeft: {
+      initial: { x: 0, opacity: 1 },
+      animate: { x: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outRight: {
+      initial: { x: 0, opacity: 1 },
+      animate: { x: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+    },
+  };
+};

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

@@ -0,0 +1,37 @@
+// @types
+import { VariantsType } from '@utils/types/animate';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varFlip = (props?: VariantsType) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    // IN
+    inX: {
+      initial: { rotateX: -180, opacity: 0 },
+      animate: { rotateX: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { rotateX: -180, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inY: {
+      initial: { rotateY: -180, opacity: 0 },
+      animate: { rotateY: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { rotateY: -180, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+
+    // OUT
+    outX: {
+      initial: { rotateX: 0, opacity: 1 },
+      animate: { rotateX: 70, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outY: {
+      initial: { rotateY: 0, opacity: 1 },
+      animate: { rotateY: 70, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+  };
+};

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

@@ -0,0 +1,12 @@
+export * from './path';
+export * from './fade';
+export * from './zoom';
+export * from './flip';
+export * from './slide';
+export * from './scale';
+export * from './bounce';
+export * from './rotate';
+export * from './actions';
+export * from './container';
+export * from './transition';
+export * from './background';

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

@@ -0,0 +1,14 @@
+// ----------------------------------------------------------------------
+
+export const TRANSITION = {
+  duration: 2,
+  ease: [0.43, 0.13, 0.23, 0.96],
+};
+
+export const varPath = {
+  animate: {
+    fillOpacity: [0, 0, 1],
+    pathLength: [1, 0.4, 0],
+    transition: TRANSITION,
+  },
+};

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

@@ -0,0 +1,28 @@
+// @types
+import { VariantsType } from '@utils/types/animate';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varRotate = (props?: VariantsType) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    // IN
+    in: {
+      initial: { opacity: 0, rotate: -360 },
+      animate: { opacity: 1, rotate: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { opacity: 0, rotate: -360, transition: varTranExit({ durationOut, easeOut }) },
+    },
+
+    // OUT
+    out: {
+      initial: { opacity: 1, rotate: 0 },
+      animate: { opacity: 0, rotate: -360, transition: varTranExit({ durationOut, easeOut }) },
+    },
+  };
+};