@eventlook/sdk 1.4.0

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

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

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

@@ -0,0 +1,25 @@
+// @types
+import { TranHoverType, TranEnterType, TranExitType } from '@utils/types/animate';
+
+// ----------------------------------------------------------------------
+
+export const varTranHover = (props?: TranHoverType) => {
+  const duration = props?.duration || 0.32;
+  const ease = props?.ease || [0.43, 0.13, 0.23, 0.96];
+
+  return { duration, ease };
+};
+
+export const varTranEnter = (props?: TranEnterType) => {
+  const duration = props?.durationIn || 0.64;
+  const ease = props?.easeIn || [0.43, 0.13, 0.23, 0.96];
+
+  return { duration, ease };
+};
+
+export const varTranExit = (props?: TranExitType) => {
+  const duration = props?.durationOut || 0.48;
+  const ease = props?.easeOut || [0.43, 0.13, 0.23, 0.96];
+
+  return { duration, ease };
+};

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

@@ -0,0 +1,129 @@
+// @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/confirm-dialog/ConfirmDialog.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Dialog, Button, DialogTitle, DialogActions, DialogContent } from '@mui/material';
+import { ConfirmDialogProps } from './types';
+import useGlobal from '@hooks/useGlobal.ts';
+
+// ----------------------------------------------------------------------
+
+export default function ConfirmDialog({
+  title,
+  content,
+  action,
+  open,
+  onClose,
+  ...other
+}: ConfirmDialogProps) {
+  const { t } = useGlobal();
+  return (
+    <Dialog fullWidth maxWidth="xs" open={open} onClose={onClose} {...other}>
+      <DialogTitle sx={{ pb: 2 }}>{title}</DialogTitle>
+
+      {content && <DialogContent sx={{ typography: 'body2' }}> {content} </DialogContent>}
+
+      <DialogActions>
+        <Button variant="outlined" color="inherit" onClick={onClose}>
+          {t('cancel')}
+        </Button>
+
+        {action}
+      </DialogActions>
+    </Dialog>
+  );
+}

package/src/components/confirm-dialog/index.ts

@@ -0,0 +1 @@
+export { default } from './ConfirmDialog';

package/src/components/confirm-dialog/types.ts

@@ -0,0 +1,12 @@
+// @mui
+import { DialogProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export interface ConfirmDialogProps extends Omit<DialogProps, 'title' | 'content'> {
+  title: React.ReactNode;
+  content?: React.ReactNode;
+  action: React.ReactNode;
+  open: boolean;
+  onClose: VoidFunction;
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormProvider as Form, UseFormReturn } from 'react-hook-form';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  children: React.ReactNode;
+  methods: UseFormReturn<any>;
+  onSubmit?: VoidFunction;
+};
+
+export default function FormProvider({ children, onSubmit, methods }: Props) {
+  return (
+    <Form {...methods}>
+      <form onSubmit={onSubmit}>{children}</form>
+    </Form>
+  );
+}

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

@@ -0,0 +1,52 @@
+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/RHFCheckbox.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+// @mui
+import {
+  Checkbox,
+  FormLabel,
+  FormGroup,
+  FormControl,
+  FormHelperText,
+  FormControlLabel,
+  FormControlLabelProps,
+} from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+interface RHFCheckboxProps extends Omit<FormControlLabelProps, 'control'> {
+  name: string;
+  helperText?: React.ReactNode;
+}
+
+export function RHFCheckbox({ name, helperText, ...other }: RHFCheckboxProps) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <div>
+          <FormControlLabel control={<Checkbox {...field} checked={field.value} />} {...other} />
+
+          {(!!error || helperText) && (
+            <FormHelperText error={!!error} sx={{ mt: 0 }}>
+              {error ? error?.message : helperText}
+            </FormHelperText>
+          )}
+        </div>
+      )}
+    />
+  );
+}
+
+// ----------------------------------------------------------------------
+
+interface RHFMultiCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label'> {
+  name: string;
+  options: { label: string; value: any }[];
+  row?: boolean;
+  label?: string;
+  spacing?: number;
+  helperText?: React.ReactNode;
+}
+
+export function RHFMultiCheckbox({
+  row,
+  name,
+  label,
+  options,
+  spacing,
+  helperText,
+  ...other
+}: RHFMultiCheckboxProps) {
+  const { control } = useFormContext();
+
+  const getSelected = (selectedItems: string[], item: string) =>
+    selectedItems.includes(item)
+      ? selectedItems.filter((value) => value !== item)
+      : [...selectedItems, item];
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <FormControl component="fieldset">
+          {label && (
+            <FormLabel component="legend" sx={{ typography: 'body2' }}>
+              {label}
+            </FormLabel>
+          )}
+
+          <FormGroup
+            sx={{
+              ...(row && {
+                flexDirection: 'row',
+              }),
+              '& .MuiFormControlLabel-root': {
+                '&:not(:last-of-type)': {
+                  mb: spacing || 0,
+                },
+                ...(row && {
+                  mr: 0,
+                  '&:not(:last-of-type)': {
+                    mr: spacing || 2,
+                  },
+                }),
+              },
+            }}
+          >
+            {options.map((option) => (
+              <FormControlLabel
+                key={option.value}
+                control={
+                  <Checkbox
+                    checked={field.value.includes(option.value)}
+                    onChange={() => field.onChange(getSelected(field.value, option.value))}
+                  />
+                }
+                label={option.label}
+                {...other}
+              />
+            ))}
+          </FormGroup>
+
+          {(!!error || helperText) && (
+            <FormHelperText error={!!error} sx={{ mx: 0 }}>
+              {error ? error?.message : helperText}
+            </FormHelperText>
+          )}
+        </FormControl>
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,94 @@
+import React, { RefObject } from 'react';
+import { 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/RHFDatePicker.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { DatePicker, DatePickerProps } from '@mui/x-date-pickers';
+import { Dayjs } from 'dayjs';
+
+type Props = DatePickerProps<Dayjs> & {
+  name: string;
+  label: string;
+};
+
+export default function RHFDatePicker({ name, label, ...others }: Props) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <DatePicker
+          {...field}
+          label={label}
+          format="DD.MM.YYYY"
+          slotProps={{
+            textField: {
+              error: !!error,
+              helperText: error?.message,
+            },
+          }}
+          sx={{
+            width: '100%',
+          }}
+          {...others}
+        />
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import useGlobal from '@hooks/useGlobal.ts';
+import { MuiTelInputProps } from 'mui-tel-input';
+
+type Props = MuiTelInputProps & {
+  name: string;
+  defaultCountry?: string;
+};
+
+export default function RHFPhone({ name, defaultCountry, helperText, ...other }: Props) {
+  const { control } = useFormContext();
+  const { lang } = useGlobal();
+
+  const [MuiTelInput, setMuiTelInput] = useState<React.ComponentType<MuiTelInputProps> | null>(
+    null
+  );
+
+  useEffect(() => {
+    import('mui-tel-input').then((mod) => {
+      setMuiTelInput(() => mod.MuiTelInput);
+    });
+  }, []);
+
+  if (!MuiTelInput) return null;
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <MuiTelInput
+          {...field}
+          fullWidth
+          value={field.value}
+          error={!!error}
+          helperText={error ? error?.message : helperText}
+          langOfCountryName={lang}
+          lang={lang}
+          defaultCountry={defaultCountry || 'CZ'}
+          continents={['EU']}
+          {...other}
+        />
+      )}
+    />
+  );
+}