@bigmath-ui-library/core 2.0.4

package/src/components/BMStatus/BMStatus.tsx

@@ -0,0 +1,98 @@
+import { FC, ReactNode } from "react";
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { FiberManualRecord } from "@mui/icons-material";
+
+import CompletedIcon from "../../assets/icons/check.svg";
+import FailedIcon from "../../assets/icons/failed-solid.svg";
+import SuccessIcon from "../../assets/icons/circle-check-solid.svg";
+import LoadingIcon from "../../assets/icons/Default-Loading-Circles.svg";
+
+export enum STATUS_TYPES {
+  SUCCESS = "success",
+  FAILED = "failed",
+  COMPLETE = "completed",
+  ACTIVE = "active",
+  INACTIVE = "inactive",
+  PENDING = "running",
+  ABORTED = "aborted",
+  IN_PROGRESS = "in_progress",
+}
+
+interface StatusProps {
+  label?: ReactNode;
+  type?: STATUS_TYPES;
+}
+
+// Styled components
+const StyledFailedIcon = styled(FailedIcon)(({ theme }) => ({
+  width: 24,
+  marginRight: theme.spacing(0.5),
+  color: theme.palette.error.main,
+}));
+
+const StyledCompletedIcon = styled(CompletedIcon)(({ theme }) => ({
+  marginRight: theme.spacing(0.5),
+  color: theme.palette.success.main,
+}));
+
+const StyledSuccessIcon = styled(SuccessIcon)(({ theme }) => ({
+  marginRight: theme.spacing(0.5),
+  color: theme.palette.success.main,
+}));
+
+const StyledInactiveDot = styled(FiberManualRecord)(({ theme }) => ({
+  fontSize: 12,
+  color: theme.palette.grey[500],
+}));
+
+const StyledActiveDot = styled(FiberManualRecord)(({ theme }) => ({
+  fontSize: 12,
+  marginRight: theme.spacing(0.5),
+  color: theme.palette.success.main,
+}));
+
+const StyledPendingDot = styled(FiberManualRecord)(({ theme }) => ({
+  marginRight: theme.spacing(0.5),
+  width: 12,
+  color: theme.palette.warning[700],
+}));
+
+const StyledLoadingIcon = styled(LoadingIcon)(({ theme }) => ({
+  width: 21,
+  height: 21,
+  marginRight: theme.spacing(1),
+}));
+
+export const BMStatus: FC<StatusProps> = ({
+  label,
+  type = STATUS_TYPES.COMPLETE,
+}) => {
+  const getIcon = () => {
+    switch (type) {
+      case STATUS_TYPES.FAILED:
+        return <StyledFailedIcon />;
+      case STATUS_TYPES.ACTIVE:
+        return <StyledActiveDot />;
+      case STATUS_TYPES.INACTIVE:
+        return <StyledInactiveDot />;
+      case STATUS_TYPES.SUCCESS:
+        return <StyledSuccessIcon />;
+      case STATUS_TYPES.PENDING:
+        return <StyledPendingDot />;
+      case STATUS_TYPES.IN_PROGRESS:
+        return <StyledLoadingIcon />;
+      default:
+        return <StyledCompletedIcon />;
+    }
+  };
+
+  return (
+    <Box
+      sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}
+    >
+      {getIcon()}
+      {label && <Box minWidth={35}>{label}</Box>}
+    </Box>
+  );
+};

package/src/components/BMStatus/index.ts

@@ -0,0 +1 @@
+export * from "./BMStatus";

package/src/components/BMTable/BMTable.tsx

@@ -0,0 +1,131 @@
+import * as React from "react";
+import { HTMLAttributes } from "react";
+
+import {
+  DataGrid,
+  type GridColDef,
+  type GridRowsProp,
+  type DataGridProps,
+} from "@mui/x-data-grid";
+
+import { styled } from "@mui/material/styles";
+import { Paper, Box, useTheme } from "@mui/material";
+
+type SelectableRows = "single" | "multiple" | "none";
+
+export interface CustomTableOptions {
+  pagination?: boolean;
+  viewColumns?: boolean;
+  selectableRowsOnClick?: boolean;
+  setTableProps?: () => Partial<DataGridProps>;
+  filterType?: "dropdown" | "textField";
+}
+
+export interface BMTableProps
+  extends Omit<DataGridProps, "columns" | "rows">,
+    HTMLAttributes<unknown> {
+  tableTitle?: React.ReactNode;
+  selectableRows?: SelectableRows;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: (Record<any, any> | number[] | string[])[];
+  columns: GridColDef[];
+  withBorder?: boolean;
+  dataTestId?: string;
+  options: CustomTableOptions;
+  customHeaderRenderer?: (col: GridColDef) => React.ReactNode;
+}
+
+const StyledPaper = styled(Paper, {
+  shouldForwardProp: (prop) => prop !== "withBorder",
+})<{ withBorder?: boolean }>(({ theme, withBorder }) => ({
+  border: withBorder ? `1px solid ${theme.palette.divider}` : "none",
+  boxShadow: "none",
+  backgroundColor: theme.palette.background.paper,
+  padding: theme.spacing(1, 2),
+  color: theme.palette.text.primary,
+}));
+
+export const BMTable: React.FC<BMTableProps> = ({
+  tableTitle,
+  selectableRows = "none",
+  data,
+  columns,
+  withBorder = true,
+  dataTestId,
+  options,
+  customHeaderRenderer,
+  ...rest
+}) => {
+  const theme = useTheme();
+
+  const tablePropsFromOptions = options?.setTableProps?.() ?? {};
+
+  const getRowId = (row: any) => row.id ?? JSON.stringify(row);
+
+  const getCheckboxSelection = () =>
+    selectableRows === "multiple" ? true : undefined;
+
+  const getIsRowSelectable = () =>
+    selectableRows === "none" ? () => false : undefined;
+
+  const columnsWithCustomHeader = React.useMemo(() => {
+    if (!customHeaderRenderer) return columns;
+  
+    return columns.map((col) => ({
+      ...col,
+      renderHeader: () => customHeaderRenderer(col),
+    }));
+  }, [columns, customHeaderRenderer]);
+
+  return (
+    <StyledPaper withBorder={withBorder} data-testid={dataTestId}>
+      {tableTitle && (
+        <Box
+          sx={{
+            mb: 1,
+            fontWeight: 600,
+            fontSize: "1.1rem",
+            color: theme.palette.text.primary,
+          }}
+        >
+          {tableTitle}
+        </Box>
+      )}
+
+      <DataGrid
+        autoHeight
+        density="compact"
+        rows={data as GridRowsProp}
+        columns={columnsWithCustomHeader}
+        checkboxSelection={getCheckboxSelection()}
+        isRowSelectable={getIsRowSelectable()}
+        sx={{
+          backgroundColor: theme.palette.background.paper,
+          border: "none",
+          "& .MuiDataGrid-columnHeaders": {
+            backgroundColor: 'transparent',
+          },
+          "& .MuiDataGrid-columnHeader": {
+            backgroundColor: theme.palette.background.paper,
+            fontWeight: 600,
+            fontSize: "0.875rem",
+            color: theme.palette.text.primary,
+          },
+          ".MuiDataGrid-cell": {
+            fontSize: "0.875rem",
+            color: theme.palette.text.primary,
+          },
+          ".MuiDataGrid-footerContainer": {
+            borderTop: `1px solid ${theme.palette.divider}`,
+            backgroundColor: theme.palette.background.paper,
+            color: theme.palette.text.secondary,
+          },
+        }}
+        getRowId={getRowId}
+        {...tablePropsFromOptions}
+        disableRowSelectionOnClick={!options?.selectableRowsOnClick}
+        {...rest}
+      />
+    </StyledPaper>
+  );
+};

package/src/components/BMTable/index.ts

@@ -0,0 +1 @@
+export * from "./BMTable";

package/src/components/BMTabs/BMTabs.tsx

@@ -0,0 +1,50 @@
+import { Tabs, Tab, TabsProps, styled, tabsClasses, tabClasses } from "@mui/material";
+
+export { Tab as BMTab };
+
+export interface BMTabsProps extends TabsProps {
+    pill?: boolean;
+};
+
+// we are unable to override the variants of the Tabs component in theme file.
+// so we are doing this in component level itself.
+// see https://github.com/mui/material-ui/issues/33785
+
+
+const StyledTabs = styled(Tabs)<BMTabsProps>(({ theme, pill }) => ({
+    ...(pill && {
+        [`& .${tabsClasses.indicator}`]: {
+            display: 'none'
+        },
+        [`& .${tabsClasses.fixed}`]: {
+            boxShadow: 'none'
+        },
+        [`& .${tabClasses.root}`]: {
+            textAlign: 'left',
+            marginRight: theme.spacing(1),
+            minHeight: theme.spacing(4),
+            maxHeight: theme.spacing(4),
+            marginBottom: theme.spacing(0.5),
+            padding: theme.spacing(0, 2),
+            boxSizing: 'border-box',
+
+            '&:hover': {
+                boxShadow: 'none',
+                borderRadius: theme.shape.borderRadius
+            },
+            '&.Mui-selected': {
+                background: theme.palette.grey[300],
+                borderRadius: theme.spacing(1)
+            },
+            '& .MuiTab-wrapper': {
+                alignItems: 'flex-start'
+            },
+        }
+    })
+}));
+
+export const BMTabs = (props: BMTabsProps) => {
+    return (
+        <StyledTabs {...props} />
+    );
+};

package/src/components/BMTabs/index.ts

@@ -0,0 +1 @@
+export * from './BMTabs';

package/src/components/BMTag/BMTag.tsx

@@ -0,0 +1,47 @@
+import { FC } from "react";
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+export type BMPreviewTagProps = {
+  text: string;
+  noGradient?: boolean;
+};
+
+const TagContainer = styled(Box)(({ theme }) => ({
+  borderRadius: 4,
+  marginLeft: theme.spacing(1),
+  color: theme.palette.primary[200],
+  backgroundColor: theme.palette.common.white,
+  border: `1px solid ${theme.palette.grey[300]}`,
+}));
+
+const GradientText = styled(Box)(({ theme }) => ({
+  fontSize: 11.5,
+  fontWeight: 700,
+  backgroundClip: "text",
+  WebkitBackgroundClip: "text",
+  padding: theme.spacing(0.25, 0.55),
+  WebkitTextFillColor: "transparent",
+  backgroundImage:
+    "linear-gradient(272.58deg, #ED35EC 5.14%, #ED35C5 38.93%, #7879F1 75.17%, #5E60F0 98.9%)",
+}));
+
+const NoGradientText = styled(Box)(({ theme }) => ({
+  fontSize: 11.5,
+  fontWeight: 400,
+  color: theme.palette.grey[700],
+  padding: theme.spacing(0.25, 0.55),
+  background: theme.palette.grey[100],
+}));
+
+export const BMTag: FC<BMPreviewTagProps> = ({ text, noGradient = false }) => {
+  return (
+    <TagContainer>
+      {noGradient ? (
+        <NoGradientText>{text}</NoGradientText>
+      ) : (
+        <GradientText>{text}</GradientText>
+      )}
+    </TagContainer>
+  );
+};

package/src/components/BMTag/index.ts

@@ -0,0 +1 @@
+export * from "./BMTag";

package/src/components/BMTagv2/BMTagv2.tsx

@@ -0,0 +1,250 @@
+import React from "react";
+import { Chip, ChipProps, styled } from "@mui/material";
+import {
+  Language as LanguageIcon,
+  Star as StarIcon,
+  Close as CloseIcon,
+  Check as CheckIcon,
+  Warning as WarningIcon,
+  Info as InfoIcon,
+  Error as ErrorIcon,
+} from "@mui/icons-material";
+import { styled as muiStyled } from "@mui/material/styles";
+
+// Predefined icon options
+export type IconName =
+  | "language"
+  | "star"
+  | "close"
+  | "check"
+  | "warning"
+  | "info"
+  | "error";
+
+const IconComponents: Record<IconName, React.ComponentType> = {
+  language: LanguageIcon,
+  star: StarIcon,
+  close: CloseIcon,
+  check: CheckIcon,
+  warning: WarningIcon,
+  info: InfoIcon,
+  error: ErrorIcon,
+};
+
+export interface BMTagv2Props
+  extends Omit<ChipProps, "size" | "variant" | "label"> {
+  text: string | React.ReactElement;
+  size?: "sm" | "md" | "lg";
+  variant?: "default" | "primary" | "success" | "warning" | "error" | "info";
+  noGradient?: boolean;
+  filled?: boolean;
+  prefixIcon?: IconName | React.ReactElement;
+  suffixIcon?: IconName | React.ReactElement;
+  customColor?: {
+    background?: string;
+    color?: string;
+    border?: string;
+  };
+}
+
+const StyledChip = styled(Chip)<{
+  $size?: "sm" | "md" | "lg";
+  $variant?: BMTagv2Props["variant"];
+  $noGradient?: boolean;
+  $filled?: boolean;
+  customColor?: {
+    background?: string;
+    color?: string;
+    border?: string;
+  };
+}>(
+  ({
+    theme,
+    $size = "md",
+    $variant = "default",
+    $noGradient = false,
+    $filled = false,
+    ...props
+  }) => {
+    const sizeStyles = {
+      sm: {
+        height: 20,
+        fontSize: 11.5,
+        "& .MuiChip-icon, & .MuiChip-deleteIcon": {
+          marginLeft: theme.spacing(0.5),
+          marginRight: theme.spacing(-0.5),
+        },
+      },
+      md: {
+        height: 24,
+        fontSize: 11.5,
+        "& .MuiChip-icon, & .MuiChip-deleteIcon": {
+          marginLeft: theme.spacing(0.75),
+          marginRight: theme.spacing(-0.75),
+        },
+      },
+      lg: {
+        height: 28,
+        fontSize: 13,
+        "& .MuiChip-icon, & .MuiChip-deleteIcon": {
+          marginLeft: theme.spacing(1),
+          marginRight: theme.spacing(-1),
+        },
+      },
+    }[$size];
+
+    const getVariantStyles = () => {
+      let gradientStyles;
+      if (!$noGradient && !props?.customColor) {
+        gradientStyles = {
+          background:
+            "linear-gradient(282.49deg, #ed35c5 0.48%, #7879f1 93.17%)",
+          WebkitTextFillColor: "transparent",
+          WebkitBackgroundClip: "text",
+          color: "transparent",
+        };
+      }
+
+      // If custom colors are provided, use them instead of variants
+      if (props?.customColor) {
+        return {
+          background:
+            props.customColor?.background || theme.palette.common.white,
+          color: props.customColor?.color || theme.palette.grey[900],
+          border:
+            props.customColor?.border || `1px solid ${theme.palette.grey[300]}`,
+        };
+      }
+
+      const variantColors = {
+        default: {
+          background: theme.palette.common.white,
+          color: theme.palette.grey[900],
+          border: $filled ? 0 : `1px solid ${theme.palette.grey[300]}`,
+          ...(gradientStyles || {}),
+        },
+        primary: {
+          background: $filled
+            ? theme.palette.primary[200]
+            : theme.palette.common.white,
+          color: theme.palette.primary[700],
+          border: $filled ? 0 : `1px solid ${theme.palette.primary[300]}`,
+          ...(gradientStyles || {}),
+        },
+        success: {
+          background: $filled
+            ? theme.palette.success[100]
+            : theme.palette.common.white,
+          color: theme.palette.success[700],
+          border: $filled ? 0 : `1px solid ${theme.palette.success[300]}`,
+          ...(gradientStyles || {}),
+        },
+        warning: {
+          background: $filled
+            ? theme.palette.warning[100]
+            : theme.palette.common.white,
+          color: theme.palette.grey[900],
+          border: $filled ? 0 : `1px solid ${theme.palette.warning[300]}`,
+          ...(gradientStyles || {}),
+        },
+        error: {
+          background: $filled
+            ? theme.palette.error[100]
+            : theme.palette.common.white,
+          color: theme.palette.error[700],
+          border: $filled ? 0 : `1px solid ${theme.palette.error[300]}`,
+          ...(gradientStyles || {}),
+        },
+        info: {
+          background: $filled
+            ? theme.palette.info[100]
+            : theme.palette.common.white,
+          color: theme.palette.info[700],
+          border: $filled ? 0 : `1px solid ${theme.palette.info[300]}`,
+          ...(gradientStyles || {}),
+        },
+      };
+
+      return variantColors[$variant];
+    };
+
+    return {
+      ...sizeStyles,
+      ...getVariantStyles(),
+      borderRadius: theme.shape.borderRadius - 4,
+      fontWeight: 500,
+      "& .MuiChip-icon, & .MuiChip-deleteIcon": {
+        color: "inherit",
+        margin: 0,
+      },
+    };
+  },
+);
+
+export const BMTagv2 = React.forwardRef<HTMLDivElement, BMTagv2Props>(
+  (
+    {
+      text,
+      size = "md",
+      variant = "default",
+      noGradient = false,
+      filled = false,
+      prefixIcon,
+      suffixIcon,
+      ...props
+    },
+    ref,
+  ) => {
+    // Add this styled component at the top level with other constants
+    const StyledIcon = muiStyled("span")<{ $size?: "sm" | "md" | "lg" }>(
+      ({ $size = "md" }) => ({
+        display: "flex",
+        alignItems: "center",
+        "& > svg": {
+          fontSize: "inherit",
+          width:
+            $size === "sm"
+              ? 11
+              : $size === "md"
+                ? 14
+                : $size === "lg"
+                  ? 20
+                  : undefined,
+          height: "auto",
+        },
+      }),
+    );
+
+    // Update the renderIcon function inside BMTagv2 component
+    const renderIcon = (icon: IconName | React.ReactElement | undefined) => {
+      if (!icon) return undefined;
+      if (React.isValidElement(icon)) {
+        return <StyledIcon $size={size}>{icon}</StyledIcon>;
+      }
+      const IconComponent = IconComponents[icon as IconName];
+      return IconComponent ? (
+        <StyledIcon $size={size}>
+          <IconComponent />
+        </StyledIcon>
+      ) : undefined;
+    };
+
+    const prefixIconElement = renderIcon(prefixIcon);
+    const suffixIconElement = renderIcon(suffixIcon);
+
+    return (
+      <StyledChip
+        ref={ref}
+        $size={size}
+        $variant={variant}
+        $noGradient={noGradient}
+        $filled={filled}
+        label={text}
+        icon={prefixIconElement}
+        deleteIcon={suffixIconElement}
+        onDelete={suffixIconElement ? () => {} : undefined} // Prevents delete icon from being clickable if not provided
+        {...props}
+      />
+    );
+  },
+);

package/src/components/BMTagv2/index.ts

@@ -0,0 +1 @@
+export * from "./BMTagv2";

package/src/components/BMToggle/BMMultiToggleButton.tsx

@@ -0,0 +1,99 @@
+import { ReactElement } from "react";
+import { styled } from "@mui/material/styles";
+
+import {
+  ToggleButton,
+  ToggleButtonGroup,
+  ToggleButtonGroupProps,
+} from "@mui/material";
+
+interface ToggleButtonData<T> {
+  label: ReactElement | string;
+  value: T;
+  dataTestId?: string;
+}
+
+export interface BMMultiToggleButtonProps<
+  T extends string | number | {} = string
+> extends Omit<ToggleButtonGroupProps, "onChange"> {
+  dense?: boolean;
+  options: ToggleButtonData<T>[];
+  value: T;
+  onChange: (value: T) => void;
+}
+
+// Styled components
+const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+  border: `1px solid ${theme.palette.grey[300]}`,
+  height: theme.spacing(4),
+  backgroundColor: theme.palette.primary[100],
+}));
+
+const getStyledToggleButton = (dense?: boolean) =>
+  styled(ToggleButton)(({ theme }) => ({
+    fontWeight: 400,
+    fontSize: 13,
+    padding: theme.spacing(0, dense ? 1 : 2),
+    color: theme.palette.grey[900],
+    textTransform: "none",
+
+    [`&:not(:first-of-type)`]: {
+      marginLeft: 0,
+    },
+
+    "&:hover": {
+      backgroundColor: theme.palette.primary[100],
+    },
+
+    "&.Mui-selected": {
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.primary.main,
+      fontWeight: 600,
+      borderColor: theme.palette.primary.main,
+
+      "&:hover": {
+        backgroundColor: theme.palette.background.paper,
+      },
+      "&:not(:first-of-type)": {
+        borderLeft: "1px solid",
+      },
+      "&:not(:last-of-type)": {
+        borderRight: "1px solid",
+      },
+    },
+  }));
+
+export const BMMultiToggleButton = <T extends string | number | {}>({
+  options,
+  value,
+  onChange,
+  dense,
+  ...rest
+}: BMMultiToggleButtonProps<T>): ReactElement => {
+  const StyledToggleButton = getStyledToggleButton(dense);
+
+  return (
+    <StyledToggleButtonGroup
+      exclusive
+      value={value}
+      onChange={(_event: React.MouseEvent<HTMLElement>, newValue: T | null) => {
+        if (newValue !== null) {
+          onChange(newValue);
+        }
+      }}
+      {...rest}
+    >
+      {options.map((option) => (
+        <StyledToggleButton
+          key={String(option.value)}
+          value={option.value}
+          data-testid={
+            option.dataTestId ?? `${option.label as string}ToggleButton`
+          }
+        >
+          {option.label}
+        </StyledToggleButton>
+      ))}
+    </StyledToggleButtonGroup>
+  );
+};