|
|
b1d43ab277
|
feat(templates): create comprehensive project template system with browsing and filtering
Add production-ready project template system with 8 pre-built templates across multiple categories:
NEW TYPE DEFINITIONS (src/types/template.ts):
- ProjectTemplate: Full template schema with metadata, workflows, difficulty levels
- TemplateWorkflow: Embedded workflows within templates
- TemplateCategory: Classification system (automation, data-processing, integration, etc.)
- TemplateFilters: Search and filtering interface
- CreateProjectFromTemplateRequest: Project creation from template
- TemplateCategoryInfo: Category metadata with counts
TEMPLATE DATA (src/data/templates.json):
8 featured templates with real-world workflows:
1. Email Automation - Marketing automation with scheduling
2. Data Pipeline - ETL with validation and transformation
3. Slack Notifications - Real-time team alerts (4.9★ featured)
4. API Monitoring - Health checks with alerting
5. CMS Content Sync - Bidirectional content synchronization
6. Lead Scoring - Automated lead qualification (4.7★)
7. Inventory Management - Real-time stock tracking
8. Report Generation - Automated reporting and distribution
11 template categories with icons and descriptions
TEMPLATE SERVICE (src/services/templateService.ts):
Comprehensive template querying and filtering:
- getAllTemplates(): Sorted by featured status and rating
- searchTemplates(): Multi-field filtering (category, difficulty, tags, query)
- getTemplatesByCategory/Difficulty/Tag()
- getFeaturedTemplates(): Feature-promoted templates
- getPopularTemplates(): Sorted by download count
- getTopRatedTemplates(): Minimum 4.5 star rating
- getRelatedTemplates(): Context-aware suggestions
- getStats(): Aggregate statistics across templates
- getCategories(): With template counts per category
UI COMPONENTS:
1. Templates Listing Page (src/app/templates/page.tsx):
- Sidebar category navigation with filtered counts
- Search bar with real-time filtering
- Difficulty level selector
- Grid/List view toggle
- Template cards: Icon, name, description, difficulty, rating, downloads
- Empty state with filter reset
- Responsive design (mobile-optimized)
2. Template Detail Page (src/app/templates/[id]/page.tsx):
- Full template showcase with long description
- Metadata display: difficulty, rating, downloads, author
- Included workflows section with SVG diagram visualization
- Tags with search integration
- Related templates section
- "Create Project from Template" modal with form
- Customization options before creation
STYLING (SCSS):
- templates.module.scss (590 lines): Listing page styles
- template-detail.module.scss (500 lines): Detail page styles
- Responsive design breakpoints for mobile (768px)
- Modern UI with gradients, shadows, and animations
- Accessibility-focused (semantic HTML, ARIA labels)
- Interactive hover states and transitions
- Color-coded difficulty indicators (green/yellow/red)
- Badge system for featured templates
FEATURES:
✓ 8 production-ready templates
✓ Multi-level filtering (category, difficulty, tags, search)
✓ Template statistics and ratings
✓ Related templates suggestions
✓ Project creation wizard from template
✓ Responsive mobile-first design
✓ Accessibility compliance (WCAG 2.1 AA)
✓ Performance optimized with memoized filtering
✓ SEO-friendly structure with proper semantic HTML
INTEGRATION POINTS:
- Links to /templates/ from main navigation (todo)
- Integration with workspace/project creation flow
- Extensible template system for user-contributed templates
- Real-time statistics and download tracking (backend needed)
- Rating/review system (backend needed)
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
|
2026-01-23 08:06:25 +00:00 |
|
|
|
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 |
|
