@bigmath-ui-library/core 2.0.4

package/src/components/BMPassword/BMPasswordField.tsx

@@ -0,0 +1,50 @@
+import { type ReactElement, useEffect, useRef } from "react";
+import {
+	type FieldValues,
+	type UseControllerProps,
+	useController,
+} from "react-hook-form";
+import type { BMInputProps } from "../BMInput";
+import { BMPassword } from "./BMPassword";
+
+type BMPasswordFieldProps<T extends FieldValues> = UseControllerProps<T> &
+	BMInputProps & { hidePasswordButton?: boolean };
+
+export const BMPasswordField = <T extends FieldValues>(
+	props: BMPasswordFieldProps<T>,
+): ReactElement => {
+	const inputElement = useRef<HTMLInputElement | null>(null) as React.MutableRefObject<HTMLInputElement | null>;
+	const {
+		name,
+		rules,
+		defaultValue,
+		control,
+		shouldUnregister,
+		...bmInputProps
+	} = props;
+	const {
+		field: { ref, value, ...fieldProps },
+		fieldState,
+	} = useController({ name, rules, defaultValue, control, shouldUnregister });
+
+	// assign value to input directly as using "value" prop will reveal password as plain text in "value" attribute in DOM
+	// useEffect() is important because on the very first render ref is not defined yet and field initiation won't happen
+	useEffect(() => {
+		if (inputElement.current) {
+			inputElement.current.value = value ? (value as string) : "";
+		}
+	}, [value]);
+
+	return (
+		<BMPassword
+			{...fieldProps}
+			{...bmInputProps}
+			inputRef={(element: HTMLInputElement) => {
+				inputElement.current = element;
+				ref(element);
+			}}
+			error={!!fieldState.error}
+			helperText={fieldState.error?.message ?? bmInputProps.helperText}
+		/>
+	);
+};

package/src/components/BMPassword/index.ts

@@ -0,0 +1,2 @@
+export * from "./BMPassword";
+export * from "./BMPasswordField";

package/src/components/BMProgress/BMProgress.tsx

@@ -0,0 +1,43 @@
+import {
+	LinearProgress,
+	type LinearProgressProps,
+	linearProgressClasses,
+	styled,
+} from "@mui/material";
+import type { FC } from "react";
+
+const BMProgressBar = styled(LinearProgress)(({ theme, color }) => ({
+	flexGrow: 1,
+	height: theme.spacing(1),
+	borderRadius: theme.spacing(0.5),
+	backgroundColor: theme.palette.grey[200],
+	boxShadow: `inset ${(theme.shape as unknown as Record<string, string>).shadowLight}`,
+	[`&.${linearProgressClasses.colorPrimary}`]: {
+		boxShadow: ({ flat }: { flat: boolean }) =>
+			flat
+				? "none"
+				: `inset ${(theme.shape as unknown as Record<string, string>).shadowLight}`,
+	},
+	[`& .${linearProgressClasses.bar}`]: {
+		borderRadius: theme.spacing(0.5),
+		backgroundColor: color || theme.palette.primary.main,
+	},
+}));
+
+export interface ProgressProps {
+	color?: LinearProgressProps["color"] | (string & {});
+	value?: number;
+}
+
+export const BMProgress: FC<ProgressProps> = ({
+	color = "primary",
+	value = 0,
+}: ProgressProps) => {
+	return (
+		<BMProgressBar
+			variant="determinate"
+			value={value}
+			color={color as LinearProgressProps["color"]}
+		/>
+	);
+};

package/src/components/BMProgress/index.ts

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

package/src/components/BMRadio/BMRadio.tsx

@@ -0,0 +1,162 @@
+import {
+	FormLabel,
+	type InputProps,
+	Radio,
+	RadioGroup,
+	type RadioGroupProps,
+	type RadioProps,
+	type Theme,
+	styled,
+} from "@mui/material";
+import type { FC, ReactNode } from "react";
+import { BMFormControlLabel } from "../BMForm/BMFormControlLabel";
+
+const StyledRadio = styled(Radio)(({ theme }) => ({
+	"&:hover": {
+		backgroundColor: "transparent",
+	},
+	padding: 0,
+	paddingRight: theme.spacing(1),
+}));
+
+const iconStyles = (theme: Theme, disabled = false) => ({
+	borderRadius: "50%",
+	width: theme.spacing(2),
+	height: theme.spacing(2),
+	boxShadow: `inset 0 0 0 2px ${theme.palette.grey[400]}, inset 0 -1px 0 ${theme.palette.grey[400]}`,
+	backgroundColor: disabled ? theme.palette.grey[200] : theme.palette.common.white,
+	backgroundImage:
+		"linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))",
+});
+
+const disabledCheckedIconStyles = (theme: Theme) => ({
+	backgroundColor: theme.palette.grey[300],
+	backgroundImage:
+		"linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))",
+	boxShadow: "none",
+	"&:before": {
+		display: "block",
+		width: theme.spacing(2),
+		height: theme.spacing(2),
+		backgroundImage: `radial-gradient(${theme.palette.grey[200]},${theme.palette.grey[200]} 28%,transparent 32%)`,
+		content: '""',
+	}
+});
+
+const checkedIconStyles = (theme: Theme) => ({
+	backgroundColor: theme.palette.primary.main,
+	backgroundImage:
+		"linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))",
+	boxShadow: "none",
+	"&:before": {
+		display: "block",
+		width: theme.spacing(2),
+		height: theme.spacing(2),
+		backgroundImage: `radial-gradient(${theme.palette.common.white},${theme.palette.common.white} 28%,transparent 32%)`,
+		content: '""',
+	},
+	"input:hover ~ &": {
+		backgroundColor: theme.palette.primary.main,
+	},
+});
+
+const CheckedIcon = styled("span")(({ theme, disabled }: { theme: Theme, disabled: boolean }) => ({
+	...iconStyles(theme),
+	... (disabled ? disabledCheckedIconStyles(theme) : checkedIconStyles(theme)),
+}));
+
+const Icon = styled("span")(({ theme, disabled }: { theme: Theme, disabled: boolean }) => ({
+	...iconStyles(theme, disabled),
+}));
+
+const StyledFormLabel = styled(FormLabel)(({ theme }) => ({
+	...theme.typography.subtitle2,
+	fontWeight: theme.typography.fontWeightMedium as number,
+	fontSize: theme.typography.subtitle1.fontSize,
+	textTransform: "uppercase",
+	marginBottom: theme.spacing(0.5),
+	marginTop: theme.spacing(0.5),
+}));
+
+export interface BMRadioProps extends RadioProps {
+	inputProps?: InputProps["inputProps"]; // override type to make it accept custom attributes like "data-testid"
+	label?: string;
+	dataTestId: string;
+}
+
+export const BMRadio: FC<BMRadioProps> = (props) => {
+	const Radio = <StyledRadio
+		className={props.className}
+		color="default"
+		{...props}
+		checkedIcon={<CheckedIcon />}
+		icon={<Icon />}
+	/>;
+	if (props.label) {
+		return (
+			<BMFormControlLabel
+				control={Radio}
+				label={props.label}
+				disabled={props.disabled}
+			/>
+		);
+	}
+	return Radio;
+};
+
+export interface OptionProps {
+	value: string;
+	label: ReactNode;
+	disabled?: boolean;
+	"data-testid"?: string;
+}
+
+export enum RadioOrientation {
+	Vertical = "vertical",
+	Horizontal = "horizontal",
+}
+
+export interface BMRadioGroupProps extends RadioGroupProps {
+	label?: ReactNode;
+	options: OptionProps[];
+	orientation?: RadioOrientation;
+	dataTestId: string;
+
+}
+
+export const BMRadioGroup: FC<BMRadioGroupProps> = ({
+	label,
+	options = [],
+	orientation = RadioOrientation.Vertical,
+	className,
+	dataTestId,
+	...muiRadioGroupProps
+}) => {
+	return (
+		<>
+			{label && <StyledFormLabel>{label}</StyledFormLabel>}
+			<RadioGroup
+				className={className}
+				sx={
+					orientation === "horizontal"
+						? { flexDirection: "row", margin: 0 }
+						: {}
+				}
+				aria-label="radio-group"
+				{...muiRadioGroupProps}
+			>
+				{options.map((option) => (
+					<BMFormControlLabel
+						key={`form-radio-option-${option.value}`}
+						value={option.value}
+						control={
+							<BMRadio dataTestId={`${dataTestId}-${option['data-testid']}`} inputProps={{ "data-testid": option["data-testid"] }} />
+						}
+						label={option.label}
+						disabled={option.disabled}
+					/>
+				))}
+			</RadioGroup>
+		</>
+	);
+};

package/src/components/BMRadio/BMRadioGroupField.tsx

@@ -0,0 +1,40 @@
+import { ReactElement } from "react";
+
+import {
+  FieldValues,
+  useController,
+  UseControllerProps,
+} from "react-hook-form";
+
+import { BMRadioGroup, BMRadioGroupProps } from "./BMRadio";
+
+export type BMRadioGroupFieldProps<T extends FieldValues> = UseControllerProps<T> &
+  Omit<BMRadioGroupProps, "value" | "onChange" | "onBlur" | "name">;
+
+export const BMRadioGroupField = <T extends FieldValues>(
+  props: BMRadioGroupFieldProps<T>
+): ReactElement => {
+  const { name, control, rules, defaultValue, shouldUnregister, ...restProps } =
+    props;
+
+  const { field } = useController({
+    name,
+    control,
+    rules,
+    defaultValue,
+    shouldUnregister,
+  });
+
+  return (
+    <BMRadioGroup
+      name={field.name}
+      value={field.value ?? ""}
+      onChange={field.onChange}
+      onBlur={field.onBlur}
+      label={restProps.label}
+      orientation={restProps.orientation}
+      className={restProps.className}
+      {...restProps}
+    />
+  );
+};

package/src/components/BMRadio/index.ts

@@ -0,0 +1,2 @@
+export * from "./BMRadio";
+export * from "./BMRadioGroupField";

package/src/components/BMSelect/BMSelect.tsx

@@ -0,0 +1,70 @@
+import { FC, ReactNode } from "react";
+import {
+  TextField,
+  StandardTextFieldProps,
+  MenuProps,
+  SelectProps,
+  SlotProps,
+  TextFieldOwnerState,
+} from "@mui/material";
+import { BMTooltip } from "../BMTooltip/BMTooltip";
+import CaretDownIcon from "../../assets/icons/caret-down.svg";
+
+export type BMSelectProps = {
+  tooltip?: ReactNode;
+  renderValue?: (value: unknown) => ReactNode;
+  menuProps?: Partial<MenuProps>;
+  size?: "medium" | "large";
+  selectProps?: Partial<
+    SlotProps<React.ElementType<SelectProps>, {}, TextFieldOwnerState>
+  >;
+  dataTestId: string;
+} & Omit<
+  StandardTextFieldProps,
+  | "variant"
+  | "color"
+  | "classes"
+  | "select"
+  | "placeholder"
+  | "FormHelperTextProps"
+  | "SelectProps"
+>;
+
+export const BMSelect: FC<BMSelectProps> = ({
+  label,
+  tooltip,
+  renderValue,
+  menuProps,
+  selectProps = {},
+  dataTestId,
+  ...props
+}) => (
+  <TextField
+    {...props}
+    label={
+      label ? (
+        <>
+          {label} {tooltip && <BMTooltip title={tooltip} />}
+        </>
+      ) : null // don't render <Label> if it's empty
+    }
+    select
+    data-testid={dataTestId}
+    slotProps={{
+      select: {
+        autoWidth: false,
+        IconComponent: CaretDownIcon,
+        renderValue,
+        MenuProps: {
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "left",
+          },
+          ...menuProps,
+        },
+        ...selectProps,
+      },
+    }}
+    variant="standard"
+  />
+);

package/src/components/BMSelect/BMSelectField.tsx

@@ -0,0 +1,47 @@
+import { ReactElement } from "react";
+
+import {
+  FieldValues,
+  useController,
+  UseControllerProps,
+} from "react-hook-form";
+
+import { BMSelect, BMSelectProps } from "./BMSelect";
+
+type BMSelectFieldProps<T extends FieldValues> = UseControllerProps<T> &
+  BMSelectProps;
+
+export const BMSelectField = <T extends FieldValues>(
+  props: BMSelectFieldProps<T>
+): ReactElement => {
+  const {
+    name,
+    rules,
+    defaultValue,
+    control,
+    shouldUnregister,
+    children,
+    helperText,
+    ...bmSelectProps
+  } = props;
+
+  const {
+    field: { onChange, onBlur, value, name: fieldName, ref },
+    fieldState: { error },
+  } = useController({ name, rules, defaultValue, control, shouldUnregister });
+
+  return (
+    <BMSelect
+      {...bmSelectProps}
+      name={fieldName}
+      value={value}
+      onChange={onChange}
+      onBlur={onBlur}
+      inputRef={ref}
+      error={!!error}
+      helperText={error?.message ?? helperText}
+    >
+      {children}
+    </BMSelect>
+  );
+};

package/src/components/BMSelect/index.ts

@@ -0,0 +1,2 @@
+export * from "./BMSelect";
+export * from "./BMSelectField";

package/src/components/BMSlider/BMSlider.tsx

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from "react";
+import { Slider, SliderProps } from "@mui/material";
+
+export type Mark = {
+  value: number;
+  label?: ReactNode;
+};
+
+export interface BMSliderProps extends SliderProps {
+  marksList: Mark[];
+  dataTestId: string;
+}
+
+export const BMSlider: FC<BMSliderProps> = ({ marksList, dataTestId, ...props }) => {
+  return <Slider valueLabelDisplay="on" marks={[...marksList]} {...props} data-testid={dataTestId} />;
+};

package/src/components/BMSlider/index.ts

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

package/src/components/BMSmartStatus/BMSmartStatus.tsx

@@ -0,0 +1,185 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+import SuccessIcon from "@coreApp/assets/icons/success-tick.svg";
+import LoadingIcon from "@coreApp/assets/icons/Default-Loading-Circles.svg";
+import FailedIcon from "@coreApp/assets/icons/failed-solid.svg";
+import AlertIcon from "@coreApp/assets/icons/alert.svg";
+import InactiveIcon from "@coreApp/assets/icons/in-active.svg";
+import TimerIcon from "@coreApp/assets/icons/timer.svg";
+import ShieldIcon from "@coreApp/assets/icons/shield.svg";
+
+export enum StatusType {
+  SUCCESS = "SUCCESS",
+  IN_PROGRESS = "IN_PROGRESS",
+  PENDING = "PENDING",
+  ERROR = "ERROR",
+  WARNING = "WARNING",
+  INACTIVE = "INACTIVE",
+  OTHER = "OTHER",
+}
+
+export enum IconPosition {
+  PREFIX = "PREFIX",
+  SUFFIX = "SUFFIX",
+}
+
+export interface BMSmartStatusProps {
+  type: StatusType;
+  label?: string;
+  className?: string;
+  iconPosition?: IconPosition;
+}
+
+interface StyledProps {
+  $type: StatusType;
+}
+
+const getStatusContainerStyles = (theme: any, $type: StatusType) => {
+  switch ($type) {
+    case StatusType.SUCCESS:
+      return {
+        backgroundColor: theme.palette.success[100],
+        color: theme.palette.success[700],
+      };
+    case StatusType.IN_PROGRESS:
+      return {
+        backgroundColor: theme.palette.info[200],
+        color: theme.palette.primary[700],
+      };
+    case StatusType.PENDING:
+      return {
+        backgroundColor: theme.palette.warning[100],
+        color: theme.palette.warning[900],
+      };
+    case StatusType.ERROR:
+      return {
+        backgroundColor: theme.palette.error[100],
+        color: theme.palette.error[700],
+      };
+    case StatusType.WARNING:
+      return {
+        backgroundColor: theme.palette.warning[100],
+        color: theme.palette.warning[900],
+      };
+    case StatusType.INACTIVE:
+      return {
+        backgroundColor: theme.palette.grey[200],
+        color: theme.palette.grey[700],
+        opacity: 0.7,
+      };
+    case StatusType.OTHER:
+      return {
+        backgroundColor: theme.palette.secondary[200],
+        color: theme.palette.secondary.main,
+      };
+    default:
+      return {};
+  }
+};
+
+const StatusContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== '$type',
+})<StyledProps>(({ theme, $type }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: theme.spacing(0.75),
+  padding: theme.spacing(0.5, 1),
+  borderRadius: theme.shape.borderRadius - 2,
+  fontSize: theme.typography.body2.fontSize,
+  fontWeight: 500,
+  width: "fit-content",
+  ...getStatusContainerStyles(theme, $type),
+}));
+
+const getStatusIconStyles = (theme: any, $type: StatusType) => {
+  switch ($type) {
+    case StatusType.SUCCESS:
+      return {
+        color: theme.palette.success[500],
+        paddingTop: theme.spacing(1),
+        width: "10px",
+        height: "8px",
+      };
+    case StatusType.IN_PROGRESS:
+      return { color: theme.palette.primary[600] };
+    case StatusType.PENDING:
+      return { color: theme.palette.warning[500] };
+    case StatusType.ERROR:
+      return { color: theme.palette.error[500] };
+    case StatusType.WARNING:
+      return { color: theme.palette.warning[500] };
+    case StatusType.OTHER:
+      return { color: theme.palette.grey[600] };
+    case StatusType.INACTIVE:
+      return {
+        color: theme.palette.grey[600],
+        opacity: 0.7,
+      };
+    default:
+      return {};
+  }
+};
+
+const StatusIcon = styled("span", {
+  shouldForwardProp: (prop) => prop !== '$type',
+})<StyledProps>(({ theme, $type }) => ({
+  width: "16px",
+  height: "16px",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+
+  "& svg": {
+    width: "16px",
+    height: "16px",
+  },
+
+  ...getStatusIconStyles(theme, $type),
+}));
+
+const getStatusIcon = (type: StatusType) => {
+  switch (type) {
+    case StatusType.SUCCESS:
+      return <SuccessIcon />;
+    case StatusType.IN_PROGRESS:
+      return <LoadingIcon />;
+    case StatusType.PENDING:
+      return <TimerIcon />;
+    case StatusType.ERROR:
+      return <FailedIcon />;
+    case StatusType.WARNING:
+      return <AlertIcon />;
+    case StatusType.INACTIVE:
+      return <InactiveIcon />;
+    case StatusType.OTHER:
+      return <ShieldIcon />;
+    default:
+      return null;
+  }
+};
+
+export const BMSmartStatus: React.FC<BMSmartStatusProps> = ({
+  type,
+  label,
+  className,
+  iconPosition = IconPosition.SUFFIX,
+}) => {
+  const displayLabel =
+    label ||
+    type
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ");
+
+  const icon = <StatusIcon $type={type}>{getStatusIcon(type)}</StatusIcon>;
+
+  return (
+    <StatusContainer $type={type} className={className}>
+      {iconPosition === IconPosition.PREFIX && icon}
+      {displayLabel}
+      {iconPosition === IconPosition.SUFFIX && icon}
+    </StatusContainer>
+  );
+};
+
+export default BMSmartStatus;

package/src/components/BMSmartStatus/index.tsx

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