CEA Component Library

Important Libraries

Create React App

The project leverages CRA to get rid of webpack configuration complexity. There is no need for complex webpack configurations for this project.

Material UI

Material UI 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 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 test runner, which comes installed with Create React App, as well as 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.

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) will live. These should only be called by our redux action creators.