@campxdev/react-blueprint 0.1.13 → 0.1.15

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.15",
   "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,23 @@
+import { Button, Stack } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
 import { DashBoardIcon } from "../../../assets/images/icons";
+import DialogButton from "../../Modals/DialogButton";
+import { PageContent } from "../PageContent/PageContent";
+import { SideNavigation } from "../SideNavigation/SideNavigation";
 import { LayoutWrapper, LayoutWrapperProps } from "./LayoutWrapper";
 
+const LayoutWrapperStory = (props: LayoutWrapperProps) => {
+  return (
+    <div style={{ minHeight: "500px" }}>
+      <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 +28,40 @@ 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" },
+    sideBar: ({ open, handleClick }: any) => (
+      <SideNavigation
+        open={open}
+        handleDrawer={handleClick}
+        menu={[
+          { name: "Tickets", path: "/home", icon: DashBoardIcon },
+          { name: "Item 2", path: "/item2" },
+        ]}
+      />
+    ),
+    children: (
+      <>
+        <Stack alignItems={"flex-end"}>
+          <Button variant="contained">Add Tickets</Button>
+        </Stack>
+        <PageContent>Mahesh</PageContent>
+      </>
+    ),
+    actionButtons: [
+      <DialogButton
+        anchor={({ open }) => (
+          <Button variant="contained" onClick={open}>
+            Create
+          </Button>
+        )}
+        content={({ close }) => <Button onClick={close}>Click Me</Button>}
+        title="Dialog Title"
+      />,
     ],
-    children: <>hi</>,
   },
 };

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

@@ -1,72 +1,72 @@
-import { IconButton, Toolbar, Typography } from "@mui/material";
+import { Box, IconButton, Stack, Typography } from "@mui/material";
 
 import MenuIcon from "@mui/icons-material/Menu";
-import { useState } from "react";
+import { ReactNode, useState } from "react";
 import { LeftIcon, RightIcon } from "../../../assets/images/icons";
 import { activeStore } from "../../../store/activeStore";
-import { SideNavigation } from "../SideNavigation/SideNavigation";
-import {
-  StyledLayoutContainer,
-  StyledMainContainer,
-} from "../SideNavigation/styles/styles";
+import { Main, StyledLayoutContainer, StyledMainContainer } from "./styles";
 
 export interface LayoutWrapperProps {
   title?: string;
-  children: React.ReactNode;
-  showIcon?: boolean;
-  menu?: any;
+  actionButtons?: ReactNode[];
+  children: ReactNode;
+  sideBar: (props: {
+    open: boolean;
+    handleClick: (e: any) => void;
+  }) => ReactNode;
 }
+
 export const LayoutWrapper = ({
   children,
   title,
-  showIcon = true,
-  menu,
+  sideBar,
 }: LayoutWrapperProps) => {
-  const [open, setOpen] = useState<boolean>(
-    window.innerWidth > 1024 ? true : false
-  );
   const [isHovered, setIsHovered] = useState<boolean>(false);
+  const { open } = activeStore.useState((s) => s);
 
-  const { active } = activeStore.useState((s) => s);
-
-  const handleDrawer = () => {
-    setOpen(!open);
+  const handleClick = () => {
+    activeStore.update((s) => {
+      s.open = !open;
+    });
   };
 
   return (
     <StyledLayoutContainer>
       <StyledMainContainer>
-        <Toolbar sx={{ paddingLeft: "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>
-          )}
-          <Typography variant="subtitle1" noWrap>
-            {title ? title : menu[active].name}
-          </Typography>
-        </Toolbar>
+        <Box>
+          <Stack
+            direction={"row"}
+            width={"100%"}
+            justifyContent={"space-between"}
+          >
+            <Stack direction={"row"} alignItems={"center"}>
+              <IconButton
+                color="inherit"
+                aria-label="open drawer"
+                onClick={handleClick}
+                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 : ""}
+              </Typography>
+            </Stack>
+          </Stack>
+
+          {sideBar({ open: open, handleClick: handleClick })}
+        </Box>
 
-        <SideNavigation
-          menu={menu}
-          children={children}
-          open={open}
-          handleDrawer={handleDrawer}
-        />
+        <Main open={open}>{children}</Main>
       </StyledMainContainer>
     </StyledLayoutContainer>
   );

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

@@ -0,0 +1,52 @@
+import { Box, styled } from "@mui/material";
+
+const drawerWidth: number = 240;
+
+export const Main = styled("main", {
+  shouldForwardProp: (prop) => prop !== "open",
+})<{
+  open?: boolean;
+}>(({ theme, open }) => ({
+  padding: "0px 25px",
+  transition: theme.transitions.create("margin", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  marginLeft: `-${drawerWidth}px`,
+  ...(open && {
+    transition: theme.transitions.create("margin", {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    marginLeft: 0,
+  }),
+  width: "100%",
+  overflowY: "auto",
+  borderRadius: "5px",
+  "&::-webkit-scrollbar": {
+    width: "0.4em",
+    height: "0.4em",
+  },
+
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: "3px",
+  },
+  "@media (max-width: 1024px)": {
+    marginLeft: 0,
+  },
+}));
+
+export const StyledLayoutContainer = styled(Box)(({ theme }) => ({
+  width: "100%",
+  position: "fixed",
+  top: "70px",
+  backgroundColor: theme.palette.background.default,
+}));
+
+export const StyledMainContainer = styled("main")(() => ({
+  width: "90%",
+  margin: "auto",
+  overflowY: "auto",
+  display: "flex",
+}));

package/src/components/Layout/PageContent/PageContent.tsx

@@ -0,0 +1,26 @@
+import { Box, styled } from "@mui/material";
+
+export const StyledContainer = styled(Box)(({ theme }) => ({
+  width: "100%",
+  height: "calc(100vh - 120px)",
+  overflowY: "auto",
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: "5px",
+  "&::-webkit-scrollbar": {
+    width: "0.4em",
+    height: "0.4em",
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: "3px",
+  },
+  "@media (max-width: 1024px)": {
+    marginLeft: 0,
+  },
+  padding: "25px",
+  marginTop: "10px",
+}));
+
+export const PageContent = ({ children }: { children: React.ReactNode }) => {
+  return <StyledContainer> {children}</StyledContainer>;
+};

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

@@ -4,7 +4,6 @@ import { HomeIcon } from "../../../assets/images/icons";
 import { activeStore } from "../../../store/activeStore";
 import { Typography } from "../../Typography/Typography";
 import {
-  Main,
   StyledDrawer,
   StyledLinkButton,
   StyledList,
@@ -14,7 +13,6 @@ import {
 
 export interface SideNavigationProps {
   menu?: any;
-  children: React.ReactNode;
   open?: any;
   handleDrawer?: any;
 }
@@ -32,12 +30,11 @@ export interface MenuItemProps {
 
 export const SideNavigation = ({
   menu,
-  children,
   open,
   handleDrawer,
 }: SideNavigationProps) => {
   return (
-    <Stack gap="20px" direction={"row"}>
+    <Stack gap="20px" direction={"row"} marginTop={"10px"}>
       <StyledDrawer
         variant={window.innerWidth > 1024 ? "persistent" : "temporary"}
         anchor="left"
@@ -50,7 +47,6 @@ export const SideNavigation = ({
           ))}
         </StyledList>
       </StyledDrawer>
-      <Main open={open}>{children}</Main>
     </Stack>
   );
 };

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

@@ -1,11 +1,4 @@
-import {
-  Box,
-  Drawer,
-  List,
-  ListItem,
-  ListItemButton,
-  styled,
-} from "@mui/material";
+import { Drawer, List, ListItem, ListItemButton, styled } from "@mui/material";
 import { Link } from "react-router-dom";
 const drawerWidth: number = 240;
 
@@ -53,56 +46,6 @@ export const StyledLinkButton = styled(Link)({
   },
 });
 
-export const Main = styled("main", {
-  shouldForwardProp: (prop) => prop !== "open",
-})<{
-  open?: boolean;
-}>(({ theme, open }) => ({
-  padding: "25px",
-  transition: theme.transitions.create("margin", {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  marginLeft: `-${drawerWidth}px`,
-  ...(open && {
-    transition: theme.transitions.create("margin", {
-      easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-    marginLeft: 0,
-  }),
-  width: "100%",
-  height: "calc(100vh - 120px)",
-  overflowY: "auto",
-  backgroundColor: theme.palette.background.paper,
-  borderRadius: "5px",
-  "&::-webkit-scrollbar": {
-    width: "0.4em",
-    height: "0.4em",
-  },
-
-  "&::-webkit-scrollbar-thumb": {
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
-    borderRadius: "3px",
-  },
-  "@media (max-width: 1024px)": {
-    marginLeft: 0,
-  },
-}));
-
-export const StyledMainContainer = styled("main")(() => ({
-  width: "90%",
-  margin: "auto",
-  overflowY: "auto",
-}));
-
-export const StyledLayoutContainer = styled(Box)(({ theme }) => ({
-  width: "100%",
-  position: "fixed",
-  top: "60px",
-  backgroundColor: theme.palette.background.default,
-}));
-
 export const StyledList = styled(List)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   height: "calc(100vh - 120px)",

package/src/components/export.ts

@@ -8,3 +8,5 @@ export * from "./Layout/Header/AppHeader";
 export * from "./Layout/Header/AppLogo";
 export * from "./Layout/Header/AppsMenu";
 export * from "./Layout/LayoutWrapper/LayoutWrapper";
+export * from "./Layout/PageContent/PageContent";
+export * from "./Layout/SideNavigation/SideNavigation";

package/src/store/activeStore.ts

@@ -2,4 +2,5 @@ import { Store } from "pullstate";
 
 export const activeStore = new Store({
   active: 0,
+  open: window.innerWidth > 1024 ? true : false,
 });