storybookjs/storybook

[Bug]: "Show Code" removes linebreaks

Open

#25804 opened on Jan 30, 2024

View on GitHub
 (0 comments) (2 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
block: sourcebughelp wantedsev:S4

Description

Describe the bug

Similar to https://github.com/storybookjs/storybook/issues/25542 , but vice versa.

In a story I have such code

    const icons = [
        createRow('Add', <Icon type={'add'} onClick={onClick} className={'any-class'}/>),
        createRow('Change', <Icon type={'change'} onClick={onClick}/>),
        createRow('Up', <Icon type={'up'} onClick={onClick}/>),
        createRow('Down', <Icon type={'down'} onClick={onClick}/>),
        createRow('Remove', <Icon type={'remove-trash'} onClick={onClick}/>),
        createRow('Close', <Icon type={'remove-x'} onClick={onClick}/>),
        createRow('Download', <Icon type={'download'} onClick={onClick}/>),
    ]

When I use "Show Code" feature, the code is shown with removed linebreaks, making it hard to copy component code.

  const icons = [createRow('Add', <Icon type={'add'} onClick={onClick} className={'any-class'} />), createRow('Change', <Icon type={'change'} onClick={onClick} />), createRow('Up', <Icon type={'up'} onClick={onClick} />), createRow('Down', <Icon type={'down'} onClick={onClick} />), createRow('Remove', <Icon type={'remove-trash'} onClick={onClick} />), createRow('Close', <Icon type={'remove-x'} onClick={onClick} />), createRow('Download', <Icon type={'download'} onClick={onClick} />)];

To Reproduce

No response

System

npx storybook@7.6.7 info

Storybook Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm <----- active
  npmPackages:
    @storybook/addon-essentials: ^7.6.7 => 7.6.7
    @storybook/manager-api: ^7.6.7 => 7.6.7
    @storybook/nextjs: ^7.6.7 => 7.6.7
    @storybook/theming: ^7.6.7 => 7.6.7
    storybook: ^7.6.7 => 7.6.7

Additional context

No response

Contributor guide

Tech stack
typescriptreact
Domain
frontenddocumentationdeveloper experience
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.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic understanding of Storybook addonsfamiliarity with React
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
Investigate the 'Show Code' feature in Storybook's addon docs. The bug is likely in the source code generation logic that formats the story's JSX. Start by examining files in `addons/docs/src/blocks` or `addons/docs/src/source`, especially the function that creates the source code string. Look for any processing that might join lines or remove newlines. Check if there's a setting or transformer that affects formatting. The linked issue #25542 might provide clues about similar previous work. No maintainer response yet, so the fix direction is to preserve linebreaks in the displayed code.