Add guided tour feature with Driver.js
- 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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user