Skip to content

Commit 06ad02b

Browse files
cschroetercschroeter
committed
wip
1 parent a6369f4 commit 06ad02b

File tree

5 files changed

+172
-160
lines changed

5 files changed

+172
-160
lines changed

‎packages/react/src/components/tour/API.mdx

-29
This file was deleted.

‎packages/react/src/components/tour/examples/basic.tsx

+5-131
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,11 @@
1-
import { Tour, useTour } from '@ark-ui/react/tour'
2-
import type { StepDetails } from '@zag-js/tour'
3-
import { XIcon } from 'lucide-react'
4-
import { useEffect } from 'react'
5-
import { Frame } from '../../frame'
6-
7-
export const DemoTour = () => {
8-
const tour = useTour({ steps: tourData })
9-
10-
// Start the tour when the component mounts
11-
useEffect(() => {
12-
tour.start()
13-
}, [tour])
14-
15-
return (
16-
<Tour.Root tour={tour}>
17-
<Tour.Backdrop />
18-
<Tour.Spotlight />
19-
<Tour.Positioner>
20-
<Tour.Content>
21-
<Tour.Arrow>
22-
<Tour.ArrowTip />
23-
</Tour.Arrow>
24-
<Tour.Title />
25-
<Tour.Description />
26-
<Tour.ProgressText />
27-
<Tour.CloseTrigger>
28-
<XIcon />
29-
</Tour.CloseTrigger>
30-
<Tour.Actions>
31-
{(actions) =>
32-
actions.map((action) => <Tour.ActionTrigger key={action.label} action={action} />)
33-
}
34-
</Tour.Actions>
35-
</Tour.Content>
36-
</Tour.Positioner>
37-
</Tour.Root>
38-
)
39-
}
1+
import { Frame } from '@ark-ui/react/frame'
2+
import { DemoTour } from './tour'
403

414
export const Basic = () => {
425
return (
43-
<main className="tour">
44-
<div>
6+
<main>
7+
<DemoTour />
8+
<div className="tour">
459
<div className="steps__container">
4610
<h3 id="step-1">Step 1</h3>
4711
<div className="overflow__container">
@@ -59,97 +23,7 @@ export const Basic = () => {
5923
<h3 id="step-3">Step 3</h3>
6024
<h3 id="step-4">Step 4</h3>
6125
</div>
62-
<DemoTour />
6326
</div>
6427
</main>
6528
)
6629
}
67-
68-
export const tourData: StepDetails[] = [
69-
{
70-
type: 'dialog',
71-
id: 'step-0',
72-
title: 'Centered tour (no target)',
73-
description: 'This is the center of the world. Ready to start the tour?',
74-
actions: [{ label: 'Next', action: 'next' }],
75-
},
76-
{
77-
type: 'tooltip',
78-
id: 'step-1',
79-
title: 'Step 1. Welcome',
80-
description: 'To the new world',
81-
target: () => document.querySelector<HTMLElement>('#step-1'),
82-
actions: [
83-
{ label: 'Prev', action: 'prev' },
84-
{ label: 'Next', action: 'next' },
85-
],
86-
effect({ show, update }) {
87-
const abort = new AbortController()
88-
89-
fetch('https://api.github.com/users/octocat', { signal: abort.signal })
90-
.then((res) => res.json())
91-
.then((data) => {
92-
update({ title: data.name })
93-
show()
94-
})
95-
96-
return () => {
97-
abort.abort()
98-
}
99-
},
100-
},
101-
{
102-
type: 'tooltip',
103-
id: 'step-2',
104-
title: 'Step 2. Inside a scrollable container',
105-
description: 'Using scrollIntoView(...) rocks!',
106-
target: () => document.querySelector<HTMLElement>('#step-2'),
107-
actions: [
108-
{ label: 'Prev', action: 'prev' },
109-
{ label: 'Next', action: 'next' },
110-
],
111-
},
112-
{
113-
type: 'tooltip',
114-
id: 'step-2a',
115-
title: 'Step 2a. Inside an Iframe container',
116-
description: 'It calculates the offset rect correctly. Thanks to floating UI!',
117-
target: () => {
118-
const [frameEl] = Array.from(frames)
119-
return frameEl?.document.querySelector<HTMLElement>('#step-2a')
120-
},
121-
actions: [
122-
{ label: 'Prev', action: 'prev' },
123-
{ label: 'Next', action: 'next' },
124-
],
125-
},
126-
{
127-
type: 'tooltip',
128-
id: 'step-3',
129-
title: 'Step 3. Normal scrolling',
130-
description: 'The new world is a great place',
131-
target: () => document.querySelector<HTMLElement>('#step-3'),
132-
actions: [
133-
{ label: 'Prev', action: 'prev' },
134-
{ label: 'Next', action: 'next' },
135-
],
136-
},
137-
{
138-
type: 'tooltip',
139-
id: 'step-4',
140-
title: 'Step 4. Close to bottom',
141-
description: 'So nice to see the scrolling works!',
142-
target: () => document.querySelector<HTMLElement>('#step-4'),
143-
actions: [
144-
{ label: 'Prev', action: 'prev' },
145-
{ label: 'Next', action: 'next' },
146-
],
147-
},
148-
{
149-
type: 'dialog',
150-
id: 'step-5',
151-
title: "You're all sorted! (no target)",
152-
description: 'Thanks for trying out the tour. Enjoy the app!',
153-
actions: [{ label: 'Finish', action: 'dismiss' }],
154-
},
155-
]

‎packages/react/src/components/tour/examples/steps.tsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import type { TourStepDetails } from '@ark-ui/react/tour'
2+
3+
export const steps: TourStepDetails[] = [
4+
{
5+
type: 'dialog',
6+
id: 'step-0',
7+
title: 'Centered tour (no target)',
8+
description: 'This is the center of the world. Ready to start the tour?',
9+
actions: [{ label: 'Next', action: 'next' }],
10+
},
11+
{
12+
type: 'tooltip',
13+
id: 'step-1',
14+
title: 'Step 1. Welcome',
15+
description: 'To the new world',
16+
target: () => document.querySelector<HTMLElement>('#step-1'),
17+
actions: [
18+
{ label: 'Prev', action: 'prev' },
19+
{ label: 'Next', action: 'next' },
20+
],
21+
effect({ show, update }) {
22+
const abort = new AbortController()
23+
24+
fetch('https://api.github.com/users/octocat', { signal: abort.signal })
25+
.then((res) => res.json())
26+
.then((data) => {
27+
update({ title: data.name })
28+
show()
29+
})
30+
31+
return () => {
32+
abort.abort()
33+
}
34+
},
35+
},
36+
{
37+
type: 'tooltip',
38+
id: 'step-2',
39+
title: 'Step 2. Inside a scrollable container',
40+
description: 'Using scrollIntoView(...) rocks!',
41+
target: () => document.querySelector<HTMLElement>('#step-2'),
42+
actions: [
43+
{ label: 'Prev', action: 'prev' },
44+
{ label: 'Next', action: 'next' },
45+
],
46+
},
47+
{
48+
type: 'tooltip',
49+
id: 'step-2a',
50+
title: 'Step 2a. Inside an Iframe container',
51+
description: 'It calculates the offset rect correctly. Thanks to floating UI!',
52+
target: () => {
53+
const [frameEl] = Array.from(frames)
54+
return frameEl?.document.querySelector<HTMLElement>('#step-2a')
55+
},
56+
actions: [
57+
{ label: 'Prev', action: 'prev' },
58+
{ label: 'Next', action: 'next' },
59+
],
60+
},
61+
{
62+
type: 'tooltip',
63+
id: 'step-3',
64+
title: 'Step 3. Normal scrolling',
65+
description: 'The new world is a great place',
66+
target: () => document.querySelector<HTMLElement>('#step-3'),
67+
actions: [
68+
{ label: 'Prev', action: 'prev' },
69+
{ label: 'Next', action: 'next' },
70+
],
71+
},
72+
{
73+
type: 'tooltip',
74+
id: 'step-4',
75+
title: 'Step 4. Close to bottom',
76+
description: 'So nice to see the scrolling works!',
77+
target: () => document.querySelector<HTMLElement>('#step-4'),
78+
actions: [
79+
{ label: 'Prev', action: 'prev' },
80+
{ label: 'Next', action: 'next' },
81+
],
82+
},
83+
{
84+
type: 'dialog',
85+
id: 'step-5',
86+
title: "You're all sorted! (no target)",
87+
description: 'Thanks for trying out the tour. Enjoy the app!',
88+
actions: [{ label: 'Finish', action: 'dismiss' }],
89+
},
90+
]

‎packages/react/src/components/tour/examples/tour.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Tour, useTour } from '@ark-ui/react/tour'
2+
import { XIcon } from 'lucide-react'
3+
import { useEffect } from 'react'
4+
import { steps } from './steps'
5+
6+
export const DemoTour = () => {
7+
const tour = useTour({ steps })
8+
9+
// Start the tour when the component mounts
10+
useEffect(() => {
11+
tour.start()
12+
}, [tour])
13+
14+
return (
15+
<Tour.Root tour={tour}>
16+
<Tour.Backdrop />
17+
<Tour.Spotlight />
18+
<Tour.Positioner>
19+
<Tour.Content>
20+
<Tour.Arrow>
21+
<Tour.ArrowTip />
22+
</Tour.Arrow>
23+
<Tour.Title />
24+
<Tour.Description />
25+
<Tour.ProgressText />
26+
<Tour.CloseTrigger>
27+
<XIcon />
28+
</Tour.CloseTrigger>
29+
<Tour.Actions>
30+
{(actions) =>
31+
actions.map((action) => <Tour.ActionTrigger key={action.label} action={action} />)
32+
}
33+
</Tour.Actions>
34+
</Tour.Content>
35+
</Tour.Positioner>
36+
</Tour.Root>
37+
)
38+
}

‎packages/react/src/components/tour/index.ts

+39
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,49 @@
1+
export type { StepDetails as TourStepDetails } from '@zag-js/tour'
2+
export {
3+
TourActionTrigger,
4+
type TourActionTriggerBaseProps,
5+
type TourActionTriggerProps,
6+
} from './tour-action-trigger'
7+
export {
8+
TourActions,
9+
type TourActionsProps,
10+
} from './tour-actions'
11+
export { TourArrow, type TourArrowBaseProps, type TourArrowProps } from './tour-arrow'
12+
export {
13+
TourArrowTip,
14+
type TourArrowTipBaseProps,
15+
type TourArrowTipProps,
16+
} from './tour-arrow-tip'
117
export { TourBackdrop, type TourBackdropBaseProps, type TourBackdropProps } from './tour-backdrop'
18+
export {
19+
TourCloseTrigger,
20+
type TourCloseTriggerBaseProps,
21+
type TourCloseTriggerProps,
22+
} from './tour-close-trigger'
23+
export { TourContent, type TourContentBaseProps, type TourContentProps } from './tour-content'
24+
export { TourContext, type TourContextProps } from './tour-context'
25+
export {
26+
TourDescription,
27+
type TourDescriptionBaseProps,
28+
type TourDescriptionProps,
29+
} from './tour-description'
30+
export {
31+
TourPositioner,
32+
type TourPositionerBaseProps,
33+
type TourPositionerProps,
34+
} from './tour-positioner'
35+
export {
36+
TourProgressText,
37+
type TourProgressTextBaseProps,
38+
type TourProgressTextProps,
39+
} from './tour-progress-text'
240
export { TourRoot, type TourRootBaseProps, type TourRootProps } from './tour-root'
341
export {
442
TourSpotlight,
543
type TourSpotlightBaseProps,
644
type TourSpotlightProps,
745
} from './tour-spotlight'
46+
export { TourTitle, type TourTitleBaseProps, type TourTitleProps } from './tour-title'
847
export { tourAnatomy } from './tour.anatomy'
948
export { useTour, type UseTourProps, type UseTourReturn } from './use-tour'
1049
export { useTourContext, type UseTourContext } from './use-tour-context'

0 commit comments

Comments
 (0)