fix: type error

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

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/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,
       })
     }