@eventlook/sdk 1.5.0-beta.4 → 1.5.0-beta.6

package/dist/types/components/hook-form/RHFCodes.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { TextFieldProps } from '@mui/material';
-type Props = TextFieldProps & {
-    keyName: string;
-    inputs: string[];
-};
-export default function RHFCodes({ keyName, inputs, ...other }: Props): React.JSX.Element;
-export {};

package/dist/types/components/hook-form/RHFSlider.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { SliderProps } from '@mui/material';
-type Props = SliderProps & {
-    name: string;
-    helperText?: React.ReactNode;
-};
-export default function RHFSlider({ name, helperText, ...other }: Props): React.JSX.Element;
-export {};

package/dist/types/components/hook-form/RHFSwitch.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { FormControlLabelProps } from '@mui/material';
-interface Props extends Omit<FormControlLabelProps, 'control'> {
-    name: string;
-    helperText?: React.ReactNode;
-}
-export default function RHFSwitch({ name, helperText, ...other }: Props): React.JSX.Element;
-export {};

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

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

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

@@ -1,106 +0,0 @@
-// @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/flip.ts

@@ -1,37 +0,0 @@
-// @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/path.ts

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

@@ -1,28 +0,0 @@
-// @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 }) },
-    },
-  };
-};

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

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

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

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

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

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

package/src/components/hook-form/RHFAutocomplete.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { useFormContext, Controller } from 'react-hook-form';
-import { Autocomplete, AutocompleteProps, TextField } from '@mui/material';
-
-// ----------------------------------------------------------------------
-
-interface Props<
-  T,
-  Multiple extends boolean | undefined,
-  DisableClearable extends boolean | undefined,
-  FreeSolo extends boolean | undefined,
-> extends AutocompleteProps<T, Multiple, DisableClearable, FreeSolo> {
-  name: string;
-  label?: string;
-  helperText?: React.ReactNode;
-}
-
-export default function RHFAutocomplete<
-  T,
-  Multiple extends boolean | undefined,
-  DisableClearable extends boolean | undefined,
-  FreeSolo extends boolean | undefined,
->({
-  name,
-  label,
-  helperText,
-  ...other
-}: Omit<Props<T, Multiple, DisableClearable, FreeSolo>, 'renderInput'>) {
-  const { control, setValue } = useFormContext();
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <Autocomplete
-          {...field}
-          onChange={(event, newValue) => setValue(name, newValue, { shouldValidate: true })}
-          renderInput={(params) => (
-            <TextField
-              label={label}
-              error={!!error}
-              helperText={error ? error?.message : helperText}
-              {...params}
-            />
-          )}
-          {...other}
-        />
-      )}
-    />
-  );
-}

package/src/components/hook-form/RHFCodes.tsx

@@ -1,93 +0,0 @@
-import React, { RefObject, useRef } from 'react';
-// form
-import { useFormContext, Controller } from 'react-hook-form';
-// @mui
-import { Stack, TextField, TextFieldProps } from '@mui/material';
-// hooks
-import useEventListener from '@hooks/useEventListener';
-
-// ----------------------------------------------------------------------
-
-type Props = TextFieldProps & {
-  keyName: string;
-  inputs: string[];
-};
-
-export default function RHFCodes({ keyName = '', inputs = [], ...other }: Props) {
-  const codesRef = useRef<HTMLDivElement | null>(null);
-
-  const { control, setValue } = useFormContext();
-
-  const handlePaste = (event: any) => {
-    let data = event.clipboardData.getData('text');
-
-    data = data.split('');
-
-    inputs.map((input, index) => setValue(input, data[index]));
-
-    event.preventDefault();
-  };
-
-  const handleChangeWithNextField = (
-    event: React.ChangeEvent<HTMLInputElement>,
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void
-  ) => {
-    const { maxLength, value, name } = event.target;
-
-    const fieldIndex = name.replace(keyName, '');
-
-    const fieldIntIndex = Number(fieldIndex);
-
-    const nextfield: HTMLElement | null = document.querySelector(
-      `input[name=${keyName}${fieldIntIndex + 1}]`
-    );
-
-    if (value.length > maxLength) {
-      event.target.value = value[0];
-    }
-
-    if (value.length >= maxLength && fieldIntIndex < 6 && nextfield !== null) {
-      (nextfield as HTMLElement).focus();
-    }
-
-    handleChange(event);
-  };
-
-  useEventListener('paste', handlePaste, codesRef as RefObject<HTMLElement>);
-
-  return (
-    <Stack direction="row" spacing={2} justifyContent="center" ref={codesRef}>
-      {inputs.map((name, index) => (
-        <Controller
-          key={name}
-          name={`${keyName}${index + 1}`}
-          control={control}
-          render={({ field, fieldState: { error } }) => (
-            <TextField
-              {...field}
-              error={!!error}
-              autoFocus={index === 0}
-              placeholder="-"
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                handleChangeWithNextField(event, field.onChange);
-              }}
-              onFocus={(event) => event.currentTarget.select()}
-              InputProps={{
-                sx: {
-                  width: { xs: 36, sm: 56 },
-                  height: { xs: 36, sm: 56 },
-                  '& input': { p: 0, textAlign: 'center' },
-                },
-              }}
-              inputProps={{
-                maxLength: 1,
-                type: 'number',
-              }}
-              {...other}
-            />
-          )}
-        />
-      ))}
-    </Stack>
-  );
-}

package/src/components/hook-form/RHFSlider.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { useFormContext, Controller } from 'react-hook-form';
-import { Slider, SliderProps, FormHelperText } from '@mui/material';
-
-// ----------------------------------------------------------------------
-
-type Props = SliderProps & {
-  name: string;
-  helperText?: React.ReactNode;
-};
-
-export default function RHFSlider({ name, helperText, ...other }: Props) {
-  const { control } = useFormContext();
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <div>
-          <Slider {...field} valueLabelDisplay="auto" {...other} />
-
-          {(!!error || helperText) && (
-            <FormHelperText error={!!error}>{error ? error?.message : helperText}</FormHelperText>
-          )}
-        </div>
-      )}
-    />
-  );
-}

package/src/components/hook-form/RHFSwitch.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { useFormContext, Controller } from 'react-hook-form';
-import { Switch, FormControlLabel, FormControlLabelProps, FormHelperText } from '@mui/material';
-
-// ----------------------------------------------------------------------
-
-interface Props extends Omit<FormControlLabelProps, 'control'> {
-  name: string;
-  helperText?: React.ReactNode;
-}
-
-export default function RHFSwitch({ name, helperText, ...other }: Props) {
-  const { control } = useFormContext();
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <div>
-          <FormControlLabel control={<Switch {...field} checked={field.value} />} {...other} />
-
-          {(!!error || helperText) && (
-            <FormHelperText error={!!error}>{error ? error?.message : helperText}</FormHelperText>
-          )}
-        </div>
-      )}
-    />
-  );
-}