Fix lint / compile issues and Form typings (#1813)

loucass003 · web-flow · commit 110e0ce840c1 · 2026-04-16T14:44:39.000+02:00
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -168,8 +168,8 @@ jobs:
           [ -z "$VERSION" ] && VERSION="0.0.0"
           VERSION="${VERSION#v}"
           echo "Building version: $VERSION"
-          cd gui
           pnpm i
+          cd gui
           pnpm exec electron-builder --${{ matrix.platform }} \
             ${{ matrix.platform == 'macos' && '--universal' || '' }} \
             --config.extraMetadata.version="$VERSION" \
diff --git a/gui/package.json b/gui/package.json
@@ -70,6 +70,8 @@
     "electron": "^40.3.0",
     "electron-builder": "^26.7.0",
     "electron-vite": "^5.0.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^9.39.4",
     "eslint": "^9.39.1",
     "eslint-import-resolver-typescript": "^3.10.1",
     "eslint-plugin-import": "^2.32.0",
diff --git a/gui/src/components/MainLayout.scss b/gui/src/components/MainLayout.scss
@@ -14,7 +14,8 @@
       't t t' var(--topbar-h)
       'n b s' var(--toolbar-h)
       'n c s' calc(100% - var(--topbar-h) - var(--toolbar-h))
-      / var(--navbar-w) calc(100% - var(--navbar-w) - var(--right-section-w)) var(--right-section-w);
+      / var(--navbar-w) calc(100% - var(--navbar-w) - var(--right-section-w))
+      var(--right-section-w);
   }
 
   @screen nsm {
diff --git a/gui/src/components/commons/Checkbox.tsx b/gui/src/components/commons/Checkbox.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { forwardRef, useMemo } from 'react';
-import { Control, Controller } from 'react-hook-form';
+import { Control, Controller, FieldPath, FieldValues } from 'react-hook-form';
 
 export const CHECKBOX_CLASSES = classNames(
   'bg-background-50 border-background-50 cursor-pointer rounded-md w-5 h-5 text-accent-background-30 focus:border-accent-background-40 focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent'
@@ -112,7 +112,7 @@ export const CheckboxInternal = forwardRef<
   );
 });
 
-export function CheckBox({
+export function CheckBox<T extends FieldValues = FieldValues>({
   label,
   variant = 'checkbox',
   color = 'primary',
@@ -123,8 +123,8 @@ export function CheckBox({
   disabled,
 }: {
   label: string;
-  control: Control<any>;
-  name: string;
+  control: Control<T>;
+  name: FieldPath<T>;
   variant?: 'checkbox' | 'toggle';
   color?: 'primary' | 'secondary' | 'tertiary';
   outlined?: boolean;
diff --git a/gui/src/components/commons/Dropdown.tsx b/gui/src/components/commons/Dropdown.tsx
@@ -10,6 +10,8 @@ import {
 import {
   Control,
   FieldError,
+  FieldPath,
+  FieldValues,
   useController,
   UseControllerProps,
 } from 'react-hook-form';
@@ -415,14 +417,15 @@ export function DropdownInside({
   );
 }
 
-export function Dropdown({
+export function Dropdown<T extends FieldValues = FieldValues>({
   control,
   name,
   rules,
   ...props
 }: DropdownProps & {
-  control: Control<any>;
-  rules?: UseControllerProps<any>['rules'];
+  control: Control<T>;
+  name: FieldPath<T>;
+  rules?: UseControllerProps<T, FieldPath<T>>['rules'];
 }) {
   const {
     field: { value, onChange },
diff --git a/gui/src/components/commons/FileInput.tsx b/gui/src/components/commons/FileInput.tsx
@@ -7,7 +7,13 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Control, Controller, UseControllerProps } from 'react-hook-form';
+import {
+  Control,
+  Controller,
+  FieldPath,
+  FieldValues,
+  UseControllerProps,
+} from 'react-hook-form';
 import { FileIcon } from './icon/FileIcon';
 import { UploadFileIcon } from './icon/UploadFileIcon';
 import { Typography } from './Typography';
@@ -193,7 +199,7 @@ export const FileInputInside = forwardRef<
   );
 });
 
-export const FileInput = ({
+export const FileInput = <T extends FieldValues = FieldValues>({
   control,
   name,
   label,
@@ -204,8 +210,9 @@ export const FileInput = ({
   capture,
   importedFileName,
 }: {
-  rules: UseControllerProps<any>['rules'];
-  control: Control<any>;
+  rules: UseControllerProps<T, FieldPath<T>>['rules'];
+  control: Control<T>;
+  name: FieldPath<T>;
   accept: string;
   multiple?: boolean;
   capture?: boolean | 'user' | 'environment';
@@ -214,7 +221,7 @@ export const FileInput = ({
    **/
   label?: string;
   importedFileName: string | null;
-} & InputProps &
+} & Omit<InputProps, 'name'> &
   Partial<HTMLInputElement>) => {
   return (
     <Controller
diff --git a/gui/src/components/commons/Input.tsx b/gui/src/components/commons/Input.tsx
@@ -4,6 +4,8 @@ import {
   Control,
   Controller,
   FieldError,
+  FieldPath,
+  FieldValues,
   UseControllerProps,
 } from 'react-hook-form';
 import { EyeIcon } from './icon/EyeIcon';
@@ -117,7 +119,7 @@ export const InputInside = forwardRef<
   );
 });
 
-export const Input = ({
+export const Input = <T extends FieldValues = FieldValues>({
   type = 'text',
   control,
   name,
@@ -128,10 +130,11 @@ export const Input = ({
   variant = 'primary',
   rules,
 }: {
-  rules?: UseControllerProps<any>['rules'];
-  control: Control<any>;
+  rules?: UseControllerProps<T, FieldPath<T>>['rules'];
+  control: Control<T>;
+  name: FieldPath<T>;
   autocomplete?: boolean | string;
-} & InputProps &
+} & Omit<InputProps, 'name'> &
   Partial<React.HTMLProps<HTMLInputElement>>) => {
   return (
     <Controller
diff --git a/gui/src/components/commons/NumberSelector.tsx b/gui/src/components/commons/NumberSelector.tsx
@@ -1,10 +1,10 @@
-import { Control, Controller } from 'react-hook-form';
+import { Control, Controller, FieldPath, FieldValues } from 'react-hook-form';
 import { Button } from './Button';
 import { Typography } from './Typography';
 import { useCallback, useMemo } from 'react';
 import { useLocaleConfig } from '@/i18n/config';
 
-export function NumberSelector({
+export function NumberSelector<T extends FieldValues = FieldValues>({
   label,
   valueLabelFormat,
   control,
@@ -18,8 +18,8 @@ export function NumberSelector({
 }: {
   label?: string;
   valueLabelFormat?: (value: number) => string;
-  control: Control<any>;
-  name: string;
+  control: Control<T>;
+  name: FieldPath<T>;
   min: number;
   max: number;
   step: number | ((value: number, add: boolean) => number);
diff --git a/gui/src/components/commons/Radio.tsx b/gui/src/components/commons/Radio.tsx
@@ -1,9 +1,9 @@
 import classNames from 'classnames';
-import { Control, Controller } from 'react-hook-form';
+import { Control, Controller, FieldPath, FieldValues } from 'react-hook-form';
 import { Typography } from './Typography';
 import { ReactNode } from 'react';
 
-export function Radio({
+export function Radio<T extends FieldValues = FieldValues>({
   control,
   name,
   label,
@@ -14,8 +14,8 @@ export function Radio({
   disabled,
   ...props
 }: {
-  control: Control<any>;
-  name: string;
+  control: Control<T>;
+  name: FieldPath<T>;
   label?: string;
   value: string;
   description?: string | null;
diff --git a/gui/src/components/commons/Range.tsx b/gui/src/components/commons/Range.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import { Control, Controller } from 'react-hook-form';
+import { Control, Controller, FieldPath, FieldValues } from 'react-hook-form';
 
-export function Range({
+export function Range<T extends FieldValues = FieldValues>({
   control,
   name,
   values,
@@ -11,8 +11,8 @@ export function Range({
   // input props
   ...props
 }: {
-  control: Control<any>;
-  name: string;
+  control: Control<T>;
+  name: FieldPath<T>;
   max: number;
   min: number;
   step: number;
diff --git a/gui/src/components/commons/SystemFileInput.tsx b/gui/src/components/commons/SystemFileInput.tsx
@@ -1,6 +1,8 @@
 import {
   Control,
   Controller,
+  FieldPath,
+  FieldValues,
   RefCallBack,
   UseControllerProps,
 } from 'react-hook-form';
@@ -48,20 +50,20 @@ export function InnerSystemFileInput({
   );
 }
 
-export function SystemFileInput({
+export function SystemFileInput<T extends FieldValues = FieldValues>({
   control,
   rules,
   name,
   label,
   directory = false,
 }: {
-  rules: UseControllerProps<any>['rules'];
-  control: Control<any>;
+  rules: UseControllerProps<T, FieldPath<T>>['rules'];
+  control: Control<T>;
   /**
    * Use a translation key!
    **/
   label: string;
-  name: string;
+  name: FieldPath<T>;
   directory?: boolean;
   disabled?: boolean;
 }) {
diff --git a/gui/src/components/commons/ThemeSelector.tsx b/gui/src/components/commons/ThemeSelector.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import { Control, Controller } from 'react-hook-form';
+import { Control, Controller, FieldPath, FieldValues } from 'react-hook-form';
 
-export function ThemeSelector({
+export function ThemeSelector<T extends FieldValues = FieldValues>({
   control,
   name,
   value,
@@ -10,8 +10,8 @@ export function ThemeSelector({
   colors,
   ...props
 }: {
-  control: Control<any>;
-  name: string;
+  control: Control<T>;
+  name: FieldPath<T>;
   colors: string | undefined;
   value: string;
 } & React.HTMLProps<HTMLInputElement>) {
diff --git a/gui/src/components/firmware-tool/DeviceCard.tsx b/gui/src/components/firmware-tool/DeviceCard.tsx
@@ -7,7 +7,7 @@ import {
 } from '@/hooks/firmware-tool';
 import { useLocalization } from '@fluent/react';
 import classNames from 'classnames';
-import { Control, Controller } from 'react-hook-form';
+import { Control, Controller, FieldPath, FieldValues } from 'react-hook-form';
 import {
   FirmwareUpdateStatus,
   TrackerStatus as TrackerStatusEnum,
@@ -22,9 +22,9 @@ interface DeviceCardProps {
   color?: string;
 }
 
-interface DeviceCardControlProps {
-  control?: Control<any>;
-  name?: string;
+interface DeviceCardControlProps<T extends FieldValues = FieldValues> {
+  control?: Control<T>;
+  name?: FieldPath<T>;
   progress?: number;
   disabled?: boolean;
 }
@@ -55,15 +55,15 @@ export function DeviceCardContent({ deviceNames, status }: DeviceCardProps) {
   );
 }
 
-export function DeviceCardControl({
+export function DeviceCardControl<T extends FieldValues = FieldValues>({
   control,
   name,
   progress,
   disabled = false,
   online = null,
   color = 'bg-background-60',
   ...props
-}: DeviceCardControlProps & DeviceCardProps) {
+}: DeviceCardControlProps<T> & DeviceCardProps) {
   const cardborder = useMemo(() => {
     if (!props.status) return 'border-transparent';
 
diff --git a/gui/src/components/firmware-update/FirmwareUpdate.tsx b/gui/src/components/firmware-update/FirmwareUpdate.tsx
@@ -58,7 +58,7 @@ const DeviceList = ({
   control,
   devices,
 }: {
-  control: Control<any>;
+  control: Control<FirmwareUpdateForm>;
   devices: DeviceDataT[];
 }) => {
   const { l10n } = useLocalization();
diff --git a/gui/src/components/onboarding/pages/ConnectTracker.scss b/gui/src/components/onboarding/pages/ConnectTracker.scss
@@ -12,9 +12,9 @@
   grid-template:
     's t' var(--connect-tracker-layout-top)
     's c' calc(100% - var(--connect-tracker-layout-top))
-    / calc(var(--connect-tracker-layout-sidebar)) calc(100% - var(
-          --connect-tracker-layout-sidebar
-        ));
+    / calc(var(--connect-tracker-layout-sidebar)) calc(
+      100% - var(--connect-tracker-layout-sidebar)
+    );
 
   @screen mobile {
     grid-template:
diff --git a/gui/src/components/settings/SettingsLayout.scss b/gui/src/components/settings/SettingsLayout.scss
@@ -7,9 +7,9 @@
   grid-template:
     't t t' var(--topbar-h)
     'n s c' calc(100% - var(--topbar-h))
-    / var(--navbar-w) var(--settings-sidebar-w) calc(100% - var(--navbar-w) - var(
-          --settings-sidebar-w
-        ));
+    / var(--navbar-w) var(--settings-sidebar-w) calc(
+      100% - var(--navbar-w) - var(--settings-sidebar-w)
+    );
 
   @screen lg {
     --settings-sidebar-w: 270px;
diff --git a/gui/src/components/settings/pages/HomeScreenSettings.tsx b/gui/src/components/settings/pages/HomeScreenSettings.tsx
@@ -14,7 +14,7 @@ import {
 import { useLocalization } from '@fluent/react';
 import classNames from 'classnames';
 import { ReactNode, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
+import { FieldPath, useForm } from 'react-hook-form';
 import { TrackingChecklistStepId } from 'solarxr-protocol';
 import * as Sentry from '@sentry/react';
 
@@ -82,7 +82,7 @@ export function TrackingChecklistSettings({
             <div key={step.id}>
               <CheckBox
                 control={control}
-                name={`steps.${step.id}`}
+                name={`steps.${step.id}` as FieldPath<StepsForm>}
                 disabled={!step.ignorable || !step.enabled}
                 label={l10n.getString(trackingchecklistIdtoLabel[step.id])}
                 outlined
diff --git a/gui/src/components/widgets/DeveloperModeWidget.tsx b/gui/src/components/widgets/DeveloperModeWidget.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useForm } from 'react-hook-form';
+import { FieldPath, useForm } from 'react-hook-form';
 import { useConfig } from '@/hooks/config';
 import { useWebsocketAPI } from '@/hooks/websocket-api';
 import { CheckBox } from '@/components/commons/Checkbox';
@@ -57,7 +57,7 @@ export function DeveloperModeWidget() {
       control={control}
       variant="toggle"
       outlined
-      name={name}
+      name={name as FieldPath<DeveloperModeWidgetForm>}
       label={l10n.getString(`widget-developer_mode-${label}`)}
     />
   );
diff --git a/package.json b/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
diff --git a/server/core/src/main/java/dev/slimevr/protocol/rpc/settings/RPCSettingsBuilder.kt b/server/core/src/main/java/dev/slimevr/protocol/rpc/settings/RPCSettingsBuilder.kt

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,8 @@`
`14`	`14`	`'t t t' var(--topbar-h)`
`15`	`15`	`'n b s' var(--toolbar-h)`
`16`	`16`	`'n c s' calc(100% - var(--topbar-h) - var(--toolbar-h))`
`17`		`- / var(--navbar-w) calc(100% - var(--navbar-w) - var(--right-section-w)) var(--right-section-w);`
	`17`	`+ / var(--navbar-w) calc(100% - var(--navbar-w) - var(--right-section-w))`
	`18`	`+ var(--right-section-w);`
`18`	`19`	`}`
`19`	`20`
`20`	`21`	`@screen nsm {`