progress

platform/ui-next/package.json

@@ -47,6 +47,8 @@
     "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",
@@ -56,6 +58,9 @@
     "tailwindcss": "3.2.4",
     "tailwindcss-animate": "^1.0.7"
   },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7"
+  },
   "keywords": [],
   "author": "OHIF",
   "license": "MIT"

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

@@ -0,0 +1,84 @@
+import React, { useState, createContext, useContext, useEffect, useCallback } from 'react';
+import { Hints, Steps } from 'intro.js-react';
+import 'intro.js/introjs.css';
+
+const OnboardingProviderContext = createContext(null);
+const { Provider } = OnboardingProviderContext;
+
+export const useOnboardingProvider = () => useContext(OnboardingProviderContext);
+
+const OnboardingProvider = ({
+  children,
+  service = null,
+}: {
+  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>
+  );
+};
+
+export default OnboardingProvider;

platform/ui-next/src/contextProviders/index.ts

@@ -1,3 +1,5 @@
 import NotificationProvider, { useNotification } from './NotificationProvider';
+import OnboardingProvider, { useOnboardingProvider } from './OnboardingProvider';
 
 export { useNotification, NotificationProvider };
+export { useOnboardingProvider, OnboardingProvider };

platform/ui-next/src/index.ts

@@ -35,7 +35,12 @@ import {
   ToolboxUI,
 } from './components';
 
-import { useNotification, NotificationProvider } from './contextProviders';
+import {
+  useNotification,
+  NotificationProvider,
+  OnboardingProvider,
+  useOnboardingProvider,
+} from './contextProviders';
 
 export {
   // components
@@ -76,4 +81,6 @@ export {
   DisplaySetMessageListTooltip,
   Toolbox,
   ToolboxUI,
+  OnboardingProvider,
+  useOnboardingProvider,
 };