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
}