Reformat JavaScript and TypeScript files with Prettier (#1192)

OpenStickCommunity · Oct 15, 2024 · 8de2b00 · 8de2b00
1 parent aec1f97
commit 8de2b00
Show file tree

Hide file tree

Showing 17 changed files with 191 additions and 144 deletions.
diff --git a/www/package-lock.json b/www/package-lock.json
diff --git a/www/package.json b/www/package.json
@@ -51,7 +51,7 @@
 		"express": "^4.18.2",
 		"nodemon": "^2.0.22",
 		"pako": "^2.1.0",
-		"prettier": "^3.0.1",
+		"prettier": "^3.3.3",
 		"sass": "^1.62.1",
 		"typescript": "^5.3.3",
 		"vite": "^4.3.9"

diff --git a/www/src/Addons/I2CAnalog1219.tsx b/www/src/Addons/I2CAnalog1219.tsx
@@ -36,8 +36,7 @@ const I2CAnalog1219 = ({ values, errors, handleChange, handleCheckbox }) => {
 				hidden={
 					!(values.I2CAnalog1219InputEnabled && getAvailablePeripherals('i2c'))
 				}
-			>
-			</div>
+			></div>
 			{getAvailablePeripherals('i2c') ? (
 				<FormCheck
 					label={t('Common:switch-enabled')}

diff --git a/www/src/Addons/Keyboard.tsx b/www/src/Addons/Keyboard.tsx
@@ -28,15 +28,24 @@ export const keyboardScheme = {
 	keyboardHostMouseLeft: yup
 		.number()
 		.label('Left Mouse Button')
-		.validateSelectionWhenValue('KeyboardHostAddonEnabled', BUTTON_MASKS_OPTIONS),
+		.validateSelectionWhenValue(
+			'KeyboardHostAddonEnabled',
+			BUTTON_MASKS_OPTIONS,
+		),
 	keyboardHostMouseMiddle: yup
 		.number()
 		.label('Middle Mouse Button')
-		.validateSelectionWhenValue('KeyboardHostAddonEnabled', BUTTON_MASKS_OPTIONS),
+		.validateSelectionWhenValue(
+			'KeyboardHostAddonEnabled',
+			BUTTON_MASKS_OPTIONS,
+		),
 	keyboardHostMouseRight: yup
 		.number()
 		.label('Right Mouse Button')
-		.validateSelectionWhenValue('KeyboardHostAddonEnabled', BUTTON_MASKS_OPTIONS),
+		.validateSelectionWhenValue(
+			'KeyboardHostAddonEnabled',
+			BUTTON_MASKS_OPTIONS,
+		),
 };
 
 export const keyboardState = {
@@ -47,16 +56,24 @@ export const keyboardState = {
 	KeyboardHostAddonEnabled: 0,
 };
 
-const options = Object.entries(BUTTON_ACTIONS)
-	.map(([key, value]) => ({
-		label: key,
-		value,
-	}));
+const options = Object.entries(BUTTON_ACTIONS).map(([key, value]) => ({
+	label: key,
+	value,
+}));
 
 const excludedButtons = [
-	'E1','E2','E3','E4',
-	'E5','E6','E7','E8',
-	'E9','E10','E11','E12',
+	'E1',
+	'E2',
+	'E3',
+	'E4',
+	'E5',
+	'E6',
+	'E7',
+	'E8',
+	'E9',
+	'E10',
+	'E11',
+	'E12',
 ];
 
 const Keyboard = ({
@@ -95,7 +112,7 @@ const Keyboard = ({
 					<div className="mb-2">
 						<KeyboardMapper
 							buttonLabels={buttonLabels}
-                            excludeButtons={excludedButtons}
+							excludeButtons={excludedButtons}
 							handleKeyChange={handleKeyChange(values, setFieldValue)}
 							validated={validated}
 							getKeyMappingForButton={getKeyMappingForButton(values)}
@@ -104,9 +121,7 @@ const Keyboard = ({
 				</Row>
 				<Row className="mb-3">
 					<p>{t('AddonsConfig:keyboard-host-mouse-header-text')}</p>
-					<div
-						className="col-sm-12 col-md-6 col-lg-2 mb-2"
-					>
+					<div className="col-sm-12 col-md-6 col-lg-2 mb-2">
 						<FormSelect
 							label={t(`AddonsConfig:keyboard-host-left-mouse`)}
 							name="keyboardHostMouseLeft"
@@ -117,18 +132,13 @@ const Keyboard = ({
 							onChange={handleChange}
 						>
 							{BUTTON_MASKS_OPTIONS.map((o, i) => (
-								<option
-									key={`keyboardHostMouseLeft-${i}`}
-									value={o.value}
-								>
+								<option key={`keyboardHostMouseLeft-${i}`} value={o.value}>
 									{o.label}
 								</option>
 							))}
 						</FormSelect>
 					</div>
-					<div
-						className="col-sm-12 col-md-6 col-lg-2 mb-2"
-					>
+					<div className="col-sm-12 col-md-6 col-lg-2 mb-2">
 						<FormSelect
 							label={t(`AddonsConfig:keyboard-host-middle-mouse`)}
 							name="keyboardHostMouseMiddle"
@@ -139,18 +149,13 @@ const Keyboard = ({
 							onChange={handleChange}
 						>
 							{BUTTON_MASKS_OPTIONS.map((o, i) => (
-								<option
-									key={`keyboardHostMouseMiddle-${i}`}
-									value={o.value}
-								>
+								<option key={`keyboardHostMouseMiddle-${i}`} value={o.value}>
 									{o.label}
 								</option>
 							))}
 						</FormSelect>
 					</div>
-					<div
-						className="col-sm-12 col-md-6 col-lg-2 mb-2"
-					>
+					<div className="col-sm-12 col-md-6 col-lg-2 mb-2">
 						<FormSelect
 							label={t(`AddonsConfig:keyboard-host-right-mouse`)}
 							name="keyboardHostMouseRight"
@@ -161,10 +166,7 @@ const Keyboard = ({
 							onChange={handleChange}
 						>
 							{BUTTON_MASKS_OPTIONS.map((o, i) => (
-								<option
-									key={`keyboardHostMouseRight-${i}`}
-									value={o.value}
-								>
+								<option key={`keyboardHostMouseRight-${i}`} value={o.value}>
 									{o.label}
 								</option>
 							))}

diff --git a/www/src/Addons/ReactiveLED.tsx b/www/src/Addons/ReactiveLED.tsx
@@ -12,17 +12,14 @@ import FormSelect from '../Components/FormSelect';
 import FormControl from '../Components/FormControl';
 import { Button, FormCheck, Row, Col } from 'react-bootstrap';
 
-import WebApi, { } from '../Services/WebApi';
+import WebApi from '../Services/WebApi';
 
-import {
-	BUTTON_ACTIONS,
-	PinActionValues,
-} from '../Data/Pins';
+import { BUTTON_ACTIONS, PinActionValues } from '../Data/Pins';
 import { getButtonLabels } from '../Data/Buttons';
 
 const NON_SELECTABLE_BUTTON_ACTIONS = [
 	-5, 0, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36,
-	37, 38, 39, 40
+	37, 38, 39, 40,
 ];
 
 const REACTIVE_LED_MODES = [
@@ -72,82 +69,124 @@ const ReactiveLED = ({ values, errors, handleChange, handleCheckbox }) => {
 		fetchData();
 	}, [setSelectedLEDs, selectedLEDs]);
 
-	const handleLEDChange = (c : any, idx : Number, field : String, value : Number) => {
+	const handleLEDChange = (
+		c: any,
+		idx: Number,
+		field: String,
+		value: Number,
+	) => {
 		c[idx][field] = value;
 		console.dir(c);
 		return [...c];
 	};
 
 	const saveLEDSettings = async () => {
-		const ledSettings = await WebApi.setReactiveLEDs({leds: reactiveLEDs});
+		const ledSettings = await WebApi.setReactiveLEDs({ leds: reactiveLEDs });
 	};
 
 	return (
 		<Section title={t('ReactiveLED:header-text')}>
-			<div id="ReactiveLEDEnabledOptions" hidden={!values.ReactiveLEDAddonEnabled}>
+			<div
+				id="ReactiveLEDEnabledOptions"
+				hidden={!values.ReactiveLEDAddonEnabled}
+			>
 				<Row className="mb-3">
-					{reactiveLEDs?.length > 0 ? reactiveLEDs.map((o,i) => (
-						<div className="col card mb-1 me-1" key={`reactiveLED${i}`}>
-							<label>{t('ReactiveLED:led-panel-label', { index: i })}</label>
-							<FormControl
-								type="number"
-								label={t('ReactiveLED:led-pin-label')}
-								name={`led${i}Pin`}
-								className="form-control-sm"
-								groupClassName="mb-3"
-								value={reactiveLEDs[i].pin}
-								onChange={(e) => setSelectedLEDs((c) => handleLEDChange(c, i, 'pin', Number(e.target.value)))}
-								min={-1}
-								max={29}
-							/>
-							<FormSelect
-								label={t('ReactiveLED:led-action-label')}
-								name={`led${i}Action`}
-								className="form-select-sm"
-								groupClassName="mb-3"
-								value={reactiveLEDs[i].action}
-								onChange={(e) => setSelectedLEDs((c) => handleLEDChange(c, i, 'action', Number(e.target.value)))}
-							>
-								{Object.values(BUTTON_ACTIONS).filter((o) => !isNonSelectable(o)).map((mo,mi) => {
-								const opt = getOption(null,mo);
-								const labelKey = opt.label.split('BUTTON_PRESS_').pop();
-								return (
-									<option key={`led${i}Action-option-${mi}`} value={mo}>
-										{(labelKey && buttonNames[labelKey]) || t(`PinMapping:actions.${opt.label}`)}
-									</option>
-								);
-							})}
-							</FormSelect>
-							<FormSelect
-								label={t('ReactiveLED:led-mode-up-label')}
-								name={`led${i}ModeUp`}
-								className="form-select-sm"
-								groupClassName="mb-3"
-								value={reactiveLEDs[i].modeUp}
-								onChange={(e) => setSelectedLEDs((c) => handleLEDChange(c, i, 'modeUp', Number(e.target.value)))}
-							>
-								{REACTIVE_LED_MODES.map((mo, mi) => (
-									<option key={`led${i}ModeUp-option-${mi}`} value={mo.value}>
-										{t(`ReactiveLED:led-mode.${mo.label}`)}
-									</option>
-								))}
-							</FormSelect>
-							<FormSelect
-								label={t('ReactiveLED:led-mode-down-label')}
-								name={`led${i}ModeDown`}
-								className="form-select-sm"
-								groupClassName="mb-3"
-								value={reactiveLEDs[i].modeDown}
-								onChange={(e) => setSelectedLEDs((c) => handleLEDChange(c, i, 'modeDown', Number(e.target.value)))}
-							>
-								{REACTIVE_LED_MODES.map((mo, mi) => (
-									<option key={`led${i}ModeDown-option-${mi}`} value={mo.value}>
-										{t(`ReactiveLED:led-mode.${mo.label}`)}
-									</option>
-								))}
-							</FormSelect>
-						</div>
-					)) : ''}
+					{reactiveLEDs?.length > 0
+						? reactiveLEDs.map((o, i) => (
+								<div className="col card mb-1 me-1" key={`reactiveLED${i}`}>
+									<label>
+										{t('ReactiveLED:led-panel-label', { index: i })}
+									</label>
+									<FormControl
+										type="number"
+										label={t('ReactiveLED:led-pin-label')}
+										name={`led${i}Pin`}
+										className="form-control-sm"
+										groupClassName="mb-3"
+										value={reactiveLEDs[i].pin}
+										onChange={(e) =>
+											setSelectedLEDs((c) =>
+												handleLEDChange(c, i, 'pin', Number(e.target.value)),
+											)
+										}
+										min={-1}
+										max={29}
+									/>
+									<FormSelect
+										label={t('ReactiveLED:led-action-label')}
+										name={`led${i}Action`}
+										className="form-select-sm"
+										groupClassName="mb-3"
+										value={reactiveLEDs[i].action}
+										onChange={(e) =>
+											setSelectedLEDs((c) =>
+												handleLEDChange(c, i, 'action', Number(e.target.value)),
+											)
+										}
+									>
+										{Object.values(BUTTON_ACTIONS)
+											.filter((o) => !isNonSelectable(o))
+											.map((mo, mi) => {
+												const opt = getOption(null, mo);
+												const labelKey = opt.label.split('BUTTON_PRESS_').pop();
+												return (
+													<option key={`led${i}Action-option-${mi}`} value={mo}>
+														{(labelKey && buttonNames[labelKey]) ||
+															t(`PinMapping:actions.${opt.label}`)}
+													</option>
+												);
+											})}
+									</FormSelect>
+									<FormSelect
+										label={t('ReactiveLED:led-mode-up-label')}
+										name={`led${i}ModeUp`}
+										className="form-select-sm"
+										groupClassName="mb-3"
+										value={reactiveLEDs[i].modeUp}
+										onChange={(e) =>
+											setSelectedLEDs((c) =>
+												handleLEDChange(c, i, 'modeUp', Number(e.target.value)),
+											)
+										}
+									>
+										{REACTIVE_LED_MODES.map((mo, mi) => (
+											<option
+												key={`led${i}ModeUp-option-${mi}`}
+												value={mo.value}
+											>
+												{t(`ReactiveLED:led-mode.${mo.label}`)}
+											</option>
+										))}
+									</FormSelect>
+									<FormSelect
+										label={t('ReactiveLED:led-mode-down-label')}
+										name={`led${i}ModeDown`}
+										className="form-select-sm"
+										groupClassName="mb-3"
+										value={reactiveLEDs[i].modeDown}
+										onChange={(e) =>
+											setSelectedLEDs((c) =>
+												handleLEDChange(
+													c,
+													i,
+													'modeDown',
+													Number(e.target.value),
+												),
+											)
+										}
+									>
+										{REACTIVE_LED_MODES.map((mo, mi) => (
+											<option
+												key={`led${i}ModeDown-option-${mi}`}
+												value={mo.value}
+											>
+												{t(`ReactiveLED:led-mode.${mo.label}`)}
+											</option>
+										))}
+									</FormSelect>
+								</div>
+							))
+						: ''}
 				</Row>
 				<Row className="mb-3">
 					<div className="col-sm-3 mb-3">

diff --git a/www/src/Components/CaptureButton.tsx b/www/src/Components/CaptureButton.tsx
@@ -110,7 +110,7 @@ const CaptureButton = ({
 							buttonLabel
 								? buttonLabel
 								: t('CaptureButton:capture-button-button-label')
-					  } 🎮`}
+						} 🎮`}
 			</Button>
 		</>
 	);