Migre lib-auth vers React 19 et Chakra UI 3

react/AuthGuard.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { Center, Spinner } from "@chakra-ui/react";
-import { Navigate } from "react-router-dom";
+import { Center, Spinner } from "./chakra-compat";
+import { Navigate } from "react-router";
 
 type AuthGuardProps = {
   children: React.ReactNode;

react/LoginForm.tsx

@@ -1,5 +1,5 @@
 import type { FormEvent, ReactNode } from "react";
-import { Alert, AlertDescription, AlertIcon, Button, Center, FormControl, FormLabel, HStack, Icon, Input, Stack } from "@chakra-ui/react";
+import { Alert, AlertDescription, AlertIcon, Button, Center, FormControl, FormLabel, HStack, Icon, Input, Stack } from "./chakra-compat";
 import { FcGoogle } from "react-icons/fc";
 import type { AuthProviderAvailability, AuthProviderKey, AuthSubmitValues, LoginMode } from "./types";
 

react/PasswordResetForms.tsx

@@ -10,7 +10,7 @@ import {
   Spinner,
   Stack,
   Text
-} from "@chakra-ui/react";
+} from "./chakra-compat";
 import type { PasswordResetMode, PasswordResetTokenState } from "./types";
 
 type PasswordResetRequestTexts = {

react/chakra-compat.tsx

@@ -0,0 +1,96 @@
+import {
+  Alert as ChakraAlert,
+  Box as ChakraBox,
+  Button as ChakraButton,
+  Center as ChakraCenter,
+  HStack as ChakraHStack,
+  Icon as ChakraIcon,
+  Input as ChakraInput,
+  Spinner as ChakraSpinner,
+  Stack as ChakraStack,
+  Text as ChakraText
+} from "@chakra-ui/react";
+import type { ReactNode } from "react";
+
+type AnyProps = Record<string, any>;
+
+function normalizeSpacingProps(props: AnyProps) {
+  const next = { ...props };
+  if (next.spacing !== undefined && next.gap === undefined) {
+    next.gap = next.spacing;
+  }
+  delete next.spacing;
+  return next;
+}
+
+function normalizeInteractiveProps(props: AnyProps) {
+  const next = normalizeSpacingProps(props);
+  if (next.isDisabled !== undefined && next.disabled === undefined) {
+    next.disabled = next.isDisabled;
+  }
+  if (next.isLoading !== undefined && next.loading === undefined) {
+    next.loading = next.isLoading;
+  }
+  delete next.isDisabled;
+  delete next.isLoading;
+  return next;
+}
+
+export const Center = ChakraCenter as any;
+export const Icon = ChakraIcon as any;
+export const Input = ChakraInput as any;
+export const Spinner = ChakraSpinner as any;
+
+export function Stack(props: AnyProps) {
+  return <ChakraStack {...normalizeSpacingProps(props)} />;
+}
+
+export function HStack(props: AnyProps) {
+  return <ChakraHStack {...normalizeSpacingProps(props)} />;
+}
+
+export function Text(props: AnyProps) {
+  const next = { ...props };
+  if (next.noOfLines !== undefined && next.lineClamp === undefined) {
+    next.lineClamp = next.noOfLines;
+  }
+  delete next.noOfLines;
+  return <ChakraText {...next} />;
+}
+
+export function Button(props: AnyProps) {
+  const { leftIcon, rightIcon, children, ...rest } = normalizeInteractiveProps(props);
+  return (
+    <ChakraButton {...rest}>
+      <ChakraHStack gap={2}>
+        {leftIcon ?? null}
+        <span>{children}</span>
+        {rightIcon ?? null}
+      </ChakraHStack>
+    </ChakraButton>
+  );
+}
+
+export function Alert({ children, status = "info", ...props }: AnyProps) {
+  return (
+    <ChakraAlert.Root status={status} {...props}>
+      {children}
+    </ChakraAlert.Root>
+  );
+}
+
+export function AlertIcon() {
+  return <ChakraAlert.Indicator />;
+}
+
+export function AlertDescription({ children, ...props }: { children: ReactNode } & AnyProps) {
+  return <ChakraAlert.Description {...props}>{children}</ChakraAlert.Description>;
+}
+
+export function FormControl({ children, ...props }: AnyProps) {
+  return <ChakraStack gap={2} {...normalizeSpacingProps(props)}>{children}</ChakraStack>;
+}
+
+export function FormLabel(props: AnyProps) {
+  return <ChakraBox as="label" fontWeight="medium" {...props} />;
+}