mukimovd/tercul-frontend
1
0
Fork 0
mirror of https://github.com/SamyRai/tercul-frontend.git synced 2025-12-27 04:51:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
358f640eb6
tercul-frontend/COMPONENT-STRUCTURE.md
Damir Mukimov 4a23f496fa
Major frontend development updates 
- 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
2025-11-27 03:44:09 +01:00

6.4 KiB
Raw Blame History

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