@bigmath-ui-library/core 2.0.4

package/stories/BMSlider.stories.tsx

@@ -0,0 +1,74 @@
+import { Box } from "@mui/material";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { BMSlider, Mark } from "../src";
+
+const meta: Meta<typeof BMSlider> = {
+  title: "InReview/BMSlider",
+  component: BMSlider,
+  tags: ["autodocs"],
+  decorators: [
+    (StoryContent) => (
+      <Box sx={{ m: 6 }}>
+        <StoryContent />
+      </Box>
+    ),
+  ],
+  argTypes: {
+    min: {
+      control: { type: "number" },
+      defaultValue: 1,
+      description: "Minimum value for the slider",
+    },
+    max: {
+      control: { type: "number" },
+      defaultValue: 7,
+      description: "Maximum value for the slider",
+    },
+    step: {
+      control: { type: "number" },
+      defaultValue: 1,
+      description: "Step value for the slider",
+    },
+    value: {
+      control: { type: "number" },
+      defaultValue: 3,
+      description: "Current slider value",
+    },
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof BMSlider> = {
+  args: {
+    min: 1,
+    max: 7,
+    step: 1,
+    value: 3,
+  },
+  render: (args) => {
+    const { min = 1, max = 7, step = 1, value = 3 } = args;
+
+    const length = (max - min) / (step ?? 1) + 1;
+    const marksList: Mark[] = Array.from({ length }, (_, i) => {
+      const val = min + i * (step ?? 1);
+      return {
+        value: val,
+        label: val === min || val === max ? val.toString() : "",
+      };
+    });
+
+    return (
+      <BMSlider
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        marksList={marksList}
+        onChange={() => {}}
+        dataTestId="bm-slider"
+      />
+    );
+  },
+};

package/stories/BMSmartStatus.stories.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconPosition, StatusType, BMSmartStatus } from '../src/components/BMSmartStatus';
+
+const meta = {
+  title: 'InReview/BMSmartStatus',
+  component: BMSmartStatus,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: [StatusType.SUCCESS, StatusType.IN_PROGRESS, StatusType.PENDING, StatusType.ERROR, StatusType.WARNING, StatusType.OTHER, StatusType.INACTIVE],
+      description: 'The type of status to display',
+      table: {
+        defaultValue: { summary: StatusType.SUCCESS },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Custom label text. If not provided, will use a capitalized version of the type',
+    },
+    iconPosition: {
+      control: 'radio',
+      options: [IconPosition.PREFIX, IconPosition.SUFFIX],
+      description: 'Position of the status icon',
+      table: {
+        defaultValue: { summary: IconPosition.SUFFIX },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BMSmartStatus>;
+
+export const Default: Story = {
+  args: {
+    type: StatusType.SUCCESS,
+    label: 'Success',
+  },
+};
+
+export const InProgress: Story = {
+  args: {
+    type: StatusType.IN_PROGRESS,
+    label: 'Processing',
+  },
+};
+
+export const WithSuffixIcon: Story = {
+  args: {
+    type: StatusType.SUCCESS,
+    label: 'Completed',
+    iconPosition: IconPosition.SUFFIX,
+  },
+};
+
+export const AllStatuses: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <BMSmartStatus type={StatusType.SUCCESS} />
+      <BMSmartStatus type={StatusType.IN_PROGRESS} />
+      <BMSmartStatus type={StatusType.PENDING} />
+      <BMSmartStatus type={StatusType.ERROR} />
+      <BMSmartStatus type={StatusType.WARNING} />
+      <BMSmartStatus type={StatusType.OTHER} />
+      <BMSmartStatus type={StatusType.INACTIVE} />
+    </div>
+  ),
+};
+
+export const IconPositions: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <BMSmartStatus type={StatusType.SUCCESS} label="Prefix Icon" />
+      <BMSmartStatus type={StatusType.SUCCESS} label="Suffix Icon (Default)" iconPosition={IconPosition.SUFFIX} />
+      <BMSmartStatus type={StatusType.IN_PROGRESS} label="Prefix Icon" />
+      <BMSmartStatus type={StatusType.IN_PROGRESS} label="Suffix Icon (Default)" iconPosition={IconPosition.SUFFIX} />
+      <BMSmartStatus type={StatusType.ERROR} label="Prefix Icon" />
+      <BMSmartStatus type={StatusType.ERROR} label="Suffix Icon (Default)" iconPosition={IconPosition.SUFFIX} />
+    </div>
+  ),
+};
+
+export const CustomLabels: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <BMSmartStatus type={StatusType.SUCCESS} label="Task Completed" />
+      <BMSmartStatus type={StatusType.IN_PROGRESS} label="Processing Data" />
+      <BMSmartStatus type={StatusType.PENDING} label="Awaiting Review" />
+      <BMSmartStatus type={StatusType.ERROR} label="Failed" />
+      <BMSmartStatus type={StatusType.WARNING} label="Needs Attention" />
+      <BMSmartStatus type={StatusType.OTHER} label="Custom Status" />
+      <BMSmartStatus type={StatusType.INACTIVE} label="Disabled" />
+    </div>
+  ),
+};

package/stories/BMSplitButton.stories.tsx

@@ -0,0 +1,32 @@
+
+import type { Meta } from "@storybook/react";
+import { BMSplitButton, type BMSplitButtonProps } from "../src";
+import { Box } from "@mui/material";
+
+const meta: Meta<BMSplitButtonProps> = {
+    component: BMSplitButton,
+    title: "Split Button",
+};
+export default meta;
+
+const getButtons = (type: BMSplitButtonProps["variant"], props: BMSplitButtonProps) => (
+    <div style={{ display: 'flex', gap: '18px', alignItems: 'center' }}>
+        <BMSplitButton {...props} variant={type}
+            label={`${props.disabled ? 'disabled' : type} split button`}
+            options={
+                [
+                    { label: "Option 1", onClick: () => alert("Option 1 clicked") },
+                    { label: "Option 2", onClick: () => alert("Option 2 clicked") }
+                ]} />
+    </div>
+);
+
+export const SplitButton = (props: BMSplitButtonProps) => {
+    return <Box sx={{ display: 'flex', direction: 'row', gap: '18px', alignItems: 'center' }}>
+        {getButtons("primary", props)}
+        {getButtons("secondary", props)}
+        {getButtons("gradient", props)}
+        {getButtons("ghost", props)}
+        {getButtons("primary", { ...props, disabled: true })}
+    </Box>
+};

package/stories/BMStatus.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Stack, Typography } from "@mui/material";
+
+import { BMStatus, STATUS_TYPES } from "../src";
+
+const meta: Meta<typeof BMStatus> = {
+  title: "InReview/BMStatus",
+  component: BMStatus,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BMStatus>;
+
+export const AllStatuses: Story = {
+  render: () => (
+    <Stack spacing={2}>
+      <Typography variant="h6">All Status Types</Typography>
+      <BMStatus label="Complete" type={STATUS_TYPES.COMPLETE} />
+      <BMStatus label="Success" type={STATUS_TYPES.SUCCESS} />
+      <BMStatus label="Failed" type={STATUS_TYPES.FAILED} />
+      <BMStatus label="Active" type={STATUS_TYPES.ACTIVE} />
+      <BMStatus label="Inactive" type={STATUS_TYPES.INACTIVE} />
+      <BMStatus label="Pending" type={STATUS_TYPES.PENDING} />
+      <BMStatus label="In Progress" type={STATUS_TYPES.IN_PROGRESS} />
+    </Stack>
+  ),
+};

package/stories/BMTable.stories.tsx

@@ -0,0 +1,350 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { type GridColDef } from "@mui/x-data-grid";
+
+import { BMTable } from "../src";
+import { Box, Typography } from "@mui/material";
+
+const meta: Meta<typeof BMTable> = {
+  title: "InReview/BMTable",
+  component: BMTable,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BMTable>;
+
+const sampleColumns: GridColDef[] = [
+  {
+    field: "email",
+    headerName: "Email",
+    flex: 1.5,
+    renderCell: (params) => (
+      <a
+        href={`mailto:${params.value}`}
+        style={{ textDecoration: "none", color: "inherit" }}
+      >
+        {params.value}
+      </a>
+    ), // Custom render for email links
+  },
+  { field: "name", headerName: "Display Name", flex: 1 },
+  { field: "role", headerName: "User Role", flex: 1 },
+  { field: "status", headerName: "Status", flex: 1 },
+];
+
+const sampleRows = [
+  {
+    id: 1,
+    email: "alice@example.com",
+    name: "Alice",
+    role: "Admin",
+    status: "Active",
+  },
+  {
+    id: 2,
+    email: "bob@example.com",
+    name: "Bob",
+    role: "Developer",
+    status: "Invited",
+  },
+  {
+    id: 3,
+    email: "carol@example.com",
+    name: "Carol",
+    role: "Viewer",
+    status: "Active",
+  },
+];
+
+// Default table
+export const Default: Story = {
+  args: {
+    columns: sampleColumns,
+    data: sampleRows,
+  },
+};
+
+// With table title
+export const WithTitle: Story = {
+  args: {
+    tableTitle: "User List",
+    columns: sampleColumns,
+    data: sampleRows,
+  },
+};
+
+// With border off
+export const WithoutBorder: Story = {
+  args: {
+    withBorder: false,
+    tableTitle: "No Border Table",
+    columns: sampleColumns,
+    data: sampleRows,
+  },
+};
+
+// Single selectable row (radio)
+export const SingleSelectableRow: Story = {
+  args: {
+    selectableRows: "single",
+    tableTitle: "Single Row Select",
+    columns: sampleColumns,
+    data: sampleRows,
+  },
+};
+
+// Multiple selectable rows (checkbox)
+export const MultipleSelectableRows: Story = {
+  args: {
+    selectableRows: "multiple",
+    tableTitle: "Multiple Row Select",
+    columns: sampleColumns,
+    data: sampleRows,
+  },
+};
+
+// Custom column alignment and widths
+export const CustomColumns: Story = {
+  args: {
+    tableTitle: "Custom Column Layout",
+    columns: [
+      {
+        field: "email",
+        headerName: "Email",
+        width: 250,
+      },
+      {
+        field: "name",
+        headerName: "Name",
+        align: "center",
+        headerAlign: "center",
+        flex: 1,
+      },
+      {
+        field: "role",
+        headerName: "Role",
+        align: "right",
+        headerAlign: "right",
+        flex: 1,
+      },
+    ],
+    data: sampleRows,
+  },
+};
+
+// Custom cell renderers
+const displayCreated = (params: any) =>
+  new Date(params.row.created_on).toLocaleString();
+
+const displaySize = (params: any) =>
+  `${(params.row.size_in_bytes / 1024).toFixed(1)} KB`;
+
+const displayStatus = (params: any) => (
+  <Box
+    sx={{
+      display: "flex",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+    }}
+  >
+    <Box
+      sx={{
+        height: "25px",
+        backgroundColor: params.row.state === "COMPLETED" ? "#d0f0c0" : "#fdd",
+        px: 1,
+        borderRadius: "4px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "0.7rem",
+        fontWeight: 500,
+      }}
+    >
+      {params.row.state}
+    </Box>
+  </Box>
+);
+
+const customTableColumns: GridColDef[] = [
+  {
+    field: "id",
+    headerName: "",
+  },
+  {
+    field: "created_on",
+    headerName: "Created On",
+    renderCell: displayCreated,
+    minWidth: 126,
+    flex: 1,
+    headerClassName: "header--created_on",
+    cellClassName: "cell--created_on",
+  },
+  {
+    field: "size_in_bytes",
+    headerName: "Size",
+    renderCell: displaySize,
+    minWidth: 75,
+    flex: 1,
+    headerClassName: "header--size",
+    cellClassName: "cell--size",
+  },
+  {
+    field: "state",
+    headerName: "Status",
+    renderCell: displayStatus,
+    minWidth: 140,
+    flex: 1,
+    headerClassName: "header--status",
+    cellClassName: "cell--status",
+  },
+  {
+    field: "action",
+    headerName: "Action",
+    sortable: false,
+    filterable: false,
+    disableColumnMenu: true,
+    minWidth: 50,
+    headerAlign: "right",
+    align: "right",
+    flex: 1,
+    renderCell: (params) => (
+      <Box
+        sx={{
+          textAlign: "right",
+          width: "100%",
+          color: "#1976d2",
+          cursor: "pointer",
+        }}
+        onClick={() => alert(`Clicked action for row ${params.id}`)}
+      >
+        Restore
+      </Box>
+    ),
+  },
+];
+
+const customData = [
+  {
+    id: 1,
+    created_on: "2023-10-01T12:00:00Z",
+    size_in_bytes: 204800,
+    state: "COMPLETED",
+    action: "Restore",
+  },
+  {
+    id: 2,
+    created_on: "2023-10-02T14:30:00Z",
+    size_in_bytes: 102400,
+    state: "FAILED",
+    action: "Restore",
+  },
+  {
+    id: 3,
+    created_on: "2023-10-03T09:15:00Z",
+    size_in_bytes: 51200,
+    state: "COMPLETED",
+    action: "Restore",
+  },
+  {
+    id: 4,
+    created_on: "2023-10-04T16:45:00Z",
+    size_in_bytes: 307200,
+    state: "IN_PROGRESS",
+    action: "Restore",
+  },
+  {
+    id: 5,
+    created_on: "2023-10-05T11:20:00Z",
+    size_in_bytes: 153600,
+    state: "COMPLETED",
+    action: "Restore",
+  },
+  {
+    id: 6,
+    created_on: "2023-10-06T08:00:00Z",
+    size_in_bytes: 409600,
+    state: "FAILED",
+    action: "Restore",
+  },
+  {
+    id: 7,
+    created_on: "2023-10-07T13:30:00Z",
+    size_in_bytes: 256000,
+    state: "COMPLETED",
+    action: "Restore",
+  },
+];
+
+const customColumnsWithCustomHeader = (col: any) => {
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+      }}
+    >
+      <Typography variant="subtitle2" sx={{ fontWeight: "bold" }}>
+        {col.headerName}
+      </Typography>
+    </Box>
+  );
+};
+
+export const CustomCellRender: Story = {
+  args: {
+    tableTitle: "Custom Cell Render",
+    columns: customTableColumns,
+    data: customData,
+    withBorder: true,
+    dataTestId: "custom-cell-render-table",
+    customHeaderRenderer: customColumnsWithCustomHeader,
+    columnVisibilityModel: {
+      id: false, // hide `id`
+    },
+    rowHeight: 68,
+    density: "compact",
+    autoHeight: true,
+    options: {
+      setTableProps: () => ({
+        sx: {
+          backgroundColor: "#fff",
+          "& .MuiDataGrid-cell:focus, & .MuiDataGrid-cell:focus-within": {
+            outline: "none",
+          },
+          "& .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-columnHeader:focus-within":
+          {
+            outline: "none",
+          },
+          "& .MuiDataGrid-row.Mui-selected": {
+            backgroundColor: "transparent !important",
+          },
+          "& .MuiDataGrid-cell.Mui-selected": {
+            backgroundColor: "transparent !important",
+          },
+          "& .MuiDataGrid-row": {
+            borderBottom: "1px solid #e0e0e0",
+            // p: 2
+          },
+          "& .MuiDataGrid-columnHeaders": {
+            borderBottom: "1px solid #e0e0e0",
+          },
+          "& .MuiDataGrid-columnHeader": {
+            backgroundColor: "#fff",
+          },
+          "& .MuiDataGrid-cell": {
+            fontSize: "0.75rem",
+            fontWeight: 500,
+            color: "#333",
+          },
+        },
+      }),
+    },
+  },
+};

package/stories/BMTabs.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta } from "@storybook/react";
+import { BMTab, BMTabs, BMTabsProps } from "../src/components/BMTabs";
+import { useState } from "react";
+
+const meta: Meta<BMTabsProps> = {
+    component: BMTabs,
+    title: "BMTabs",
+};
+
+export default meta;
+
+export const Tabs = (args: BMTabsProps) => {
+    const [value, setValue] = useState(0);
+    const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+        setValue(newValue);
+    };
+    return (
+        <BMTabs value={value} {...args} onChange={handleChange}>
+            <BMTab value={0} label="Usage" />
+            <BMTab value={1} label="Plan" />
+            <BMTab value={2} label="Invoices" />
+            <BMTab value={3} label="Billing Information" />
+        </BMTabs>
+    );
+}

package/stories/BMTag.stories.tsx

@@ -0,0 +1,63 @@
+import { Box } from "@mui/material";
+import type { Meta, StoryFn } from "@storybook/react";
+
+import { BMTag, BMPreviewTagProps } from "../src";
+
+const meta: Meta<typeof BMTag> = {
+  title: "InReview/BMTag",
+  component: BMTag,
+  tags: ["autodocs"],
+  argTypes: {
+    text: { control: "text" },
+    noGradient: { control: "boolean" },
+  },
+  decorators: [
+    (StoryContent) => (
+      <div style={{ margin: "3em" }}>
+        <StoryContent />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+export const AllVariants: StoryFn<BMPreviewTagProps> = () => {
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+      {/* Default Gradient Tag */}
+      <Box sx={{ display: "flex" }}>
+        <BMTag text="Default Gradient Tag" />
+      </Box>
+
+      {/* No Gradient Tag */}
+      <Box sx={{ display: "flex" }}>
+        <BMTag text="No Gradient Tag" noGradient />
+      </Box>
+
+      {/* Multiple Tags Layout */}
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+        <Box sx={{ display: "flex" }}>
+          <BMTag text="Tag 1" />
+          <BMTag text="Tag 2" noGradient />
+        </Box>
+        <Box sx={{ display: "flex" }}>
+          <BMTag text="Tag 3" />
+          <BMTag text="Tag 4" noGradient />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const Default: StoryFn<BMPreviewTagProps> = (args) => {
+  return (
+    <Box sx={{ width: 580, p: 2, ml: 0.5, display: "flex" }}>
+      <BMTag {...args} />
+    </Box>
+  );
+};
+
+Default.args = {
+  text: "Default Tag Text",
+};