From d7eb4b91d0195e582e1dd8cdabd26b6ca16598a9 Mon Sep 17 00:00:00 2001
From: Albert Darmawan <darmawanalbert@gmail.com>
Date: Wed, 16 Oct 2019 21:59:02 +0700
Subject: [PATCH 1/4] fix(Addon Docs): Fix Props block rendering issue on
 forwardedRef

---
 addons/docs/src/blocks/Props.tsx                     |  6 ++++--
 .../stories/addon-docs/forward-ref.stories.js        | 12 ++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 examples/official-storybook/stories/addon-docs/forward-ref.stories.js

diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx
index ab4769476adf..a666e4249c98 100644
--- a/addons/docs/src/blocks/Props.tsx
+++ b/addons/docs/src/blocks/Props.tsx
@@ -27,11 +27,13 @@ export const getPropsTableProps = (
     const params = parameters || {};
     const { component, framework = null } = params;
 
-    const target = of === CURRENT_SELECTION ? component : of;
+    let target = of === CURRENT_SELECTION ? component : of;
     if (!target) {
       throw new Error(PropsTableError.NO_COMPONENT);
     }
-
+    if (target.render) {
+      target = target.render().type;
+    }
     const { getPropDefs = inferPropDefs(framework) } = params.docs || {};
     if (!getPropDefs) {
       throw new Error(PropsTableError.PROPS_UNSUPPORTED);
diff --git a/examples/official-storybook/stories/addon-docs/forward-ref.stories.js b/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
new file mode 100644
index 000000000000..aa4d994c1278
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button } from '@storybook/react/demo';
+
+const ForwardedButton = React.forwardRef((props, ref) => <Button ref={ref} {...props} />);
+
+export default {
+  title: 'Addons|Docs/ForwardRef',
+  component: ForwardedButton,
+};
+
+export const displaysCorrectly = () => <ForwardedButton>Hello World!</ForwardedButton>;
+displaysCorrectly.story = { name: 'Displays forwarded ref components correctly' };

From 74cea2db326727f31d0293fd8902bd520b747800 Mon Sep 17 00:00:00 2001
From: Albert Darmawan <darmawanalbert@gmail.com>
Date: Fri, 18 Oct 2019 17:15:24 +0700
Subject: [PATCH 2/4] Move render check to getPropDefs.ts

---
 addons/docs/src/blocks/Props.tsx   | 5 +----
 addons/docs/src/lib/getPropDefs.ts | 8 ++++++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx
index a666e4249c98..66f46e39749a 100644
--- a/addons/docs/src/blocks/Props.tsx
+++ b/addons/docs/src/blocks/Props.tsx
@@ -27,13 +27,10 @@ export const getPropsTableProps = (
     const params = parameters || {};
     const { component, framework = null } = params;
 
-    let target = of === CURRENT_SELECTION ? component : of;
+    const target = of === CURRENT_SELECTION ? component : of;
     if (!target) {
       throw new Error(PropsTableError.NO_COMPONENT);
     }
-    if (target.render) {
-      target = target.render().type;
-    }
     const { getPropDefs = inferPropDefs(framework) } = params.docs || {};
     if (!getPropDefs) {
       throw new Error(PropsTableError.PROPS_UNSUPPORTED);
diff --git a/addons/docs/src/lib/getPropDefs.ts b/addons/docs/src/lib/getPropDefs.ts
index 9e4230e8e319..42d37dd789fb 100644
--- a/addons/docs/src/lib/getPropDefs.ts
+++ b/addons/docs/src/lib/getPropDefs.ts
@@ -84,5 +84,9 @@ const propsFromPropTypes: PropDefGetter = type => {
   return Object.values(props);
 };
 
-export const getPropDefs: PropDefGetter = type =>
-  hasDocgen(type.__docgenInfo) ? propsFromDocgen(type) : propsFromPropTypes(type);
+export const getPropDefs: PropDefGetter = type => {
+  const processedType = type.render ? type.render().type : type;
+  return hasDocgen(processedType.__docgenInfo)
+    ? propsFromDocgen(processedType)
+    : propsFromPropTypes(processedType);
+};

From 8fc19f707e66c3a765e1b3383ab420e1d4df1f7f Mon Sep 17 00:00:00 2001
From: Albert Darmawan <darmawanalbert@gmail.com>
Date: Fri, 18 Oct 2019 17:16:24 +0700
Subject: [PATCH 3/4] Add newline (accidentally removed)

---
 addons/docs/src/blocks/Props.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx
index 66f46e39749a..ab4769476adf 100644
--- a/addons/docs/src/blocks/Props.tsx
+++ b/addons/docs/src/blocks/Props.tsx
@@ -31,6 +31,7 @@ export const getPropsTableProps = (
     if (!target) {
       throw new Error(PropsTableError.NO_COMPONENT);
     }
+
     const { getPropDefs = inferPropDefs(framework) } = params.docs || {};
     if (!getPropDefs) {
       throw new Error(PropsTableError.PROPS_UNSUPPORTED);

From d163699ec5f77832bccab98cfef29589a1e37207 Mon Sep 17 00:00:00 2001
From: Albert Darmawan <darmawanalbert@gmail.com>
Date: Fri, 18 Oct 2019 17:35:08 +0700
Subject: [PATCH 4/4] Handle React.memo case at getPropsDefs.ts

---
 addons/docs/src/lib/getPropDefs.ts                   |  8 +++++++-
 .../stories/addon-docs/forward-ref.stories.js        |  4 ++--
 .../stories/addon-docs/react-memo.stories.js         | 12 ++++++++++++
 3 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 examples/official-storybook/stories/addon-docs/react-memo.stories.js

diff --git a/addons/docs/src/lib/getPropDefs.ts b/addons/docs/src/lib/getPropDefs.ts
index 42d37dd789fb..6d591d204df0 100644
--- a/addons/docs/src/lib/getPropDefs.ts
+++ b/addons/docs/src/lib/getPropDefs.ts
@@ -85,7 +85,13 @@ const propsFromPropTypes: PropDefGetter = type => {
 };
 
 export const getPropDefs: PropDefGetter = type => {
-  const processedType = type.render ? type.render().type : type;
+  let processedType = type;
+  if (type.render) {
+    processedType = type.render().type;
+  }
+  if (typeof type.type === 'function') {
+    processedType = type.type().type;
+  }
   return hasDocgen(processedType.__docgenInfo)
     ? propsFromDocgen(processedType)
     : propsFromPropTypes(processedType);
diff --git a/examples/official-storybook/stories/addon-docs/forward-ref.stories.js b/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
index aa4d994c1278..245df14d4512 100644
--- a/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
+++ b/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Button } from '@storybook/react/demo';
+import DocgenButton from '../../components/DocgenButton';
 
-const ForwardedButton = React.forwardRef((props, ref) => <Button ref={ref} {...props} />);
+const ForwardedButton = React.forwardRef((props, ref) => <DocgenButton ref={ref} {...props} />);
 
 export default {
   title: 'Addons|Docs/ForwardRef',
diff --git a/examples/official-storybook/stories/addon-docs/react-memo.stories.js b/examples/official-storybook/stories/addon-docs/react-memo.stories.js
new file mode 100644
index 000000000000..2acf981529e1
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs/react-memo.stories.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import DocgenButton from '../../components/DocgenButton';
+
+const ButtonWithMemo = React.memo(props => <DocgenButton {...props} />);
+
+export default {
+  title: 'Addons|Docs/ButtonWithMemo',
+  component: ButtonWithMemo,
+};
+
+export const displaysCorrectly = () => <ButtonWithMemo>Hello World!</ButtonWithMemo>;
+displaysCorrectly.story = { name: 'Displays components with memo correctly' };