Replace ESLint and Prettier with Biome

.github/workflows/ci.yml

@@ -18,32 +18,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Cache Yarn cache
-        uses: actions/cache@v4
-        env:
-          cache-name: yarn-cache
-        with:
-          path: ~/.yarn/berry/cache
-          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-${{ env.cache-name }}
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Install dependencies
-        run: yarn --immutable
-
-      - name: Build package
-        run: yarn build
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
 
       - name: Run tests
-        run: yarn lint
+        run: biome lint
 
   typescript:
     name: Type checking
@@ -88,29 +67,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Cache Yarn cache
-        uses: actions/cache@v4
-        env:
-          cache-name: yarn-cache
-        with:
-          path: ~/.yarn/berry/cache
-          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-${{ env.cache-name }}
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - name: Install dependencies
-        run: yarn --immutable
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
 
       - name: Run formatting
-        run: yarn format
+        run: biome format
 
   unit:
     name: Unit tests

.husky/pre-commit

@@ -1 +1 @@
-yarn lint-staged
+yarn format --staged --no-errors-on-unmatched --write

.vscode/extensions.json

@@ -1,4 +1,4 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "eamodio.gitlens", "esbenp.prettier-vscode"],
+  "recommendations": ["biomejs.biome", "eamodio.gitlens"],
   "unwantedRecommendations": ["dbaeumer.jshint"]
 }

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.defaultFormatter": "biomejs.biome",
   "editor.formatOnSave": true,
   "search.exclude": {
     "**/.yarn": true

biome.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
+  "files": {
+    "ignore": [".tsimp", "coverage", "dist", ".pnp.cjs", ".pnp.loader.mjs"]
+  },
+  "formatter": {
+    "lineWidth": 100,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "rules": {
+      "complexity": {
+        "noUselessSwitchCase": "off"
+      },
+      "suspicious": {
+        "noConsoleLog": "warn"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "overrides": [
+    {
+      "include": ["**/package.json"],
+      "formatter": {
+        "lineWidth": 1
+      }
+    },
+    {
+      "include": ["**/vite.config.ts"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noConsoleLog": "off"
+          }
+        }
+      }
+    }
+  ]
+}

package.json

@@ -18,12 +18,7 @@
     "unit": "yarn workspaces foreach --all run unit"
   },
   "devDependencies": {
-    "husky": "^9.0.0",
-    "lint-staged": "^15.0.0",
-    "prettier": "^3.2.0"
-  },
-  "resolutions": {
-    "eslint-plugin-import": "npm:eslint-plugin-i@^2.28.0"
+    "husky": "^9.0.0"
   },
   "packageManager": "[email protected]"
 }

packages/react-timerange-picker/package.json

@@ -26,8 +26,8 @@
     "build-js-cjs-replace": "replace-in-files --string='/dist/esm/'  --replacement='/dist/cjs/' dist/cjs/**/*",
     "clean": "rimraf dist",
     "copy-styles": "cpy 'src/**/*.css' dist",
-    "format": "prettier --check . --cache",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "format": "biome format",
+    "lint": "biome lint",
     "prepack": "yarn clean && yarn build",
     "test": "yarn lint && yarn tsc && yarn format && yarn unit",
     "tsc": "tsc",
@@ -54,18 +54,16 @@
     "react-time-picker": "^7.0.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.8.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^15.0.0",
     "@testing-library/user-event": "^14.5.0",
     "@types/node": "*",
     "@types/react": "*",
     "cpy-cli": "^5.0.0",
-    "eslint": "^8.56.0",
-    "eslint-config-wojtekmaj": "^1.0.0",
     "happy-dom": "^12.6.0",
     "nodemon": "^3.0.0",
-    "prettier": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "replace-in-files-cli": "^2.2.0",

packages/react-timerange-picker/src/TimeRangePicker.spec.tsx

@@ -40,7 +40,6 @@ describe('TimeRangePicker', () => {
   });
 
   it('passes autoFocus flag to first TimeInput component', () => {
-    // eslint-disable-next-line jsx-a11y/no-autofocus
     const { container } = render(<TimeRangePicker autoFocus />);
 
     const customInputs = container.querySelectorAll('input[data-input]');

packages/react-timerange-picker/src/TimeRangePicker.tsx

@@ -31,6 +31,7 @@ const iconProps = {
 };
 
 const ClockIcon = (
+  // biome-ignore lint/a11y/noSvgWithoutTitle: Purely decorative icon
   <svg
     {...iconProps}
     className={`${baseClassName}__clock-button__icon ${baseClassName}__button__icon`}
@@ -42,6 +43,7 @@ const ClockIcon = (
 );
 
 const ClearIcon = (
+  // biome-ignore lint/a11y/noSvgWithoutTitle: Purely decorative icon
   <svg
     {...iconProps}
     className={`${baseClassName}__clear-button__icon ${baseClassName}__button__icon`}
@@ -490,18 +492,18 @@ export default function TimeRangePicker(props: TimeRangePickerProps) {
         closeClock({ reason: 'outsideAction' });
       }
     },
-    [clockWrapper, closeClock, wrapper],
+    [closeClock],
   );
 
   const handleOutsideActionListeners = useCallback(
     (shouldListen = isOpen) => {
-      outsideActionEvents.forEach((event) => {
+      for (const event of outsideActionEvents) {
         if (shouldListen) {
           document.addEventListener(event, onOutsideAction);
         } else {
           document.removeEventListener(event, onOutsideAction);
         }
-      });
+      }
 
       if (shouldListen) {
         document.addEventListener('keydown', onKeyDown);
@@ -512,6 +514,7 @@ export default function TimeRangePicker(props: TimeRangePickerProps) {
     [isOpen, onOutsideAction, onKeyDown],
   );
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect intentionally triggered on isOpen change
   useEffect(() => {
     handleOutsideActionListeners();
 
@@ -556,7 +559,6 @@ export default function TimeRangePicker(props: TimeRangePickerProps) {
       <div className={`${baseClassName}__wrapper`}>
         <TimeInput
           {...commonProps}
-          // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus={autoFocus}
           name={`${name}_from`}
           onChange={onChangeFrom}
@@ -630,7 +632,11 @@ export default function TimeRangePicker(props: TimeRangePickerProps) {
     );
   }
 
-  const eventProps = useMemo(() => makeEventProps(otherProps), [otherProps]);
+  const eventProps = useMemo(
+    () => makeEventProps(otherProps),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: FIXME
+    [otherProps],
+  );
 
   return (
     <div

test/Test.tsx

@@ -32,8 +32,6 @@ const placeholderProps = {
   secondPlaceholder: 'ss',
 };
 
-/* eslint-disable no-console */
-
 export default function Test() {
   const portalContainer = useRef<HTMLDivElement>(null);
   const [disabled, setDisabled] = useState(false);

test/package.json

@@ -7,8 +7,8 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite",
-    "format": "prettier --check . --cache",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "format": "biome format",
+    "lint": "biome lint",
     "preview": "vite preview",
     "test": "yarn lint && yarn tsc && yarn format",
     "tsc": "tsc"
@@ -25,11 +25,9 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.8.0",
     "@types/react": "*",
     "@vitejs/plugin-react": "^4.2.0",
-    "eslint": "^8.56.0",
-    "eslint-config-wojtekmaj": "^1.0.0",
-    "prettier": "^3.2.0",
     "typescript": "^5.4.2",
     "vite": "^5.0.0"
   }