Migrate to Vite 8

.eslintignore

@@ -4,4 +4,4 @@ lib
 esm
 prism.js
 packages/create-react-admin/templates/**
-.github
+.github

.storybook/main.ts

@@ -1,5 +1,8 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(ts|tsx)"],

package.json

@@ -49,7 +49,7 @@
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.9",
     "@streamparser/json-whatwg": "^0.0.22",
-    "@tailwindcss/vite": "^4.1.18",
+    "@tailwindcss/vite": "^4.2.2",
     "@tanstack/query-async-storage-persister": "^5.90.22",
     "@tanstack/react-query": "^5.101.0",
     "@tanstack/react-query-persist-client": "^5.90.22",
@@ -101,7 +101,7 @@
     "@inquirer/prompts": "^8.2.0",
     "@playwright/mcp": "^0.0.76",
     "@playwright/test": "^1.60.0",
-    "@storybook/react-vite": "^9.1.19",
+    "@storybook/react-vite": "^10.3.3",
     "@types/dompurify": "^3.0.5",
     "@types/faker": "^5.5.9",
     "@types/jsonexport": "^3.0.5",
@@ -111,13 +111,13 @@
     "@types/papaparse": "^5.3.16",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.6.0",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/browser-preview": "^4.0.18",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "^4.1.1",
+    "@vitest/browser-preview": "^4.1.1",
     "eslint": "^9.22.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-storybook": "^9.0.13",
+    "eslint-plugin-storybook": "^10.3.3",
     "gh-pages": "^6.3.0",
     "glob": "^11.1.0",
     "globals": "^16.3.0",
@@ -127,14 +127,23 @@
     "playwright": "^1.60.0",
     "prettier": "^3.6.2",
     "shadcn": "^3.5.0",
-    "storybook": "^9.1.19",
+    "storybook": "^10.3.3",
     "tldts": "^7.0.26",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
-    "vite": "^7.3.2",
+    "vite": "^8.0.2",
     "vite-plugin-pwa": "^1.2.0",
-    "vite-plugin-simple-html": "^1.0.1",
-    "vitest": "^4.1.0",
-    "vitest-browser-react": "^2.0.5"
+    "vite-plugin-simple-html": "^1.1.0",
+    "vitest": "^4.1.1",
+    "vitest-browser-react": "^2.0.5",
+    "workbox-build": "^7.4.0",
+    "workbox-window": "^7.4.0"
+  },
+  "overrides": {
+    "@joshwooding/vite-plugin-react-docgen-typescript": "^0.7.0",
+    "react-router-dom": "^7.17.0",
+    "vite-plugin-pwa": {
+      "vite": "$vite"
+    }
   }
 }

registry.json

@@ -481,6 +481,10 @@
           "path": "src/components/atomic-crm/misc/ActiveFilterButton.tsx",
           "type": "registry:component"
         },
+        {
+          "path": "src/components/atomic-crm/login/authConfig.ts",
+          "type": "registry:component"
+        },
         {
           "path": "src/components/atomic-crm/login/StartPage.tsx",
           "type": "registry:component"

src/components/admin/array-input.tsx

@@ -103,8 +103,10 @@ export const ArrayInput = (props: ArrayInputProps) => {
   );
 };
 
-export interface ArrayInputProps
-  extends Omit<InputProps, "disabled" | "readOnly"> {
+export interface ArrayInputProps extends Omit<
+  InputProps,
+  "disabled" | "readOnly"
+> {
   className?: string;
   children: React.ReactNode;
   isFetching?: boolean;

src/components/admin/badge-field.tsx

@@ -59,7 +59,6 @@ export const BadgeField = <RecordType extends RaRecord = RaRecord>({
 };
 
 export interface BadgeFieldProps<RecordType extends RaRecord = RaRecord>
-  extends FieldProps<RecordType>,
-    BadgeProps {
+  extends FieldProps<RecordType>, BadgeProps {
   variant?: "default" | "outline" | "secondary" | "destructive";
 }

src/components/admin/data-table.tsx

@@ -293,8 +293,9 @@ const DataTableEmpty = () => {
   );
 };
 
-export interface DataTableProps<RecordType extends RaRecord = RaRecord>
-  extends Partial<DataTableBaseProps<RecordType>> {
+export interface DataTableProps<
+  RecordType extends RaRecord = RaRecord,
+> extends Partial<DataTableBaseProps<RecordType>> {
   children: ReactNode;
   className?: string;
   rowClassName?: (record: RecordType) => string | undefined;

src/components/admin/date-field.tsx

@@ -108,8 +108,8 @@ export const DateField = genericMemo(DateFieldImpl);
 export interface DateFieldProps<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   RecordType extends Record<string, any> = Record<string, any>,
-> extends FieldProps<RecordType>,
-    HTMLAttributes<HTMLSpanElement> {
+>
+  extends FieldProps<RecordType>, HTMLAttributes<HTMLSpanElement> {
   locales?: Intl.LocalesArgument;
   options?: Intl.DateTimeFormatOptions;
   showTime?: boolean;

src/components/admin/email-field.tsx

@@ -65,8 +65,8 @@ export const EmailField = genericMemo(EmailFieldImpl);
 export interface EmailFieldProps<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   RecordType extends Record<string, any> = Record<string, any>,
-> extends FieldProps<RecordType>,
-    AnchorHTMLAttributes<HTMLAnchorElement> {}
+>
+  extends FieldProps<RecordType>, AnchorHTMLAttributes<HTMLAnchorElement> {}
 
 // useful to prevent click bubbling in a DataTable with rowClick
 const stopPropagation = (e: React.MouseEvent<HTMLAnchorElement>) =>

src/components/admin/error.tsx

@@ -106,8 +106,7 @@ export const Error = (props: InternalErrorProps & {}) => {
 };
 
 interface InternalErrorProps
-  extends Omit<HtmlHTMLAttributes<HTMLDivElement>, "title">,
-    FallbackProps {
+  extends Omit<HtmlHTMLAttributes<HTMLDivElement>, "title">, FallbackProps {
   className?: string;
   errorInfo?: ErrorInfo;
 }

src/components/admin/file-field.tsx

@@ -111,8 +111,8 @@ export const FileField = <
 export interface FileFieldProps<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   RecordType extends Record<string, any> = Record<string, any>,
-> extends FieldProps<RecordType>,
-    HTMLAttributes<HTMLElement> {
+>
+  extends FieldProps<RecordType>, HTMLAttributes<HTMLElement> {
   /**
    * The source of the link to the file, for an array of files.
    */

src/components/admin/icon-button-with-tooltip.tsx

@@ -78,8 +78,7 @@ export const IconButtonWithTooltip = ({
   );
 };
 
-export interface IconButtonWithTooltipProps
-  extends React.ComponentProps<"button"> {
+export interface IconButtonWithTooltipProps extends React.ComponentProps<"button"> {
   label: React.ReactNode;
   children: React.ReactNode;
 }

src/components/admin/image-field.tsx

@@ -93,8 +93,8 @@ ImageField.displayName = "ImageField";
 
 export interface ImageFieldProps<
   RecordType extends Record<string, any> = Record<string, any>,
-> extends FieldProps<RecordType>,
-    HTMLAttributes<HTMLSpanElement> {
+>
+  extends FieldProps<RecordType>, HTMLAttributes<HTMLSpanElement> {
   defaultValue?: any;
   src?: string;
   title?: HintedString<ExtractRecordPaths<RecordType>>;

src/components/admin/list.tsx

@@ -90,8 +90,7 @@ export const List = <RecordType extends RaRecord = RaRecord>(
 };
 
 export interface ListProps<RecordType extends RaRecord = RaRecord>
-  extends ListBaseProps<RecordType>,
-    ListViewProps<RecordType> {}
+  extends ListBaseProps<RecordType>, ListViewProps<RecordType> {}
 
 /**
  * The view component for List pages with layout and UI.

src/components/admin/number-field.tsx

@@ -68,8 +68,8 @@ export const NumberField = <
 
 export interface NumberFieldProps<
   RecordType extends Record<string, any> = Record<string, any>,
-> extends FieldProps<RecordType>,
-    HTMLAttributes<HTMLSpanElement> {
+>
+  extends FieldProps<RecordType>, HTMLAttributes<HTMLSpanElement> {
   locales?: string | string[];
   options?: object;
   transform?: (value: any) => number;

src/components/admin/number-input.tsx

@@ -107,7 +107,8 @@ export const NumberInput = (props: NumberInputProps) => {
 };
 
 export interface NumberInputProps
-  extends InputProps,
+  extends
+    InputProps,
     Omit<
       React.ComponentProps<"input">,
       "defaultValue" | "onBlur" | "onChange" | "type"

src/components/admin/radio-button-group-input.tsx

@@ -174,7 +174,8 @@ export const RadioButtonGroupInput = (inProps: RadioButtonGroupInputProps) => {
 };
 
 export interface RadioButtonGroupInputProps
-  extends Partial<InputProps>,
+  extends
+    Partial<InputProps>,
     ChoicesProps,
     Omit<
       React.ComponentProps<typeof RadioGroup>,

src/components/admin/reference-array-input.tsx

@@ -62,7 +62,6 @@ const defaultChildren = <AutocompleteArrayInput />;
 const defaultFilter = {};
 
 export interface ReferenceArrayInputProps
-  extends InputProps,
-    UseReferenceArrayInputParams {
+  extends InputProps, UseReferenceArrayInputParams {
   children?: ReactElement;
 }

src/components/admin/reference-many-field.tsx

@@ -61,10 +61,9 @@ export const ReferenceManyField = <
 export interface ReferenceManyFieldProps<
   RecordType extends RaRecord = RaRecord,
   ReferenceRecordType extends RaRecord = RaRecord,
-> extends UseReferenceManyFieldControllerParams<
-      RecordType,
-      ReferenceRecordType
-    >,
+>
+  extends
+    UseReferenceManyFieldControllerParams<RecordType, ReferenceRecordType>,
     ReferenceManyFieldViewProps<ReferenceRecordType> {}
 
 const ReferenceManyFieldView = <

src/components/admin/select-field.tsx

@@ -102,9 +102,8 @@ export const SelectField = genericMemo(SelectFieldImpl);
 export interface SelectFieldProps<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   RecordType extends Record<string, any> = Record<string, any>,
-> extends Omit<
-      ChoicesProps,
-      "disableValue" | "createValue" | "createHintValue"
-    >,
+>
+  extends
+    Omit<ChoicesProps, "disableValue" | "createValue" | "createHintValue">,
     FieldProps<RecordType>,
     HTMLAttributes<HTMLSpanElement> {}

src/components/admin/show.tsx

@@ -21,8 +21,7 @@ import { cn } from "@/lib/utils";
 import { EditButton } from "@/components/admin/edit-button";
 
 export interface ShowProps
-  extends ShowViewProps,
-    Omit<ShowBaseProps, "children"> {}
+  extends ShowViewProps, Omit<ShowBaseProps, "children"> {}
 
 /**
  * A complete show page with breadcrumb, title, and default actions.

src/components/admin/simple-form-iterator.tsx

@@ -248,8 +248,7 @@ export const SimpleFormIteratorItem = React.forwardRef(
   },
 );
 
-export interface SimpleFormIteratorItemProps
-  extends SimpleFormIteratorItemBaseProps {
+export interface SimpleFormIteratorItemProps extends SimpleFormIteratorItemBaseProps {
   disabled?: boolean;
   disableRemove?: boolean | SimpleFormIteratorDisableRemoveFunction;
   disableReordering?: boolean;

src/components/admin/spinner.tsx

@@ -29,7 +29,8 @@ const loaderVariants = cva("animate-spin text-primary", {
 });
 
 interface SpinnerContentProps
-  extends VariantProps<typeof spinnerVariants>,
+  extends
+    VariantProps<typeof spinnerVariants>,
     VariantProps<typeof loaderVariants> {
   className?: string;
 }

src/components/admin/text-field.tsx

@@ -57,5 +57,5 @@ export const TextField = <
 
 export interface TextFieldProps<
   RecordType extends Record<string, any> = Record<string, any>,
-> extends FieldProps<RecordType>,
-    HTMLAttributes<HTMLSpanElement> {}
+>
+  extends FieldProps<RecordType>, HTMLAttributes<HTMLSpanElement> {}

src/components/admin/url-field.tsx

@@ -74,8 +74,8 @@ export const UrlField = genericMemo(UrlFieldImpl);
 export interface UrlFieldProps<
   //eslint-disable-next-line @typescript-eslint/no-explicit-any
   RecordType extends Record<string, any> = Record<string, any>,
-> extends FieldProps<RecordType>,
-    AnchorHTMLAttributes<HTMLAnchorElement> {}
+>
+  extends FieldProps<RecordType>, AnchorHTMLAttributes<HTMLAnchorElement> {}
 
 // useful to prevent click bubbling in a DataTable with rowClick
 const stopPropagation = (e: React.MouseEvent<HTMLAnchorElement>) =>

src/components/atomic-crm/companies/CompanyShow.tsx

@@ -19,7 +19,7 @@ import {
   useLocation,
   useMatch,
   useNavigate,
-} from "react-router-dom";
+} from "react-router";
 
 import { useIsMobile } from "@/hooks/use-mobile";
 import { ActivityLog } from "../activity/ActivityLog";

src/components/atomic-crm/login/StartPage.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useDataProvider } from "ra-core";
-import { Navigate } from "react-router-dom";
+import { Navigate } from "react-router";
 
 import type { CrmDataProvider } from "../providers/types";
 import { LoginSkeleton } from "./LoginSkeleton";

src/components/atomic-crm/simple-list/SimpleList.tsx

@@ -125,8 +125,9 @@ export const SimpleList = <RecordType extends RaRecord = any>(
   );
 };
 
-export interface SimpleListProps<RecordType extends RaRecord = any>
-  extends SimpleListBaseProps<RecordType> {
+export interface SimpleListProps<
+  RecordType extends RaRecord = any,
+> extends SimpleListBaseProps<RecordType> {
   className?: string;
   empty?: ReactElement;
   // can be injected when using the component without context

src/components/atomic-crm/simple-list/SimpleListItem.tsx

@@ -122,8 +122,9 @@ export interface SimpleListBaseProps<RecordType extends RaRecord = any> {
   tertiaryText?: FunctionToElement<RecordType> | ReactElement | string;
 }
 
-export interface SimpleListItemProps<RecordType extends RaRecord = any>
-  extends SimpleListBaseProps<RecordType> {
+export interface SimpleListItemProps<
+  RecordType extends RaRecord = any,
+> extends SimpleListBaseProps<RecordType> {
   rowIndex: number;
   className?: string;
   style?: CSSProperties;

src/components/supabase/oauth-consent-page.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router";
 import { useAuthProvider, useTranslate } from "ra-core";
 import { Layout } from "@/components/supabase/layout";
 import { Button } from "@/components/ui/button";

src/components/ui/spinner.tsx

@@ -30,7 +30,8 @@ const loaderVariants = cva("animate-spin text-primary", {
 })
 
 interface SpinnerContentProps
-  extends VariantProps<typeof spinnerVariants>,
+  extends
+    VariantProps<typeof spinnerVariants>,
     VariantProps<typeof loaderVariants> {
   className?: string
   children?: React.ReactNode

tsconfig.node.json

@@ -23,5 +23,5 @@
 
     "types": ["vitest/globals", "faker"]
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "vite.demo.config.ts"]
 }