chore: react v19 (#4558)

* chore: react v19 * fix: some type error Signed-off-by: Alexandre Philibeaux <aphilibeaux@scaleway.com> * fix: type error * fix: type error Signed-off-by: Alexandre Philibeaux <aphilibeaux@scaleway.com> --------- Signed-off-by: Alexandre Philibeaux <aphilibeaux@scaleway.com> Co-authored-by: Alexandre Philibeaux <aphilibeaux@scaleway.com>
scaleway · Dec 19, 2024 · 293aa2c · 293aa2c
1 parent dcafecf
commit 293aa2c
Show file tree

Hide file tree

Showing 82 changed files with 763 additions and 909 deletions.
diff --git a/.changeset/chatty-donuts-study.md b/.changeset/chatty-donuts-study.md
@@ -0,0 +1,8 @@
+---
+"@ultraviolet/icons": minor
+"@ultraviolet/form": minor
+"@ultraviolet/plus": minor
+"@ultraviolet/ui": minor
+---
+
+Upgrade from react 18 to react 19
diff --git a/examples/next-advanced/next.config.js b/examples/next-advanced/next.config.js
@@ -9,22 +9,13 @@ const nextConfig = () => {
     },
     poweredByHeader: false,
     reactStrictMode: true,
-    swcMinify: true,
     compiler: {
       emotion: true,
     },
     eslint: {
       ignoreDuringBuilds: true,
     },
-    experimental: {
-      esmExternals: 'loose', // See https://github.com/Hacker0x01/react-datepicker/issues/3834
-    },
-    transpilePackages: [
-      '@ultraviolet/ui',
-      '@ultraviolet/form',
-      '@ultraviolet/icons',
-      'react-syntax-highlighter',
-    ],
+    transpilePackages: ['react-syntax-highlighter'],
   }
 
   return config

diff --git a/examples/next-advanced/package.json b/examples/next-advanced/package.json
@@ -19,8 +19,8 @@
     "@emotion/styled": "11.14.0",
     "@ultraviolet/ui": "workspace:*",
     "next": "15.1.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-schemaorg": "2.0.0",
     "react-syntax-highlighter": "15.6.1",
     "react-use-clipboard": "1.0.9",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@babel/core": "7.26.0",
     "@types/node": "22.10.2",
-    "@types/react": "18.3.17",
+    "@types/react": "19.0.0",
     "@types/react-syntax-highlighter": "15.5.13",
     "next-transpile-modules": "10.0.1"
   }

diff --git a/examples/next-login/next.config.js b/examples/next-login/next.config.js
@@ -9,21 +9,12 @@ const nextConfig = () => {
     },
     poweredByHeader: false,
     reactStrictMode: true,
-    swcMinify: true,
     compiler: {
       emotion: true,
     },
     eslint: {
       ignoreDuringBuilds: true,
     },
-    experimental: {
-      esmExternals: 'loose', // See https://github.com/Hacker0x01/react-datepicker/issues/3834
-    },
-    transpilePackages: [
-      '@ultraviolet/ui',
-      '@ultraviolet/form',
-      '@ultraviolet/icons',
-    ],
   }
   return config
 }

diff --git a/examples/next-login/package.json b/examples/next-login/package.json
@@ -17,12 +17,13 @@
   "dependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
+    "@ultraviolet/fonts": "workspace:*",
     "@ultraviolet/form": "workspace:*",
     "@ultraviolet/icons": "workspace:*",
     "@ultraviolet/ui": "workspace:*",
     "next": "15.1.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-schemaorg": "2.0.0",
     "react-syntax-highlighter": "15.6.1",
     "react-use-clipboard": "1.0.9",
@@ -31,7 +32,7 @@
   "devDependencies": {
     "@babel/core": "7.26.0",
     "@types/node": "22.10.2",
-    "@types/react": "18.3.17",
+    "@types/react": "19.0.0",
     "@types/react-syntax-highlighter": "15.5.13",
     "next-transpile-modules": "10.0.1"
   }

diff --git a/examples/next-simple/next.config.js b/examples/next-simple/next.config.js
@@ -9,21 +9,12 @@ const nextConfig = () => {
     },
     poweredByHeader: false,
     reactStrictMode: true,
-    swcMinify: true,
     compiler: {
       emotion: true,
     },
     eslint: {
       ignoreDuringBuilds: true,
     },
-    experimental: {
-      esmExternals: 'loose', // See https://github.com/Hacker0x01/react-datepicker/issues/3834
-    },
-    transpilePackages: [
-      '@ultraviolet/ui',
-      '@ultraviolet/form',
-      '@ultraviolet/icons',
-    ],
   }
 
   return config

diff --git a/examples/next-simple/package.json b/examples/next-simple/package.json
@@ -20,8 +20,8 @@
     "@emotion/styled": "11.14.0",
     "@ultraviolet/ui": "workspace:*",
     "next": "15.1.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-schemaorg": "2.0.0",
     "react-syntax-highlighter": "15.6.1",
     "react-use-clipboard": "1.0.9",
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@babel/core": "7.26.0",
     "@types/node": "22.10.2",
-    "@types/react": "18.3.17",
+    "@types/react": "19.0.0",
     "@types/react-syntax-highlighter": "15.5.13",
     "next-transpile-modules": "10.0.1"
   }

diff --git a/package.json b/package.json
@@ -83,8 +83,8 @@
     },
     "peerDependencyRules": {
       "allowedVersions": {
-        "react": "18",
-        "react-dom": "18"
+        "react": "18 || 19",
+        "react-dom": "18 || 19"
       }
     }
   },
@@ -136,9 +136,9 @@
     "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
     "@types/node": "22.10.2",
-    "@types/react": "18.3.17",
+    "@types/react": "19.0.0",
     "@types/react-datepicker": "6.2.0",
-    "@types/react-dom": "18.3.5",
+    "@types/react-dom": "19.0.0",
     "@types/zxcvbn": "4.4.5",
     "@ultraviolet/fonts": "workspace:*",
     "@ultraviolet/themes": "workspace:*",
@@ -170,8 +170,8 @@
     "oxlint": "0.15.0",
     "postcss": "8.4.49",
     "publint": "0.2.12",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "read-pkg": "9.0.1",
     "regenerator-runtime": "0.14.1",
     "remark-gfm": "4.0.0",

diff --git a/packages/form/package.json b/packages/form/package.json
@@ -66,19 +66,19 @@
   "peerDependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
-    "react": "18.x",
-    "react-dom": "18.x"
+    "react": "18.x || 19.x",
+    "react-dom": "18.x || 19.x"
   },
   "devDependencies": {
     "@babel/core": "7.26.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
     "@types/final-form-focus": "1.1.7",
-    "@types/react": "18.3.17",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@utils/test": "workspace:*",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "dependencies": {
     "@babel/runtime": "7.26.0",

diff --git a/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.test.tsx.snap
@@ -295,7 +295,6 @@ exports[`CheckboxField > should render correctly 1`] = `
           id=":r0:"
           name="test"
           type="checkbox"
-          value=""
         />
         <svg
           class="emotion-4 emotion-5"
@@ -633,7 +632,6 @@ exports[`CheckboxField > should render correctly checked without value 1`] = `
           id=":r6:"
           name="checked"
           type="checkbox"
-          value=""
         />
         <svg
           class="emotion-4 emotion-5"
@@ -971,7 +969,6 @@ exports[`CheckboxField > should render correctly disabled 1`] = `
           id=":r4:"
           name="test"
           type="checkbox"
-          value=""
         />
         <svg
           class="emotion-4 emotion-5"
@@ -1308,7 +1305,6 @@ exports[`CheckboxField > should render correctly not checked without value 1`] =
           id=":r8:"
           name="checked"
           type="checkbox"
-          value=""
         />
         <svg
           class="emotion-4 emotion-5"
@@ -1646,7 +1642,6 @@ exports[`CheckboxField > should render correctly with aria-label 1`] = `
           id=":r2:"
           name="test"
           type="checkbox"
-          value=""
         />
         <svg
           class="emotion-4 emotion-5"
@@ -2011,7 +2006,6 @@ exports[`CheckboxField > should render correctly with errors 1`] = `
           id=":rd:"
           name="test"
           type="checkbox"
-          value=""
         />
         <svg
           class="emotion-4 emotion-5"
@@ -2377,7 +2371,6 @@ exports[`CheckboxField > should trigger events correctly 1`] = `
           id=":ra:"
           name="test"
           type="checkbox"
-          value=""
         />
         <svg
           class="emotion-4 emotion-5"

diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/Direction.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/Direction.stories.tsx
@@ -1,9 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { CheckboxGroupField } from '..'
 import { useFormContext } from '../../..'
 
-export const DirectionStory: StoryFn<typeof CheckboxGroupField> = args => {
+const DirectionTemplate = (args: ComponentProps<typeof CheckboxGroupField>) => {
   const { watch } = useFormContext()
 
   return (
@@ -27,7 +28,7 @@ export const DirectionStory: StoryFn<typeof CheckboxGroupField> = args => {
 }
 
 export const Direction: StoryFn<typeof CheckboxGroupField> = args => (
-  <DirectionStory {...args} />
+  <DirectionTemplate {...args} />
 )
 
 Direction.parameters = {

diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/NotRequired.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/NotRequired.stories.tsx
@@ -1,9 +1,12 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { CheckboxGroupField } from '..'
 import { Submit } from '../..'
 
-export const NotRequiredStory: StoryFn<typeof CheckboxGroupField> = args => (
+export const NotRequiredTemplate = (
+  args: ComponentProps<typeof CheckboxGroupField>,
+) => (
   <Stack gap={1}>
     <CheckboxGroupField {...args}>
       <CheckboxGroupField.Checkbox
@@ -24,7 +27,7 @@ export const NotRequiredStory: StoryFn<typeof CheckboxGroupField> = args => (
 )
 
 export const NotRequired: StoryFn<typeof CheckboxGroupField> = args => (
-  <NotRequiredStory {...args} />
+  <NotRequiredTemplate {...args} />
 )
 
 NotRequired.parameters = {

diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/PartiallyRequired.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/PartiallyRequired.stories.tsx
@@ -1,11 +1,12 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { CheckboxGroupField } from '..'
 import { Submit } from '../..'
 
-export const PartiallyRequiredStory: StoryFn<
-  typeof CheckboxGroupField
-> = args => (
+const PartiallyRequiredStory = (
+  args: ComponentProps<typeof CheckboxGroupField>,
+) => (
   <Stack gap={1}>
     <CheckboxGroupField {...args}>
       <CheckboxGroupField.Checkbox

diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/Required.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/Required.stories.tsx
@@ -1,9 +1,12 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { CheckboxGroupField } from '..'
 import { Submit } from '../..'
 
-export const RequiredStory: StoryFn<typeof CheckboxGroupField> = args => (
+export const RequiredTemplate = (
+  args: ComponentProps<typeof CheckboxGroupField>,
+) => (
   <Stack gap={1}>
     <CheckboxGroupField {...args}>
       <CheckboxGroupField.Checkbox
@@ -21,7 +24,7 @@ export const RequiredStory: StoryFn<typeof CheckboxGroupField> = args => (
 )
 
 export const Required: StoryFn<typeof CheckboxGroupField> = args => (
-  <RequiredStory {...args} />
+  <RequiredTemplate {...args} />
 )
 
 Required.parameters = {

diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx
@@ -1,8 +1,11 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { CheckboxGroupField } from '..'
 
-const CheckboxGroupFieldStory: StoryFn<typeof CheckboxGroupField> = args => (
+const CheckboxGroupTemplate = (
+  args: ComponentProps<typeof CheckboxGroupField>,
+) => (
   <Stack gap={2}>
     <CheckboxGroupField {...args}>
       <CheckboxGroupField.Checkbox
@@ -19,7 +22,7 @@ const CheckboxGroupFieldStory: StoryFn<typeof CheckboxGroupField> = args => (
 )
 
 export const Template: StoryFn<typeof CheckboxGroupField> = args => (
-  <CheckboxGroupFieldStory {...args} />
+  <CheckboxGroupTemplate {...args} />
 )
 
 Template.args = {

diff --git a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap
@@ -208,7 +208,6 @@ exports[`DateField > should render correctly 1`] = `
                   id=":r1:"
                   name="test"
                   type="text"
-                  value=""
                 />
                 <div
                   class="emotion-10 emotion-11"
@@ -446,7 +445,6 @@ exports[`DateField > should render correctly disabled 1`] = `
                   id=":r4:"
                   name="test"
                   type="text"
-                  value=""
                 />
                 <div
                   class="emotion-10 emotion-11"

diff --git a/packages/form/src/components/NumberInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/NumberInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -356,7 +356,6 @@ exports[`NumberInputFieldV2 > should render correctly 1`] = `
                 name="test"
                 placeholder=""
                 type="number"
-                value=""
               />
             </div>
             <div
@@ -737,7 +736,6 @@ exports[`NumberInputFieldV2 > should render correctly disabled 1`] = `
                 name="test"
                 placeholder=""
                 type="number"
-                value=""
               />
             </div>
             <div