@bigmath-ui-library/core 2.0.4

package/stories/BMMultiEntry.stories.tsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { Box } from "@mui/material";
+import type { Meta } from "@storybook/react";
+import {
+  BMMultiEntry,
+  BMMultiEntryProps,
+} from "../src/components/BMMultiEntry/BMMultiEntry";
+
+export default {
+  title: "InReview/BMMultiEntry",
+  component: BMMultiEntry,
+  parameters: {
+    controls: {
+      include: [
+        "label",
+        "placeholderText",
+        "disabled",
+        "lowercaseEntry",
+        "helperText",
+        "error",
+        "overrideHeight",
+        "overrideWidth",
+        "subLabel",
+        "multiEntryHitEnterMsg",
+        "removeInvalidEntriesMsg",
+      ],
+    },
+  },
+  argTypes: {
+    error: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    label: {
+      control: "text",
+    },
+    helperText: {
+      control: "text",
+    },
+    placeholderText: {
+      control: "text",
+    },
+    overrideHeight: {
+      control: "number",
+    },
+    overrideWidth: {
+      control: "number",
+    },
+    lowercaseEntry: {
+      control: "boolean",
+    },
+    subLabel: {
+      control: "text",
+    },
+    removeInvalidEntriesMsg: {
+      control: "text",
+    },
+    multiEntryHitEnterMsg: {
+      control: "text",
+    },
+  },
+} as Meta;
+
+export const MultiEntry = (args: BMMultiEntryProps) => {
+  const [value, setValue] = useState<string[]>((args.value as string[]) ?? []);
+
+  return (
+    <Box width="600px" p={3}>
+      <BMMultiEntry
+        {...args}
+        value={value}
+        onChange={(val) => {
+          setValue(val);
+        }}
+        overrideHeight={154}
+        overrideWidth={572}
+      />
+    </Box>
+  );
+};
+
+MultiEntry.args = {
+  label: "Enter Tags",
+  placeholderText: "Type and hit enter...",
+  value: ["one", "two"],
+  lowercaseEntry: false,
+  disabled: false,
+  removeInvalidEntriesMsg: "Please remove invalid entries.",
+  multiEntryHitEnterMsg: "Press Enter to confirm your entry.",
+  subLabel: "Separate multiple values by pressing Enter, Space, or Comma.",
+};

package/stories/BMMultiLevelStepper.stories.tsx

@@ -0,0 +1,87 @@
+import { Box } from "@mui/material";
+import type { Meta } from "@storybook/react";
+import { BMMultiLevelStepper, BMStepperProps } from "../src";
+
+export default {
+  title: "BMMultiLevelStepper",
+  component: BMMultiLevelStepper,
+  parameters: {
+    controls: {
+      include: ["activeStep"],
+    },
+  },
+} as Meta;
+
+export const MultiLevelStepper = (args: BMStepperProps) => (
+  <Box
+    display="flex"
+    sx={{
+      width: "300px",
+      border: "1px solid #E9EEF2",
+      bgColor: "#FBFCFD",
+      height: "100vh",
+    }}
+  >
+    <BMMultiLevelStepper {...args} />
+  </Box>
+);
+
+MultiLevelStepper.args = {
+  steps: [
+    {
+      groupTitle: "General",
+      subSteps: [
+        {
+          title: "General Settings",
+        },
+      ],
+    },
+    {
+      groupTitle: "Placement",
+      subSteps: [
+        {
+          title: "Resilience and Regions",
+        },
+        {
+          title: "Nodes and Availability Zones",
+        },
+      ],
+    },
+    {
+      groupTitle: "Hardware",
+      subSteps: [
+        {
+          title: "Instance Settings",
+        },
+      ],
+    },
+    {
+      groupTitle: "Database",
+      subSteps: [
+        {
+          title: "Database Settings",
+        },
+      ],
+    },
+    {
+      groupTitle: "Security",
+      subSteps: [
+        {
+          title: "Security Settings",
+        },
+      ],
+    },
+    {
+      groupTitle: "Advanced",
+      subSteps: [
+        {
+          title: "Proxy Settings",
+        },
+        {
+          title: "Other Advanced Settings",
+        },
+      ],
+    },
+  ],
+  activeStep: 5,
+};

package/stories/BMPagination.stories.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { Box, Typography } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { BMPagination } from "../src";
+
+const meta: Meta<typeof BMPagination> = {
+  title: "InReview/BMPagination",
+  component: BMPagination,
+  tags: ["autodocs"],
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BMPagination>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [currentPage, setCurrentPage] = useState<number>(1);
+
+    return (
+      <Box sx={{ padding: 2 }}>
+        <Typography variant="subtitle1" sx={{ mb: 2 }}>
+          Current Page: {currentPage}
+        </Typography>
+        <BMPagination
+          {...args}
+          currentPage={currentPage}
+          onPageSelect={(page) => setCurrentPage(page)}
+        />
+      </Box>
+    );
+  },
+  args: {
+    pageSize: 5,
+    hasMore: true,
+  },
+};

package/stories/BMPassword.stories.tsx

@@ -0,0 +1,133 @@
+import { Grid, Paper } from "@mui/material";
+import type { Meta } from "@storybook/react";
+import { Controller, useForm } from "react-hook-form";
+import { BMButton, type BMInputProps, BMPassword } from "../src";
+
+const PASSWORD_REGEX =
+	/^(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9!@#$%^&*]{8,256}$/;
+
+export default {
+	title: "BMPassword",
+	component: BMPassword,
+	parameters: {
+		controls: {
+			include: [
+				"value",
+				"placeholder",
+				"label",
+				"error",
+				"disabled",
+				"helperText",
+				"fullWidth",
+			],
+			sort: "alpha",
+		},
+	},
+} as Meta;
+
+const defaultArgs: Partial<BMInputProps> = {
+	label: "",
+	placeholder: "Password",
+	error: false,
+	helperText:
+		"Password must contain at least 1 digit, 1 capital, 1 lowercase and one of the !@#$%^&* (special) characters.",
+	disabled: false,
+	fullWidth: true,
+};
+
+interface FormData {
+	password: string;
+	repeatPassword: string;
+}
+
+const defaultValues: FormData = {
+	password: "",
+	repeatPassword: "",
+};
+
+export const Password = (args: BMInputProps) => {
+	const { control, watch, handleSubmit } = useForm<FormData>({ defaultValues });
+
+	const pwd = watch("password");
+
+	const onSubmit = handleSubmit((data: FormData) =>
+		// eslint-disable-next-line implicit-arrow-linebreak
+		alert(
+			`password: ${data.password} , Repeat Password : ${data.repeatPassword}`,
+		),
+	);
+
+	return (
+		<Grid
+			container
+			sx={{
+				justifyContent: "center",
+				alignItems: "center",
+			}}
+		>
+			<Grid item sm={12} md={6} lg={5} xl={4}>
+				<Paper style={{ padding: 15 }}>
+					<form noValidate onSubmit={onSubmit}>
+						<Grid container spacing={2}>
+							<Grid item xs={12}>
+								<Controller
+									name={"password"}
+									control={control}
+									rules={{
+										required: "You must specify a password",
+										minLength: 8,
+										pattern: PASSWORD_REGEX,
+									}}
+									render={({ field, fieldState }) => (
+										<BMPassword
+											{...args}
+											error={!!fieldState.error}
+											helperText={
+												fieldState.error?.message === ""
+													? args.helperText
+													: fieldState.error?.message
+											}
+											{...field}
+										/>
+									)}
+								/>
+							</Grid>
+							<Grid item xs={12}>
+								<Controller
+									name="repeatPassword"
+									control={control}
+									rules={{
+										required: "You must specify a password",
+										validate: (value) =>
+											value === pwd || "The passwords do not match",
+									}}
+									render={({ field, fieldState }) => (
+										<BMPassword
+											{...args}
+											error={!!fieldState.error}
+											placeholder={"Repeat Password"}
+											helperText={fieldState.error?.message}
+											{...field}
+										/>
+									)}
+								/>
+							</Grid>
+							<Grid item xs={12}>
+								<BMButton
+									type="submit"
+									variant="primary"
+									color="primary"
+									fullWidth
+									dataTestId="submit-password-form"
+								>
+									{" Submit"}
+								</BMButton>
+							</Grid>
+						</Grid>
+					</form>
+				</Paper>
+			</Grid>
+		</Grid>
+	);
+};
+Password.args = defaultArgs;

package/stories/BMProgress.stories.tsx

@@ -0,0 +1,60 @@
+import { Box, Typography } from "@mui/material";
+import type { Meta } from "@storybook/react";
+import { type ProgressProps, BMProgress } from "../src/components/BMProgress";
+
+export default {
+	title: "BMProgress",
+	component: BMProgress,
+	decorators: [
+		// biome-ignore lint: TODO
+		(Story: any) => (
+			<div style={{ margin: "1em", width: "200px" }}>
+				<Story />
+			</div>
+		),
+	],
+} as Meta;
+
+export const Primary = (props: ProgressProps) => {
+	return <BMProgress color="primary" value={70} {...props} />;
+};
+
+export const Secondary = (props: ProgressProps) => {
+	return <BMProgress color="secondary" value={70} {...props} />;
+};
+
+export const Info = (props: ProgressProps) => {
+	return <BMProgress color="info" value={50} {...props} />;
+};
+
+export const Warning = (props: ProgressProps) => {
+	return <BMProgress color="warning" value={70} {...props} />;
+};
+
+export const toastError = (props: ProgressProps) => {
+	return <BMProgress color="error" value={90} {...props} />;
+};
+
+export const Success = (props: ProgressProps) => {
+	return <BMProgress color="success" value={20} {...props} />;
+};
+
+export const CustomColor = (props: ProgressProps) => {
+	return <BMProgress color="#f0bcba" value={60} {...props} />;
+};
+
+export const ProgressWithLabel = (props: ProgressProps) => {
+	return (
+		<Box display="flex" alignItems="center">
+			<Box width="200px" mr={1}>
+				<BMProgress value={20} {...props} />
+			</Box>
+			<Box minWidth={35}>
+				<Typography
+					variant="body2"
+					color="textSecondary"
+				>{`${Math.round(20)}%`}</Typography>
+			</Box>
+		</Box>
+	);
+};

package/stories/BMRadio.stories.tsx

@@ -0,0 +1,71 @@
+import { useForm } from "react-hook-form";
+import type { Meta } from "@storybook/react";
+
+import {
+  BMRadio,
+  BMRadioGroup,
+  BMRadioGroupField,
+  type BMRadioGroupProps,
+  type BMRadioProps,
+} from "../src";
+
+export default {
+  title: "BMRadio",
+  component: BMRadio,
+  tags: ['autodocs']
+} as Meta;
+
+export const Radio = (args: BMRadioProps) => {
+  return (
+    <div style={{ display: "flex", gap: 16 }}>
+      <BMRadio {...args} label="Unchecked" />
+      <BMRadio {...args} disabled label="Disabled" />
+      <BMRadio {...args} checked label="Checked" />
+      <BMRadio {...args} checked disabled label="checked Disabled" />
+    </div>
+  );
+};
+
+export const RadioGroup = (args: BMRadioGroupProps) => (
+  <BMRadioGroup {...args} />
+);
+
+RadioGroup.args = {
+  options: [
+    { value: "a", label: "Option A" },
+    { value: "b", label: "Option B", disabled: true },
+    { value: "c", label: "Option C" },
+    { value: "d", label: "Option D", defaultChecked: true, disabled: true },
+  ],
+};
+RadioGroup.argTypes = {
+  value: {
+    options: [undefined, "a", "b", "c"],
+    control: { type: "radio" },
+  },
+};
+
+export const RadioGroupField = () => {
+  const { control } = useForm({
+    defaultValues: {
+      choice: "c",
+    },
+  });
+
+  return (
+    <BMRadioGroupField
+      dataTestId="bm-radio-group-field"
+      name="choice"
+      label="Choose an option"
+      control={control}
+      options={[
+        { value: "a", label: "Option A" },
+        { value: "b", label: "Option B", disabled: true },
+        { value: "c", label: "Option C" },
+        { value: "d", label: "Option D", disabled: true },
+      ]}
+    />
+  );
+};
+
+RadioGroupField.storyName = "Radio Group Field";

package/stories/BMSelect.stories.tsx

@@ -0,0 +1,160 @@
+/* eslint-disable react/jsx-no-literals */
+
+import { useState } from "react";
+import { MenuItem, Box } from "@mui/material";
+import type { Meta } from "@storybook/react";
+import { useForm, FormProvider } from "react-hook-form";
+
+import { BMSelect, BMSelectProps, BMCheckbox, BMSelectField } from "../src";
+
+export default {
+  title: "BMSelect",
+  component: BMSelect,
+  tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: ["size", "label", "error", "disabled", "helperText"],
+      sort: "alpha",
+    },
+  },
+} as Meta;
+
+const args = {
+  label: "THIS IS A LABEL",
+  error: false,
+  helperText: "Helper message",
+  disabled: false,
+  fullWidth: false,
+};
+
+export const Select = (args: BMSelectProps) => {
+  const [value, setValue] = useState("");
+
+  return (
+    <Box display="flex" flexDirection={"column"}>
+      <BMSelect
+        {...args}
+        sx={{ width: 300 }}
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        selectProps={{ placeholder: "Select smth" }}
+      >
+        <MenuItem value="" sx={{ display: "none" }}>
+          Select smth
+        </MenuItem>
+        <MenuItem value="111">Option 1</MenuItem>
+        <MenuItem value="222">Option 2</MenuItem>
+        <MenuItem value="333">Option 3</MenuItem>
+        <MenuItem value="444">Option 4</MenuItem>
+      </BMSelect>
+    </Box>
+  );
+};
+Select.args = args;
+
+//Multi Select list
+const options: string[] = ["Option-1", "Option-2", "Option-3"];
+export const MultiSelect = (args: BMSelectProps) => {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const isAllSelected = selected.length === options.length;
+
+  const handleChange = (event: any) => {
+    const value = event.target.value;
+    if (value[value.length - 1] === "ALL") {
+      setSelected(selected.length === options.length ? [] : options);
+    } else setSelected(value);
+  };
+
+  const renderInputValue = (values: any) => {
+    if (values.length === 0) return "Select Option";
+    if (values.length === 1) return values[0];
+    if (values.length === 2) return "2 options";
+    if (values.length === 3) return "All options";
+  };
+
+  return (
+    <BMSelect
+      sx={{ width: 300 }}
+      {...args}
+      value={selected}
+      onChange={handleChange}
+      selectProps={{ multiple: true }}
+      menuProps={{ variant: "menu" }}
+      renderValue={renderInputValue}
+    >
+      <MenuItem key={"Select-All"} value={"ALL"} sx={{ paddingLeft: 1 }}>
+        <BMCheckbox checked={isAllSelected} label={""} disableRipple dataTestId="all-selected"/>
+        Select All
+      </MenuItem>
+      {options.map((option) => (
+        <MenuItem key={option} value={option} sx={{ paddingLeft: 1 }}>
+          <BMCheckbox
+            checked={selected.indexOf(option as never) > -1}
+            label={""}
+            disableRipple
+            dataTestId="bm-multi-select-checkbox"
+          />
+          {option}
+        </MenuItem>
+      ))}
+    </BMSelect>
+  );
+};
+MultiSelect.args = args;
+
+type FormValues = {
+  country: string;
+};
+
+// BMSelectField Story
+export const SelectField = (args: BMSelectProps) => {
+  const methods = useForm<FormValues>({
+    defaultValues: {
+      country: "",
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <Box
+        component="form"
+        onSubmit={methods.handleSubmit(console.log)}
+        sx={{ width: 300 }}
+      >
+        <BMSelectField<FormValues>
+          name="country"
+          fullWidth
+          control={methods.control}
+          label="Country"
+          rules={{ required: "Required field" }}
+          selectProps={{
+            displayEmpty: true,
+          }}
+          sx={{
+            minWidth: 320,
+            "& .MuiSelect-select": {
+              display: "flex",
+              alignItems: "center",
+              paddingRight: "32px",
+            },
+          }}
+          {...args}
+        >
+          <MenuItem value="" disabled>
+            Select Country
+          </MenuItem>
+          <MenuItem value="IN">India</MenuItem>
+          <MenuItem value="US">USA</MenuItem>
+          <MenuItem value="UK">UK</MenuItem>
+        </BMSelectField>
+      </Box>
+    </FormProvider>
+  );
+};
+
+SelectField.args = {
+  ...args,
+  label: "Country",
+  helperText: "Choose your country",
+};