Project coding standards and conventions

File naming and directory structure

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.

Their directories however are in ProperCase.

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.