Checklist for react components

[ellisonbg]

Hi, as I work on this repo, I am finding that the react components are tightly coupled together, making it difficult to understand what is going on and make changes to behavior and styling. Here is a checklist, that will help us to wrangle the components into shape...

• One component per file, with styles (using typestyle) in that file.
• Setup storybook and render all components using it to verify independence.
• Design atoms (buttons, form controls, etc.) should all have 0 margin. Containers should space children using their own padding, and margins on the children (using child selectors).
• Each component should have a CSS class that matches the name of the component, to make it easy to go back and forth between the rendered app and the code base.
• Don't use factory functions on components to generate children components - pull those things out into their own components.
• Use pure functional components unless a class is absolutely needed.