React Component Structure

All our react components have to be built in the export function() pattern to give emphasis to the functional programming paradigm we try to enforce within the entire framework

All components with props need to have the <ComponentName>Props type explicitly defined fixing all the prop types. Here's a reference:

type ComponentNameProps {
  prop1: string // Value to be passed
  prop2: (string) => string // Callback
}

export default function ComponentName({prop1, prop2} : ComponentNameProps ) {
  ...
}

We try to reduce the unknowns for the components by making sure that everything is defined cleanly in the project.

Rules:

1. All API calls need to be inside the pages and no API calls should be made from components, you pass the data, and the event handlers to page that is calling it. By including API calls inside the components, we make them non-reusable in the long run.

2. Every component needs to have storybook file associated with it. We are utilizing the storybook files are our primary locations for user documentation. The storybook should have different instantiations highlighting all the different states the component can have.