Guidelines for developing the user interface

As with everything, these are evergreen pragmatic rules and should be taken with a grain of salt!

This should document anything that's external to our already opinionated linting and formatting rules (e.g. https://prettier.io/docs/en/option-philosophy.html).

Attributes of a highly usable user interface

• ⚡ Fast / performant
• 📱 Responsive (consider users on all different viewport sizes like mobile)
• 🗣️ Accessible

Codebase

List of high level codebase guidelines to follow when working on the frontend (FE) of Climate Connect.

• Alphabetize props when possible
• Delineate relative and 3rd party imports with a newline
• Ensure all text is added to frontend/public/texts... so that translations can be added for German 🇩🇪
• Prefer newlines for if and else blocks over same line
• When introducing new elements or components try to always use Material UI components where possible for consistency. This also allows you to easily use spacing, colors and more from our theme and the Material UI default theme where we didn't override it.
• Use JavaScript ES6 functions wherever possible and applicable. This includes using map, reduce, ... instead of manually looping through arrays/objects, let/const instead of var, arrow functions for everything except a component's default function.
• For CSS prefer display: "flex" over display: "grid" unless grid is necessary to display something.

React

• <> over React.Fragment
• Direct calls to hooks like useEffect over React.useEffect

The CC Design System

As of October 2021, CC does not have a comprehensive official codified component library to represent our brand and design. This will be a work in progress, but as you work in the codebase, reach out to the team for opportunities to continue to build more UX consistency into some of our components and patterns (e.g. the difference between a primary or contained MUI Button).

In the future, we should consider moving spacing outside of inline application to components, directly into a few standard layout and spacing components, to create more determinism in layout, e.g. https://seek-oss.github.io/braid-design-system/foundations/layout#box