@codezee/sixtify-brahma 0.2.2 → 0.2.3

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

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

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

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

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

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

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

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

@@ -1,37 +0,0 @@
-import {
-  Stack,
-  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;
-};
-
-export function ListItemButton({
-  label,
-  selected,
-  actions,
-  ...restListItemButtonProps
-}: ListItemButtonProps) {
-  return (
-    <StyledListItemButton
-      selected={selected}
-      alignItems="flex-start"
-      {...restListItemButtonProps}
-    >
-      <Stack
-        width="100%"
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Tooltip toolTipLabel={label}>{label}</Tooltip>
-        {actions}
-      </Stack>
-    </StyledListItemButton>
-  );
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,33 +0,0 @@
-import {
-  useController,
-  type ControllerRenderProps,
-  type FieldValues,
-  type UseControllerProps,
-} from "react-hook-form";
-import type { SwitchProps } from "@mui/material";
-import { Switch as MuiSwitch } from "@mui/material";
-import { Skeleton } from "./Skeleton";
-
-export type SwitchFieldProps<P extends FieldValues> = UseControllerProps<P> &
-  Omit<Omit<SwitchProps, "checked">, keyof ControllerRenderProps<P>> & {
-    loading?: boolean;
-  };
-
-export function Switch<P extends FieldValues>({
-  name,
-  rules,
-  control,
-  defaultValue,
-  loading = false,
-  ...restSwitchProps
-}: SwitchFieldProps<P>) {
-  const {
-    field: { value = false, ...restField },
-  } = useController({ name, control, defaultValue, rules });
-
-  if (loading) {
-    return <Skeleton />;
-  }
-
-  return <MuiSwitch checked={value} {...restField} {...restSwitchProps} />;
-}

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

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