Addon-docs: Fix React.forwardedRef/memo props (#8445)

Addon-docs: Fix React.forwardedRef/memo props

addons/docs/src/lib/getPropDefs.ts

@@ -84,5 +84,15 @@ 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 => {
+  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);
+};

examples/official-storybook/stories/addon-docs/forward-ref.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import DocgenButton from '../../components/DocgenButton';
+
+const ForwardedButton = React.forwardRef((props, ref) => <DocgenButton 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' };

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' };