Dev: Style

We use Google Style Guide and eslint for automatic enforcement during checkin.

See the Bldrs .eslintrc.js config for details.

File layout

• Default export should be first statement after import, 2 spaces between
• Classes and most important functions should be sorted to top of file
• Inside React component sort: useStore, useState, useHook, local var, useEffect, return <>

Imports

Import sort algorithm is, in order:

1. By package source

• import SecondSortByThis from 'first-sort-by-this'

2. Within first-sort-by-this: code before resources

• JS/TS
• JSON
• CSS
• Icons

3. Within first-sort-by-this: group far to near: 'pkg', then '@org/pkg', then (../../, then ../) to most local (./)
4. Within SecondSortbyThis: alphabetical, capital letters before lowercase

For example:

import NpmLib from 'NpmLib'
import {item} from 'OtherNpmLib'
import LowerPriority from '@mui' // self-hosted 
import OursOtherPackage from '../../up/here.jsx'
import OursThisPackage from './relative/path' // no .js or .jsx
import {ours2} from './foo'
import ShareCss from '../assets/Share.css' // CSS, then SVG, last
import ShareIcon from '../assets/2D_Icons/Share.svg'

data-testid

Source files should not have any test data in them except data-testid attributes.

These should be named something that's likely to be unique on a full page render, with CamelCase replaced by dash-separated names, from most general to most specific component, data-testid={'<component name>-<middle name>-<detail name>'}

For example a Mui Button for OK would become:

data-testid='button-ok'

Our custom ControlButton component for Open would become:

data-testid='control-button-open'