react-package-builder

React Package Builder

Create decoupled, reusable React packages for the monorepo.

Workflow

1. Audit existing component for app-specific dependencies
2. Design props contract (see props-patterns.md)
3. Scaffold package structure (see package-structure.md)
4. Verify decoupling (see decoupling-checklist.md)
5. Create adapter in consuming app

Quick Start

# Create package directory
mkdir -p packages/<package-name>/src/{ui,hooks,engine,styles}

# Create package.json
cat > packages/<package-name>/package.json << 'EOF'
{
  "name": "@raamattu-nyt/<package-name>",
  "version": "1.0.0",
  "main": "src/index.ts",
  "peerDependencies": { "react": ">=18" }
}
EOF

Core Principles

Props Contract Template

interface ComponentProps {
  // ---- Content ----
  title: string;
  items: Item[];

  // ---- Index (controlled/uncontrolled) ----
  currentIndex?: number;
  defaultIndex?: number;
  onIndexChange?: (index: number, meta: { source: string }) => void;

  // ---- Signals (parent handles audio/media) ----
  onToggleAudio?: (enabled: boolean) => void;
  onVolumeChange?: (volume: number) => void;

  // ---- Lifecycle ----
  onExit?: () => void;
}

References

• package-structure.md — Directory layout, naming conventions
• props-patterns.md — Controlled/uncontrolled, engine abstraction
• decoupling-checklist.md — Verify no app dependencies