Component wireframes and interactions reference diagram

[pratishta]

Going off the state management discussion here and our discussion about wanting a documented reference for our components and interactions. We should have this prepared before work on the front-end begins in earnest because different developers may have different ideas of how the UI interactions work which could cause conflicting work we'd have to reconcile down the line. A visual representation would serve as a better / faster reference for small front-end tickets than going based off routes and bullet points of interactions

Acceptance criteria

• [ ] Discussion / front-end meta ticket / this issue updated with diagram of component wireframes
• [ ] Component names finalized (as can be)
• [ ] Component relationships depicted (generic / reusable components such as Panel then children components such as WelcomePanel and ContentPanel)
• [ ] Routes ???

Visual reference

https://www.figma.com/design/3FqgaQqGEhzhqLaeDrK45t/Routes-(WIP)?node-id=0-1&t=SYPZwBzwTlDGHETY-0

[pratishta]

This design work could (should 👀) be collaborative, so starting on Figma and then moving the finalized digram here could be a good option.

[TangoYankee]

POC for how to manage state: https://github.com/NYCPlanning/ae-cp-map/tree/exp/grid-layout