@campxdev/react-blueprint 0.1.10 → 0.1.12

package/package.json

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

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

@@ -23,7 +23,7 @@ export const Primary: Story = {
   render: (args: LayoutWrapperProps) => <LayoutWrapper {...args} />,
   args: {
     menu: [
-      { name: "Tickets", path: "/home", icon: DashBoardIcon },
+      { name: "Tickets", path: "/", icon: DashBoardIcon },
       { name: "Item 2", path: "/item2" },
     ],
     children: <>hi</>,

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

@@ -3,6 +3,7 @@ import { IconButton, Toolbar, Typography } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import { useState } from "react";
 import { LeftIcon, RightIcon } from "../../../assets/images/icons";
+import { activeStore } from "../../../store/activeStore";
 import { SideNavigation } from "../SideNavigation/SideNavigation";
 import {
   StyledLayoutContainer,
@@ -26,14 +27,12 @@ export const LayoutWrapper = ({
   );
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
-  const [active, setActive] = useState(0);
+  const { active } = activeStore.useState((s) => s);
 
   const handleDrawer = () => {
     setOpen(!open);
   };
 
-  console.log(active, menu[active].name);
-
   return (
     <StyledLayoutContainer>
       <StyledMainContainer>
@@ -44,7 +43,7 @@ export const LayoutWrapper = ({
               aria-label="open drawer"
               onClick={handleDrawer}
               edge="start"
-              sx={{ mr: 0.5 }}
+              sx={{ mr: 0.5, padding: "6px", marginLeft: "0px" }}
               onMouseEnter={() => setIsHovered(true)}
               onMouseLeave={() => setIsHovered(false)}
             >
@@ -67,7 +66,6 @@ export const LayoutWrapper = ({
           children={children}
           open={open}
           handleDrawer={handleDrawer}
-          setActive={setActive}
         />
       </StyledMainContainer>
     </StyledLayoutContainer>

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

@@ -1,11 +1,11 @@
-import { ListItemIcon, Stack } from "@mui/material";
+import { Link, ListItemIcon, Stack } from "@mui/material";
 import { useMatch, useResolvedPath } from "react-router-dom";
 import { HomeIcon } from "../../../assets/images/icons";
+import { activeStore } from "../../../store/activeStore";
 import { Typography } from "../../Typography/Typography";
 import {
   Main,
   StyledDrawer,
-  StyledLinkButton,
   StyledList,
   StyledListItem,
   StyledListItemButton,
@@ -16,7 +16,6 @@ export interface SideNavigationProps {
   children: React.ReactNode;
   open?: any;
   handleDrawer?: any;
-  setActive: any;
 }
 
 export interface MenuItemProps {
@@ -28,7 +27,6 @@ export interface MenuItemProps {
     iconType: string;
   };
   index: number;
-  setActive: any;
 }
 
 export const SideNavigation = ({
@@ -36,7 +34,6 @@ export const SideNavigation = ({
   children,
   open,
   handleDrawer,
-  setActive,
 }: SideNavigationProps) => {
   return (
     <Stack gap="20px" direction={"row"}>
@@ -48,12 +45,7 @@ export const SideNavigation = ({
       >
         <StyledList>
           {menu?.map((item: any, index: number) => (
-            <MenuItem
-              menuItem={item}
-              index={index}
-              key={index}
-              setActive={setActive}
-            />
+            <MenuItem menuItem={item} index={index} key={index} />
           ))}
         </StyledList>
       </StyledDrawer>
@@ -62,7 +54,7 @@ export const SideNavigation = ({
   );
 };
 
-const MenuItem = ({ menuItem, index, setActive }: MenuItemProps) => {
+const MenuItem = ({ menuItem, index }: MenuItemProps) => {
   const { path, icon: Icon, name, permissionKey, iconType } = menuItem;
 
   let resolved = useResolvedPath(path);
@@ -73,14 +65,16 @@ const MenuItem = ({ menuItem, index, setActive }: MenuItemProps) => {
 
   // if (!hasAccess) return null
 
-  console.log(index, "path");
-
   return (
     <StyledListItem key={path} disablePadding match={match}>
-      <StyledLinkButton
-        to={path}
+      <Link
+        href={path}
         style={{ width: "100%" }}
-        onClick={() => setActive(index)}
+        onClick={() =>
+          activeStore.update((s) => {
+            s.active = index;
+          })
+        }
       >
         <StyledListItemButton>
           <ListItemIcon
@@ -93,7 +87,7 @@ const MenuItem = ({ menuItem, index, setActive }: MenuItemProps) => {
           </ListItemIcon>
           <Typography variant="subtitle3">{name}</Typography>
         </StyledListItemButton>
-      </StyledLinkButton>
+      </Link>
     </StyledListItem>
   );
 };

package/src/components/export.ts

@@ -7,3 +7,4 @@ export * from "./Input/TextField/TextField";
 export * from "./Layout/Header/AppHeader";
 export * from "./Layout/Header/AppLogo";
 export * from "./Layout/Header/AppsMenu";
+export * from "./Layout/LayoutWrapper/LayoutWrapper";

package/src/store/activeStore.ts

@@ -0,0 +1,5 @@
+import { Store } from "pullstate";
+
+export const activeStore = new Store({
+  active: 0,
+});

package/src/themes/commonTheme.ts

@@ -76,9 +76,9 @@ export const getCommonTheme = (mode: Theme) => {
             "& li": {
               borderBottom: "1212121A",
               minHeight: "55px",
-              ":hover": {
-                backgroundColor: "rgba(0, 0, 0, 0.025)",
-              },
+              // ":hover": {
+              //   backgroundColor: "rgba(0, 0, 0, 0.025)",
+              // },
             },
             "& > :last-child": {
               borderBottom: "none",