@codezee/sixtify-brahma 0.2.3 → 0.2.6

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,22 @@
+import {
+  styled,
+  ListItemButton as MuiListItemButton,
+  type ListItemButtonProps as MuiListItemButtonProps,
+} from "@mui/material";
+
+export const StyledListItemButton = 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";

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

@@ -0,0 +1,50 @@
+import { LockOutlined } from "@mui/icons-material";
+import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
+import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
+import { IconButton, InputAdornment } from "@mui/material";
+import { useState } from "react";
+import { type FieldValues } from "react-hook-form";
+import { TextField, type TextFieldProps } from "../TextField";
+
+type PasswordFieldProps<P extends FieldValues> = Readonly<
+  Omit<TextFieldProps<P>, "InputProps">
+>;
+
+export function PasswordField<P extends FieldValues>(
+  props: PasswordFieldProps<P>
+) {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible((prevState) => !prevState);
+  };
+
+  return (
+    <TextField
+      type={isPasswordVisible ? "text" : "password"}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <LockOutlined fontSize="small" />
+          </InputAdornment>
+        ),
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={togglePasswordVisibility}
+              edge="end"
+            >
+              {isPasswordVisible ? (
+                <VisibilityOffOutlinedIcon fontSize="small" />
+              ) : (
+                <VisibilityOutlinedIcon fontSize="small" />
+              )}
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+      {...props}
+    />
+  );
+}

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

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

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

@@ -0,0 +1,105 @@
+import {
+  FormControlLabel,
+  InputLabel,
+  RadioGroup,
+  Stack,
+  Box,
+  type StackOwnProps,
+  type SxProps,
+} from "@mui/material";
+import Radio, { type RadioProps as MuiRadioProps } from "@mui/material/Radio";
+import {
+  useController,
+  type ControllerRenderProps,
+  type FieldValues,
+  type UseControllerProps,
+} from "react-hook-form";
+import { Skeleton } from "./Skeleton";
+import type { ReactNode } from "react";
+
+type Options = {
+  values: boolean | string;
+  label?: ReactNode;
+  disabled: boolean;
+  direction?: StackOwnProps["direction"];
+};
+
+export type RadioGroupFieldProps<P extends FieldValues> =
+  UseControllerProps<P> &
+    Omit<Omit<MuiRadioProps, "checked">, keyof ControllerRenderProps<P>> & {
+      label?: string;
+      options: Options[];
+      loading?: boolean;
+      direction?: StackOwnProps["direction"];
+      sx?: SxProps;
+    };
+
+export function RadioGroupField<P extends FieldValues>({
+  name,
+  rules,
+  label,
+  control,
+  options,
+  defaultValue,
+  size = "small",
+  color = "secondary",
+  loading = false,
+  direction = "row",
+  sx = {},
+  ...restRadioButtonProps
+}: RadioGroupFieldProps<P>) {
+  const {
+    field: { value, onChange, ...restField },
+  } = useController({ name, control, defaultValue, rules });
+
+  if (loading) {
+    return <Skeleton />;
+  }
+
+  return (
+    <Stack gap="5px">
+      {label && <InputLabel>{label}</InputLabel>}
+
+      <RadioGroup
+        name={name}
+        value={value}
+        onChange={(_, event) => {
+          if (event === "true") {
+            onChange(true);
+          } else if (event === "false") {
+            onChange(false);
+          } else {
+            onChange(event);
+          }
+        }}
+      >
+        <Stack
+          gap={direction === "column" ? "5px" : "45px"}
+          direction={direction}
+        >
+          {options?.map(({ label, values, disabled }, index) => {
+            return (
+              // eslint-disable-next-line sonarjs/no-array-index-key
+              <Box key={index} width="max-content">
+                <FormControlLabel
+                  value={values}
+                  control={
+                    <Radio
+                      {...restField}
+                      {...restRadioButtonProps}
+                      color={color}
+                      size={size}
+                    />
+                  }
+                  disabled={disabled}
+                  label={label}
+                  sx={sx}
+                />
+              </Box>
+            );
+          })}
+        </Stack>
+      </RadioGroup>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
+export const Skeleton = () => {
+  return (
+    <Stack gap="10px">
+      <MuiSkeleton height="20px" width="70px" sx={{ transform: "scale(1)" }} />
+      <Stack direction="row" alignItems="center" gap="50px">
+        <Stack gap="10px" direction="row" alignItems="center">
+          <MuiSkeleton variant="circular" height="25px" width="25px" />
+          <MuiSkeleton
+            height="23px"
+            width="38px"
+            sx={{ transform: "scale(1)" }}
+          />
+        </Stack>
+        <Stack gap="10px" direction="row" alignItems="center">
+          <MuiSkeleton variant="circular" height="25px" width="25px" />
+          <MuiSkeleton
+            height="23px"
+            width="38px"
+            sx={{ transform: "scale(1)" }}
+          />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};

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

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

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

@@ -0,0 +1,21 @@
+import { InputAdornment } from "@mui/material";
+import type { FieldValues } from "react-hook-form";
+import SearchOutlinedIcon from "@mui/icons-material/SearchOutlined";
+import type { TextFieldProps } from "../TextField";
+import { TextField } from "../TextField";
+
+export function SearchField<P extends FieldValues>(props: TextFieldProps<P>) {
+  return (
+    <TextField
+      placeholder="Search"
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <SearchOutlinedIcon fontSize="small" />
+          </InputAdornment>
+        ),
+      }}
+      {...props}
+    />
+  );
+}

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

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

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

@@ -0,0 +1,12 @@
+import { Skeleton as MuiSkeleton } from "@mui/material";
+
+export const Skeleton = () => {
+  return (
+    <MuiSkeleton
+      width={50}
+      height={20}
+      sx={{ borderRadius: "4px" }}
+      variant="rectangular"
+    />
+  );
+};