@campxdev/react-blueprint 0.1.31 → 0.1.32

package/package.json

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

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

@@ -26,20 +26,7 @@ export const AppHeader = ({
 }: 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>
+      <Typography variant={"subtitle2"}>{clientName}</Typography>
       <Stack alignItems={"center"} gap={"12px"} flexDirection={"row"}>
         <StyledIconButton
           onClick={() => {

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

@@ -7,12 +7,12 @@ export const StyledHeader = styled("header")(({ theme }) => ({
   alignItems: "center",
   width: "100%",
   position: "fixed",
-  top: 0,
+  top: "12px",
   height: "60px",
   backgroundColor: theme.palette.background.paper,
   justifyContent: "space-between",
   padding: "0 32px",
-  borderBottom: `1px solid ${theme.palette.border.main}`,
+  borderRadius: "8px",
 }));
 
 export const StyledActionBox = styled(Box)(({ theme }) => ({

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

@@ -40,12 +40,12 @@ export const Main = styled("main", {
 export const StyledLayoutContainer = styled(Box)(({ theme }) => ({
   width: "100%",
   position: "fixed",
-  top: "80px",
+  top: "60px",
   backgroundColor: theme.palette.surface.defaultBackground,
 }));
 
 export const StyledMainContainer = styled("main")(() => ({
-  width: "90%",
+  // width: "90%",
   margin: "auto",
   overflowY: "auto",
   display: "flex",

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

@@ -35,23 +35,21 @@ export const SideNavigation = ({
   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>
+    <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>
   );
 };
 
@@ -65,13 +63,8 @@ const MenuItem = ({
   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

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/stories/Layout/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/stories/Layout/LayoutWrapper.stories.tsx

@@ -67,8 +67,12 @@ export const Primary: Story = {
         open={open}
         handleDrawer={handleClick}
         menu={[
-          { name: "Tickets", path: "/home", icon: Icons.DashBoardIcon },
-          { name: "Item 2", path: "/item2" },
+          {
+            name: "Self Service Portal",
+            path: "/home",
+            icon: Icons.DashBoardIcon,
+          },
+          { name: "Self Service Portal", path: "/item2" },
         ]}
       />
     ),