chore(deps): Bump biome (#320)

* chore(deps): bump biome

* bump to 2.4.7

Author: bastiendmt

.node-version

@@ -1 +1 @@
-18.17
+22

biome.json

@@ -13,7 +13,13 @@
         "noImplicitBoolean": "off",
         "noShoutyConstants": "warn",
         "useBlockStatements": "warn",
-        "useShorthandArrayType": "warn"
+        "useConsistentArrayType": {
+          "level": "warn",
+          "options": { "syntax": "shorthand" }
+        }
+      },
+      "a11y": {
+        "useSemanticElements": "off"
       }
     }
   },
@@ -23,7 +29,7 @@
     "indentStyle": "space",
     "indentWidth": 2,
     "lineWidth": 80,
-    "ignore": []
+    "includes": ["**"]
   },
   "javascript": {
     "formatter": {

package.json

@@ -9,13 +9,13 @@
     "build": "tsc && vite build",
     "serve": "vite preview",
     "lint": "yarn biome check src/",
-    "lint:fix": "yarn biome check src/ --apply",
+    "lint:fix": "yarn biome check src/ --write",
     "format": "yarn biome format src/ --write",
     "ci": "yarn biome ci src/",
     "test": "vitest run --coverage"
   },
   "dependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "^2.4.7",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "axios": "^1.9.0",

src/components/Loader/Loader.tsx

@@ -8,7 +8,6 @@ const Loader = () => (
     aria-valuenow={0}
     aria-valuemin={0}
     aria-valuemax={100}
-    tabIndex={0}
   />
 );
 

src/components/Player/Player.module.scss

@@ -1,6 +1,6 @@
 .Player {
-  grid-row: 2/3;
-  grid-column: 1/3;
+  grid-row: 2 / 3;
+  grid-column: 1 / 3;
   background-color: var(--bg-secondary);
   z-index: 4;
   height: 90px;

src/components/Player/Player.tsx

@@ -128,7 +128,6 @@ const Player = () => {
               onClick={(event) => barCallBack(event, volumeRef, setVolume)}
               onKeyDown={() => setMute(!mute)}
               ref={volumeRef}
-              // biome-ignore lint/a11y/useSemanticElements: clickable div is fine
               role="button"
               tabIndex={0}
             >

src/index.scss

@@ -1,8 +1,8 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: rgb(18, 18, 18);
@@ -13,8 +13,8 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 :root {

src/index.tsx

@@ -4,7 +4,7 @@ import App from './App';
 import './index.scss';
 
 const container = document.getElementById('root');
-// biome-ignore lint/style/noNonNullAssertion: <explanation>
+// biome-ignore lint/style/noNonNullAssertion: We are sure that the element with id 'root' exists in our HTML, so we can safely use the non-null assertion operator here
 const root = createRoot(container!);
 root.render(
   <React.StrictMode>

src/pages/PlaylistDetail/SongItem/SongItem.module.scss

@@ -68,8 +68,8 @@
   .NameContainer {
     display: grid;
     grid-template:
-      'title title'
-      'badges subtitle' / auto 1fr;
+      "title title"
+      "badges subtitle" / auto 1fr;
     column-gap: 8px;
     align-items: end;
     height: 40px;

src/pages/PlaylistDetail/SongItem/SongItem.tsx

@@ -28,7 +28,6 @@ const SongItem = ({ song, index, current }: SongItemPros) => {
           styles.Item,
           previewAvailable ? styles.Enabled : styles.Disabled,
         ].join(' ')}
-        // biome-ignore lint/a11y/useSemanticElements: clickable div is fine
         role="button"
         tabIndex={0}
         onClick={handleSongClick}