add React 19 support (#1048)

Author: gabrielwallin

.changeset/poor-avocados-march.md

@@ -0,0 +1,6 @@
+---
+'@obosbbl/grunnmuren-icons-react': minor
+'@obosbbl/grunnmuren-react': minor
+---
+
+add React 19 as allowed peerDep

form-demo/app/uncontrolled/page.tsx

@@ -1,15 +1,30 @@
 'use client';
-import { Form, TextField } from '@obosbbl/grunnmuren-react';
-import { useFormState } from 'react-dom';
+import { Button, Form, TextField } from '@obosbbl/grunnmuren-react';
+import { type FormEvent, startTransition, useActionState } from 'react';
 
 import { submitForm } from './submit-action';
-import SubmitButton from './submit-button';
 
 export default function () {
-  const [{ errors }, formAction] = useFormState(submitForm, { errors: {} });
+  const [{ errors }, formAction, isPending] = useActionState(submitForm, {
+    errors: {},
+  });
+
+  // cannot use action directly on the form submit, because it resets the form
+  // which means our validation messages aren't displayed...
+  // another workaround for this is here https://www.robinwieruch.de/react-server-action-reset-form/
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    startTransition(() => {
+      formAction(new FormData(event.currentTarget));
+    });
+  };
 
   return (
-    <Form action={formAction} validationErrors={errors} className="space-y-4">
+    <Form
+      onSubmit={handleSubmit}
+      validationErrors={errors}
+      className="space-y-4"
+    >
       <p>
         This is an uncontrolled form that uses zod to validate the form data on
         the server side in a React server action.
@@ -26,7 +41,10 @@ export default function () {
           </>
         }
       />
-      <SubmitButton>Save</SubmitButton>
+
+      <Button isPending={isPending} type="submit">
+        Save
+      </Button>
     </Form>
   );
 }

form-demo/app/uncontrolled/submit-action.tsx

@@ -6,7 +6,14 @@ const schema = z.object({
   email: z.string().email().endsWith('.no'),
 });
 
-export async function submitForm(prevState: unknown, formData: FormData) {
+type SubmitFormResult = {
+  errors: Record<string, string[]>;
+};
+
+export async function submitForm(
+  prevState: SubmitFormResult,
+  formData: FormData,
+): Promise<SubmitFormResult> {
   const result = schema.safeParse(Object.fromEntries(formData));
 
   // Simulate a delay

form-demo/app/uncontrolled/submit-button.tsx

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@obosbbl/grunnmuren-react": "workspace:*",
-    "next": "14.2.16",
+    "next": "15.1.0",
     "zod": "3.23.8"
   },
   "devDependencies": {

form-demo/package.json

@@ -16,7 +16,8 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "target": "ES2017"
   },
   "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

form-demo/tsconfig.json

@@ -33,8 +33,8 @@
     "@storybook/test": "8.4.7",
     "@storybook/test-runner": "0.20.1",
     "@types/bun": "1.1.13",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2",
     "autoprefixer": "10.4.20",
     "bunchee": "6.0.3",
     "fontaine": "0.5.0",
@@ -44,8 +44,8 @@
     "prettier": "3.2.5",
     "prettier-plugin-packagejson": "2.5.0",
     "prettier-plugin-tailwindcss": "0.5.14",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "storybook": "8.4.7",
     "tailwindcss": "3.4.15",
     "typescript": "5.6.3"

package.json

@@ -28,6 +28,6 @@
     "fs-extra": "11.2.0"
   },
   "peerDependencies": {
-    "react": "^18"
+    "react": "^18 || ^19"
   }
 }

packages/icons-react/package.json

@@ -29,6 +29,6 @@
     "react-aria-components": "^1.3.1"
   },
   "peerDependencies": {
-    "react": "^18"
+    "react": "^18 || ^19"
   }
 }