johndoe6345789 a3e0fd103a feat(documentation): implement JSON-backed in-app help system ...

Comprehensive in-app documentation system with interactive guides, full-text search, and contextual help:

**Type System** (`src/types/documentation.ts`):
- DocumentationIndex: Complete documentation structure with metadata
- DocPage: Individual documentation pages with versioning
- DocContentBlock: Flexible content types (text, code, list, table, video, callout, step, etc.)
- DocCategory: Organized by category (getting-started, canvas, workflows, settings, shortcuts, etc.)
- HelpState: Redux state management for help modal

**JSON-Backed Content** (`src/data/documentation.json`):
- 14 comprehensive documentation pages
- 6 major documentation sections with hierarchical organization
- Estimated read times and difficulty levels (beginner/intermediate/advanced)
- Keywords for search optimization
- Related pages for navigation

**Service Layer** (`src/services/documentationService.ts`):
- Full-text search with keyword matching
- Category-based filtering and page grouping
- Navigation tree building for sidebar
- Breadcrumb generation
- Statistics (word count, read time, etc.)
- Related pages suggestion
- History tracking

**State Management** (`src/store/slices/documentationSlice.ts`):
- Open/close modal state
- Current page/category tracking
- Search query and results management
- Navigation history (last 20 pages)
- Page navigation actions

**Components**:
- HelpModal.tsx: Main documentation modal with split pane (nav + content)
- DocNavigation.tsx: Collapsible section tree with page list
- DocContentRenderer.tsx: Flexible content renderer supporting 9 block types
- HelpButton.tsx: Reusable help button component

**Hook** (`src/hooks/useDocumentation.ts`):
- useDocumentation: Complete documentation system integration
- State selectors, navigation, search, and action dispatchers
- Memoized derived state (navigation tree, breadcrumbs, related pages)

**Accessibility**:
- Full WCAG 2.1 AA compliance with ARIA roles and labels
- Keyboard navigation (Tab, Escape)
- Search results with live regions
- Screen reader support with semantic HTML

**Features**:
- 14 documentation pages covering all major features
- Full-text search with 2+ character minimum
- Breadcrumb navigation
- Related pages links
- Collapsible section tree
- Read time estimates
- Difficulty levels
- History back button
- Material-UI components
- Responsive design

Documentation covers:
- Getting Started (Welcome, Workspace Basics, First Workflow)
- Canvas Guide (Canvas Intro, Drag/Drop, Zoom/Pan, Shortcuts)
- Workflows (Basics, Nodes, Execution)
- Settings (Workspace, Canvas, Notifications)
- Keyboard Shortcuts (Canvas, Editor)
- Help & Support (FAQ, Troubleshooting)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

2026-01-23 07:47:10 +00:00

..

documentation.json

feat(documentation): implement JSON-backed in-app help system

2026-01-23 07:47:10 +00:00