fix: type error

Signed-off-by: Alexandre Philibeaux <[email protected]>

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

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
 }

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"
   }

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

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 = {

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 = {

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

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 = {

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 = {

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 = {

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>

packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx

@@ -1,10 +1,13 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { ToggleGroupField } from '..'
 import { Submit } from '../..'
 import { useWatch } from '../../..'
 
-export const RequiredStory: StoryFn<typeof ToggleGroupField> = args => {
+export const RequiredStory = (
+  args: ComponentProps<typeof ToggleGroupField>,
+) => {
   const values = useWatch()
 
   return (

packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx

@@ -1,9 +1,12 @@
 import type { StoryFn } from '@storybook/react'
 import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
 import { ToggleGroupField } from '..'
 import { useWatch } from '../../..'
 
-const ToggleGroupFieldStory: StoryFn<typeof ToggleGroupField> = args => {
+const ToggleGroupFieldStory = (
+  args: ComponentProps<typeof ToggleGroupField>,
+) => {
   const values = useWatch()
 
   return (

packages/icons/src/components/Icon/Icon.tsx

@@ -124,6 +124,7 @@ export type IconProps = {
 /**
  * IconV2 component is our set of system icons in the design system. All of them are SVGs.
  */
+
 export const Icon = forwardRef<SVGSVGElement, IconProps>(
   (
     {

packages/plus/package.json

@@ -74,7 +74,7 @@
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
     "@types/react": "19.0.0",
-    "@types/react-dom": "18.3.5",
+    "@types/react-dom": "19.0.0",
     "@ultraviolet/illustrations": "workspace:*",
     "@utils/test": "workspace:*",
     "react": "19.0.0",

packages/plus/src/components/EstimateCost/OverlayComponent.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import { Icon, Stack } from '@ultraviolet/ui'
-import type { ReactNode } from 'react'
+import type { JSX, ReactNode } from 'react'
 import { Children, cloneElement, isValidElement, useMemo } from 'react'
 import { LineThrough } from './Components/LineThrough'
 import { Strong } from './Components/Strong'

packages/plus/src/components/EstimateCost/types.ts

@@ -1,5 +1,5 @@
 import type { Alert } from '@ultraviolet/ui'
-import type { ComponentProps, ReactNode } from 'react'
+import type { ComponentProps, JSX, ReactNode } from 'react'
 import type EstimateCostLocales from './locales/en'
 
 export type EstimateCostProps = {

packages/plus/src/components/Navigation/Footer.tsx

@@ -25,7 +25,7 @@ const StickyFooter = styled.div`
 
 type FooterProps = {
   onToggleExpand: NavigationProps['onToggleExpand']
-  contentRef: RefObject<HTMLDivElement>
+  contentRef: RefObject<HTMLDivElement | null>
 }
 
 export const Footer = ({ onToggleExpand, contentRef }: FooterProps) => {

packages/plus/src/components/Navigation/NavigationContent.tsx

@@ -116,8 +116,8 @@ export const NavigationContent = ({
     shouldAnimate,
   } = context
 
-  const sliderRef = useRef<HTMLDivElement>(null)
-  const contentRef = useRef<HTMLDivElement>(null)
+  const sliderRef = useRef<HTMLDivElement | null>(null)
+  const contentRef = useRef<HTMLDivElement | null>(null)
 
   // It will handle the resize of the navigation when the user drag the vertical bar
   useEffect(() => {

packages/plus/src/components/Navigation/NavigationProvider.tsx

@@ -1,4 +1,4 @@
-import type { Dispatch, ReactNode, Reducer, RefObject } from 'react'
+import type { Dispatch, ReactNode, RefObject } from 'react'
 import {
   createContext,
   useCallback,
@@ -33,7 +33,7 @@ type ContextProps = {
   unpinItem: (item: string) => string[]
   pinnedItems: string[]
   pinLimit: number
-  navigationRef: RefObject<HTMLDivElement>
+  navigationRef: RefObject<HTMLDivElement | null>
   locales: Record<keyof typeof NavigationLocales, string>
   width: number
   setWidth: (width: number) => void
@@ -156,14 +156,14 @@ export const NavigationProvider = ({
 
   // This is used to store the items that are registered in the navigation
   // This way we can retrieve items with their active state in pinned feature
-  const [items, registerItem] = useReducer<Reducer<Items, Items>>(
+  const [items, registerItem] = useReducer(
     (oldState: Items, newState: Items) => ({
       ...oldState,
       ...newState,
     }),
     {},
   )
-  const navigationRef = useRef<HTMLDivElement>(null)
+  const navigationRef = useRef<HTMLDivElement | null>(null)
 
   // This function will be triggered when expand/collapse button is clicked
   const toggleExpand = useCallback(

packages/ui/src/components/Modal/__stories__/AutoFocus.stories.tsx

@@ -12,7 +12,11 @@ export const AutoFocus: StoryFn = props => (
       <TextInputV2 placeholder="placeholder" />
       <TextInputV2
         placeholder="placeholder"
-        ref={ref => setTimeout(() => ref?.focus(), 1)}
+        ref={ref => {
+          if (ref) {
+            setTimeout(() => ref?.focus(), 1)
+          }
+        }}
       />
     </div>
   </Modal>

packages/ui/src/components/NumberInputV2/__stories__/MinMax.stories.tsx

@@ -1,14 +1,15 @@
 import type { StoryFn } from '@storybook/react'
 import { useState } from 'react'
-import type { NumberInputV2 } from '../index'
-import { Template } from './Template.stories'
+import { NumberInputV2 } from '..'
 
-export const MinMax: StoryFn<typeof NumberInputV2> = args => {
+export const Template: StoryFn<typeof NumberInputV2> = props => {
   const [value, setValue] = useState<number | null>(10)
 
-  return <Template {...args} value={value} onChange={setValue} />
+  return <NumberInputV2 {...props} value={value} onChange={setValue} />
 }
 
+export const MinMax = Template.bind({})
+
 MinMax.args = {
   id: 'number-input',
   label: 'Number Input',

packages/ui/src/components/Tabs/index.tsx

@@ -8,7 +8,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import type { HTMLAttributes, ReactElement, ReactNode } from 'react'
+import type { ComponentProps, HTMLAttributes, ReactNode } from 'react'
 import { StyledTabButton, Tab } from './Tab'
 import { TabMenu } from './TabMenu'
 import { TabMenuItem } from './TabMenuItem'
@@ -143,10 +143,10 @@ export const Tabs = ({
 
   // mapping of tab children to avoid using subtitle props
   const menuItemChildren = Children.map(children, child => {
-    if (isValidElement<typeof Tab>(child)) {
-      return cloneElement(child as ReactElement, {
+    if (isValidElement<ComponentProps<typeof Tab>>(child)) {
+      return cloneElement(child, {
         ...child.props,
-        // subtitle: null,
+        subtitle: null,
       })
     }