diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 66d2c072fcdb..000000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "deepscan.enable": true
-}
\ No newline at end of file
diff --git a/addons/docs/src/frameworks/react/jsxDecorator.test.tsx b/addons/docs/src/frameworks/react/jsxDecorator.test.tsx
index 50ae6cb6865f..1d5302cbebce 100644
--- a/addons/docs/src/frameworks/react/jsxDecorator.test.tsx
+++ b/addons/docs/src/frameworks/react/jsxDecorator.test.tsx
@@ -92,6 +92,31 @@ describe('renderJsx', () => {
/>
`);
});
+
+ it('forwardRef component', () => {
+ const MyExoticComponent = React.forwardRef(function MyExoticComponent(props: any, _ref: any) {
+ return
{props.children}
;
+ });
+
+ expect(renderJsx(I'm forwardRef!, {}))
+ .toMatchInlineSnapshot(`
+
+ I'm forwardRef!
+
+ `);
+ });
+
+ it('memo component', () => {
+ const MyMemoComponent = React.memo(function MyMemoComponent(props: any) {
+ return {props.children}
;
+ });
+
+ expect(renderJsx(I'm memo!, {})).toMatchInlineSnapshot(`
+
+ I'm memo!
+
+ `);
+ });
});
// @ts-ignore
diff --git a/addons/docs/src/frameworks/react/jsxDecorator.tsx b/addons/docs/src/frameworks/react/jsxDecorator.tsx
index ab5985e7ac83..b63760aaddf8 100644
--- a/addons/docs/src/frameworks/react/jsxDecorator.tsx
+++ b/addons/docs/src/frameworks/react/jsxDecorator.tsx
@@ -62,14 +62,29 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
}
}
- const opts =
+ const displayNameDefaults =
typeof options.displayName === 'string'
- ? {
- ...options,
- showFunctions: true,
- displayName: () => options.displayName,
- }
- : options;
+ ? { showFunctions: true, displayName: () => options.displayName }
+ : {
+ // To get exotic component names resolving properly
+ displayName: (el: any): string =>
+ el.type.displayName ||
+ (el.type.name !== '_default' ? el.type.name : null) ||
+ (typeof el.type === 'function' ? 'No Display Name' : null) ||
+ (el.type.$$typeof === Symbol.for('react.forward_ref') ? el.type.render.name : null) ||
+ (el.type.$$typeof === Symbol.for('react.memo') ? el.type.type.name : null) ||
+ el.type,
+ };
+
+ const filterDefaults = {
+ filterProps: (value: any, key: string): boolean => value !== undefined,
+ };
+
+ const opts = {
+ ...displayNameDefaults,
+ ...filterDefaults,
+ ...options,
+ };
const result = React.Children.map(code, (c) => {
// @ts-ignore FIXME: workaround react-element-to-jsx-string
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 2de324de9060..74b3ce502dc4 100644
--- a/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
+++ b/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
@@ -4,19 +4,25 @@ import { DocgenButton } from '../../components/DocgenButton';
export default {
title: 'Addons/Docs/ForwardRef',
component: ForwardedButton,
- parameters: { chromatic: { disable: true } },
+ parameters: {
+ chromatic: { disable: true },
+ docs: { source: { type: 'dynamic' } },
+ },
};
-const ForwardedButton = React.forwardRef((props = { label: '' }, ref) => (
-
-));
+const ForwardedButton = React.forwardRef(function ForwardedButton(props = { label: '' }, ref) {
+ return ;
+});
export const DisplaysCorrectly = () => ;
DisplaysCorrectly.storyName = 'Displays forwarded ref components correctly (default props)';
-// eslint-disable-next-line react/prop-types
-const ForwardedDestructuredButton = React.forwardRef(({ label = '', ...props }, ref) => (
-
-));
+const ForwardedDestructuredButton = React.forwardRef(function ForwardedDestructuredButton(
+ // eslint-disable-next-line react/prop-types
+ { label = '', ...props },
+ ref
+) {
+ return ;
+});
export const AlsoDisplaysCorrectly = () => ;
AlsoDisplaysCorrectly.storyName =
'Displays forwarded ref components correctly (destructured props)';
diff --git a/examples/official-storybook/stories/addon-docs/react-memo.stories.js b/examples/official-storybook/stories/addon-docs/memo.stories.js
similarity index 58%
rename from examples/official-storybook/stories/addon-docs/react-memo.stories.js
rename to examples/official-storybook/stories/addon-docs/memo.stories.js
index 44c0a1fe7845..6c41f65da2fb 100644
--- a/examples/official-storybook/stories/addon-docs/react-memo.stories.js
+++ b/examples/official-storybook/stories/addon-docs/memo.stories.js
@@ -1,13 +1,16 @@
import React from 'react';
import { DocgenButton } from '../../components/DocgenButton';
-const ButtonWithMemo = React.memo((props) => );
+const ButtonWithMemo = React.memo(DocgenButton);
export default {
- title: 'Addons/Docs/ButtonWithMemo',
+ title: 'Addons/Docs/Memo',
component: ButtonWithMemo,
- parameters: { chromatic: { disable: true } },
+ parameters: {
+ chromatic: { disable: true },
+ docs: { source: { type: 'dynamic' } },
+ },
};
-export const displaysCorrectly = () => ;
+export const displaysCorrectly = () => ;
displaysCorrectly.storyName = 'Displays components with memo correctly';
diff --git a/lib/cli/versions.json b/lib/cli/versions.json
index 3b4dd1373899..059fe985ce17 100644
--- a/lib/cli/versions.json
+++ b/lib/cli/versions.json
@@ -52,4 +52,4 @@
"@storybook/ui": "6.0.25",
"@storybook/vue": "6.0.25",
"@storybook/web-components": "6.0.25"
-}
\ No newline at end of file
+}