@codezee/sixtify-brahma 0.2.2 → 0.2.3

package/packages/shared-components/src/FormFields/DateTimePicker/DateTimePicker.tsx

@@ -1,245 +0,0 @@
-import { Box, InputLabel, Stack, Tooltip, useTheme } from "@mui/material";
-import type { DateTimePickerProps as MuiDateTimePickerProps } from "@mui/x-date-pickers/DateTimePicker";
-import { DateTimePicker as MuiDateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
-import type { PickerValidDate } from "@mui/x-date-pickers/models";
-import { DateTime } from "luxon";
-import { type ReactElement, useState } from "react";
-import type {
-  FieldError,
-  FieldValues,
-  Path,
-  PathValue,
-  UseControllerProps,
-} from "react-hook-form";
-import { useController } from "react-hook-form";
-import { Skeleton } from "./Skeleton";
-import { CalendarAction } from "../../Actions";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-
-export type DateTimePickerProps<P extends FieldValues> = UseControllerProps<P> &
-  MuiDateTimePickerProps<PickerValidDate> &
-  Partial<{
-    label: string;
-    required: boolean;
-    disabled: boolean;
-    format: string;
-    error: boolean;
-    helperText: string;
-    loading: boolean;
-    clearable?: boolean;
-    helperIcon?: ReactElement;
-    toolTipText?: string;
-
-    setError: (
-      name: keyof P,
-      error: FieldError | { type: string; message?: string }
-    ) => void;
-  }>;
-
-export const LeftArrowIcon: React.FC = () => {
-  const theme = useTheme();
-
-  const { iron } = theme.palette.app.color;
-
-  return (
-    <ChevronLeftIcon
-      sx={{
-        border: `1px solid ${iron[800]}`,
-        borderRadius: "5px",
-        p: "4px",
-      }}
-    />
-  );
-};
-
-export const RightArrowIcon: React.FC = () => {
-  const theme = useTheme();
-
-  const { iron } = theme.palette.app.color;
-
-  return (
-    <ChevronRightIcon
-      sx={{
-        border: `1px solid ${iron[800]}`,
-        borderRadius: "5px",
-        p: "4px",
-      }}
-    />
-  );
-};
-
-export function DateTimePicker<P extends FieldValues>({
-  control,
-  defaultValue,
-  disabled = false,
-  label,
-  readOnly = false,
-  name,
-  error = false,
-  helperText,
-  loading = false,
-  required = false,
-  clearable = true,
-  rules,
-  format = "dd-MM-yyyy HH:mm",
-  helperIcon,
-  toolTipText,
-  ...restProps
-}: DateTimePickerProps<P>) {
-  const {
-    field: { value, onChange, ...restField },
-  } = useController({ name, control, defaultValue, rules });
-
-  const [open, setOpen] = useState(false);
-
-  if (error && value && typeof value === "object") {
-    helperText = "Invalid time";
-  }
-
-  const theme = useTheme();
-
-  const { iron, butterflyBlue, mirage } = theme.palette.app.color;
-
-  const pickerValue = value
-    ? // eslint-disable-next-line sonarjs/no-nested-conditional
-      (DateTime.fromISO(value) as PathValue<P, Path<P> & (string | undefined)>)
-    : null;
-
-  if (loading) {
-    return (
-      <Box sx={{ width: "350px" }}>
-        <Skeleton label={label} />
-      </Box>
-    );
-  }
-
-  const EmptyIcon = () => null;
-
-  return (
-    <Stack gap="10px">
-      {label && (
-        <Stack alignItems="center" flexDirection="row" gap="5px">
-          <InputLabel required={required} disabled={disabled}>
-            {label}
-          </InputLabel>
-          {helperIcon && toolTipText && (
-            <Tooltip title={toolTipText} placement="bottom">
-              {helperIcon}
-            </Tooltip>
-          )}
-        </Stack>
-      )}
-      <MuiDateTimePicker<DateTime>
-        {...restField}
-        {...restProps}
-        disabled={disabled}
-        readOnly={readOnly}
-        open={open}
-        ampm={false}
-        value={pickerValue}
-        format={format}
-        onOpen={() => setOpen(true)}
-        onClose={() => setOpen(false)}
-        slotProps={{
-          field: {
-            clearable,
-            onClear: () => onChange(null),
-          },
-          textField: {
-            disabled,
-            helperText,
-            error,
-            InputProps: {
-              endAdornment: <CalendarAction onClick={() => setOpen(true)} />,
-              sx: {
-                "& .MuiInputAdornment-root": {
-                  width: "30px",
-                },
-              },
-            },
-          },
-          popper: {
-            sx: {
-              "& .MuiList-padding": {
-                padding: "10px",
-              },
-              "& .MuiMultiSectionDigitalClockSection-item": {
-                padding: "4px",
-              },
-              "& .MuiMultiSectionDigitalClockSection-item.Mui-selected": {
-                backgroundColor: butterflyBlue[900],
-                borderRadius: "5px",
-              },
-              "& .MuiMultiSectionDigitalClockSection-item.Mui-selected:hover": {
-                backgroundColor: butterflyBlue[900],
-                borderRadius: "5px",
-              },
-              "& .Mui-selected:hover": {
-                backgroundColor: butterflyBlue[900],
-                borderRadius: "5px",
-              },
-              "& .MuiMultiSectionDigitalClockSection-item.Mui-selected:focus-visible":
-                {
-                  backgroundColor: butterflyBlue[900],
-                  borderRadius: "5px",
-                },
-              "& .Mui-selected:focus-visible": {
-                backgroundColor: butterflyBlue[900],
-                borderRadius: "5px",
-              },
-            },
-          },
-          day: {
-            sx: {
-              "&.MuiPickersDay-root": {
-                borderRadius: "5px",
-                borderColor: butterflyBlue[900],
-                fontWeight: 500,
-                color: mirage[900],
-              },
-              "&.MuiPickersDay-root.Mui-selected": {
-                backgroundColor: butterflyBlue[900],
-                color: iron[600],
-              },
-              "&.MuiPickersDay-today": {
-                color: butterflyBlue[900],
-                backgroundColor: iron[600],
-              },
-              ":focus": {
-                backgroundColor: "transparent",
-              },
-            },
-          },
-          calendarHeader: {
-            sx: {
-              "& .MuiPickersCalendarHeader-label": {
-                fontWeight: "bold",
-              },
-            },
-          },
-          yearButton: {
-            sx: {
-              "&.MuiPickersYear-yearButton.Mui-selected": {
-                backgroundColor: butterflyBlue[900],
-              },
-            },
-          },
-        }}
-        slots={{
-          leftArrowIcon: LeftArrowIcon,
-          rightArrowIcon: RightArrowIcon,
-          switchViewIcon: EmptyIcon,
-        }}
-        shouldDisableTime={() => !pickerValue}
-        onChange={(value) => {
-          if (value?.isValid) {
-            return onChange(value.toUTC().toISO());
-          }
-
-          onChange(value);
-        }}
-      />
-    </Stack>
-  );
-}

package/packages/shared-components/src/FormFields/DateTimePicker/Skeleton.tsx

@@ -1,24 +0,0 @@
-import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
-
-export const Skeleton = ({ label }: { label?: string }) => {
-  return (
-    <Stack gap="10px" flex={1}>
-      {label && (
-        <MuiSkeleton
-          width={120}
-          height="23px"
-          sx={{
-            transform: "scale(1)",
-          }}
-        />
-      )}
-      <MuiSkeleton
-        height="40px"
-        width="100%"
-        sx={{
-          transform: "scale(1)",
-        }}
-      />
-    </Stack>
-  );
-};

package/packages/shared-components/src/FormFields/DateTimePicker/index.ts

@@ -1 +0,0 @@
-export * from "./DateTimePicker";

package/packages/shared-components/src/FormFields/FileUpload/FileUpload.styled.tsx

@@ -1,22 +0,0 @@
-import { Box, styled } from "@mui/material";
-
-export type FileUploadContainerProps = {
-  error?: boolean;
-};
-
-export const FileUploadContainer = styled(Box)<FileUploadContainerProps>(
-  ({ theme, error }) => ({
-    border: error
-      ? `2px dashed ${theme.palette.app.color.red[900]}`
-      : `2px dashed ${theme.palette.app.color.iron[800]}`,
-    borderRadius: "8px",
-    cursor: "pointer",
-    "&:hover": {
-      borderColor: theme.palette.app.color.butterflyBlue[900],
-    },
-  })
-);
-
-export const FileInput = styled("input")({
-  display: "none",
-});

package/packages/shared-components/src/FormFields/FileUpload/FileUpload.tsx

@@ -1,197 +0,0 @@
-import { InputLabel, Stack, Typography, useTheme } from "@mui/material";
-import { drop, isFunction, join, last, remove, split } from "lodash";
-import { useRef } from "react";
-import type {
-  FieldValues,
-  UseControllerProps,
-  UseFormSetError,
-} from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { v4 as uuidv4 } from "uuid";
-import { PadBox } from "../../PadBox";
-import { SvgsDrop } from "../../Svgs";
-import { isFileSizeValid, isFileTypeValid } from "../../utils";
-import { FileInput, FileUploadContainer } from "./FileUpload.styled";
-import { Skeleton } from "./Skeleton";
-import { UploadedFileName } from "./UploadedFileName";
-
-export type FileUploadProps<P extends FieldValues> = UseControllerProps<P> & {
-  multiple?: boolean;
-  loading?: boolean;
-  isDisabled?: boolean;
-  onChange: (file: File[]) => void;
-  onDelete: (file: string[]) => void;
-  uploadedFiles: string[];
-  error?: boolean;
-  helperText?: string;
-  label?: string;
-  size?: number; //Note:- Size in MB
-  accept?: string;
-  setError?: UseFormSetError<FieldValues>;
-};
-
-export function FileUpload<P extends FieldValues>({
-  loading = false,
-  uploadedFiles,
-  onChange,
-  onDelete,
-  isDisabled,
-  multiple = false,
-  error,
-  helperText,
-  label,
-  size = 10,
-  setError,
-  accept = ".png,.jpg,.jpeg,.doc,.docx,.pdf",
-  ...restProps
-}: FileUploadProps<P>) {
-  const theme = useTheme();
-
-  const { red } = theme.palette.app.color;
-
-  const { t } = useTranslation();
-
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const getFileName = (url: string) => {
-    const imageName = join(drop(split(last(split(url, "/")), "_")), "_");
-
-    return imageName;
-  };
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files) {
-      const files = Array.from(event.target.files);
-
-      const uploadFiles: File[] = [];
-
-      const inValidFiles: string[] = [];
-
-      let isShowError: boolean = false;
-
-      for (const element of files) {
-        if (!isFileSizeValid(element, size)) {
-          isShowError = true;
-
-          inValidFiles.push(
-            t("fileUpload.fileSize.error.message", {
-              fileName: element.name,
-              fileSize: size,
-            })
-          );
-        } else if (!isFileTypeValid(element)) {
-          isShowError = true;
-
-          inValidFiles.push(
-            t("fileUpload.fileType.error.message", {
-              fileName: element.name,
-            })
-          );
-        } else {
-          uploadFiles.push(element);
-        }
-      }
-
-      if (isShowError) {
-        if (isFunction(setError)) {
-          setError("document_url", {
-            type: "custom",
-            message: inValidFiles.join("\n"),
-          });
-        }
-
-        return;
-      }
-
-      if (uploadFiles?.length > 0) {
-        onChange(uploadFiles);
-      }
-    }
-  };
-
-  const handleFileRemove = (index: number) => {
-    if (multiple && Array.isArray(uploadedFiles)) {
-      const copyOfUploadedFiles = [...uploadedFiles];
-
-      remove(copyOfUploadedFiles, (_, i) => i === index);
-
-      onDelete(copyOfUploadedFiles.length > 0 ? copyOfUploadedFiles : []);
-    } else {
-      onDelete([]);
-    }
-
-    if (inputRef.current) {
-      inputRef.current.value = "";
-    }
-  };
-
-  const renderFileNames = () => {
-    if (!uploadedFiles) {
-      return null;
-    }
-
-    if (Array.isArray(uploadedFiles)) {
-      return uploadedFiles.map((file: string, index: number) => {
-        return (
-          <UploadedFileName
-            key={uuidv4()}
-            fileName={getFileName(file)}
-            onDelete={() => handleFileRemove(index)}
-          />
-        );
-      });
-    }
-  };
-
-  if (loading) {
-    return <Skeleton />;
-  }
-
-  return (
-    <Stack gap="10px">
-      <InputLabel required>{label}</InputLabel>
-
-      <FileUploadContainer
-        onClick={() => inputRef.current?.click()}
-        error={error}
-        {...restProps}
-      >
-        <PadBox padding={{ padding: "20px" }}>
-          <Stack gap="4px" alignItems="center" justifyContent="center">
-            <FileInput
-              disabled={isDisabled}
-              type="file"
-              accept={accept}
-              ref={inputRef}
-              onChange={handleFileChange}
-              multiple={multiple}
-            />
-
-            <SvgsDrop />
-
-            <Typography>Drag & drop files or Browse</Typography>
-
-            <Typography variant="caption">
-              Only JPG, PNG, PDF files are accepted.
-            </Typography>
-          </Stack>
-        </PadBox>
-      </FileUploadContainer>
-
-      {error && (
-        <Typography
-          variant="caption"
-          sx={{
-            color: `${red[900]}`,
-            whiteSpace: "pre",
-            textWrap: "wrap",
-          }}
-        >
-          {helperText}
-        </Typography>
-      )}
-
-      {renderFileNames()}
-    </Stack>
-  );
-}

package/packages/shared-components/src/FormFields/FileUpload/Skeleton.tsx

@@ -1,21 +0,0 @@
-import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
-
-export const Skeleton = () => {
-  return (
-    <Stack gap="10px">
-      <MuiSkeleton
-        width={120}
-        height="23px"
-        sx={{
-          transform: "scale(1)",
-        }}
-      />
-      <MuiSkeleton
-        height="141px"
-        sx={{
-          transform: "scale(1)",
-        }}
-      />
-    </Stack>
-  );
-};

package/packages/shared-components/src/FormFields/FileUpload/UploadedFileName.tsx

@@ -1,27 +0,0 @@
-import { AttachFile } from "@mui/icons-material";
-import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
-import { IconButton, Stack, Typography } from "@mui/material";
-
-type UploadedFileNameProps = {
-  fileName: string;
-  onDelete: () => void;
-};
-
-export const UploadedFileName = ({
-  fileName,
-  onDelete,
-}: UploadedFileNameProps) => {
-  return (
-    <Stack direction="row" justifyContent="space-between" alignItems="center">
-      <Stack direction="row" gap="8x">
-        <AttachFile />
-
-        <Typography>{fileName}</Typography>
-      </Stack>
-
-      <IconButton onClick={onDelete}>
-        <DeleteOutlineOutlinedIcon />
-      </IconButton>
-    </Stack>
-  );
-};

package/packages/shared-components/src/FormFields/FileUpload/index.ts

@@ -1 +0,0 @@
-export * from "./FileUpload";

package/packages/shared-components/src/FormFields/ImageUpload/ImageUpload.styled.tsx

@@ -1,16 +0,0 @@
-import { Box, styled } from "@mui/material";
-
-export const DarkBackgroundContainer = styled(Box)(({ theme }) => {
-  return {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: theme.palette.app.color.mirage[600],
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    transition: "opacity 0.5s ease",
-  };
-});