finish first draft

chakra-ui · Dec 16, 2024 · 54c45ae · 54c45ae
1 parent e3cc559
commit 54c45ae
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 13 deletions.
diff --git a/packages/react/src/components/tour/examples/basic.tsx b/packages/react/src/components/tour/examples/basic.tsx
@@ -1,9 +1,16 @@
-import { Tour } from '@ark-ui/react/tour'
+import { Tour, type UseTourReturn, useTour } from '@ark-ui/react/tour'
+import type { StepDetails } from '@zag-js/tour'
+import { XIcon } from 'lucide-react'
 import { Frame } from '../../frame'
 
-export const DemoTour = () => {
+interface Props {
+  tour: UseTourReturn
+}
+
+export const DemoTour = (props: Props) => {
+  const { tour } = props
   return (
-    <Tour.Root>
+    <Tour.Root tour={tour}>
       <Tour.Backdrop />
       <Tour.Spotlight />
       <Tour.Positioner>
@@ -14,7 +21,9 @@ export const DemoTour = () => {
           <Tour.Title />
           <Tour.Description />
           <Tour.ProgressText />
-          <Tour.CloseTrigger />
+          <Tour.CloseTrigger>
+            <XIcon />
+          </Tour.CloseTrigger>
           <Tour.Actions>
             {(actions) =>
               actions.map((action) => <Tour.ActionTrigger key={action.label} action={action} />)
@@ -27,10 +36,12 @@ export const DemoTour = () => {
 }
 
 export const Basic = () => {
+  const tour = useTour({ steps: tourData })
+
   return (
     <main className="tour">
       <div>
-        <button>Start Tour</button>
+        <button onClick={() => tour.start()}>Start Tour</button>
         <div className="steps__container">
           <h3 id="step-1">Step 1</h3>
           <div className="overflow__container">
@@ -48,8 +59,97 @@ export const Basic = () => {
           <h3 id="step-3">Step 3</h3>
           <h3 id="step-4">Step 4</h3>
         </div>
-        <DemoTour />
+        <DemoTour tour={tour} />
       </div>
     </main>
   )
 }
+
+export const tourData: StepDetails[] = [
+  {
+    type: 'dialog',
+    id: 'step-0',
+    title: 'Centered tour (no target)',
+    description: 'This is the center of the world. Ready to start the tour?',
+    actions: [{ label: 'Next', action: 'next' }],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-1',
+    title: 'Step 1. Welcome',
+    description: 'To the new world',
+    target: () => document.querySelector<HTMLElement>('#step-1'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+    effect({ show, update }) {
+      const abort = new AbortController()
+
+      fetch('https://api.github.com/users/octocat', { signal: abort.signal })
+        .then((res) => res.json())
+        .then((data) => {
+          update({ title: data.name })
+          show()
+        })
+
+      return () => {
+        abort.abort()
+      }
+    },
+  },
+  {
+    type: 'tooltip',
+    id: 'step-2',
+    title: 'Step 2. Inside a scrollable container',
+    description: 'Using scrollIntoView(...) rocks!',
+    target: () => document.querySelector<HTMLElement>('#step-2'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-2a',
+    title: 'Step 2a. Inside an Iframe container',
+    description: 'It calculates the offset rect correctly. Thanks to floating UI!',
+    target: () => {
+      const [frameEl] = Array.from(frames)
+      return frameEl?.document.querySelector<HTMLElement>('#step-2a')
+    },
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-3',
+    title: 'Step 3. Normal scrolling',
+    description: 'The new world is a great place',
+    target: () => document.querySelector<HTMLElement>('#step-3'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'tooltip',
+    id: 'step-4',
+    title: 'Step 4. Close to bottom',
+    description: 'So nice to see the scrolling works!',
+    target: () => document.querySelector<HTMLElement>('#step-4'),
+    actions: [
+      { label: 'Prev', action: 'prev' },
+      { label: 'Next', action: 'next' },
+    ],
+  },
+  {
+    type: 'dialog',
+    id: 'step-5',
+    title: "You're all sorted! (no target)",
+    description: 'Thanks for trying out the tour. Enjoy the app!',
+    actions: [{ label: 'Finish', action: 'dismiss' }],
+  },
+]
diff --git a/packages/react/src/components/tour/tour-action-trigger.tsx b/packages/react/src/components/tour/tour-action-trigger.tsx
@@ -16,7 +16,11 @@ export const TourActionTrigger = forwardRef<HTMLButtonElement, TourActionTrigger
     const tour = useTourContext()
     const mergedProps = mergeProps(tour.getActionTriggerProps(actionTriggerProps), localProps)
 
-    return <ark.button {...mergedProps} ref={ref} />
+    return (
+      <ark.button {...mergedProps} ref={ref}>
+        {actionTriggerProps.action.label}
+      </ark.button>
+    )
   },
 )
 

diff --git a/packages/react/src/components/tour/tour-description.tsx b/packages/react/src/components/tour/tour-description.tsx
@@ -10,7 +10,11 @@ export const TourDescription = forwardRef<HTMLDivElement, TourDescriptionProps>(
   const tour = useTourContext()
   const mergedProps = mergeProps(tour.getDescriptionProps(), props)
 
-  return <ark.div {...mergedProps} ref={ref} />
+  return (
+    <ark.div {...mergedProps} ref={ref}>
+      {mergedProps.children || tour.step?.description}
+    </ark.div>
+  )
 })
 
 TourDescription.displayName = 'TourDescription'
diff --git a/packages/react/src/components/tour/tour-root.tsx b/packages/react/src/components/tour/tour-root.tsx
@@ -7,18 +7,19 @@ import {
   splitPresenceProps,
   usePresence,
 } from '../presence'
-import { type UseTourProps, useTour } from './use-tour'
+import type { UseTourProps, UseTourReturn } from './use-tour'
 import { TourProvider } from './use-tour-context'
 
-export interface TourRootBaseProps extends UseTourProps, UsePresenceProps {}
+export interface TourRootBaseProps extends UseTourProps, UsePresenceProps {
+  tour: UseTourReturn
+}
 export interface TourRootProps extends TourRootBaseProps {
   children?: ReactNode
 }
 
 export const TourRoot = (props: TourRootProps) => {
-  const [presenceProps, { children, ...useTourProps }] = splitPresenceProps(props)
+  const [presenceProps, { children, tour }] = splitPresenceProps(props)
   const [renderStrategyProps] = splitRenderStrategyProps(presenceProps)
-  const tour = useTour(useTourProps)
   const presence = usePresence(mergeProps({ present: tour.open }, presenceProps))
 
   return (

diff --git a/packages/react/src/components/tour/tour-title.tsx b/packages/react/src/components/tour/tour-title.tsx
@@ -10,7 +10,11 @@ export const TourTitle = forwardRef<HTMLHeadingElement, TourTitleProps>((props,
   const tour = useTourContext()
   const mergedProps = mergeProps(tour.getTitleProps(), props)
 
-  return <ark.h2 {...mergedProps} ref={ref} />
+  return (
+    <ark.h2 {...mergedProps} ref={ref}>
+      {mergedProps.children || tour.step?.title}
+    </ark.h2>
+  )
 })
 
 TourTitle.displayName = 'TourTitle'