Project coding standards and conventions

Table of Content

JavaScript files must use the .js file extension

This project does not use TypeScript or ECMAScript modules, so .ts and .mjs extensions are not used. The .jsx extension is unnecessary because all files are processed for JSX.
GraphQL files must use the .graphql extension

The build process parses and analyzes GraphQL files based on this extension.
Filenames must be in camel case

Example: camelCasedFilename.js

This is done for consistency and readability. Even files defining a component, such as the Button component, must have lower case file names.
React component folders must use proper case

Example: ProperCaseDirectory

Components must always be directories and never single files. The ProperCase indicates that the directory is a component.
Names for .css and .js files for the same component must match

Example: checkbox.css and checkbox.js

This is done for consistency, readability, and future extensibility.
Use a container.js file to wrap simple, presentational components with a Higher-Order Component

Presentational components are meant to be simple and portable. They require only props as arguments and no other external connections.

Wrapping these components with an HOC allows them to connect to the application's router, Redux store, and network/cache clients.

Do not use underscores and hyphens in names

Data from the GraphQL API is snake_case and all other property and variable names are camelCase. This helps to visually distinguish between internal variable names and data objects from the API.

Each React component is contained in a single folder

React components must be independent and interchangeable. Their tests, sub-components, stylesheets, and utilities should be self-contained. They should not be reliant on other components without explicitly naming them in import strings.
A component's public API is exposed through its index.js file

The index.js file is a common standard in a React project. Naming a file index.js allows a component to import another component using its directory name.
```
// src/components/Button/index.js

export { default } from './button';
```
```
// src/components/Form/form.js

import Button from 'src/components/Button'
```
In the example provided, the Button component exports its components in it's index.js file and the form.js module imports that button by only referring to the directory.

Text editors can become confusing to navigate when files with the same name are open. Therefore, the index.js file should be a short (one or two line) "pass-through" file which exports a named sibling file.

A component typically exports only a default export, which is the component constructor itself.