chore(devdeps): update dependency @biomejs/biome to v2 (#5371)

* chore(devdeps): update dependency @biomejs/biome to v2

* fix: biome v2

* fix: biome rules align with other projects

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Matthias Prost <[email protected]>

Author: renovate[bot]

.oxlintrc.json

@@ -60,7 +60,7 @@
     ],
     "eslint/require-await": "off",
     "eslint/sort-imports": [
-      "error",
+      "off",
       {
         "ignoreDeclarationSort": true,
         "memberSyntaxSortOrder": ["single", "multiple", "all", "none"]

biome.json

@@ -1,75 +1,110 @@
 {
   "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
-  "organizeImports": {
-    "enabled": true
-  },
-  "linter": {
-    "enabled": false
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on",
+        "useSortedAttributes": "on",
+        "useSortedKeys": "on",
+        "useSortedProperties": "on"
+      }
+    },
+    "includes": [
+      "!**/package.json",
+      "**/*.ts",
+      "**/*.tsx",
+      "!**/dist/**",
+      "!**/build/**",
+      "!**/.turbo/**",
+      "!**/prebuild.ts"
+    ]
   },
-  "vcs": {
-    "clientKind": "git",
-    "useIgnoreFile": true
+  "css": {
+    "formatter": {
+      "enabled": true,
+      "quoteStyle": "single"
+    },
+    "linter": {
+      "enabled": true
+    },
+    "parser": {
+      "allowWrongLineComments": false,
+      "cssModules": true
+    }
   },
   "files": {
-    "ignore": [
-      ".turbo/",
-      ".next/",
-      "coverage/",
-      "**/node_modules/",
-      "**/storybook-static",
-      "dist",
-      "**/pnpm-lock.yaml",
-      "**/package.json",
-      "**/CHANGELOG.md",
-      "*.snap",
-      "**/__snapshots__/",
-      ".storybook/**"
+    "includes": [
+      "**",
+      "!**/.turbo/",
+      "!**/.next/",
+      "!**/coverage/",
+      "!**/node_modules/",
+      "!**/storybook-static",
+      "!**/dist",
+      "!**/pnpm-lock.yaml",
+      "!**/package.json",
+      "!**/CHANGELOG.md",
+      "!**/*.snap",
+      "!**/__snapshots__/",
+      "!**/.storybook/**"
     ]
   },
   "formatter": {
+    "attributePosition": "auto",
     "enabled": true,
     "formatWithErrors": false,
+    "includes": [
+      "**/*.ts",
+      "**/*.tsx",
+      "!**/dist/**",
+      "!**/build/**",
+      "!**/.turbo/**"
+    ],
     "indentStyle": "space",
     "indentWidth": 2,
     "lineEnding": "lf",
-    "lineWidth": 80,
-    "attributePosition": "auto"
+    "lineWidth": 80
   },
   "javascript": {
     "formatter": {
-      "jsxQuoteStyle": "double",
-      "quoteProperties": "asNeeded",
-      "trailingCommas": "all",
-      "semicolons": "asNeeded",
       "arrowParentheses": "asNeeded",
-      "bracketSpacing": true,
+      "attributePosition": "auto",
       "bracketSameLine": false,
+      "bracketSpacing": true,
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
       "quoteStyle": "single",
-      "attributePosition": "auto"
+      "semicolons": "asNeeded",
+      "trailingCommas": "all"
     }
   },
   "json": {
     "formatter": {
       "enabled": true
     },
-    "parser": {
-      "allowComments": true
-    },
-    "linter": {
-      "enabled": true
-    }
-  },
-  "css": {
-    "formatter": {
-      "enabled": true,
-      "quoteStyle": "single"
-    },
     "linter": {
       "enabled": true
     },
     "parser": {
-      "allowWrongLineComments": false,
-      "cssModules": true
+      "allowComments": true
+    }
+  },
+  "linter": {
+    "enabled": false
+  },
+  "overrides": [
+    {
+      "assist": {
+        "actions": {
+          "source": {
+            "useSortedKeys": "off"
+          }
+        }
+      }
     }
+  ],
+  "vcs": {
+    "clientKind": "git",
+    "useIgnoreFile": true
   }
 }

e2e/App.tsx

@@ -2,7 +2,7 @@ import { Global, ThemeProvider } from '@emotion/react'
 // oxlint-disable-next-line import/no-unassigned-import
 import '@ultraviolet/fonts/fonts.css'
 import { consoleLightTheme } from '@ultraviolet/themes'
-import { Text, normalize } from '@ultraviolet/ui'
+import { normalize, Text } from '@ultraviolet/ui'
 import type { ReactNode } from 'react'
 import { lazy } from 'react'
 import {
@@ -24,10 +24,10 @@ const pagesToRender = Object.keys(modules)
   .map(path =>
     path.includes('render.tsx')
       ? {
-          name: path.replace('.tsx', ''),
           Component: lazy(
             () => import(`./tests/${path?.split('/')[2]}/render.tsx`),
           ),
+          name: path.replace('.tsx', ''),
         }
       : null,
   )
@@ -68,16 +68,16 @@ const App = () => (
     <GlobalWrapper>
       <Router>
         <Routes>
-          <Route path="/" element={<WelcomePage />} />
+          <Route element={<WelcomePage />} path="/" />
           {pagesToRender.map(path => {
             const Element = path?.Component
 
             if (Element) {
               return (
                 <Route
+                  element={<Element />}
                   key={path?.name}
                   path={path?.name?.split('/')[2]?.toLowerCase()}
-                  element={<Element />}
                 />
               )
             }

e2e/mocks/mockErrors.ts

@@ -1,11 +1,11 @@
 export const mockErrors = {
+  isInteger: () => `Incorrect field`,
+  max: () => `This field is too high (maximum is : ...)`,
   maxDate: () => `Date must be lower than ...`,
   maxLength: () => `This field should have a length lower than ...`,
+  min: () => `This field is too low (minimum is: ...)`,
   minDate: () => `Date must be greater than ...`,
   minLength: () => `This field should have a length greater than ...`,
   pattern: () => `This field should match the regex`,
   required: () => 'This field is required',
-  max: () => `This field is too high (maximum is : ...)`,
-  min: () => `This field is too low (minimum is: ...)`,
-  isInteger: () => `Incorrect field`,
 }

e2e/playwright.config.ts

@@ -12,25 +12,9 @@ const times = {
 }
 
 export default defineConfig({
-  webServer: {
-    // it will start web app before running tests so you don't need to start it manually
-    command: 'pnpm run start',
-    url: baseURL,
-    stdout: 'ignore',
-    stderr: 'pipe',
-  },
-  testDir: './tests',
-  fullyParallel: true,
   forbidOnly: !!isCI,
-  retries: isCI ? 2 : 0,
-  workers: isCI ? 1 : undefined,
-  reporter: 'line',
+  fullyParallel: true,
   globalTimeout: isCI ? 5 * times['1min'] : undefined,
-  timeout: isCI ? 1 * times['1min'] : undefined,
-  use: {
-    baseURL,
-    trace: 'on-first-retry',
-  },
 
   /* Configure projects for major browsers */
   projects: [
@@ -47,4 +31,20 @@ export default defineConfig({
       use: { ...devices['Desktop Safari'] },
     },
   ],
+  reporter: 'line',
+  retries: isCI ? 2 : 0,
+  testDir: './tests',
+  timeout: isCI ? 1 * times['1min'] : undefined,
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    // it will start web app before running tests so you don't need to start it manually
+    command: 'pnpm run start',
+    stderr: 'pipe',
+    stdout: 'ignore',
+    url: baseURL,
+  },
+  workers: isCI ? 1 : undefined,
 })

e2e/tests/componentsWithinModal/render.tsx

@@ -22,19 +22,26 @@ const Render = () => {
         />
         <div data-testid="input-value">{firstName}</div>
 
-        <Form errors={mockErrors} onSubmit={() => {}} methods={methods}>
+        <Form errors={mockErrors} methods={methods} onSubmit={() => {}}>
           <Stack gap={1}>
             <TextInputField
-              name="lastName"
-              label="Last name"
               control={methods.control}
+              label="Last name"
+              name="lastName"
             />
             <div data-testid="form-content">{methods.watch().lastName}</div>
 
             <SelectInputField
-              name="color"
-              label="Color"
               control={methods.control}
+              footer={
+                <Modal disclosure={<Button>Open Nested Modal</Button>}>
+                  <Text as="p" variant="body">
+                    This is the nested modal
+                  </Text>
+                </Modal>
+              }
+              label="Color"
+              name="color"
               options={[
                 {
                   label: 'Red',
@@ -49,13 +56,6 @@ const Render = () => {
                   value: 'blue',
                 },
               ]}
-              footer={
-                <Modal disclosure={<Button>Open Nested Modal</Button>}>
-                  <Text as="p" variant="body">
-                    This is the nested modal
-                  </Text>
-                </Modal>
-              }
             />
           </Stack>
         </Form>