storybookjs/storybook
View on GitHub[Bug]: "Show Code" formats with unwanted linebreaks in Storybook 7
Open
#25542 opened on Jan 10, 2024
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