storybookjs / storybook

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

[Feature Request]: rename `stories` folder to `storybook-example` #22151

Open winkerVSbecks opened 1 year ago

winkerVSbecks commented 1 year ago

Is your feature request related to a problem? Please describe

When the user runs storybook init it generates a stories folder with example components and stories. Some users misconstrue with a recommendation for folder structure. That is, they think that our recommendation is to place all stories in the stories folder instead of colocating them with the component file.

Example: https://discord.com/channels/486522875931656193/1096766167479226488/1096766167479226488

Describe the solution you'd like

Rename the stories folder to storybook-example

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

no

Additional context

No response

efrenaragon96 commented 1 year ago

Hello;

If the objective is to place the story file with the component then I think that it is possible to change the file structure of the stories templates but keep the stories name folder because is like a naming standard:

├── stories
│   ├── Button
│   │   ├── index.jsx
│   │   ├── Button.stories.js
│   │   ├── button.css
│   ├── Header
│   │   ├── index.jsx
│   │   ├── Header.stories.js
│   │   ├── header.css
│   ├── Page
│   │   ├── index.jsx
│   │   ├── Page.stories.js
│   │   ├── page.css

What do you think? I can get into this if there aren't any objections. I am more than happy to help. Thanks!!!

winkerVSbecks commented 1 year ago

@efrenaragon96 that seems reasonable to me. wdyt @shilman or @yannbf ?

yannbf commented 1 year ago

I think changing the stories directory is a little tricky because it will make every tutorial ever "wrong", so it seems like a breaking change to me. Changing the internals looks fine to me, I don't know if that would change anything though. If users had the wrong notion before, they would have similar wrong notion then (I think).

The Onboarding project (which mentioned this issue) is going to tackle the creation of stories, so I'd definitely wait to see how that goes before making any changes

IanVS commented 1 year ago

See https://discord.com/channels/486522875931656193/1106615915321229372/1110932638014906478 as an example of the confusion that currently happens:

I probably overlooked a clarification but which structure is preferred for stories. because one of the main slogans from storybook is that the stories live alongside components. yet for example adding it to nextjs created its own stories folder. I personally like just adding the stories to the components folder but intended are the stories to be placed in the stories folder? basically causing you to mirror the component structure but working more like its own test area?

Why do tutorials mention the name of this example folder? Isn't it supposed to just be deleted and the user can put their stories next to their real components?