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:

1. By source

• import Thing from 'sort-by-this'

2. Alphabetical, capital letters before lowercase
3. Group far to near: 'pkg', then '@org/pkg', then (../../, then ../) to most local (./)
4. Code before resources

• JS/TS
• JSON
• CSS
• Icons

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 ControlButton for Open would become:

data-testid={'control-button-open'}