Guided Tour

1"use client";
2 
3import * as React from "react";
4import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
5import {
6	Popover,
7	PopoverTrigger,
8	PopoverContent,
9} from "@/registry/optics/popover";
10import { cn } from "@/registry/optics/lib/utils";
11import { Button } from "@/registry/optics/button";
12import { X } from "lucide-react";
13 
14const GuidedTourContext = React.createContext({
15	activeTour: null,
16	setActiveTour: () => {},
17	currentStep: 0,
18	setCurrentStep: () => {},
19	steps: [],
20	setSteps: () => {},
21	totalSteps: 0,
22});
23 
24function GuidedTourProvider({ children = null, ...props }) {
25	const [activeTour, setActiveTour] = React.useState(null);
26	const [currentStep, setCurrentStep] = React.useState(0);
27	const [steps, setSteps] = React.useState([]);
28	const [totalSteps, setTotalSteps] = React.useState(0);
29 
30	const contextValue = React.useMemo(
31		() => ({
32			activeTour,
33			setActiveTour,
34			currentStep,
35			setCurrentStep,
36			steps,
37			setSteps,
38			totalSteps,
39			setTotalSteps,
40		}),
41		[activeTour, currentStep, steps, totalSteps],
42	);
43 
44	return (
45		<GuidedTourContext.Provider value={contextValue} {...props}>
46			{children}
47		</GuidedTourContext.Provider>
48	);
49}
50 
51function useGuidedTour() {
52	const context = React.useContext(GuidedTourContext);
53	if (!context) {
54		throw new Error("useGuidedTour must be used within GuidedTourProvider");
55	}
56	return context;
57}
58 
59const GuidedTourOverlay = React.forwardRef(({ className, ...props }, ref) => {
60	const { activeTour } = useGuidedTour();
61 
62	if (!activeTour) return null;
63 
64	return (
65		<div
66			ref={ref}
67			className={cn(
68				"fixed inset-0 z-[100] bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
69				className,
70			)}
71			{...props}
72		/>
73	);
74});
75GuidedTourOverlay.displayName = "GuidedTourOverlay";
76 
77function GuidedTour({ children = null, ...props }) {
78	return (
79		<div data-slot="guided-tour" {...props}>
80			{children}
81		</div>
82	);
83}
84 
85function GuidedTourTrigger({
86	tourId = "",
87	children = null,
88	className = "",
89	render = null,
90	...props
91}) {
92	const { onClick, ...restProps } = props;
93	const { setActiveTour, setCurrentStep, setTotalSteps } = useGuidedTour();
94 
95	const handleClick = (event) => {
96		if (onClick) {
97			onClick(event);
98		}
99 
100		if (event?.defaultPrevented) return;
101 
102		const tourSteps = document.querySelectorAll(
103			`[data-tour="${tourId}"][data-step]`,
104		);
105		const sortedSteps = Array.from(tourSteps).sort((a, b) => {
106// … truncated