Summary

This PR migrates the onboarding tour from react-joyride to driver.js, reducing bundle size by 83% and resolving maintenance concerns with the outdated library.

Problem

Current Behavior

1. Using react-joyride (30.3KB) for onboarding tours
2. ❌ Library not actively maintained (last significant update in 2022)
3. ❌ Large bundle size impacting extension performance
4. ❌ Potential React 19 compatibility issues
5. ❌ Dynamic animations causing poor UX (too distracting)
6. ❌ Overlay behavior making focused areas unclear

Expected Behavior

1. Using actively maintained, lightweight tour library
2. ✅ Minimal bundle size for better performance
3. ✅ Clean, simple tour experience without distracting animations
4. ✅ Clear visual distinction between focused areas and background
5. ✅ VSCode theme integration for consistent UI

Solution

Migrated from react-joyride to driver.js with the following improvements:

Bundle Size Reduction

• Before: react-joyride@2.9.3 (30.3KB) + 18 dependencies
• After: driver.js@1.4.0 (5KB) + 0 dependencies
• Result: 83% reduction in bundle size

UX Improvements

• Disabled all animations for cleaner, simpler experience
• Removed arrows for minimal, distraction-free UI
• Fixed overlay behavior: focused areas remain bright, background darkened
• Centered dialogs for better visual hierarchy
• Changed progress format to "Step X/Y"
• Added Slack share button tour step (now 14 steps total)

Technical Improvements

• Full VSCode theme integration using CSS variables
• Type-safe implementation with TypeScript
• Multi-language support maintained (5 languages: en, ja, ko, zh-CN, zh-TW)

Changes

Dependencies

File: src/webview/package.json

• Removed: react-joyride@2.9.3 (and 18 transitive dependencies)
• Added: driver.js@1.4.0

Core Components

File: src/webview/src/components/Tour.tsx

• Complete rewrite using driver.js API
• Implemented proper lifecycle management with useRef and useEffect
• Added onCloseClick callback for close button functionality
• Added onDestroyStarted callback for cleanup

File: src/webview/src/constants/tour-steps.ts

• Converted from react-joyride.Step[] format to driver.js.DriveStep[] format
• Added getDriverConfig() function with UX-optimized settings:

  {
    animate: false,                          // Disable animations
    showProgress: true,
    progressText: 'Step {{current}}/{{total}}',
    overlayColor: 'rgba(0, 0, 0, 0.5)',     // Dark background
    overlayOpacity: 1,                       // Keep focused areas bright
    smoothScroll: false,                     // Instant positioning
    popoverClass: 'cc-wf-tour-popover',      // VSCode theme integration
  }

• Added 14th step for Slack share button

Styling

File: src/webview/src/styles/main.css

• Added 89 lines of VSCode theme-integrated styles
• Used CSS variables: --vscode-editorWidget-*, --vscode-button-*
• Hidden all arrows with display: none !important
• Documented why global CSS is used (driver.js creates DOM outside React)

Internationalization

Files: src/webview/src/i18n/translations/*.ts

• Added tour.slackShare translations in all 5 languages
• Simplified tour.button.next (removed "({step}/{steps})" suffix)
• Updated TypeScript type definitions in translation-keys.ts

Impact

User Experience

• ✅ Cleaner, simpler tour experience without distracting animations
• ✅ Better visual clarity with proper focus/background contrast
• ✅ Consistent VSCode theme integration
• ✅ Added Slack sharing tour step for better feature discovery

Performance

• ✅ 83% reduction in bundle size (30.3KB → 5KB)
• ✅ Removed 18 transitive dependencies
• ✅ Faster initial load time

Maintenance

• ✅ Actively maintained library (driver.js updated regularly)
• ✅ Zero dependencies (no supply chain concerns)
• ✅ Better documentation and TypeScript support

Breaking Changes

• ❌ None - Tour behavior remains functionally identical for end users

Testing

• Manual E2E testing completed
  • All 14 tour steps verified in English
  • All 14 tour steps verified in Japanese
  • All 14 tour steps verified in Korean
  • All 14 tour steps verified in Simplified Chinese
  • All 14 tour steps verified in Traditional Chinese
• Close button functionality verified
• Overlay behavior verified (focused areas bright, background dark)
• Dialog positioning verified (centered for welcome/canvas steps)
• Progress text format verified ("Step X/Y")
• Slack share button tour step verified
• Code quality checks passed
  • npm run format - Auto-formatted with Biome
  • npm run lint - No linting issues
  • npm run check - All checks passed
• Build verification passed
  • npm run build - Compiled successfully

Notes

• This is a refactor with no breaking changes for end users
• Tour functionality remains identical, but with improved UX
• All user feedback from iterative testing has been incorporated
• Version bump will be handled separately with another fix

🤖 Generated with Claude Code