@campxdev/react-blueprint 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

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

@@ -1,12 +1,14 @@
+import { Button, Stack } from "@mui/material";
 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";
+import { PageContent } from "../PageContent/PageContent";
+import { SideNavigation } from "../SideNavigation/SideNavigation";
+import { LayoutWrapper, LayoutWrapperProps } from "./LayoutWrapper";
 
 const LayoutWrapperStory = (props: LayoutWrapperProps) => {
   return (
-    <div style={{ minHeight: "300px" }}>
+    <div style={{ minHeight: "500px" }}>
       <LayoutWrapper {...props} />
     </div>
   );
@@ -32,11 +34,24 @@ type Story = StoryObj<typeof LayoutWrapperStory>;
 export const Primary: Story = {
   render: (args: LayoutWrapperProps) => <LayoutWrapperStory {...args} />,
   args: {
-    menu: [
-      { name: "Tickets", path: "/home", icon: DashBoardIcon },
-      { name: "Item 2", path: "/item2" },
-    ],
-    children: <>hi</>,
+    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 }) => (
@@ -50,25 +65,3 @@ export const Primary: Story = {
     ],
   },
 };
-
-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,91 +1,72 @@
-import { Box, IconButton, Stack, 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;
-  actionButtons?: React.ReactNode[];
-  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,
-  actionButtons,
+  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={{
-            padding: "0px !important",
-          }}
-        >
-          {showIcon && (
-            <>
-              <Stack
-                direction={"row"}
-                width={"100%"}
-                justifyContent={"space-between"}
+        <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)}
               >
-                <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>
-            </>
-          )}
-        </Toolbar>
+                {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,
 });