@bigmath-ui-library/core 2.0.4

package/stories/BMHelloBanner.stories.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import type { Meta, Story } from '@storybook/react';
+import { Box } from '@mui/material';
+import { BMHelloBanner } from '../src';
+
+
+export default {
+  title: 'BMHelloBanner',
+  component: BMHelloBanner,
+  decorators: [
+    (StoryContent: any) => (
+      <div style={{ margin: '3em', width: 538 }}>
+        <StoryContent />
+      </div>
+    )
+  ]
+} as Meta;
+
+export const Default: Story = () => {
+  const [showBanner, setShowBanner] = useState<boolean>(true);
+  return (
+    <Box width={780} p={2} ml={0.5} display="flex">
+      <Box width="100%">
+        <BMHelloBanner
+          title={'Complete the setup...'}
+          subTitle={'Use our “Setup Guide” to create an “Interface Endpoint” on AWS for each region in this cluster.'}
+          setShowBanner={setShowBanner}
+          showBanner={showBanner}
+        />
+      </Box>
+    </Box>
+  );
+};

package/stories/BMInput.stories.tsx

@@ -0,0 +1,184 @@
+import React, { useState } from "react";
+import type { Meta } from "@storybook/react";
+import { BMInput, BMSearch, BMStripeInput, type BMInputProps } from "../src";
+
+export default {
+  title: "Input",
+  component: BMInput,
+  tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "value",
+        "placeholder",
+        "label",
+        "tooltip",
+        "error",
+        "disabled",
+        "helperText",
+        "fullWidth",
+      ],
+      sort: "alpha",
+    },
+  },
+  argTypes: {
+    tooltip: {
+      control: { type: "text" },
+    },
+  },
+} as Meta;
+
+const defaultArgs: Partial<BMInputProps> = {
+  label: "This is a label",
+  tooltip: "This is a tooltip",
+  placeholder: "This is a placeholder",
+  error: false,
+  helperText: "Helper message",
+  disabled: false,
+  fullWidth: false,
+  dataTestId: "input-field",
+};
+
+export const Input = (args: BMInputProps) => (
+  <>
+    Medium : <br />
+    <BMInput {...args} label="THIS IS A LABEL" />
+    <br />
+    <br /> Large : <br />
+    <BMInput {...args} size="large" />
+  </>
+);
+Input.args = defaultArgs;
+
+export const TextArea = (args: BMInputProps) => <BMInput {...args} />;
+
+TextArea.args = {
+  ...defaultArgs,
+  multiline: true,
+  rows: 5,
+};
+
+export const Search = (args: BMInputProps) => <BMSearch {...args} />;
+
+export const BMInputNumber = (args: BMInputProps) => (
+  <BMInput type="number" {...args} defaultValue={0} />
+);
+
+const getInputProps = (
+  InputComponent: React.ElementType,
+  StripeElementComponent: React.ElementType
+) => {
+  return {
+    components: {
+      Input: InputComponent,
+    },
+    componentsProps: {
+      input: {
+        component: StripeElementComponent,
+        handleOnChange: () => {},
+        handleOnBlur: () => {},
+      },
+    },
+  };
+};
+
+// Mock components simulating Stripe card number input
+interface MockCardNumberElementProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  inputRef?: React.Ref<HTMLInputElement>;
+  handleOnChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleOnBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+
+const formatCardNumber = (value: string) => {
+  // Remove all non-digit characters
+  const digits = value.replace(/\D/g, "");
+  // Limit to max 16 digits
+  const limited = digits.slice(0, 16);
+  // Insert space every 4 digits
+  return limited.replace(/(.{4})/g, "$1 ").trim();
+};
+
+const MockCardNumberElement = React.forwardRef<HTMLInputElement, MockCardNumberElementProps>(
+  ({ inputRef, handleOnChange, handleOnBlur, value: propValue, ...rest }, ref) => {
+    // internal state to show formatted value
+    const [value, setValue] = useState(() => {
+      if (typeof propValue === "string") return formatCardNumber(propValue);
+      return "";
+    });
+
+    // When parent changes value prop, update internal state
+    React.useEffect(() => {
+      if (typeof propValue === "string") {
+        setValue(formatCardNumber(propValue));
+      }
+    }, [propValue]);
+
+    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const rawValue = e.target.value;
+      const formatted = formatCardNumber(rawValue);
+      setValue(formatted);
+
+      // Create a synthetic event to pass only digits without spaces to onChange handler
+      const syntheticEvent = {
+        ...e,
+        target: {
+          ...e.target,
+          value: formatted.replace(/\s/g, ""),
+        },
+      };
+      if (handleOnChange) handleOnChange(syntheticEvent as React.ChangeEvent<HTMLInputElement>);
+    };
+
+    const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      if (handleOnBlur) handleOnBlur(e);
+    };
+
+    // Compose ref handlers
+    const combinedRef = (node: HTMLInputElement) => {
+      if (typeof inputRef === "function") inputRef(node);
+      else if (inputRef) (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = node;
+
+      if (typeof ref === "function") ref(node);
+      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
+    };
+
+    return (
+      <input
+        {...rest}
+        ref={combinedRef}
+        onChange={onChange}
+        onBlur={onBlur}
+        value={value}
+        placeholder="XXXX XXXX XXXX XXXX"
+        maxLength={19} // 16 digits + 3 spaces
+        inputMode="numeric"
+        pattern="[0-9\s]*"
+        style={{
+          width: "100%",
+          padding: "8px",
+          fontSize: "16px",
+          letterSpacing: "2px",
+        }}
+      />
+    );
+  }
+);
+
+export const StripeCardNumber = (args: Partial<BMInputProps>) => {
+  return (
+    <BMInput
+      {...args}
+      dataTestId="stripe-card-number-input"
+      fullWidth
+      autoFocus
+      name="cardNumber"
+      label="Card Number"
+      disabled={args.disabled}
+      InputProps={getInputProps(BMStripeInput, MockCardNumberElement)}
+    />
+  );
+};
+
+StripeCardNumber.args = {
+  ...defaultArgs,
+};

package/stories/BMInputEditableCode.stories.tsx

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { ThemeProvider, createTheme, CssBaseline, Box } from "@mui/material";
+
+import { BMInputEditableCode } from "../src";
+
+const theme = createTheme();
+
+const meta: Meta<typeof BMInputEditableCode> = {
+  title: "Input",
+  component: BMInputEditableCode,
+  decorators: [
+    (StoryFn) => (
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <div style={{ padding: 24, fontFamily: "Menlo, monospace" }}>
+          <StoryFn />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BMInputEditableCode>;
+
+export const InputEditableCode: Story = {
+  args: {
+    placeholder: "<DB USER>",
+    tooltip: "Enter DB username",
+    multiline: true,
+  },
+  render: (args) => {
+    const [sqlConnectionStringVars, setSqlConnectionStringVars] = useState({
+      dbUser: "admin_user",
+    });
+
+    return (
+      <Box
+        component="pre"
+        sx={{
+          fontFamily: "Menlo, monospace",
+          backgroundColor: "#f5f5f5",
+          padding: 2,
+          borderRadius: 2,
+          overflowX: "auto",
+          whiteSpace: "pre-wrap",
+          fontSize: "0.875rem",
+          lineHeight: 1.5,
+        }}
+      >
+        <Box component="span" sx={{ display: "inline" }}>
+          {`./sqlsh "host=myhost \\\nuser=`}
+        </Box>
+
+        <Box
+          component="span"
+          sx={{
+            display: "inline-flex",
+            alignItems: "center",
+            verticalAlign: "bottom",
+            fontFamily: "inherit",
+            fontSize: "inherit",
+            lineHeight: "inherit",
+          }}
+        >
+          <BMInputEditableCode
+            {...args}
+            content={sqlConnectionStringVars.dbUser}
+            onSave={(savedString) =>
+              setSqlConnectionStringVars((prev) => ({
+                ...prev,
+                dbUser: savedString,
+              }))
+            }
+          />
+        </Box>
+
+        <Box component="span" sx={{ display: "inline" }}>
+          {` \\\ndbname=bigmath"`}
+        </Box>
+      </Box>
+    );
+  },
+};

package/stories/BMInputField.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta } from "@storybook/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { BMInputField, type BMInputFieldProps } from "../src";
+
+export default {
+	title: "Input",
+	component: BMInputField,
+	parameters: {
+		controls: {
+			include: [
+				"value",
+				"placeholder",
+				"label",
+				"tooltip",
+				"error",
+				"disabled",
+				"helperText",
+				"fullWidth",
+			],
+			sort: "alpha",
+		},
+	},
+	argTypes: {
+		tooltip: {
+			control: { type: "text" },
+		},
+	},
+} as Meta;
+
+interface FormProps {
+	name: string;
+}
+
+export const InputField = (args: BMInputFieldProps<FormProps>) => {
+	const methods = useForm<FormProps>();
+	return (
+		<FormProvider {...methods}>
+			<BMInputField {...args} name="name" />
+		</FormProvider>
+	);
+};
+InputField.args = {
+	label: "This is a label",
+	tooltip: "This is a tooltip",
+	placeholder: "This is a placeholder",
+	helperText: "Helper message",
+	disabled: false,
+	fullWidth: false,
+	dataTestId: "input-field",
+};

package/stories/BMLoadingBox.stories.tsx

@@ -0,0 +1,45 @@
+import { Box, Typography } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { BMLoadingBox } from "../src";
+
+const meta: Meta<typeof BMLoadingBox> = {
+  title: "InReview/BMLoadingBox",
+  component: BMLoadingBox,
+  tags: ["autodocs"],
+  args: {
+    children: <Typography>Loading content...</Typography>,
+    theme: "default",
+  },
+  argTypes: {
+    theme: {
+      control: { type: "radio" },
+      options: ["default", "light"],
+    },
+    className: {
+      control: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BMLoadingBox>;
+
+export const Default: Story = {};
+
+export const LightTheme: Story = {
+  args: {
+    theme: "light",
+  },
+};
+
+export const WithCustomContent: Story = {
+  args: {
+    children: (
+      <Box>
+        <Typography variant="h6">Please wait…</Typography>
+      </Box>
+    ),
+  },
+};

package/stories/BMMaps.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta } from "@storybook/react";
+import { MarkerType, BMMapMarker, BMMaps, BMMapsProps } from "../src/components/BMMaps";
+import { MapLegend, MapLegendItem } from "../src/components/BMMaps/legend/MapLegend";
+import SelectedIcon from "../src/components/BMMaps/icons/RegionSelectedHover.svg";
+
+export default {
+    title: "BMMaps",
+    component: BMMaps,
+} as Meta;
+
+export const Maps = (args: BMMapsProps) => {
+    return <BMMaps {...args} >
+        <BMMapMarker position={[12.9716, 77.5946]} type={MarkerType.REGION_SELECTED} tooltip={<>Bengaluru India</>} />
+        <MapLegend mapLegendItems={[
+            <MapLegendItem icon={<SelectedIcon />} label="Region 1" subText='9 regions, 9 AZs, 9 nodes' />,
+        ]} />
+    </BMMaps>
+};
+Maps.args = {
+    mapWidth: 1200,
+    mapHeight: 680,
+    coordinates: [[12.9716, 77.5946], [12.9716, 77.5946]],
+    initialBounds: undefined,
+    mapContainerProps: {
+        zoom: 2,
+        center: [0, 0]
+    },
+    dataTestId: "bm-maps",
+}

package/stories/BMModal.stories.tsx

@@ -0,0 +1,218 @@
+import type { Meta, Story } from "@storybook/react";
+import { useState } from "react";
+import { BMButton, BMCheckbox } from "../src";
+import {
+	BMModal,
+	type BMModalProps,
+} from "../src/components/BMModal";
+import { BMSidePanel, BMSidePanelProps } from "../src/components/BMModal";
+
+export default {
+	title: "BMModal",
+	component: BMModal,
+	argTypes: {
+		title: {
+			control: { type: "text" },
+		},
+	},
+} as Meta;
+
+export const Basic = (args: BMModalProps) => (
+	<BMModal {...args}>
+		<div>
+			<p>
+				BMModal component requires a <code>size</code>
+				prop to determine the correct height and width. The height and width are
+				fixed and will scroll on overflow.
+			</p>
+			<p>
+				BMModalProps extends Material UI&apos;s DialogProps, so most of the
+				props will be exactly the same.
+			</p>
+		</div>
+	</BMModal>
+);
+
+Basic.args = {
+	title: "Simple Modal Title",
+	size: "sm",
+	open: true,
+};
+
+export const Confirmation: Story<BMModalProps> = (args: BMModalProps) => (
+	<BMModal {...args} title={args.title}>
+		<div>
+			<p>This modal has a submit and cancel button.</p>
+		</div>
+	</BMModal>
+);
+
+Confirmation.args = {
+	title: "Confirmation Modal",
+	size: "xs",
+	titleSeparator: true,
+	submitLabel: "Submit",
+	cancelLabel: "Cancel",
+	actionsInfo: <BMCheckbox  dataTestId="modal-checkbox" label={"More action information"} />,
+	open: true,
+};
+
+export const SidePanel = (args: BMSidePanelProps) => (
+	<BMSidePanel {...args}>
+		<div>
+			<p>This modal opens from the right side and scrolls on overflow.</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+				occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+				occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+				occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+				occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+				occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+				occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+				occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+				occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+				occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+				occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+				occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+				occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+		</div>
+	</BMSidePanel>
+);
+
+SidePanel.args = {
+	title: "Side Panel Modal",
+	submitLabel: "Save",
+	cancelLabel: "Cancel",
+	open: true,
+};
+
+export const SidePanelWithModal: Story<BMSidePanelProps> = (
+	args: BMSidePanelProps,
+) => {
+	const [sideOpen, setOpen] = useState(args.open);
+	const [openSecond, setSecond] = useState(false);
+
+	return (
+		<div>
+			<BMButton dataTestId="modal-open" variant="primary" onClick={() => setOpen(true)}>
+				Open Side Panel
+			</BMButton>
+			<BMSidePanel {...args} onClose={() => setOpen(false)} open={sideOpen}>
+				<h4>This is a side panel</h4>
+				<p>As an example, we can even open a modal on top of the side panel.</p>
+				<BMButton dataTestId="openAdditionalModal" variant="primary" onClick={() => setSecond(true)}>
+					Open Additional Modal
+				</BMButton>
+				<BMModal
+					title="This is a Modal"
+					size="sm"
+					open={openSecond}
+					onClose={() => setSecond(false)}
+				>
+					<div>Modal opens on top of existing Side Panel</div>
+				</BMModal>
+			</BMSidePanel>
+		</div>
+	);
+};
+
+SidePanelWithModal.args = {
+	title: "Side Panel Modal",
+	submitLabel: "Save",
+	cancelLabel: "Cancel",
+	open: true,
+};