@campxdev/react-blueprint 0.1.56 → 1.0.0

package/package.json

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

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

@@ -35,7 +35,6 @@ import { ProductFeaturesIcon } from "./IconComponents/ProductFeaturesIcon";
 import { ProfileIcon } from "./IconComponents/ProfileIcon";
 import { RightIcon } from "./IconComponents/RightIcon";
 import { TicketsIcon } from "./IconComponents/TicketsIcon";
-import { ToursIcon } from "./IconComponents/ToursIcon";
 import { UmsIcon } from "./IconComponents/UmsIcon";
 import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
 import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
@@ -56,7 +55,6 @@ export const Icons = {
   FilterIcon,
   ExportIcon,
   ProfileIcon,
-  ToursIcon,
   InstitutionsIcon,
   ActiveDevicesIcon,
   NavigationIcon,

package/src/components/Feedback/Tooltip/Tooltip.tsx

@@ -32,7 +32,7 @@ export const Tooltip = ({
 
 export const ToolTipContent = ({ message }: TooltipContentProps) => {
   return (
-    <Stack gap={1}>
+    <Stack gap={1} sx={{ margin: "5px" }}>
       <Stack direction="row" gap={1}>
         <BulbIcon />
         <Typography variant="subtitle3">Note:</Typography>

package/src/components/Feedback/Tutorial/Tutorial.tsx

@@ -1,9 +1,7 @@
 import { axios } from "@campxdev/campx-web-utils";
-import { IconButton } from "@mui/material";
-import { ReactNode, useEffect, useState, useCallback } from "react";
-import ReactJoyride, { Step, CallBackProps, ACTIONS } from "react-joyride";
-import { ToursIcon } from "../../Assets/Icons/IconComponents/ToursIcon";
-import { Tooltip } from "../Tooltip/Tooltip";
+import { Box, useTheme } from "@mui/material";
+import { ReactNode, useCallback, useEffect, useState } from "react";
+import ReactJoyride, { ACTIONS, CallBackProps, Step } from "react-joyride";
 import { Typography } from "../../DataDisplay/Typography/Typography";
 
 export interface TutorialProps {
@@ -21,16 +19,17 @@ export const Tutorial = ({
 }: TutorialProps) => {
   const [run, setRun] = useState(false);
   const userTours = localStorage.getItem("userTours") || "[]";
+  const theme = useTheme();
 
   const startTour = useCallback(() => {
     setRun(true);
   }, []);
 
-  // useEffect(() => {
-  //   if (userTours && !userTours.includes(tourName)) {
-  //     startTour();
-  //   }
-  // }, [userTours, tourName, startTour]);
+  useEffect(() => {
+    if (userTours && !userTours.includes(tourName)) {
+      startTour();
+    }
+  }, [userTours, tourName, startTour]);
 
   const handleJoyrideCallback = (data: CallBackProps) => {
     console.log(data);
@@ -75,19 +74,22 @@ export const Tutorial = ({
   };
 
   return (
-    <div style={{ textAlign: iconPosition }}>
-      <Tooltip
-        title={<Typography variant="body1">Start Tour</Typography>}
-        placement="left"
+    <div style={{ display: "flex", justifyContent: "flex-end" }}>
+      <Box
+        sx={{
+          background: theme.palette.surface.grey,
+          padding: "20px 8px",
+          borderRadius: "12px 0px 0px 12px",
+          cursor: "pointer",
+          width: "40px",
+          textAlign: "center",
+        }}
+        onClick={startTour}
       >
-        <IconButton
-          onClick={startTour}
-          style={{ cursor: "pointer" }}
-          aria-label={`Start ${tourName} tour`}
-        >
-          <ToursIcon />
-        </IconButton>
-      </Tooltip>
+        <Box sx={{ transform: "rotate(-90deg)", marginTop: "10px" }}>
+          <Typography variant="subtitle2">Tour</Typography>
+        </Box>
+      </Box>
 
       <ReactJoyride
         callback={handleJoyrideCallback}

package/src/components/Navigation/Sidebar/Sidebar.tsx

@@ -5,7 +5,7 @@ import { CampxIcon } from "../../Assets/Icons/IconComponents/CampxIcon";
 import { LeftIcon } from "../../Assets/Icons/IconComponents/LeftIcon";
 import { RightIcon } from "../../Assets/Icons/IconComponents/RightIcon";
 import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Icons } from "../../export";
+import { Icons, Tooltip } from "../../export";
 import { createSidebarStyles } from "./styles";
 
 export interface MenuItemProps {
@@ -63,12 +63,33 @@ export const Sidebar = ({
             setCollapsed(false);
           }}
         >
-          <StyledListItemButton collapsed={collapsed}>
-            <StyledListItemIcon collapsed={collapsed}>
-              {Icon ? Icon : <Icons.HomeIcon />}
-            </StyledListItemIcon>
-            {!collapsed && <Typography variant="subtitle2">{name}</Typography>}
-          </StyledListItemButton>
+          {!collapsed && (
+            <StyledListItemButton collapsed={collapsed}>
+              <StyledListItemIcon collapsed={collapsed}>
+                {Icon ? Icon : <Icons.HomeIcon />}
+              </StyledListItemIcon>
+              <Typography variant="subtitle2">{name}</Typography>
+            </StyledListItemButton>
+          )}
+          {collapsed && (
+            <StyledListItemButton collapsed={collapsed}>
+              <StyledListItemIcon collapsed={collapsed}>
+                {Icon ? (
+                  <Tooltip
+                    title={<Typography variant="label2">{name}</Typography>}
+                  >
+                    {Icon}
+                  </Tooltip>
+                ) : (
+                  <Tooltip
+                    title={<Typography variant="label2">{name}</Typography>}
+                  >
+                    <Icons.HomeIcon />
+                  </Tooltip>
+                )}
+              </StyledListItemIcon>
+            </StyledListItemButton>
+          )}
         </StyledLinkButton>
       </StyledListItem>
     );

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

@@ -35,8 +35,43 @@ export const Primary: Story = {
   render: (args) => <Sidebar {...args} />,
   args: {
     menu: [
-      { name: "Home", path: "/home", icon: <Icons.DashBoardIcon size={24} /> },
-      { name: "Self Service Portal", path: "/item2" },
+      { name: "Admin", path: "/admin", icon: <Icons.AdminIcon size={20} /> },
+      { name: "UMS", path: "/ums", icon: <Icons.UmsIcon size={20} /> },
+      {
+        name: "Payments",
+        path: "/payments",
+        icon: <Icons.PayxIcon size={20} />,
+      },
+      { name: "Exams", path: "/exams", icon: <Icons.ExamxIcon size={20} /> },
+      { name: "HRMS", path: "/hrms", icon: <Icons.PeoplexIcon size={20} /> },
+      {
+        name: "Enroll",
+        path: "/enroll",
+        icon: <Icons.EnrollxIcon size={20} />,
+      },
+      {
+        name: "Commute",
+        path: "/commute",
+        icon: <Icons.CommutexIcon size={20} />,
+      },
+      {
+        name: "Hostels",
+        path: "/hostels",
+        icon: <Icons.HostelxIcon size={20} />,
+      },
+      {
+        name: "Evaluator",
+        path: "/evaluator",
+      },
     ],
   },
 };
+
+// Collapsed story
+export const Collapsed: Story = {
+  render: (args) => <Sidebar {...args} />,
+  args: {
+    ...Primary.args,
+    collapsed: true,
+  },
+};

package/src/themes/commonTheme.ts

@@ -187,7 +187,6 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           tooltip: {
             backgroundColor: ColorTokens.surface.paperBackground,
-            padding: "20px 20px",
             boxShadow: `0px 2px 5px ${ColorTokens.secondary.main}`,
             border: `1px solid ${ColorTokens.secondary.main}`,
           },

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

@@ -1,50 +0,0 @@
-export const ToursIcon = ({ size = 16 }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 70 70"
-    >
-      <g
-        id="Group_9777"
-        data-name="Group 9777"
-        transform="translate(-1840 -1000)"
-      >
-        <g
-          id="Group_9776"
-          data-name="Group 9776"
-          transform="translate(1840 1000)"
-        >
-          <rect
-            id="Rectangle_24558"
-            data-name="Rectangle 24558"
-            width="70"
-            height="70"
-            rx="35"
-            fill="#f0f0f5"
-          />
-          <rect
-            id="Rectangle_24559"
-            data-name="Rectangle 24559"
-            width="54"
-            height="54"
-            rx="27"
-            transform="translate(8 8)"
-            fill="#d0d0e3"
-          />
-        </g>
-        <path
-          id="bulb"
-          d="M27.892,25.169c0-4.19,1.985-5.292,1.985-5.292a6.893,6.893,0,0,0,.139-9.841,7.056,7.056,0,0,0-9.978,0,6.891,6.891,0,0,0,.137,9.841s1.985,1.1,1.985,5.292Zm-1.544,5.292H23.7m3.528-2.646H22.82M24.8,4V5.323M14,14.8h1.323m19.4,0h.882M17.164,22.445l.935-.935M31.821,7.788l.624-.624m-15.281,0L18.1,8.1M31.821,21.821l.624.624"
-          transform="translate(1850.195 1017.771)"
-          fill="none"
-          stroke="#323167"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.8"
-        />
-      </g>
-    </svg>
-  );
-};