@bigmath-ui-library/core 2.0.4

package/src/theme/theme.ts

@@ -0,0 +1,326 @@
+import {
+  type PaletteOptions,
+  type ThemeOptions,
+  createTheme,
+} from "@mui/material";
+import { TypographyOptions } from "@mui/material/styles/createTypography";
+import { BMButton } from "./BMButton";
+import { BMCheckbox } from "./BMCheckbox";
+import { BMInput, BMInputLabel } from "./BMInput";
+import { BMRadio } from "./BMRadio";
+import { BMToggle } from "./BMToggle";
+import { BMTooltip } from "./BMTooltip";
+import { BMAutoComplete } from "./BMAutoComplete";
+import { BMFormHelperText } from "./BMFormHelperText";
+import { colors, themeVariables as variables } from "./variables";
+import { BMTab, BMTabs } from "./BMTabs";
+import { BMMaps } from "./BMMaps";
+import { BMButtonGroup } from "./BMButtonGroup";
+
+declare module "@mui/material/styles/createPalette" {
+  // extend with extra common colors
+  interface CommonColors {
+    blue: string;
+    magenta: string;
+    purple: string;
+    purpleDark: string;
+    cyan: string;
+    orange: string;
+    yellow: string;
+    indigo: string;
+  }
+
+  // add more text color options
+  interface TypeText {
+    highlighted: string;
+  }
+
+  interface ChartColors {
+    stroke: {
+      cat1: string;
+      cat2: string;
+      cat3: string;
+      cat4: string;
+      cat5: string;
+      cat6: string;
+      cat7: string;
+      cat8: string;
+      cat9: string;
+      cat10: string;
+    };
+    fill: {
+      area1: string;
+      area2: string;
+      area3: string;
+      area4: string;
+      area5: string;
+      area6: string;
+      area7: string;
+      area8: string;
+      area9: string;
+      area10: string;
+    };
+  }
+
+  interface RedColors {
+    50: string;
+  }
+
+  interface YellowColors {
+    50: string;
+  }
+
+  interface GreenColors {
+    50: string;
+  }
+
+  interface PurpleColors {
+    50: string;
+    100: string;
+  }
+
+  interface MarketingColors {
+    indigo: string;
+    orange: string;
+  }
+
+  // extend standard palette with chart colors
+  interface Palette {
+    red: RedColors;
+    green: GreenColors;
+    yellow: YellowColors;
+    purple: PurpleColors;
+    chart: ChartColors;
+    marketing: MarketingColors;
+  }
+
+  interface PaletteOptions {
+    red?: RedColors;
+    green?: GreenColors;
+    yellow?: YellowColors;
+    purple?: PurpleColors;
+    chart?: ChartColors;
+    marketing?: MarketingColors;
+  }
+
+  // extend standard palette with color tones
+  interface PaletteColor {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+  }
+}
+
+export const coreTheme = createTheme({
+  palette: {
+    primary: {
+      ...colors.primary,
+      main: colors.primary[600],
+    },
+    secondary: {
+      ...colors.secondary,
+      main: colors.secondary[600],
+    },
+    grey: {
+      ...colors.grey,
+    },
+    error: {
+      ...colors.error,
+      main: colors.error[500],
+    },
+    warning: {
+      ...colors.warning,
+      main: colors.warning[500],
+    },
+    success: {
+      ...colors.success,
+      main: colors.success[500],
+    },
+    info: {
+      ...colors.info,
+      main: colors.info[500],
+    },
+    common: {
+      ...colors.common,
+    },
+    background: {
+      ...colors.background,
+    },
+    text: {
+      primary: colors.grey[900],
+      secondary: colors.grey[600],
+      disabled: colors.grey[600],
+    },
+    action: {
+      hover: colors.primary[100],
+      selected: colors.primary[200],
+      disabledBackground: colors.grey[300],
+    },
+    divider: colors.grey[200],
+  } as PaletteOptions,
+  shape: {
+    ...variables,
+  },
+  typography: {
+    fontSize: 13,
+    fontFamily: '"Inter", sans-serif',
+    allVariants: {
+      letterSpacing: 0,
+      lineHeight: 1.25,
+    },
+    h1: {
+      fontSize: 32,
+      fontWeight: 700,
+    },
+    h2: {
+      fontSize: 24,
+      fontWeight: 700,
+    },
+    h3: {
+      fontSize: 21,
+      fontWeight: 700,
+    },
+    h4: {
+      fontSize: 18,
+      fontWeight: 700,
+    },
+    h5: {
+      fontSize: 15,
+      fontWeight: 700,
+    },
+    body1: {
+      fontSize: 13,
+      fontWeight: 600,
+    },
+    body2: {
+      fontSize: 13,
+      fontWeight: 400,
+    },
+    subtitle1: {
+      fontSize: 11.5,
+      fontWeight: 400,
+    },
+    subtitle2: {
+      fontSize: 11.5,
+      fontWeight: 600,
+    },
+    button: {
+      fontSize: 11.5,
+      fontWeight: 500,
+      textTransform: "uppercase",
+    },
+    gradient: {
+      background: "linear-gradient(282.49deg, #ed35c5 0.48%, #7879f1 93.17%)",
+    },
+  } as TypographyOptions,
+  components: {
+    MuiButton: BMButton,
+    MuiInput: BMInput,
+    MuiInputLabel: BMInputLabel,
+    MuiFormHelperText: BMFormHelperText,
+    MuiCheckbox: BMCheckbox,
+    MuiSwitch: BMToggle,
+    MuiRadio: BMRadio,
+    MuiTooltip: BMTooltip,
+    MuiAutocomplete: BMAutoComplete,
+    MuiButtonGroup: BMButtonGroup,
+    //Move to seperate file once this component override gets big
+    MuiSelect: {
+      styleOverrides: {
+        select: {
+          display: "flex",
+          alignItems: "center",
+          "&&": {
+            paddingRight: 28,
+          },
+          "&:focus": {
+            backgroundColor: "inherit",
+          },
+          "&$disabled": {
+            cursor: "not-allowed",
+          },
+        },
+        icon: {
+          position: "initial",
+          margin: "8px",
+        },
+      },
+    },
+    MuiMenu: {
+      styleOverrides: {
+        paper: {
+          boxShadow: variables.shadowThick,
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          height: 32,
+          fontSize: 13,
+          fontWeight: 400,
+          color: colors.grey[900],
+          "&$disabled": {
+            cursor: "not-allowed",
+          },
+          "&:focus": {
+            backgroundColor: colors.primary[100],
+          },
+          "&[aria-selected=true]": {
+            backgroundColor: colors.primary[200],
+          },
+        },
+      },
+    },
+    MuiListItem: {
+      styleOverrides: {
+        root: {
+          "&$selected": {
+            backgroundColor: colors.primary[200],
+          },
+          "&.Mui-focusVisible": {
+            backgroundColor: "unset",
+          },
+        },
+        button: {
+          "&:hover": {
+            backgroundColor: colors.primary[100],
+          },
+          "&$selected": {
+            backgroundColor: colors.primary[200],
+          },
+          "&:focus": {
+            backgroundColor: colors.primary[100],
+          },
+        },
+      },
+    },
+    MuiTabs: BMTabs,
+    MuiTab: BMTab,
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          marginTop: 1,
+          fontSize: 13,
+          lineHeight: "32px",
+          borderWidth: 1,
+          borderColor: colors.grey[300],
+          borderStyle: "solid",
+          borderRadius: variables.borderRadius,
+          boxShadow: "none",
+        },
+      },
+    },
+    MuiPaper: {
+      defaultProps: { elevation: 0 },
+    },
+    BMMaps: BMMaps,
+  },
+} as ThemeOptions);

package/src/theme/variables.ts

@@ -0,0 +1,152 @@
+import type {
+  CommonColors,
+  PaletteColor,
+  TypeBackground,
+} from "@mui/material/styles/createPalette";
+
+export const colors = {
+  primary: {
+    100: "#F2F6FF",
+    200: "#E5EDFF",
+    300: "#CBDBFF",
+    400: "#8DABF0",
+    500: "#507CE1",
+    600: "#2B59C3",
+    700: "#1A44A5",
+    800: "#0A2972",
+    900: "#031541",
+  } as PaletteColor,
+  secondary: {
+    100: "#F1F1F7",
+    200: "#E9E9F2",
+    300: "#CAC9DF",
+    400: "#AAAAD0",
+    500: "#7B7BB8",
+    600: "#4F4FA4",
+    700: "#30307F",
+    800: "#171755",
+    900: "#000041",
+  } as PaletteColor,
+  grey: {
+    50: "#F7F9FB",
+    100: "#F0F4F7",
+    200: "#E9EEF2",
+    300: "#D7DEE4", // sometimes refered as #D7DDE1 in designs
+    400: "#B7C3CB",
+    500: "#97A5B0",
+    600: "#6D7C88",
+    700: "#4E5F6D",
+    800: "#25323D",
+    900: "#0B1117",
+  } as PaletteColor,
+  red: {
+    50: "#FEEDED",
+  } as PaletteColor,
+  yellow: {
+    50: "#FFF6E3",
+  } as PaletteColor,
+  green: {
+    50: "#F0FAF6",
+  } as PaletteColor,
+  purple: {
+    50: "#F2F3FE",
+    100: "#E8E9FE",
+  } as PaletteColor,
+  error: {
+    100: "#FDE2E2",
+    200: "#FDDCDC",
+    300: "#F9ACAC",
+    500: "#DA1515",
+    700: "#8F0000",
+    900: "#590000",
+  } as PaletteColor,
+  warning: {
+    100: "#FFEEC8",
+    300: "#FFD383",
+    500: "#FFA400",
+    700: "#C88900",
+    900: "#9D6C00",
+  } as PaletteColor,
+  success: {
+    100: "#CDEFE1",
+    300: "#82D2B0",
+    500: "#13A868",
+    700: "#097345",
+    900: "#024126",
+  } as PaletteColor,
+  info: {
+    100: "#D7EFF4",
+    200: "#DFF5FF",
+    300: "#9EE7F5",
+    400: "#F8FBFC",
+    500: "#45C8E2",
+    700: "#00819B",
+    900: "#003E4B",
+  } as PaletteColor,
+  background: {
+    default: "#F7FAFC",
+    paper: "#FFFFFF",
+    grey005: "#FBFCFD",
+  } as TypeBackground,
+  // non-semantic common colors for things like charts, progress bars, etc
+  common: {
+    black: "#000000",
+    white: "#FFFFFF",
+    blue: "#36B8F5",
+    magenta: "#D74FEE",
+    purple: "#A5A6F6",
+    purpleDark: "#5D5FEF",
+    cyan: "#43BFC2",
+    orange: "#FF6E42",
+    yellow: "#FFFAC8",
+    indigo: "#5E60F0",
+  } as CommonColors,
+  chartStroke: {
+    cat1: "#30307F",
+    cat2: "#36B8F5",
+    cat3: "#BB43BC",
+    cat4: "#43BFC2",
+    cat5: "#90948E",
+    cat6: "#1C7180",
+    cat7: "#EEA95F",
+    cat8: "#3590D9",
+    cat9: "#F0679E",
+    cat10: "#707B8E",
+    cat11: "#20A7C9",
+    cat12: "#FF6142",
+    cat13: "#1C1CE7",
+  },
+  chartFill: {
+    area1: "#EAEAF2",
+    area2: "#EBF8FE",
+    area3: "#F8ECF8",
+    area4: "#ECF8F9",
+    area5: "#F4F4F3",
+    area6: "#E8F1F2",
+    area7: "#FDF6EF",
+    area8: "#EBF4FB",
+    area9: "#FDF0F5",
+    area10: "#F0F2F3",
+
+    // Bar chart properties
+    bar1: "#0098F0",
+    bar2: "#262666",
+  },
+  marketing: {
+    indigo: "#1E154B",
+    orange: "#FF5F3B",
+  },
+};
+
+export const themeVariables = {
+  screenMinWidth: 1024,
+  screenMinHeight: 600,
+  sidebarWidthMin: 62,
+  sidebarWidthMax: 232,
+  footerHeight: 40,
+  toolbarHeight: 55,
+  inputHeight: 32,
+  borderRadius: 8,
+  shadowLight: "0 0 4px 0 rgba(0,0,0,0.1)",
+  shadowThick: "0 0 8px 0 rgba(0,0,0,0.1)",
+};

package/src/types/custom.d.ts

@@ -0,0 +1,9 @@
+declare module "*.svg" {
+	const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+	export default content;
+}
+
+declare module "*.css" {
+	const content: { [key: string]: string };
+	export default content;
+}

package/src/types/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  import React from 'react';
+  const SVGComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  export default SVGComponent;
+} 

package/stories/BMAButton.stories.tsx

@@ -0,0 +1,67 @@
+import { Search } from "@mui/icons-material";
+import { Box, SpeedDialIcon, Typography } from "@mui/material";
+import type { Meta } from "@storybook/react";
+import { BMButton, type BMAButtonProps } from "../src/bma";
+import { BMSplitButtonProps } from "@bigmath-ui-library/core";
+import { BMSplitButton } from "../src/bma/components/BMButton";
+
+const meta: Meta<BMAButtonProps> = {
+  component: BMButton,
+  title: "bma/Button",
+};
+export default meta;
+
+const getButtons = (type: BMAButtonProps["variant"], props: BMAButtonProps) => (
+  <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: BMAButtonProps) => (
+  <Box
+    sx={{
+      display: "flex",
+      gap: "18px",
+      alignItems: "center",
+      flexDirection: "column",
+    }}
+  >
+    {getButtons("primary", props)}
+    {getButtons("secondary", props)}
+    {getButtons("ghost", props)}
+    {getButtons("bmaPrimary", props)}
+  </Box>
+);
+
+Button.parameters = {
+  pseudo: {
+    hover: ["#hover"],
+    active: "#active",
+  },
+};
+
+export const SplitButton = (props: BMSplitButtonProps) => (
+    <BMSplitButton {...props} label="Split Button" variant="bmaPrimary" options={[
+        { label: "Option 1", onClick: () => { alert("Option 1 clicked") } },
+        { label: "Option 2", onClick: () => { alert("Option 2 clicked") } },
+        { label: "Option 3", onClick: () => { alert("Option 3 clicked") } },
+    ]} />
+);

package/stories/BMAccordion.stories.tsx

@@ -0,0 +1,55 @@
+import { Box, Chip } from "@mui/material";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { BMAccordion } from "../src";
+
+const meta: Meta<typeof BMAccordion> = {
+  title: "InReview/BMAccordion",
+  component: BMAccordion,
+  tags: ["autodocs"],
+  argTypes: {
+    isAccordionList: { control: "boolean" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BMAccordion>;
+
+export const Default: Story = {
+  args: {
+    titleContent: "Default Accordion",
+    defaultExpanded: true,
+    children: (
+      <Box sx={{ p: 2 }}>This is the content inside the accordion.</Box>
+    ),
+  },
+};
+
+export const WithChips: Story = {
+  args: {
+    titleContent: "Accordion with Chips",
+    defaultExpanded: false,
+    renderChips: () => (
+      <>
+        <Chip label="Active" size="small" sx={{ ml: 1 }} />
+        <Chip label="Beta" size="small" color="secondary" sx={{ ml: 1 }} />
+      </>
+    ),
+    children: (
+      <Box p={2}>
+        This accordion includes chips in its summary when collapsed.
+      </Box>
+    ),
+  },
+};
+
+export const AccordionListVariant: Story = {
+  args: {
+    titleContent: "List Accordion",
+    isAccordionList: true,
+    children: (
+      <Box sx={{ p: 2 }}>This is styled like an accordion list item.</Box>
+    ),
+  },
+};

package/stories/BMAddSection.stories.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@mui/material";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { BMAddSection } from "../src";
+
+const meta: Meta<typeof BMAddSection> = {
+  title: "InReview/BMAddSection",
+  component: BMAddSection,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BMAddSection>;
+
+export const Default: Story = {
+  args: {
+    title: "Add a New Section",
+    body: "This section contains information and controls to perform an action.",
+    bodyVariant: "body1",
+    controls: (
+      <>
+        <Button variant="contained" color="primary">
+          Submit
+        </Button>
+        <Button variant="outlined" color="secondary" sx={{ ml: 2 }}>
+          Cancel
+        </Button>
+      </>
+    ),
+  },
+};
+
+export const WithoutControls: Story = {
+  args: {
+    title: "Simple Section",
+    body: "This section has no controls at the bottom.",
+    bodyVariant: "body2",
+  },
+};

package/stories/BMAlert.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta } from "@storybook/react";
+import { type BMAlertProps, type AlertVariant, BMAlert } from "../src";
+
+export default {
+	title: "BMAlert",
+	component: BMAlert,
+	argTypes: {
+		text: { control: "text" },
+		onClose: { action: "close" },
+	},
+} as Meta;
+
+export const BMAlertStory = (args: BMAlertProps) => <BMAlert {...args} />;
+
+BMAlertStory.storyName = "Alert Default Warning";
+
+BMAlertStory.args = {
+	open: true,
+	text: "You will not be able to connect via this method until you configure your Network Access.",
+	variant: "warning" as AlertVariant,
+	isToast: false,
+};
+
+export const ToastStory = BMAlertStory.bind({});
+
+ToastStory.storyName = "Toast Default Error";
+
+ToastStory.args = {
+	open: true,
+	isToast: true,
+	variant: "error" as AlertVariant,
+	text: "Request failed because id was not provided.",
+};