updates

platform/app/package.json

@@ -98,6 +98,7 @@
     "react-resize-detector": "^10.0.1",
     "react-router": "^6.23.1",
     "react-router-dom": "^6.8.1",
+    "react-shepherd": "^6.1.1",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {

platform/app/public/config/default.js

@@ -291,4 +291,23 @@ window.config = {
       keys: ['9'],
     },
   ],
+
+  tours: [
+    {
+      route: '/viewer',
+      steps: [
+        {
+          id: 'example-step',
+          text: 'This step is attached to the bottom of the <code>.example-css-selector</code> element.',
+          attachTo: {
+            element: '[data-cy="WindowLevel"]',
+            on: 'bottom',
+          },
+          classes: 'example-step-extra-class',
+          buttons: [],
+        },
+      ],
+      tourOptions: {},
+    },
+  ],
 };

platform/core/package.json

@@ -54,6 +54,7 @@
     "moment": "*",
     "object-hash": "2.1.1",
     "query-string": "^6.14.0",
+    "react-shepherd": "^6.1.1",
     "validate.js": "^0.12.0"
   },
   "devDependencies": {

platform/core/src/services/OnboardingService/OnboardingService.ts

@@ -1,14 +1,11 @@
 const name = 'onboardingService';
 
 const serviceImplementation = {
-  _showHints: () => console.warn('showHints() NOT IMPLEMENTED'),
-  _hideHints: () => console.warn('hideHints() NOT IMPLEMENTED'),
-  _startSteps: () => console.warn('startSteps() NOT IMPLEMENTED'),
-  _exitSteps: () => console.warn('exitSteps() NOT IMPLEMENTED'),
+  _startTour: () => console.warn('startTour() NOT IMPLEMENTED'),
+  _exitTour: () => console.warn('exitTour() NOT IMPLEMENTED'),
   _nextStep: () => console.warn('nextStep() NOT IMPLEMENTED'),
   _previousStep: () => console.warn('previousStep() NOT IMPLEMENTED'),
-  _setHints: hints => console.warn('setHints() NOT IMPLEMENTED'),
-  _setSteps: steps => console.warn('setSteps() NOT IMPLEMENTED'),
+  _initializeTour: (steps, tourOptions) => console.warn('initializeTour() NOT IMPLEMENTED'),
 };
 
 class OnboardingService {
@@ -23,31 +20,24 @@ class OnboardingService {
   readonly name = name;
 
   /**
-   * Show hints dynamically
+   * Initialize the step tour
    */
-  showHints() {
-    return serviceImplementation._showHints();
+  initializeTour(steps, tourOptions = {}) {
+    return serviceImplementation._initializeTour(steps, tourOptions);
   }
 
   /**
-   * Hide hints
+   * Start the step tour
    */
-  hideHints() {
-    return serviceImplementation._hideHints();
-  }
-
-  /**
-   * Start the step tour dynamically
-   */
-  startSteps() {
-    return serviceImplementation._startSteps();
+  startTour() {
+    return serviceImplementation._startTour();
   }
 
   /**
    * Exit the step tour
    */
-  exitSteps() {
-    return serviceImplementation._exitSteps();
+  exitTour() {
+    return serviceImplementation._exitTour();
   }
 
   /**
@@ -64,44 +54,21 @@ class OnboardingService {
     return serviceImplementation._previousStep();
   }
 
-  /**
-   * Dynamically set the hints
-   */
-  setHints(hints) {
-    return serviceImplementation._setHints(hints);
-  }
-
-  /**
-   * Dynamically set the steps
-   */
-  setSteps(steps) {
-    return serviceImplementation._setSteps(steps);
-  }
-
-  /**
-   * Sets the service implementation for hints and steps
-   */
   setServiceImplementation({
-    showHints: showHintsImplementation,
-    hideHints: hideHintsImplementation,
-    startSteps: startStepsImplementation,
-    exitSteps: exitStepsImplementation,
+    initializeTour: initializeTourImplementation,
+    startTour: startStepsImplementation,
+    exitTour: exitStepsImplementation,
     nextStep: nextStepImplementation,
     previousStep: previousStepImplementation,
-    setHints: setHintsImplementation,
-    setSteps: setStepsImplementation,
   }) {
-    if (showHintsImplementation) {
-      serviceImplementation._showHints = showHintsImplementation;
-    }
-    if (hideHintsImplementation) {
-      serviceImplementation._hideHints = hideHintsImplementation;
+    if (initializeTourImplementation) {
+      serviceImplementation._initializeTour = initializeTourImplementation;
     }
     if (startStepsImplementation) {
-      serviceImplementation._startSteps = startStepsImplementation;
+      serviceImplementation._startTour = startStepsImplementation;
     }
     if (exitStepsImplementation) {
-      serviceImplementation._exitSteps = exitStepsImplementation;
+      serviceImplementation._exitTour = exitStepsImplementation;
     }
     if (nextStepImplementation) {
       serviceImplementation._nextStep = nextStepImplementation;
@@ -109,12 +76,6 @@ class OnboardingService {
     if (previousStepImplementation) {
       serviceImplementation._previousStep = previousStepImplementation;
     }
-    if (setHintsImplementation) {
-      serviceImplementation._setHints = setHintsImplementation;
-    }
-    if (setStepsImplementation) {
-      serviceImplementation._setSteps = setStepsImplementation;
-    }
   }
 }
 

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>
   );
 };