Skip to content

Component Documentation - README

Status: Phase 3 In Progress
Tier 1: ✅ Complete (15/15)
Tier 2: 🔄 In Progress
Tier 3: ⏳ Pending

Overview

Comprehensive documentation of all 76 reusable components in the machineagents-fe frontend application, organized by complexity tier.

Documentation Structure

Tier 1: Deep Dive (15 components) - ✅ COMPLETE

Files:

Coverage: Exhaustive code-level analysis with:

  • Complete state variable documentation
  • Full API integration details
  • Code snippets and examples
  • Error handling patterns
  • Architectural insights
  • Issues and limitations identified

Components:

  1. AboutUsVideo (133 lines) - Video player
  2. DynamicPageRenderer (38 lines) - CMS mapper
  3. GlobalVideoController (36 lines) - Init component
  4. LanguageSelectorSection (432 lines) - LARGEST
  5. OurAiAgents (329 lines) - Multi-video grid
  6. PlugAndPlaySection (324 lines) - Platform logos
  7. UseCases (287 lines) - Video carousel
  8. PricingSection (296 lines) - Dynamic pricing
  9. HeroSection (144 lines) - Homepage hero
  10. VideoDemoSection - Video showcase
  11. TryFreeAgentSection - Free trial CTA
  12. ProtectedLayout (49 lines) - Auth guard
  13. HomePageClient (69 lines) - Homepage wrapper 14-15. Referenced wizard components

Tier 2: Standard (30 components) - 🔄 IN PROGRESS

Files:

Coverage: Standard documentation with:

  • Props interfaces
  • Key features
  • Usage examples
  • Integration points
  • Basic state management

Tier 3: Quick Reference (31 components) - ⏳ PENDING

Files:

Coverage: Quick reference with:

  • Purpose
  • Props
  • Usage example

Component Categories

By Location

src/components/ (3 files)

  • Top-level utility components

src/components/home/ (16 files)

  • Homepage section components

src/app/components/ (57 files)

  • Application-level components

By Function

Video Management (5):

  • AboutUsVideo, GlobalVideoController
  • LanguageSelectorSection, OurAiAgents, UseCases

CMS Integration (2):

  • DynamicPageRenderer, HomePageClient

Authentication (1):

  • ProtectedLayout

Chatbot Wizards (7):

  • Profile, Purpose, QA, Text, UTM, Voice, Video, Avatar, FileUpload

Modals (7):

  • Popup, Billing, Knowledge, Premium, Share, UserProfile, WebsitePreview

Navigation (6):

  • HomeNavbar, Navbar, Sidebar, BackButton, BillingSidebar, NavigationWrapper

Forms (4):

  • ContactForm, ContactForm2, Login, FormSetup

UI Elements (4):

  • FeatureCard, KeyFeatures, MachineCard, Loader

Home Sections (16):

  • Hero, VideoDemo, OurAiAgents, PlugAndPlay, HowItWorks, Language, Vision, UseCases, etc.

Key Patterns Identified

1. Video Coordination (3-Layer System)

Layer 1: mobileVideoManager - Single video on mobile
Layer 2: globalVideoManager - App-wide coordination
Layer 3: Custom events - Cross-component communication

Components: AboutUsVideo, LanguageSelectorSection, OurAiAgents, UseCases

2. Strapi CMS Integration

DynamicPageRenderer: Maps Strapi components to React components
Component Map: 8 homepage sections registered
Usage: Dynamic section rendering from CMS

3. Authentication Patterns

ProtectedLayout: Session storage + shared link support
Redirect Logic: Auto-redirect to /login on auth failure
Loading States: Spinner during auth check

4. Code Health Issues

Dead Code: 282 lines commented (PlugAndPlaySection - 87%)
Unused Props: HeroSection, PlugAndPlaySection ignore CMS props
Hardcoded Values: Multiple components bypass prop system

Progress Tracking

Total Components: 76
Tier 1 Complete: 15 (20%)
Tier 2 In Progress: 0/30 (0%)
Tier 3 Pending: 0/31 (0%)

Overall: 20% Complete

Last Updated: Phase 3 Tier 1 Complete (December 29, 2024)
Next: Tier 2 Standard Documentation