Move tour demos into docs

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

@@ -0,0 +1,30 @@
+import { defaultFiles } from './defaults'
+
+const AppJs = `import { TourProvider } from '@reactour/tour'
+import { steps } from './steps.js'
+import Main from './Main.js'
+	
+export default function App () {
+  return (
+    <TourProvider 
+      steps={steps}
+      onClickClose={({ setCurrentStep, currentStep, steps, setIsOpen }) => {
+        if (steps) {
+          if (currentStep === steps.length - 1) {
+            setIsOpen(false)
+          }
+          setCurrentStep((s) => (s === steps.length - 1 ? 0 : s + 1))
+        }
+      }}>
+      <Main />
+    </TourProvider>
+  )
+}
+`
+
+export const closeClickFiles = {
+  ...defaultFiles,
+  '/App.js': {
+    code: AppJs,
+  },
+}

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

@@ -0,0 +1,24 @@
+import { defaultFiles } from './defaults'
+
+const AppJs = `import { TourProvider } from '@reactour/tour'
+import { steps } from './steps.js'
+import Main from './Main.js'
+	
+export default function App () {
+  return (
+    <TourProvider 
+      steps={steps}
+      badgeContent={({ totalSteps, currentStep }) => currentStep + 1 + "/" + totalSteps}
+    >
+      <Main />
+    </TourProvider>
+  )
+}
+`
+
+export const customBadgeFiles = {
+  ...defaultFiles,
+  '/App.js': {
+    code: AppJs,
+  },
+}

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

@@ -0,0 +1,34 @@
+import { defaultFiles } from './defaults'
+
+const AppJs = `import { useState } from 'react'
+import { TourProvider } from '@reactour/tour'
+import { steps } from './steps.js'
+import Main from './Main.js'
+	
+export default function App () {
+  const [currentStep, setCurrentStep] = useState(0)
+  console.log(currentStep)
+  return (
+    <TourProvider 
+      steps={steps} 
+      currentStep={currentStep}
+      setCurrentStep={() => {
+        if (currentStep === steps.length - 1) {
+            setCurrentStep(0)    
+        } else {
+            setCurrentStep(currentStep + 1)
+        }
+      }}
+    >
+      <Main />
+    </TourProvider>
+  )
+}
+`
+
+export const customHandlersFiles = {
+  ...defaultFiles,
+  '/App.js': {
+    code: AppJs,
+  },
+}

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

@@ -0,0 +1,62 @@
+import { defaultFiles } from './defaults'
+
+const AppJs = `import { TourProvider } from '@reactour/tour'
+import { steps } from './steps.js'
+import Main from './Main.js'
+	
+export default function App () {
+  return (
+    <TourProvider 
+      steps={steps} 
+      prevButton={({ currentStep, setCurrentStep, steps }) => {
+        const first = currentStep === 0
+        return (
+          <button
+            onClick={() => {
+              if (first) {
+                setCurrentStep((s) => steps.length - 1)
+              } else {
+                setCurrentStep((s) => s - 1)
+              }
+            }}
+          >
+            Back
+          </button>
+        )
+      }}
+      nextButton={({
+        Button,
+        currentStep,
+        stepsLength,
+        setIsOpen,
+        setCurrentStep,
+        steps,
+      }) => {
+        const last = currentStep === stepsLength - 1
+        return (
+            <Button
+              onClick={() => {
+                  if (last) {
+                    setIsOpen(false)
+                  } else {
+                    setCurrentStep((s) => (s === steps?.length - 1 ? 0 : s + 1))
+                  }
+              }}
+            >
+              {last ? 'Close!' : null}
+            </Button>
+        )
+      }}
+    >
+      <Main />
+    </TourProvider>
+  )
+}
+`
+
+export const customPrevNextFiles = {
+  ...defaultFiles,
+  '/App.js': {
+    code: AppJs,
+  },
+}

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

@@ -0,0 +1,37 @@
+import { defaultFiles } from './defaults'
+
+const AppJs = `import { TourProvider } from '@reactour/tour'
+import { steps } from './steps.js'
+import Main from './Main.js'
+	
+export default function App () {
+  const radius = 10
+  
+  return (
+    <TourProvider 
+      steps={steps} 
+      styles={{
+        popover: (base) => ({
+          ...base,
+          '--reactour-accent': '#ef5a3d',
+          borderRadius: radius,
+        }),
+        maskArea: (base) => ({ ...base, rx: radius }),
+        maskWrapper: (base) => ({ ...base, color: '#ef5a3d' }),
+        badge: (base) => ({ ...base, left: 'auto', right: '-0.8125em' }),
+        controls: (base) => ({ ...base, marginTop: 100 }),
+        close: (base) => ({ ...base, right: 'auto', left: 8, top: 8 }),
+      }}
+    >
+      <Main />
+    </TourProvider>
+  )
+}
+`
+
+export const customStylesFiles = {
+  ...defaultFiles,
+  '/App.js': {
+    code: AppJs,
+  },
+}

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

@@ -0,0 +1,116 @@
+export const DefautltAppJs = `import { TourProvider } from '@reactour/tour'
+import { steps } from './steps.js'
+import Main from './Main.js'
+	
+export default function App () {
+  return (
+    <TourProvider steps={steps}>
+      <Main />
+    </TourProvider>
+  )
+}
+`
+
+export const DefaultMainJs = `import { useTour } from '@reactour/tour'
+
+export default function Main () {
+  const { setIsOpen } = useTour()
+
+  return (
+    <div className="demo">
+      <header>
+        <button onClick={() => setIsOpen(true)}>Open Tour</button>
+      </header>
+      <p>
+        <span className="first-step">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Praesent at
+        finibus nulla, quis varius justo. <span className="second-step">Vestibulum lorem</span> lorem.
+      </p>
+      <p>
+        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.  
+      </p>
+    </div>
+  )
+}
+`
+
+export const defaultStepsjs = `export const steps = [
+  {
+    selector: '.first-step',
+    content: 'This is the first Step',
+  },
+  {
+    selector: '.second-step',
+    content: 'This is the second Step',
+  },
+  {
+    selector: '.third-step',
+    content: 'This is the third Step',
+  },
+  // ...
+]
+`
+
+const stylesCss = `
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont,
+    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetical Neue', sans-serif;
+}
+.demo {
+  padding: 1em;
+}
+.demo header {
+  display: flex;
+  justify-content: flex-end;
+}
+.demo button { 
+  border: 0;
+  border-radius: 4px;
+  color: white;
+  padding: .5em 1em;
+  font: inherit;
+  margin-left: .25em;
+  margin-right: .25em; 
+  background-color: #1c8f9e;
+}
+.demo button:hover {
+  opacity: .9;
+}
+.scroll-demo p {
+  margin-bottom: 100vh;
+}
+.demo-selectors {
+  margin: 0;
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  background-color: white;
+  z-index: 100000;
+  padding: 1em;
+  box-shadow: 0 0 25px rgba(0,0,0,.1);
+}
+.demo-selectors code {
+  display: flex;
+}
+.demo-selectors.column code {
+  flex-direction: column
+}
+`
+
+export const defaultFiles = {
+  '/App.js': {
+    code: DefautltAppJs,
+  },
+  '/Main.js': {
+    code: DefaultMainJs,
+  },
+  '/steps.js': {
+    code: defaultStepsjs,
+  },
+  '/styles.css': {
+    code: stylesCss,
+    hidden: true,
+  },
+}

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

@@ -0,0 +1,21 @@
+import { defaultFiles } from './defaults'
+
+const AppJs = `import { TourProvider } from '@reactour/tour'
+import { steps } from './steps.js'
+import Main from './Main.js'
+	
+export default function App () {
+  return (
+    <TourProvider steps={steps} disableDotsNavigation>
+      <Main />
+    </TourProvider>
+  )
+}
+`
+
+export const disableDotsNavFiles = {
+  ...defaultFiles,
+  '/App.js': {
+    code: AppJs,
+  },
+}

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

@@ -0,0 +1,28 @@
+import { defaultFiles } from './defaults'
+
+const AppJs = `import { TourProvider } from '@reactour/tour'
+import { steps } from './steps.js'
+import Main from './Main.js'
+	
+export default function App () {
+  return (
+    <TourProvider 
+      steps={steps} 
+      onClickHighlighted={(e) => {
+        e.stopPropagation()
+        console.log('No interaction')
+      }} 
+      disableInteraction
+      >
+      <Main />
+    </TourProvider>
+  )
+}
+`
+
+export const disableInteractionFiles = {
+  ...defaultFiles,
+  '/App.js': {
+    code: AppJs,
+  },
+}