Skip to content

feat(tour): #155 add guided onboard tour w driver - #156

Merged
Trosper3 merged 1 commit into
ReduxAPI_GUIfrom
feature/155-tutorial-visualization
Aug 12, 2026
Merged

feat(tour): #155 add guided onboard tour w driver#156
Trosper3 merged 1 commit into
ReduxAPI_GUIfrom
feature/155-tutorial-visualization

Conversation

@ryancraigdavis

Copy link
Copy Markdown
Contributor

Introduce an interactive walkthrough using driver.js to help new users understand the problem → reduce → visualize → solve → verify workflow.

  • Add data-tour-id and data-tour-toggle attributes across problem, reduce, visualize, and share components to target key UI elements
  • Add a Fab launcher button, step definitions, and tour logic that expands accordion rows as needed during the walkthrough
  • Persist tour completion in localStorage and track it via useSyncExternalStore so TourLauncher re-renders on change; show an extended "Getting started" CTA for first-time users and a compact icon-only Fab once completed
  • Add a11y focus trap module (tourA11y) that traps focus within the popover, restores focus on exit, and sets proper ARIA attributes
  • Simplify TourLauncher by combining shared Fab props and deriving TOUR_SELECTORS directly from TOUR_STEPS; refactor toggleRow and step mapping in tour.js for clarity
  • Update .gitignore to exclude RBS cache files and generated report.md

Introduce an interactive walkthrough using driver.js to help new
users understand the problem → reduce → visualize → solve → verify
workflow.

- Add data-tour-id and data-tour-toggle attributes across problem,
  reduce, visualize, and share components to target key UI elements
- Add a Fab launcher button, step definitions, and tour logic that
  expands accordion rows as needed during the walkthrough
- Persist tour completion in localStorage and track it via
  useSyncExternalStore so TourLauncher re-renders on change; show an
  extended "Getting started" CTA for first-time users and a compact
  icon-only Fab once completed
- Add a11y focus trap module (tourA11y) that traps focus within the
  popover, restores focus on exit, and sets proper ARIA attributes
- Simplify TourLauncher by combining shared Fab props and deriving
  TOUR_SELECTORS directly from TOUR_STEPS; refactor toggleRow and
  step mapping in tour.js for clarity
- Update .gitignore to exclude RBS cache files and generated report.md
@ryancraigdavis ryancraigdavis linked an issue Aug 1, 2026 that may be closed by this pull request

@Trosper3 Trosper3 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to update my node_modules to get it to run on my local side, but after it started...

Wow, this a cool tutorial. I was impressed. Since I audibly said, "Wow! What a Chad." My kids looked at me like I was crazy.

All jokes aside. Very nice job. This tutorial is very cool. The fact that it is optional too is nice.

@Trosper3
Trosper3 merged commit 2ca6ebe into ReduxAPI_GUI Aug 12, 2026
6 checks passed
@Trosper3
Trosper3 deleted the feature/155-tutorial-visualization branch August 12, 2026 16:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tutorial Visualization

2 participants