Migrate to biome and add lint, typecheck to CI

.github/CI.md

@@ -7,13 +7,13 @@ This project uses GitHub Actions for continuous integration. The CI workflow run
 The CI workflow (`.github/workflows/ci.yml`) runs the following checks in sequence:
 
 1. **Install dependencies** - `yarn install --frozen-lockfile`
-2. **Test** - `yarn test` - Runs all unit tests (currently 39 tests)
-3. **Build** - `yarn build` - Verifies all packages build successfully
+2. **Lint** - `yarn lint` - Runs Biome linter on all source files
+3. **Type check** - `yarn typecheck` - Runs TypeScript type checking across all packages
+4. **Test** - `yarn test` - Runs all unit tests (currently 39 tests)
+5. **Build** - `yarn build` - Verifies all packages build successfully
 
 All checks must pass before code can be merged to `main`.
 
-> **Note:** Linting and type checking will be added after resolving existing type errors and migrating to Biome.
-
 ## Environment
 - **Node version:** 22.20.0
 - **Yarn version:** 1.22.18
@@ -23,12 +23,19 @@ All checks must pass before code can be merged to `main`.
 Before pushing your changes, you can run the same checks locally:
 
 ```bash
-# Run all checks
+# Run all checks in sequence
 yarn install --frozen-lockfile
+yarn lint
+yarn typecheck
 yarn test
 yarn build
 
 # Or run them individually as needed
+yarn lint          # Check code quality with Biome
+yarn lint:fix      # Fix auto-fixable linting issues
+yarn typecheck     # Check TypeScript types
+yarn test          # Run unit tests
+yarn build         # Build all packages
 ```
 
 ## Troubleshooting

.github/workflows/ci.yml

@@ -34,6 +34,12 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-nx-
 
+      - name: Lint
+        run: yarn lint
+
+      - name: Type check
+        run: yarn typecheck
+
       - name: Test
         run: yarn test
 

.lintstagedrc.json

@@ -1,4 +1,5 @@
 {
-  "{packages,entrypoints,web-components,viz-service}/**/*.{js,jsx,ts,tsx,json,css,scss,md}": "prettier --write",
-  "{packages,entrypoints,web-components,viz-service}/**/*.+(js,jsx,ts,tsx,json,css,scss,md)": "eslint"
+  "{packages}/**/*.{js,jsx,ts,tsx,json,css,md}": [
+    "biome check --write --no-errors-on-unmatched --files-ignore-unknown=true"
+  ]
 }

.storybook/preview.tsx

@@ -1,11 +1,5 @@
-import React from "react";
-
 const defaultDecorator = (Story: any, context: any) => {
-  return (
-    <>
-      <Story {...context} />
-    </>
-  );
+  return <Story {...context} />;
 };
 
 export const decorators = [defaultDecorator];

.storybook/storyshots.test.ts

@@ -1,9 +1,10 @@
 /// <reference types="vite/client"/>
 /// <reference types="vitest/globals"/>
-import { describe, expect, test } from "vitest";
+
+import { composeStories, Meta, StoryFn } from "@storybook/react";
 import { render, waitForElementToBeRemoved } from "@testing-library/react";
-import { Meta, StoryFn, composeStories } from "@storybook/react";
 import { parseISO } from "date-fns";
+import { describe, expect, test } from "vitest";
 import * as globalConfig from "./preview";
 
 vi?.useFakeTimers().setSystemTime(parseISO("2020-01-01"));
@@ -23,13 +24,13 @@ describe("Storybook Snapshots", async () => {
     modules
       .filter((module) => !/skip-storyshots/.test(module.default.title!))
       .map((module) => [module.default.title!, module]),
-  )("%s", (moduleName, module) => {
+  )("%s", (_moduleName, module) => {
     test.each(
       Object.values(composeStories(module, globalConfig)).map((Story) => [
         Story.storyName!,
         Story,
       ]),
-    )("%s", async (storyName, Story) => {
+    )("%s", async (_storyName, Story) => {
       const { container } = await render(Story({}));
       if (container.querySelector(".MuiCircularProgress-indeterminate")) {
         await waitForElementToBeRemoved(() =>

.storybook/vite.config.ts

@@ -2,7 +2,6 @@ import { mergeConfig } from "vite";
 
 import { default as base } from "../config/entrypoint/vite.config";
 
-
 export default mergeConfig(base, {
   test: {
     environment: "happy-dom",

biome.json

@@ -0,0 +1,81 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.2.6/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "experimentalScannerIgnores": [
+      "node_modules",
+      "dist",
+      "build",
+      ".nx",
+      "coverage",
+      "*.min.js",
+      "yarn.lock",
+      "package-lock.json"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 80,
+    "attributePosition": "auto"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "complexity": {
+        "noForEach": "off",
+        "noStaticOnlyClass": "off"
+      },
+      "style": {
+        "noNonNullAssertion": "off",
+        "useImportType": "off",
+        "useNodejsImportProtocol": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "off",
+        "noUnusedVariables": "error"
+      },
+      "a11y": {
+        "useKeyWithClickEvents": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "all",
+      "semicolons": "always",
+      "arrowParentheses": "always",
+      "bracketSpacing": true,
+      "bracketSameLine": false,
+      "quoteStyle": "double",
+      "attributePosition": "auto"
+    }
+  },
+  "overrides": [
+    {
+      "includes": ["*.stories.*", "*.test.*", "*.spec.*"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noExplicitAny": "off"
+          }
+        }
+      }
+    }
+  ]
+}

package.json

@@ -16,8 +16,9 @@
     "create-entrypoint": "bash -e ./scripts/create-package -e",
     "create-package": "bash -e ./scripts/create-package",
     "sync-env": "bash -e ./scripts/sync-env",
-    "lint": "eslint {packages,entrypoints,web-components,viz-service}/*/src -c .eslintrc.js --ext js,jsx,ts,tsx --fix && yarn eslint {packages,entrypoints,web-components,viz-service}/*/spec -c .eslintrc.js --ext js,jsx,ts,tsx --fix",
-    "format": "run prettier -w {packages,entrypoints,web-components,viz-service}/*/src/**/*.{ts,js,tsx} && yarn run prettier -w {packages,entrypoints,web-components,viz-service}/*/spec/*.{ts,tsx}",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "format": "biome format --write .",
     "test": "vitest run --workspace=vitest.workspace.ts",
     "test:ui": "vitest --workspace=vitest.workspace.ts --ui",
     "test:watch": "vitest --workspace=vitest.workspace.ts",
@@ -40,6 +41,7 @@
     "chromatic": "chromatic"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.2.6",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/view": "^6.32.0",
     "@emotion/react": "^11.13.0",
@@ -82,7 +84,9 @@
     "minimist": "^1.2.8",
     "qs": "^6.11.2",
     "string-width": "^4.2.0",
-    "wrap-ansi": "^7.0.0"
+    "wrap-ansi": "^7.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
   },
   "volta": {
     "node": "22.20.0",

packages/experience-editor/main.tsx

@@ -1,6 +1,6 @@
-import r2wc from "react-to-webcomponent";
 import React from "react";
 import * as ReactDOM from "react-dom/client";
+import r2wc from "react-to-webcomponent";
 import WidgetWizard from "./src/App";
 
 const LyticswidgetWizardWC = r2wc(WidgetWizard, React, ReactDOM, {

packages/experience-editor/package.json

@@ -33,7 +33,7 @@
     "yarn": "1.22.18"
   },
   "devDependencies": {
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0"
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
   }
 }

packages/experience-editor/src/App.tsx

@@ -1,9 +1,9 @@
-import React from "react";
 import { Box } from "@mui/material";
-import WidgetWizard from "./components/widgetWizard";
-import { createTheme, ThemeProvider, styled } from "@mui/material/styles";
-import { LightBlueGray, DarkestBlueGray } from "./utility/colors";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 import type {} from "@mui/x-date-pickers/themeAugmentation";
+import React from "react";
+import WidgetWizard from "./components/widgetWizard";
+import { DarkestBlueGray, LightBlueGray } from "./utility/colors";
 
 const theme = createTheme({
   components: {
@@ -135,7 +135,7 @@ const CoreWidgetWizard: React.FC<CoreWidgetWizardProps> = ({
   // url decode the pathfora config
   try {
     pathforaconfig = atob(pathforaconfig);
-  } catch (e) {
+  } catch (_e) {
     pathforaconfig = "";
   }
 

packages/experience-editor/src/components/branding.tsx

@@ -1,21 +1,21 @@
-import React, { useEffect, useState } from "react";
-import { SelectInput } from "../components/form/select";
+import { Home } from "@mui/icons-material";
+import React from "react";
 import { ColorInput } from "../components/form/color";
-import { NumberedSection } from "../components/form/numberedSection";
 import { ColorPicker } from "../components/form/colorPicker";
-import { Home } from "@mui/icons-material";
+import { NumberedSection } from "../components/form/numberedSection";
+import { SelectInput } from "../components/form/select";
 
 import {
-  theme,
-  backgroundColor,
-  textColor,
-  headlineColor,
-  closeColor,
   actionBackgroundColor,
   actionTextColor,
+  backgroundColor,
   cancelBackgroundColor,
   cancelTextColor,
+  closeColor,
   fieldBackgroundColor,
+  headlineColor,
+  textColor,
+  theme,
 } from "../data/pfa-fields";
 
 interface BrandingSectionProps {