low-code-react-app-b/docs/history/REFACTORING_PLAN.md

Comprehensive Refactoring Plan

Overview

CodeForge has grown to include 44 iterations of features, resulting in component files exceeding 150 LOC and duplicated logic. This plan establishes a systematic refactoring approach to create a maintainable, scalable architecture.

Goals

1. ✅ All components < 150 LOC
2. ✅ Custom hooks library for shared logic
3. ✅ JSON-driven page orchestration
4. ✅ Atomic component design pattern
5. ✅ Type-safe architecture
6. ✅ Zero breaking changes to existing features

Phase 1: Hook Extraction Library

Core Hooks to Extract

• use-feature-ideas.ts - Feature idea CRUD + state management
• use-idea-connections.ts - Edge/connection validation & 1:1 mapping
• use-reactflow-integration.ts - ReactFlow nodes/edges state
• use-idea-groups.ts - Group management logic
• use-ai-generation.ts - AI-powered generation
• use-form-dialog.ts - Generic form dialog state
• use-node-positions.ts - Node position persistence

Hook Organization

src/hooks/
├── feature-ideas/
│   ├── use-feature-ideas.ts
│   ├── use-idea-connections.ts
│   ├── use-idea-groups.ts
│   └── index.ts
├── reactflow/
│   ├── use-reactflow-integration.ts
│   ├── use-node-positions.ts
│   ├── use-connection-validation.ts
│   └── index.ts
├── dialogs/
│   ├── use-form-dialog.ts
│   ├── use-confirmation-dialog.ts
│   └── index.ts
└── ai/
    ├── use-ai-generation.ts
    ├── use-ai-suggestions.ts
    └── index.ts

Phase 2: Atomic Component Breakdown

FeatureIdeaCloud Component Tree

Current: 1555 LOC → Target: Multiple components < 150 LOC each

FeatureIdeaCloud/ (orchestrator - 80 LOC)
├── nodes/
│   ├── IdeaNode.tsx (120 LOC)
│   ├── GroupNode.tsx (80 LOC)
│   └── NodeHandles.tsx (60 LOC)
├── dialogs/
│   ├── IdeaEditDialog.tsx (140 LOC)
│   ├── IdeaViewDialog.tsx (100 LOC)
│   ├── GroupEditDialog.tsx (120 LOC)
│   ├── EdgeEditDialog.tsx (90 LOC)
│   └── DebugPanel.tsx (140 LOC)
├── panels/
│   ├── ToolbarPanel.tsx (80 LOC)
│   ├── HelpPanel.tsx (60 LOC)
│   └── DebugPanel.tsx (moved above)
└── utils/
    ├── connection-validator.ts (100 LOC)
    └── constants.ts (50 LOC)

Phase 3: JSON Page Configuration

Configuration Format

{
  "pages": [
    {
      "id": "dashboard",
      "title": "Dashboard",
      "icon": "ChartBar",
      "component": "ProjectDashboard",
      "enabled": true,
      "shortcut": "ctrl+1"
    },
    {
      "id": "ideas",
      "title": "Feature Ideas",
      "icon": "Lightbulb",
      "component": "FeatureIdeaCloud",
      "enabled": true,
      "toggleKey": "ideaCloud",
      "shortcut": "ctrl+i"
    }
  ]
}

Page Orchestrator

// src/config/pages.json - Configuration
// src/lib/page-loader.ts - Dynamic loader
// src/components/PageOrchestrator.tsx - Runtime renderer

Phase 4: Component Size Audit

Components Requiring Refactoring

1. FeatureIdeaCloud.tsx - 1555 LOC → 8 components
2. App.tsx - 826 LOC → Split orchestration
3. CodeEditor.tsx - Check size
4. ComponentTreeBuilder.tsx - Check size
5. WorkflowDesigner.tsx - Check size

Phase 5: Type Safety

Centralized Types

src/types/
├── feature-ideas.ts
├── projects.ts
├── components.ts
├── workflows.ts
└── common.ts

Implementation Order

Step 1: Create Hook Library (This Session)

• Extract all FeatureIdeaCloud hooks
• Extract generic dialog hooks
• Test in isolation

Step 2: Break Down FeatureIdeaCloud (This Session)

• Create atomic components
• Maintain feature parity
• Test all features work

Step 3: JSON Page Config (This Session)

• Define page schema
• Create loader utilities
• Wire up to App.tsx

Step 4: Verify & Test (This Session)

• All components < 150 LOC ✓
• All features functional ✓
• Performance maintained ✓

Success Metrics

• ✅ No component > 150 LOC
• ✅ No duplicated logic
• ✅ All features work identically
• ✅ Type safety maintained
• ✅ Performance improved
• ✅ Developer velocity increased

Notes

• Preserve all existing functionality
• Maintain backward compatibility
• Keep user experience identical
• Improve developer experience
• Enable future scalability