@campxdev/react-blueprint 0.1.56 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "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/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/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>
-  );
-};