@bigmath-ui-library/core 2.0.4

package/src/bma/theme/theme.ts

@@ -0,0 +1,15 @@
+import { type ThemeOptions, createTheme } from "@mui/material";
+import { deepmerge } from "@mui/utils";
+import { coreTheme } from "../../theme/theme";
+import { BMAInput, BMInputLabel } from "./BMInput";
+import { BMAAutoComplete } from "./BMAutocomplete";
+
+export const bmaTheme = createTheme(
+	deepmerge(coreTheme, {
+		components: {
+			MuiInput: BMAInput,
+			MuiInputLabel: BMInputLabel,
+			MuiAutocomplete: BMAAutoComplete
+		}
+	})as ThemeOptions,
+);

package/src/bma/theme/themeUtils.ts

@@ -0,0 +1,10 @@
+import { Theme } from "@mui/material";
+
+export const getOverrideContents = (fn: any, theme?: Theme) => {
+    if (typeof fn === 'function' && theme) {
+        return fn({ theme });
+    }
+    else {
+        return fn;
+    }
+}

package/src/components/BMAccordion/BMAccordion.tsx

@@ -0,0 +1,150 @@
+import { FC, useState, ReactNode } from "react";
+
+import {
+  Box,
+  styled,
+  useTheme,
+  Accordion,
+  AccordionProps,
+  AccordionSummary,
+  AccordionDetails,
+} from "@mui/material";
+
+import ExpandMoreIcon from "../../assets/icons/expand-more.svg";
+
+interface BMAccordionProps extends AccordionProps {
+  titleContent: ReactNode;
+  renderChips?: () => ReactNode;
+  renderChipsWithoutExpanded?: () => ReactNode;
+  isAccordionList?: boolean;
+  dataTestId?: string;
+}
+
+const StyledAccordion = styled(Accordion, {
+  shouldForwardProp: (prop) => prop !== "isAccordionList",
+})<{ isAccordionList?: boolean }>(({ theme, isAccordionList }) => ({
+  ...(isAccordionList
+    ? {
+        borderBottom: "0px transparent",
+        borderRadius: 0,
+        margin: "0px",
+        "&:first-of-type": {
+          borderTopLeftRadius: theme.spacing(1),
+          borderTopRightRadius: theme.spacing(1),
+          "& > .MuiAccordionSummary-root": {
+            borderTopLeftRadius: theme.spacing(1),
+            borderTopRightRadius: theme.spacing(1),
+          },
+        },
+        "&:last-of-type": {
+          borderBottom: `1px solid ${theme.palette.grey[300]}`,
+          "& > .MuiAccordionSummary-root": {
+            borderBottomLeftRadius: theme.spacing(1),
+            borderBottomRightRadius: theme.spacing(1),
+            "&.Mui-expanded": {
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+            },
+          },
+        },
+      }
+    : {
+        border: `1px solid ${theme.palette.grey[200]}`,
+      }),
+}));
+
+const StyledAccordionSummary = styled(AccordionSummary, {
+  shouldForwardProp: (prop) => prop !== "isAccordionList",
+})<{ isAccordionList?: boolean }>(({ theme, isAccordionList }) => ({
+  display: "flex",
+  width: "100%",
+  minHeight: isAccordionList ? theme.spacing(5.5) : theme.spacing(8),
+  paddingLeft: isAccordionList ? theme.spacing(3) : undefined,
+  paddingRight: isAccordionList ? theme.spacing(3) : undefined,
+  backgroundColor: isAccordionList ? `${theme.palette.grey[100]}40` : undefined,
+  borderBottom: isAccordionList
+    ? `1px solid ${theme.palette.grey[200]}`
+    : undefined,
+  "& .MuiAccordionSummary-content": {
+    margin: 0,
+  },
+  "&.Mui-expanded": {
+    minHeight: isAccordionList ? theme.spacing(5.5) : theme.spacing(8),
+  },
+}));
+
+const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
+  display: "inline-block",
+  width: "100%",
+  padding: theme.spacing(1, 2, 1.5),
+}));
+
+const TitleBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "isAccordionList",
+})<{ isAccordionList?: boolean }>(({ theme, isAccordionList }) => ({
+  display: "flex",
+  alignItems: "center",
+  flexGrow: 1,
+  fontWeight: 600,
+  fontSize: isAccordionList ? 13 : 15,
+  color: theme.palette.grey[900],
+}));
+
+const ShrinkContainer = styled(Box)({
+  display: "flex",
+  flexShrink: 1,
+});
+
+export const BMAccordion: FC<BMAccordionProps> = ({
+  titleContent,
+  renderChips,
+  renderChipsWithoutExpanded,
+  children,
+  defaultExpanded,
+  dataTestId,
+  isAccordionList = false,
+  ...rest
+}) => {
+  const [accordionExpanded, setAccordionExpanded] = useState<boolean>(
+    !!defaultExpanded
+  );
+  const theme = useTheme();
+
+  const handleToggle = () => {
+    setAccordionExpanded(!accordionExpanded);
+  };
+
+  const accordion = (
+    <StyledAccordion
+      expanded={accordionExpanded}
+      isAccordionList={isAccordionList}
+      data-testid={dataTestId}
+      {...rest}
+    >
+      <StyledAccordionSummary
+        onClick={handleToggle}
+        isAccordionList={isAccordionList}
+        expandIcon={
+          <ExpandMoreIcon style={{ color: theme.palette.primary[900] }} />
+        }
+      >
+        <TitleBox isAccordionList={isAccordionList}>{titleContent}</TitleBox>
+
+        {!accordionExpanded && renderChips && (
+          <ShrinkContainer>{renderChips()}</ShrinkContainer>
+        )}
+        {renderChipsWithoutExpanded && (
+          <ShrinkContainer>{renderChipsWithoutExpanded()}</ShrinkContainer>
+        )}
+      </StyledAccordionSummary>
+
+      <StyledAccordionDetails>{children}</StyledAccordionDetails>
+    </StyledAccordion>
+  );
+
+  return isAccordionList ? (
+    accordion
+  ) : (
+    <Box sx={{ display: "flex", width: "100%" }}>{accordion}</Box>
+  );
+};

package/src/components/BMAccordion/index.ts

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

package/src/components/BMAddSection/BMAddSection.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from "react";
+import { Box, Typography, TypographyProps, styled } from "@mui/material";
+
+import { BMLoadingBox } from "../BMLoadingBox";
+
+interface BMAddSectionProps {
+  title?: string | React.ReactNode;
+  body: string;
+  bodyVariant?: TypographyProps["variant"];
+  controls?: React.ReactNode | React.ReactNode[];
+}
+
+const LoadingSection = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(2, 0),
+}));
+
+export const BMAddSection: FC<BMAddSectionProps> = ({
+  title,
+  body,
+  bodyVariant,
+  controls,
+}) => {
+  return (
+    <LoadingSection>
+      <BMLoadingBox>
+        {title && (
+          <Box sx={{ mt: 1, mb: 2 }}>
+            <Typography variant="h2">{title}</Typography>
+          </Box>
+        )}
+        <Box sx={{ mb: controls ? 2 : 0 }}>
+          <Typography variant={bodyVariant ?? "body2"}>{body}</Typography>
+        </Box>
+        {controls}
+      </BMLoadingBox>
+    </LoadingSection>
+  );
+};

package/src/components/BMAddSection/index.ts

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

package/src/components/BMAlert/BMAlert.tsx

@@ -0,0 +1,168 @@
+import { Fade, Snackbar, type Theme, Typography, styled } from "@mui/material";
+import type { ReactNode } from "react";
+
+import { Close as CloseIcon } from "@mui/icons-material";
+import LoadingIcon from "../../assets/icons/Default-Loading-Circles.svg";
+import WarningIcon from "../../assets/icons/alert.svg";
+import SuccessIcon from "../../assets/icons/circle-check.svg";
+import InfoIcon from "../../assets/icons/info.svg";
+import ErrorIcon from "../../assets/icons/warning.svg";
+
+export enum AlertVariant {
+	Info = "info",
+	Warning = "warning",
+	Error = "error",
+	Success = "success",
+	InProgress = "inProgress",
+}
+
+const DEFAULT_AUTO_DISMISS_MS = 6000;
+
+interface TransitionProps {
+	appear?: number;
+	enter?: number;
+	exit?: number;
+}
+
+export interface BMAlertProps {
+	open: boolean;
+	text: string | ReactNode;
+	icon?: ReactNode;
+	onClose?: () => void;
+	autoDismiss?: number;
+	width?: number;
+	isToast?: boolean;
+	variant?: AlertVariant;
+	key?: string | number;
+	position?: number;
+	className?: string;
+	dataTestId?: string;
+	transitionTimeout?: number | TransitionProps;
+}
+
+const BMAlertDiv = styled("div")<Partial<BMAlertProps>>(
+	({ theme, position, isToast, width, variant = AlertVariant.Info }) => ({
+		padding: theme.spacing(1),
+		borderRadius: theme.shape.borderRadius,
+		display: "flex",
+		alignItems: "center",
+		marginTop: (position ?? 0) * 58,
+		width: width === undefined ? "auto" : `${width}px`,
+		background: (theme.palette as unknown as Record<string, string>)[
+			variant === AlertVariant.InProgress ? AlertVariant.Info : variant
+		][100],
+		...(isToast && {
+			// padding: theme.spacing(1.5, 1),
+			border: `1px solid ${(theme.palette as unknown as Record<string, string>)[variant === AlertVariant.InProgress ? AlertVariant.Info : variant][300]}`,
+			boxShadow: "0 0 4px 0 rgba(0,0,0,0.1)",
+			minWidth: "200px",
+		}),
+	}),
+);
+
+const BMAlertText = styled(Typography)(({ theme }) => ({
+	marginLeft: theme.spacing(1),
+	marginRight: "auto",
+	fontWeight: 400,
+	color: '#0B1116'
+}));
+
+const BMAlertCloseIcon = styled(CloseIcon)(({ theme }) => ({
+	height: theme.spacing(1.5),
+	width: theme.spacing(1.5),
+	fill: theme.palette.text.primary,
+	marginRight: theme.spacing(0.5),
+	marginLeft: theme.spacing(1.5),
+	cursor: "pointer",
+}));
+
+const iconStyles = ({
+	theme,
+	variant,
+}: { theme: Theme; variant: AlertVariant }) => ({
+	width: theme.spacing(3),
+	height: theme.spacing(3),
+	minWidth: theme.spacing(3),
+	minHeight: theme.spacing(3),
+	color: (theme.palette as unknown as Record<string, string>)[
+		variant === AlertVariant.InProgress ? AlertVariant.Info : variant
+	][700],
+});
+
+const GetAlertIcon = (variant: AlertVariant) => {
+	const icons = {
+		[AlertVariant.Warning]: WarningIcon,
+		[AlertVariant.Success]: SuccessIcon,
+		[AlertVariant.Error]: ErrorIcon,
+		[AlertVariant.InProgress]: LoadingIcon,
+		[AlertVariant.Info]: InfoIcon,
+	};
+
+	return styled(icons[variant])(({ theme }) => iconStyles({ theme, variant }));
+};
+
+export const BMAlert = (props: BMAlertProps) => {
+	const {
+		open,
+		text,
+		autoDismiss,
+		dataTestId,
+		onClose,
+		variant = AlertVariant.Info,
+		isToast = false,
+		width,
+		icon,
+		className,
+		transitionTimeout,
+		...alertProps
+	} = props;
+
+	const handleClose = (_event: unknown, reason: string) => {
+		if (reason === "clickaway") {
+			return;
+		}
+		if (onClose) {
+			onClose();
+		}
+	};
+
+	const AlertIcon = GetAlertIcon(variant);
+
+	if (isToast) {
+		return (
+			<Snackbar
+				open={open}
+				autoHideDuration={autoDismiss ?? DEFAULT_AUTO_DISMISS_MS}
+				TransitionComponent={Fade}
+				anchorOrigin={{ vertical: "top", horizontal: "center" }}
+				onClose={handleClose}
+				{...alertProps}
+			>
+				<BMAlertDiv
+					data-testid={dataTestId}
+					role="alert"
+					aria-label={`alert ${variant}`}
+					{...props}
+				>
+					{icon ?? <AlertIcon />}
+					<BMAlertText variant="body2">{text}</BMAlertText>
+					{onClose && <BMAlertCloseIcon onClick={onClose} />}
+				</BMAlertDiv>
+			</Snackbar>
+		);
+	}
+	return (
+		<Fade in={open} timeout={transitionTimeout}>
+			<BMAlertDiv
+				role="alert"
+				data-testid={dataTestId}
+				aria-label={`alert ${variant}`}
+				{...props}
+			>
+				{icon ?? <AlertIcon />}
+				<BMAlertText>{text}</BMAlertText>
+				{onClose && <BMAlertCloseIcon onClick={onClose} />}
+			</BMAlertDiv>
+		</Fade>
+	);
+};

package/src/components/BMAlert/index.ts

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

package/src/components/BMAutoComplete/BMAutoComplete.tsx

@@ -0,0 +1,86 @@
+import { FC, useCallback } from "react";
+import { Autocomplete, AutocompleteProps, Paper } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { BMInput, BMInputProps } from "../../components/BMInput";
+import { BMTooltip } from "../BMTooltip/BMTooltip";
+import CaretDownIcon from "../../assets/icons/caret-down.svg";
+import CloseIcon from "../../assets/icons/close-basic.svg";
+
+declare module "@mui/material/Autocomplete" {
+  interface AutocompletePropsSizeOverrides {
+    large: true;
+  }
+}
+
+export interface BMAutoCompleteProps
+  extends Omit<
+    AutocompleteProps<Record<string, string>, boolean, boolean, boolean>,
+    "renderInput"
+  > {
+  getOptionLabel: (option: string | Record<string, string>) => string;
+  getOptionDisabled?: (option: Record<string, string>) => boolean;
+  bmInputProps?: BMInputProps;
+  autoCompleteDropdownID?: string;
+  tooltipText?: string | React.ReactNode;
+  size?: "medium" | "large";
+  dataTestId: string;
+}
+
+const CloseStyledIcon = styled(CloseIcon)(({ theme }) => ({
+  color: theme.palette.grey[600],
+}));
+
+export const BMAutoComplete: FC<BMAutoCompleteProps> = ({
+  bmInputProps,
+  options,
+  getOptionLabel,
+  getOptionDisabled,
+  autoCompleteDropdownID,
+  tooltipText,
+  dataTestId,
+  ...rest
+}: BMAutoCompleteProps) => {
+  const memoPaperComp = useCallback(
+    ({ children }: { children?: React.ReactNode }) => {
+      return <Paper data-testid={autoCompleteDropdownID}>{children}</Paper>;
+    },
+    [autoCompleteDropdownID]
+  );
+
+  return (
+    <Autocomplete
+      options={options}
+      autoHighlight
+      autoSelect
+      getOptionLabel={getOptionLabel}
+      getOptionDisabled={getOptionDisabled}
+      popupIcon={<CaretDownIcon />}
+      clearIcon={<CloseStyledIcon />}
+      slotProps={{
+        chip: {
+          deleteIcon: <CloseStyledIcon />,
+        },
+        paper: memoPaperComp,
+      }}
+      data-testid={dataTestId}
+      renderInput={(params) => (
+        <BMTooltip placement="top-start" title={tooltipText ?? ""}>
+          <span>
+            <BMInput
+              dataTestId={`${dataTestId}-input`}
+              {...params}
+              {...bmInputProps}
+              slotProps={{
+                input: {
+                  ...params.InputProps,
+                  ...bmInputProps?.slotProps?.input,
+                },
+              }}
+            />
+          </span>
+        </BMTooltip>
+      )}
+      {...rest}
+    />
+  );
+};

package/src/components/BMAutoComplete/index.ts

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

package/src/components/BMAvatar/BMAvatar.tsx

@@ -0,0 +1,45 @@
+import { FC } from "react";
+import { styled } from "@mui/material/styles";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+
+import { BMAvatarSizeMap } from "../../theme/BMAvatar";
+
+export interface AvatarProps {
+  size?: "small" | "medium" | "large";
+  imageUrl?: string;
+}
+
+const getSizeDimension = (_: any, size: "small" | "medium" | "large") => {
+  return BMAvatarSizeMap[size] || BMAvatarSizeMap?.medium;
+};
+
+const StyledImage = styled("img")<{
+  size: "small" | "medium" | "large";
+}>(({ theme, size }) => {
+  const dimension = getSizeDimension(theme, size);
+
+  return {
+    width: dimension,
+    height: dimension,
+    borderRadius: "50%",
+    objectFit: "cover",
+  };
+});
+
+const StyledIcon = styled(AccountCircleIcon)<{
+  size: "small" | "medium" | "large";
+}>(({ theme, size }) => {
+  const dimension = getSizeDimension(theme, size);
+  return {
+    width: dimension,
+    height: dimension,
+  };
+});
+
+export const BMAvatar: FC<AvatarProps> = ({ size = "medium", imageUrl }) => {
+  if (!imageUrl) {
+    return <StyledIcon size={size} />;
+  }
+
+  return <StyledImage src={imageUrl} size={size} alt="avatar" />;
+};

package/src/components/BMAvatar/index.ts

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

package/src/components/BMButton/BMButton.tsx

@@ -0,0 +1,46 @@
+import { Box, type ButtonProps, CircularProgress } from "@mui/material";
+import Button from "@mui/material/Button";
+import type { OverridableStringUnion } from '@mui/types';
+
+export interface BMAButtonVariantOverride {}
+
+export interface BMButtonProps
+	extends Omit<ButtonProps, "classes" | "variant" | "size`"> {
+	showSpinner?: boolean;
+	variant?: OverridableStringUnion<"primary" | "secondary" | "ghost" | "gradient", BMAButtonVariantOverride>;
+	size?: "small" | "large" | "medium";
+	dataTestId: string;
+}
+
+export const BMButton: React.FC<BMButtonProps> = (props) => {
+	const { showSpinner, variant = "primary", size, color, ...muiProps } = props;
+	const muiButtonProps: BMButtonProps = muiProps;
+
+	if (showSpinner) {
+		muiButtonProps.startIcon = (
+			<Box color={props.disabled ? "grey.500" : ""}>
+				<CircularProgress
+					size={16}
+					sx={{
+						color: props.disabled
+							? "inherit"
+							: variant && ["primary", "gradient"].includes(variant)
+								? "white"
+								: "primary",
+					}}
+					thickness={5}
+				/>
+			</Box>
+		);
+	}
+
+	return (
+		<Button
+			{...muiButtonProps}
+			size={size}
+			color={color ?? muiButtonProps.color}
+			variant={variant as ButtonProps['variant']}
+			data-testid={props.dataTestId}
+		/>
+	);
+};

package/src/components/BMButton/BMButtonGroup.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { BMButton, BMButtonProps } from './BMButton';
+import { ButtonGroup } from '@mui/material';
+
+export interface BMButtonGroupProps {
+    buttons: {
+        label: string;
+        onClick: () => void;
+        buttonProps?: BMButtonProps;
+    }[];
+    active?: string;
+    className?: string;
+    orientation?: 'horizontal' | 'vertical';
+    dataTestId: string;
+}
+
+export const BMButtonGroup: React.FC<BMButtonGroupProps> = ({
+    buttons,
+    className,
+    active,
+    dataTestId,
+    orientation = 'horizontal',
+}) => {
+    const [activeBut, setActiveBut] = React.useState<string | null>(active ?? null);
+    return (
+        <ButtonGroup orientation={orientation} className={className}>
+            {buttons.map((button, index) => (
+                <>
+                    <BMButton
+                        key={index}
+                        onClick={() => {
+                            setActiveBut(button.label);
+                            button.onClick();
+                        }}
+                        {...button.buttonProps}
+                        className={`${button.buttonProps?.className} ${button.label === activeBut ? 'bm-active' : ''}`}
+                        dataTestId={`${dataTestId}-${button.label}`}
+                    >
+                        {button.label}
+                        {(index !== buttons.length - 1 && activeBut !== button.label) && <div className="bm-divider" />}
+                    </BMButton>
+                </>
+            ))}
+        </ButtonGroup>
+    );
+};

package/src/components/BMButton/BMSplitButton.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { BMButton, BMButtonProps } from '../BMButton/BMButton';
+import { Menu, MenuItem, MenuProps } from '@mui/material';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
+
+export interface BMSplitButtonProps extends BMButtonProps {
+    label: string;
+    options: { label: string; onClick: () => void }[];
+    menuProps: Partial<MenuProps>;
+    ButtonComp?: React.ElementType;
+    dataTestId: string;
+}
+
+export const BMSplitButton: React.FC<BMSplitButtonProps> = ({
+    label,
+    options,
+    menuProps,
+    ButtonComp=BMButton,
+    ...props
+}) => {
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    let [buttonRef, setButtonRef] = useState<HTMLButtonElement|null>(null);
+    const handleDropdownClick = (event: React.MouseEvent<HTMLElement>) => {
+        !buttonRef && setButtonRef(event.currentTarget as HTMLButtonElement);
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (
+        <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+            <ButtonComp
+                onClick={handleDropdownClick}
+                style={{ marginLeft: '4px', padding: '0 8px' }}
+                data-testid={props.dataTestId}
+                {...props}
+            >
+                {label}
+                <ArrowDropDownIcon />
+            </ButtonComp>
+
+            <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+                PaperProps={{
+                    style: {
+                        width: buttonRef?.clientWidth
+                    }
+                }}
+                {...menuProps}
+            >
+                {options?.map((option, index) => (
+                    <MenuItem
+                        key={index}
+                        onClick={() => {
+                            option.onClick();
+                            handleClose();
+                        }}
+                        data-testid={`${props.dataTestId}-${option.label}`}
+                    >
+                        {option.label}
+                    </MenuItem>
+                ))}
+            </Menu>
+        </div>
+    );
+};