[bug] non-optional component properties not satisfied by SLFunctionComponent<{}>

[jrson83]

Describe the bug

Taking the docs package as example, when changing a property of the LinkableBtnProps interface to required e.g. primary:

export type LinkableBtnProps = {
  isActive?: boolean
  href?: string
  target?: string
  hoverable?: boolean
  primary: boolean // non-optional
} & HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>

IDE is throwing two type errors:

---

First error:

Related to tsconfig.json the strictFunctionTypes option is set to true:

type StoryType = Story<typeof LinkableBtn> // typeof LinkableBtn error

Type '({ className, isActive, primary, hoverable, children, href, target, ...rest }: LinkableBtnProps) => Element' does not satisfy the constraint 'SLFunctionComponent<{}>'.
  Types of parameters '__0' and 'props' are incompatible.
    Type '{}' is not assignable to type 'LinkableBtnProps'.
      Property 'primary' is missing in type '{}' but required in type '{ isActive?: boolean | undefined; href?: string | undefined; target?: string | undefined; hoverable?: boolean | undefined; primary: boolean; }'.ts(2344)
LinkableBtn.tsx(8, 3): 'primary' is declared here.

---

Second error:

<Story {...context?.args} /> // Story error

Property 'primary' is missing in type '{}' but required in type '{ isActive?: boolean | undefined; href?: string | undefined; target?: string | undefined; hoverable?: boolean | undefined; primary: boolean; }'.ts(2741)
LinkableBtn.tsx(8, 3): 'primary' is declared here.

⚠ Error (TS2741)  | 
Property 'primary'   is missing in type {} but required in type:
.
(parameter) Story: ({ className, isActive, primary, hoverable, children, href, target, ...rest }: LinkableBtnProps) => JSX.Element

Reproduction

1. Clone the repo
2. Run pnpm i
3. Change LinkableBtnProps primary property to required
4. Open buttons.stories.tsx and see the error

Environment

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

[itsjavi]

this PR might fix this issue #75

[jrson83]

this PR might fix this issue #75

I tested PR #75 by making react example component property in ForwardRefButton.tsx variant and in LinkableBtn.tsx primary non-optional, but the issue still persists.