fix: add forwardref support (#74)

packages/examples/react/src/components/ForwardRefButton.tsx

@@ -0,0 +1,18 @@
+import { ComponentPropsWithRef, forwardRef } from 'react'
+
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
+  variant?: 'red' | 'green'
+}
+
+const ForwardRefButton = forwardRef<HTMLButtonElement, ButtonProps>(function ForwardRefButton(
+  { variant = 'red', children, ...rest },
+  ref,
+) {
+  return (
+    <button ref={ref} style={{ color: variant }} {...rest}>
+      {children}
+    </button>
+  )
+})
+
+export { ForwardRefButton }

packages/examples/react/stories/forwardref.stories.tsx

@@ -0,0 +1,43 @@
+import { Story } from '@storylite/storylite'
+
+import { ForwardRefButton } from '../src/components/ForwardRefButton'
+
+import '../src/styles/components.css'
+
+type StoryType = Story<typeof ForwardRefButton>
+
+// all properties (except navigation) defined in the 'default' export are inherited by
+// all other stories in this file
+export default {
+  title: 'ForwardRefButton',
+  component: ForwardRefButton,
+  decorators: [
+    (Story, context) => {
+      return (
+        <div style={{ padding: 20, borderRadius: '8px', background: '#ddd' }}>
+          <Story {...context?.args} />
+        </div>
+      )
+    },
+  ],
+  args: {
+    // default args
+    children: 'My Button',
+  },
+  navigation: {
+    // overriden navigation options
+    icon: <span>⏩</span>,
+    hidden: true, // hidden in sub-menu
+  },
+} satisfies StoryType
+
+export const DefaultStory: StoryType = {
+  name: 'Default',
+}
+
+export const WithComponentProps: StoryType = {
+  args: {
+    variant: 'green',
+    children: 'Green Variant',
+  },
+}

packages/storylite/src/types/components.ts

@@ -21,6 +21,13 @@ export type SLNode =
 // | SLFunctionComponent<any>
 
 export type SLFunctionComponent<P extends SLObject = {}> = React.FC<P>
-export type SLComponentProps<P extends SLFunctionComponent = SLFunctionComponent<{}>> = {
-  [key in keyof ComponentProps<SLFunctionComponent<P>>]: ComponentProps<SLFunctionComponent<P>>[key]
-}
+
+export type SLComponentProps<T> = T extends
+  | React.ComponentType<infer P extends SLObject>
+  | React.Component<infer P extends SLObject>
+  ? {
+      [key in keyof ComponentProps<SLFunctionComponent<P>>]: ComponentProps<
+        SLFunctionComponent<P>
+      >[key]
+    }
+  : never