# CEA Component Library

# **Important Libraries**

### Create React App

The project leverages [CRA](https://github.com/facebook/create-react-app) to get rid of webpack configuration complexity. There is no need for complex webpack configurations for this project.

### Material UI

[Material UI](https://material-ui.com/) provides us a framework and a ton of readily available components to customize and repurpose. This project does not use CSS files. We hook into Material UIs styling system so we can leverage a global theme object and make our app have a more consistent UX / UI.

### Flow

[Flow](https://flow.org/) is a static type checker. It is important that all of our component properties, API services, actions, reducers, etc. are all properly typed to make our code easier to navigate, as well as make it easier to catch errors.

### Jest & Enzyme

Our tests will leverage the [Jest](https://jestjs.io) test runner, which comes installed with Create React App, as well as [Enzyme](https://github.com/airbnb/enzyme) to allow us to easily traverse our components with a jQuery like syntax, and provide other useful APIs.

# **Project Structure**

### Atomic Design

Atomic design is a design methodology for structuring UI. It is superior to the traditional `/component` and `/container` folder structure. [Please read more about the benefits in this article](https://medium.com/better-programming/atomic-design-for-developers-part-1-b41e547a555c).

We use the following folder structure for our UI:

- `/components`
  - `/atoms`
    - the simplest form of UI, consisting of things like headers, labels, input fields, buttons, etc.
  - `/molecules`
    - a combination of atoms that form more complex pieces of our UI, such as a search field with a submit button.
  - `/organisms`
    - build on top of molecules and orchestrate larger parts of the UI. This can include a list of products, a header, forms, etc. Organisms can even include other organisms
  - `/templates`
    - where our pages start to come together, giving context to all of our organisms and molecules by giving them a unified purpose. For example, a template for a contact page will have organisms for headers and forms, and molecules for text fields and navigation bars

We use storybook for isolated development & testing of our UI components. Every new component should have the same general folder structure:

- `/ComponentName`
  - `index.js`
    - component definition. Except for tests, always use default export for smaller bundle sizes.
  - `index.tests.js`
    - All of our unit tests will be here. See the testing section for details.
  - `index.stories.js`
    - This is where our storybook entry is defined for this component. **All components must have a story or pull requests will be rejected.**
  - `index.styles.js`
    - styles should be exported from this file. We don't want to clutter component logic with styling.

### Theme

To override Material UI's default styling, we def

### State

The `/state` folder is where all of our redux actions, action creators, and reducers will be defined.

### Services

`/services` is where our API calls (using [axios](https://github.com/axios/axios)) will live. These should only be called by our redux action creators.