Switch to biome (#662)

Author: zoontek

README.md

@@ -23,15 +23,11 @@ $ pnpm install
 We recommend the following setup for an optimal developer experience:
 
 - [VS Code](https://code.visualstudio.com)
-- [VS Code ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [VS Code Biome](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)
 - [VS Code Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
 
 By default, the VS Code TypeScript extension only checks the types in open files. If you want your IDE to check types in the whole project, check `typescript.tsserver.experimental.enableProjectDiagnostics` in your VS Code preferences.
 
-For better performance (and confort!), it's recommended to set:
-
-- `eslint.run` to `"onSave"`.
-
 ## Linting
 
 ```console
@@ -44,6 +40,29 @@ You can also configure `lint-staged` as a pre-commit hook by running the followi
 $ pnpm configure-hooks
 ```
 
+### Ignore code
+
+If you want to ignore a lint rule for a specific line of the code, you can add a suppression comment above the line that emits the lint diagnostic:
+
+```ts
+// biome-ignore <rule>: <optional-explanation>
+```
+
+For example:
+
+```ts
+// biome-ignore lint/suspicious/noNamespace:
+namespace foo {}
+```
+
+For `useExhaustiveDependencies` (equivalent of `react-hooks/exhaustive-deps`), you can even specify which dependencies are ignored, on multiple lines:
+
+```ts
+// biome-ignore lint/correctness/useExhaustiveDependencies(fn):
+// biome-ignore lint/correctness/useExhaustiveDependencies(value):
+useEffect(fn, [fn, value]);
+```
+
 ## Generate Fluent icons
 
 Add the name of the desired icon in `scripts/fluent-icons/icons.json` using the format `icon-name-{filled|regular}`, and run the following command:

biome.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "clientKind": "git",
+    "enabled": false,
+    "useIgnoreFile": false
+  },
+  "files": {
+    "include": [
+      "packages/*/__stories__/**/*.ts",
+      "packages/*/__stories__/**/*.tsx",
+      "packages/*/src/**/*.ts",
+      "packages/*/src/**/*.tsx"
+    ],
+    "ignoreUnknown": true,
+    "ignore": ["**/*.d.ts"]
+  },
+  "formatter": {
+    "enabled": false
+  },
+  "organizeImports": {
+    "enabled": false
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "a11y": {
+        "noSvgWithoutTitle": "off",
+        "useAltText": "off",
+        "useIframeTitle": "off",
+        "useSemanticElements": "off",
+        "useValidAriaRole": "off"
+      },
+      "complexity": {
+        "noForEach": "off",
+        "useLiteralKeys": "off"
+      },
+      "correctness": {
+        "noFlatMapIdentity": "off",
+        "noUnusedVariables": "error",
+        "noVoidTypeReturn": "off",
+        "useArrayLiterals": "error",
+        "useHookAtTopLevel": "warn",
+        "useJsxKeyInIterable": "off"
+      },
+      "nursery": {
+        "noCommonJs": "error"
+      },
+      "style": {
+        "noImplicitBoolean": "error",
+        "noNamespace": "error",
+        "noUselessElse": "off",
+        "useBlockStatements": "warn",
+        "useImportType": "off",
+        "useTemplate": "off"
+      },
+      "suspicious": {
+        "noArrayIndexKey": "off",
+        "noMisleadingCharacterClass": "off",
+        "noConfusingVoidType": "off",
+        "noShadowRestrictedNames": "off"
+      }
+    }
+  }
+}

eslint.config.mjs

@@ -15,7 +15,7 @@
   "scripts": {
     "start": "storybook dev --port 6006",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint",
+    "lint": "biome check",
     "build-storybook": "storybook build --output-dir dist",
     "test": "vitest run",
     "build": "tsc -p tsconfig.build.json",
@@ -36,9 +36,9 @@
     "configure-hooks": "git config --local core.hooksPath .hooks"
   },
   "lint-staged": {
-    "packages/**/src/locales/*.json": "pnpm sort-locales",
     "*": "prettier --ignore-unknown --write",
-    "**/*.{js,ts,tsx}": "eslint --fix"
+    "packages/*/src/**/*.{ts,tsx}": "biome check",
+    "packages/*/src/locales/*.json": "pnpm sort-locales"
   },
   "pnpm": {
     "peerDependencyRules": {
@@ -48,7 +48,7 @@
     }
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
+    "@biomejs/biome": "1.9.4",
     "@fluentui/svg-icons": "^1.1.271",
     "@localazy/cli": "^1.7.15",
     "@storybook/addon-essentials": "^8.4.7",
@@ -60,10 +60,6 @@
     "@types/semver": "^7.5.8",
     "@vitejs/plugin-react-swc": "^3.7.2",
     "dotenv": "^16.4.7",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react": "^7.37.3",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-native": "^5.0.0",
     "fast-glob": "^3.3.3",
     "globals": "^15.14.0",
     "graphql": "^16.10.0",
@@ -84,7 +80,6 @@
     "tsx": "^4.19.2",
     "type-fest": "^4.31.0",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.19.1",
     "valienv": "^0.7.0",
     "vite": "^5.4.11",
     "vitest": "^2.1.8"

package.json

@@ -29,7 +29,7 @@ const InteractiveCheckbox = ({
   const [value, setValue] = useState(defaultValue);
 
   const toggle = () => {
-    setValue(v => (v === true ? false : true));
+    setValue(v => v !== true);
   };
 
   return (
@@ -48,7 +48,7 @@ const InteractiveLabelledCheckbox = ({
   const [value, setValue] = useState(defaultValue);
 
   const toggle = () => {
-    setValue(v => (v === true ? false : true));
+    setValue(v => v !== true);
   };
 
   return (

packages/lake/__stories__/Checkbox.stories.tsx

@@ -67,14 +67,12 @@ const steps: TopLevelStep[] = [
   },
 ];
 
-const stepIds = steps
-  .map(step =>
-    match(step)
-      .with({ id: P.string }, ({ id }) => [id])
-      .with({ children: P.array(P.any) }, ({ children }) => children.map(child => child.id))
-      .exhaustive(),
-  )
-  .flat();
+const stepIds = steps.flatMap(step =>
+  match(step)
+    .with({ id: P.string }, ({ id }) => [id])
+    .with({ children: P.array(P.any) }, ({ children }) => children.map(child => child.id))
+    .exhaustive(),
+);
 
 export const Interactive = () => {
   const [activeStepId, setActiveStepId] = useState("attach_the_documents_part_2");

packages/lake/__stories__/Stepper.stories.tsx

@@ -135,7 +135,7 @@ export const All = () => {
               icon="arrow-down-filled"
               style={styles.tag}
               color={color as ColorVariants}
-            ></Tag>
+            />
           ))}
         </Box>
       </StoryPart>
@@ -149,7 +149,7 @@ export const All = () => {
               style={styles.tag}
               color={color as ColorVariants}
               size="large"
-            ></Tag>
+            />
           ))}
         </Box>
       </StoryPart>

packages/lake/__stories__/Tag.stories.tsx

@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
   },
   horizontalLinkTextHovered: {
     color: colors.gray[900],
-    boxShadow: `0 1px currentColor`,
+    boxShadow: "0 1px currentColor",
   },
   activeHorizontalLinkText: {
     color: colors.gray[800],
@@ -201,6 +201,8 @@ export const BreadcrumbsRoot = ({ rootLevelCrumbs = emptyCrumbArray, children }:
     [crumbs],
   );
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies(setCrumbs):
+  // biome-ignore lint/correctness/useExhaustiveDependencies(currentIndexRef):
   const value = useMemo(
     () => [rootCrumbs, orderedCrumbs, setCrumbs, currentIndexRef] as const,
     [rootCrumbs, orderedCrumbs, setCrumbs, currentIndexRef],

packages/lake/src/components/Breadcrumbs.tsx

@@ -14,7 +14,6 @@ import { LakeTooltip } from "./LakeTooltip";
 import { Pressable } from "./Pressable";
 import { Space } from "./Space";
 
-/* eslint-disable react-native/no-unused-styles */
 const directionStyles = StyleSheet.create({
   column: { flexDirection: "column" },
   row: { flexDirection: "row" },
@@ -31,7 +30,6 @@ const justifyContentStyles = StyleSheet.create({
   center: { justifyContent: "center" },
   right: { justifyContent: "flex-end" },
 });
-/* eslint-enable react-native/no-unused-styles */
 
 const fadeOnLeftMask = `linear-gradient(to right, ${invariantColors.transparent}, ${invariantColors.black} ${spacings[8]})`;
 const fadeOnRightMask = `linear-gradient(to left, ${invariantColors.transparent}, ${invariantColors.black} ${spacings[8]})`;
@@ -78,7 +76,6 @@ const styles = StyleSheet.create({
   headerUnderlineActive: {
     backgroundColor: colors.current[500],
   },
-  // eslint-disable-next-line react-native/no-color-literals
   buttonUnderline: {
     position: "absolute",
     bottom: 0,

packages/lake/src/components/Cells.tsx

@@ -66,6 +66,8 @@ const FlatListWithRef = <T,>(
     ? { top: 0, width: onEndReachedThresholdPx }
     : { left: 0, height: onEndReachedThresholdPx };
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies(onEndReached):
+  // biome-ignore lint/correctness/useExhaustiveDependencies(data.length):
   useEffect(() => {
     const element = scrollTrackerRef.current as unknown as HTMLElement;
 
@@ -85,7 +87,7 @@ const FlatListWithRef = <T,>(
       };
     }
     // re-create an observer only on list length change
-  }, [data.length]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [data.length]);
 
   return (
     <ScrollView

packages/lake/src/components/FlatList.tsx

@@ -41,7 +41,9 @@ export const FocusTrap = forwardRef<FocusTrapRef, Props>(
     const hasFocusedOutside = useRef(false);
 
     useImperativeHandle(ref, () => ({
-      setInitiallyFocusedElement: element => (previouslyFocusedRef.current = element),
+      setInitiallyFocusedElement: element => {
+        previouslyFocusedRef.current = element;
+      },
     }));
 
     const [initialEscapeListenerCount] = useState(escapeListenerCount);