@codezee/sixtify-brahma 0.1.1

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

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

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

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

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

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

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

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

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

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

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

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