@campxdev/react-blueprint 0.1.13 → 0.1.14

package/.storybook/main.ts

@@ -10,7 +10,8 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
-    "@storybook/addon-mdx-gfm"
+    "@storybook/addon-mdx-gfm",
+    "storybook-dark-mode",
   ],
 
   framework: {
@@ -23,7 +24,7 @@ const config: StorybookConfig = {
   staticDirs: ["../public"],
 
   typescript: {
-    reactDocgen: "react-docgen-typescript"
-  }
+    reactDocgen: "react-docgen-typescript",
+  },
 };
 export default config;

package/.storybook/preview.tsx

@@ -1,17 +1,12 @@
 import { CssBaseline } from "@mui/material";
 import type { Preview } from "@storybook/react";
 import React from "react";
+import { MuiThemeProvider } from "../src/themes/MuiThemeProvider";
+import { useDarkMode } from "storybook-dark-mode";
+import { darkTheme } from "../src/themes/darkTheme";
+import { lightTheme } from "../src/themes/lightTheme";
+import { DarkColorTokens, LightColorTokens } from "../src/themes/colorTokens";
 import { BrowserRouter } from "react-router-dom";
-import { ComponentBackground } from "../src/components/Layout/ComponentBackground/ComponentBackground";
-
-const withThemeProvider = (Story) => (
-  <ComponentBackground>
-    <BrowserRouter>
-      <Story />
-    </BrowserRouter>
-    <CssBaseline />
-  </ComponentBackground>
-);
 
 const preview: Preview = {
   parameters: {
@@ -21,10 +16,32 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    backgrounds: {
+      default: "light", // name of the default background to use
+      values: [
+        { name: "light", value: LightColorTokens.background.default },
+        { name: "light paper", value: LightColorTokens.background.paper },
+        { name: "dark", value: DarkColorTokens.background.default },
+        { name: "dark paper", value: DarkColorTokens.background.paper },
+      ],
+    },
   },
-
-  decorators: [withThemeProvider],
-  tags: ["autodocs"]
+  decorators: [
+    (Story) => {
+      const isDarkMode = useDarkMode();
+      console.log(isDarkMode);
+      const theme = isDarkMode ? darkTheme : lightTheme;
+      return (
+        <BrowserRouter>
+          <MuiThemeProvider theme={theme}>
+            <CssBaseline />
+            <Story />
+          </MuiThemeProvider>
+        </BrowserRouter>
+      );
+    },
+  ],
+  tags: ["autodocs"],
 };
 
 export default preview;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -9,6 +9,7 @@
     "@mui/icons-material": "^5.14.11",
     "@mui/material": "^5.14.11",
     "@mui/x-data-grid": "^7.5.1",
+    "@storybook/addon-backgrounds": "^8.1.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -24,6 +25,7 @@
     "react-error-boundary": "^3.1.4",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
+    "storybook-dark-mode": "^4.0.1",
     "typescript": "^5.3.3",
     "web-vitals": "^2.1.0"
   },

package/src/components/DataDisplay/DataTable/DataTable.stories.tsx

@@ -1,7 +1,6 @@
-import * as React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import DataTable from "./DataTable"; // Make sure the path to your component is correct
 import { GridColDef } from "@mui/x-data-grid";
+import { Meta, StoryObj } from "@storybook/react";
+import { DataTable } from "./DataTable"; // Make sure the path to your component is correct
 
 const columns: GridColDef[] = [
   { field: "id", headerName: "ID", width: 70 },
@@ -33,9 +32,18 @@ const rows = [
 const meta: Meta<typeof DataTable> = {
   title: "DataDisplay/DataTable",
   component: DataTable,
-  parameters: {
-    controls: {
-      include: ["rows", "columns"], // Specify the controls you want to include
+  argTypes: {
+    totalCount: {
+      control: "number",
+      description: "Total Number of rows",
+    },
+    limit: {
+      control: "number",
+      description: "Total Number of rows",
+    },
+    offset: {
+      control: "number",
+      description: "Total Number of rows",
     },
   },
 };
@@ -43,6 +51,7 @@ const meta: Meta<typeof DataTable> = {
 export default meta;
 const Template: StoryObj<typeof DataTable> = {
   render: (args) => <DataTable {...args} />,
+
   args: {
     columns,
     rows,

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -1,31 +1,27 @@
-import * as React from "react";
-import { DataGrid, GridColDef, GridRowsProp } from "@mui/x-data-grid";
+import { Pagination } from "@mui/material";
+import {
+  DataGrid as MuiDataGrid,
+  DataGridProps as MuiDataGridProps,
+} from "@mui/x-data-grid";
+import { DataGridContainer } from "../styles";
 
-interface DataTableProps {
-  columns: GridColDef[];
-  rows: GridRowsProp;
-}
+export type DataTableProps = {
+  limit: number;
+  offset: number;
+  totalCount: number;
+} & MuiDataGridProps;
 
-export default function DataTable({ columns, rows }: DataTableProps) {
+export const DataTable = (props: DataTableProps) => {
+  const pages = Math.ceil(props.totalCount / props.limit);
+  const currentPage = Math.ceil(props.offset / props.limit);
   return (
-    <div style={{ height: 400, width: "100%" }}>
-      <DataGrid
-        rows={rows}
-        columns={columns}
-        initialState={{
-          pagination: {
-            paginationModel: { page: 0, pageSize: 5 },
-          },
-        }}
-        pageSizeOptions={[5, 10]}
-        checkboxSelection
-        onPaginationMetaChange={(params) => {
-          console.log(params);
-        }}
-        onPaginationModelChange={(params) => {
-          console.log(params);
+    <DataGridContainer>
+      <MuiDataGrid
+        {...props}
+        slots={{
+          pagination: () => <Pagination count={pages} page={currentPage} />,
         }}
       />
-    </div>
+    </DataGridContainer>
   );
-}
+};

package/src/components/DataDisplay/DataTable/TablePagination.tsx

@@ -0,0 +1,22 @@
+import {
+  Pagination as MuiPagination,
+  PaginationProps as MuiPaginationProps,
+  Stack,
+} from "@mui/material";
+import { Typography } from "../../Typography/Typography";
+
+export type PaginationProps = {
+  pageStart: number;
+  pageEnd: number;
+  totalCount: number;
+} & MuiPaginationProps;
+
+export const TablePagination = (props: PaginationProps) => {
+  const { pageStart, pageEnd, totalCount } = props;
+  return (
+    <Stack direction="row">
+      <Typography variant="caption">{`${pageStart} - ${pageEnd} of ${totalCount}`}</Typography>
+      <MuiPagination {...props} variant="outlined" shape="rounded" />
+    </Stack>
+  );
+};

package/src/components/DataDisplay/styles.tsx

@@ -0,0 +1,5 @@
+import { Box, styled } from "@mui/material";
+
+export const DataGridContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+}));

package/src/components/Layout/LayoutWrapper/LayoutWrapper.stories.tsx

@@ -1,11 +1,21 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { DashBoardIcon } from "../../../assets/images/icons";
 import { LayoutWrapper, LayoutWrapperProps } from "./LayoutWrapper";
+import DialogButton from "../../Modals/DialogButton";
+import { Button } from "@mui/material";
+
+const LayoutWrapperStory = (props: LayoutWrapperProps) => {
+  return (
+    <div style={{ minHeight: "300px" }}>
+      <LayoutWrapper {...props} />
+    </div>
+  );
+};
 
 // Define the default export with Meta type including the component type
-const meta: Meta<typeof LayoutWrapper> = {
+const meta: Meta<typeof LayoutWrapperStory> = {
   title: "Layout/LayoutWrapper",
-  component: LayoutWrapper,
+  component: LayoutWrapperStory,
   tags: ["autodocs"],
   // argTypes: {
   //   menu: {
@@ -16,16 +26,49 @@ const meta: Meta<typeof LayoutWrapper> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof LayoutWrapper>;
+type Story = StoryObj<typeof LayoutWrapperStory>;
 
 // Primary story
 export const Primary: Story = {
-  render: (args: LayoutWrapperProps) => <LayoutWrapper {...args} />,
+  render: (args: LayoutWrapperProps) => <LayoutWrapperStory {...args} />,
   args: {
     menu: [
       { name: "Tickets", path: "/home", icon: DashBoardIcon },
       { name: "Item 2", path: "/item2" },
     ],
     children: <>hi</>,
+    actionButtons: [
+      <DialogButton
+        anchor={({ open }) => (
+          <Button variant="contained" onClick={open}>
+            Create
+          </Button>
+        )}
+        content={({ close }) => <Button onClick={close}>Click Me</Button>}
+        title="Dialog Title"
+      />,
+    ],
+  },
+};
+
+export const WithActionButtons: Story = {
+  render: (args: LayoutWrapperProps) => <LayoutWrapperStory {...args} />,
+  args: {
+    menu: [
+      { name: "Tickets", path: "/home", icon: DashBoardIcon },
+      { name: "Item 2", path: "/item2" },
+    ],
+    children: <>hi</>,
+    actionButtons: [
+      <DialogButton
+        anchor={({ open }) => (
+          <Button variant="contained" onClick={open}>
+            Click Me
+          </Button>
+        )}
+        content={({ close }) => <Button onClick={close}>Click Me</Button>}
+        title="Dialog Title"
+      />,
+    ],
   },
 };

package/src/components/Layout/LayoutWrapper/LayoutWrapper.tsx

@@ -1,4 +1,4 @@
-import { IconButton, Toolbar, Typography } from "@mui/material";
+import { Box, IconButton, Stack, Toolbar, Typography } from "@mui/material";
 
 import MenuIcon from "@mui/icons-material/Menu";
 import { useState } from "react";
@@ -12,6 +12,7 @@ import {
 
 export interface LayoutWrapperProps {
   title?: string;
+  actionButtons?: React.ReactNode[];
   children: React.ReactNode;
   showIcon?: boolean;
   menu?: any;
@@ -21,6 +22,7 @@ export const LayoutWrapper = ({
   title,
   showIcon = true,
   menu,
+  actionButtons,
 }: LayoutWrapperProps) => {
   const [open, setOpen] = useState<boolean>(
     window.innerWidth > 1024 ? true : false
@@ -36,29 +38,46 @@ export const LayoutWrapper = ({
   return (
     <StyledLayoutContainer>
       <StyledMainContainer>
-        <Toolbar sx={{ paddingLeft: "0px !important" }}>
+        <Toolbar
+          sx={{
+            padding: "0px !important",
+          }}
+        >
           {showIcon && (
-            <IconButton
-              color="inherit"
-              aria-label="open drawer"
-              onClick={handleDrawer}
-              edge="start"
-              sx={{ mr: 0.5, padding: "6px", marginLeft: "0px" }}
-              onMouseEnter={() => setIsHovered(true)}
-              onMouseLeave={() => setIsHovered(false)}
-            >
-              {open && isHovered ? (
-                <LeftIcon />
-              ) : !open && isHovered ? (
-                <RightIcon />
-              ) : (
-                <MenuIcon />
-              )}
-            </IconButton>
+            <>
+              <Stack
+                direction={"row"}
+                width={"100%"}
+                justifyContent={"space-between"}
+              >
+                <Stack direction={"row"}>
+                  <IconButton
+                    color="inherit"
+                    aria-label="open drawer"
+                    onClick={handleDrawer}
+                    edge="start"
+                    sx={{ mr: 0.5, padding: "6px", marginLeft: "0px" }}
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                  >
+                    {open && isHovered ? (
+                      <LeftIcon />
+                    ) : !open && isHovered ? (
+                      <RightIcon />
+                    ) : (
+                      <MenuIcon />
+                    )}
+                  </IconButton>
+                  <Typography variant="subtitle1" noWrap>
+                    {title ? title : menu[active].name}
+                  </Typography>
+                </Stack>
+                <Stack direction={"row"} alignItems={"flex-end"}>
+                  {actionButtons?.map((element) => element)}
+                </Stack>
+              </Stack>
+            </>
           )}
-          <Typography variant="subtitle1" noWrap>
-            {title ? title : menu[active].name}
-          </Typography>
         </Toolbar>
 
         <SideNavigation

package/src/components/Layout/ComponentBackground/ComponentBackground.tsx

@@ -1,83 +0,0 @@
-import {
-  Stack,
-  Switch,
-  SxProps,
-  ToggleButton,
-  ToggleButtonGroup,
-} from "@mui/material";
-import { ReactNode, useState } from "react";
-import { MuiThemeProvider } from "../../../themes/MuiThemeProvider";
-import { darkTheme, lightTheme } from "../../../themes/export";
-import { Typography } from "../../Typography/Typography";
-import { DefaultBackground } from "./DefaultBackground";
-import { PaperBackground } from "./PaperBackground";
-
-export enum ComponentBackgroundTypes {
-  DEFAULT = "default",
-  PAPER = "paper",
-}
-
-export type ComponentBackgroundProps = {
-  children: ReactNode;
-  sx?: SxProps;
-};
-
-export const BackgroundComponent = ({
-  children,
-  backgroundType,
-  sx,
-}: {
-  children: ReactNode;
-  backgroundType: ComponentBackgroundTypes;
-  sx?: SxProps;
-}) => {
-  switch (backgroundType) {
-    case ComponentBackgroundTypes.DEFAULT:
-      return <DefaultBackground sx={sx}>{children}</DefaultBackground>;
-    case ComponentBackgroundTypes.PAPER:
-      return <PaperBackground sx={sx}>{children}</PaperBackground>;
-    default:
-      return <DefaultBackground sx={sx}>{children}</DefaultBackground>;
-  }
-};
-
-export const ComponentBackground = ({
-  children,
-  sx,
-}: ComponentBackgroundProps) => {
-  const [darkMode, setDarkMode] = useState(false);
-  const [backgroundType, setBackgroundType] =
-    useState<ComponentBackgroundTypes>(ComponentBackgroundTypes.DEFAULT);
-
-  return (
-    <MuiThemeProvider theme={darkMode ? darkTheme : lightTheme}>
-      <BackgroundComponent backgroundType={backgroundType} sx={sx}>
-        {children}
-        <Stack gap={2} direction="row" marginTop="50px">
-          <Switch
-            onChange={(e) => {
-              setDarkMode(e.target.checked);
-            }}
-          />
-          <Typography variant="label1">Dark Mode</Typography>
-          <ToggleButtonGroup
-            color="primary"
-            value={backgroundType}
-            exclusive
-            onChange={(e, v) => {
-              setBackgroundType(v);
-            }}
-            aria-label="Platform"
-          >
-            <ToggleButton value={ComponentBackgroundTypes.DEFAULT}>
-              DEFAULT
-            </ToggleButton>
-            <ToggleButton value={ComponentBackgroundTypes.PAPER}>
-              PAPER
-            </ToggleButton>
-          </ToggleButtonGroup>
-        </Stack>
-      </BackgroundComponent>
-    </MuiThemeProvider>
-  );
-};

package/src/components/Layout/ComponentBackground/DefaultBackground.tsx

@@ -1,12 +0,0 @@
-import { Box, styled } from "@mui/material";
-
-export const DefaultBackground = styled(Box)(({ theme }) => ({
-  minHeight: "150px",
-  backgroundColor: theme.palette.background.default,
-  minWidth: "600px",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: "50px",
-}));

package/src/components/Layout/ComponentBackground/PaperBackground.tsx

@@ -1,12 +0,0 @@
-import { Box, styled } from "@mui/material";
-
-export const PaperBackground = styled(Box)(({ theme }) => ({
-  minHeight: "150px",
-  backgroundColor: theme.palette.background.paper,
-  minWidth: "600px",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: "50px",
-}));

package/src/components/Layout/SideNavigation/SideNavigation.stories.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { SideNavigation, SideNavigationProps } from "./SideNavigation";
-
-// Define the default export with Meta type including the component type
-const meta: Meta<typeof SideNavigation> = {
-  title: "Layout/SideNavigation",
-  component: SideNavigation,
-  tags: ["autodocs"],
-  argTypes: {
-    menu: {
-      control: "object",
-      description: "Menu items to be displayed in the side navigation.",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof SideNavigation>;
-
-// Primary story
-export const Primary: Story = {
-  render: (args: SideNavigationProps) => <SideNavigation {...args} />,
-  args: {
-    menu: [
-      { label: "Item 1", path: "/" },
-      { label: "Item 2", path: "/item2" },
-    ],
-  },
-};

package/src/components/Typography/Typography.stories.tsx

@@ -1,95 +0,0 @@
-// Import React and other necessary elements
-import { Meta } from "@storybook/react";
-
-// Make sure your childrenField import is correct
-
-import { Typography, TypographyProps } from "./Typography";
-
-// Define the default export with Meta type including the component type
-export default {
-  title: "Typography",
-  component: Typography,
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["h1", "h2", "h3", "h4", "fieldLabel"],
-      description: "The Typography Variant to use",
-    },
-  },
-} as Meta<typeof Typography>;
-
-// Define stories directly as objects with render function
-export const H6 = {
-  render: (args: TypographyProps) => (
-    <Typography {...args}>{args.children}</Typography>
-  ),
-  args: {
-    variant: "h6",
-    children: "Heading 6",
-  },
-};
-
-export const Subtitle1 = {
-  render: (args: TypographyProps) => <Typography {...args} />,
-  args: {
-    variant: "subtitle1",
-    children: "Subtitle 1",
-  },
-};
-
-export const Subtitle2 = {
-  render: (args: TypographyProps) => <Typography {...args} />,
-  args: {
-    variant: "subtitle2",
-    children: "Subtitle 2",
-  },
-};
-
-export const Subtitle3 = {
-  render: (args: TypographyProps) => <Typography {...args} />,
-  args: {
-    variant: "subtitle3",
-    children: "Subtitle 3",
-  },
-};
-
-export const Body1 = {
-  render: (args: TypographyProps) => <Typography {...args} />,
-  args: {
-    variant: "body1",
-    children: "Body 1",
-  },
-};
-
-export const Body2 = {
-  render: (args: TypographyProps) => <Typography {...args} />,
-  args: {
-    variant: "body2",
-    children: "Body 2",
-  },
-};
-
-export const Caption = {
-  render: (args: TypographyProps) => <Typography {...args} />,
-  args: {
-    variant: "caption",
-    children: "Caption",
-  },
-};
-
-export const Label1 = {
-  render: (args: TypographyProps) => <Typography {...args} />,
-  args: {
-    variant: "label1",
-    children: "Label 1",
-  },
-};
-
-export const Label2 = {
-  render: (args: TypographyProps) => <Typography {...args} />,
-  args: {
-    variant: "label2",
-    children: "Label 2",
-  },
-};

package/src/stories/Button.stories.ts

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};