progress

platform/app/src/App.tsx

@@ -24,7 +24,7 @@ import {
   UserAuthenticationProvider,
   ToolboxProvider,
 } from '@ohif/ui';
-import { ThemeWrapper as ThemeWrapperNext } from '@ohif/ui-next';
+import { ThemeWrapper as ThemeWrapperNext, OnboardingProvider } from '@ohif/ui-next';
 // Viewer Project
 // TODO: Should this influence study list?
 import { AppConfigProvider } from '@state';
@@ -99,6 +99,7 @@ function App({
     cineService,
     userAuthenticationService,
     customizationService,
+    onboardingService,
   } = servicesManager.services;
 
   const providers = [
@@ -115,6 +116,7 @@ function App({
     [SnackbarProvider, { service: uiNotificationService }],
     [DialogProvider, { service: uiDialogService }],
     [ModalProvider, { service: uiModalService, modal: Modal }],
+    [OnboardingProvider, { service: onboardingService }],
   ];
 
   // Loop through and register each of the service providers registered with the ServiceProvidersManager.

platform/app/src/appInit.js

@@ -21,6 +21,7 @@ import {
   PanelService,
   WorkflowStepsService,
   StudyPrefetcherService,
+  OnboardingService,
   // utils,
 } from '@ohif/core';
 
@@ -75,6 +76,7 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
     WorkflowStepsService.REGISTRATION,
     StateSyncService.REGISTRATION,
     [StudyPrefetcherService.REGISTRATION, appConfig.studyPrefetcher],
+    OnboardingService.REGISTRATION,
   ]);
 
   errorHandler.getHTTPErrorHandler = () => {

platform/core/src/index.ts

@@ -34,6 +34,7 @@ import {
   PanelService,
   WorkflowStepsService,
   StudyPrefetcherService,
+  OnboardingService,
 } from './services';
 
 import { DisplaySetMessage, DisplaySetMessageList } from './services/DisplaySetService';
@@ -87,6 +88,7 @@ const OHIF = {
   useToolbar,
   WorkflowStepsService,
   StudyPrefetcherService,
+  OnboardingService,
 };
 
 export {
@@ -133,6 +135,7 @@ export {
   PanelService,
   WorkflowStepsService,
   StudyPrefetcherService,
+  OnboardingService,
   useToolbar,
 };
 

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

@@ -0,0 +1,121 @@
+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'),
+  _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'),
+};
+
+class OnboardingService {
+  static REGISTRATION = {
+    name,
+    altName: 'OnboardingService',
+    create: (): OnboardingService => {
+      return new OnboardingService();
+    },
+  };
+
+  readonly name = name;
+
+  /**
+   * Show hints dynamically
+   */
+  showHints() {
+    return serviceImplementation._showHints();
+  }
+
+  /**
+   * Hide hints
+   */
+  hideHints() {
+    return serviceImplementation._hideHints();
+  }
+
+  /**
+   * Start the step tour dynamically
+   */
+  startSteps() {
+    return serviceImplementation._startSteps();
+  }
+
+  /**
+   * Exit the step tour
+   */
+  exitSteps() {
+    return serviceImplementation._exitSteps();
+  }
+
+  /**
+   * Move to the next step in the tour
+   */
+  nextStep() {
+    return serviceImplementation._nextStep();
+  }
+
+  /**
+   * Move to the previous step in the tour
+   */
+  previousStep() {
+    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,
+    nextStep: nextStepImplementation,
+    previousStep: previousStepImplementation,
+    setHints: setHintsImplementation,
+    setSteps: setStepsImplementation,
+  }) {
+    if (showHintsImplementation) {
+      serviceImplementation._showHints = showHintsImplementation;
+    }
+    if (hideHintsImplementation) {
+      serviceImplementation._hideHints = hideHintsImplementation;
+    }
+    if (startStepsImplementation) {
+      serviceImplementation._startSteps = startStepsImplementation;
+    }
+    if (exitStepsImplementation) {
+      serviceImplementation._exitSteps = exitStepsImplementation;
+    }
+    if (nextStepImplementation) {
+      serviceImplementation._nextStep = nextStepImplementation;
+    }
+    if (previousStepImplementation) {
+      serviceImplementation._previousStep = previousStepImplementation;
+    }
+    if (setHintsImplementation) {
+      serviceImplementation._setHints = setHintsImplementation;
+    }
+    if (setStepsImplementation) {
+      serviceImplementation._setSteps = setStepsImplementation;
+    }
+  }
+}
+
+export default OnboardingService;

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

@@ -0,0 +1,3 @@
+import OnboardingService from './OnboardingService';
+
+export default OnboardingService;

platform/core/src/services/index.ts

@@ -18,6 +18,7 @@ import StateSyncService from './StateSyncService';
 import PanelService from './PanelService';
 import WorkflowStepsService from './WorkflowStepsService';
 import StudyPrefetcherService from './StudyPrefetcherService';
+import OnboardingService from './OnboardingService';
 
 import type Services from '../types/Services';
 
@@ -44,4 +45,5 @@ export {
   PanelService,
   WorkflowStepsService,
   StudyPrefetcherService,
+  OnboardingService,
 };

platform/core/src/types/AppTypes.ts

@@ -15,6 +15,7 @@ import PanelServiceType from '../services/PanelService';
 import UIDialogServiceType from '../services/UIDialogService';
 import UIViewportDialogServiceType from '../services/UIViewportDialogService';
 import StudyPrefetcherServiceType from '../services/StudyPrefetcherService';
+import onboardingServiceType from '../services/OnboardingService';
 
 import ServicesManagerType from '../services/ServicesManager';
 import CommandsManagerType from '../classes/CommandsManager';
@@ -43,6 +44,7 @@ declare global {
     export type UIViewportDialogService = UIViewportDialogServiceType;
     export type PanelService = PanelServiceType;
     export type StudyPrefetcherService = StudyPrefetcherServiceType;
+    export type OnboardingService = onboardingServiceType;
 
     export interface Managers {
       servicesManager?: ServicesManager;
@@ -67,6 +69,7 @@ declare global {
       uiViewportDialogService?: UIViewportDialogServiceType;
       panelService?: PanelServiceType;
       studyPrefetcherService?: StudyPrefetcherServiceType;
+      onboardingService?: onboardingServiceType;
     }
     export interface Config {
       routerBasename?: string;

platform/core/src/types/Services.ts

@@ -14,6 +14,7 @@ import {
   PanelService,
   UIDialogService,
   UIViewportDialogService,
+  OnboardingService,
 } from '../services';
 
 /**
@@ -36,6 +37,7 @@ interface Services {
   uiDialogService?: UIDialogService;
   uiViewportDialogService?: UIViewportDialogService;
   panelService?: PanelService;
+  onboardingService?: OnboardingService;
 }
 
 export default Services;

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