mirror of
https://github.com/SamyRai/tercul-frontend.git
synced 2025-12-27 04:51:34 +00:00
4a23f496fa
- Enhanced annotation system with improved inline editing - Updated author components with new card and header designs - Improved reading view with enhanced line numbering and controls - Added new blog management features and tag management - Updated UI components with improved accessibility and styling - Enhanced search functionality with better filtering - Added new dashboard features and activity feeds - Improved translation selector and work comparison tools - Updated GraphQL integration and API hooks - Enhanced responsive design and mobile experience
186 lines
6.4 KiB
Markdown
186 lines
6.4 KiB
Markdown
# Tercul Component Structure
|
|
|
|
## Overview
|
|
|
|
The component structure has been reorganized to improve maintainability, scalability, and code reuse. Components are organized by their domain and functionality.
|
|
|
|
## Directory Structure
|
|
|
|
### UI Components (`/components/ui`)
|
|
|
|
Basic, reusable UI components with minimal business logic. These serve as building blocks for more complex components.
|
|
|
|
- **Typography Components** (`/components/ui/typography`)
|
|
- heading.tsx - For h1-h6 headings with consistent styling
|
|
- paragraph.tsx - For text content with various styles
|
|
- quote.tsx - For blockquotes and citations
|
|
- code-block.tsx - For code snippets
|
|
|
|
- **Data Display Components**
|
|
- stat-card.tsx - For displaying statistics
|
|
- timeline.tsx - For chronological events visualization
|
|
- tree-view.tsx - For hierarchical data
|
|
- tag-cloud.tsx - For tag visualization
|
|
- file-viewer.tsx - For previewing documents
|
|
- code-highlighter.tsx - For syntax highlighting
|
|
|
|
- **Feedback Components**
|
|
- empty-state.tsx - For when no data is available
|
|
- error-state.tsx - For error handling
|
|
- loading-spinner.tsx - For loading indicators
|
|
- status-indicator.tsx - For success/failure states
|
|
- confirmation-dialog.tsx - For user confirmations
|
|
|
|
- **Navigation Components**
|
|
- stepper.tsx - For multi-step processes
|
|
- vertical-navigation.tsx - For side navigation
|
|
- breadcrumbs.tsx - For navigation trails
|
|
|
|
- **Form Components**
|
|
- rich-text-editor.tsx - For content creation
|
|
- tag-input.tsx - For adding/managing tags
|
|
- date-range-picker.tsx - For date selection
|
|
- file-uploader.tsx - For file uploads
|
|
- multi-select.tsx - For multiple selections
|
|
- autocomplete.tsx - For search suggestions
|
|
- form-wizard.tsx - For multi-step forms
|
|
|
|
- **Layout Components**
|
|
- grid.tsx - For grid layouts
|
|
- masonry.tsx - For pinterest-style layouts
|
|
- split-pane.tsx - For resizable panels
|
|
- spotlight.tsx - For featured content
|
|
- responsive-container.tsx - For responsive design
|
|
|
|
- **Specialized Components**
|
|
- color-picker.tsx - For color selection
|
|
- rating.tsx - For rating inputs
|
|
- comparison-slider.tsx - For before/after comparisons
|
|
- share-buttons.tsx - For social sharing
|
|
- expandable-search.tsx - For search interfaces
|
|
- notification-badge.tsx - For alerts/notifications
|
|
|
|
### Domain-Specific Components
|
|
|
|
#### Blog Components (`/components/blog`)
|
|
|
|
Components specific to the blog functionality.
|
|
|
|
- blog-editor.tsx - For creating/editing blog posts
|
|
- blog-preview.tsx - For displaying blog post cards
|
|
- tag-manager.tsx - For managing post tags
|
|
- publication-scheduler.tsx - For scheduling posts
|
|
- featured-post.tsx - For highlighting posts
|
|
|
|
#### Dashboard Components (`/components/dashboard`)
|
|
|
|
Components for the editorial dashboard.
|
|
|
|
- stats-card.tsx - For dashboard statistics
|
|
- activity-feed.tsx - For recent activities
|
|
- content-queue.tsx - For approval workflows
|
|
- stats-chart.tsx - For data visualization
|
|
- dashboard-header.tsx - For dashboard navigation
|
|
- role-badge.tsx - For user role indication
|
|
|
|
#### Work Components (`/components/work`)
|
|
|
|
Components for literary works management and display.
|
|
|
|
- work-editor.tsx - For creating/editing works
|
|
- work-header.tsx - For work metadata display
|
|
- work-status.tsx - For publication status
|
|
- related-works.tsx - For similar works
|
|
- comparison-view.tsx - For comparing translations
|
|
- EnhancedReadingView.tsx - Enhanced reading experience
|
|
- LineNumberedText.tsx - Text with line numbers
|
|
- EnhancedLineNumberedText.tsx - Advanced text display
|
|
- TranslationSelector.tsx - For selecting translations
|
|
- ReadingControls.tsx - Reading interface controls
|
|
- ReadingView.tsx - Main reading component
|
|
- WorkCard.tsx - Work preview card
|
|
|
|
#### Author Components (`/components/authors`)
|
|
|
|
Components for author profiles and management.
|
|
|
|
- author-editor.tsx - For creating/editing authors
|
|
- author-card.tsx - Author preview card
|
|
- author-header.tsx - Author profile header
|
|
- author-stats.tsx - Author statistics
|
|
- related-authors.tsx - Similar authors
|
|
- AuthorTimeline.tsx - Author timeline component
|
|
- AuthorChip.tsx - Small author reference
|
|
|
|
#### Comment Components (`/components/comment`)
|
|
|
|
Components for the comment system.
|
|
|
|
- comment-thread.tsx - Threaded comments
|
|
- comment-editor.tsx - For writing comments
|
|
- moderation-tools.tsx - For moderating comments
|
|
- comment-filters.tsx - For filtering comments
|
|
|
|
#### Annotation Components (`/components/annotation`)
|
|
|
|
Components for the annotation system.
|
|
|
|
- AnnotationSystem.tsx - Main annotation component
|
|
- annotation-editor.tsx - For creating annotations
|
|
- annotation-browser.tsx - For browsing annotations
|
|
- inline-form.tsx - For inline annotation creation
|
|
- annotation-filters.tsx - For filtering annotations
|
|
|
|
#### User Components (`/components/user`)
|
|
|
|
Components for user profiles and management.
|
|
|
|
- profile-card.tsx - User profile display
|
|
- user-avatar.tsx - User avatar with status
|
|
- reading-progress.tsx - Reading progress tracker
|
|
- bookmarks-manager.tsx - Bookmarks interface
|
|
- preferences-form.tsx - User settings
|
|
|
|
#### Search Components (`/components/search`)
|
|
|
|
Components for search functionality.
|
|
|
|
- SearchBar.tsx - Main search input
|
|
- advanced-search.tsx - Advanced search interface
|
|
- search-filters.tsx - Search filter controls
|
|
- results-toggle.tsx - Grid/list view toggle
|
|
- pagination.tsx - Result pagination
|
|
- sort-controls.tsx - Result sorting
|
|
- FilterSidebar.tsx - Sidebar with filters
|
|
|
|
#### Pattern Components (`/components/patterns`)
|
|
|
|
Reusable component patterns and combinations.
|
|
|
|
- empty-states.tsx - Empty state patterns
|
|
- modal-forms.tsx - Modal dialog forms
|
|
- action-toolbar.tsx - Action button groups
|
|
- filter-controls.tsx - Standardized filters
|
|
- card-grid.tsx - Grid of cards
|
|
|
|
### Layout Components (`/components/layout`)
|
|
|
|
Components for page layout.
|
|
|
|
- PageLayout.tsx - Standard page wrapper
|
|
- DashboardLayout.tsx - Dashboard layout
|
|
- Footer.tsx - Site footer
|
|
- NavHeader.tsx - Navigation header
|
|
|
|
## Implementation Status
|
|
|
|
Most components are currently empty placeholder files. The implementation priority should follow the order outlined in the COMPONENT-IMPLEMENTATION-PLAN.md document.
|
|
|
|
## Key Benefits of This Structure
|
|
|
|
1. **Separation of Concerns**: UI components are separate from domain-specific components
|
|
2. **Reusability**: Common patterns are extracted into reusable components
|
|
3. **Discoverability**: Developers can easily find components by their domain
|
|
4. **Maintainability**: Related components are grouped together
|
|
5. **Scalability**: New domains can be added without affecting existing structure
|