fix: type error

Signed-off-by: Alexandre Philibeaux <aphilibeaux@scaleway.com>
scaleway · Dec 16, 2024 · b8fee58 · b8fee58
1 parent 6e17823
commit b8fee58
Show file tree

Hide file tree

Showing 62 changed files with 322 additions and 526 deletions.
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-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,6 +17,7 @@
   "dependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
+    "@ultraviolet/fonts": "workspace:*",
     "@ultraviolet/form": "workspace:*",
     "@ultraviolet/icons": "workspace:*",
     "@ultraviolet/ui": "workspace:*",
@@ -31,7 +32,7 @@
   "devDependencies": {
     "@babel/core": "7.26.0",
     "@types/node": "22.10.2",
-    "@types/react":"19.0.0",
+    "@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/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

diff --git a/packages/form/src/components/RadioGroupField/__stories__/Required.stories.tsx b/packages/form/src/components/RadioGroupField/__stories__/Required.stories.tsx
@@ -1,9 +1,10 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { RadioGroupField } from '..'
 import { Submit } from '../..'
 
-export const RequiredStory: StoryFn<typeof RadioGroupField> = args => (
+const RequiredTemplate = (args: ComponentProps<typeof RadioGroupField>) => (
   <Stack gap={1}>
     <RadioGroupField {...args}>
       <RadioGroupField.Radio value="radio-1" label="Radio 1" />
@@ -14,7 +15,7 @@ export const RequiredStory: StoryFn<typeof RadioGroupField> = args => (
 )
 
 export const Required: StoryFn<typeof RadioGroupField> = args => (
-  <RequiredStory {...args} />
+  <RequiredTemplate {...args} />
 )
 
 Required.args = {

diff --git a/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx b/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx
@@ -5,7 +5,7 @@ import { SelectInputField } from '..'
 export const Template: StoryFn<
   StoryFn<ComponentProps<typeof SelectInputField>>
 > = args => (
-  <SelectInputField {...args}>
+  <SelectInputField name="replace-me" {...args}>
     <SelectInputField.Option value="a">Option A</SelectInputField.Option>
     <SelectInputField.Option value="b">Option B</SelectInputField.Option>
   </SelectInputField>

diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx b/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, screen } from '@testing-library/react'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { renderWithForm } from '@utils/test'
 import { describe, expect, test, vi } from 'vitest'
@@ -34,7 +34,7 @@ describe('SelectInputField', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('should display right value on grouped options', () => {
+  test('should display right value on grouped options', async () => {
     const { asFragment } = renderWithForm(
       <SelectInputFieldV2 name="test" options={planets} searchable={false} />,
     )
@@ -45,8 +45,9 @@ describe('SelectInputField', () => {
 
     act(() => mercury.click())
     act(() => select.click())
-
-    expect(mercury).toBeVisible()
+    await waitFor(() => {
+      expect(mercury).toBeVisible()
+    })
     expect(asFragment()).toMatchSnapshot()
   })
 
@@ -66,8 +67,11 @@ describe('SelectInputField', () => {
     const option = screen.getByTestId('option-stack-mercury')
 
     await userEvent.click(option)
-    expect(onChange).toBeCalledTimes(1)
+    await waitFor(() => {
+      expect(onChange).toBeCalledTimes(1)
+    })
     act(() => select.blur())
+
     expect(asFragment()).toMatchSnapshot()
   })
 })
diff --git a/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.test.tsx.snap
@@ -214,7 +214,7 @@ exports[`SubmitErrorAlert > should display an alert when submitError is present
             >
               <path
                 clip-rule="evenodd"
-                d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5m0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
+                d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4m0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
                 fill-rule="evenodd"
               />
             </svg>