refactor: use biome for format and lint (#1181)

* refactor: use biome for format and lint

* fix: config

* chore: apply changes

* chore: format

* chore: lint

* fix: update overrides

* feat: ci

* chore: lint fixes

* chore: format

* chore: final fixes

* feat: add rule

* fix: role

* fix: type error

Author: Niznikr

.changeset/config.json

@@ -1,14 +1,14 @@
 {
-  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": ["@changesets/changelog-github", { "repo": "launchdarkly/launchpad-ui" }],
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
-    "onlyUpdatePeerDependentsWhenOutOfRange": true
-  },
-  "ignore": ["@launchpad-ui/remix"]
+	"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+	"changelog": ["@changesets/changelog-github", { "repo": "launchdarkly/launchpad-ui" }],
+	"commit": false,
+	"fixed": [],
+	"linked": [],
+	"access": "public",
+	"baseBranch": "main",
+	"updateInternalDependencies": "patch",
+	"___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+		"onlyUpdatePeerDependentsWhenOutOfRange": true
+	},
+	"ignore": ["@launchpad-ui/remix"]
 }

.eslintignore

@@ -49,7 +49,7 @@ jobs:
         run: pnpm install
 
       - name: Lint
-        run: pnpm lint:ci
+        run: pnpm lint:packages
 
   test:
     name: Test
@@ -202,3 +202,17 @@ jobs:
 
       - name: Type Check
         run: pnpm typecheck
+
+  quality:
+    name: Quality
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+
+      - name: Run Biome
+        run: biome ci .

.eslintrc.js

@@ -1 +1 @@
-pnpm lint-staged
+node_modules/.bin/lint-staged

.github/workflows/verify.yml

@@ -1,22 +1,22 @@
 const { spawn } = require('child_process');
 
 function installDependencies(_, config) {
-  return new Promise((resolve, reject) => {
-    const process = spawn('pnpm', ['install'], {
-      cwd: config.path,
-      shell: true,
-      stdio: 'inherit',
-    });
+	return new Promise((resolve, reject) => {
+		const process = spawn('pnpm', ['install'], {
+			cwd: config.path,
+			shell: true,
+			stdio: 'inherit',
+		});
 
-    process.on('close', (code) => {
-      `${code}` === '0'
-        ? resolve('Installed packages.')
-        : reject(`Failed to install packages. Exited with ${code}.`);
-    });
-  });
+		process.on('close', (code) => {
+			`${code}` === '0'
+				? resolve('Installed packages.')
+				: reject(`Failed to install packages. Exited with ${code}.`);
+		});
+	});
 }
 
-module.exports = function (plop) {
-  plop.setDefaultInclude({ actionTypes: true });
-  plop.setActionType('installDependencies', installDependencies);
+module.exports = (plop) => {
+	plop.setDefaultInclude({ actionTypes: true });
+	plop.setActionType('installDependencies', installDependencies);
 };

.husky/pre-commit

@@ -28,7 +28,7 @@
   "scripts": {
     "build": "vite build -c ../../vite.config.mts && tsc --project tsconfig.build.json",
     "clean": "rm -rf dist",
-    "lint": "eslint '**/*.{ts,tsx,js}' && stylelint '**/*.css' --ignore-path ../../.stylelintignore",
+    "lint": "stylelint '**/*.css' --ignore-path ../../.stylelintignore",
     "test": "vitest run --coverage"
   },
   "dependencies": {

.plop/actions/install-dependencies.js

@@ -1,37 +1,38 @@
 import styles from './Block.module.css';
 
 const toCSSValue = (v: number | string) =>
-  typeof v === 'string' && Number.isFinite(+v) ? `${v}px` : v;
+	typeof v === 'string' && Number.isFinite(+v) ? `${v}px` : v;
 
 type BlockProps = {
-  text?: string;
-  width?: number | string;
-  height?: number | string;
+	text?: string;
+	width?: number | string;
+	height?: number | string;
 };
 
 const Block = ({ text, width = '100%', height = 64 }: BlockProps) => {
-  return (
-    <svg
-      className={styles.container}
-      style={{
-        width: toCSSValue(width),
-        height: toCSSValue(height),
-      }}
-    >
-      <rect className={styles.rect} />
-      <rect className={styles.border} />
-      {text ? (
-        <text className={styles.text} x="50%" y="50%">
-          {text}
-        </text>
-      ) : (
-        <>
-          <line className={styles.line} x1="0" y1="0" x2="100%" y2="100%" />
-          <line className={styles.line} x1="100%" y1="0" x2="0" y2="100%" />
-        </>
-      )}
-    </svg>
-  );
+	return (
+		<svg
+			className={styles.container}
+			style={{
+				width: toCSSValue(width),
+				height: toCSSValue(height),
+			}}
+			role="presentation"
+		>
+			<rect className={styles.rect} />
+			<rect className={styles.border} />
+			{text ? (
+				<text className={styles.text} x="50%" y="50%">
+					{text}
+				</text>
+			) : (
+				<>
+					<line className={styles.line} x1="0" y1="0" x2="100%" y2="100%" />
+					<line className={styles.line} x1="100%" y1="0" x2="0" y2="100%" />
+				</>
+			)}
+		</svg>
+	);
 };
 
 export { Block };