Replace ESLint and Prettier with Biome (#941)

.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

@@ -19,12 +19,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-calendar/package.json

@@ -25,8 +25,8 @@
     "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
     "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",
@@ -52,17 +52,15 @@
     "warning": "^4.0.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.8.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^15.0.0",
     "@types/node": "*",
     "@types/react": "*",
     "@types/warning": "^3.0.0",
     "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",
     "rimraf": "^3.0.0",

packages/react-calendar/src/Calendar.tsx

@@ -479,7 +479,7 @@ function getValue(value: LooseValue | undefined, index: 0 | 1): Date | null {
 
   const valueDate = toDate(rawValue);
 
-  if (isNaN(valueDate.getTime())) {
+  if (Number.isNaN(valueDate.getTime())) {
     throw new Error(`Invalid date: ${value}`);
   }
 

packages/react-calendar/src/Flex.spec.tsx

@@ -64,9 +64,11 @@ describe('Flex', () => {
     const wrapper = container.firstElementChild as HTMLDivElement;
     const children = Array.from(wrapper.children);
 
-    children.forEach((child) => expect(child).toHaveStyle('flex-basis: 33.333333333333336%'));
-    expect(children[0]).toHaveStyle('margin-left: 33.333333333333336%');
-    expect(children[0]).toHaveStyle('margin-inline-start: 33.333333333333336%');
-    expect(children[0]).toHaveStyle('margin-inline-end: 0');
+    for (const child of children) {
+      expect(child).toHaveStyle('flex-basis: 33.333333333333336%');
+      expect(child).toHaveStyle('flex-shrink: 0');
+      expect(child).toHaveStyle('flex-grow: 0');
+      expect(child).toHaveStyle('overflow: hidden');
+    }
   });
 });

packages/react-calendar/src/Flex.tsx

@@ -1,7 +1,7 @@
 import { Children, cloneElement } from 'react';
 
 type FlexProps = React.HTMLAttributes<HTMLDivElement> & {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Too complex to type
   children: React.ReactElement<any>[];
   className?: string;
   count: number;

packages/react-calendar/src/MonthView/WeekNumber.tsx

@@ -35,6 +35,7 @@ export default function WeekNumber(props: WeekNumberProps) {
         {children}
       </button>
     );
+    // biome-ignore lint/style/noUselessElse: TypeScript is unhappy if we remove this else
   } else {
     const { date, onClickWeekNumber, weekNumber, ...otherProps } = props;
 

packages/react-calendar/src/Tile.spec.tsx

@@ -40,9 +40,9 @@ describe('<Tile /> component', () => {
 
     const button = container.querySelector('button');
 
-    classes.forEach((className) => {
+    for (const className of classes) {
       expect(button).toHaveClass(className);
-    });
+    }
   });
 
   it('renders children properly', () => {

packages/react-calendar/src/Tile.tsx

@@ -113,7 +113,7 @@ export default function Tile(props: TileProps) {
       disabled={
         (minDate && minDateTransform(minDate) > date) ||
         (maxDate && maxDateTransform(maxDate) < date) ||
-        (tileDisabled && tileDisabled({ activeStartDate, date, view }))
+        tileDisabled?.({ activeStartDate, date, view })
       }
       onClick={onClick ? (event) => onClick(date, event) : undefined}
       onFocus={onMouseOver ? () => onMouseOver(date) : undefined}

packages/react-calendar/src/shared/dates.ts

@@ -133,8 +133,8 @@ export function getWeekNumber(
     calendarType === CALENDAR_TYPES.GREGORY ? CALENDAR_TYPES.GREGORY : CALENDAR_TYPES.ISO_8601;
   const beginOfWeek = getBeginOfWeek(date, calendarType);
   let year = getYear(date) + 1;
-  let dayInWeekOne;
-  let beginOfFirstWeek;
+  let dayInWeekOne: Date;
+  let beginOfFirstWeek: Date;
 
   // Look for the first week one that does not come after a given date
   do {
@@ -342,10 +342,10 @@ export function getValueRange(rangeType: RangeType, date1: Date, date2: Date): [
 
 function toYearLabel(
   locale: string | undefined,
-  formatYear: ((locale: string | undefined, date: Date) => string) | undefined = defaultFormatYear,
+  formatYear: ((locale: string | undefined, date: Date) => string) | undefined,
   dates: Date[],
 ): string {
-  return dates.map((date) => formatYear(locale, date)).join(' – ');
+  return dates.map((date) => (formatYear || defaultFormatYear)(locale, date)).join(' – ');
 }
 
 /**

test/Test.tsx

@@ -66,8 +66,6 @@ const tileContent = ({ date, view }: { date: Date; view: View }) => {
 const nineteenNinetyFive = new Date(1995, now.getUTCMonth() + 1, 15, 12);
 const fifteenthOfNextMonth = new Date(now.getUTCFullYear(), now.getUTCMonth() + 1, 15, 12);
 
-/* eslint-disable no-console */
-
 type ReturnValue = 'start' | 'end' | 'range';
 
 export default function Test() {

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"
@@ -26,11 +26,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"
   }