search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.11k stars 9.25k forks source link

[Bug]: storysource code not formatted #22362

Open mayank99 opened 1 year ago

mayank99 commented 1 year ago

Describe the bug

When using v7 with react+vite, the storysource code is much more reliable than it was in v6! However, one issue I've noticed is that when using story function format, the code is not formatted in a readable manner.

It would be nice if there was a way to run something like prettier on the code snippet (at build time) or just preserve original source formatting.

To Reproduce

7.1.0-alpha.11: https://stackblitz.com/edit/github-vusgyh?file=src%2Fstories%2FButton.stories.tsx

7.1.0-alpha.27: https://stackblitz.com/edit/github-vusgyh-pixhqk?file=src%2Fstories%2FButton.stories.tsx

7.1.0-beta.0: https://stackblitz.com/edit/github-vusgyh-mcgr2x?file=src%2Fstories%2FButton.stories.tsx

System

N/A. See stackblitz

Additional context

No response

mayank99 commented 1 year ago

this might actually be a bug in @storybook/source-loader rather than storysource. If i understand correctly, it is supposed to already run prettier before the code is made available to storysource

hudochenkov commented 1 year ago

Could confirm this on Storybook 7.1. It affects both Storysource addon and Docs addon using React framework. Source code is actually reformatted by Storybook, but makes it quite bad.

Our source files use tabs for indentation. Storybook then reformats using two spaces, and mess up indentation levels.

Worth noting that it looks like only JSX portion of a file has messed up indentation levels.

llins-wavefin commented 7 months ago

Having the same issue on 7.6.13. Any ideas or temporary fixes?

burakukula commented 3 months ago

Hey there! Any chance that this issue will be moving forward? Or maybe you would have some recommendation on how to work around it? Thanks!