@bigmath-ui-library/core 2.0.4

package/stories/BMAutoComplete.stories.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { Box } from "@mui/material";
+import type { Meta } from "@storybook/react";
+import { BMAutoComplete, BMAutoCompleteProps } from "../src";
+
+export default {
+  title: "BMAutoComplete",
+  component: BMAutoComplete,
+  parameters: {
+    controls: {
+      include: ["disabled", "size"],
+      sort: "alpha",
+    },
+  },
+} as Meta;
+
+const args = {
+  options: [
+    { label: "The Shawshank Redemption", year: 1994 },
+    { label: "The Godfather", year: 1972 },
+    { label: "The Godfather: Part II", year: 1974 },
+    { label: "The Dark Knight", year: 2008 },
+    { label: "12 Angry Men", year: 1957 },
+    { label: "Schindler's List", year: 1993 },
+    { label: "Pulp Fiction", year: 1994 },
+    {
+      label: "The Lord of the Rings: The Return of the King",
+      year: 2003,
+    },
+    { label: "The Good, the Bad and the Ugly", year: 1966 },
+    { label: "Fight Club", year: 1999 },
+  ],
+  getOptionLabel: (option: Record<string, string>): string =>
+    option.label ?? "",
+  // tooltipText: "These are Top 10 films as rated by IMDb users.",
+  disabled: false,
+};
+
+export const AutoComplete = (args: BMAutoCompleteProps) => {
+  const [value, setValue] = useState<any>(args.options[0]);
+  return (
+    <Box sx={{ width: 500 }}>
+      Medium :{" "}
+      <BMAutoComplete
+        {...args}
+        value={value}
+        onChange={(event, newVal) => {
+          setValue(newVal);
+        }}
+        bmInputProps={{ placeholder: "Select Movie", dataTestId: "bm-autocomplete" }}
+      />
+      <br /> Multiple for BMA:
+      <BMAutoComplete
+        {...args}
+        openOnFocus={true}
+        // value={value}
+        multiple={true}
+        onChange={(event, newVal) => setValue(newVal)}
+        bmInputProps={{ placeholder: "Select Movie", dataTestId: "bm-autocomplete-multiple" }}
+      />
+    </Box>
+  );
+};
+
+AutoComplete.args = args;

package/stories/BMAvatar.stories.tsx

@@ -0,0 +1,76 @@
+import { Box, Typography } from "@mui/material";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { BMAvatar, AvatarProps } from "../src";
+
+const meta: Meta<AvatarProps> = {
+  title: "InReview/BMAvatar",
+  component: BMAvatar,
+  tags: ["autodocs"],
+  parameters: {
+    controls: { enabled: false },
+  },
+};
+
+export default meta;
+
+export const AllVariants: StoryObj = {
+  render: () => (
+    <Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
+      <Box sx={{ alignItems: "center" }}>
+        <Typography variant="body2" gutterBottom sx={{ mb: 1 }}>
+          With Image (Large)
+        </Typography>
+        <BMAvatar
+          size="large"
+          imageUrl="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=3560&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        />
+      </Box>
+
+      <Box sx={{ alignItems: "center" }}>
+        <Typography variant="body2" gutterBottom sx={{ mb: 1 }}>
+          With No Image (Medium)
+        </Typography>
+        <BMAvatar size="medium" />
+      </Box>
+
+      <Box sx={{ alignItems: "center" }}>
+        <Typography variant="body2" gutterBottom sx={{ mb: 1 }}>
+          Small Size
+        </Typography>
+        <BMAvatar size="small" />
+      </Box>
+
+      <Box sx={{ alignItems: "center" }}>
+        <Typography variant="body2" gutterBottom sx={{ mb: 1 }}>
+          Broken Image
+        </Typography>
+        <BMAvatar size="large" imageUrl="https://broken-link.jpg" />
+      </Box>
+    </Box>
+  ),
+};
+
+export const Default: StoryObj<AvatarProps> = {
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["small", "medium", "large"],
+      },
+      description: "Size of the avatar",
+    },
+    imageUrl: {
+      control: "text",
+      description: "URL for the image",
+    },
+  },
+  render: (args) => (
+    <Box sx={{ alignItems: "center" }}>
+      <Typography variant="body2" gutterBottom sx={{ mb: 1 }}>
+        Default
+      </Typography>
+      <BMAvatar {...args} />
+    </Box>
+  ),
+};

package/stories/BMButton.stories.tsx

@@ -0,0 +1,57 @@
+import { Search } from "@mui/icons-material";
+import { Box, SpeedDialIcon, Typography } from "@mui/material";
+import type { Meta } from "@storybook/react";
+import { BMButton, type BMButtonProps } from "../src";
+
+const meta: Meta<BMButtonProps> = {
+  component: BMButton,
+  title: "Button",
+};
+export default meta;
+
+const getButtons = (type: BMButtonProps["variant"], props: BMButtonProps) => (
+  <Box sx={{ display: "flex", gap: "18px", alignItems: "center" }}>
+    <Typography variant="body2">{type}</Typography>
+    <BMButton {...props} variant={type}>
+      Button
+    </BMButton>
+    <BMButton {...props} disabled variant={type}>
+      Disabled
+    </BMButton>
+    <BMButton {...props} variant={type} id="hover">
+      Hover
+    </BMButton>
+    <BMButton {...props} variant={type} id="active">
+      Active
+    </BMButton>
+    <BMButton {...props} variant={type} startIcon={<Search />}>
+      Search
+    </BMButton>
+    <BMButton {...props} variant={type} endIcon={<SpeedDialIcon />}>
+      End Icon
+    </BMButton>
+  </Box>
+);
+
+export const Button = (props: BMButtonProps) => (
+  <Box
+    sx={{
+      display: "flex",
+      gap: "18px",
+      alignItems: "center",
+      flexDirection: "column",
+    }}
+  >
+    {getButtons("primary", props)}
+    {getButtons("secondary", props)}
+    {getButtons("ghost", props)}
+    {getButtons("gradient", props)}
+  </Box>
+);
+
+Button.parameters = {
+  pseudo: {
+    hover: ["#hover"],
+    active: "#active",
+  },
+};

package/stories/BMButton2.stories.tsx

@@ -0,0 +1,131 @@
+// storybook stories don't need i18n, so turning off corresponding eslint rule
+/* eslint-disable react/jsx-no-literals */
+
+import { Settings } from "@mui/icons-material";
+import { BMButton } from "../src";
+import CaretDownIcon from '../src/assets/icons/caret-down.svg';
+import { BMButtonProps } from "../src";
+import { Meta } from "@storybook/react";
+export default {
+    title: 'BMButton2',
+    component: BMButton,
+    parameters: {
+        controls: {
+            include: ['children', 'variant', 'size', 'disabled', 'showSpinner', 'fullWidth', 'startIcon', 'endIcon'],
+            sort: 'alpha'
+        },
+        actions: {
+            handles: ['click']
+        }
+    },
+    argTypes: {
+        size: {
+            options: ['small', 'medium', 'large']
+        },
+        startIcon: {
+            control: { type: 'boolean' },
+            mapping: { true: <Settings />, false: null }
+        },
+        endIcon: {
+            control: { type: 'boolean' },
+            mapping: { true: <CaretDownIcon />, false: null }
+        }
+    }
+} as Meta;
+
+export const Primary = (props: BMButtonProps) => (
+    <div>
+        <BMButton variant="primary" {...props}>Default</BMButton>
+        <p />
+        <BMButton variant="primary" startIcon={<Settings />} {...props}>
+            Start Icon
+        </BMButton>
+        <p />
+        <BMButton variant="primary" endIcon={<CaretDownIcon />} {...props}>
+            End Icon
+        </BMButton>
+        <p />
+        <BMButton variant="primary" startIcon={<Settings />} endIcon={<CaretDownIcon />} {...props}>
+            Both Icons
+        </BMButton>
+        <p />
+        <BMButton variant="primary" size="small" {...props}>
+            Small size
+        </BMButton>
+        <p />
+        <BMButton variant="primary" disabled {...props}>
+            Disabled
+        </BMButton>
+        <p />
+        <BMButton variant="primary" disabled showSpinner {...props}>
+            Loading
+        </BMButton>
+    </div>
+);
+
+export const Secondary = (props: BMButtonProps) => (
+    <div>
+        <BMButton variant="secondary" {...props}>Default</BMButton>
+        <p />
+        <BMButton variant="secondary" startIcon={<Settings />} {...props}>
+            Start Icon
+        </BMButton>
+        <p />
+        <BMButton variant="secondary" endIcon={<CaretDownIcon />} {...props}>
+            End Icon
+        </BMButton>
+        <p />
+        <BMButton variant="secondary" startIcon={<Settings />} endIcon={<CaretDownIcon />} {...props}>
+            Both Icons
+        </BMButton>
+        <p />
+        <BMButton variant="secondary" size="small" {...props}>
+            Small size
+        </BMButton>
+        <p />
+        <BMButton variant="secondary" disabled {...props}>
+            Disabled
+        </BMButton>
+        <p />
+        <BMButton variant="secondary" disabled showSpinner {...props}>
+            Loading
+        </BMButton>
+    </div>
+);
+
+export const Ghost = (props: BMButtonProps) => (
+    <div>
+        <BMButton variant="ghost" {...props}>Default</BMButton>
+        <p />
+        <BMButton variant="ghost" startIcon={<Settings />} {...props}>
+            Start Icon
+        </BMButton>
+        <p />
+        <BMButton variant="ghost" endIcon={<CaretDownIcon />} {...props}>
+            End Icon
+        </BMButton>
+        <p />
+        <BMButton variant="ghost" startIcon={<Settings />} endIcon={<CaretDownIcon />} {...props}>
+            Both Icons
+        </BMButton>
+        <p />
+        <BMButton variant="ghost" size="small" {...props}>
+            Small size
+        </BMButton>
+        <p />
+        <BMButton variant="ghost" disabled {...props}>
+            Disabled
+        </BMButton>
+        <p />
+        <BMButton variant="ghost" disabled showSpinner {...props}>
+            Loading
+        </BMButton>
+    </div>
+);
+
+export const Configurable = (args: BMButtonProps) => <BMButton {...args} />;
+Configurable.args = {
+    variant: 'primary',
+    size: 'medium',
+    children: 'Demo'
+};

package/stories/BMCheckbox.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta } from "@storybook/react";
+import { BMCheckbox, BMCheckboxField, BMCheckboxProps } from "../src";
+import { useForm, FormProvider } from "react-hook-form";
+
+const meta: Meta<typeof BMCheckbox> = {
+	component: BMCheckbox,
+	title: "Checkbox",
+};
+export default meta;
+
+export const Checkbox = (props: BMCheckboxProps) => (
+	<BMCheckbox {...props} label="This is a checkbox with label" dataTestId="bm-checkbox-test" />
+);
+interface FormProps {
+	name: string;
+}
+export const CheckboxField = (props: BMCheckboxProps) => {
+	const methods = useForm<FormProps>();
+	return (
+		<FormProvider {...methods}>
+			<BMCheckboxField {...props} name="name" label="This is a checkbox with label" dataTestId="bm-checkbox-test" />
+		</FormProvider>);
+};

package/stories/BMCloudSelectField.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta } from "@storybook/react";
+import { BMCloudSelectField, BMCloudSelectFieldProps } from "../src";
+import { AWS_CLOUD_OPTION, AZURE_CLOUD_OPTION, GCP_CLOUD_OPTION, K8S_CLOUD_OPTION, ON_PREM_CLOUD_OPTION } from "../src/components/BMCloudSelect/BMCloudList";
+import { FormProvider, useForm } from "react-hook-form";
+
+
+export default {
+    title: "BMCloudSelectField",
+    component: BMCloudSelectField,
+    argTypes: {
+    },
+} as Meta;
+
+interface FormProps {
+	cloud: string;
+}
+
+export const BMCloudSelectFieldStory = (args: BMCloudSelectFieldProps<FormProps>) => {
+
+        const methods = useForm<FormProps>();
+        return (
+            <FormProvider {...methods}>
+               <BMCloudSelectField {...args} name="cloud" />
+            </FormProvider>
+        );
+}
+
+
+BMCloudSelectFieldStory.args = {
+    options: [
+        AWS_CLOUD_OPTION,
+        GCP_CLOUD_OPTION,
+        AZURE_CLOUD_OPTION,
+        K8S_CLOUD_OPTION,
+        ON_PREM_CLOUD_OPTION,
+    ],
+    label: "Select Cloud Provider",
+}
+
+BMCloudSelectFieldStory.storyName = "BM Cloud Select";

package/stories/BMCodeBlock.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BMCodeBlock } from '../src';
+
+const sampleCode = `function greet(name) {
+  return "Hello, " + name + "!";
+}
+greet("World");`;
+
+const meta: Meta<typeof BMCodeBlock> = {
+  title: 'InReview/BMCodeBlock',
+  component: BMCodeBlock,
+  args: {
+    text: sampleCode,
+    lang: 'javascript',
+    showCopyButton: true,
+    enabledExpandCollapse: false,
+    copyLabel: 'Copy',
+    showAllLabel: 'Show All',
+    collapseLabel: 'Collapse',
+    onCopySuccess: () => alert('Code copied!'),
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BMCodeBlock>;
+
+export const Default: Story = {};
+
+export const Expandable: Story = {
+  args: {
+    enabledExpandCollapse: true,
+    collapseHeight: 60
+  }
+};
+
+export const MultiBlock: Story = {
+  args: {
+    multiBlock: true,
+    text: [
+      'const a = 10;',
+      'const b = 20;',
+      'console.log(a + b);'
+    ]
+  }
+};
+
+export const CustomLabels: Story = {
+  args: {
+    copyLabel: 'Copy Code',
+    showAllLabel: 'Expand All',
+    collapseLabel: 'Collapse',
+    enabledExpandCollapse: true
+  }
+};

package/stories/BMDatePicker.stories.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { Box } from "@mui/material";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { BMDatePicker } from "../src";
+
+const meta: Meta<typeof BMDatePicker> = {
+  title: "InReview/BMDatePicker",
+  component: BMDatePicker,
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: "text" },
+    value: { control: "date" },
+    readOnly: { control: "boolean" },
+    openOnInputClick: { control: "boolean" },
+    placeholder: { control: "text" },
+    minDate: { control: "date" },
+    maxDate: { control: "date" },
+    disabled: { control: "boolean" },
+    format: { control: "text" },
+    bottomNoteText: { control: "text" },
+    shouldDisableDate: { table: { disable: true } },
+    onChange: { action: "changed" },
+    popoverProps: { table: { disable: true } },
+    className: { control: "text" },
+    dataTestid: { control: "text" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BMDatePicker>;
+
+export const Default: Story = {
+  args: {
+    label: "Select date",
+    readOnly: false,
+    openOnInputClick: true,
+    placeholder: "YYYY-MM-DD",
+    disabled: false,
+    format: "yyyy-MM-dd",
+    bottomNoteText: "Pick your date here",
+    dataTestid: "bm-datepicker",
+  },
+  render: (args) => (
+    <Box sx={{ display: "flex", ml: 1, width: "160px" }}>
+      <BMDatePicker {...args} />
+    </Box>
+  ),
+};
+
+export const WithState: Story = {
+  args: {
+    label: "Select date",
+    value: null,
+    readOnly: false,
+    openOnInputClick: true,
+    placeholder: "YYYY-MM-DD",
+    disabled: false,
+    format: "yyyy-MM-dd",
+    bottomNoteText: "Pick your date here",
+    dataTestid: "bm-datepicker",
+  },
+
+  render: (args) => {
+    const [selectedDate, setSelectedDate] = useState<Date | null>(
+      args.value ?? null
+    );
+
+    const minDate = args.minDate ? new Date(args.minDate) : undefined;
+    const maxDate = args.maxDate ? new Date(args.maxDate) : undefined;
+
+    return (
+      <Box sx={{ display: "flex", ml: 1, width: "160px" }}>
+        <BMDatePicker
+          {...args}
+          value={selectedDate}
+          onChange={(date) => {
+            setSelectedDate(date);
+            args.onChange?.(date);
+          }}
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+      </Box>
+    );
+  },
+};

package/stories/BMDropdown.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryFn } from "@storybook/react";
+import { Box, Button, Divider, MenuItem, Typography } from "@mui/material";
+
+import { BMDropdown, DropdownProps } from "../src";
+
+const meta: Meta<typeof BMDropdown> = {
+  title: "InReview/BMDropdown",
+  component: BMDropdown,
+  tags: ["autodocs"],
+  argTypes: {
+    position: {
+      options: ["bottom", "right"],
+      control: { type: "radio" },
+    },
+    growDirection: {
+      options: ["up", "down", "left", "right"],
+      control: { type: "radio" },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ margin: "4em auto", width: "250px" }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+const defaultArgs: Partial<DropdownProps> = {
+  position: "bottom",
+  growDirection: "down",
+};
+
+export const Default: StoryFn<DropdownProps> = (props) => {
+  return (
+    <BMDropdown {...props} origin={<Button>Open Dropdown</Button>}>
+      <a href="https://google.com" key="link-option">
+        <MenuItem>Google</MenuItem>
+      </a>
+      <MenuItem
+        key="click-option"
+        onClick={() => alert("Alert Me button was clicked")}
+      >
+        Alert Me
+      </MenuItem>
+    </BMDropdown>
+  );
+};
+
+Default.args = defaultArgs;
+
+export const Popover: StoryFn<DropdownProps> = (props) => {
+  return (
+    <BMDropdown {...props} origin={<Button>Open Alerts</Button>}>
+      <Box sx={{ py: 1, px: 2 }}>
+        <Typography variant="h6" gutterBottom>
+          Notifications
+        </Typography>
+
+        <Divider sx={{ mb: 1 }} />
+
+        <Typography variant="body2">
+          You can put anything inside the popover
+        </Typography>
+
+        <ul style={{ paddingLeft: 16, marginTop: 8 }}>
+          <li>
+            <Box>Name of the alert</Box>
+          </li>
+          <li>
+            <Box>Name of the alert</Box>
+          </li>
+          <li>
+            <Box>Name of the alert</Box>
+          </li>
+        </ul>
+      </Box>
+    </BMDropdown>
+  );
+};
+
+Popover.args = defaultArgs;

package/stories/BMGroupButton.stories.tsx

@@ -0,0 +1,53 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { BMButtonGroup, BMButton } from '../src/components';
+
+export default {
+    title: 'BMGroupButton',
+    component: BMButtonGroup,
+    argTypes: {
+        options: { control: 'array' },
+        selected: { control: 'text' },
+        onChange: { action: 'changed' },
+    },
+} as ComponentMeta<typeof BMButtonGroup>;
+
+const Template: ComponentStory<typeof BMButtonGroup> = (args) => <BMButtonGroup {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    buttons:[
+        {
+            label: '1',
+            onClick: () => console.log('Button 1 clicked'),
+            buttonProps: {
+                variant: 'secondary',
+                dataTestId: 'bm-group-button-1'
+            }
+        },
+        {
+            label: '2',
+            onClick: () => console.log('Button 2 clicked'),
+            buttonProps: {
+                variant: 'secondary',
+                dataTestId: 'bm-group-button-2'
+            }
+        },
+        {
+            label: '3',
+            onClick: () => console.log('Button 3 clicked'),
+            buttonProps: {
+                variant: 'secondary',
+                dataTestId: 'bm-group-button-3'
+            }
+        },
+        {
+            label: '4',
+            onClick: () => console.log('Button 4 clicked'),
+            buttonProps: {
+                variant: 'secondary',
+                dataTestId: 'bm-group-button-4'
+            }
+        },
+    ],
+    active: '1',
+};