Coding Style

The project's ESLint configuration should enforce most code style rules, but there are some outliers that it won't flag that we will enforce in the PR process. These rules are outlined below.

Double breaks after imports or import groups and before exports

✅Good

import React, { ReactElement } from 'react';
import clsx from 'clsx';


function Button() {
    // ...some component stuff
}


export default Button;

🚫Bad

import React, { ReactElement } from 'react';
import clsx from 'clsx';

function Button() {
    // ...some component stuff
}

export default Button;

Props Destructuring

Component props should be destructured in the function declaration rather than the function block. This is primarily for consistency, but also necessary to play nicely with Storybook docs.

✅Good

function Button({
    children,
    className,
    ...otherProps
}: Props): ReactElement ) {
    // ...some component stuff
}

🚫Bad

function Button(props: Props): ReactElement ) {
    const { children, className, ...otherProps } = props;
    // ...some component stuff
}

Naming Attributes

• Attributes should be treated as overrides (only included when overriding default behavior) and should default to falsey (typically by being undefined).
• Boolean attributes should be written in camel case, and should start with an active verb, like is or has.
  • This includes ones that are equivalent to HTML attributes (ex: required should be written as isRequired).

✅Good

function Widget({
    children,
    className,
    hasError,
    isDisabled,
    ...otherProps
}: Props): ReactElement ) {
    // ...some component stuff
}

🚫Bad

function Widget({
    children,
    className,
    disabled,
    error,
    ...otherProps
}: Props): ReactElement ) {
    // ...some component stuff
}