📌 Description
src/hooks/useGuidedTour.ts defines a single hard-coded TOUR_STEPS array tied to the create wizard. Other complex pages (marketplace, commitment detail) have no guided tour.
This issue generalizes the hook to accept a per-page step set so additional tours can be defined and triggered on the marketplace and detail pages.
🎯 Requirements and Context
This is a feature / enhancement task for the CommitLabs frontend (Next.js + TypeScript). It must be implemented cleanly, fully typed, accessible, and well tested — and must not regress existing behavior.
- Refactor
useGuidedTour to accept a tour id + steps argument instead of a single global constant.
- Persist per-tour completion separately so completing one tour doesn't suppress another.
- Keep the existing create-wizard tour working with no behavior change.
- Tour targets must degrade gracefully if a selector is missing.
🛠️ Suggested Execution
1. Fork the repo and create a branch
git checkout -b feature/guided-tours-per-page
2. Implement the change
- Primary files to add or modify:
src/hooks/useGuidedTour.ts — parameterize steps + per-tour completion.
src/components/onboarding/GuidedTour.tsx — accept tour config.
src/components/onboarding/TourStep.tsx — unchanged rendering contract.
- Add focused tests in
src/hooks/useGuidedTourPerPage.test.ts using Jest / Vitest + React Testing Library (happy-dom), covering rendering, interaction, and the edge cases below.
- Add documentation in
docs/GUIDED_TOURS.md describing the feature, props/API, accessibility behavior, and a usage example; cross-link it from the relevant README/docs.
- Keep the diff small and reviewer-friendly; reuse existing primitives, hooks, and the typed API client instead of duplicating logic.
3. Cover edge cases
- create tour unaffected
- independent completion per tour
- missing target skipped gracefully
- second tour can run after first
4. Test and commit
- Run the suite (e.g.
pnpm test / pnpm vitest run) and ensure new lines are covered.
- Verify keyboard navigation, focus handling, and
prefers-reduced-motion where relevant.
Example commit message
feat: per-page guided tours via parameterized useGuidedTour
✅ Guidelines
- Minimum 95% test coverage on the new/changed lines.
- Clear, reviewer-friendly documentation (props/API + usage example + accessibility notes).
- No regressions to existing components, routes, or tests.
- Fully typed (no
any), accessible (labels, roles, live regions where relevant).
- Timeframe: 96 hours.
🏷️ Labels
type-feature · type-enhancement · area-frontend · MAYBE REWARDED · GRANTFOX OSS · OFFICIAL CAMPAIGN
💬 Community & Support
- Join the CommitLabs contributor Discord to coordinate, ask questions, and get unblocked fast: https://discord.gg/WV7tdYkJk
- Please introduce yourself in the channel before you start so we can avoid duplicate work, pair you with a reviewer, and get your PR merged quickly.
- Maintainers actively triage this channel and aim for fast, clear, respectful reviews — reach out any time you're blocked.
📌 Description
src/hooks/useGuidedTour.tsdefines a single hard-codedTOUR_STEPSarray tied to the create wizard. Other complex pages (marketplace, commitment detail) have no guided tour.This issue generalizes the hook to accept a per-page step set so additional tours can be defined and triggered on the marketplace and detail pages.
🎯 Requirements and Context
This is a feature / enhancement task for the CommitLabs frontend (Next.js + TypeScript). It must be implemented cleanly, fully typed, accessible, and well tested — and must not regress existing behavior.
useGuidedTourto accept a tour id + steps argument instead of a single global constant.🛠️ Suggested Execution
1. Fork the repo and create a branch
2. Implement the change
src/hooks/useGuidedTour.ts— parameterize steps + per-tour completion.src/components/onboarding/GuidedTour.tsx— accept tour config.src/components/onboarding/TourStep.tsx— unchanged rendering contract.src/hooks/useGuidedTourPerPage.test.tsusing Jest / Vitest + React Testing Library (happy-dom), covering rendering, interaction, and the edge cases below.docs/GUIDED_TOURS.mddescribing the feature, props/API, accessibility behavior, and a usage example; cross-link it from the relevant README/docs.3. Cover edge cases
4. Test and commit
pnpm test/pnpm vitest run) and ensure new lines are covered.prefers-reduced-motionwhere relevant.Example commit message
✅ Guidelines
any), accessible (labels, roles, live regions where relevant).🏷️ Labels
type-feature·type-enhancement·area-frontend·MAYBE REWARDED·GRANTFOX OSS·OFFICIAL CAMPAIGN💬 Community & Support