Add guided tour feature with Driver.js
Some checks failed
Deploy to GitHub Pages / build (push) Has been cancelled
Deploy to GitHub Pages / deploy (push) Has been cancelled

- Install driver.js package for lightweight product tours
- Create GuidedTour component with bilingual tour steps (Chinese/English)
- Create TourPromptModal to ask users if they want a tour after welcome
- Add data-tour attributes to Toolbar, FilePanel, PedigreeCanvas, PropertyPanel
- Tour covers: file operations, adding persons, canvas usage, relationships,
  editing properties, and exporting

Tour flow:
1. First visit: Welcome Modal → Tour Prompt Modal → Start tour or skip
2. Subsequent visits: No modals shown

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
gbanyan
2025-12-22 21:33:26 +08:00
parent fb0be3964f
commit ed492c1874
11 changed files with 383 additions and 6 deletions

View File

@@ -125,7 +125,7 @@ export function FilePanel() {
}, [createNewPedigree]);
return (
<div className={styles.panel}>
<div className={styles.panel} data-tour="file-panel">
<div className={styles.header}>File Operations</div>
<div className={styles.section}>
@@ -163,7 +163,7 @@ export function FilePanel() {
<div className={styles.header}>Export</div>
<div className={styles.section}>
<div className={styles.section} data-tour="export-section">
<button
className={styles.button}
onClick={handleExportSvg}