@codezee/sixtify-brahma 0.0.0

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

@@ -0,0 +1,31 @@
+import type { BoxProps } from "@mui/material";
+import { Box, styled } from "@mui/material";
+import type {
+  ComponentType,
+  DetailedHTMLProps,
+  InputHTMLAttributes,
+  ReactNode,
+} from "react";
+
+export type FileUploadContainerProps = BoxProps & {
+  error?: boolean;
+  children: ReactNode;
+};
+
+export const FileUploadContainer: ComponentType<FileUploadContainerProps> =
+  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: ComponentType<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+> = styled("input")({
+  display: "none",
+});

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

@@ -0,0 +1,160 @@
+import { InputLabel, Stack, Typography, useTheme } from "@mui/material";
+import { isFunction } from "lodash";
+import { useRef } from "react";
+import type {
+  FieldError,
+  FieldValues,
+  UseControllerProps,
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { PadBox } from "../../PadBox";
+import { SvgsDrop } from "../../Svgs";
+import { isFileSizeValid, isFileTypeValid } from "../../utils";
+import { FileInput, FileUploadContainer } from "./FileUpload.styled";
+import { Skeleton } from "./Skeleton";
+
+export type FileUploadProps<P extends FieldValues> = UseControllerProps<P> & {
+  multiple?: boolean;
+  loading?: boolean;
+  isDisabled?: boolean;
+  onChange: (file: File[]) => void;
+  error?: boolean;
+  helperText?: string;
+  label?: string;
+  size?: number; //Note:- Size in MB
+  accept?: string;
+  fileNames: JSX.Element;
+  acceptTitle?: string;
+  setError: (
+    name: keyof P,
+    error: FieldError | { type: string; message?: string }
+  ) => void;
+};
+
+export const error_with_transaltion = "error_with_transaltion";
+
+export function FileUpload<P extends FieldValues>({
+  loading = false,
+  onChange,
+  isDisabled,
+  multiple = false,
+  error,
+  helperText,
+  label,
+  fileNames,
+  size = 10,
+  name,
+  setError,
+  accept = ".png,.jpg,.jpeg,.doc,.docx,.pdf",
+  acceptTitle = "Only JPG, PNG, PDF files are accepted.",
+  ...restProps
+}: FileUploadProps<P>) {
+  const theme = useTheme();
+
+  const { red } = theme.palette.app.color;
+
+  const { t } = useTranslation();
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  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(name, {
+            type: error_with_transaltion,
+            message: inValidFiles.join("\n"),
+          });
+        }
+
+        return;
+      }
+
+      if (uploadFiles?.length > 0) {
+        onChange(uploadFiles);
+
+        event.target.value = "";
+      }
+    }
+  };
+
+  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">{acceptTitle}</Typography>
+          </Stack>
+        </PadBox>
+      </FileUploadContainer>
+
+      {error && (
+        <Typography
+          variant="caption"
+          sx={{
+            color: `${red[900]}`,
+            whiteSpace: "pre",
+            textWrap: "wrap",
+          }}
+        >
+          {helperText}
+        </Typography>
+      )}
+      {fileNames}
+    </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/index.ts

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

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

@@ -0,0 +1,20 @@
+import type { BoxProps } from "@mui/material";
+import { Box, styled } from "@mui/material";
+import type { ComponentType } from "react";
+
+export const DarkBackgroundContainer: ComponentType<BoxProps> = 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",
+  };
+});

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

@@ -0,0 +1,181 @@
+import { Delete as DeleteIcon, Edit as EditIcon } from "@mui/icons-material";
+import CameraAltOutlinedIcon from "@mui/icons-material/CameraAltOutlined";
+import PersonAddAltIcon from "@mui/icons-material/PersonAddAlt";
+import { Box, IconButton, Stack, Typography, useTheme } from "@mui/material";
+import { useRef, useState } from "react";
+import { Button } from "../../Button";
+import { PadBox } from "../../PadBox";
+import { DarkBackgroundContainer } from "./ImageUpload.styled";
+import { PhotoCaptureDialog } from "./PhotoCaptureDialog";
+import { Skeleton } from "./Skeleton";
+
+export type ImageUploadProps = Readonly<{
+  onDelete: () => void;
+  onChange: (file: File[]) => void;
+  variant?: "square" | "circle";
+  isUploading?: boolean;
+  label?: string;
+  subTitle?: string;
+  defaultValue?: string;
+  isCapture?: boolean;
+  loading?: boolean;
+}>;
+
+export function ImageUpload({
+  variant = "square",
+  isUploading = false,
+  defaultValue = "",
+  onDelete,
+  onChange,
+  label,
+  isCapture = false,
+  loading = false,
+  subTitle = "PNG, JPEG under 5 MB",
+}: ImageUploadProps) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const [hover, setHover] = useState(false);
+
+  const [isOpenCaptureModal, setIsOpenCaptureModal] = useState(false);
+
+  const theme = useTheme();
+
+  const { butterflyBlue, iron } = theme.palette.app.color;
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const files = Array.from(event.target.files);
+
+      onChange(files);
+    }
+  };
+
+  const handleFileRemove = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    onDelete();
+
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+  };
+
+  if (loading) {
+    return <Skeleton />;
+  }
+
+  return (
+    <>
+      <Stack gap="20px" direction="row" alignItems="center">
+        <Box
+          onClick={() => !defaultValue && inputRef.current?.click()}
+          onMouseEnter={() => setHover(true)}
+          onMouseLeave={() => setHover(false)}
+          sx={{
+            height: "120px",
+            width: "120px",
+            position: "relative",
+            overflow: "hidden",
+            border: defaultValue
+              ? `2px solid ${butterflyBlue[900]}`
+              : `2px dashed ${theme.palette.grey[400]}`,
+            cursor: "pointer",
+            borderRadius: "10px",
+            "& img": {
+              borderRadius: "10px",
+            },
+            ":hover": {
+              border: `2px dashed ${butterflyBlue[900]}`,
+            },
+            ...(variant === "circle"
+              ? {
+                  borderRadius: "50%",
+                  "& img": {
+                    borderRadius: "50%",
+                  },
+                }
+              : {}),
+          }}
+        >
+          <input
+            type="file"
+            ref={inputRef}
+            onChange={handleFileChange}
+            style={{ display: "none" }}
+            accept="image/png, image/jpeg"
+          />
+
+          {hover && !!defaultValue && (
+            <DarkBackgroundContainer>
+              <IconButton onClick={() => inputRef.current?.click()}>
+                <EditIcon sx={{ color: "white" }} />
+              </IconButton>
+              <IconButton onClick={handleFileRemove}>
+                <DeleteIcon sx={{ color: "white" }} />
+              </IconButton>
+            </DarkBackgroundContainer>
+          )}
+
+          {isUploading && (
+            <DarkBackgroundContainer>
+              <Typography color={iron[600]}>Processing...</Typography>
+            </DarkBackgroundContainer>
+          )}
+
+          {defaultValue ? (
+            <PadBox padding={{ padding: "2px" }}>
+              <img
+                alt=""
+                src={defaultValue}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                }}
+              />
+            </PadBox>
+          ) : (
+            <Stack
+              justifyContent="center"
+              alignItems="center"
+              sx={{ height: "100%" }}
+            >
+              <PersonAddAltIcon />
+            </Stack>
+          )}
+        </Box>
+
+        <Stack>
+          <Typography variant="subtitle1" fontWeight={500}>
+            {label}
+          </Typography>
+
+          <Typography variant="caption" color={iron[800]}>
+            {subTitle}
+          </Typography>
+        </Stack>
+
+        {isCapture && (
+          <Button
+            onClick={() => setIsOpenCaptureModal(true)}
+            variant="outlined"
+          >
+            <Stack gap="10px" direction="row">
+              <CameraAltOutlinedIcon />
+
+              <Typography variant="body1">Capture photo</Typography>
+            </Stack>
+          </Button>
+        )}
+      </Stack>
+
+      {isOpenCaptureModal && (
+        <PhotoCaptureDialog
+          onChange={onChange}
+          isUploading={isUploading}
+          open={isOpenCaptureModal}
+          onClose={() => setIsOpenCaptureModal(false)}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { Avatar, Box, Stack, useTheme } from "@mui/material";
+import { PadBox } from "../../PadBox";
+import { useState } from "react";
+
+export type ImageUploadViewProps = Readonly<{
+  defaultValue?: string;
+  variant: string;
+}>;
+export function ImageUploadView({
+  defaultValue,
+  variant,
+}: ImageUploadViewProps) {
+  const theme = useTheme();
+
+  const { butterflyBlue } = theme.palette.app.color;
+
+  const [hasError, setHasError] = useState(false);
+
+  return (
+    <Box
+      sx={{
+        height: "120px",
+        minWidth: "120px",
+        maxWidth: "120px",
+        overflow: "hidden",
+        border: `2px solid ${butterflyBlue[900]}`,
+        borderRadius: "10px",
+        "& img": {
+          borderRadius: "10px",
+        },
+        ...(variant === "circle"
+          ? {
+              borderRadius: "50%",
+              "& img": {
+                borderRadius: "50%",
+              },
+            }
+          : {}),
+      }}
+    >
+      {defaultValue && !hasError ? (
+        <PadBox padding={{ padding: "2px" }}>
+          <img
+            alt=""
+            src={defaultValue}
+            onError={() => setHasError(true)}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+            }}
+          />
+        </PadBox>
+      ) : (
+        <Stack
+          justifyContent="center"
+          alignItems="center"
+          sx={{ height: "100%" }}
+        >
+          <Avatar sx={{ width: "93%", height: "93%" }} />
+        </Stack>
+      )}
+    </Box>
+  );
+}

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

@@ -0,0 +1,74 @@
+import { Stack } from "@mui/material";
+import { base64ToFile } from "file64";
+import { useCallback, useRef } from "react";
+import Webcam from "react-webcam";
+import { Button } from "../../Button";
+import { Dialog } from "../../Dialog";
+import { toasts } from "../../Toast";
+
+type PhotoCaptureDialogProps = {
+  open: boolean;
+  isUploading: boolean;
+  onClose: () => void;
+  onChange: (file: File[]) => void;
+};
+
+export const PhotoCaptureDialog = ({
+  open,
+  isUploading,
+  onClose,
+  onChange,
+}: PhotoCaptureDialogProps) => {
+  const webcamRef = useRef<Webcam | null>(null);
+
+  const capture = useCallback(async () => {
+    if (webcamRef.current) {
+      const imageSrc = webcamRef.current.getScreenshot();
+
+      if (imageSrc) {
+        try {
+          const file = await base64ToFile(imageSrc, "image/jpeg");
+
+          onChange([file]);
+
+          onClose();
+        } catch (error) {
+          toasts.error({ title: `Failed to convert base64 to file:${error}` });
+        }
+      }
+    }
+  }, [webcamRef]);
+
+  return (
+    <Dialog
+      onClose={onClose}
+      open={open}
+      title="Photo Capture"
+      maxWidth="md"
+      actions={
+        <Stack direction="row" gap="5px">
+          <Button onClick={onClose} variant="outlined">
+            Cancel
+          </Button>
+
+          <Button
+            onClick={() => {
+              capture();
+            }}
+            loading={isUploading}
+          >
+            Save
+          </Button>
+        </Stack>
+      }
+    >
+      <Webcam
+        mirrored
+        ref={webcamRef}
+        screenshotFormat="image/jpeg"
+        width="835"
+        height="600"
+      />
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,31 @@
+import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
+
+export const Skeleton = () => {
+  return (
+    <Stack gap="20px" direction="row" alignItems="center">
+      <MuiSkeleton
+        width="120px"
+        height="120px"
+        sx={{
+          transform: "scale(1)",
+        }}
+      ></MuiSkeleton>
+      <Stack gap="8px">
+        <MuiSkeleton
+          width={129}
+          height="24px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+        <MuiSkeleton
+          width={129}
+          height="16px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+      </Stack>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from "./ImageUpload";
+export * from "./ImageUploadView";

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

@@ -0,0 +1,25 @@
+import {
+  ListItemButton as MuiListItemButton,
+  styled,
+  type ListItemButtonProps as MuiListItemButtonProps,
+} from "@mui/material";
+import type { ComponentType } from "react";
+
+export const StyledListItemButton: ComponentType<
+  MuiListItemButtonProps & { selected?: boolean }
+> = styled(MuiListItemButton, {
+  shouldForwardProp: (prop) => prop !== "selected",
+})<MuiListItemButtonProps & { selected?: boolean }>(({ theme, selected }) => ({
+  background: theme.palette.app.color.iron[600],
+  color: theme.palette.app.color.mirage[900],
+  borderRadius: "4px",
+  //TODO: Manish, Add a transition
+  border: `1px solid ${theme.palette.app.color.butterflyBlue[300]}`,
+  ...(selected
+    ? {
+        background: theme.palette.app.color.deepAqua[500],
+        color: theme.palette.app.color.mirage[900],
+        borderLeft: `6px solid ${theme.palette.app.color.butterflyBlue[900]}`,
+      }
+    : {}),
+}));

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

@@ -0,0 +1,52 @@
+import {
+  Stack,
+  Typography,
+  useTheme,
+  type ListItemButtonProps as MuiListItemButtonProps,
+} from "@mui/material";
+import type { ReactNode } from "react";
+import { Tooltip } from "../../Tooltip";
+import { StyledListItemButton } from "./ListItemButton.styled";
+
+export type ListItemButtonProps = MuiListItemButtonProps & {
+  label: string;
+  actions?: ReactNode;
+  companyName?: string;
+};
+
+export function ListItemButton({
+  label,
+  selected,
+  actions,
+  companyName,
+  ...restListItemButtonProps
+}: ListItemButtonProps) {
+  const theme = useTheme();
+
+  const { iron } = theme.palette.app.color;
+
+  return (
+    <StyledListItemButton
+      selected={selected}
+      alignItems="flex-start"
+      {...restListItemButtonProps}
+    >
+      <Stack
+        width="100%"
+        flexDirection="row"
+        alignItems="center"
+        justifyContent="space-between"
+      >
+        <Stack gap="5px" direction="column">
+          <Tooltip toolTipLabel={label}>{label}</Tooltip>
+
+          <Typography variant="caption" color={iron[800]}>
+            {companyName}
+          </Typography>
+        </Stack>
+
+        {actions}
+      </Stack>
+    </StyledListItemButton>
+  );
+}

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

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