storybookjs/storybook

[Bug]: show code part shows React.Memo instead of the component name

Open

#26,720 opened on Apr 3, 2024

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
block: sourcebughas workaroundhelp wantedreactsev:S3upgrade:8.x

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

Describe the bug

When export the react component with memo like this

export default React.memo(Circle);

Then in the doc "show code" part, it shows as this:

In storybook 7, it shows correctly. But after upgrade to 8, then saw this issue.

To Reproduce

create any component and export with React.memo.

System

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.15.4 - ~/Library/pnpm/pnpm <----- active
  Browsers:
    Chrome: 123.0.6312.87
    Safari: 17.4.1
  npmPackages:
    @storybook/addon-actions: ^8.0.5 => 8.0.5
    @storybook/addon-essentials: ^8.0.5 => 8.0.5
    @storybook/addon-links: ^8.0.5 => 8.0.5
    @storybook/blocks: ^8.0.5 => 8.0.5
    @storybook/react: ^8.0.5 => 8.0.5
    @storybook/react-vite: ^8.0.5 => 8.0.5
    storybook: ^8.0.5 => 8.0.5
    storybook-addon-deep-controls: ^0.6.1 => 0.6.1

Additional context

No response

Contributor guide

Research direction
Investigate how Storybook resolves the display name for components wrapped with React.memo. Check if the component name is extracted from the original component or if React.memo's display name takes precedence. Look for changes between Storybook 7 and 8 in the source code for rendering the 'show code' section.
Tech stack
typescriptreact
Domain
frontendtooling
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactGit
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50