[bug] Typescript support for components using forwardRef

[jrson83]

Describe the bug

It might be just not integrated yet. When using forwardRef on a component and assigning args, IDE throws a type error. This happens when exporting a default function, but also when exporting default const Button. Or maybe my typings are wrong.

Reproduction

Example simplified component:

// button.tsx
import { type ComponentPropsWithRef, forwardRef } from 'react'

export type ButtonProps = Omit<ComponentPropsWithRef<'button'>, 'onClick'> & {
  /** Button color from theme */
  color?: string
  onClick?: (data: unknown) => void
}

export default forwardRef<HTMLButtonElement, ButtonProps>(
  ({ children, className = 'btn', color, type = 'button', ...rest }, ref) => {
    return (
      <button type={type} ref={ref} {...rest}>
        {children}
      </button>
    )
  }
)

// button.stories.tsx
import { Story } from '@storylite/storylite'
import Button from './button'

type StoryType = Story<typeof Button>

export default {
  title: 'Button',
  component: Button,
  args: {
    color: undefined, // error
    children: 'Default',
  },
  decorators: [
    (Story, context) => {
      return (
        <div className="example-wrapper">
          <Story {...context?.args} />
        </div>
      )
    },
  ],
} satisfies StoryType

export const Main: StoryType = {
  name: 'Default',
}

Environment

• OS with version: Windows 11
• Browser with version Firefox 117.0
• JS Runtime with version: NodeJS v20.2.0

[jrson83]

@itsjavi those links may help:

storybookjs/storybook#15334 (comment)

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/abe79dcfffe8235d0fac1194c470b61c555bbe56/types/react/index.d.ts#L848

https://www.totaltypescript.com/react-props-typescript#interfaces-over-intersections