Skip to content

Commit dbe81c5

Browse files
elrumordelaluzelrumordelaluz
committed
Move tour demos into docs
1 parent 45d66cd commit dbe81c5

26 files changed

+914
-343
lines changed

‎apps/docs/components/demos/files/close-click.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { defaultFiles } from './defaults'
2+
3+
const AppJs = `import { TourProvider } from '@reactour/tour'
4+
import { steps } from './steps.js'
5+
import Main from './Main.js'
6+
7+
export default function App () {
8+
return (
9+
<TourProvider
10+
steps={steps}
11+
onClickClose={({ setCurrentStep, currentStep, steps, setIsOpen }) => {
12+
if (steps) {
13+
if (currentStep === steps.length - 1) {
14+
setIsOpen(false)
15+
}
16+
setCurrentStep((s) => (s === steps.length - 1 ? 0 : s + 1))
17+
}
18+
}}>
19+
<Main />
20+
</TourProvider>
21+
)
22+
}
23+
`
24+
25+
export const closeClickFiles = {
26+
...defaultFiles,
27+
'/App.js': {
28+
code: AppJs,
29+
},
30+
}

‎apps/docs/components/demos/files/custom-badge.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { defaultFiles } from './defaults'
2+
3+
const AppJs = `import { TourProvider } from '@reactour/tour'
4+
import { steps } from './steps.js'
5+
import Main from './Main.js'
6+
7+
export default function App () {
8+
return (
9+
<TourProvider
10+
steps={steps}
11+
badgeContent={({ totalSteps, currentStep }) => currentStep + 1 + "/" + totalSteps}
12+
>
13+
<Main />
14+
</TourProvider>
15+
)
16+
}
17+
`
18+
19+
export const customBadgeFiles = {
20+
...defaultFiles,
21+
'/App.js': {
22+
code: AppJs,
23+
},
24+
}

‎apps/docs/components/demos/files/custom-handlers.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { defaultFiles } from './defaults'
2+
3+
const AppJs = `import { useState } from 'react'
4+
import { TourProvider } from '@reactour/tour'
5+
import { steps } from './steps.js'
6+
import Main from './Main.js'
7+
8+
export default function App () {
9+
const [currentStep, setCurrentStep] = useState(0)
10+
console.log(currentStep)
11+
return (
12+
<TourProvider
13+
steps={steps}
14+
currentStep={currentStep}
15+
setCurrentStep={() => {
16+
if (currentStep === steps.length - 1) {
17+
setCurrentStep(0)
18+
} else {
19+
setCurrentStep(currentStep + 1)
20+
}
21+
}}
22+
>
23+
<Main />
24+
</TourProvider>
25+
)
26+
}
27+
`
28+
29+
export const customHandlersFiles = {
30+
...defaultFiles,
31+
'/App.js': {
32+
code: AppJs,
33+
},
34+
}

‎apps/docs/components/demos/files/custom-prev-next.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { defaultFiles } from './defaults'
2+
3+
const AppJs = `import { TourProvider } from '@reactour/tour'
4+
import { steps } from './steps.js'
5+
import Main from './Main.js'
6+
7+
export default function App () {
8+
return (
9+
<TourProvider
10+
steps={steps}
11+
prevButton={({ currentStep, setCurrentStep, steps }) => {
12+
const first = currentStep === 0
13+
return (
14+
<button
15+
onClick={() => {
16+
if (first) {
17+
setCurrentStep((s) => steps.length - 1)
18+
} else {
19+
setCurrentStep((s) => s - 1)
20+
}
21+
}}
22+
>
23+
Back
24+
</button>
25+
)
26+
}}
27+
nextButton={({
28+
Button,
29+
currentStep,
30+
stepsLength,
31+
setIsOpen,
32+
setCurrentStep,
33+
steps,
34+
}) => {
35+
const last = currentStep === stepsLength - 1
36+
return (
37+
<Button
38+
onClick={() => {
39+
if (last) {
40+
setIsOpen(false)
41+
} else {
42+
setCurrentStep((s) => (s === steps?.length - 1 ? 0 : s + 1))
43+
}
44+
}}
45+
>
46+
{last ? 'Close!' : null}
47+
</Button>
48+
)
49+
}}
50+
>
51+
<Main />
52+
</TourProvider>
53+
)
54+
}
55+
`
56+
57+
export const customPrevNextFiles = {
58+
...defaultFiles,
59+
'/App.js': {
60+
code: AppJs,
61+
},
62+
}

‎apps/docs/components/demos/files/custom-styles.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { defaultFiles } from './defaults'
2+
3+
const AppJs = `import { TourProvider } from '@reactour/tour'
4+
import { steps } from './steps.js'
5+
import Main from './Main.js'
6+
7+
export default function App () {
8+
const radius = 10
9+
10+
return (
11+
<TourProvider
12+
steps={steps}
13+
styles={{
14+
popover: (base) => ({
15+
...base,
16+
'--reactour-accent': '#ef5a3d',
17+
borderRadius: radius,
18+
}),
19+
maskArea: (base) => ({ ...base, rx: radius }),
20+
maskWrapper: (base) => ({ ...base, color: '#ef5a3d' }),
21+
badge: (base) => ({ ...base, left: 'auto', right: '-0.8125em' }),
22+
controls: (base) => ({ ...base, marginTop: 100 }),
23+
close: (base) => ({ ...base, right: 'auto', left: 8, top: 8 }),
24+
}}
25+
>
26+
<Main />
27+
</TourProvider>
28+
)
29+
}
30+
`
31+
32+
export const customStylesFiles = {
33+
...defaultFiles,
34+
'/App.js': {
35+
code: AppJs,
36+
},
37+
}

‎apps/docs/components/demos/files/defaults.tsx

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
export const DefautltAppJs = `import { TourProvider } from '@reactour/tour'
2+
import { steps } from './steps.js'
3+
import Main from './Main.js'
4+
5+
export default function App () {
6+
return (
7+
<TourProvider steps={steps}>
8+
<Main />
9+
</TourProvider>
10+
)
11+
}
12+
`
13+
14+
export const DefaultMainJs = `import { useTour } from '@reactour/tour'
15+
16+
export default function Main () {
17+
const { setIsOpen } = useTour()
18+
19+
return (
20+
<div className="demo">
21+
<header>
22+
<button onClick={() => setIsOpen(true)}>Open Tour</button>
23+
</header>
24+
<p>
25+
<span className="first-step">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Praesent at
26+
finibus nulla, quis varius justo. <span className="second-step">Vestibulum lorem</span> lorem.
27+
</p>
28+
<p>
29+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit enim vel libero sagittis efficitur. Maecenas iaculis metus et magna mollis, sit amet dictum arcu elementum. Vestibulum non turpis at enim aliquet lobortis. Donec vel gravida tellus. Praesent nec tristique velit, at ullamcorper nibh. Suspendisse potenti. Proin ac dolor justo. <span className="third-step">Praesent nisi mauris</span>, eleifend sed iaculis a, tincidunt et tellus. Etiam vitae velit risus.
30+
</p>
31+
</div>
32+
)
33+
}
34+
`
35+
36+
export const defaultStepsjs = `export const steps = [
37+
{
38+
selector: '.first-step',
39+
content: 'This is the first Step',
40+
},
41+
{
42+
selector: '.second-step',
43+
content: 'This is the second Step',
44+
},
45+
{
46+
selector: '.third-step',
47+
content: 'This is the third Step',
48+
},
49+
// ...
50+
]
51+
`
52+
53+
const stylesCss = `
54+
body {
55+
margin: 0;
56+
padding: 0;
57+
font-family: -apple-system, BlinkMacSystemFont,
58+
'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
59+
'Helvetical Neue', sans-serif;
60+
}
61+
.demo {
62+
padding: 1em;
63+
}
64+
.demo header {
65+
display: flex;
66+
justify-content: flex-end;
67+
}
68+
.demo button {
69+
border: 0;
70+
border-radius: 4px;
71+
color: white;
72+
padding: .5em 1em;
73+
font: inherit;
74+
margin-left: .25em;
75+
margin-right: .25em;
76+
background-color: #1c8f9e;
77+
}
78+
.demo button:hover {
79+
opacity: .9;
80+
}
81+
.scroll-demo p {
82+
margin-bottom: 100vh;
83+
}
84+
.demo-selectors {
85+
margin: 0;
86+
position: fixed;
87+
bottom: 10px;
88+
left: 10px;
89+
background-color: white;
90+
z-index: 100000;
91+
padding: 1em;
92+
box-shadow: 0 0 25px rgba(0,0,0,.1);
93+
}
94+
.demo-selectors code {
95+
display: flex;
96+
}
97+
.demo-selectors.column code {
98+
flex-direction: column
99+
}
100+
`
101+
102+
export const defaultFiles = {
103+
'/App.js': {
104+
code: DefautltAppJs,
105+
},
106+
'/Main.js': {
107+
code: DefaultMainJs,
108+
},
109+
'/steps.js': {
110+
code: defaultStepsjs,
111+
},
112+
'/styles.css': {
113+
code: stylesCss,
114+
hidden: true,
115+
},
116+
}

‎apps/docs/components/demos/files/disable-dots-nav.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { defaultFiles } from './defaults'
2+
3+
const AppJs = `import { TourProvider } from '@reactour/tour'
4+
import { steps } from './steps.js'
5+
import Main from './Main.js'
6+
7+
export default function App () {
8+
return (
9+
<TourProvider steps={steps} disableDotsNavigation>
10+
<Main />
11+
</TourProvider>
12+
)
13+
}
14+
`
15+
16+
export const disableDotsNavFiles = {
17+
...defaultFiles,
18+
'/App.js': {
19+
code: AppJs,
20+
},
21+
}

‎apps/docs/components/demos/files/disable-interaction.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { defaultFiles } from './defaults'
2+
3+
const AppJs = `import { TourProvider } from '@reactour/tour'
4+
import { steps } from './steps.js'
5+
import Main from './Main.js'
6+
7+
export default function App () {
8+
return (
9+
<TourProvider
10+
steps={steps}
11+
onClickHighlighted={(e) => {
12+
e.stopPropagation()
13+
console.log('No interaction')
14+
}}
15+
disableInteraction
16+
>
17+
<Main />
18+
</TourProvider>
19+
)
20+
}
21+
`
22+
23+
export const disableInteractionFiles = {
24+
...defaultFiles,
25+
'/App.js': {
26+
code: AppJs,
27+
},
28+
}

0 commit comments

Comments
 (0)