diff --git a/addons/docs/src/lib/getPropDefs.ts b/addons/docs/src/lib/getPropDefs.ts index 9e4230e8e319..6d591d204df0 100644 --- a/addons/docs/src/lib/getPropDefs.ts +++ b/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); +}; 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..245df14d4512 --- /dev/null +++ b/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) => ); + +export default { + title: 'Addons|Docs/ForwardRef', + component: ForwardedButton, +}; + +export const displaysCorrectly = () => Hello World!; +displaysCorrectly.story = { name: 'Displays forwarded ref components correctly' }; 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 => ); + +export default { + title: 'Addons|Docs/ButtonWithMemo', + component: ButtonWithMemo, +}; + +export const displaysCorrectly = () => Hello World!; +displaysCorrectly.story = { name: 'Displays components with memo correctly' };