add-onboarding-tour
Add an Onboarding Tour
A zero-dependency, centralised kit for first-run onboarding in packages/frontend. Three reusable pieces do the heavy lifting; each feature only supplies its own steps, copy, anchors, and (optionally) example data.
Building blocks
| Piece | Path | Job |
|---|---|---|
useGuidedTour |
src/hooks/useGuidedTour.ts |
localStorage seen-flag, first-visit auto-open, replay. Returns { isOpen, startTour, closeTour }. |
GuidedTour |
src/components/common/GuidedTour |
Spotlight rendering. Dims the page, highlights a data-tour target, anchors a Next/Back/Skip card. target: null → centered card. |
useOnboardingMock |
src/hooks/useOnboardingMock.ts |
A react-query select that swaps real data for deterministic mock rows while a flag is on. |
Reference implementation: the Reviews page — src/ee/features/aiCopilot/components/Admin/settings/AiReviewsSettingsPage.tsx (wiring), AiAgentAdminReviewItemsTable.tsx (mock rows), and Admin/onboarding/ (the content). Read these first — copying them is the fastest path.
Where content lives
Kit = global, content = per-feature. The three building blocks above are shared. Everything specific to one feature — its steps, copy, sample rows, and any onboarding-only visuals — goes in a co-located onboarding/ folder next to the feature, with the same fixed layout every time: