@campxdev/react-blueprint 0.1.31 → 0.1.33

package/package.json

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

package/src/App.tsx

@@ -10,6 +10,7 @@ function App() {
         actions={[<p>asdjflsf</p>]}
         appsMenu={<AppsMenu apps={["exams", "square", "admin"]} />}
         userFullName="Srikanth Yellapragada"
+        collapsed={false}
       />
     </Providers>
   );

package/src/assets/images/svg/campx-logo.svg

@@ -0,0 +1,32 @@
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1177.77 217.66">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #1e19f5;
+      }
+
+      .cls-3 {
+        fill: #121212;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <g id="Group_4155" data-name="Group 4155">
+        <path class="cls-3" d="m189.83,186.55c-21.46,21.16-49.17,30.99-79.27,30.99C33.08,217.54.3,164.2,0,109.96-.3,55.43,35.17,0,110.56,0c28.31,0,55.13,10.73,76.59,31.89l-26.22,25.33c-13.71-13.41-32.18-19.67-50.36-19.67-50.36,0-72.12,37.55-71.82,72.41.3,34.57,20.26,70.63,71.82,70.63,18.18,0,38.74-7.45,52.45-21.16l26.82,27.12Z"/>
+        <path class="cls-3" d="m375.48,173.44h-109.07l-17.88,39.34h-42.61L299.49,4.17h42.91l93.57,208.6h-42.91l-17.58-39.34Zm-54.53-125.46l-38.74,88.8h77.48l-38.74-88.8Z"/>
+        <path class="cls-3" d="m652.33,61.69l-67.94,90.59h-7.75l-66.46-90.89v151.68h-39.34V4.47h45.3l65.26,89.7L646.66,4.47h45v208.6h-39.34V61.69Z"/>
+        <path class="cls-3" d="m789.7,151.39v61.39h-39.34V4.17c32.48,0,65.86-.3,98.34-.3,102.51,0,102.81,146.62,0,147.51h-59Zm0-36.06h59c50.36,0,50.07-73.91,0-73.91h-59v73.91Z"/>
+        <path id="Subtraction_8" data-name="Subtraction 8" class="cls-2" d="m1149.43,217.66h-50.26l-29.65-40.82,25.85-35.57,55,75.71-.94.68h0Zm-153.97,0h-50.36l-.94-.69,77.35-106.47L944.16,4.04l.52-.38h51.01l51.73,71.2h.01s25.9,35.63,25.9,35.63v.02s.03.05.03.05l-25.9,35.65-.04-.05-51.95,71.51h0Zm99.7-137.63h0l-25.85-35.57,29.64-40.8h50.9l.52.38-55.21,76Z"/>
+      </g>
+      <g>
+        <path class="cls-1" d="m1165.77,3.47c-2.37,0-4.69.7-6.67,2.02-1.97,1.32-3.51,3.19-4.42,5.39-.91,2.19-1.15,4.61-.68,6.93.46,2.33,1.61,4.47,3.28,6.14,1.68,1.68,3.82,2.82,6.14,3.28,2.33.46,4.74.23,6.93-.68,2.19-.91,4.07-2.45,5.39-4.42,1.32-1.97,2.02-4.29,2.02-6.67,0-3.18-1.26-6.23-3.51-8.49-2.25-2.25-5.3-3.51-8.49-3.51h0Zm0,21.6c-1.9,0-3.75-.56-5.33-1.62-1.58-1.05-2.81-2.55-3.54-4.31s-.92-3.68-.55-5.55c.37-1.86,1.28-3.57,2.63-4.92s3.05-2.26,4.92-2.63c1.86-.37,3.79-.18,5.55.55,1.75.73,3.25,1.96,4.31,3.54,1.05,1.58,1.62,3.43,1.62,5.33,0,2.55-1.01,4.99-2.81,6.79-1.8,1.8-4.24,2.81-6.79,2.81h0Z"/>
+        <path class="cls-1" d="m1170.57,13.07c0-.95-.38-1.87-1.05-2.55s-1.59-1.05-2.55-1.05h-6v12h2.4v-4.8h1.75l3.2,4.8h2.88l-3.3-4.94c.76-.2,1.43-.65,1.92-1.28.48-.62.74-1.39.75-2.18Zm-3.6,1.2h-3.6v-2.4h3.6c.32,0,.62.13.85.35.22.23.35.53.35.85s-.13.62-.35.85-.53.35-.85.35Z"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/components/Assets/Icons/IconComponents/BulbIcon.tsx

@@ -2,7 +2,7 @@ import { useTheme } from "@mui/material";
 
 export const BulbIcon = () => {
   const theme = useTheme();
-  const color = theme.palette.info.main;
+  const color = theme.palette.highlight.highlightBlue;
 
   return (
     <svg

package/src/components/Assets/Icons/IconComponents/CampxFullLogoIcon.tsx

@@ -0,0 +1,56 @@
+import { useTheme } from "@mui/material";
+
+export const CampxFullLogoIcon = () => {
+  const theme = useTheme();
+
+  const color = theme.palette.mode === "dark" ? "#FFFFFF" : "#1e19f5";
+
+  return (
+    <svg
+      id="Layer_2"
+      data-name="Layer 2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1177.77 217.66"
+      style={{
+        strokeWidth: "0px",
+        fill: theme.palette.text.primary,
+      }}
+    >
+      {/* <defs>
+    <style>
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #1e19f5;
+      }
+
+      .cls-3 {
+        fill: #121212;
+      }
+    </style>
+  </defs> */}
+      <g id="Layer_1-2" data-name="Layer 1">
+        <g>
+          <g id="Group_4155" data-name="Group 4155">
+            <path d="m189.83,186.55c-21.46,21.16-49.17,30.99-79.27,30.99C33.08,217.54.3,164.2,0,109.96-.3,55.43,35.17,0,110.56,0c28.31,0,55.13,10.73,76.59,31.89l-26.22,25.33c-13.71-13.41-32.18-19.67-50.36-19.67-50.36,0-72.12,37.55-71.82,72.41.3,34.57,20.26,70.63,71.82,70.63,18.18,0,38.74-7.45,52.45-21.16l26.82,27.12Z" />
+            <path d="m375.48,173.44h-109.07l-17.88,39.34h-42.61L299.49,4.17h42.91l93.57,208.6h-42.91l-17.58-39.34Zm-54.53-125.46l-38.74,88.8h77.48l-38.74-88.8Z" />
+            <path d="m652.33,61.69l-67.94,90.59h-7.75l-66.46-90.89v151.68h-39.34V4.47h45.3l65.26,89.7L646.66,4.47h45v208.6h-39.34V61.69Z" />
+            <path d="m789.7,151.39v61.39h-39.34V4.17c32.48,0,65.86-.3,98.34-.3,102.51,0,102.81,146.62,0,147.51h-59Zm0-36.06h59c50.36,0,50.07-73.91,0-73.91h-59v73.91Z" />
+            <path
+              id="Subtraction_8"
+              data-name="Subtraction 8"
+              style={{ fill: color }}
+              d="m1149.43,217.66h-50.26l-29.65-40.82,25.85-35.57,55,75.71-.94.68h0Zm-153.97,0h-50.36l-.94-.69,77.35-106.47L944.16,4.04l.52-.38h51.01l51.73,71.2h.01s25.9,35.63,25.9,35.63v.02s.03.05.03.05l-25.9,35.65-.04-.05-51.95,71.51h0Zm99.7-137.63h0l-25.85-35.57,29.64-40.8h50.9l.52.38-55.21,76Z"
+            />
+          </g>
+          <g>
+            <path d="m1165.77,3.47c-2.37,0-4.69.7-6.67,2.02-1.97,1.32-3.51,3.19-4.42,5.39-.91,2.19-1.15,4.61-.68,6.93.46,2.33,1.61,4.47,3.28,6.14,1.68,1.68,3.82,2.82,6.14,3.28,2.33.46,4.74.23,6.93-.68,2.19-.91,4.07-2.45,5.39-4.42,1.32-1.97,2.02-4.29,2.02-6.67,0-3.18-1.26-6.23-3.51-8.49-2.25-2.25-5.3-3.51-8.49-3.51h0Zm0,21.6c-1.9,0-3.75-.56-5.33-1.62-1.58-1.05-2.81-2.55-3.54-4.31s-.92-3.68-.55-5.55c.37-1.86,1.28-3.57,2.63-4.92s3.05-2.26,4.92-2.63c1.86-.37,3.79-.18,5.55.55,1.75.73,3.25,1.96,4.31,3.54,1.05,1.58,1.62,3.43,1.62,5.33,0,2.55-1.01,4.99-2.81,6.79-1.8,1.8-4.24,2.81-6.79,2.81h0Z" />
+            <path d="m1170.57,13.07c0-.95-.38-1.87-1.05-2.55s-1.59-1.05-2.55-1.05h-6v12h2.4v-4.8h1.75l3.2,4.8h2.88l-3.3-4.94c.76-.2,1.43-.65,1.92-1.28.48-.62.74-1.39.75-2.18Zm-3.6,1.2h-3.6v-2.4h3.6c.32,0,.62.13.85.35.22.23.35.53.35.85s-.13.62-.35.85-.53.35-.85.35Z" />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/DashBoardIcon.tsx

@@ -6,8 +6,8 @@ export const DashBoardIcon = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
+      width="20"
+      height="20"
       viewBox="0 0 16 16"
       style={{
         stroke: color,

package/src/components/Assets/Icons/IconComponents/HomeIcon.tsx

@@ -6,8 +6,8 @@ export const HomeIcon = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
+      width="20"
+      height="20"
       viewBox="0 0 16 16"
       style={{
         stroke: color,

package/src/components/Assets/Icons/IconComponents/InfoIcon.tsx

@@ -2,7 +2,7 @@ import { useTheme } from "@mui/material";
 
 export const InfoIcon = () => {
   const theme = useTheme();
-  const color = theme.palette.info.main;
+  const color = theme.palette.highlight.highlightBlue;
 
   return (
     <svg

package/src/components/Assets/Icons/Icons.tsx

@@ -29,6 +29,7 @@ import { TicketsIcon } from "./IconComponents/TicketsIcon";
 import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
 import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
 import { AdministratorIcon } from "./IconComponents/AdministratorIcon";
+import { CampxFullLogoIcon } from "./IconComponents/CampxFullLogoIcon";
 export const Icons = {
   AppsIcon,
   CareerIcon,
@@ -60,4 +61,5 @@ export const Icons = {
   ProductFeaturesIcon,
   CampxIcon,
   AdministratorIcon,
+  CampxFullLogoIcon,
 };

package/src/components/Input/Button/ButtonLoader.css

@@ -1,7 +1,8 @@
 /* HTML: <div class="buttonLoader"></div> */
 .buttonLoader {
     max-height: 40px;
-    padding: 5px 30px;
+    padding: 10px 20px;
+    font-size: '14px';
     aspect-ratio: 2.5;
     --_g: no-repeat radial-gradient(farthest-side,#000 90%,#0000);
     background: var(--_g), var(--_g), var(--_g), var(--_g);

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -15,6 +15,7 @@ export interface AppHeaderProps {
   clientLogoUrl?: string;
   clientName: string;
   userFullName: string;
+  collapsed: boolean;
 }
 
 export const AppHeader = ({
@@ -23,23 +24,11 @@ export const AppHeader = ({
   clientLogoUrl,
   clientName,
   userFullName,
+  collapsed,
 }: AppHeaderProps) => {
   return (
-    <StyledHeader>
-      <Stack
-        flexDirection={"row"}
-        alignItems={"center"}
-        gap={"20px"}
-        divider={<Divider orientation="vertical" flexItem />}
-      >
-        {/* {appsMenu && (
-          <Stack alignItems={"center"} gap={"12px"} flexDirection={"row"}>
-            {appsMenu}
-          </Stack>
-        )} */}
-        <CampxIcon />
-        <Typography variant={"subtitle2"}>{clientName}</Typography>
-      </Stack>
+    <StyledHeader collapsed={collapsed}>
+      <Typography variant={"subtitle2"}>{clientName}</Typography>
       <Stack alignItems={"center"} gap={"12px"} flexDirection={"row"}>
         <StyledIconButton
           onClick={() => {

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

@@ -1,19 +1,27 @@
 import { Box, styled } from "@mui/material";
 import { Link } from "react-router-dom";
 
-export const StyledHeader = styled("header")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  width: "100%",
-  position: "fixed",
-  top: 0,
-  height: "60px",
-  backgroundColor: theme.palette.background.paper,
-  justifyContent: "space-between",
-  padding: "0 32px",
-  borderBottom: `1px solid ${theme.palette.border.main}`,
-}));
+const sidebarWidth = { collapsed: "60px", expanded: "240px" };
+
+export const StyledHeader = styled("header")(
+  ({ theme, collapsed }: { theme?: any; collapsed: boolean }) => ({
+    display: "flex",
+    position: "fixed",
+    flexDirection: "row",
+    alignItems: "center",
+    width:
+      "calc(100% - 12px - " +
+      (collapsed ? sidebarWidth.collapsed : sidebarWidth.expanded) +
+      ")",
+    top: "12px",
+    left: collapsed ? sidebarWidth.collapsed : sidebarWidth.expanded,
+    height: "60px",
+    backgroundColor: theme.palette.background.paper,
+    justifyContent: "space-between",
+    padding: "0 32px",
+    borderRadius: "8px",
+  })
+);
 
 export const StyledActionBox = styled(Box)(({ theme }) => ({
   marginRight: "20px",

package/src/components/Navigation/FloatingSidebar/FloatingSidebar.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { IconButton, ListItemIcon } from "@mui/material";
+import { RightIcon } from "../../Assets/Icons/IconComponents/RightIcon";
+import { LeftIcon } from "../../Assets/Icons/IconComponents/LeftIcon";
+import { createSidebarStyles } from "./styles";
+import { useMatch, useResolvedPath } from "react-router-dom";
+import { Icons } from "../../export";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import { CampxIcon } from "../../Assets/Icons/IconComponents/CampxIcon";
+import { CampxFullLogoIcon } from "../../Assets/Icons/IconComponents/CampxFullLogoIcon";
+
+export interface MenuItemProps {
+  name: string;
+  path: string;
+  icon?: any;
+  permissionKey?: string;
+  iconType?: string;
+}
+
+export const FloatingSidebar = ({ menu }: { menu: MenuItemProps[] }) => {
+  const [collapsed, setCollapsed] = useState(false);
+  const {
+    StyledSidebarContainer,
+    StyledLogoArea,
+    StyledMenuBar,
+    StyledCollapsibleSection,
+    StyledListItem,
+    StyledLinkButton,
+    StyledListItemButton,
+    StyledListItemIcon,
+  } = createSidebarStyles(collapsed);
+
+  const toggleSidebar = () => {
+    setCollapsed(!collapsed);
+  };
+
+  const MenuItem = ({
+    menuItem,
+    index,
+  }: {
+    menuItem: MenuItemProps;
+    index: number;
+  }) => {
+    const { path, icon: Icon, name } = menuItem;
+    let resolved = useResolvedPath(path);
+    let match = useMatch({ path: resolved.pathname, end: false });
+    return (
+      <StyledListItem key={path} disablePadding match={match}>
+        <StyledLinkButton to={path} onClick={() => {}}>
+          <StyledListItemButton collapsed={collapsed}>
+            <StyledListItemIcon collapsed={collapsed}>
+              {Icon ? <Icon /> : <Icons.HomeIcon />}
+            </StyledListItemIcon>
+            {!collapsed && <Typography variant="subtitle3">{name}</Typography>}
+          </StyledListItemButton>
+        </StyledLinkButton>
+      </StyledListItem>
+    );
+  };
+
+  return (
+    <StyledSidebarContainer direction="column" spacing={2}>
+      <StyledLogoArea collapsed={collapsed}>
+        {collapsed ? <CampxIcon /> : <CampxFullLogoIcon />}
+      </StyledLogoArea>
+      <StyledMenuBar>
+        {menu &&
+          menu.length > 0 &&
+          menu?.map((item: any, index: number) => (
+            <MenuItem menuItem={item} index={index} key={index} />
+          ))}
+      </StyledMenuBar>
+      <StyledCollapsibleSection>
+        <IconButton onClick={toggleSidebar}>
+          {collapsed ? <RightIcon /> : <LeftIcon />}
+        </IconButton>
+      </StyledCollapsibleSection>
+    </StyledSidebarContainer>
+  );
+};
+
+export default FloatingSidebar;

package/src/components/Navigation/FloatingSidebar/styles.tsx

@@ -0,0 +1,101 @@
+import {
+  Box,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  Stack,
+} from "@mui/material";
+import { styled, Theme } from "@mui/material/styles";
+import { Link } from "react-router-dom";
+
+export const createSidebarStyles = (collapsed: boolean) => {
+  const StyledSidebarContainer = styled(Stack)(({ theme }) => ({
+    height: "100vh",
+    width: collapsed ? "60px" : "240px",
+    backgroundColor: theme.palette.surface.defaultBackground,
+    position: "fixed",
+    left: "12px",
+    top: "12px",
+    bottom: "12px",
+    zIndex: 1000,
+  }));
+
+  const StyledLogoArea = styled(Box)(
+    ({ theme, collapsed }: { theme?: any; collapsed: boolean }) => ({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: collapsed ? "0px" : "12px 36px",
+      backgroundColor: theme.palette.surface.paperBackground,
+      height: "60px",
+      borderRadius: "8px",
+    })
+  );
+
+  const StyledMenuBar = styled(Box)(({ theme }) => ({
+    flexGrow: 1,
+    borderRadius: "8px",
+    backgroundColor: theme.palette.surface.paperBackground,
+  }));
+
+  const StyledCollapsibleSection = styled(Box)(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.spacing(2),
+    borderRadius: "8px",
+    backgroundColor: theme.palette.surface.paperBackground,
+    transition: "max-height 0.3s ease-out",
+    height: "60px",
+  }));
+  interface StyledListItemProps {
+    match: any;
+  }
+  const StyledListItem = styled(ListItem)<StyledListItemProps>(
+    ({ theme, match }) => ({
+      backgroundColor: match ? theme.palette.secondary.main : "none",
+      width: "auto",
+      margin: "5px 8px",
+      borderRadius: "4px",
+    })
+  );
+
+  const StyledLinkButton = styled(Link)({
+    width: "100%",
+    textDecoration: "none",
+    "&:hover": {
+      color: "unset",
+    },
+  });
+
+  const StyledListItemButton = styled(ListItemButton)(
+    ({ collapsed }: { collapsed: boolean }) => ({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: collapsed ? "center" : "flex-start",
+      paddingBottom: "5px",
+      paddingTop: "5px",
+      width: "100%",
+    })
+  );
+
+  const StyledListItemIcon = styled(ListItemIcon)(
+    ({ collapsed }: { collapsed: boolean }) => ({
+      minWidth: "auto",
+      paddingRight: collapsed ? "0px" : "8px",
+      display: "flex",
+      justifyContent: "center",
+    })
+  );
+
+  return {
+    StyledSidebarContainer,
+    StyledLogoArea,
+    StyledMenuBar,
+    StyledCollapsibleSection,
+    StyledListItem,
+    StyledLinkButton,
+    StyledListItemButton,
+    StyledListItemIcon,
+  };
+};

package/src/components/Navigation/exports.ts

@@ -4,6 +4,7 @@ import { DropdownMenu } from "./DropDownMenu/DropDownMenu";
 import { DropDownIcon } from "./DropDownMenu/DropDownIcon";
 import { DropdownMenuItem } from "./DropDownMenu/DropdownMenuItem";
 import { TabsContainer } from "./TabsContainer/TabsContainer";
+import { FloatingSidebar } from "./FloatingSidebar/FloatingSidebar";
 
 export {
   CustomDialog,
@@ -12,4 +13,5 @@ export {
   DropDownIcon,
   DropdownMenuItem,
   TabsContainer,
+  FloatingSidebar,
 };

package/src/components/export.ts

@@ -4,8 +4,6 @@ export * from "./Input/export";
 export * from "./Layout/AppHeader/AppHeader";
 
 export * from "./Layout/AppHeader/AppsMenu";
-export * from "./Layout/LayoutWrapper/LayoutWrapper";
 export * from "./Layout/PageContent/PageContent";
-export * from "./Layout/SideNavigation/SideNavigation";
 export * from "./Navigation/exports";
 export * from "./Feedback/exports";

package/src/stories/Layout/AppHeader.stories.tsx

@@ -41,28 +41,6 @@ export const Primary: Story = {
     actions: [<p>asdjflsf</p>],
     // appsMenu: <AppsMenu apps={["exams", "square", "admin"]} />,
     userFullName: "Srikanth Yellapragada",
+    collapsed: false,
   },
 };
-
-// Story with no apps menu
-export const WithAppsMenu: Story = {
-  render: (args: AppHeaderProps) => (
-    <AppHeader
-      {...args}
-      appsMenu={
-        <AppsMenu
-          apps={[
-            "exams",
-            "square",
-            "admin",
-            "enroll",
-            "payments",
-            "hrms",
-            "hostels",
-            "commute_x",
-          ]}
-        />
-      }
-    />
-  ),
-};

package/src/stories/Navigation/FloatingSidebar.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Box } from "@mui/material";
+import { FloatingSidebar, Icons } from "../../components/export";
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof FloatingSidebar> = {
+  title: "Navigation/FloatingSidebar",
+  component: FloatingSidebar,
+  decorators: [
+    (Story) => (
+      <Box
+        sx={{
+          display: "flex",
+          width: "100vw",
+          height: "100vh",
+          overflow: "hidden",
+          position: "relative",
+        }}
+      >
+        <Story />
+      </Box>
+    ),
+  ],
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen", // Ensures that the story takes the full screen
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FloatingSidebar>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args) => <FloatingSidebar {...args} />,
+  args: {
+    menu: [
+      { name: "Home", path: "/home", icon: Icons.DashBoardIcon },
+      { name: "Self Service Portal", path: "/item2" },
+    ],
+  },
+};

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

@@ -1,73 +0,0 @@
-import { Box, IconButton, Stack, Typography } from "@mui/material";
-
-import MenuIcon from "@mui/icons-material/Menu";
-import { ReactNode, useState } from "react";
-import { activeStore } from "../../../store/activeStore";
-import { Icons } from "../../export";
-import { Main, StyledLayoutContainer, StyledMainContainer } from "./styles";
-
-export interface LayoutWrapperProps {
-  title?: string;
-  actionButtons?: ReactNode[];
-  children: ReactNode;
-  sideBar: (props: {
-    open: boolean;
-    handleClick: (e: any) => void;
-  }) => ReactNode;
-}
-
-export const LayoutWrapper = ({
-  children,
-  title,
-  sideBar,
-}: LayoutWrapperProps) => {
-  const [isHovered, setIsHovered] = useState<boolean>(false);
-  const { open } = activeStore.useState((s) => s);
-
-  const handleClick = () => {
-    activeStore.update((s) => {
-      s.open = !open;
-    });
-  };
-
-  return (
-    <StyledLayoutContainer>
-      <StyledMainContainer>
-        <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 ? (
-                  <Icons.LeftIcon />
-                ) : !open && isHovered ? (
-                  <Icons.RightIcon />
-                ) : (
-                  <MenuIcon />
-                )}
-              </IconButton>
-              <Typography variant="subtitle1" noWrap>
-                {title ? title : ""}
-              </Typography>
-            </Stack>
-          </Stack>
-
-          {sideBar({ open: open, handleClick: handleClick })}
-        </Box>
-
-        <Main open={open}>{children}</Main>
-      </StyledMainContainer>
-    </StyledLayoutContainer>
-  );
-};

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

@@ -1,52 +0,0 @@
-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: "-50px",
-  },
-}));
-
-export const StyledLayoutContainer = styled(Box)(({ theme }) => ({
-  width: "100%",
-  position: "fixed",
-  top: "80px",
-  backgroundColor: theme.palette.surface.defaultBackground,
-}));
-
-export const StyledMainContainer = styled("main")(() => ({
-  width: "90%",
-  margin: "auto",
-  overflowY: "auto",
-  display: "flex",
-}));

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

@@ -1,100 +0,0 @@
-import { ListItemIcon, Stack } from "@mui/material";
-import { ReactNode } from "react";
-import { useMatch, useResolvedPath } from "react-router-dom";
-import { activeStore } from "../../../store/activeStore";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Icons } from "../../export";
-import {
-  StyledBox,
-  StyledContainer,
-  StyledDrawer,
-  StyledLinkButton,
-  StyledListItem,
-  StyledListItemButton,
-} from "./styles/styles";
-
-export interface SideNavigationProps {
-  menu?: MenuItemProps[];
-  children?: ReactNode;
-  open?: any;
-  handleDrawer?: any;
-}
-
-export interface MenuItemProps {
-  name: string;
-  path: string;
-  icon?: any;
-  permissionKey?: string;
-  iconType?: string;
-}
-
-export const SideNavigation = ({
-  menu,
-  open,
-  handleDrawer,
-  children,
-}: SideNavigationProps) => {
-  return (
-    <Stack gap="20px" direction={"row"} marginTop={"10px"}>
-      <StyledDrawer
-        variant={window.innerWidth > 1024 ? "persistent" : "temporary"}
-        anchor="left"
-        open={open}
-        onClose={handleDrawer}
-      >
-        <StyledBox>
-          {menu &&
-            menu.length > 0 &&
-            menu?.map((item: any, index: number) => (
-              <MenuItem menuItem={item} index={index} key={index} />
-            ))}
-          <StyledContainer>{children}</StyledContainer>
-        </StyledBox>
-      </StyledDrawer>
-    </Stack>
-  );
-};
-
-const MenuItem = ({
-  menuItem,
-  index,
-}: {
-  menuItem: MenuItemProps;
-  index: number;
-}) => {
-  const { path, icon: Icon, name, permissionKey, iconType } = menuItem;
-
-  let resolved = useResolvedPath(path);
-  // const permissions = PermissionsStore.useState((s) => s).permissions
-  let match = useMatch({ path: resolved.pathname, end: false });
-
-  // const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey
-
-  // if (!hasAccess) return null
-
-  return (
-    <StyledListItem key={path} disablePadding match={match}>
-      <StyledLinkButton
-        to={path}
-        style={{ width: "100%" }}
-        onClick={() =>
-          activeStore.update((s) => {
-            s.active = index;
-          })
-        }
-      >
-        <StyledListItemButton>
-          <ListItemIcon
-            sx={{
-              minWidth: "16px",
-              marginRight: "8px",
-            }}
-          >
-            {Icon ? <Icon /> : <Icons.HomeIcon />}
-          </ListItemIcon>
-          <Typography variant="subtitle3">{name}</Typography>
-        </StyledListItemButton>
-      </StyledLinkButton>
-    </StyledListItem>
-  );
-};

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

@@ -1,58 +0,0 @@
-import { Box, Drawer, ListItem, ListItemButton, styled } from "@mui/material";
-import { Link } from "react-router-dom";
-const drawerWidth: number = 240;
-
-export const StyledDrawer = styled(Drawer)(() => ({
-  width: drawerWidth,
-  flexShrink: 0,
-  "& .MuiDrawer-paper": {
-    width: drawerWidth,
-    boxSizing: "border-box",
-    position: "unset",
-    transition: "none !important",
-    borderRight: "none !important",
-    borderRadius: "5px",
-  },
-  "@media (max-width: 1024px)": {
-    "& .MuiDrawer-paper": {
-      borderRadius: "0px",
-    },
-  },
-}));
-
-interface StyledListItemProps {
-  match: any;
-}
-
-export const StyledListItem = styled(ListItem)<StyledListItemProps>(
-  ({ theme, match }) => ({
-    backgroundColor: match ? theme.palette.secondary.main : "none",
-    width: "auto",
-    margin: "5px 8px",
-    borderRadius: "5px",
-  })
-);
-
-export const StyledContainer = styled(Box)(({ theme }) => ({
-  width: "auto",
-  margin: "5px 10px",
-}));
-export const StyledListItemButton = styled(ListItemButton)(() => ({
-  alignItems: "center",
-  display: "flex",
-  paddingBottom: "5px",
-  paddingTop: "5px",
-}));
-
-export const StyledLinkButton = styled(Link)({
-  textDecoration: "none",
-  "&:hover": {
-    color: "unset",
-  },
-});
-
-export const StyledBox = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  height: "calc(100vh - 120px)",
-  paddingTop: "20px",
-}));

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

@@ -1,95 +0,0 @@
-import { Button, Stack } from "@mui/material";
-import { Meta, StoryObj } from "@storybook/react";
-import { Icons } from "../../components/Assets/Icons/Icons";
-import {
-  LayoutWrapper,
-  LayoutWrapperProps,
-} from "../../components/Layout/LayoutWrapper/LayoutWrapper";
-import { PageContent } from "../../components/Layout/PageContent/PageContent";
-import { SideNavigation } from "../../components/Layout/SideNavigation/SideNavigation";
-import DialogButton from "../../components/Navigation/DialogButton/DialogButton";
-
-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 LayoutWrapperStory> = {
-  title: "Layout/LayoutWrapper",
-  component: LayoutWrapperStory,
-  tags: ["autodocs"],
-  argTypes: {
-    title: {
-      control: "text",
-      description: "The title of the component",
-      type: { name: "string", required: false },
-    },
-    actionButtons: {
-      control: "object",
-      description: "Array of React nodes for action buttons",
-      // type: { name: "ReactNode[]", required: false },
-    },
-    children: {
-      control: "object",
-      description: "The content of the component",
-    },
-    sideBar: {
-      control: false,
-      description:
-        "A function that returns a ReactNode, with props for open and handleClick",
-      type: {
-        name: "function",
-        required: true,
-      },
-    },
-
-    // menu: {
-    //   control: "object",
-    //   description:
-    //     "Menu configuration object, which may include items or other menu-related settings.",
-    // },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof LayoutWrapperStory>;
-
-// Primary story
-export const Primary: Story = {
-  render: (args: LayoutWrapperProps) => <LayoutWrapperStory {...args} />,
-  args: {
-    sideBar: ({ open, handleClick }: any) => (
-      <SideNavigation
-        open={open}
-        handleDrawer={handleClick}
-        menu={[
-          { name: "Tickets", path: "/home", icon: Icons.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"
-      />,
-    ],
-  },
-};

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

@@ -1,57 +0,0 @@
-import { Typography } from "@mui/material";
-import { Meta, StoryObj } from "@storybook/react";
-import { Icons } from "../../components/Assets/Icons/Icons";
-import {
-  SideNavigation,
-  SideNavigationProps,
-} from "../../components/Layout/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>
-    ),
-  },
-};