Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Code Quality
  3. Refactoring Guide

Refactoring Guide

Campsite Rule patterns for incremental tech debt reduction.

Quick Reference

Campsite Rule: Leave code a little better than you found it.

Priority by risk:

  1. Low-risk (auto-apply): Default exports, magic strings, inline styles
  2. Medium-risk (cautiously): Type improvements, useEffect patterns, UI modernization
  3. High-risk (ask first): GraphQL co-location, hook extraction, file splitting

Guiding Principle

"Leave the code a little better than you found it."—Baden-Powell's Campsite Rule

Pragmatic over perfect:

  • Only refactor when direct replacement exists
  • Deprecation signals refactoring opportunity
  • Leave as-is when no replacement exists
  • Small improvements compound over time

Priority Matrix

PriorityPatternRiskAuto-apply?
1Default → Named exportsLOWYes
2Magic strings → EnumsLOWYes
3Inline styles → Box propsLOWYes
4any → Proper typesMEDIUMYes
5useEffect anti-patternsMEDIUMCautiously
6UI modernizationMEDIUMYes (when replacement exists)
7GraphQL co-locationMEDIUMAsk first
8Extract hooksHIGHAsk first
9Split large filesHIGHAsk first

Low-Risk Patterns

Default → Named Exports

Benefits: Better tree-shaking, consistent naming, easier refactoring

Magic Strings → Enums

Benefits: Type safety, exhaustiveness checking, autocomplete

Inline Styles → Box Props

Benefits: Design token consistency, no inline styles

Medium-Risk Patterns

any → Proper Types

useEffect Anti-patterns

UI Modernization

Only refactor when @prepared/ui-* replacement exists:

High-Risk Patterns

GraphQL Co-location

Move centralized GraphQL operations to component directories:

Ask first - moves files, affects imports

Extract Hooks

Ask first - creates new files, significant refactor

Split Large Files

Files >500 lines should be split:

Ask first - creates multiple files, affects imports

Decision Flowchart

Example: Applying Campsite Rule

Task: Add loading state to IncidentCard.tsx

File contains:

  • Default export ❌
  • Inline styles ❌
  • MUI Button ❌
  • MUI Autocomplete ⚠️

Apply Campsite Rule:

  1. ✅ Convert default export → named export (low-risk)
  2. ✅ Replace inline styles → FlexBox props (low-risk)
  3. ✅ Replace MUI Button → @prepared911/ui-core Button (replacement exists)
  4. ⏸️ Leave MUI Autocomplete as-is (no @prepared replacement)
  5. ✅ Add loading state (primary task)

Result: File is incrementally better without perfect refactor.

Tech Debt Quantification

Current tech debt in dispatch app:

  • 590 files with default exports
  • 368 magic strings across 225 files
  • 301 inline styles across 173 files
  • 149 useEffect with empty deps across 109 files
  • 30+ files over 500 lines
  • 800 MUI imports across 472 files
  • 636 legacy UI imports across 574 files

Goal: Reduce incrementally through Campsite Rule.

Related Documentation

  • Component Patterns - Component organization
  • TypeScript Patterns - Type safety
  • UI Components - @prepared/ui-* packages

Reference Files

For more detailed technical guidance, see these reference files:

  • react-cleanup-patterns SKILL.md
  • patterns/*.md - 9 pattern files

Previous

Code quality / JavaScript Patterns

Next

Architecture / File Organization

On this page

Quick Reference
Guiding Principle
Priority Matrix
Low-Risk Patterns
Default → Named Exports
Magic Strings → Enums
Inline Styles → Box Props
Medium-Risk Patterns
any → Proper Types
useEffect Anti-patterns
UI Modernization
High-Risk Patterns
GraphQL Co-location
Extract Hooks
Split Large Files
Decision Flowchart
Example: Applying Campsite Rule
Tech Debt Quantification
Related Documentation
Reference Files