Updates#1207
Merged
Merged
Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
There was a problem hiding this comment.
Pull request overview
This pull request adds a new “replay current step” capability to the Joyride tour, letting users re-run the active step (including hooks/lifecycle events) via controls or configured UI interactions (close button, ESC, overlay click), plus accompanying docs, demos, and test updates.
Changes:
- Added
controls.replay()and theACTIONS.REPLAYaction, with lifecycle handling to re-enter the same step and re-emit step events/hooks. - Extended Options/action wiring so close button, ESC key, and overlay click can trigger replay.
- Updated docs, website demos, and test coverage (unit + E2E + snapshots); adjusted floater z-index behavior and bumped dependencies.
Reviewed changes
Copilot reviewed 43 out of 66 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| website/src/providers/ConfigProvider.tsx | Suppresses cognitive complexity lint warning for settings updater. |
| website/src/modules/helpers.ts | Simplifies tour color config (overlay color). |
| website/src/hooks/useIsE2E.ts | Adds client hook to detect ?e2e mode. |
| website/src/css/react-color.css | Removes trailing whitespace/blank lines. |
| website/src/components/SourceCodeLink.tsx | Adds “view source” floating link for demos. |
| website/src/components/Playground.tsx | Simplifies onEvent finish/skip run-state logic. |
| website/src/components/ConfigPanel/FAB.tsx | Updates FAB styling/positioning and sizing. |
| website/src/app/docs/recipes/recipes.mdx | Adds guidance for conditional/dynamic steps using before hooks. |
| website/src/app/docs/props/options/OptionsTable.tsx | Documents new 'replay' action values for interactions. |
| website/src/app/docs/props/PropsTable.tsx | Links controlled-mode guidance to conditional/dynamic steps recipe. |
| website/src/app/docs/how-it-works/how-it-works.mdx | Expands explanation of uncontrolled vs controlled + before hooks. |
| website/src/app/docs/hook/hook.mdx | Adds tip reinforcing uncontrolled default + conditional UI approach. |
| website/src/app/docs/hook/ControlsTable.tsx | Documents replay control and clarifies running-only controls. |
| website/src/app/docs/exports/exports.mdx | Adds ACTIONS.REPLAY to exports documentation. |
| website/src/app/docs/events/events.mdx | Adds tip about controlled example vs uncontrolled + before hooks. |
| website/src/app/demos/scroll/Scroll.tsx | Adjusts demo heading styling for responsiveness. |
| website/src/app/demos/overview/Overview.tsx | Switches E2E detection to useIsE2E. |
| website/src/app/demos/multi-route/layout.tsx | Switches E2E detection to useIsE2E and adjusts mount logic. |
| website/src/app/demos/modal/Modal.tsx | Adjusts demo headings styling for responsiveness. |
| website/src/app/demos/layout.tsx | Removes useSearchParams/Suspense gating; uses useIsE2E; adds SourceCodeLink. |
| website/src/app/demos/custom-components/CustomComponents.tsx | Switches E2E detection to useIsE2E; tweaks heading styles. |
| website/src/app/demos/controlled/Controlled.tsx | Demonstrates replay via configured actions; updates text and event handling. |
| website/src/app/demos/chat/Chat.tsx | Demonstrates replay via configured actions; updates text and E2E detection. |
| website/package.json | Updates website dependencies and adds validate script. |
| test/tours/replay.spec.tsx | Adds new test suite covering replay behavior and UI wiring. |
| test/tours/snapshots/hook.spec.tsx.snap | Updates snapshots due to z-index changes. |
| test/tours/snapshots/custom-options.spec.tsx.snap | Updates snapshots due to z-index changes. |
| test/tours/snapshots/component.spec.tsx.snap | Updates snapshots due to z-index changes. |
| test/hooks/useControls.spec.ts | Adds unit tests for controls.replay(). |
| test/setup/test-helpers.ts | Updates controls shape expectation to include replay. |
| src/types/state.ts | Extends Controls type with replay. |
| src/types/common.ts | Extends Options action unions to include 'replay'. |
| src/modules/helpers.tsx | Refactors omit/pick loops (combined conditions). |
| src/literals/index.ts | Adds ACTIONS.REPLAY. |
| src/hooks/useLifecycleEffect.ts | Adds REPLAY handling and lifecycle reset path for replay re-entry. |
| src/hooks/useControls.ts | Implements controls.replay() state transition. |
| src/components/TourRenderer.tsx | Wires 'replay' behavior for ESC and overlay click. |
| src/components/Tooltip/index.tsx | Wires close button 'replay' behavior. |
| src/components/Floater.tsx | Adjusts floater z-index calculation. |
| package.json | Updates dev dependencies (Playwright, SWC, jsdom, React, Vitest, etc.). |
| e2e/controlled.spec.ts | Adds E2E coverage for replay via ESC. |
| e2e/chat.spec.ts | Adds E2E coverage for replay via overlay click. |
| e2e/snapshots/controlled/step7-replay-beacon-chromium.png | Adds replay beacon screenshot snapshot. |
| docs/architecture.md | Documents replay control method and lifecycle flow impact. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- new ACTIONS.REPLAY literal and Controls.replay(origin?) method - re-emits step:after/step:before, re-runs before/after hooks, index unchanged - wired into closeButtonAction/dismissKeyAction/overlayClickAction as 'replay' - docs: architecture, exports, ControlsTable, OptionsTable
- update ConfigPanel/FAB styles
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new "replay step" feature to the guided tour component, allowing users to replay the current step via the close button, ESC key, or overlay click. It also includes supporting changes in the codebase, updates to documentation, and dependency upgrades. The most significant changes are grouped below:
New "Replay Step" Feature
replaycontrol method to the tour controls, enabling re-running of the current step, including its lifecycle events and hooks. This is exposed in theControlstype and implemented inuseControls. (src/hooks/useControls.ts[1] [2]src/types/state.ts[3]src/literals/index.ts[4]Optionsinterface to support'replay'as a valid value forcloseButtonAction,dismissKeyAction, andoverlayClickAction, allowing users to trigger the replay via close button, ESC key, or overlay click. (src/types/common.ts[1] [2] [3]Tooltip,TourRenderer) so the replay can be triggered from user interactions. (src/components/Tooltip/index.tsx[1]src/components/TourRenderer.tsx[2] [3]src/hooks/useLifecycleEffect.ts[1] [2]test/hooks/useControls.spec.ts[1]e2e/chat.spec.ts[2]e2e/controlled.spec.ts[3]test/__setup__/test-helpers.ts[4]Documentation and Architecture
replaycontrol method, its behavior, and its effect on the tour flow. (docs/architecture.md[1] [2]Bug Fixes and Minor Improvements
omitandpickhelper functions to combine checks into a single condition, improving efficiency and correctness. (src/modules/helpers.tsx[1] [2]src/components/Floater.tsx[1]test/tours/__snapshots__/component.spec.tsx.snap[2] [3]Dependency Updates
package.json[1] [2]Code Quality
eslint-disable-next-linecomments to suppress cognitive complexity warnings in lifecycle effect hooks. (src/hooks/useLifecycleEffect.ts[1] [2] [3]These changes collectively enhance the user experience by allowing steps to be replayed on demand and improving the maintainability and reliability of the codebase.