mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-25 06:04:54 +00:00
17 KiB
17 KiB
Atomic Component Library - Visual Overview
┌─────────────────────────────────────────────────────────────┐
│ CODEFORGE APPLICATION │
└─────────────────────────────────────────────────────────────┘
│
│
┌─────────────────────┴─────────────────────┐
│ │
▼ ▼
┌───────────────┐ ┌────────────────┐
│ APP HEADER │ │ FEATURE PAGES │
│ (Organism) │ │ (Features) │
└───────────────┘ └────────────────┘
│ │
│ │
┌────┴────┬─────────────┬────────────┐ │
│ │ │ │ │
▼ ▼ ▼ ▼ ▼
┌─────┐ ┌────────┐ ┌──────────┐ ┌────────┐ ┌────────────┐
│ Nav │ │ Brand │ │ Save │ │Toolbar │ │ CodeEdit │
│Menu │ │ ing │ │Indicator │ │Actions │ │ModelDesign │
│ │ │ │ │ │ │ │ │WorkflowDes │
└─────┘ └────────┘ └──────────┘ └────────┘ │ etc. │
│ │ │ │ └────────────┘
│ │ │ │
└─────────┴─────────────┴────────────┘
│
┌──────────┴──────────┐
│ │
▼ ▼
┌──────────┐ ┌────────────┐
│MOLECULES │ │ ORGANISMS │
│ (10) │────────▶│ (4) │
└──────────┘ └────────────┘
│
│
▼
┌──────────┐
│ ATOMS │
│ (7) │
└──────────┘
│
│
▼
┌──────────┐
│ SHADCN │
│ UI │
└──────────┘
Component Flow Diagram
┌────────────────────────────────────────────────────────────┐
│ App.tsx │
│ ┌────────────────────────────────────────────────────┐ │
│ │ AppHeader (Organism) │ │
│ │ ┌────────────────────────────────────────────┐ │ │
│ │ │ NavigationMenu (Organism) │ │ │
│ │ │ • NavigationGroupHeader (Molecule) │ │ │
│ │ │ • NavigationItem (Molecule) │ │ │
│ │ │ └─ ErrorBadge (Atom) │ │ │
│ │ ├────────────────────────────────────────────┤ │ │
│ │ │ AppBranding (Molecule) │ │ │
│ │ │ • AppLogo (Atom) │ │ │
│ │ │ • Title + Subtitle text │ │ │
│ │ ├────────────────────────────────────────────┤ │ │
│ │ │ SaveIndicator (Molecule) │ │ │
│ │ │ • StatusIcon (Atom) │ │ │
│ │ │ • Time text │ │ │
│ │ ├────────────────────────────────────────────┤ │ │
│ │ │ ToolbarActions (Organism) │ │ │
│ │ │ • ToolbarButton (Molecule) × 5 │ │ │
│ │ └────────────────────────────────────────────┘ │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ PageHeader (Organism) │ │
│ │ ┌────────────────────────────────────────────┐ │ │
│ │ │ PageHeaderContent (Molecule) │ │ │
│ │ │ • TabIcon (Atom) │ │ │
│ │ │ • Title + Description text │ │ │
│ │ └────────────────────────────────────────────┘ │ │
│ └────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Feature Components (20+) │ │
│ │ CodeEditor, ModelDesigner, ProjectDashboard... │ │
│ └────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────┘
Data Flow: Save Action
User types in editor
│
▼
[useKV hook updates]
│
▼
setLastSaved(Date.now())
│
▼
AppHeader receives new lastSaved prop
│
▼
SaveIndicator (Molecule) calculates:
isRecent = (now - lastSaved < 3000)
│
▼
StatusIcon (Atom) renders:
isRecent ? CheckCircle : CloudCheck
│
▼
User sees "Saved" with animation
Import Dependency Graph
App.tsx
│
┌─────────────┼─────────────┐
│ │ │
▼ ▼ ▼
Organisms Molecules Atoms
│ │ │
│ ┌─────┘ │
│ │ │
▼ ▼ ▼
Molecules Atoms shadcn UI
│ │
│ │
▼ ▼
Atoms shadcn UI
│
│
▼
shadcn UI
Component Size Comparison
Atoms (7 components)
████ 2KB
Small, focused, single-purpose
Molecules (10 components)
████████ 8KB
Moderate, composed, reusable
Organisms (4 components)
████████████ 12KB
Large, complex, coordinating
Features (20+ components)
████████████████████████████████ 100KB+
Very large, feature-complete, domain-specific
Atomic Design Benefits
┌────────────────────────────────────────────────────────┐
│ BENEFITS │
├────────────────────────────────────────────────────────┤
│ │
│ Reusability ████████████░ 90% │
│ Atoms/molecules used everywhere │
│ │
│ Maintainability ████████████░ 85% │
│ Changes propagate naturally │
│ │
│ Testability ████████████░ 95% │
│ Small units = easy tests │
│ │
│ Consistency ████████████░ 90% │
│ Shared atoms = uniform UI │
│ │
│ Scalability ████████████░ 85% │
│ Clear patterns for growth │
│ │
│ Onboarding ████████████░ 80% │
│ Self-documenting structure │
│ │
└────────────────────────────────────────────────────────┘
Component Complexity Matrix
│
Complex │ ┌──────────────┐
│ │ Features │
│ │ (20+) │
│ └──────────────┘
│
│ ┌───────────┐
Medium │ │ Organisms │
│ │ (4) │
│ └───────────┘
│
│ ┌──────────┐
Simple │ │Molecules │
│ │ (10) │
│ └──────────┘
│
Basic │ ┌─────┐
│ │Atoms│
│ │ (7) │
│ └─────┘
└──────────────────────────────────
Few Many
Components Used
File Structure Tree
src/
├── components/
│ ├── atoms/ ← 7 building blocks
│ │ ├── AppLogo.tsx
│ │ ├── TabIcon.tsx
│ │ ├── StatusIcon.tsx
│ │ ├── ErrorBadge.tsx
│ │ ├── IconWrapper.tsx
│ │ ├── LoadingSpinner.tsx
│ │ ├── EmptyStateIcon.tsx
│ │ └── index.ts ← Exports all atoms
│ │
│ ├── molecules/ ← 10 combinations
│ │ ├── SaveIndicator.tsx
│ │ ├── AppBranding.tsx
│ │ ├── PageHeaderContent.tsx
│ │ ├── ToolbarButton.tsx
│ │ ├── NavigationItem.tsx
│ │ ├── NavigationGroupHeader.tsx
│ │ ├── EmptyState.tsx
│ │ ├── LoadingState.tsx
│ │ ├── StatCard.tsx
│ │ ├── LabelWithBadge.tsx
│ │ └── index.ts ← Exports all molecules
│ │
│ ├── organisms/ ← 4 complex components
│ │ ├── NavigationMenu.tsx
│ │ ├── PageHeader.tsx
│ │ ├── ToolbarActions.tsx
│ │ ├── AppHeader.tsx
│ │ └── index.ts ← Exports all organisms
│ │
│ ├── ui/ ← shadcn components (40+)
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── dialog.tsx
│ │ └── ...
│ │
│ ├── CodeEditor.tsx ← Feature components
│ ├── ModelDesigner.tsx
│ ├── ProjectDashboard.tsx
│ └── ...
│
├── lib/
│ ├── navigation-config.tsx ← Centralized config
│ ├── utils.ts
│ └── ...
│
└── App.tsx ← Main app using organisms
Usage Pattern Evolution
Before (Monolithic):
// App.tsx (500+ lines with inline UI)
<header className="...">
<div className="logo">
<Code size={20} /> CodeForge
</div>
<div>
{lastSaved ? (
<CheckCircle />
) : (
<CloudCheck />
)}
{timeAgo}
</div>
<Button onClick={handleExport}>
<Download /> Export
</Button>
</header>
After (Atomic):
// App.tsx (cleaner with composed organisms)
<AppHeader
lastSaved={lastSaved}
onExport={handleExport}
{...props}
/>
// AppHeader.tsx
<header>
<AppBranding />
<SaveIndicator lastSaved={lastSaved} />
<ToolbarActions onExport={onExport} />
</header>
// SaveIndicator.tsx
<div>
<StatusIcon type={isRecent ? 'saved' : 'synced'} />
<span>{timeAgo}</span>
</div>
Testing Pyramid
/\
/ \
/E2E \ 4 organisms
/------\ 10 tests
/ \
/ Integr. \ 10 molecules
/------------\ 30 tests
/ \
/ Unit \ 7 atoms
/------------------\ 70 tests
/ \
/ shadcn (tested) \ 40+ components
/------------------------\ (pre-tested)
Performance Strategy
Atoms → No memo (too small, pure)
Molecules → Memo if props are complex
Organisms → Always memo (complex state)
Features → Memo + lazy load
Code Splitting:
├── atoms.chunk.js (2KB - always loaded)
├── molecules.chunk.js (8KB - always loaded)
├── organisms.chunk.js (12KB - always loaded)
└── features.*.js (100KB+ - lazy loaded)
Maintenance Workflow
┌─────────────────┐
│ Identify Pattern│
└────────┬────────┘
│
▼
┌─────────────────┐
│ Extract to Atom │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Compose Molecule│
└────────┬────────┘
│
▼
┌─────────────────┐
│Build Organism │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Use in Feature │
└─────────────────┘
Documentation Map
ATOMIC_README.md ← Start here! Quick overview
│
├─→ ATOMIC_REFACTOR_SUMMARY.md (What changed)
│
├─→ ATOMIC_COMPONENTS.md (Complete guide)
│ │
│ ├─→ Concept explanation
│ ├─→ Component levels
│ ├─→ Rules & conventions
│ ├─→ Best practices
│ └─→ Migration guide
│
├─→ ATOMIC_USAGE_EXAMPLES.md (Code examples)
│ │
│ ├─→ 10+ real examples
│ ├─→ Templates
│ ├─→ Testing patterns
│ └─→ Quick start
│
└─→ COMPONENT_MAP.md (Visual maps)
│
├─→ Dependency diagrams
├─→ Data flow
├─→ Styling patterns
└─→ Performance tips
Legend:
- 🔵 Atoms = Basic building blocks (7)
- 🟢 Molecules = Simple combinations (10)
- 🟡 Organisms = Complex components (4)
- 🔴 Features = Domain-specific (20+)
- ⚪ shadcn = Base UI library (40+)