Add comma-dangle requirement for eslint

.eslintrc.js

@@ -6,16 +6,16 @@ const tsSpecBase = {
 	parser: '@typescript-eslint/parser',
 	plugins: [
 		'@typescript-eslint',
-		'jest'
+		'jest',
 	],
 	extends: [
 		'eslint:recommended',
 		'plugin:@typescript-eslint/recommended',
-		'plugin:jest/all'
+		'plugin:jest/all',
 	],
 	rules: {
-		"jest/lowercase-name": ["error", { "ignore": ["describe"] }]
-	}
+		"jest/lowercase-name": ["error", { "ignore": ["describe"] }],
+	},
 };
 
 
@@ -37,7 +37,7 @@ const tsBase = {
 		'eslint:recommended',
 		'plugin:@typescript-eslint/recommended',
 		"plugin:react-hooks/recommended",
-	]
+	],
 };
 
 const tsSettings = _.cloneDeep(tsBase);
@@ -55,29 +55,30 @@ module.exports = {
 			"files": ['*.js', 'config/webpack/**/*.js'],
 			extends: [
 				'eslint:recommended',
-				'plugin:node/recommended'
+				'plugin:node/recommended',
 			],
 		},
 		tsSpec,
 		tsxSpec,
 		tsSettings,
-		tsxSettings
+		tsxSettings,
 	],
 	"rules": {
 		"linebreak-style": [
 			"error",
-			"unix"
+			"unix",
 		],
 		"semi": [
 			"error",
-			"always"
+			"always",
 		],
 		"no-trailing-spaces": ["error"],
 		"indent": ["error", "tab", {"SwitchCase": 1}], // we use tabs for accessibility
+		"comma-dangle": ["error", "always-multiline"],
 	},
 	"settings": {
 		"react": {
-			"version": "detect"
+			"version": "detect",
 		},
-	}
+	},
 };

app/javascript/common/money.ts

@@ -265,7 +265,7 @@ export class Money {
 	toJSON(): MoneyAsJson {
 		return {
 			amount: this.amount,
-			currency: this.currency
+			currency: this.currency,
 		};
 	}
 }

app/javascript/components/formik/MoneyTextField.spec.tsx

@@ -39,7 +39,7 @@ function FormikHandler(props: { value: Money, onChange:(args:{value:Money})=> vo
 
 FormikHandler.defaultProps = {
 	// eslint-disable-next-line @typescript-eslint/no-empty-function
-	onChange: () => {}
+	onChange: () => {},
 };
 
 describe('MoneyTextField', () => {

app/javascript/components/formik/MoneyTextField.tsx

@@ -35,7 +35,7 @@ export function useSerializeMoney(props:UseSerializeMoneyProps) : ReturnType<typ
 
 	const i18n = useI18nCurrencyInput({...other, locale,
 		currency,
-		value:amount
+		value:amount,
 	});
 
 

app/javascript/components/hooks/useSteps.spec.ts

@@ -3,7 +3,6 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 import useSteps, { KeyedStep, KeyedStepMap } from './useSteps';
 import fromPairs from 'lodash/fromPairs';
-import { initial } from 'lodash';
 
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -26,7 +25,7 @@ describe('.next', () => {
 	it('nothing changes if next is disabled', async () => {
 		expect.assertions(2);
 		const { result } = renderHook(() => useSteps({ steps: [{ key: 'i' }, { key: '2' }], ...stepActions }, {
-			disabled: { 'i': false, '2': true }
+			disabled: { 'i': false, '2': true },
 		}));
 		const original = result.current;
 		act(() => {
@@ -70,7 +69,7 @@ describe('.back', () => {
 		expect.assertions(2);
 		const { result } = renderHook(() => useSteps({ steps: [{ key: 'i' }, { key: '2' }, { key: 'last' }], ...stepActions }, {
 			activeStep: 2,
-			disabled: { 'i': true, '2': true, 'last': false }
+			disabled: { 'i': true, '2': true, 'last': false },
 		}));
 		const original = result.current;
 		act(() => {
@@ -85,7 +84,7 @@ describe('.back', () => {
 		expect.assertions(2);
 		const { result } = renderHook(() => useSteps({ steps: [{ key: 'i' }, { key: '2' }, { key: 'last' }], ...stepActions }, {
 			activeStep: 1,
-			disabled: { 'i': true, '2': false, 'last': false }
+			disabled: { 'i': true, '2': false, 'last': false },
 		}));
 		const original = result.current;
 		act(() => {
@@ -139,7 +138,7 @@ describe('.goto', () => {
 	it('nothing changes if goto value is disabled', async () => {
 		expect.assertions(2);
 		const { result } = renderHook(() => useSteps({ steps: [{ key: 'i' }, { key: '2' }], ...stepActions }, {
-			disabled: { 'i': false, '2': true }
+			disabled: { 'i': false, '2': true },
 		}));
 		const original = result.current;
 		act(() => {
@@ -154,7 +153,7 @@ describe('.goto', () => {
 		expect.assertions(2);
 		const { result } = renderHook(() => useSteps({ steps: [{ key: 'i' }, { key: '2' }], ...stepActions }, {
 			activeStep: 1,
-			disabled: { 'i': false, '2': true }
+			disabled: { 'i': false, '2': true },
 		}));
 		const original = result.current;
 		act(() => {
@@ -197,7 +196,7 @@ describe('.first', () => {
 		expect.assertions(2);
 		const { result } = renderHook(() => useSteps({ steps: [{ key: 'i' }, { key: '2' }], ...stepActions }, {
 			activeStep: 1,
-			disabled: { 'i': true, '2': false }
+			disabled: { 'i': true, '2': false },
 		}));
 		const original = result.current;
 		act(() => {
@@ -239,7 +238,7 @@ describe('.last', () => {
 	it('changes nothing if last is disabled', async () => {
 		expect.assertions(2);
 		const { result } = renderHook(() => useSteps({ steps: [{ key: 'i' }, { key: '2' }], ...stepActions }, {
-			disabled: { 'i': false, '2': true }
+			disabled: { 'i': false, '2': true },
 		}));
 		const original = result.current;
 		act(() => {
@@ -270,7 +269,7 @@ describe('.disable', () => {
 		[[{ key: 'i' }, { key: '2' }], 1, { i: false, 2: false }, 1, 0, { i: false, 2: true }],
 		[[{ key: 'i' }, { key: '2' }], 0, { i: false, 2: false }, 1, 0, { i: false, 2: true }],
 		[[{ key: 'i' }, { key: '2' }], 1, { i: true, 2: false }, 1, 0, { i: true, 2: true }],
-		[[{ key: 'i' }, { key: '2' }], 0, { i: false, 2: false }, 0, 0, { i: true, 2: false }]
+		[[{ key: 'i' }, { key: '2' }], 0, { i: false, 2: false }, 0, 0, { i: true, 2: false }],
 	])('.disable with keys of %j, activeStep: %d, initial disabled: %j, we disabled index %d', (
 		steps,
 		initialActiveStep,
@@ -309,7 +308,7 @@ describe('.enable', () => {
 		[[{ key: 'i' }, { key: '2' }], 1, { i: false, 2: false }, 1, 1, { i: false, 2: false }],
 		[[{ key: 'i' }, { key: '2' }], 0, { i: false, 2: true }, 1, 0, { i: false, 2: false }],
 		[[{ key: 'i' }, { key: '2' }], 1, { i: true, 2: false }, 1, 1, { i: true, 2: false }],
-		[[{ key: 'i' }, { key: '2' }], 0, { i: true, 2: false }, 0, 0, { i: false, 2: false }]
+		[[{ key: 'i' }, { key: '2' }], 0, { i: true, 2: false }, 0, 0, { i: false, 2: false }],
 	])('.enable with keys of %j, activeStep: %d, initial enabled: %j, we enable index %d', (
 		steps,
 		initialActiveStep,
@@ -368,12 +367,12 @@ describe('modify steps', () => {
 			activeStep: props.initial.activeStep || 0,
 			disabled: props.initial.disabled || fromPairs(props.initial.steps.map(i => [i.key, false])),
 			completed: props.initial.completed || fromPairs(props.initial.steps.map(i => [i.key, false])),
-			...props.expectation
+			...props.expectation,
 		};
 		return [
 			props.initial.steps, props.initial.activeStep, props.initial.disabled, props.initial.completed,
 			props.stepChange,
-			expectation.activeStep, expectation.disabled, expectation.completed
+			expectation.activeStep, expectation.disabled, expectation.completed,
 		];
 	}
 
@@ -382,15 +381,15 @@ describe('modify steps', () => {
 			initial: { steps: [{ key: 'i' }, { key: '2' }] },
 			stepChange: [{ key: 'i' }, { key: '2' }],
 			expectation: {
-			}
+			},
 		}),
 		createTableEntry({
 			initial: { steps: [{ key: 'i' }, { key: '2' }], activeStep: 0 },
 			stepChange: [ { key: '2' }],
 			expectation: {
 				disabled: {2: false},
-				completed: {2: false}
-			}
+				completed: {2: false},
+			},
 		}),
 		createTableEntry({
 			initial: { steps: [{ key: 'i' }, { key: '2' }], activeStep: 1 },
@@ -398,8 +397,8 @@ describe('modify steps', () => {
 			expectation: {
 				activeStep: 0,
 				disabled: {i: false},
-				completed: {i: false}
-			}
+				completed: {i: false},
+			},
 		}),
 		createTableEntry({
 			initial: { steps: [{ key: 'i' }, { key: '2' }, {key: 'last'}], activeStep: 2, disabled: {i: false, 2: true, last:false}},
@@ -407,8 +406,8 @@ describe('modify steps', () => {
 			expectation: {
 				activeStep: 0,
 				disabled: {i: false, 2: true},
-				completed: {i: false, 2: false}
-			}
+				completed: {i: false, 2: false},
+			},
 		}),
 		createTableEntry({
 			initial: { steps: [{ key: 'i' }, { key: '2' }, {key: 'last'}], activeStep: 2, disabled: {i: false, 2: true, last:false}},
@@ -416,19 +415,19 @@ describe('modify steps', () => {
 			expectation: {
 				activeStep: 1,
 				disabled: {i: false, 2: true, last:false},
-				completed: {i: false, 2: false, last: false}
-			}
+				completed: {i: false, 2: false, last: false},
+			},
 		}),
 
 		createTableEntry({
 			initial: { steps: [{ key: 'i' }, { key: '2' }, {key: 'last'}], activeStep: 2, disabled: {i: false, 2: true, last:false}},
-			stepChange: [ {key: 'last'},{ key: 'i' },],
+			stepChange: [ {key: 'last'},{ key: 'i' }],
 			expectation: {
 				activeStep: 0,
 				disabled: {i: false,  last:false},
-				completed: {i: false,  last: false}
-			}
-		})
+				completed: {i: false,  last: false},
+			},
+		}),
 	])('with initial steps %j, active: %d, disabled: %o, completed: %o and change steps to %j', (
 		initialSteps, initialActiveStep, initialDisabled, initialCompleted,
 		stepChange,

app/javascript/components/hooks/useSteps.ts

@@ -232,7 +232,7 @@ export default function useSteps(state: InputStepsState, initOptions: StepsInitO
 		disabled: initOptions.disabled || fromPairs(initialSteps.map((i) => [i, false])),
 		stepKeys: initialSteps,
 		activeStep,
-		activeStepKey: activeStep >= 0 && activeStep < state.steps.length ? state.steps[activeStep].key : null
+		activeStepKey: activeStep >= 0 && activeStep < state.steps.length ? state.steps[activeStep].key : null,
 	};
 	const [stepsState, dispatch] = useReducer(stepsReducer, initialState);
 
@@ -295,7 +295,7 @@ export default function useSteps(state: InputStepsState, initOptions: StepsInitO
 		// eslint-disable-next-line @typescript-eslint/no-empty-function
 		addStep: () => { },
 		// eslint-disable-next-line @typescript-eslint/no-empty-function
-		removeStep: () => { }
+		removeStep: () => { },
 	});
 
 }

app/javascript/components/intl/HoudiniIntl.spec.tsx

@@ -29,7 +29,7 @@ describe('formatMoney', () => {
 			[oneEuro,  {currencyDisplay: "name"}, "1.00 euros"],
 			[oneHundredYen,  {}, "¥100"],
 			[oneHundredYen,  {currencyDisplay: 'code'}, `JPY${NBSP}100`],
-			[oneHundredYen,  {currencyDisplay: "name"}, "100 Japanese yen"]
+			[oneHundredYen,  {currencyDisplay: "name"}, "100 Japanese yen"],
 		];
 		it.each(tests)('money representing %j with opts %j returns %s', (money, opts, expected ) => {
 			expect.assertions(1);

app/javascript/components/tests/intl/index.tsx

@@ -12,7 +12,7 @@ class WithIntl extends React.Component<any,any> {
 		super(props);
 
 		this.state = {
-			locale: props.intlConfig.defaultLocale || null
+			locale: props.intlConfig.defaultLocale || null,
 		};
 
 		this.setLocale = this.setLocale.bind(this);
@@ -28,7 +28,7 @@ class WithIntl extends React.Component<any,any> {
 
 	setLocale (locale:string) {
 		this.setState({
-			locale: locale
+			locale: locale,
 		});
 	}
 
@@ -46,7 +46,7 @@ class WithIntl extends React.Component<any,any> {
 			children,
 			getMessages,
 			getFormats,
-			intlConfig
+			intlConfig,
 		} = this.props;
 
 		const { locale } = this.state;
@@ -77,7 +77,7 @@ export const setIntlConfig = (config:any) => {
 	const channel = addons.getChannel();
 	channel.emit(EVENT_SET_CONFIG_ID, {
 		locales: config.locales,
-		defaultLocale: config.defaultLocale
+		defaultLocale: config.defaultLocale,
 	});
 };
 

app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.tsx

@@ -13,7 +13,7 @@ class ScreenReaderOnlyText extends React.Component<Record<string,unknown>, Recor
 			margin: '-1px',
 			overflow: 'hidden',
 			clip: 'rect(0,0,0,0)',
-			border: 0
+			border: 0,
 		};
 		return <span style={style}>{this.props.children}</span>;
 	}