updates

platform/ui-next/package.json

@@ -47,12 +47,11 @@
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
     "framer-motion": "6.2.4",
-    "intro.js": "^7.2.0",
-    "intro.js-react": "^1.0.0",
     "lucide-react": "^0.379.0",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
+    "react-shepherd": "^6.1.1",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "3.2.4",

platform/ui-next/src/contextProviders/OnboardingProvider.tsx

@@ -1,12 +1,66 @@
 import React, { useState, createContext, useContext, useEffect, useCallback } from 'react';
-import { Hints, Steps } from 'intro.js-react';
-import 'intro.js/introjs.css';
+import { ShepherdJourneyProvider, useShepherd } from 'react-shepherd';
+import 'shepherd.js/dist/css/shepherd.css';
 
 const OnboardingProviderContext = createContext(null);
 const { Provider } = OnboardingProviderContext;
 
 export const useOnboardingProvider = () => useContext(OnboardingProviderContext);
 
+const ShepherdController = ({ service }: { service: any }) => {
+  const Shepherd = useShepherd();
+  const [tour, setTour] = useState(null);
+
+  const initializeTour = useCallback(
+    (steps, tourOptions = {}) => {
+      const newTour = new Shepherd.Tour({
+        steps,
+        ...tourOptions,
+      });
+      setTour(newTour);
+    },
+    [Shepherd]
+  );
+
+  const startTour = useCallback(() => {
+    if (tour) {
+      tour.start();
+    }
+  }, [tour]);
+
+  const exitTour = useCallback(() => {
+    if (tour) {
+      tour.cancel();
+    }
+  }, [tour]);
+
+  const nextStep = useCallback(() => {
+    if (tour) {
+      tour.next();
+    }
+  }, [tour]);
+
+  const previousStep = useCallback(() => {
+    if (tour) {
+      tour.back();
+    }
+  }, [tour]);
+
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({
+        startTour,
+        exitTour,
+        nextStep,
+        previousStep,
+        initializeTour,
+      });
+    }
+  }, [service, startTour, exitTour, nextStep, previousStep, initializeTour]);
+
+  return null;
+};
+
 const OnboardingProvider = ({
   children,
   service = null,
@@ -14,70 +68,13 @@ const OnboardingProvider = ({
   children: React.ReactNode;
   service: any;
 }) => {
-  const [hintsEnabled, setHintsEnabled] = useState(false);
-  const [stepsEnabled, setStepsEnabled] = useState(false);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [steps, setSteps] = useState([]);
-  const [hints, setHints] = useState([]);
-
-  const showHints = useCallback(() => setHintsEnabled(true), []);
-  const hideHints = useCallback(() => setHintsEnabled(false), []);
-  const startSteps = useCallback(() => setStepsEnabled(true), []);
-  const exitSteps = useCallback(() => setStepsEnabled(false), []);
-  const nextStep = useCallback(() => setCurrentStep(prev => prev + 1), []);
-  const previousStep = useCallback(() => setCurrentStep(prev => prev - 1), []);
-
-  // Set the service implementation
-  useEffect(() => {
-    if (service) {
-      service.setServiceImplementation({
-        showHints,
-        hideHints,
-        startSteps,
-        exitSteps,
-        nextStep,
-        previousStep,
-        setHints,
-        setSteps,
-      });
-    }
-  }, [
-    service,
-    showHints,
-    hideHints,
-    startSteps,
-    exitSteps,
-    nextStep,
-    previousStep,
-    setHints,
-    setSteps,
-  ]);
-
   return (
-    <Provider
-      value={{
-        showHints,
-        hideHints,
-        startSteps,
-        exitSteps,
-        nextStep,
-        previousStep,
-        setHints,
-        setSteps,
-      }}
-    >
-      <Hints
-        enabled={hintsEnabled}
-        hints={hints}
-      />
-      <Steps
-        enabled={stepsEnabled}
-        steps={steps}
-        initialStep={currentStep}
-        onExit={exitSteps}
-      />
-      {children}
-    </Provider>
+    <ShepherdJourneyProvider>
+      <Provider value={{}}>
+        <ShepherdController service={service} />
+        {children}
+      </Provider>
+    </ShepherdJourneyProvider>
   );
 };