Use Biome to speed up linting (#2583)

Author: connor-baer

.eslintignore

@@ -11,7 +11,7 @@ package.json
 package-lock.json
 *rc.*
 /scripts/
-# disable linting for templates because it will have its own rules when used in a new app
+# disable linting for templates because they will have their own rules when used in a new app
 packages/cna-template/template
 packages/astro-template/src/env.d.ts
 packages/circuit-ui/vendor

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          cache: 'npm'
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci
@@ -34,7 +34,7 @@ jobs:
         run: npm run build
 
       - name: Lint code
-        run: npm run lint
+        run: npm run lint:ci
 
       - name: Lint styles
         run: npm run lint:css

.prettierignore

@@ -1,3 +1,4 @@
+// biome-ignore lint/correctness/noUnusedImports: React isn't injected globally in this file
 import React, { useState } from 'react';
 import {
   IconButton,

.storybook/addons/versions/index.tsx

@@ -14,10 +14,10 @@
  */
 
 import {
+  useState,
   type Dispatch,
   type SetStateAction,
-  useState,
-  ChangeEvent,
+  type ChangeEvent,
 } from 'react';
 import { Unstyled } from '@storybook/addon-docs';
 import * as iconComponents from '@sumup/icons';
@@ -43,7 +43,8 @@ function groupBy(
 ) {
   return icons.reduce(
     (groups, icon) => {
-      (groups[icon[key]] = groups[icon[key]] || []).push(icon);
+      groups[icon[key]] = groups[icon[key]] || [];
+      groups[icon[key]].push(icon);
       return groups;
     },
     {} as Record<string, IconsManifest['icons']>,

.storybook/components/Icons.tsx

@@ -19,17 +19,15 @@ import type { BodyLargeProps } from '../../packages/circuit-ui/index.js';
 
 import classes from './Intro.module.css';
 
-function Intro({
+export default function Intro({
   children,
   ...props
 }: {
   children: BodyLargeProps['children'];
-}): JSX.Element {
+}) {
   return (
     <BodyLarge as="div" variant="subtle" className={classes.base} {...props}>
       {children}
     </BodyLarge>
   );
 }
-
-export default Intro;

.storybook/components/Intro.tsx

@@ -16,7 +16,11 @@
 import type { ReactNode } from 'react';
 import { Unstyled } from '@storybook/addon-docs';
 import LinkTo from '@storybook/addon-links/react';
-import { Badge, BadgeProps, Body } from '../../packages/circuit-ui/index.js';
+import {
+  Body,
+  Badge,
+  type BadgeProps,
+} from '../../packages/circuit-ui/index.js';
 
 import classes from './Statuses.module.css';
 

.storybook/components/Statuses.tsx

@@ -13,18 +13,18 @@
  * limitations under the License.
  */
 
-import { ComponentType, useEffect, useState } from 'react';
+import { useEffect, useState, type ComponentType } from 'react';
 import { ThemeProvider, useTheme } from '@emotion/react';
 import { Unstyled } from '@storybook/addon-docs';
 import { light, schema } from '@sumup/design-tokens';
 import { SumUpLogomark } from '@sumup/icons';
 import {
   Anchor,
   Table,
-  TableHeaderCell,
-  TableRow,
   ToastProvider,
   useNotificationToast,
+  type TableHeaderCell,
+  type TableRow,
 } from '../../packages/circuit-ui/index.js';
 
 type CustomPropertyName = `--cui-${string}`;

.storybook/components/Theme.tsx

@@ -1,5 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-vite';
-import path from 'path';
+import path from 'node:path';
 import remarkGfm from 'remark-gfm';
 import { mergeConfig } from 'vite';
 
@@ -38,7 +38,7 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
-  async viteFinal(config, { configType }) {
+  async viteFinal(config) {
     return mergeConfig(config, {
       define: {
         'process.env.UNSAFE_DISABLE_ELEMENT_ERRORS': false,

.storybook/main.ts

@@ -36,7 +36,8 @@ addons.register('version-switcher', () => {
   addons.add(VERSIONS_PARAM_KEY, {
     type: types.TOOL,
     title: 'Versions',
-    match: ({ viewMode }) => !!(viewMode && viewMode?.match(/^(story|docs)$/)),
+    match: ({ viewMode }) =>
+      viewMode ? /^(story|docs)$/.test(viewMode) : false,
     render: Versions,
   });
 });

.storybook/manager.tsx

@@ -710,7 +710,6 @@ Previously, many apps would use `CreateStyled`:
 import styled, { CreateStyled } from '@emotion/styled';
 import { Theme } from '@sumup/design-tokens';
 
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
 export default styled as CreateStyled<Theme>;
 ```
 
@@ -737,7 +736,6 @@ import { Theme as CircuitTheme } from '@sumup/design-tokens';
 import {} from '@emotion/react/types/css-prop'; // See https://github.com/emotion-js/emotion/pull/1941
 
 declare module '@emotion/react' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface Theme extends CircuitTheme {}
 }
 ```

MIGRATION.md

@@ -0,0 +1,101 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.2/schema.json",
+  "extends": ["@sumup-oss/foundry/biome"],
+  "files": {
+    "ignore": [
+      // Generated artifacts
+      "**/build/**",
+      "**/dist/**",
+      "**/public/**",
+      "**/.next/**",
+      "**/.out/**",
+      "**/__coverage__/**",
+      "**/__reports__/**",
+      "**/*.astro",
+      "packages/circuit-ui/vendor/**"
+    ]
+  },
+  "formatter": {
+    "ignore": [
+      // Configuration files that use conflicting formatting
+      ".changeset/**",
+      "**/package.json",
+      "**/package-lock.json",
+      "**/tsconfig.json",
+      "**/tsconfig.*.json",
+      "**/lerna.json",
+      "**/.vscode/extensions.json"
+    ]
+  },
+  "organizeImports": {
+    "enabled": false
+  },
+  "linter": {
+    "rules": {
+      "recommended": true,
+      "style": {
+        "noDefaultExport": "warn",
+        "useFilenamingConvention": {
+          "level": "error",
+          "options": {
+            "requireAscii": true,
+            "filenameCases": ["camelCase", "kebab-case", "PascalCase"]
+          }
+        }
+      },
+      "suspicious": {
+        "noArrayIndexKey": "warn",
+        "noExplicitAny": "warn"
+      }
+    },
+    "ignore": [
+      // The templates have their own linting setup
+      "packages/astro-template/**",
+      "packages/cna-template/template/**",
+      "packages/remix-template/**"
+    ]
+  },
+  "overrides": [
+    {
+      "include": ["*.css"],
+      "css": {
+        "formatter": {
+          "enabled": true,
+          "indentStyle": "space",
+          "quoteStyle": "double"
+        },
+        "linter": {
+          "enabled": true
+        }
+      }
+    },
+    {
+      "include": ["*.module.css"],
+      "css": {
+        "parser": {
+          "cssModules": true
+        }
+      }
+    },
+    {
+      "include": ["packages/eslint-plugin-circuit-ui/**"],
+      "linter": {
+        "rules": {
+          "style": {
+            "noNonNullAssertion": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["**/*spec.*", "**/setupTests.*", "**/test-utils.*"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noGlobalAssign": "off"
+          }
+        }
+      }
+    }
+  ]
+}

biome.jsonc

@@ -15,5 +15,4 @@
 
 module.exports = require('@sumup-oss/foundry/lint-staged')({
   '*.svg': ['svgo --config svgo.config.js --pretty'],
-  '*.css': ['stylelint'],
 });