Upgrade Biome to v2.2.0 and implement React recommended rules

apps/todo-app/app/components/__tests__/add-todo.test.tsx

@@ -1,15 +1,13 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { AddTodo } from '../add-todo';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { AddTodo } from '../add-todo';
 
 // Hoist regex to top-level to satisfy performance rule
 const addRegex = /add/i;
 
 function renderWithRouter(ui: React.ReactElement) {
-  const router = createMemoryRouter([
-    { path: '/', element: ui }
-  ], { initialEntries: ['/'] });
+  const router = createMemoryRouter([{ path: '/', element: ui }], { initialEntries: ['/'] });
   return render(<RouterProvider router={router} />);
 }
 

apps/todo-app/app/components/add-todo.tsx

@@ -1,9 +1,9 @@
-import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
-import { Plus } from 'lucide-react';
-import { TextField, FormError } from '@lambdacurry/forms';
+import { FormError, TextField } from '@lambdacurry/forms';
 import { Button } from '@lambdacurry/forms/ui';
+import { Plus } from 'lucide-react';
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
+import { z } from 'zod';
 
 const addTodoSchema = z.object({
   text: z.string().min(1, 'Todo text is required').trim()

apps/todo-app/app/components/todo-item.tsx

@@ -1,13 +1,13 @@
-import { useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
-import { z } from 'zod';
-import { Trash2, Edit2, Check, X } from 'lucide-react';
-import { TextField, FormError } from '@lambdacurry/forms';
+import { FormError, TextField } from '@lambdacurry/forms';
 import { Button } from '@lambdacurry/forms/ui';
 import { Checkbox } from '@todo-starter/ui';
-import { cn } from '@todo-starter/utils';
 import type { Todo } from '@todo-starter/utils';
+import { cn } from '@todo-starter/utils';
+import { Check, Edit2, Trash2, X } from 'lucide-react';
+import { useState } from 'react';
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
+import { z } from 'zod';
 
 const editTodoSchema = z.object({
   text: z.string().min(1, 'Todo text is required').trim()

apps/todo-app/app/lib/__tests__/todo-context.test.tsx

@@ -1,7 +1,7 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, act } from '@testing-library/react';
-import { TodoProvider, useTodoStore, getFilteredTodos } from '../todo-context';
+import { act, render, screen } from '@testing-library/react';
 import type { Todo } from '@todo-starter/utils';
+import { describe, expect, it } from 'vitest';
+import { getFilteredTodos, TodoProvider, useTodoStore } from '../todo-context';
 
 // Mock crypto.randomUUID for consistent testing
 Object.defineProperty(global, 'crypto', {
@@ -27,7 +27,11 @@ function TestComponent() {
       <button type="button" onClick={() => todos.length > 0 && deleteTodo(todos[0].id)} data-testid="delete-todo">
         Delete First Todo
       </button>
-      <button type="button" onClick={() => todos.length > 0 && updateTodo(todos[0].id, 'Updated text')} data-testid="update-todo">
+      <button
+        type="button"
+        onClick={() => todos.length > 0 && updateTodo(todos[0].id, 'Updated text')}
+        data-testid="update-todo"
+      >
         Update First Todo
       </button>
       <button type="button" onClick={() => setFilter('active')} data-testid="set-filter">
@@ -144,7 +148,9 @@ describe('todo-context', () => {
       // Suppress console.error for this test
       const originalError = console.error;
       // Provide a no-op replacement with a body to satisfy linter
-      console.error = (..._args: unknown[]) => { /* intentionally empty */ };
+      console.error = (..._args: unknown[]) => {
+        /* intentionally empty */
+      };
 
       expect(() => {
         render(<TestComponent />);

apps/todo-app/app/lib/todo-context.tsx

@@ -1,5 +1,5 @@
-import { createContext, useContext, useReducer, type ReactNode } from 'react';
 import type { Todo, TodoFilter } from '@todo-starter/utils';
+import { createContext, type ReactNode, useContext, useReducer } from 'react';
 
 // Define the action types for the reducer
 type TodoAction =

apps/todo-app/app/root.tsx

@@ -1,6 +1,5 @@
-import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
-
 import type { MetaFunction } from 'react-router';
+import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
 import { TodoProvider } from '~/lib/todo-context';
 import './globals.css';
 

apps/todo-app/app/routes/create-todo.tsx

@@ -1,13 +1,13 @@
-import type { MetaFunction, ActionFunctionArgs } from 'react-router';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixFormProvider, useRemixForm, getValidatedFormData } from 'remix-hook-form';
-import { z } from 'zod';
-import { useFetcher, useNavigate } from 'react-router';
-import { TextField, Checkbox, RadioGroup, DatePicker, FormError } from '@lambdacurry/forms';
+import { Checkbox, DatePicker, FormError, RadioGroup, TextField } from '@lambdacurry/forms';
 import { Button } from '@lambdacurry/forms/ui';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@todo-starter/ui';
 import type { Todo } from '@todo-starter/utils';
 import { ArrowLeft, Plus } from 'lucide-react';
+import type { ActionFunctionArgs, MetaFunction } from 'react-router';
+import { useFetcher, useNavigate } from 'react-router';
+import { getValidatedFormData, RemixFormProvider, useRemixForm } from 'remix-hook-form';
+import { z } from 'zod';
 
 const createTodoSchema = z.object({
   title: z.string().min(1, 'Title is required').max(100, 'Title must be less than 100 characters'),

apps/todo-app/app/routes/home.tsx

@@ -1,12 +1,12 @@
+import { Button } from '@lambdacurry/forms/ui';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@todo-starter/ui';
+import { Settings } from 'lucide-react';
 import type { MetaFunction } from 'react-router';
 import { Link } from 'react-router';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@todo-starter/ui';
-import { Button } from '@lambdacurry/forms/ui';
 import { AddTodo } from '~/components/add-todo';
-import { TodoItem } from '~/components/todo-item';
 import { TodoFilters } from '~/components/todo-filters';
-import { useTodoStore, getFilteredTodos } from '~/lib/todo-context';
-import { Settings } from 'lucide-react';
+import { TodoItem } from '~/components/todo-item';
+import { getFilteredTodos, useTodoStore } from '~/lib/todo-context';
 
 export const meta: MetaFunction = () => {
   return [

apps/todo-app/test/setup.ts

@@ -1,11 +1,10 @@
 import '@testing-library/jest-dom/vitest';
-import { afterEach } from 'vitest';
 import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
 
 // React Router's useRemixForm calls useHref; wrap renders in a Router for components that need it.
 // For tests that require Router context, prefer rendering the component within a MemoryRouter in the test itself.
 
 afterEach(() => {
   cleanup();
 });
-

apps/todo-app/vite-env.d.ts

@@ -11,4 +11,3 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
-

apps/todo-app/vitest.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vitest/config';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
   plugins: [tsconfigPaths()],

biome.json

@@ -1,16 +1,28 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.2.0/schema.json",
   "vcs": {
     "enabled": false,
     "clientKind": "git",
     "useIgnoreFile": false
   },
   "files": {
     "ignoreUnknown": false,
-    "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
-    "ignore": [".turbo", "yarn.lock", "node_modules", "**/.react-router/**", "build", "dist"]
+    "includes": [
+      "**/*.ts",
+      "**/*.tsx",
+      "**/*.js",
+      "**/*.jsx",
+      "!.turbo",
+      "!yarn.lock",
+      "!node_modules",
+      "!**/.react-router",
+      "!build",
+      "!dist"
+    ]
+  },
+  "assist": {
+    "enabled": true
   },
-  "organizeImports": { "enabled": false },
   "formatter": {
     "enabled": true,
     "formatWithErrors": false,
@@ -30,9 +42,8 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "all": true,
+      "recommended": true,
       "style": {
-        "all": true,
         "useBlockStatements": "off",
         "useNamingConvention": "off",
         "noImplicitBoolean": "off",
@@ -43,27 +54,27 @@
         "useExplicitLengthCheck": "off"
       },
       "complexity": {
-        "all": true,
         "noForEach": "off",
         "useLiteralKeys": "off",
         "noExcessiveCognitiveComplexity": "off"
       },
       "performance": {
-        "all": true,
         "noAccumulatingSpread": "off",
         "noBarrelFile": "off"
       },
       "suspicious": {
         "noConsole": "off",
-        "noConsoleLog": "off",
-        "noReactSpecificProps": "off",
-        "noExplicitAny": "error"
+        "noExplicitAny": "error",
+        "useBiomeIgnoreFolder": "off"
       },
       "correctness": {
-        "all": true,
         "noNodejsModules": "off",
         "noUndeclaredDependencies": "off",
         "useImportExtensions": "off"
+      },
+      "a11y": {
+        "useKeyWithClickEvents": "off",
+        "noLabelWithoutControl": "off"
       }
     }
   }

bun.lock

@@ -18,7 +18,7 @@
         "zod": "^3.24.1",
       },
       "devDependencies": {
-        "@biomejs/biome": "1.9.3",
+        "@biomejs/biome": "2.2.0",
         "@react-router/dev": "^7.7.1",
         "@types/node": "^20",
         "@types/react": "^19.1.8",
@@ -78,7 +78,7 @@
         "react-dom": "^19.1.0",
       },
       "devDependencies": {
-        "@biomejs/biome": "1.9.3",
+        "@biomejs/biome": "2.2.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.1.0",
         "@types/react": "^19.1.8",
@@ -100,7 +100,7 @@
         "tailwind-merge": "^2.2.0",
       },
       "devDependencies": {
-        "@biomejs/biome": "1.9.3",
+        "@biomejs/biome": "2.2.0",
         "typescript": "^5.8.3",
         "vitest": "^3.2.4",
       },
@@ -180,23 +180,23 @@
 
     "@babel/types": ["@babel/[email protected]", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1" } }, "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ=="],
 
-    "@biomejs/biome": ["@biomejs/biome@1.9.3", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "1.9.3", "@biomejs/cli-darwin-x64": "1.9.3", "@biomejs/cli-linux-arm64": "1.9.3", "@biomejs/cli-linux-arm64-musl": "1.9.3", "@biomejs/cli-linux-x64": "1.9.3", "@biomejs/cli-linux-x64-musl": "1.9.3", "@biomejs/cli-win32-arm64": "1.9.3", "@biomejs/cli-win32-x64": "1.9.3" }, "bin": { "biome": "bin/biome" } }, "sha512-POjAPz0APAmX33WOQFGQrwLvlu7WLV4CFJMlB12b6ZSg+2q6fYu9kZwLCOA+x83zXfcPd1RpuWOKJW0GbBwLIQ=="],
+    "@biomejs/biome": ["@biomejs/biome@2.2.0", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.2.0", "@biomejs/cli-darwin-x64": "2.2.0", "@biomejs/cli-linux-arm64": "2.2.0", "@biomejs/cli-linux-arm64-musl": "2.2.0", "@biomejs/cli-linux-x64": "2.2.0", "@biomejs/cli-linux-x64-musl": "2.2.0", "@biomejs/cli-win32-arm64": "2.2.0", "@biomejs/cli-win32-x64": "2.2.0" }, "bin": { "biome": "bin/biome" } }, "sha512-3On3RSYLsX+n9KnoSgfoYlckYBoU6VRM22cw1gB4Y0OuUVSYd/O/2saOJMrA4HFfA1Ff0eacOvMN1yAAvHtzIw=="],
 
-    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@1.9.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-QZzD2XrjJDUyIZK+aR2i5DDxCJfdwiYbUKu9GzkCUJpL78uSelAHAPy7m0GuPMVtF/Uo+OKv97W3P9nuWZangQ=="],
+    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.2.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zKbwUUh+9uFmWfS8IFxmVD6XwqFcENjZvEyfOxHs1epjdH3wyyMQG80FGDsmauPwS2r5kXdEM0v/+dTIA9FXAg=="],
 
-    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@1.9.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-vSCoIBJE0BN3SWDFuAY/tRavpUtNoqiceJ5PrU3xDfsLcm/U6N93JSM0M9OAiC/X7mPPfejtr6Yc9vSgWlEgVw=="],
+    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.2.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-+OmT4dsX2eTfhD5crUOPw3RPhaR+SKVspvGVmSdZ9y9O/AgL8pla6T4hOn1q+VAFBHuHhsdxDRJgFCSC7RaMOw=="],
 
-    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@1.9.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-vJkAimD2+sVviNTbaWOGqEBy31cW0ZB52KtpVIbkuma7PlfII3tsLhFa+cwbRAcRBkobBBhqZ06hXoZAN8NODQ=="],
+    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.2.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-6eoRdF2yW5FnW9Lpeivh7Mayhq0KDdaDMYOJnH9aT02KuSIX5V1HmWJCQQPwIQbhDh68Zrcpl8inRlTEan0SXw=="],
 
-    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@1.9.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-VBzyhaqqqwP3bAkkBrhVq50i3Uj9+RWuj+pYmXrMDgjS5+SKYGE56BwNw4l8hR3SmYbLSbEo15GcV043CDSk+Q=="],
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.2.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-egKpOa+4FL9YO+SMUMLUvf543cprjevNc3CAgDNFLcjknuNMcZ0GLJYa3EGTCR2xIkIUJDVneBV3O9OcIlCEZQ=="],
 
-    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@1.9.3", "", { "os": "linux", "cpu": "x64" }, "sha512-x220V4c+romd26Mu1ptU+EudMXVS4xmzKxPVb9mgnfYlN4Yx9vD5NZraSx/onJnd3Gh/y8iPUdU5CDZJKg9COA=="],
+    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.2.0", "", { "os": "linux", "cpu": "x64" }, "sha512-5UmQx/OZAfJfi25zAnAGHUMuOd+LOsliIt119x2soA2gLggQYrVPA+2kMUxR6Mw5M1deUF/AWWP2qpxgH7Nyfw=="],
 
-    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@1.9.3", "", { "os": "linux", "cpu": "x64" }, "sha512-TJmnOG2+NOGM72mlczEsNki9UT+XAsMFAOo8J0me/N47EJ/vkLXxf481evfHLlxMejTY6IN8SdRSiPVLv6AHlA=="],
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.2.0", "", { "os": "linux", "cpu": "x64" }, "sha512-I5J85yWwUWpgJyC1CcytNSGusu2p9HjDnOPAFG4Y515hwRD0jpR9sT9/T1cKHtuCvEQ/sBvx+6zhz9l9wEJGAg=="],
 
-    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@1.9.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-lg/yZis2HdQGsycUvHWSzo9kOvnGgvtrYRgoCEwPBwwAL8/6crOp3+f47tPwI/LI1dZrhSji7PNsGKGHbwyAhw=="],
+    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.2.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-n9a1/f2CwIDmNMNkFs+JI0ZjFnMO0jdOyGNtihgUNFnlmd84yIYY2KMTBmMV58ZlVHjgmY5Y6E1hVTnSRieggA=="],
 
-    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@1.9.3", "", { "os": "win32", "cpu": "x64" }, "sha512-cQMy2zanBkVLpmmxXdK6YePzmZx0s5Z7KEnwmrW54rcXK3myCNbQa09SwGZ8i/8sLw0H9F3X7K4rxVNGU8/D4Q=="],
+    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.2.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Nawu5nHjP/zPKTIryh2AavzTc/KEg4um/MxWdXW0A6P/RZOyIpa7+QSjeXwAwX/utJGaCoXRPWtF3m5U/bB3Ww=="],
 
     "@csstools/color-helpers": ["@csstools/[email protected]", "", {}, "sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA=="],
 

package.json

@@ -29,7 +29,7 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.3",
+    "@biomejs/biome": "2.2.0",
     "@react-router/dev": "^7.7.1",
     "@types/node": "^20",
     "@types/react": "^19.1.8",

packages/ui/package.json

@@ -20,7 +20,7 @@
     "test:ci": "vitest run --config ./vitest.config.ts"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.3",
+    "@biomejs/biome": "2.2.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.5",
     "typescript": "^5.8.3",

packages/ui/src/components/ui/button.test.tsx

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
 import { Button, buttonVariants } from './button';
 
 describe('Button component', () => {

packages/ui/src/components/ui/button.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@todo-starter/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',

packages/ui/src/components/ui/card.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { cn } from '@todo-starter/utils';
+import * as React from 'react';
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
   <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...props} />

packages/ui/src/components/ui/checkbox.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Check } from 'lucide-react';
 import { cn } from '@todo-starter/utils';
+import { Check } from 'lucide-react';
+import * as React from 'react';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

packages/ui/src/components/ui/input.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { cn } from '@todo-starter/utils';
+import * as React from 'react';
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 

packages/ui/src/index.ts

@@ -1,4 +1,4 @@
-export { Button, buttonVariants, type ButtonProps } from './components/ui/button';
-export { Input, type InputProps } from './components/ui/input';
+export { Button, type ButtonProps, buttonVariants } from './components/ui/button';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './components/ui/card';
 export { Checkbox } from './components/ui/checkbox';
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './components/ui/card';
+export { Input, type InputProps } from './components/ui/input';

packages/ui/src/test/setup.ts

@@ -1,3 +1,2 @@
 // Enable @testing-library/jest-dom matchers for Vitest and provide type augmentation for TS
 import '@testing-library/jest-dom/vitest';
-

packages/ui/vitest.config.ts

@@ -5,7 +5,6 @@ export default defineConfig({
     environment: 'jsdom',
     setupFiles: ['./src/test/setup.ts'],
     globals: true,
-    css: false,
-  },
+    css: false
+  }
 });
-

packages/utils/package.json

@@ -20,7 +20,7 @@
     "test:ci": "vitest run"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.3",
+    "@biomejs/biome": "2.2.0",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4"
   },
@@ -29,4 +29,3 @@
     "tailwind-merge": "^2.2.0"
   }
 }
-