@campxdev/react-blueprint 0.1.14 → 0.1.16

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 { LeftIcon, RightIcon } from "../../../assets/images/icons";
+import { ReactNode, useState } from "react";
 import { activeStore } from "../../../store/activeStore";
-import { SideNavigation } from "../SideNavigation/SideNavigation";
-import {
-  StyledLayoutContainer,
-  StyledMainContainer,
-} from "../SideNavigation/styles/styles";
+import { Icons } from "../../export";
+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 ? (
+                  <Icons.LeftIcon />
+                ) : !open && isHovered ? (
+                  <Icons.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: "80px",
+  backgroundColor: theme.palette.background.default,
+}));
+
+export const StyledMainContainer = styled("main")(() => ({
+  width: "90%",
+  margin: "auto",
+  overflowY: "auto",
+  display: "flex",
+}));

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

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { PageContent } from "../../export";
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof PageContent> = {
+  title: "Layout/PageContent",
+  component: PageContent,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: "object",
+      description: "The content of the component",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PageContent>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args: any) => <PageContent {...args} />,
+  args: {
+    children: <>Tickets</>,
+  },
+};

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

@@ -0,0 +1,32 @@
+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,
+  sx,
+}: {
+  children: React.ReactNode;
+  sx?: any;
+}) => {
+  return <StyledContainer sx={sx}> {children}</StyledContainer>;
+};

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

@@ -0,0 +1,57 @@
+import { Typography } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import { Icons } from "../../export";
+import {
+  SideNavigation,
+  SideNavigationProps,
+} from "../SideNavigation/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: "Array of menu item props",
+    },
+    open: {
+      control: "boolean",
+      description: "State to control if the drawer is open",
+    },
+    handleDrawer: {
+      control: false,
+      description: "Function to handle drawer state",
+      type: { name: "function", required: false },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SideNavigation>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args: SideNavigationProps) => <SideNavigation {...args} />,
+  args: {
+    open: true,
+    menu: [
+      { name: "Tickets", path: "/home", icon: Icons.DashBoardIcon },
+      { name: "Item 2", path: "/item2" },
+    ],
+  },
+};
+
+export const WithoutMenu: Story = {
+  render: (args: SideNavigationProps) => <SideNavigation {...args} />,
+  args: {
+    open: true,
+    children: (
+      <Typography variant="body2">
+        Vestibulum blandit viverra conv allis. Pellentesque ligula urna,
+        fermentum ut semper in, tincidunt nec dui.
+      </Typography>
+    ),
+  },
+};

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

@@ -1,61 +1,67 @@
 import { ListItemIcon, Stack } from "@mui/material";
+import { ReactNode } from "react";
 import { useMatch, useResolvedPath } from "react-router-dom";
-import { HomeIcon } from "../../../assets/images/icons";
 import { activeStore } from "../../../store/activeStore";
 import { Typography } from "../../Typography/Typography";
+import { Icons } from "../../export";
 import {
-  Main,
+  StyledBox,
+  StyledContainer,
   StyledDrawer,
   StyledLinkButton,
-  StyledList,
   StyledListItem,
   StyledListItemButton,
 } from "./styles/styles";
 
 export interface SideNavigationProps {
-  menu?: any;
-  children: React.ReactNode;
+  menu?: MenuItemProps[];
+  children?: ReactNode;
   open?: any;
   handleDrawer?: any;
 }
 
 export interface MenuItemProps {
-  menuItem: {
-    name: string;
-    path: string;
-    icon: any;
-    permissionKey: string;
-    iconType: string;
-  };
-  index: number;
+  name: string;
+  path: string;
+  icon?: any;
+  permissionKey?: string;
+  iconType?: string;
 }
 
 export const SideNavigation = ({
   menu,
-  children,
   open,
   handleDrawer,
+  children,
 }: SideNavigationProps) => {
   return (
-    <Stack gap="20px" direction={"row"}>
+    <Stack gap="20px" direction={"row"} marginTop={"10px"}>
       <StyledDrawer
         variant={window.innerWidth > 1024 ? "persistent" : "temporary"}
         anchor="left"
         open={open}
         onClose={handleDrawer}
       >
-        <StyledList>
-          {menu?.map((item: any, index: number) => (
-            <MenuItem menuItem={item} index={index} key={index} />
-          ))}
-        </StyledList>
+        <StyledBox>
+          {menu &&
+            menu.length > 0 &&
+            menu?.map((item: any, index: number) => (
+              <MenuItem menuItem={item} index={index} key={index} />
+            ))}
+          <StyledContainer>{children}</StyledContainer>
+        </StyledBox>
       </StyledDrawer>
-      <Main open={open}>{children}</Main>
     </Stack>
   );
 };
 
-const MenuItem = ({ menuItem, index }: MenuItemProps) => {
+const MenuItem = ({
+  menuItem,
+  index,
+}: {
+  menuItem: MenuItemProps;
+  index: number;
+}) => {
   const { path, icon: Icon, name, permissionKey, iconType } = menuItem;
 
   let resolved = useResolvedPath(path);
@@ -84,7 +90,7 @@ const MenuItem = ({ menuItem, index }: MenuItemProps) => {
               marginRight: "8px",
             }}
           >
-            {Icon ? <Icon /> : <HomeIcon />}
+            {Icon ? <Icon /> : <Icons.HomeIcon />}
           </ListItemIcon>
           <Typography variant="subtitle3">{name}</Typography>
         </StyledListItemButton>

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

@@ -1,11 +1,4 @@
-import {
-  Box,
-  Drawer,
-  List,
-  ListItem,
-  ListItemButton,
-  styled,
-} from "@mui/material";
+import { Box, Drawer, ListItem, ListItemButton, styled } from "@mui/material";
 import { Link } from "react-router-dom";
 const drawerWidth: number = 240;
 
@@ -39,6 +32,11 @@ export const StyledListItem = styled(ListItem)<StyledListItemProps>(
     borderRadius: "5px",
   })
 );
+
+export const StyledContainer = styled(Box)(({ theme }) => ({
+  width: "auto",
+  margin: "5px 10px",
+}));
 export const StyledListItemButton = styled(ListItemButton)(() => ({
   alignItems: "center",
   display: "flex",
@@ -53,57 +51,7 @@ 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 }) => ({
+export const StyledBox = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   height: "calc(100vh - 120px)",
   paddingTop: "20px",

package/src/components/Layout/Spinner/Spinner.css

@@ -4,7 +4,7 @@
     border-radius: 50%;
     position: relative;
     animation: rotate 1s linear infinite;
-    scale: 0.5;
+    scale: 0.4;
   }
   .spinner::before , .spinner::after {
     content: "";

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

@@ -7,7 +7,7 @@ import { Spinner } from "./Spinner";
 
 // Define the default export with Meta type including the component type
 export default {
-  title: "Layout/Spinner",
+  title: "FeedBack/Spinner",
   component: Spinner,
   tags: ["autodocs"],
   argTypes: {},

package/src/components/Layout/Spinner/Spinner.tsx

@@ -1,5 +1,5 @@
 import "./Spinner.css";
 
 export const Spinner = () => {
-  return <div className="spinner" style={{}}></div>;
+  return <div className="spinner"></div>;
 };

package/src/components/Modals/DialogButton.tsx

@@ -13,7 +13,7 @@ import { ReactNode, forwardRef, useState } from "react";
 
 const StyledDialogHeader = styled(Box)(({ theme }) => ({
   height: "60px",
-  backgroundColor: theme.palette.grey[200],
+
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",

package/src/components/TabsContainer/TabsContainer.stories.tsx

@@ -0,0 +1,48 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import { PageContent } from "../Layout/PageContent/PageContent";
+import { TabsContainer, TabsContainerProps } from "./TabsContainer";
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof TabsContainer> = {
+  title: "Navigation/TabsContainer",
+  component: TabsContainer,
+  tags: ["autodocs"],
+  // argTypes: {
+  //   menu: {
+  //     control: "object",
+  //     description: "Menu items to be displayed in the side navigation.",
+  //   },
+  // },
+};
+
+export default meta;
+type Story = StoryObj<typeof TabsContainer>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args: TabsContainerProps) => (
+    <PageContent sx={{ padding: "0px" }}>
+      <TabsContainer {...args} />{" "}
+    </PageContent>
+  ),
+  args: {
+    tabs: [
+      {
+        key: "1",
+        label: "Personal Details",
+        component: <Box>First Year</Box>,
+      },
+      {
+        key: "2",
+        label: "Overview",
+        component: <>Second Year</>,
+      },
+      {
+        key: "3",
+        label: "year 3",
+        component: <>Third Year</>,
+      },
+    ],
+  },
+};

package/src/components/TabsContainer/TabsContainer.tsx

@@ -0,0 +1,58 @@
+import { Box, Tab, TabProps, Tabs, TabsProps } from "@mui/material";
+import { ChangeEvent, useEffect, useState } from "react";
+
+interface CustomTabProps extends Omit<TabProps, "component"> {
+  component: React.ReactNode;
+  highlight?: boolean;
+  key: string | number;
+}
+
+export interface TabsContainerProps {
+  tabs: CustomTabProps[];
+  onTabChange?: (tabKey: string) => void;
+  currentTabIndex?: number;
+  tabsProps: TabsProps;
+}
+
+export const TabsContainer = ({
+  tabs,
+  onTabChange,
+  currentTabIndex = 0,
+  tabsProps,
+}: TabsContainerProps) => {
+  const [currentTab, setCurrentTab] = useState(tabs[currentTabIndex]?.key);
+
+  const handleTabsChange = (_event: ChangeEvent<{}>, value: string): void => {
+    setCurrentTab(value);
+    onTabChange && onTabChange(value);
+  };
+  useEffect(() => {
+    setCurrentTab(tabs[currentTabIndex]?.key);
+  }, []);
+
+  return (
+    <>
+      <Tabs
+        onChange={handleTabsChange}
+        value={currentTab}
+        variant="scrollable"
+        scrollButtons="auto"
+        TabIndicatorProps={{
+          children: <span className="MuiTabs-indicatorSpan" />,
+        }}
+        {...tabsProps}
+      >
+        {tabs.map(({ component, ...tab }) => (
+          <Tab
+            label={tab.label}
+            value={tab?.key}
+            icon={tab.highlight ? <span>{"."}</span> : <></>}
+            iconPosition="end"
+            {...tab}
+          />
+        ))}
+      </Tabs>
+      <Box p={2}>{tabs.find((tab) => tab?.key === currentTab)?.component}</Box>
+    </>
+  );
+};

package/src/components/export.ts

@@ -1,5 +1,6 @@
 export * from "./DropDownMenu/DropDownButton";
 export * from "./DropDownMenu/DropDownMenu";
+export * from "./Icons/export";
 export * from "./Input/Button/Button";
 export * from "./Input/SingleSelect/SingleSelect";
 export * from "./Input/Switch/Switch";
@@ -8,3 +9,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,
 });