Merge pull request #12638 from andezzat/fix/react-component-name

Addon-docs: Fix exotic React components in Source block

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 <div>{props.children}</div>;
+    });
+
+    expect(renderJsx(<MyExoticComponent>I'm forwardRef!</MyExoticComponent>, {}))
+      .toMatchInlineSnapshot(`
+        <MyExoticComponent>
+          I'm forwardRef!
+        </MyExoticComponent>
+      `);
+  });
+
+  it('memo component', () => {
+    const MyMemoComponent = React.memo(function MyMemoComponent(props: any) {
+      return <div>{props.children}</div>;
+    });
+
+    expect(renderJsx(<MyMemoComponent>I'm memo!</MyMemoComponent>, {})).toMatchInlineSnapshot(`
+      <MyMemoComponent>
+        I'm memo!
+      </MyMemoComponent>
+    `);
+  });
 });
 
 // @ts-ignore

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

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) => (
-  <DocgenButton ref={ref} {...props} />
-));
+const ForwardedButton = React.forwardRef(function ForwardedButton(props = { label: '' }, ref) {
+  return <DocgenButton ref={ref} {...props} />;
+});
 export const DisplaysCorrectly = () => <ForwardedButton label="hello" />;
 DisplaysCorrectly.storyName = 'Displays forwarded ref components correctly (default props)';
 
-// eslint-disable-next-line react/prop-types
-const ForwardedDestructuredButton = React.forwardRef(({ label = '', ...props }, ref) => (
-  <DocgenButton ref={ref} label={label} {...props} />
-));
+const ForwardedDestructuredButton = React.forwardRef(function ForwardedDestructuredButton(
+  // eslint-disable-next-line react/prop-types
+  { label = '', ...props },
+  ref
+) {
+  return <DocgenButton ref={ref} label={label} {...props} />;
+});
 export const AlsoDisplaysCorrectly = () => <ForwardedDestructuredButton label="hello" />;
 AlsoDisplaysCorrectly.storyName =
   'Displays forwarded ref components correctly (destructured props)';

examples/official-storybook/stories/addon-docs/react-memo.stories.js → 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) => <DocgenButton {...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 = () => <ButtonWithMemo label="Hello World" />;
+export const displaysCorrectly = () => <ButtonWithMemo label="Hello memo World" />;
 displaysCorrectly.storyName = 'Displays components with memo correctly';

lib/cli/versions.json

@@ -52,4 +52,4 @@
   "@storybook/ui": "6.0.25",
   "@storybook/vue": "6.0.25",
   "@storybook/web-components": "6.0.25"
-}
+}