storybookjs/storybook

[Bug]: "Show Code" formats with unwanted linebreaks in Storybook 7

Open

#25542 opened on Jan 10, 2024

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

Description

Describe the bug

I have such a story

export const Default = () => {
    const items = [
        {id: '1', name: 'Item 1', date: '2022-01-01', author: 'John Doe'},
        {id: '2', name: 'Item 2', date: '2022-01-01', author: 'John Doe'},
        {id: '3', name: 'Item 3', date: '2022-01-01', author: 'John Doe'},
        {id: '4', name: 'Item 4', date: '2022-01-01', author: 'John Doe'},
    ]
    return <Table
        columns={[
            {name: 'name', label: 'Name'},
            {name: 'date', label: 'Date'},
            {name: 'author', label: 'Author', class: 'author'},
        ]}
        items={items}
    />
}

When I use "Show Code" feature, the code is shown with additional linebreaks

() => {
  const items = [{
    id: '1',
    name: 'Item 1',
    date: '2022-01-01',
    author: 'John Doe'
  }, {
    id: '2',
    name: 'Item 2',
    date: '2022-01-01',
    author: 'John Doe'
  }, {
    id: '3',
    name: 'Item 3',
    date: '2022-01-01',
    author: 'John Doe'
  }, {
    id: '4',
    name: 'Item 4',
    date: '2022-01-01',
    author: 'John Doe'
  }];
  return <Table columns={[{
    name: 'name',
    label: 'Name'
  }, {
    name: 'date',
    label: 'Date'
  }, {
    name: 'author',
    label: 'Author',
    class: 'author'
  }]} items={items} />;
}

This did not happen on Storybook 6.5.

To Reproduce

https://stackblitz.com/edit/github-qofixt?file=src%2Fstories%2FTable.stories.js

System

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