@bigmath-ui-library/core 2.0.4

package/stories/BMTagv2.stories.tsx

@@ -0,0 +1,288 @@
+import React from 'react';
+import type { Meta, StoryFn } from "@storybook/react";
+import { Box, Stack } from "@mui/material";
+import { BMTagv2 } from "../src/components/BMTagv2";
+import { Language as LanguageIcon } from '@mui/icons-material';
+import type { BMTagv2Props } from "../src/components/BMTagv2/BMTagv2";
+import AlertIcon from "@coreApp/assets/icons/alert.svg";
+import DragIcon from "@coreApp/assets/icons/drag.svg";
+
+const meta: Meta<typeof BMTagv2> = {
+  title: "InReview/BMTagv2",
+  component: BMTagv2,
+  tags: ["autodocs"],
+  argTypes: {
+    text: { control: "text" },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+      defaultValue: "md"
+    },
+    variant: {
+      control: "select",
+      options: ["default", "primary", "success", "warning", "error", "info"],
+      defaultValue: "default"
+    },
+    prefixIcon: {
+      control: "select",
+      options: [undefined, "language", "star", "close", "check", "warning", "info", "error"],
+      defaultValue: undefined
+    },
+    suffixIcon: {
+      control: "select",
+      options: [undefined, "language", "star", "close", "check", "warning", "info", "error"],
+      defaultValue: undefined
+    },
+    noGradient: { control: "boolean" },
+    filled: { control: "boolean" }
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ margin: "3em" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+export const AllVariants: StoryFn<BMTagv2Props> = () => {
+  return (
+    <Stack spacing={4}>
+      {/* Size Variants */}
+      <Box>
+        <h3>Size Variants</h3>
+        <Stack direction="row" spacing={2}>
+          <BMTagv2 text="Small Tag" size="sm" />
+          <BMTagv2 text="Medium Tag" size="md" />
+          <BMTagv2 text="Large Tag" size="lg" />
+        </Stack>
+      </Box>
+
+      {/* Color Variants */}
+      <Box>
+        <h3>Color Variants</h3>
+        <Stack direction="row" spacing={2}>
+          <BMTagv2 text="Default" variant="default" noGradient />
+          <BMTagv2 text="Primary" variant="primary" noGradient />
+          <BMTagv2 text="Success" variant="success" noGradient />
+          <BMTagv2 text="Warning" variant="warning" noGradient />
+          <BMTagv2 text="Error" variant="error" noGradient />
+          <BMTagv2 text="Info" variant="info" noGradient />
+        </Stack>
+      </Box>
+
+      {/* Filled Variants */}
+      <Box>
+        <h3>Filled Variants</h3>
+        <Stack direction="row" spacing={2}>
+          <BMTagv2 text="Default" variant="default" noGradient filled />
+          <BMTagv2 text="Primary" variant="primary" noGradient filled />
+          <BMTagv2 text="Success" variant="success" noGradient filled />
+          <BMTagv2 text="Warning" variant="warning" noGradient filled />
+          <BMTagv2 text="Error" variant="error" noGradient filled />
+          <BMTagv2 text="Info" variant="info" noGradient filled />
+        </Stack>
+      </Box>
+
+      {/* Gradient vs Non-Gradient */}
+      <Box>
+        <h3>Gradient vs Non-Gradient</h3>
+        <Stack direction="row" spacing={2}>
+          <BMTagv2 text="With Gradient" noGradient={false} />
+          <BMTagv2 text="No Gradient" noGradient={true} />
+        </Stack>
+      </Box>
+
+      {/* Predefined Icons */}
+      <Box>
+        <h3>Predefined Icons</h3>
+        <Stack direction="row" spacing={2}>
+          <BMTagv2 
+            text="Language Icon" 
+            prefixIcon="language"
+          />
+          <BMTagv2 
+            text="Star Icon" 
+            prefixIcon="star"
+          />
+          <BMTagv2 
+            text="Check Icon" 
+            prefixIcon="check"
+          />
+          <BMTagv2 
+            text="Warning Icon" 
+            prefixIcon="warning"
+            variant="warning"
+            noGradient
+          />
+          <BMTagv2 
+            text="Error Icon" 
+            prefixIcon="error"
+            variant="error"
+            noGradient
+          />
+          <BMTagv2 
+            text="Info Icon" 
+            prefixIcon="info"
+            variant="info"
+            noGradient
+          />
+        </Stack>
+      </Box>
+
+      {/* Custom Icons */}
+      <Box>
+        <h3>Custom Icons</h3>
+        <Stack direction="row" spacing={2}>
+          <BMTagv2 
+            text="Custom Prefix" 
+            prefixIcon={<LanguageIcon />}
+          />
+          <BMTagv2 
+            text="Custom Suffix" 
+            suffixIcon={<LanguageIcon />}
+          />
+          <BMTagv2 
+            text="Both Icons" 
+            prefixIcon="info"
+            suffixIcon="close"
+          />
+        </Stack>
+      </Box>
+
+      {/* Combined Features */}
+      <Box>
+        <h3>Combined Features</h3>
+        <Stack direction="row" spacing={2}>
+          <BMTagv2 
+            text="Large Primary Filled" 
+            size="lg" 
+            variant="primary"
+            noGradient
+            filled
+            prefixIcon="language"
+          />
+          <BMTagv2 
+            text="Success with Icons" 
+            variant="success"
+            noGradient
+            prefixIcon="check"
+            suffixIcon="close"
+          />
+          <BMTagv2 
+            text="Small Warning" 
+            size="sm" 
+            variant="warning"
+            noGradient
+            prefixIcon="warning"
+            suffixIcon="close"
+          />
+        </Stack>
+      </Box>
+    </Stack>
+  );
+};
+
+export const MaintenanceTags: StoryFn<BMTagv2Props>= (args) => {
+  return (
+    <div style={{ display: 'flex', gap: '8px', backgroundColor: '#e5e5e5', padding: '16px' }}>
+      <BMTagv2
+        text={
+          <span>
+            Upcoming Critical Maintenance{' '}
+            <a 
+              href="#" 
+              style={{ 
+                color: 'inherit', 
+                textDecoration: 'underline',
+              }}
+              onClick={(e) => {
+                e.preventDefault();
+                // Handle click event
+              }}
+            >
+              Details
+            </a>
+          </span>
+        }
+        prefixIcon={<AlertIcon />}
+        customColor={{
+          background: '#FFFAC9',
+          color: '#25323D',
+          border: '0'
+        }}
+      />
+      <BMTagv2
+        text={
+          <span>
+            Upcoming Critical Maintenance{' '}
+            <a 
+              href="#" 
+              style={{ 
+                color: 'inherit', 
+                textDecoration: 'underline',
+              }}
+              onClick={(e) => {
+                e.preventDefault();
+              }}
+            >
+              Details
+            </a>
+          </span>
+        }
+        prefixIcon="info"
+        variant='primary'
+        noGradient
+        filled
+      />
+      <Box sx={{ display: 'flex', alignItems: 'center', height: 20, background: '#ffffff', borderRadius: '4px' }}>
+      <BMTagv2
+        text="New"
+        variant='default'
+        size='sm'
+        filled
+      />
+      </Box>
+      <BMTagv2
+        text="20% OFF"
+        size='sm'
+        customColor={{
+          background: '#EBF8FF',
+          color: '#006BBF',
+          border: '0px solid #B3E5FC'
+        }}
+      />
+      <BMTagv2
+      text="example@gmail.com"
+      size='md'
+      suffixIcon='close'
+      prefixIcon={<DragIcon />}
+      customColor={{
+        background: '#EBF8FF',
+        color: '#006BBF',
+        border: '0px solid #B3E5FC'
+      }}
+    />
+    </div>
+  );
+}
+
+export const Playground: StoryFn<BMTagv2Props> = (args) => {
+  return (
+    <Box sx={{ display: "flex" }}>
+      <BMTagv2 {...args} />
+    </Box>
+  );
+};
+
+Playground.args = {
+  text: "Example Tag",
+  size: "md",
+  variant: "default",
+  noGradient: false,
+  filled: false,
+  prefixIcon: undefined,
+  suffixIcon: undefined,
+};

package/stories/BMToggle.stories.tsx

@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import type { Meta, StoryFn } from "@storybook/react";
+import { useForm, FormProvider } from "react-hook-form";
+
+import {
+  BMToggle,
+  type BMToggleProps,
+  BMToggleField,
+  BMMultiToggleButton,
+  type BMMultiToggleButtonProps,
+} from "../src";
+
+const meta: Meta<BMToggleProps> = {
+  title: "BMToggle",
+  component: BMToggle,
+  tags: ["autodocs"],
+  decorators: [
+    // biome-ignore lint: TODO for any
+    (Story) => (
+      <div style={{ margin: "3em" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Toggle: StoryFn<BMToggleProps> = (props) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    alert(event.target.checked);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+      <BMToggle name="toggle" label="Inline with label" {...props} />
+      <BMToggle name="toggle" label="" onChange={handleChange} {...props} />
+      <BMToggle name="toggle" label="Disabled" {...props} disabled />
+      <BMToggle
+        name="toggle"
+        label="Checked & Disabled"
+        {...props}
+        checked
+        disabled
+      />
+    </div>
+  );
+};
+
+export const ToggleField: StoryFn = () => {
+  const methods = useForm({
+    defaultValues: {
+      enableFeature: true,
+    },
+  });
+
+  const onSubmit = (data: any) => {
+    alert(JSON.stringify(data, null, 2));
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+          <BMToggleField
+            dataTestId="bm-toggle-field"
+            name="enableFeature"
+            control={methods.control}
+            label="Enable Feature"
+          />
+          <button type="submit">Submit</button>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+ToggleField.storyName = "ToggleField";
+ToggleField.parameters = {
+  docs: {
+    description: {
+      story:
+        "BMToggleField is a wrapper around BMToggle that connects it to react-hook-form via useController.",
+    },
+  },
+};
+
+type OptionValue = "option1" | "option2" | "option3";
+
+const options: BMMultiToggleButtonProps<OptionValue>["options"] = [
+  { label: "Option 1", value: "option1" },
+  { label: "Option 2", value: "option2" },
+  { label: "Option 3", value: "option3" },
+];
+
+export const MultiToggleButton: StoryFn = () => {
+  const [value, setValue] = useState<OptionValue>("option1");
+
+  return (
+    <div style={{ maxWidth: 400 }}>
+      <BMMultiToggleButton
+        options={options}
+        value={value}
+        onChange={(val) => setValue(val)}
+      />
+    </div>
+  );
+};
+
+export const MultiToggleButtonDense: StoryFn = () => {
+  const [value, setValue] = useState<OptionValue>("option2");
+
+  return (
+    <div style={{ maxWidth: 400 }}>
+      <BMMultiToggleButton
+        options={options}
+        value={value}
+        dense
+        onChange={(val) => setValue(val)}
+      />
+    </div>
+  );
+};

package/stories/BMTooltip.stories.tsx

@@ -0,0 +1,59 @@
+import { Box, Typography } from "@mui/material";
+import type { Meta } from "@storybook/react";
+import { BMTooltip, BMTooltipProps } from "../src";
+
+export default {
+  title: "BMTooltip",
+  component: BMTooltip,
+  parameters: {
+    controls: {
+      include: ["title", "arrow", "placement"],
+    },
+  },
+  argTypes: {
+    arrow: {
+      control: { type: "boolean" },
+    },
+    placement: {
+      control: { type: "select" },
+      options: [
+        "bottom-end",
+        "bottom-start",
+        "bottom",
+        "left-end",
+        "left-start",
+        "left",
+        "right-end",
+        "right-start",
+        "right",
+        "top-end",
+        "top-start",
+        "top",
+      ],
+    },
+  },
+} as Meta;
+
+export const Tooltip = (args: BMTooltipProps) => (
+  <Box
+    width="100%"
+    height="400px"
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+  >
+    <BMTooltip {...args} />
+    <BMTooltip {...args}>
+      <span>
+        <Typography variant="body2">{"Text with tooltip"}</Typography>
+      </span>
+    </BMTooltip>
+  </Box>
+);
+Tooltip.args = {
+  arrow: true,
+  placement: "top-start",
+  title:
+    "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.",
+};

package/stories/BMTypography.stories.tsx

@@ -0,0 +1,79 @@
+import {
+	Box,
+	Typography as MuiTypography,
+	type TypographyProps,
+} from "@mui/material";
+import type { Meta } from "@storybook/react";
+
+const meta: Meta<typeof MuiTypography> = {
+	component: MuiTypography,
+	title: "Typography",
+};
+export default meta;
+
+export const Typography = (props: TypographyProps) => (
+	<Box sx={{ width: "100%", maxWidth: 500 }}>
+		<MuiTypography variant="h1" gutterBottom {...props}>
+			h1. Heading
+		</MuiTypography>
+		<MuiTypography variant="h2" gutterBottom {...props}>
+			h2. Heading
+		</MuiTypography>
+		<MuiTypography variant="h3" gutterBottom {...props}>
+			h3. Heading
+		</MuiTypography>
+		<MuiTypography variant="h4" gutterBottom {...props}>
+			h4. Heading
+		</MuiTypography>
+		<MuiTypography variant="h5" gutterBottom {...props}>
+			h5. Heading
+		</MuiTypography>
+		<MuiTypography variant="h6" gutterBottom {...props}>
+			h6. Heading
+		</MuiTypography>
+		<MuiTypography variant="subtitle1" gutterBottom {...props}>
+			subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+			blanditiis tenetur
+		</MuiTypography>
+		<MuiTypography variant="subtitle2" gutterBottom {...props}>
+			subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+			blanditiis tenetur
+		</MuiTypography>
+		<MuiTypography variant="body1" gutterBottom {...props}>
+			body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+			blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
+			neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti?
+			Eum quasi quidem quibusdam.
+		</MuiTypography>
+		<MuiTypography variant="body2" gutterBottom {...props}>
+			body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+			blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
+			neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti?
+			Eum quasi quidem quibusdam.
+		</MuiTypography>
+		<MuiTypography
+			variant="button"
+			gutterBottom
+			sx={{ display: "block" }}
+			{...props}
+		>
+			button text
+		</MuiTypography>
+		<MuiTypography
+			variant="caption"
+			gutterBottom
+			sx={{ display: "block" }}
+			{...props}
+		>
+			caption text
+		</MuiTypography>
+		<MuiTypography
+			variant="overline"
+			gutterBottom
+			sx={{ display: "block" }}
+			{...props}
+		>
+			overline text
+		</MuiTypography>
+	</Box>
+);

package/stories/BMWarning.stories.tsx

@@ -0,0 +1,55 @@
+import { Link } from "@mui/material";
+import { StoryFn, Meta } from "@storybook/react";
+
+import { BMWarning } from "../src";
+
+const meta: Meta<typeof BMWarning> = {
+  title: "InReview/BMWarning",
+  component: BMWarning,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "BMWarning is a wrapper that highlights important messages using a warning chip followed by contextual content. You can pass links, formatted text, or other React elements as children.",
+      },
+    },
+  },
+  argTypes: {
+    chipText: {
+      description: "The text or element shown inside the chip.",
+      control: "text",
+    },
+    children: {
+      description: "The message or content displayed next to the chip.",
+      control: "text",
+    },
+  },
+};
+
+export default meta;
+
+export const Default: StoryFn<typeof BMWarning> = (args) => (
+  <BMWarning {...args} />
+);
+
+Default.args = {
+  chipText: "Warning",
+  children: (
+    <>
+      This is a warning message.{" "}
+      <Link href="#" underline="hover">
+        Learn more
+      </Link>
+    </>
+  ),
+};
+
+Default.parameters = {
+  docs: {
+    description: {
+      story: "A typical warning component with a chip and an external link.",
+    },
+  },
+};

package/stories/GenericFailure.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { GenericFailure } from "../src";
+
+const meta: Meta<typeof GenericFailure> = {
+  title: "InReview/GenericFailure",
+  component: GenericFailure,
+  tags: ["autodocs"],
+  argTypes: {
+    text: {
+      control: "text",
+      description: "Text to display inside the alert",
+      defaultValue: "Something went wrong. Please try again later.",
+    },
+    sx: {
+      control: false,
+      description: "MUI sx prop to customize styles",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GenericFailure>;
+
+export const Default: Story = {
+  args: {
+    text: "Something went wrong. Please try again later.",
+  },
+};
+
+export const CustomText: Story = {
+  args: {
+    text: "We were unable to process your request due to a server error.",
+  },
+};
+
+export const WithCustomStyles: Story = {
+  args: {
+    text: "This alert has custom styling.",
+    sx: {
+      backgroundColor: "#f9f9f9",
+      border: "1px solid red",
+      borderRadius: 2,
+    },
+  },
+};

package/stories/NoAccess.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryFn } from "@storybook/react";
+
+import { NoAccess, NoAccessProps } from "../src";
+
+const meta: Meta<typeof NoAccess> = {
+  title: "InReview/NoAccess",
+  component: NoAccess,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+export const Default: StoryFn<NoAccessProps> = (args) => <NoAccess {...args} />;
+
+Default.args = {
+  title: "You don't have permission to view this section",
+  subtitle:
+    "If you think you should be able to view this section contact your administrator",
+};