keystone-react

0. Keystone still applies

Every rule from keystone holds — its three questions (change amplification, cognitive load, unknown unknowns), connascence, locality of behaviour, the keystone file, newspaper order, and the seam test. This file adds the React layer.

1. The tier ladder

Name every component <Domain><Tier>. The suffix tells the reader how deep in the tree they are. Outermost to innermost:

UserSettingsPage           route entry — data fetch + providers
  UserSettingsOrchestrator state orchestration, no markup of its own
    ProfileSection         a titled division of the page
      AvatarPanel          a grouping inside a section, no chrome of its own
        AvatarCard         a bordered unit that still makes sense lifted out
          AvatarField      a single control