Guided App Tour

[lemonpole]

• Use menu select sound from CS:CZ (if legal or possible)
• Only on first run.

---

• https://github.com/shepherd-pro/shepherd/tree/main/packages/react
• https://github.com/shepherd-pro/shepherd/blob/main/packages/react/src/index.tsx
• https://github.com/gilbarbara/react-joyride

[lemonpole]

/**
 * React wrapper for the Shepherd tour library.
 *
 * Exposes the tour object and methods to the context object
 * that can be passed into props for dynamic interactivity.
 *
 * @module
 */
import React from 'react';
import Shepherd from 'shepherd.js';

/** @constant */
const TourContext = React.createContext<{ Shepherd: typeof Shepherd }>(undefined);

/** @function */
export function useTour() {
  const context = React.useContext(TourContext);

  if (!context) {
    throw new Error('useTour must be used within a TourProvider');
  }

  return context.Shepherd;
}

/**
 * @param props           Root props.
 * @param props.children  The children to render.
 * @function
 */
export function TourProvider({ children }: { children?: React.ReactNode }) {
  return <TourContext.Provider value={{ Shepherd }}>{children}</TourContext.Provider>;
}