@bigmath-ui-library/core 2.0.4

package/src/components/BMToggle/BMToggle.tsx

@@ -0,0 +1,35 @@
+import {
+	type FormControlLabelProps,
+	type InputProps,
+	Switch,
+	type SwitchProps,
+} from "@mui/material";
+import type { FC } from "react";
+import { BMFormControlLabel } from "../BMForm/BMFormControlLabel";
+
+export interface BMToggleProps extends SwitchProps {
+	label?: string;
+	formControlLabelProps?: Partial<FormControlLabelProps>;
+	inputProps?: InputProps["inputProps"];
+	dataTestId: string;
+}
+
+export const BMToggle: FC<BMToggleProps> = ({
+	label,
+	formControlLabelProps,
+	...switchProps
+}: BMToggleProps) => {
+	return (
+		<BMFormControlLabel
+			control={
+				<Switch
+					color={switchProps.disabled ? "default" : "primary"}
+					{...switchProps}
+				/>
+			}
+			labelPlacement="end"
+			label={label}
+			{...formControlLabelProps}
+		/>
+	);
+};

package/src/components/BMToggle/BMToggleField.tsx

@@ -0,0 +1,28 @@
+import type { ReactElement } from "react";
+import {
+	type FieldValues,
+	type UseControllerProps,
+	useController,
+} from "react-hook-form";
+import { BMToggle, type BMToggleProps } from "./BMToggle";
+
+type BMInputFieldProps<T extends FieldValues> = UseControllerProps<T> &
+	BMToggleProps;
+
+export const BMToggleField = <T extends FieldValues>(
+	props: BMInputFieldProps<T>,
+): ReactElement => {
+	const {
+		name,
+		rules,
+		defaultValue,
+		control,
+		shouldUnregister,
+		...bmToggleProps
+	} = props;
+	const {
+		field: { ref, value, ...fieldProps },
+	} = useController({ name, rules, defaultValue, control, shouldUnregister });
+
+	return <BMToggle {...fieldProps} {...bmToggleProps} checked={!!value} />;
+};

package/src/components/BMToggle/index.ts

@@ -0,0 +1,3 @@
+export * from "./BMToggle";
+export * from "./BMToggleField";
+export * from "./BMMultiToggleButton";

package/src/components/BMTooltip/BMTooltip.tsx

@@ -0,0 +1,52 @@
+import { FC, ReactElement, useLayoutEffect, useRef, useState } from "react";
+import { Box, Tooltip, TooltipProps, PopperProps } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import InfoSolidIcon from "../../assets/icons/info-solid.svg";
+
+// make children optional and add dark style
+export type BMTooltipProps = {
+  children?: ReactElement;
+  smart?: boolean; // don't show tooltip on hover if content is not truncated and fits in the container
+  PopperProps?: Partial<PopperProps> & { "data-testid"?: string };
+} & Omit<TooltipProps, "children">;
+
+const InfoStyledIcon = styled(InfoSolidIcon)(({ theme }) => ({
+  width: 14,
+  height: 14,
+  cursor: "pointer",
+  color: theme.palette.grey[500],
+}));
+
+export const BMTooltip: FC<BMTooltipProps> = ({
+  children,
+  smart,
+  ...props
+}) => {
+  const childrenRef = useRef<HTMLElement>(null);
+  const [fitsContainer, setFitsContainer] = useState(false);
+
+  // make child measurements after all DOM mutations and update tooltip visibility via state change and re-render
+  useLayoutEffect(() => {
+    if (smart && childrenRef.current) {
+      setFitsContainer(
+        childrenRef.current.scrollWidth <= childrenRef.current.clientWidth
+      );
+    }
+  }, [smart, childrenRef]);
+
+  return (
+    <Tooltip
+      ref={childrenRef}
+      disableHoverListener={smart ? fitsContainer : false}
+      arrow
+      placement="top-start"
+      {...props}
+    >
+      {children ?? (
+        <Box sx={{ lineHeight: 0, ml: 0.5 }}>
+          <InfoStyledIcon />
+        </Box>
+      )}
+    </Tooltip>
+  );
+};

package/src/components/BMTooltip/index.ts

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

package/src/components/BMWarning/BMWarning.tsx

@@ -0,0 +1,39 @@
+import { FC, ReactNode } from "react";
+import { Box, BoxProps, styled } from "@mui/material";
+
+interface BMWarningProps extends BoxProps {
+  chipText: ReactNode;
+}
+
+const Root = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  color: theme.palette.grey[700],
+  "& a": {
+    color: theme.palette.grey[700],
+    textDecoration: "none",
+  },
+}));
+
+const Chip = styled(Box)(({ theme }) => ({
+  ...theme.typography.subtitle1,
+  fontWeight: 500,
+  padding: `${theme.spacing(0.6)} ${theme.spacing(0.8)}`,
+  borderRadius: 6,
+  color: theme.palette.warning[900],
+  backgroundColor: theme.palette.warning[100],
+  marginRight: theme.spacing(1.25),
+}));
+
+export const BMWarning: FC<BMWarningProps> = ({
+  chipText,
+  children,
+  ...boxProps
+}) => {
+  return (
+    <Root {...boxProps}>
+      <Chip>{chipText}</Chip>
+      {children}
+    </Root>
+  );
+};

package/src/components/BMWarning/index.ts

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

package/src/components/GenericFailure/GenericFailure.tsx

@@ -0,0 +1,28 @@
+import { FC } from "react";
+import { Box, BoxProps } from "@mui/material";
+
+import { AlertVariant, BMAlert } from "../BMAlert";
+
+interface GenericFailureProps extends BoxProps {
+  text?: string;
+}
+
+export const GenericFailure: FC<GenericFailureProps> = ({
+  text,
+  sx,
+  ...props
+}) => {
+  return (
+    <Box
+      sx={{
+        p: 4,
+        maxWidth: 1024,
+        mx: "auto",
+        ...sx,
+      }}
+      {...props}
+    >
+      <BMAlert open text={text} variant={AlertVariant.Error} />
+    </Box>
+  );
+};

package/src/components/GenericFailure/index.ts

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

package/src/components/NoAccess/NoAccess.tsx

@@ -0,0 +1,40 @@
+import { FC, HTMLAttributes } from "react";
+import { Paper, Box, Typography, styled } from "@mui/material";
+
+import LockIcon from "../../assets/icons/lock-locked.svg";
+
+export interface NoAccessProps extends HTMLAttributes<unknown> {
+  title: string;
+  subtitle: string;
+  className?: string;
+}
+
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  backgroundColor: theme.palette.primary[100],
+  border: `1px dashed ${theme.palette.primary[300]}`,
+}));
+
+export const NoAccess: FC<NoAccessProps> = ({
+  className,
+  title,
+  subtitle,
+  ...rest
+}) => {
+  return (
+    <StyledPaper className={className} {...rest}>
+      <Box sx={{ mt: 3, mb: 3, textAlign: "center" }} data-testid="NoAccess">
+        <LockIcon width={48} height={48} data-testid="NoAccessIcon" />
+        <Box sx={{ mt: 2 }}>
+          <Typography variant="body1" data-testid="NoAccessTitle">
+            {title}
+          </Typography>
+        </Box>
+        <Box sx={{ mt: 0.75 }}>
+          <Typography variant="subtitle1" data-testid="NoAccessSubtitle">
+            {subtitle}
+          </Typography>
+        </Box>
+      </Box>
+    </StyledPaper>
+  );
+};

package/src/components/NoAccess/NoAccessActionTooltip.tsx

@@ -0,0 +1,53 @@
+import { Box } from "@mui/material";
+import { ReactElement, FC } from "react";
+
+import { BMTooltip } from "../BMTooltip";
+
+export interface NoAccessActionTooltipProps {
+  placement?:
+    | "bottom-end"
+    | "bottom-start"
+    | "bottom"
+    | "left-end"
+    | "left-start"
+    | "left"
+    | "right-end"
+    | "right-start"
+    | "right"
+    | "top-end"
+    | "top-start"
+    | "top";
+  enabled: boolean;
+  primaryText: string;
+  secondaryText?: string;
+  children: ReactElement;
+}
+
+export const NoAccessActionTooltip: FC<NoAccessActionTooltipProps> = ({
+  placement = "top",
+  enabled,
+  primaryText,
+  secondaryText,
+  children,
+}) => {
+  if (!enabled) return children;
+
+  return (
+    <BMTooltip
+      placement={placement}
+      title={
+        <Box sx={{ width: 190 }}>
+          <Box>{primaryText}</Box>
+          {secondaryText && <Box sx={{ mt: 2 }}>{secondaryText}</Box>}
+        </Box>
+      }
+      slotProps={{
+        popper: {
+          style: { pointerEvents: "none" },
+        },
+      }}
+    >
+      <span>{children}</span>
+    </BMTooltip>
+  );
+};

package/src/components/NoAccess/NoPermissionModal.tsx

@@ -0,0 +1,55 @@
+import { FC } from "react";
+import { Box, Typography } from "@mui/material";
+
+import { BMModal } from "../BMModal";
+
+import LockIcon from "../../assets/icons/lock-locked.svg";
+
+export interface NoPermissionModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+  title: string;
+  description: string;
+  submitLabel?: string;
+}
+
+export const NoPermissionModal: FC<NoPermissionModalProps> = ({
+  open,
+  onClose,
+  onSubmit,
+  title,
+  description,
+  submitLabel = "OK",
+}) => {
+  return (
+    <BMModal
+      open={open}
+      size="sm"
+      enableBackdropDismiss
+      titleIcon={<LockIcon width={24} height={24} />}
+      title={title}
+      onClose={onClose}
+      submitLabel={submitLabel}
+      onSubmit={onSubmit}
+      titleSeparator
+      overrideHeight={252}
+      overrideWidth={480}
+    >
+      <Box
+        sx={{
+          mt: 2,
+          ml: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+        }}
+      >
+        <Typography variant="body2">
+          {description}
+        </Typography>
+      </Box>
+    </BMModal>
+  );
+};

package/src/components/NoAccess/index.ts

@@ -0,0 +1,3 @@
+export * from "./NoAccess";
+export * from "./NoPermissionModal";
+export * from "./NoAccessActionTooltip";

package/src/components/index.ts

@@ -0,0 +1,34 @@
+export * from "./BMAlert";
+export * from "./BMAutoComplete";
+export * from "./BMButton";
+export * from "./BMCheckbox";
+export * from "./BMInput";
+export * from "./BMModal";
+export * from "./BMMultiEntry";
+export * from "./BMMultiLevelStepper";
+export * from "./BMPassword";
+export * from "./BMProgress";
+export * from "./BMRadio";
+export * from "./BMSelect";
+export * from "./BMToggle";
+export * from "./BMTooltip";
+export * from "./BMHelloBanner";
+export * from "./BMCloudSelect";
+export * from "./BMForm";
+export * from "./BMMaps";
+export * from "./BMDropdown";
+export * from "./BMAvatar";
+export * from "./BMSlider";
+export * from "./BMTag";
+export * from "./BMTagv2";
+export * from "./BMLoadingBox";
+export * from "./BMAccordion";
+export * from "./BMPagination";
+export * from "./BMStatus";
+export * from "./BMAddSection";
+export * from "./BMWarning";
+export * from "./GenericFailure";
+export * from "./BMCodeBlock";
+export * from "./NoAccess";
+export * from "./BMDatePicker";
+export * from "./BMTable";

package/src/index.ts

@@ -0,0 +1,9 @@
+import "./BMClassnameSetup";
+
+export { ThemeProvider as BMThemeProvider } from "@mui/material/styles";
+export { CssBaseline as BMCssBaseline } from "@mui/material";
+export * from "./components";
+export * from "./theme/theme";
+export * as mui from '@mui/material';
+export * as bma from './bma';
+export * from './components/BMSmartStatus';

package/src/theme/BMAutoComplete.ts

@@ -0,0 +1,152 @@
+import type { Components } from "@mui/material";
+import { colors, themeVariables  as variables} from "./variables";
+
+declare module "@mui/material/Autocomplete" {
+  interface AutocompletePropsSizeOverrides {
+    large: true;
+  }
+}
+
+export const BMAutoComplete: Components["MuiAutocomplete"] = {
+  defaultProps: {},
+  styleOverrides: {
+    popupIndicator: {
+      marginRight: 0,
+      "&:hover": {
+        backgroundColor: "transparent",
+      },
+    },
+    inputRoot: {
+      overflow: "hidden",
+      padding: "0px",
+      height: variables.inputHeight,
+      color: colors.grey[900],
+      backgroundColor: colors.background.paper,
+      borderRadius: variables.borderRadius,
+      border: `1px solid ${colors.grey[300]}`,
+      "&:hover": {
+        borderColor: `${colors.primary[300]}!important`,
+        "&$disabled": {
+          borderColor: `${colors.grey[300]}!important`,
+          cursor: "not-allowed",
+        },
+      },
+      "&$focused": {
+        borderColor: `${colors.primary[300]}!important`,
+        boxShadow: `0 0 0 2px ${colors.primary[200]}`,
+      },
+      "&$error": {
+        color: colors.error[500],
+        backgroundColor: colors.error[100],
+        borderColor: colors.error[500],
+        "&:hover": {
+          borderColor: colors.error[500],
+        },
+        "&$focused": {
+          boxShadow: `0 0 0 2px ${colors.error[100]}`,
+        },
+        "&$disabled": {
+          backgroundColor: colors.grey[200],
+          borderColor: colors.grey[300],
+          boxShadow: "none",
+          cursor: "not-allowed",
+        },
+      },
+      "&$disabled": {
+        color: `${colors.grey[600]}!important`,
+        backgroundColor: colors.grey[200],
+        borderColor: `${colors.grey[300]}!important`,
+        "&:hover": {
+          backgroundColor: colors.grey[200],
+          borderColor: `${colors.grey[300]}!important`,
+          boxShadow: "none",
+          cursor: "not-allowed",
+        },
+      },
+      "&$multiline": {
+        height: "auto",
+        padding: 0,
+      },
+      variants: [
+        {
+          props: { size: "large" },
+          style: {
+            height: 40,
+          },
+        },
+      ],
+    },
+    input: {
+      border: 0,
+      boxShadow: "none",
+      "&::placeholder": {
+        opacity: 1,
+        color: colors.grey[600],
+      },
+      "&:focus": {
+        outline: "none",
+      },
+      marginLeft: 2,
+    },
+    tag: {
+      backgroundColor: colors.primary[200],
+      borderRadius: 6,
+      "&:hover": {
+        backgroundColor: colors.primary[100],
+      },
+      "& .MuiChip-deleteIcon": {
+        width: 16,
+        height: 16,
+      },
+      fontSize: 11.5,
+      lineHeight: 16,
+      fontWeight: 400,
+      height: 24,
+      margin: "0 4px 0 0",
+      border: 0,
+    },
+    option: {
+      fontSize: 13,
+      fontWeight: 400,
+      fontFamily: '"Inter", sans-serif',
+      paddingTop: 6,
+      paddingBottom: 6,
+      height: 32,
+      minHeight: 32,
+      lineHeight: 1.25,
+      "&:focus": {
+        backgroundColor: colors.primary[100],
+      },
+      "&[aria-selected=true]": {
+        backgroundColor: colors.primary[200],
+      },
+      paddingLeft: "16px !important",
+      "&[aria-disabled=true]": {
+        pointerEvents: "inherit",
+        cursor: "not-allowed",
+      },
+      "&[aria-disabled=true]:active": {
+        pointerEvents: "none",
+        cursor: "not-allowed",
+      },
+      "&.Mui-focusVisible": {
+        backgroundColor: "unset",
+      },
+    },
+    groupLabel: {
+      fontSize: 13,
+      fontWeight: 400,
+      paddingTop: 6,
+      paddingBottom: 6,
+      minHeight: 32,
+      lineHeight: 1.25,
+      paddingLeft: "16px !important",
+    },
+    listbox: {
+      boxShadow: "none",
+      border: `1px solid ${colors.grey[300]}`,
+      borderRadius: variables.borderRadius,
+      lineHeight: "32px",
+    },
+  },
+};

package/src/theme/BMAvatar.ts

@@ -0,0 +1,5 @@
+export const BMAvatarSizeMap = {
+  small: 24,
+  medium: 32,
+  large: 56,
+};

package/src/theme/BMButton.ts

@@ -0,0 +1,132 @@
+import type { Components } from "@mui/material";
+declare module "@mui/material/Button" {
+  interface ButtonPropsVariantOverrides {
+    primary: true;
+    secondary: true;
+    ghost: true;
+    gradient: true;
+  }
+  interface ButtonPropsSizeOverrides {
+    small: true;
+    large: true;
+    medium: true;
+  }
+}
+export const BMButton: Components["MuiButton"] = {
+  defaultProps: {
+    disableRipple: true,
+    disableElevation: true,
+    size: "medium",
+  },
+  styleOverrides: {
+    // biome-ignore lint: TODO for any
+    root: ({ theme }: { theme: any; ownerState: any }) => ({
+      minWidth: 12,
+      height: 32,
+      fontSize: 13,
+      fontWeight: 600,
+      textTransform: "none",
+      padding: "0 16px",
+      '&.Mui-disabled': {
+        cursor: 'not-allowed',
+        backgroundColor: `${theme.palette.grey[300]} !important`,
+        color: `${theme.palette.grey[500]} !important`,
+        pointerEvents: 'unset',
+        border: '0 !important',
+      },
+
+      variants: [
+        {
+          props: { variant: "primary" },
+          style: {
+            color: theme.palette.common.white,
+            backgroundColor: theme.palette.primary[600],
+            ":hover": {
+              backgroundColor: theme.palette.primary[500],
+            },
+            ":active": {
+              backgroundColor: theme.palette.primary[700],
+            },
+          },
+        },
+        {
+          props: { variant: "secondary" },
+          style: {
+            color: theme.palette.primary[600],
+            backgroundColor: theme.palette.background.paper,
+            border: `1px solid ${theme.palette.primary[600]}`,
+            ":hover": {
+              borderColor: theme.palette.primary[500],
+              color: theme.palette.primary[500],
+            },
+            ":active": {
+              borderColor: theme.palette.primary[700],
+              color: theme.palette.primary[700],
+            },
+          },
+        },
+        {
+          props: { variant: "ghost" },
+          style: {
+            color: theme.palette.primary[600],
+            backgroundColor: "transparent !important",
+            border: "1px solid transparent",
+            ":hover": {
+              border: `1px solid ${theme.palette.primary[500]}`,
+              color: theme.palette.primary[500],
+            },
+            ":active": {
+              border: `1px solid ${theme.palette.primary[700]}`,
+              color: theme.palette.primary[700],
+            },
+          },
+        },
+        {
+          props: { variant: "gradient" },
+          style: {
+            color: theme.palette.common.white,
+            background:
+              "linear-gradient(272.58deg, #7879F1 1.06%, #7879F1 33.24%, #5D5FEF 56.4%)",
+          },
+        },
+        {
+          props: { disabled: true },
+          style: {
+            background: theme.palette.grey[300],
+            color: `${theme.palette.grey[500]} !important`,
+            cursor: "not-allowed",
+            border: "none",
+          },
+        },
+        {
+          props: (props) => props.startIcon || props.endIcon,
+          style: {
+            padding: "0 11.2px",
+          },
+        },
+      ],
+    }),
+    // biome-ignore lint: TODO for any
+    sizeSmall: {
+      height: 24,
+      padding: "0 11.2px",
+    },
+
+    sizeLarge: {
+      height: 40,
+      fontSize: 13,
+    },
+    startIcon: {
+      marginRight: 4,
+      "&.MuiButton-icon.MuiButtonSizeLarge": {
+        marginRight: 8,
+      },
+    },
+    endIcon: {
+      marginLeft: 4,
+      ".MuiButton-icon.MuiButtonSizeLarge": {
+        marginLeft: 8,
+      },
+    },
+  },
+};