@bigmath-ui-library/core 2.0.4

package/src/components/BMMultiEntry/BMMultiEntry.tsx

@@ -0,0 +1,328 @@
+import {
+  FC,
+  useRef,
+  useState,
+  ReactElement,
+  KeyboardEvent,
+  FocusEvent,
+} from "react";
+import {
+  Box,
+  Chip,
+  FormHelperText,
+  InputBase,
+  Paper,
+  styled,
+  Typography,
+} from "@mui/material";
+import type { FieldError } from "react-hook-form";
+import { throttle } from "lodash";
+import { BMTooltip } from "../BMTooltip/BMTooltip";
+import ErrorIcon from "@coreApp/assets/icons/failed-solid.svg";
+import CloseIcon from "@coreApp/assets/icons/close-basic.svg";
+
+export interface BMMultiEntryProps {
+  error?: boolean | FieldError;
+  disabled?: boolean;
+  tooltipFn?: (entry: string) => string | null;
+  label?: string;
+  helperText?: string;
+  onChange?: (value: string[]) => void;
+  chipIcon?: ReactElement | ((entry: string) => ReactElement | undefined);
+  placeholderText?: string;
+  value?: string[] | string;
+  overrideHeight?: string | number;
+  overrideWidth?: string | number;
+  dataTestId?: string;
+  checkWarning?: (entry: string) => boolean;
+  lowercaseEntry?: boolean;
+  subLabel?: ReactElement;
+  removeInvalidEntriesMsg?: ReactElement;
+  multiEntryHitEnterMsg?: ReactElement;
+}
+
+// Styled Components
+const Label = styled(Typography)(({ theme }) => ({
+  fontSize: "13px",
+  fontWeight: 500,
+  color: theme.palette.grey[600],
+  marginBottom: theme.spacing(0.4),
+  marginTop: theme.spacing(0.4),
+}));
+
+const EntryWrapper = styled(Paper, {
+  shouldForwardProp: (prop) =>
+    prop !== "focus" && prop !== "overrideHeight" && prop !== "overrideWidth",
+})<{
+  focus?: boolean;
+  overrideHeight?: string | number;
+  overrideWidth?: string | number;
+}>(({ theme, overrideHeight, overrideWidth }) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "flex-start",
+  alignContent: "flex-start",
+  gap: theme.spacing(0.5),
+  padding: theme.spacing(0.5, 0.5, 0, 0.875),
+  minHeight: 40,
+  height: overrideHeight ?? "auto",
+  width: overrideWidth ?? "100%",
+  overflowY: "auto",
+  overflowX: "hidden",
+  cursor: "text",
+  border: `1px solid ${theme.palette.grey[300]}`,
+}));
+
+const StyledChip = styled(Chip)(({ theme }) => ({
+  backgroundColor: theme.palette.primary[200],
+  borderRadius: 6,
+  height: theme.spacing(3),
+  marginRight: theme.spacing(0.5),
+  marginBottom: theme.spacing(0.5),
+  maxWidth: 250,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  "&:hover": {
+    backgroundColor: theme.palette.primary[200],
+  },
+  "& .MuiChip-deleteIcon": {
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+  },
+  fontSize: "11.5px",
+  fontWeight: 400,
+}));
+
+const WarningChip = styled(StyledChip)(({ theme }) => ({
+  backgroundColor: theme.palette.warning[100],
+  "& .MuiChip-icon": {
+    color: theme.palette.warning[700],
+  },
+}));
+
+const TextInput = styled(InputBase)(({ theme }) => ({
+  flexShrink: 0,
+  minWidth: 120,
+  height: "24px",
+  fontSize: "13px",
+  fontWeight: 400,
+  marginBottom: theme.spacing(0.5),
+  "& input": {
+    padding: 0,
+    width: "100%",
+    boxSizing: "border-box",
+  },
+}));
+
+const CloseIconStyled = styled(CloseIcon)(({ theme }) => ({
+  position: "relative",
+  top: "1px",
+  color: theme.palette.grey[600],
+}));
+
+const ErrorIconStyled = styled(ErrorIcon)(({ theme }) => ({
+  width: 16,
+  height: 16,
+  [`& g path:nth-of-type(2)`]: {
+    fill: theme.palette.error[500],
+  },
+}));
+
+export const BMMultiEntry: FC<BMMultiEntryProps> = ({
+  tooltipFn,
+  onChange,
+  checkWarning,
+  label,
+  placeholderText,
+  value,
+  error,
+  helperText,
+  chipIcon,
+  dataTestId,
+  disabled,
+  lowercaseEntry = false,
+  overrideHeight,
+  overrideWidth,
+  subLabel,
+  removeInvalidEntriesMsg,
+  multiEntryHitEnterMsg,
+}) => {
+  const textInputRef = useRef<HTMLInputElement>(null);
+  const [fieldInFocus, setFieldInFocus] = useState(false);
+
+  const errorArr: FieldError[] = Array.isArray(error) ? error : [];
+  const entries = Array.isArray(value)
+    ? value.map((item) => (lowercaseEntry ? item.toLowerCase() : item))
+    : (value ?? "")
+        .split(/[ ,]+/)
+        .map((item) => (lowercaseEntry ? item.toLowerCase() : item));
+
+  const updateEntries = (items: string[]) => {
+    const updated = items.map((item) =>
+      lowercaseEntry ? item.toLowerCase() : item
+    );
+    onChange?.(updated);
+  };
+
+  const handleDelete = (entry: string) => {
+    updateEntries(entries.filter((e) => e !== entry));
+  };
+
+  const handleClick = (entry: string) => {
+    handleDelete(entry);
+    if (textInputRef.current) {
+      textInputRef.current.value = entry;
+    }
+  };
+
+  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+    setFieldInFocus(false);
+    const input = e.target.value.trim();
+    if (input) {
+      const items = input.split(/[ ,]+/).filter(Boolean);
+      updateEntries(Array.from(new Set([...entries, ...items])));
+      e.target.value = "";
+    }
+  };
+
+  const handleKeyUp = throttle(
+    (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const input = e.target as HTMLInputElement;
+      const value = input.value;
+      const lastChar = value[value.length - 1];
+      if (lastChar === "," || lastChar === " " || e.key === "Enter") {
+        const items = value.split(/[ ,]+/).filter(Boolean);
+        updateEntries(Array.from(new Set([...entries, ...items])));
+        input.value = "";
+        e.preventDefault();
+      }
+    },
+    200
+  );
+
+  const handleBackspace = throttle(
+    (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const input = e.target as HTMLInputElement;
+      if (input.value.length === 0 && entries.length > 0) {
+        updateEntries(entries.slice(0, -1));
+      }
+    },
+    200
+  );
+
+  const getChipIcon = (
+    entry: string,
+    invalid: FieldError | undefined
+  ): ReactElement | undefined => {
+    if (invalid) return <ErrorIconStyled />;
+    if (chipIcon) {
+      return typeof chipIcon === "function" ? chipIcon(entry) : chipIcon;
+    }
+    return undefined;
+  };
+
+  return (
+    <>
+      {label && <Label>{label}</Label>}
+      <EntryWrapper
+        onClick={() => {
+          setFieldInFocus(true);
+          textInputRef.current?.focus();
+        }}
+        data-testid={dataTestId}
+        focus={fieldInFocus}
+        overrideHeight={overrideHeight}
+        overrideWidth={overrideWidth}
+      >
+        {entries.map((entry, index) => {
+          const invalid = errorArr[index];
+          const tooltip = invalid?.message ?? tooltipFn?.(entry) ?? undefined;
+          const warning = checkWarning?.(entry) ?? false;
+          const ChipComp = warning ? WarningChip : StyledChip;
+
+          return (
+            <BMTooltip title={tooltip ?? ""} key={`${entry}-tooltip`}>
+              <ChipComp
+                label={entry}
+                icon={getChipIcon(entry, invalid)}
+                deleteIcon={<CloseIconStyled />}
+                onDelete={() => handleDelete(entry)}
+                clickable
+                onClick={() => handleClick(entry)}
+              />
+            </BMTooltip>
+          );
+        })}
+        <TextInput
+          inputRef={textInputRef}
+          placeholder={placeholderText}
+          disabled={disabled}
+          onKeyDown={(e) => {
+            if (e.key === "Backspace") handleBackspace(e);
+            else if (e.key === "Enter")
+              handleBlur(e as unknown as FocusEvent<HTMLInputElement>);
+          }}
+          onKeyUp={handleKeyUp}
+          onBlur={handleBlur}
+        />
+      </EntryWrapper>
+
+      {subLabel && (
+        <Box
+          sx={{
+            mt: 1,
+            color: "grey.700",
+            fontSize: "11.5px",
+            fontWeight: 400,
+          }}
+        >
+          {subLabel}
+        </Box>
+      )}
+
+      {error &&
+        (textInputRef.current?.value?.length ?? 0) === 0 &&
+        helperText && (
+          <FormHelperText
+            error
+            sx={{
+              mt: 1,
+              fontSize: "11.5px",
+              fontWeight: 400,
+            }}
+          >
+            {helperText}
+          </FormHelperText>
+        )}
+
+      {Array.isArray(error) && error.length > 0 && removeInvalidEntriesMsg && (
+        <FormHelperText
+          sx={{
+            mt: 1,
+            fontSize: "11.5px",
+            fontWeight: 400,
+          }}
+          error
+        >
+          {removeInvalidEntriesMsg}
+        </FormHelperText>
+      )}
+
+      {error &&
+        (textInputRef.current?.value?.length ?? 0) > 0 &&
+        multiEntryHitEnterMsg && (
+          <FormHelperText
+            error
+            sx={{
+              mt: 1,
+              fontSize: "11.5px",
+              fontWeight: 400,
+            }}
+          >
+            {multiEntryHitEnterMsg}
+          </FormHelperText>
+        )}
+    </>
+  );
+};

package/src/components/BMMultiEntry/BMMultiEntryField.tsx

@@ -0,0 +1,47 @@
+import { ReactElement } from "react";
+import {
+  useController,
+  UseControllerProps,
+  type FieldValues,
+} from "react-hook-form";
+import { BMMultiEntry, BMMultiEntryProps } from "./BMMultiEntry";
+
+type BMMultiEntryFieldProps<T extends FieldValues> = UseControllerProps<T> &
+  BMMultiEntryProps;
+
+export const BMMultiEntryField = <T extends FieldValues>(
+  props: BMMultiEntryFieldProps<T>
+): ReactElement => {
+  const {
+    name,
+    rules,
+    defaultValue,
+    control,
+    shouldUnregister,
+    placeholderText,
+    chipIcon,
+    dataTestId,
+    ...restInputProps
+  } = props;
+  const { field, fieldState } = useController({
+    name,
+    rules,
+    defaultValue,
+    control,
+    shouldUnregister,
+  });
+
+  return (
+    <BMMultiEntry
+      {...restInputProps}
+      label={props?.label}
+      onChange={field.onChange}
+      value={field.value}
+      error={fieldState.error}
+      chipIcon={chipIcon}
+      helperText={fieldState.error?.message ?? ""}
+      placeholderText={placeholderText}
+      dataTestId={dataTestId}
+    />
+  );
+};

package/src/components/BMMultiEntry/index.ts

@@ -0,0 +1,2 @@
+export * from "./BMMultiEntry";
+export * from "./BMMultiEntryField";

package/src/components/BMMultiLevelStepper/BMMultiLevelStepper.tsx

@@ -0,0 +1,191 @@
+import { FC, useState, useEffect } from "react";
+import { Box, Typography, Avatar } from "@mui/material";
+import SuccessTick from "../../assets/icons/success-tick.svg";
+
+export type SubStep = {
+  //This objetc can be extended to add custom icons and other properties
+  title: string;
+};
+
+export type Step = {
+  groupTitle: String;
+  subSteps: SubStep[];
+};
+
+export interface BMStepperProps {
+  steps: Step[];
+  activeStep: number;
+  dataTestId: string;
+}
+
+export interface StepperProgressTracker {
+  activeStep: number;
+  totalSteps: number;
+}
+
+export const StepperProgressTracker: FC<StepperProgressTracker> = ({
+  activeStep,
+  totalSteps,
+}) => {
+  return (
+    <Box display="flex" sx={{ width: "100%", mb: 3 }} flexDirection={"column"}>
+      <Box display="flex" flexDirection={"row"} sx={{ width: "100%" }}>
+        {Array.from({ length: totalSteps }, (value, index) => index + 1).map(
+          (stepNumber, arrayIndex) => {
+            return (
+              <Box
+                sx={{
+                  height: "4px",
+                  bgcolor: stepNumber > activeStep ? "#E9EEF2" : "#A5A6F6",
+                  borderRight: "1px solid #FFFFFF",
+                  borderTopLeftRadius: arrayIndex === 0 ? "8px" : "0px",
+                  borderBottomLeftRadius: arrayIndex === 0 ? "8px" : "0px",
+                  borderTopRightRadius:
+                    stepNumber === totalSteps ? "8px" : "0px",
+                  borderBottomRightRadius:
+                    stepNumber === totalSteps ? "8px" : "0px",
+                }}
+                display={"flex"}
+                flexDirection={"row"}
+                flex={1}
+                data-testid={`step-${stepNumber}`}
+              ></Box>
+            );
+          }
+        )}
+      </Box>
+      <Box
+        display={"flex"}
+        flexDirection={"row"}
+        justifyContent={"flex-end"}
+        flex={1}
+        sx={{ pt: 1 }}
+      >
+        <Typography variant="subtitle2" sx={{ color: "#5D5FEF" }}>
+          {activeStep}
+        </Typography>
+        <Typography variant="subtitle2" sx={{ color: "#97A5B0" }}>
+          &nbsp;/&nbsp;{totalSteps}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export const BMMultiLevelStepper: FC<BMStepperProps> = ({
+  steps,
+  activeStep,
+}) => {
+  const [visitedStep, setVisitedStep] = useState(activeStep);
+  let stepCount = 0;
+
+  useEffect(() => {
+    if (visitedStep <= activeStep) setVisitedStep(activeStep);
+  }, [activeStep]);
+
+  const totalSteps = steps.reduce(
+    (accumulator, currentValue) => accumulator + currentValue.subSteps.length,
+    0
+  );
+
+  return (
+    <Box sx={{ width: "300px", p: 3 }}>
+      <StepperProgressTracker totalSteps={totalSteps} activeStep={activeStep} />
+      {steps.map(({ groupTitle, subSteps }, stepIndex) => {
+        const isMainStepInProgress =
+          stepCount + subSteps.length <= visitedStep ||
+          (stepCount < visitedStep &&
+            visitedStep < stepCount + subSteps.length);
+        return (
+          <Box key={`${stepIndex}${groupTitle}`}>
+            <Typography
+              sx={{
+                mt: 1,
+                mb: 1,
+                color: isMainStepInProgress ? "#0B1117" : "#97A5B0",
+              }}
+              variant="body1"
+            >
+              {groupTitle}
+            </Typography>
+            <Box
+              sx={{
+                ml: 2,
+                borderLeft: "1px solid #D7DEE4",
+                height: isMainStepInProgress
+                  ? "24px"
+                  : stepIndex !== steps.length - 1
+                  ? "32px"
+                  : "0px",
+              }}
+            ></Box>
+            {isMainStepInProgress &&
+              subSteps.map(({ title }, subStepIndex) => {
+                stepCount = stepCount + 1;
+                const isCurrentStepCompleted = stepCount < activeStep;
+                return (
+                  <Box
+                    key={subStepIndex + title}
+                    display={"flex"}
+                    flexDirection={"column"}
+                  >
+                    <Box
+                      display="flex"
+                      flexDirection={"row"}
+                      alignItems={"center"}
+                      sx={{ lineHeight: "16px" }}
+                    >
+                      <Avatar
+                        sx={{
+                          bgcolor: isCurrentStepCompleted
+                            ? "#CDEFE1"
+                            : stepCount === activeStep
+                            ? "#735AF5"
+                            : "#E9EEF2",
+                          height: "32px",
+                          width: "32px",
+                          color:
+                            stepCount === activeStep ? "#FFFFFF" : "#6D7C88",
+                        }}
+                      >
+                        {isCurrentStepCompleted ? (
+                          <SuccessTick />
+                        ) : (
+                          <Typography variant="body2">{stepCount}</Typography>
+                        )}
+                      </Avatar>
+                      <Typography
+                        sx={{
+                          pl: 2,
+                          color:
+                            isCurrentStepCompleted || stepCount === activeStep
+                              ? "#0B1117"
+                              : "#6D7C88",
+                        }}
+                        variant="body2"
+                      >
+                        {title}
+                      </Typography>
+                    </Box>
+
+                    {stepCount !== totalSteps && (
+                      <Box
+                        sx={{
+                          ml: 2,
+                          borderLeft: "1px solid #D7DEE4",
+                          height:
+                            subSteps.length - 1 === subStepIndex
+                              ? "24px"
+                              : "16px",
+                        }}
+                      ></Box>
+                    )}
+                  </Box>
+                );
+              })}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};

package/src/components/BMMultiLevelStepper/index.ts

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

package/src/components/BMPagination/BMPagination.tsx

@@ -0,0 +1,64 @@
+import { FC, useEffect, useState } from "react";
+import { Pagination, PaginationItem, Box } from "@mui/material";
+
+interface PaginationProps {
+  onPageSelect: (pageNo: number) => void;
+  pageSize?: number;
+  currentPage?: number;
+  hasMore?: boolean;
+  dataTestId: string;
+}
+
+/**
+ * Pagination is 1-indexed
+ */
+export const BMPagination: FC<PaginationProps> = ({
+  pageSize = 4,
+  onPageSelect,
+  currentPage,
+  hasMore,
+  dataTestId
+}) => {
+  const [page, setPage] = useState(1);
+
+  useEffect(() => {
+    if (currentPage) {
+      setPage(currentPage);
+    }
+  }, [currentPage]);
+
+  return (
+    <Pagination
+      siblingCount={1}
+      page={page}
+      boundaryCount={1}
+      shape="rounded"
+      count={pageSize}
+      onChange={(_e, newPage) => {
+        setPage(newPage);
+        onPageSelect(newPage);
+      }}
+      data-testid={dataTestId}
+      renderItem={(params) => {
+        if (params?.type === "next" && hasMore) {
+          return (
+            <Box component="span" display="flex" alignItems="center">
+              <PaginationItem
+                {...params}
+                aria-label="Go to end-ellipsis page"
+                color="standard"
+                shape="rounded"
+                size="medium"
+                type="end-ellipsis"
+                variant="text"
+                sx={{ display: "inline-flex", minWidth: 16 }}
+              />
+              <PaginationItem {...params} />
+            </Box>
+          );
+        }
+        return <PaginationItem {...params} />;
+      }}
+    />
+  );
+};

package/src/components/BMPagination/index.ts

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

package/src/components/BMPassword/BMPassword.tsx

@@ -0,0 +1,37 @@
+import { IconButton, InputAdornment } from "@mui/material";
+import { type FC, useState } from "react";
+import { BMInput, type BMInputProps } from "../BMInput";
+import Visibility from '../../assets/icons/visibility.svg';
+import VisibilityOff from '../../assets/icons/visibility-off.svg';
+
+export const BMPassword: FC<BMInputProps & { hidePasswordButton?: boolean }> = (
+	props,
+) => {
+	const [showPassword, setShowPassword] = useState(false);
+
+	const handleClickShowPassword = () => {
+		setShowPassword(!showPassword);
+	};
+	let inputProps = {};
+	if (props.hidePasswordButton) {
+		inputProps = {};
+	} else {
+		inputProps = {
+			endAdornment: (
+				<InputAdornment position="end">
+					<IconButton onClick={handleClickShowPassword} tabIndex={-1} sx={{ padding: '12px' }}>
+						{showPassword ? <Visibility /> : <VisibilityOff />}
+					</IconButton>
+				</InputAdornment>
+			),
+		};
+	}
+
+	return (
+		<BMInput
+			type={showPassword ? "text" : "password"}
+			{...props}
+			InputProps={inputProps}
+		/>
+	);
+};