Refactor App.tsx from god component to context-based architecture
Replace prop drilling with React context providers. App.tsx shrinks from 427 lines to ~80 lines of pure layout. Components consume shared state directly via 7 context providers instead of threading 50+ props. Key changes: - 7 context providers wrapping existing hooks (encounter, bestiary, player characters, side panel, theme, bulk import, initiative rolls) - 2 coordinating hooks extracted from App.tsx (useInitiativeRolls, useAutoStatBlock) - All 9 affected components refactored from prop-based to context-based - 6 test files updated to use providers or context mocks - Prop count enforcement script (max 8 per component interface) - Constitution principle II-A added (context-based state flow) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
<!--
|
||||
Sync Impact Report
|
||||
───────────────────
|
||||
Version change: 2.2.1 → 3.0.0 (MAJOR — specs describe features not changes, proportional workflow)
|
||||
Version change: 3.0.0 → 3.1.0 (MINOR — new principle II-A: context-based state flow)
|
||||
Modified sections:
|
||||
- Development Workflow: specs are living feature documents; full pipeline for new features only
|
||||
- Core Principles: added II-A. Context-Based State Flow (max 8 props, context over prop drilling)
|
||||
Templates requiring updates: none
|
||||
-->
|
||||
# Encounter Console Constitution
|
||||
@@ -38,6 +38,22 @@ dependency direction:
|
||||
|
||||
A module in an inner layer MUST NOT import from an outer layer.
|
||||
|
||||
### II-A. Context-Based State Flow
|
||||
|
||||
UI components MUST consume shared application state via React context
|
||||
providers, not prop drilling. Props are reserved for per-instance
|
||||
configuration (e.g., a specific data item, a layout variant, a ref).
|
||||
|
||||
- Components MUST NOT declare more than 8 explicit props in their
|
||||
own interface. This is enforced by `scripts/check-component-props.mjs`
|
||||
at pre-commit.
|
||||
- Generic UI primitives (`components/ui/`) that extend HTML element
|
||||
attributes are exempt — only explicitly declared props count, not
|
||||
inherited HTML attributes.
|
||||
- Coordinating hooks that consume multiple contexts (e.g.,
|
||||
`useInitiativeRolls`) are preferred over wiring callbacks through
|
||||
a parent component.
|
||||
|
||||
### III. Clarification-First
|
||||
|
||||
Before making any non-trivial assumption during specification,
|
||||
@@ -140,4 +156,4 @@ MUST comply with its principles.
|
||||
**Compliance review**: Every spec and plan MUST include a
|
||||
Constitution Check section validating adherence to all principles.
|
||||
|
||||
**Version**: 3.0.0 | **Ratified**: 2026-03-03 | **Last Amended**: 2026-03-11
|
||||
**Version**: 3.1.0 | **Ratified**: 2026-03-03 | **Last Amended**: 2026-03-19
|
||||
|
||||
Reference in New Issue
Block a user