From d88a77a8bae9963d4f2e078331db0a9f606a032f Mon Sep 17 00:00:00 2001
From: Jrson <45284565+jrson83@users.noreply.github.com>
Date: Sun, 24 Sep 2023 15:51:03 +0200
Subject: [PATCH] fix: add forwardref support (#74)

---
 .../react/src/components/ForwardRefButton.tsx | 18 ++++++++
 .../react/stories/forwardref.stories.tsx      | 43 +++++++++++++++++++
 packages/storylite/src/types/components.ts    | 13 ++++--
 3 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 packages/examples/react/src/components/ForwardRefButton.tsx
 create mode 100644 packages/examples/react/stories/forwardref.stories.tsx

diff --git a/packages/examples/react/src/components/ForwardRefButton.tsx b/packages/examples/react/src/components/ForwardRefButton.tsx
new file mode 100644
index 0000000..6da899e
--- /dev/null
+++ b/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 }
diff --git a/packages/examples/react/stories/forwardref.stories.tsx b/packages/examples/react/stories/forwardref.stories.tsx
new file mode 100644
index 0000000..2b1f5ee
--- /dev/null
+++ b/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',
+  },
+}
diff --git a/packages/storylite/src/types/components.ts b/packages/storylite/src/types/components.ts
index f504b87..355aeb3 100644
--- a/packages/storylite/src/types/components.ts
+++ b/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