chore: update linting commands and configuration

- Renamed `format-and-lint` scripts to `lint` for clarity and consistency.
- Adjusted Biome configuration to disable automatic import organization.
- Updated AGENTS.md and package.json to reflect these changes.
- Enhanced type definitions in various components for better type safety.

Author: jaruesink

AGENTS.md

@@ -12,7 +12,7 @@
 - `yarn build`: Build all packages/apps.
 - `yarn serve`: Serve built Storybook (`apps/docs`).
 - `yarn test`: Run workspace tests (Storybook test-runner in `apps/docs`).
-- `yarn format-and-lint` | `:fix`: Check/auto-fix with Biome.
+- `yarn lint` | `:fix`: Check/auto-fix with Biome.
 - Per workspace (examples):
   - `yarn workspace @lambdacurry/forms build`
   - `yarn workspace @lambdacurry/forms-docs dev`
@@ -34,7 +34,7 @@
 - Commits: short imperative subject, optional scope, concise body explaining rationale.
   - Example: `Fix: remove deprecated dropdown select`.
 - PRs: clear description, linked issues, screenshots or Storybook links, notes on testing.
-- Required checks: `yarn format-and-lint` passes; build succeeds; tests updated/added.
+- Required checks: `yarn lint` passes; build succeeds; tests updated/added.
 - Versioning: when changing published package(s), add a Changeset (`yarn changeset`) before merge.
 
 ## Security & Configuration

apps/docs/src/remix-hook-form/data-table/data-table-router-form.stories.tsx

@@ -302,8 +302,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  args: {} as any, // Args for DataTableRouterForm if needed, handled by Example component
+  args: {} satisfies Record<string, unknown>, // Args for DataTableRouterForm if needed, handled by Example component
   render: () => <DataTableRouterFormExample />,
   parameters: {
     docs: {

apps/docs/src/remix-hook-form/form-error-custom.stories.tsx

@@ -19,7 +19,14 @@ type FormData = z.infer<typeof formSchema>;
 // Custom error message component with icon
 const AlertErrorMessage = (props: React.ComponentProps<typeof FormMessage>) => (
   <div className="flex items-center p-4 bg-red-50 border-l-4 border-red-400 rounded-md">
-    <svg className="h-5 w-5 text-red-400 mr-3" viewBox="0 0 20 20" fill="currentColor">
+    <svg
+      className="h-5 w-5 text-red-400 mr-3"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      role="img"
+      aria-labelledby="alert-icon-title"
+    >
+      <title id="alert-icon-title">Error</title>
       <path
         fillRule="evenodd"
         d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"

apps/docs/src/remix-hook-form/form-error.test.tsx

@@ -5,6 +5,7 @@ import { render, screen } from '@testing-library/react';
 import { useFetcher } from 'react-router';
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
+import type { ElementType, PropsWithChildren } from 'react';
 
 // Mock useFetcher
 jest.mock('react-router', () => ({
@@ -30,14 +31,14 @@ const TestFormWithError = ({
 }: {
   initialErrors?: Record<string, { message: string }>;
   formErrorName?: string;
-  customComponents?: any;
+  customComponents?: { FormMessage?: React.ComponentType<PropsWithChildren<Record<string, unknown>>> };
   className?: string;
 }) => {
   const mockFetcher = {
     data: { errors: initialErrors },
     state: 'idle' as const,
     submit: jest.fn(),
-    Form: 'form' as any,
+    Form: 'form' as ElementType,
   };
 
   mockUseFetcher.mockReturnValue(mockFetcher);
@@ -142,7 +143,7 @@ describe('FormError Component', () => {
 
   describe('Component Customization', () => {
     it('uses custom FormMessage component when provided', () => {
-      const CustomFormMessage = ({ children, ...props }: any) => (
+      const CustomFormMessage = ({ children, ...props }: PropsWithChildren<Record<string, unknown>>) => (
         <div data-testid="custom-form-message" className="custom-message" {...props}>
           Custom: {children}
         </div>
@@ -216,7 +217,7 @@ describe('FormError Component', () => {
         },
         state: 'idle' as const,
         submit: jest.fn(),
-        Form: 'form' as any,
+        Form: 'form' as ElementType,
       };
 
       mockUseFetcher.mockReturnValue(mockFetcher);
@@ -314,7 +315,7 @@ describe('FormError Component', () => {
     it('does not re-render unnecessarily when unrelated form state changes', () => {
       const renderSpy = jest.fn();
 
-      const CustomFormMessage = ({ children, ...props }: any) => {
+      const CustomFormMessage = ({ children, ...props }: PropsWithChildren<Record<string, unknown>>) => {
         renderSpy();
         return <div {...props}>{children}</div>;
       };
@@ -344,7 +345,7 @@ describe('FormError Integration Tests', () => {
         data: null,
         state: 'idle' as const,
         submit: jest.fn(),
-        Form: 'form' as any,
+        Form: 'form' as ElementType,
       };
 
       mockUseFetcher.mockReturnValue(mockFetcher);

apps/docs/src/remix-hook-form/phone-input.test.tsx

@@ -6,6 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { useFetcher } from 'react-router';
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
+import type { ElementType, PropsWithChildren } from 'react';
 
 // Mock useFetcher
 jest.mock('react-router', () => ({
@@ -28,13 +29,13 @@ const TestPhoneInputForm = ({
   customComponents = {},
 }: {
   initialErrors?: Record<string, { message: string }>;
-  customComponents?: any;
+  customComponents?: { FormMessage?: React.ComponentType<PropsWithChildren<Record<string, unknown>>> };
 }) => {
   const mockFetcher = {
     data: { errors: initialErrors },
     state: 'idle' as const,
     submit: jest.fn(),
-    Form: 'form' as any,
+    Form: 'form' as ElementType,
   };
 
   mockUseFetcher.mockReturnValue(mockFetcher);
@@ -151,7 +152,7 @@ describe('PhoneInput Component', () => {
 
   describe('Component Customization', () => {
     it('uses custom FormMessage component when provided', () => {
-      const CustomFormMessage = ({ children, ...props }: any) => (
+      const CustomFormMessage = ({ children, ...props }: PropsWithChildren<Record<string, unknown>>) => (
         <div data-testid="custom-form-message" className="custom-message" {...props}>
           Custom: {children}
         </div>

biome.json

@@ -9,7 +9,7 @@
     "ignoreUnknown": false,
     "includes": ["**", "!**/.turbo", "!**/yarn.lock", "!**/dist", "!**/node_modules", "!**/storybook-static"]
   },
-  "assist": { "actions": { "source": { "organizeImports": "on" } } },
+  "assist": { "actions": { "source": { "organizeImports": "off" } } },
   "formatter": {
     "enabled": true,
     "formatWithErrors": false,
@@ -45,12 +45,15 @@
       },
       "suspicious": {
         "noConsole": "off",
-        "noReactSpecificProps": "off"
+        "noReactSpecificProps": "off",
+        "noUnknownAtRules": "off"
       },
       "correctness": {
         "noNodejsModules": "off",
         "noUndeclaredDependencies": "off",
-        "useImportExtensions": "off"
+        "useImportExtensions": "off",
+        "noUnusedVariables": "off",
+        "useUniqueElementIds": "off"
       }
     }
   }

package.json

@@ -13,8 +13,8 @@
     "serve": "turbo run serve",
     "test": "turbo run test",
     "clean": "find . -name '.turbo' -type d -prune -exec rm -rf {} + && find . -name 'node_modules' -type d -prune -exec rm -rf {} + && find . -name 'yarn.lock' -type f -delete",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write",
+    "lint": "biome check .",
+    "lint:fix": "biome check . --write",
     "prerelease": "turbo run build",
     "release": "changeset publish",
     "build-storybook": "turbo run build-storybook"

packages/components/package.json

@@ -26,7 +26,9 @@
       "import": "./dist/ui/*.js"
     }
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "prepublishOnly": "yarn run build",
     "build": "vite build",

packages/components/src/remix-hook-form/data-table-router-form.tsx

@@ -36,11 +36,11 @@ export interface DataTableRouterFormProps<TData, TValue> {
   pageCount?: number;
   defaultStateValues?: Partial<DataTableRouterState>;
   // New prop for Bazza UI filter configurations
-  // This should be typed according to bazza/ui's ColumnConfig type (e.g., from createColumnConfigHelper(...).build())
-  filterColumnConfigs: any[]; // Placeholder type for Bazza UI ColumnConfig[]
+  // Shape is intentionally loose to allow passing configs from various sources without tight coupling
+  filterColumnConfigs: unknown[];
   // Props for server-fetched options/faceted data for bazza/ui, if needed for server strategy
-  dtfOptions?: Record<string, any[]>;
-  dtfFacetedData?: Record<string, any>;
+  dtfOptions?: unknown;
+  dtfFacetedData?: unknown;
 }
 
 export function DataTableRouterForm<TData, TValue>({
@@ -69,9 +69,10 @@ export function DataTableRouterForm<TData, TValue>({
   } = useDataTableFilters({
     strategy: 'server',
     data: data,
-    columnsConfig: filterColumnConfigs,
-    options: dtfOptions,
-    faceted: dtfFacetedData,
+    // Cast to the exact parameter type to preserve strong typing without using `any`
+    columnsConfig: filterColumnConfigs as Parameters<typeof useDataTableFilters>[0]['columnsConfig'],
+    options: dtfOptions as Parameters<typeof useDataTableFilters>[0]['options'],
+    faceted: dtfFacetedData as Parameters<typeof useDataTableFilters>[0]['faceted'],
     filters: urlState.filters, // Use URL filters as the source of truth
     onFiltersChange: (newFilters) => {
       // Update URL state when filters change

packages/components/src/remix-hook-form/data-table-router-toolbar.tsx

@@ -5,6 +5,7 @@ import { type ChangeEvent, useCallback } from 'react';
 import { Button } from '../ui/button';
 import { DataTableViewOptions } from '../ui/data-table/data-table-view-options';
 import { DataTableFilter } from '../ui/data-table-filter';
+import type { Column, DataTableFilterActions, FilterStrategy } from '../ui/data-table-filter/core/types';
 import type { BazzaFiltersState } from './data-table-router-parsers';
 import { TextField } from './text-field';
 
@@ -15,10 +16,10 @@ export interface DataTableRouterToolbarProps<TData> {
   onResetFiltersAndSearch: () => void;
   hasActiveFiltersOrSearch: boolean;
 
-  dtfColumns: any[];
+  dtfColumns: Column<TData>[];
   dtfFilters: BazzaFiltersState;
-  dtfActions: any;
-  dtfStrategy: 'client' | 'server';
+  dtfActions: DataTableFilterActions;
+  dtfStrategy: FilterStrategy;
 }
 
 export function DataTableRouterToolbar<TData>({