[PUI] Switch linting to biome (#8317)

* bump pre-commit

* add biome

* autofixes

* use number functions

* fix string usage

* use specific variable definition

* fix missing translations

* reduce alerts

* add missing keys

* fix index creation

* fix more strings

* fix types

* fix function

* add missing keys

* fiy array access

* fix string functions

* do not redefine var

* extend exlcusions

* reduce unnecessary operators

* simplify request

* use number functions

* fix missing translation

* add missing type

* fix filter

* use newer func

* remove unused fragment

* fix confusing assigment

* pass children as elements

* add missing translation

* fix imports

* fix import

* auto-fix problems

* add autfix for unused imports

* fix SAST error

* fix useSelfClosingElements

* fix useTemplate

* add codespell exception

* Update pui_printing.spec.ts

* Update pui_printing.spec.ts

* add vscode defaults

.devcontainer/devcontainer.json

@@ -31,7 +31,8 @@
         "ms-python.python",
         "ms-python.vscode-pylance",
         "batisteo.vscode-django",
-        "eamodio.gitlens"
+        "eamodio.gitlens",
+        "biomejs.biome"
       ]
     }
   },

.pre-commit-config.yaml

@@ -69,26 +69,12 @@ repos:
           pyproject.toml |
           src/frontend/vite.config.ts |
       )$
-- repo: https://github.com/pre-commit/mirrors-prettier
-  rev: "v4.0.0-alpha.8"
-  hooks:
-    - id: prettier
-      files: ^src/frontend/.*\.(js|jsx|ts|tsx)$
-      additional_dependencies:
-      - "prettier@^2.4.1"
-      - "@trivago/prettier-plugin-sort-imports"
-- repo: https://github.com/pre-commit/mirrors-eslint
-  rev: "v9.12.0"
-  hooks:
-  - id: eslint
-    additional_dependencies:
-      - eslint@^8.41.0
-      - eslint-config-google@^0.14.0
-      - [email protected]
-      - [email protected]
-      - "@typescript-eslint/eslint-plugin@latest"
-      - "@typescript-eslint/parser"
-    files: ^src/frontend/.*\.(js|jsx|ts|tsx)$
+-   repo: https://github.com/biomejs/pre-commit
+    rev: "v0.5.0"
+    hooks:
+    -   id: biome-check
+        additional_dependencies: ["@biomejs/[email protected]"]
+        files: ^src/frontend/.*\.(js|ts|tsx)$
 -   repo: https://github.com/gitleaks/gitleaks
     rev: v8.21.0
     hooks:

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "biomejs.biome"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit"
+  }
+}

biome.json

@@ -0,0 +1,40 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"jsxQuoteStyle": "single",
+			"trailingCommas": "none",
+			"indentStyle": "space"
+		}
+	},
+	"linter": {
+    "rules": {
+		"suspicious" : {
+			"noExplicitAny": "off",
+			"noDoubleEquals": "off",
+			"noArrayIndexKey": "off",
+			"useDefaultSwitchClauseLast": "off"
+		},
+		"style": {
+			"noUselessElse": "off",
+			"noNonNullAssertion": "off",
+			"noParameterAssign": "off"
+		}, "correctness":{
+			"useExhaustiveDependencies": "off",
+			"useJsxKeyInIterable": "off",
+			"noUnsafeOptionalChaining": "off",
+			"noSwitchDeclarations": "off",
+			"noUnusedImports":"error"
+		}, "complexity": {
+			"noBannedTypes": "off",
+			"noExtraBooleanCast": "off",
+			"noForEach": "off",
+			"noUselessSwitchCase": "off",
+			"useLiteralKeys":"off"
+		}, "performance": {
+			"noDelete":"off"
+		}
+	}
+}
+}

pyproject.toml

@@ -106,4 +106,4 @@ known_django="django"
 sections=["FUTURE","STDLIB","DJANGO","THIRDPARTY","FIRSTPARTY","LOCALFOLDER"]
 
 [tool.codespell]
-ignore-words-list = ["assertIn","SME","intoto"]
+ignore-words-list = ["assertIn","SME","intoto","fitH"]

src/frontend/src/App.tsx

@@ -23,7 +23,7 @@ export function setApiDefaults() {
   api.defaults.xsrfHeaderName = 'X-CSRFToken';
 
   if (token) {
-    api.defaults.headers['Authorization'] = `Token ${token}`;
+    api.defaults.headers.Authorization = `Token ${token}`;
   } else {
     delete api.defaults.headers['Authorization'];
   }

src/frontend/src/components/Boundary.tsx

@@ -1,15 +1,15 @@
 import { t } from '@lingui/macro';
 import { Alert } from '@mantine/core';
-import { ErrorBoundary, FallbackRender } from '@sentry/react';
+import { ErrorBoundary, type FallbackRender } from '@sentry/react';
 import { IconExclamationCircle } from '@tabler/icons-react';
-import { ReactNode, useCallback } from 'react';
+import { type ReactNode, useCallback } from 'react';
 
 function DefaultFallback({ title }: Readonly<{ title: string }>): ReactNode {
   return (
     <Alert
-      color="red"
+      color='red'
       icon={<IconExclamationCircle />}
-      title={t`Error rendering component` + `: ${title}`}
+      title={`${t`Error rendering component`}: ${title}`}
     >
       {t`An error occurred while rendering this component. Refer to the console for more information.`}
     </Alert>

src/frontend/src/components/buttons/ActionButton.tsx

@@ -1,5 +1,10 @@
-import { ActionIcon, FloatingPosition, Group, Tooltip } from '@mantine/core';
-import { ReactNode } from 'react';
+import {
+  ActionIcon,
+  type FloatingPosition,
+  Group,
+  Tooltip
+} from '@mantine/core';
+import type { ReactNode } from 'react';
 
 import { identifierString } from '../../functions/conversion';
 
@@ -46,7 +51,7 @@ export function ActionButton(props: ActionButtonProps) {
           }}
           variant={props.variant ?? 'transparent'}
         >
-          <Group gap="xs" wrap="nowrap">
+          <Group gap='xs' wrap='nowrap'>
             {props.icon}
           </Group>
         </ActionIcon>

src/frontend/src/components/buttons/AddItemButton.tsx

@@ -1,10 +1,10 @@
 import { IconPlus } from '@tabler/icons-react';
 
-import { ActionButton, ActionButtonProps } from './ActionButton';
+import { ActionButton, type ActionButtonProps } from './ActionButton';
 
 /**
  * A generic icon button which is used to add or create a new item
  */
 export function AddItemButton(props: Readonly<ActionButtonProps>) {
-  return <ActionButton {...props} color="green" icon={<IconPlus />} />;
+  return <ActionButton {...props} color='green' icon={<IconPlus />} />;
 }

src/frontend/src/components/buttons/AdminButton.tsx

@@ -2,7 +2,7 @@ import { t } from '@lingui/macro';
 import { IconUserStar } from '@tabler/icons-react';
 import { useCallback, useMemo } from 'react';
 
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 import { useUserState } from '../../states/UserState';
@@ -78,14 +78,14 @@ export default function AdminButton(props: Readonly<AdminButtonProps>) {
   return (
     <ActionButton
       icon={<IconUserStar />}
-      color="blue"
-      size="lg"
-      radius="sm"
-      variant="filled"
+      color='blue'
+      size='lg'
+      radius='sm'
+      variant='filled'
       tooltip={t`Open in admin interface`}
       hidden={!enabled}
       onClick={openAdmin}
-      tooltipAlignment="bottom"
+      tooltipAlignment='bottom'
     />
   );
 }

src/frontend/src/components/buttons/ButtonMenu.tsx

@@ -16,16 +16,16 @@ export function ButtonMenu({
   tooltip?: string;
 }>) {
   return (
-    <Menu shadow="xs">
+    <Menu shadow='xs'>
       <Menu.Target>
-        <ActionIcon variant="default">
+        <ActionIcon variant='default'>
           <Tooltip label={tooltip}>{icon}</Tooltip>
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown>
         {label && <Menu.Label>{label}</Menu.Label>}
         {actions.map((action, i) => (
-          <Menu.Item key={i}>{action}</Menu.Item>
+          <Menu.Item key={`${i}-${action}`}>{action}</Menu.Item>
         ))}
       </Menu.Dropdown>
     </Menu>

src/frontend/src/components/buttons/CopyButton.tsx

@@ -3,7 +3,7 @@ import {
   ActionIcon,
   Button,
   CopyButton as MantineCopyButton,
-  MantineSize,
+  type MantineSize,
   Text,
   Tooltip
 } from '@mantine/core';
@@ -30,13 +30,13 @@ export function CopyButton({
           <ButtonComponent
             color={copied ? 'teal' : 'gray'}
             onClick={copy}
-            variant="transparent"
+            variant='transparent'
             size={size ?? 'sm'}
           >
             {copied ? (
-              <InvenTreeIcon icon="check" />
+              <InvenTreeIcon icon='check' />
             ) : (
-              <InvenTreeIcon icon="copy" />
+              <InvenTreeIcon icon='copy' />
             )}
             {content}
             {label && (

src/frontend/src/components/buttons/EditButton.tsx

@@ -17,7 +17,7 @@ export function EditButton({
     <ActionIcon
       onClick={() => setEditing()}
       disabled={disabled}
-      variant="default"
+      variant='default'
     >
       {editing ? saveIcon : <IconEdit />}
     </ActionIcon>

src/frontend/src/components/buttons/PrimaryActionButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Tooltip } from '@mantine/core';
 
-import { InvenTreeIcon, InvenTreeIconType } from '../../functions/icons';
+import { InvenTreeIcon, type InvenTreeIconType } from '../../functions/icons';
 
 /**
  * A "primary action" button for display on a page detail, (for example)
@@ -25,12 +25,12 @@ export default function PrimaryActionButton({
   }
 
   return (
-    <Tooltip label={tooltip ?? title} position="bottom" hidden={!tooltip}>
+    <Tooltip label={tooltip ?? title} position='bottom' hidden={!tooltip}>
       <Button
         leftSection={icon && <InvenTreeIcon icon={icon} />}
         color={color}
-        radius="sm"
-        p="xs"
+        radius='sm'
+        p='xs'
         onClick={onClick}
       >
         {title}

src/frontend/src/components/buttons/PrintingActions.tsx

@@ -6,13 +6,13 @@ import { useMemo, useState } from 'react';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { extractAvailableFields } from '../../functions/forms';
 import { useCreateApiFormModal } from '../../hooks/UseForm';
 import { apiUrl } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 import { useUserSettingsState } from '../../states/SettingsState';
-import { ApiFormFieldSet } from '../forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../forms/fields/ApiFormField';
 import { ActionDropdown } from '../items/ActionDropdown';
 
 export function PrintingActions({
@@ -57,20 +57,20 @@ export function PrintingActions({
   });
 
   const labelFields: ApiFormFieldSet = useMemo(() => {
-    let fields: ApiFormFieldSet = printingFields.data || {};
+    const fields: ApiFormFieldSet = printingFields.data || {};
 
     // Override field values
-    fields['template'] = {
-      ...fields['template'],
+    fields.template = {
+      ...fields.template,
       filters: {
         enabled: true,
         model_type: modelType,
         items: items.join(',')
       }
     };
 
-    fields['items'] = {
-      ...fields['items'],
+    fields.items = {
+      ...fields.items,
       value: items,
       hidden: true
     };

src/frontend/src/components/buttons/RemoveRowButton.tsx

@@ -13,10 +13,10 @@ export default function RemoveRowButton({
   return (
     <ActionButton
       onClick={onClick}
-      icon={<InvenTreeIcon icon="square_x" />}
+      icon={<InvenTreeIcon icon='square_x' />}
       tooltip={tooltip}
-      tooltipAlignment="top"
-      color="red"
+      tooltipAlignment='top'
+      color='red'
     />
   );
 }

src/frontend/src/components/buttons/SSOButton.tsx

@@ -17,7 +17,7 @@ import {
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { apiUrl } from '../../states/ApiState';
-import { Provider } from '../../states/states';
+import type { Provider } from '../../states/states';
 
 const brandIcons: { [key: string]: JSX.Element } = {
   google: <IconBrandGoogle />,
@@ -51,8 +51,8 @@ export function SsoButton({ provider }: Readonly<{ provider: Provider }>) {
   return (
     <Button
       leftSection={getBrandIcon(provider)}
-      radius="xl"
-      component="a"
+      radius='xl'
+      component='a'
       onClick={login}
     >
       {provider.display_name}{' '}

src/frontend/src/components/buttons/ScanButton.tsx

@@ -16,7 +16,7 @@ export function ScanButton() {
           innerProps: {}
         })
       }
-      variant="transparent"
+      variant='transparent'
       title={t`Open Barcode Scanner`}
     >
       <IconQrcode />