@campxdev/react-blueprint 0.1.42 → 0.1.43

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
+    "@campxdev/campx-web-utils": "^0.1.3",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.20",
@@ -11,9 +12,6 @@
     "@mui/x-data-grid": "^7.5.1",
     "@storybook/addon-backgrounds": "^8.1.5",
     "@storybook/addon-designs": "^8.0.2",
-    "axios": "^1.7.2",
-    "framer-motion": "^11.2.9",
-    "js-cookie": "^3.0.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -22,11 +20,15 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
+    "axios": "^1.7.2",
+    "framer-motion": "^11.2.9",
+    "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "pullstate": "^1.24.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^3.1.4",
+    "react-joyride": "^2.8.2",
     "react-router-dom": "^6.24.0",
     "react-scripts": "^5.0.1",
     "storybook-dark-mode": "^4.0.1",

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

@@ -0,0 +1,68 @@
+export const ToursIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="118"
+      height="118"
+      viewBox="0 0 118 118"
+    >
+      <defs>
+        <filter
+          id="Rectangle_24558"
+          x="0"
+          y="0"
+          width="118"
+          height="118"
+          filterUnits="userSpaceOnUse"
+        >
+          <feOffset dx="6" dy="6" />
+          <feGaussianBlur stdDeviation="8" result="blur" />
+          <feFlood flood-opacity="0.059" />
+          <feComposite operator="in" in2="blur" />
+          <feComposite in="SourceGraphic" />
+        </filter>
+      </defs>
+      <g
+        id="Group_9777"
+        data-name="Group 9777"
+        transform="translate(-1822 -982)"
+      >
+        <g
+          id="Group_9776"
+          data-name="Group 9776"
+          transform="translate(1840 1000)"
+        >
+          <g
+            transform="matrix(1, 0, 0, 1, -18, -18)"
+            filter="url(#Rectangle_24558)"
+          >
+            <rect
+              id="Rectangle_24558-2"
+              data-name="Rectangle 24558"
+              width="70"
+              height="70"
+              rx="35"
+              transform="translate(18 18)"
+              fill="#fff"
+            />
+          </g>
+          <rect
+            id="Rectangle_24559"
+            data-name="Rectangle 24559"
+            width="54"
+            height="54"
+            rx="27"
+            transform="translate(8 8)"
+            fill="#d0d0e3"
+          />
+        </g>
+        <path
+          id="sun"
+          d="M4.914,11.712a.971.971,0,0,0-.971-.971H2.971a.971.971,0,0,0,0,1.942h.971A.971.971,0,0,0,4.914,11.712Zm.622,4.856-.69.69a.968.968,0,0,0,1.369,1.369l.69-.69a.971.971,0,0,0-1.369-1.369ZM11.712,4.914a.971.971,0,0,0,.971-.971V2.971a.971.971,0,0,0-1.942,0v.971A.971.971,0,0,0,11.712,4.914Zm5.5,2.273a.971.971,0,0,0,.68-.282l.69-.69a.971.971,0,1,0-1.369-1.369l-.641.69a.967.967,0,0,0,.641,1.651ZM5.555,6.9A.968.968,0,0,0,6.924,5.535l-.69-.69A.975.975,0,0,0,4.846,6.215Zm14.9,3.836h-.971a.971.971,0,0,0,0,1.942h.971a.971.971,0,0,0,0-1.942Zm-2.564,5.827a.971.971,0,0,0-1.321,1.321l.69.69a.968.968,0,1,0,1.369-1.369ZM11.712,6.37a5.342,5.342,0,1,0,5.342,5.342A5.342,5.342,0,0,0,11.712,6.37Zm0,8.741a3.4,3.4,0,1,1,3.4-3.4,3.4,3.4,0,0,1-3.4,3.4Zm0,3.4a.971.971,0,0,0-.971.971v.971a.971.971,0,0,0,1.942,0v-.971A.971.971,0,0,0,11.712,18.51Z"
+          transform="translate(1863.288 1023.288)"
+          fill="#323167"
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -33,6 +33,7 @@ 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 { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
 import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
 import { Union4Icon } from "./IconComponents/Union4Icon";
@@ -78,4 +79,5 @@ export const Icons = {
   ExamxIcon,
   Union4Icon,
   XIcon,
+  ToursIcon,
 };

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

@@ -0,0 +1,113 @@
+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 { Typography } from "../../DataDisplay/Typography/Typography";
+
+export interface TutorialProps {
+  steps: Step[];
+  children?: ReactNode;
+  tourName: string;
+  iconPosition?: "left" | "right";
+}
+
+export const Tutorial = ({
+  steps,
+  children,
+  tourName,
+  iconPosition = "right",
+}: TutorialProps) => {
+  const [run, setRun] = useState(false);
+  const userTours = localStorage.getItem("userTours") || "[]";
+
+  const startTour = useCallback(() => {
+    setRun(true);
+  }, []);
+
+  useEffect(() => {
+    if (userTours && !userTours.includes(tourName)) {
+      startTour();
+    }
+  }, [userTours, tourName, startTour]);
+
+  const handleJoyrideCallback = (data: CallBackProps) => {
+    const { action, status } = data;
+
+    if (action === ACTIONS.RESET) {
+      setRun(false);
+      completeTour().catch((err) => {
+        console.error("Failed to mark tour as complete:", err);
+      });
+    }
+  };
+
+  const completeTour = async () => {
+    try {
+      if (!userTours.includes(tourName)) {
+        localStorage.setItem(
+          "userTours",
+          JSON.stringify([...JSON.parse(userTours), tourName])
+        );
+      }
+      await axios.post("/square/tours/complete", { tourName });
+    } catch (error) {
+      console.error("Error completing the tour:", error);
+    }
+  };
+
+  return (
+    <div style={{ textAlign: iconPosition }}>
+      <Tooltip
+        title={<Typography variant="body1">Start Tour</Typography>}
+        placement="left"
+      >
+        <IconButton
+          onClick={startTour}
+          style={{ cursor: "pointer" }}
+          aria-label={`Start ${tourName} tour`}
+        >
+          <ToursIcon />
+        </IconButton>
+      </Tooltip>
+
+      <ReactJoyride
+        callback={handleJoyrideCallback}
+        steps={steps}
+        continuous={true}
+        run={run}
+        showSkipButton={true}
+        locale={{
+          last: "Finish",
+          next: "Next",
+          skip: "Skip",
+          back: "Previous",
+        }}
+        styles={{
+          buttonNext: {
+            backgroundColor: "#D27D2D",
+            color: "white",
+            height: "28px",
+            width: "100px",
+            padding: "0px",
+            fontFamily: "Roboto, sans-serif",
+          },
+          buttonBack: {
+            backgroundColor: "transparent",
+            color: "black",
+            borderRadius: "4px",
+            height: "28px",
+            width: "100px",
+            gap: "10px",
+            marginLeft: "5px",
+            padding: "0px",
+            border: "1px solid black",
+            fontFamily: "Roboto, sans-serif",
+          },
+        }}
+      />
+      {children}
+    </div>
+  );
+};

package/src/components/Feedback/exports.ts

@@ -1,2 +1,3 @@
 export * from "./Spinner/Spinner";
 export * from "./Tooltip/Tooltip";
+export * from "./Tutorial/Tutorial";

package/src/stories/Feedback/Tutorial.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Tutorial } from "../../components/Feedback/Tutorial/Tutorial";
+
+export default {
+  title: "Feedback/Tutorial",
+  component: Tutorial,
+  parameters: {
+    controls: {
+      exclude: ["children"],
+    },
+  },
+  argTypes: {
+    iconPosition: {
+      control: { type: "radio" },
+      options: ["left", "right"],
+      defaultValue: "right",
+    },
+    tourName: { control: "text" },
+    steps: { control: "object" },
+  },
+} as Meta<typeof Tutorial>;
+
+export const PrimaryTutorial: StoryObj<typeof Tutorial> = {
+  render: (args) => (
+    <div>
+      {/* Placeholder elements for the tutorial */}
+      <div
+        className="tutorial-target"
+        style={{ margin: "20px", border: "2px solid blue", padding: "10px" }}
+      >
+        Target 1: This element is the first target of the tutorial.
+      </div>
+      <div
+        className="next-target"
+        style={{ margin: "20px", border: "2px solid green", padding: "10px" }}
+      >
+        Target 2: This element is the next target of the tutorial.
+      </div>
+
+      <Tutorial {...args} />
+    </div>
+  ),
+  args: {
+    tourName: "Active Batches",
+    steps: [
+      {
+        target: ".tutorial-target",
+        content: "This is my first step",
+      },
+      {
+        target: ".next-target",
+        content: "This is the next step",
+      },
+    ],
+  },
+};

package/src/themes/commonTheme.ts

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