Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
fabpico opened this issue Jan 10, 2024 · 3 comments
Open

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

fabpico opened this issue Jan 10, 2024 · 3 comments

Comments

@fabpico
Copy link

fabpico commented Jan 10, 2024

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

@shilman
Copy link
Member

shilman commented Jan 11, 2024

We currently run prettier on the source snippets by default. I suppose we could provide an option to disable prettier, e.g. parameters.docs.source.format = false cc @kasperpeulen

@chakAs3
Copy link
Contributor

chakAs3 commented Jan 30, 2024

@shilman i don't think it is prettier anymore, i remember working on some React SyntaxHighlighter, it is quite buggy more precisely line breaks
#22541

@Th3S4mur41
Copy link

@shilman is prettier still used to format the code snippets?
If yes, might a local prettierc config and prettierignor interfere with this?

e.g. this simple example of a list is definitely not being formatted at all with Storybook 8.1.4
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants