@bigmath-ui-library/core 2.0.4

package/src/components/BMMaps/legend/MapLegend.tsx

@@ -0,0 +1,80 @@
+import React, { FC } from 'react';
+import { styled, Typography } from '@mui/material';
+
+export interface MapLegendProps {
+    mapLegendItems: Array<React.ReactElement<MapLegendItemProps>>;
+}
+
+const IconHolder = styled('div')({
+    width: '16px',
+    height: '16px',
+});
+
+export interface MapLegendItemProps {
+    icon: React.ReactElement;
+    label: string;
+    subText?: string;
+    extraProps?: React.ReactElement;
+}
+
+export const MapLegendItem: FC<MapLegendItemProps> = ({ icon, label, subText, extraProps }) => {
+    return (<div
+        style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: '4px'
+        }}
+    >
+        <IconHolder>
+            {icon}
+        </IconHolder>
+        <div
+            style={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                flexDirection: 'column',
+                fontSize: '11.5px',
+                fontWeight: 500,
+                lineHeight: '16px',
+                color: '#4E5F6D',
+            }}
+        >
+            {label}
+            {subText && <Typography
+                variant="subtitle1"
+                style={{
+                    color: '#6D7C88',
+                    fontSize: '11px',
+                    fontWeight: 500,
+                    lineHeight: '16px'
+                }}
+            >{subText}</Typography>}
+            {extraProps}
+        </div>
+    </div>);
+};
+
+export const MapLegend: FC<MapLegendProps> = ({ mapLegendItems }) => {
+    return <div
+        className="leaflet-bottom leaflet-left"
+        style={{
+            marginBottom: '8px',
+            marginLeft: '18px',
+            borderRadius: '4px',
+            padding: '6px 8px',
+            border: `1px solid #E9EEF2`,
+            background: '#fff',
+            boxShadow: `0px 2px 4px -2px rgba(24, 39, 75, 0.12)`,
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '8px',
+            maxWidth: '50%',
+            flexWrap: 'wrap'
+        }}
+    >
+        {mapLegendItems.map((Item) => (
+            Item
+        ))}
+    </div >
+}

package/src/components/BMMaps/markerTypes.ts

@@ -0,0 +1,8 @@
+export enum MarkerType {
+    REGION_SELECTED = 'REGION_SELECTED',
+    REGION_NOT_SELECTED = 'REGION_NOT_SELECTED',
+    READ_REPLICA = 'READ_REPLICA',
+    REGION_PREFERRED = 'REGION_PREFERRED',
+    MASTER_PREFERRED = 'MASTER_PREFERRED',
+    GEO_PARTITION = 'GEO_PARTITION',
+};

package/src/components/BMModal/BMModal.tsx

@@ -0,0 +1,313 @@
+import {
+	Dialog,
+	DialogActions,
+	DialogContent,
+	type DialogContentProps,
+	type DialogProps,
+	DialogTitle,
+	Slide,
+	Typography,
+	dialogClasses,
+	styled,
+} from "@mui/material";
+import type { TransitionProps } from "@mui/material/transitions";
+import React, { type FC, type ReactElement } from "react";
+import { BMButton, type BMButtonProps } from "../BMButton";
+import CloseIcon from "../../assets/icons/Close.svg";
+import { BMTooltip } from "../BMTooltip";
+
+export interface OverrideButtonProps {
+	primary?: BMButtonProps;
+	secondary?: BMButtonProps;
+}
+
+export interface BMModalProps extends DialogProps {
+	title?: string;
+	size?: "xs" | "sm" | "md" | "lg" | "xl";
+	overrideHeight?: string | number;
+	overrideWidth?: string | number;
+	isSidePanel?: boolean;
+	titleSeparator?: boolean;
+	titleIcon?: React.ReactNode;
+	actionsInfo?: React.ReactNode;
+	onClose?: () => void;
+	onSubmit?: () => void;
+	enableBackdropDismiss?: boolean;
+	submitLabel?: string;
+	submitButtonTooltip?: string | ReactElement;
+	submitTestId?: string;
+	customSubmitButton?: React.ReactNode;
+	cancelLabel?: React.ReactNode;
+	cancelButtonTooltip?: string;
+	cancelTestId?: string;
+	buttonProps?: OverrideButtonProps;
+	customTitle?: React.ReactNode;
+	hideCloseBtn?: boolean;
+	dialogContentProps?: DialogContentProps;
+	gradientTag?: string;
+}
+
+export const SlideTransition = React.forwardRef(
+	(
+		props: TransitionProps & { children: React.ReactElement<unknown> },
+		ref: React.Ref<unknown>,
+	) => {
+		return <Slide direction="left" ref={ref} {...props} />;
+	},
+);
+SlideTransition.displayName = "SlideTransition";
+
+const ModalSizes: Record<
+	NonNullable<BMModalProps["size"]>,
+	{ width: number; height: number }
+> = {
+	xs: { width: 480, height: 272 },
+	sm: { width: 608, height: 400 },
+	md: { width: 800, height: 600 },
+	lg: { width: 1024, height: 768 },
+	xl: { width: 800, height: 800 },
+};
+
+const BMDialog = styled(Dialog)<BMModalProps>(
+	({ isSidePanel, overrideWidth, overrideHeight, size = "md" }) => {
+		const modalSize = ModalSizes[size as keyof typeof ModalSizes];
+		return {
+		  [`& .${dialogClasses.paper}`]: {
+			...modalSize,
+			width: overrideWidth ?? modalSize.width,
+			height: overrideHeight ?? modalSize.height,
+			...(isSidePanel && {
+			  width: 736,
+			  height: "100%",
+			  maxHeight: "100%",
+			  margin: "0 0 0 auto",
+			  borderRadius: "0 !important",
+			  overflowY: "unset",
+			}),
+		  },
+		}
+	}
+);
+
+const ModalDialogTitle = styled(DialogTitle)<BMModalProps>(
+	({ theme, titleSeparator, size }) => ({
+
+		padding: size === 'xs' ? theme.spacing(1.5, 1.5, 1.5, 2) : theme.spacing(2, 1.5, 2, 2),
+		fontSize: theme.typography.body1.fontSize,
+		fontWeight: 400,
+		...(titleSeparator && {
+			borderBottom: `1px solid ${theme.palette.grey[200]}`,
+		}),
+	}),
+);
+
+const BMForm = styled("form")`
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    min-height: 100%;
+`;
+const ModalTitle = styled("div")(() => ({
+	display: "flex",
+	alignItems: "center",
+}));
+const Title = styled(Typography)`
+    display: flex;
+    align-items: center;
+`;
+const Text = styled("span")`
+    margin-left: 8px;
+    whitespace: nowrap;
+`;
+
+const StyledDialogContent = styled(DialogContent)`
+padding: 8px 16px !important;
+font-weight: 400;
+`;
+
+const BMDialogActions = styled(DialogActions)<BMModalProps>(
+	({ theme }) => ({
+		padding: theme.spacing(2),
+		background: theme.palette.grey[200],
+		border: `1px solid ${theme.palette.grey[200]}`
+	}),
+);
+
+const CloseButton = styled("span")(({ theme }) => ({
+	background: theme.palette.grey[100],
+	padding: theme.spacing(0.5),
+	height: theme.spacing(4),
+	borderRadius: "50%",
+	float: "right",
+	margin: "auto 0 auto auto",
+	cursor: "pointer",
+}));
+
+export const BMModal: FC<BMModalProps> = (props: BMModalProps) => {
+	const {
+		title,
+		titleSeparator,
+		titleIcon,
+		actionsInfo,
+		onClose,
+		onSubmit,
+		children,
+		cancelLabel,
+		cancelTestId,
+		submitLabel,
+		submitTestId,
+		enableBackdropDismiss,
+		size,
+		isSidePanel,
+		buttonProps,
+		customTitle,
+		hideCloseBtn,
+		customSubmitButton,
+		submitButtonTooltip,
+		cancelButtonTooltip,
+		dialogContentProps = {},
+		gradientTag,
+		...dialogProps
+	} = props;
+
+	const handleClose = () => {
+		if (onClose) {
+			onClose();
+		}
+	};
+
+	const handleSubmitBtnClick = (event: React.MouseEvent) => {
+		if (onSubmit) {
+			onSubmit();
+			// Prevent event propagation to avoid unintended page refresh
+			event.preventDefault();
+		}
+	};
+
+	const showDialogActions =
+		!!cancelLabel || !!submitLabel || !!customSubmitButton;
+
+	if (isSidePanel) {
+		dialogProps.TransitionComponent = SlideTransition;
+	}
+
+	const submitBtnProps = buttonProps?.primary ?? {};
+	const cancelBtnProps = buttonProps?.secondary ?? {};
+
+	const getCancelButton = (): ReactElement | undefined => {
+		const returnComponent: ReactElement | undefined = cancelLabel ? (
+			<BMButton
+				variant="secondary"
+				onClick={handleClose}
+				{...cancelBtnProps}
+				dataTestId={cancelTestId ?? 'modal-cancel-button'}
+			>
+				{cancelLabel}
+			</BMButton>
+		) : undefined;
+
+		if (cancelButtonTooltip) {
+			  return (
+			    <BMTooltip title={cancelButtonTooltip}>
+			      <span>{returnComponent}</span>
+			    </BMTooltip>
+			  );
+		}
+		return returnComponent;
+	};
+
+	const getSubmitButton = (): React.ReactNode => {
+		if (customSubmitButton) return customSubmitButton;
+
+		const returnComponent: ReactElement | undefined = submitLabel ? (
+			<BMButton
+				variant="primary"
+				onClick={handleSubmitBtnClick}
+				{...submitBtnProps}
+				type="submit"
+				autoFocus
+				dataTestId={submitTestId ?? 'modal-submit-button'}
+			>
+				{submitLabel}
+			</BMButton>
+		) : undefined;
+
+		if (submitButtonTooltip) {
+			return (
+				<BMTooltip title={submitButtonTooltip}>
+					<span>{returnComponent}</span>
+				</BMTooltip>
+			);
+		}
+		return returnComponent;
+	};
+
+	return (
+		<BMDialog
+			aria-labelledby="form-dialog-title"
+			size={size}
+			{...dialogProps}
+			fullWidth={true}
+			maxWidth={size}
+			onClose={enableBackdropDismiss ? handleClose : undefined}
+			isSidePanel={isSidePanel}
+			disableEnforceFocus
+		>
+			<BMForm>
+				{customTitle ? (
+					<ModalDialogTitle
+						open={props.open}
+						titleSeparator={props.titleSeparator}
+						typography={{ variant: "h4" }}
+						size={size}
+					>
+						{customTitle}
+					</ModalDialogTitle>
+				) : (
+					title && (
+						<ModalDialogTitle
+							id="form-dialog-title"
+							open={props.open}
+							titleSeparator={props.titleSeparator}
+							size={size}
+						>
+							<Title variant="h4">
+								{titleIcon ? (
+									<ModalTitle>
+										{titleIcon}
+										<Text>{title}</Text>
+									</ModalTitle>
+								) : (
+									<ModalTitle>{title}</ModalTitle>
+								)}
+								{/* {gradientTag && <BMTag text={gradientTag} />} */}
+								{!hideCloseBtn && (
+									<CloseButton>
+										<CloseIcon
+											data-testid={cancelTestId ? `${cancelTestId}Header` : ""}
+											onClick={handleClose}
+										/>
+									</CloseButton>
+								)}
+							</Title>
+						</ModalDialogTitle>
+					)
+				)}
+				<StyledDialogContent {...dialogContentProps}>{children}</StyledDialogContent>
+				{showDialogActions && (
+					<BMDialogActions open={props.open}>
+						{actionsInfo && <div style={{ marginRight: "auto" }}>{actionsInfo}</div>}
+						{getCancelButton()}
+						{getSubmitButton()}
+					</BMDialogActions>
+				)}
+			</BMForm>
+		</BMDialog>
+	);
+};
+
+export type BMSidePanelProps = Omit<BMModalProps, "isSidePanel">;
+
+export const BMSidePanel: FC<BMSidePanelProps> = (props) => (
+	<BMModal {...props} isSidePanel={true} />
+);

package/src/components/BMModal/index.ts

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