@codezee/sixtify-brahma 0.0.0

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/PhoneInputField/PhoneInputField.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable sonarjs/no-nested-conditional */
+import { InputLabel, Stack, Typography, useTheme } from "@mui/material";
+import {
+  useController,
+  type ControllerRenderProps,
+  type FieldValues,
+  type UseControllerProps,
+} from "react-hook-form";
+import type { PhoneInputProps } from "react-phone-input-2";
+import PhoneInput from "react-phone-input-2";
+import { Skeleton } from "./Skeleton";
+
+export type PhoneInputFieldProps<P extends FieldValues> =
+  UseControllerProps<P> &
+    Omit<PhoneInputProps, keyof ControllerRenderProps<P>> & {
+      label?: string;
+      loading?: boolean;
+      rows?: number;
+      required?: boolean;
+      error?: boolean;
+      helperText?: string;
+    };
+
+export function PhoneInputField<P extends FieldValues>({
+  control,
+  name,
+  defaultValue,
+  rules,
+  label,
+  disabled = false,
+  required,
+  rows,
+  loading = false,
+  placeholder = "",
+  error,
+  helperText,
+  ...phoneInputProps
+}: PhoneInputFieldProps<P>) {
+  const theme = useTheme();
+
+  const { iron, red } = theme.palette.app.color;
+
+  const {
+    field: { value, onChange, ...restField },
+  } = useController({
+    name,
+    control,
+    defaultValue,
+    rules,
+  });
+
+  if (loading) {
+    return <Skeleton label={label} rows={rows} />;
+  }
+
+  return (
+    <Stack gap="4px">
+      <Stack gap="10px">
+        {label && <InputLabel required={required}>{label}</InputLabel>}
+
+        <PhoneInput
+          country="in"
+          enableSearch={true}
+          disabled={disabled}
+          placeholder={placeholder || label}
+          onChange={(phone) => {
+            onChange(phone);
+          }}
+          value={value}
+          containerStyle={{
+            width: "100%",
+            border: error
+              ? `1px solid ${red[900]}`
+              : disabled
+                ? `1px solid ${iron[700]}`
+                : `1px solid ${iron[800]}`,
+            borderRadius: "4px",
+          }}
+          inputStyle={{
+            width: "100%",
+            paddingTop: "19px",
+            paddingBottom: "19px",
+            fontSize: "16px",
+            border: "none",
+          }}
+          buttonStyle={{
+            border: "none",
+          }}
+          inputProps={{ ...restField }}
+          {...phoneInputProps}
+        />
+      </Stack>
+
+      {error && (
+        <Typography
+          variant="caption"
+          sx={{
+            color: "red",
+            whiteSpace: "pre",
+            textWrap: "wrap",
+          }}
+        >
+          {helperText}
+        </Typography>
+      )}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
+
+type SkeletonProps = {
+  rows?: number;
+  label?: string;
+};
+
+export const Skeleton = ({ rows, label }: SkeletonProps) => {
+  const height: number = rows === undefined ? 40 : rows * 23;
+
+  return (
+    <Stack gap="10px">
+      {label && (
+        <MuiSkeleton
+          width={120}
+          height="23px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+      )}
+
+      <MuiSkeleton
+        height={`${height}px`}
+        sx={{
+          transform: "scale(1)",
+        }}
+      />
+    </Stack>
+  );
+};

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

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

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"
+    />
+  );
+};

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

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

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

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

@@ -0,0 +1,31 @@
+import { Skeleton as MuiSkeleton, Stack } from "@mui/material";
+
+type SkeletonProps = {
+  rows?: number;
+  label?: string;
+};
+
+export const Skeleton = ({ rows, label }: SkeletonProps) => {
+  const height: number = rows === undefined ? 40 : rows * 23;
+
+  return (
+    <Stack gap="10px">
+      {label && (
+        <MuiSkeleton
+          width={120}
+          height="23px"
+          sx={{
+            transform: "scale(1)",
+          }}
+        />
+      )}
+
+      <MuiSkeleton
+        height={`${height}px`}
+        sx={{
+          transform: "scale(1)",
+        }}
+      />
+    </Stack>
+  );
+};

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

@@ -0,0 +1,167 @@
+import {
+  InputLabel,
+  TextField as MuiTextField,
+  Stack,
+  type TextFieldProps as MuiTextFieldProps,
+} from "@mui/material";
+import type { KeyboardEvent } from "react";
+import {
+  useController,
+  type ControllerRenderProps,
+  type FieldError,
+  type FieldValues,
+  type UseControllerProps,
+} from "react-hook-form";
+import { Skeleton } from "./Skeleton";
+
+type AllowedCharacterType =
+  | "string"
+  | "string-number"
+  | "string-number-special";
+
+type LetterCase = "uppercase" | "lowercase" | "mixed";
+
+const characterTypeMessages: Record<AllowedCharacterType, string> = {
+  string: "Only alphabetic characters are allowed.",
+  "string-number": "Only letters and numbers are allowed.",
+  "string-number-special": "Special characters are allowed.",
+};
+
+export type TextFieldProps<P extends FieldValues> = UseControllerProps<P> &
+  Omit<MuiTextFieldProps, keyof ControllerRenderProps<P>> & {
+    label?: string;
+    loading?: boolean;
+    rows?: number;
+    isCapitalize?: boolean;
+    isTrimStartDisabled?: boolean;
+    characterType?: AllowedCharacterType;
+    letterCase?: LetterCase;
+    setError?: (
+      name: keyof P,
+      error: FieldError | { type: string; message?: string }
+    ) => void;
+  };
+
+export function TextField<P extends FieldValues>({
+  control,
+  name,
+  defaultValue,
+  label = "",
+  rules,
+  type,
+  required,
+  disabled,
+  loading = false,
+  placeholder = "",
+  isCapitalize = false,
+  isTrimStartDisabled = false,
+  rows,
+  characterType = "string-number-special",
+  letterCase = "mixed",
+  setError,
+  ...inputFieldProps
+}: TextFieldProps<P>) {
+  const {
+    field: { value, onChange, ...restField },
+    fieldState: { error },
+  } = useController({ name, control, defaultValue, rules });
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "-" && type === "number") {
+      event.preventDefault();
+    }
+  };
+
+  const getCharacterRegex = (type: AllowedCharacterType) => {
+    switch (type) {
+      case "string":
+        return /^[A-Za-z\s]*$/;
+
+      case "string-number":
+        return /^[A-Za-z0-9\s]*$/;
+
+      case "string-number-special":
+        return /^[\s\S]*$/;
+
+      default:
+        return /^[\s\S]*$/;
+    }
+  };
+
+  const cleanInput = (input: string) => {
+    let result = input;
+
+    const regex = getCharacterRegex(characterType);
+
+    if (!regex.test(result)) {
+      result = result
+        .split("")
+        .filter((char) => regex.test(char))
+        .join("");
+    }
+
+    if (letterCase === "uppercase") {
+      result = result.toUpperCase();
+    } else if (letterCase === "lowercase") {
+      result = result.toLowerCase();
+    }
+
+    return result;
+  };
+
+  if (loading) {
+    return <Skeleton label={label} rows={rows} />;
+  }
+
+  return (
+    <Stack gap="10px">
+      {label && <InputLabel required={required}>{label}</InputLabel>}
+
+      <MuiTextField
+        disabled={disabled}
+        required={required}
+        fullWidth
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder || label}
+        type={type}
+        inputProps={{
+          min: 0,
+        }}
+        error={Boolean(error)}
+        helperText={error?.message}
+        onChange={(event) => {
+          let value = event.target.value || null;
+
+          if (typeof value === "string" && value.trim() === "") {
+            value = null;
+          } else if (!isTrimStartDisabled && typeof value === "string") {
+            value = value.trimStart();
+          }
+
+          const cleanedVal = value && cleanInput(value);
+
+          if (value !== cleanedVal) {
+            const errorMessage = characterTypeMessages[characterType];
+
+            if (setError) {
+              setError(name, { type: "manual", message: errorMessage });
+
+              return;
+            }
+          }
+
+          if (value && type === "number") {
+            onChange(Number(value));
+          } else if (isCapitalize) {
+            onChange(cleanedVal ? cleanedVal.toUpperCase() : null);
+          } else {
+            onChange(cleanedVal);
+          }
+        }}
+        value={typeof value === "string" ? value.trimStart() : (value ?? "")}
+        {...restField}
+        {...inputFieldProps}
+      />
+    </Stack>
+  );
+}

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

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

package/packages/shared-components/src/FormFields/TimeField/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>
+  );
+};