updates

platform/ui-next/src/components/Onboarding/Onboarding.css

@@ -0,0 +1,23 @@
+.shepherd-element {
+  @apply !bg-primary-dark !rounded-lg !p-2;
+}
+
+.shepherd-text {
+  @apply text-[11px] !text-white;
+}
+
+.shepherd-footer {
+  @apply !bg-primary-dark !rounded-b-lg;
+}
+
+.shepherd-button {
+  @apply !bg-primary-main hover:!bg-customblue-80 active:!bg-customblue-40 !box-content !inline-flex !h-[15px] !min-w-[60px] !flex-row !items-center !justify-center !gap-[5px] !whitespace-nowrap !rounded !px-[10px] !text-center !font-sans !text-[11px] !font-semibold !leading-[1.2] !text-white !outline-none !transition !duration-300 !ease-in-out focus:!outline-none;
+}
+
+.shepherd-arrow::before {
+  @apply !bg-primary-dark;
+}
+
+.shepherd-element[data-popper-placement^='left'] > .shepherd-arrow {
+  right: -5px !important;
+}

platform/ui-next/src/components/Onboarding/Onboarding.tsx

@@ -0,0 +1,65 @@
+import { useEffect } from 'react';
+import { useShepherd } from 'react-shepherd';
+import { StepOptions, TourOptions } from 'shepherd.js';
+import { useLocation } from 'react-router';
+import 'shepherd.js/dist/css/shepherd.css';
+import './Onboarding.css';
+
+const hasTourBeenShown = (tourId: string) => {
+  const shownTours = JSON.parse(localStorage.getItem('shownTours')) || [];
+  return shownTours.includes(tourId);
+};
+const markTourAsShown = (tourId: string) => {
+  const shownTours = JSON.parse(localStorage.getItem('shownTours')) || [];
+  if (!shownTours.includes(tourId)) {
+    shownTours.push(tourId);
+    localStorage.setItem('shownTours', JSON.stringify(shownTours));
+  }
+};
+
+const Onboarding = () => {
+  const Shepherd = useShepherd();
+  const location = useLocation();
+  const tours = window.config.tours as Array<{
+    id: string;
+    route: string;
+    tourOptions: TourOptions;
+    steps: StepOptions[];
+  }>;
+  useEffect(() => {
+    if (!tours) {
+      return null;
+    }
+
+    const pathname = location.pathname;
+    const matchingTour = tours.find(tour => tour.route === pathname);
+
+    if (matchingTour) {
+      const startTour = () => {
+        const tourInstance = new Shepherd.Tour(matchingTour.tourOptions);
+        matchingTour.steps.forEach(step => tourInstance.addStep(step));
+
+        const observer = new MutationObserver(() => {
+          const firstStepElement = document.querySelector(
+            matchingTour.steps[0].attachTo.element as string
+          );
+          if (firstStepElement) {
+            observer.disconnect();
+            tourInstance.start();
+            markTourAsShown(matchingTour.id);
+          }
+        });
+
+        if (!hasTourBeenShown(matchingTour.id)) {
+          observer.observe(document.body, { childList: true, subtree: true });
+          setTimeout(() => observer.disconnect(), 5000);
+        }
+      };
+
+      startTour();
+    }
+  }, [Shepherd, tours, location.pathname]);
+  return null;
+};
+
+export { Onboarding };

platform/ui-next/src/components/Onboarding/index.ts

@@ -0,0 +1,3 @@
+import { Onboarding } from './Onboarding';
+
+export { Onboarding };

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

@@ -28,6 +28,7 @@ import ThumbnailList from './ThumbnailList';
 import PanelSection from './PanelSection';
 import DisplaySetMessageListTooltip from './DisplaySetMessageListTooltip';
 import { Toolbox, ToolboxUI } from './Toolbox';
+import { Onboarding } from './Onboarding';
 
 export {
   Button,
@@ -71,4 +72,5 @@ export {
   DisplaySetMessageListTooltip,
   Toolbox,
   ToolboxUI,
+  Onboarding,
 };

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

@@ -1,41 +0,0 @@
-import React, { createContext, useContext } from 'react';
-import { ShepherdJourneyProvider, useShepherd } from 'react-shepherd';
-import { StepOptions, TourOptions } from 'shepherd.js';
-import 'shepherd.js/dist/css/shepherd.css';
-
-const OnboardingProviderContext = createContext(null);
-const { Provider } = OnboardingProviderContext;
-
-export const useOnboardingProvider = () => useContext(OnboardingProviderContext);
-
-const ShepherdController = ({
-  tours,
-}: {
-  tours: Array<{
-    tourOptions: TourOptions;
-    steps: StepOptions[];
-    route: string;
-    id: string;
-  }>;
-}) => {
-  const Shepherd = useShepherd();
-
-  return null;
-};
-
-const OnboardingProvider = ({ children }: { children: React.ReactNode }) => {
-  const tours = window?.config?.tours;
-  if (!tours) {
-    return <>{children}</>;
-  }
-  return (
-    <ShepherdJourneyProvider>
-      <Provider value={{}}>
-        <ShepherdController tours={tours} />
-        {children}
-      </Provider>
-    </ShepherdJourneyProvider>
-  );
-};
-
-export default OnboardingProvider;

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

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

platform/ui-next/src/index.ts

@@ -33,14 +33,10 @@ import {
   DisplaySetMessageListTooltip,
   Toolbox,
   ToolboxUI,
+  Onboarding,
 } from './components';
 
-import {
-  useNotification,
-  NotificationProvider,
-  OnboardingProvider,
-  useOnboardingProvider,
-} from './contextProviders';
+import { useNotification, NotificationProvider } from './contextProviders';
 
 export {
   // components
@@ -81,6 +77,5 @@ export {
   DisplaySetMessageListTooltip,
   Toolbox,
   ToolboxUI,
-  OnboardingProvider,
-  useOnboardingProvider,
+  Onboarding,
 };