Storybook: Docs: Gatsby Configuration Examples for Storybook v5

[anthonytranDev]

Is your feature request related to a problem? Please describe.

Awesome Experience :grin: - It was nice when create-react-app could integrate well with StorybookJS in the past.

Painful Experience :disappointed: - However ... as someone who has started using StorybookJS, with Gatsby, there was that presumption that the integration would be as simple as automated integration with create-react-app.

Unfortunately this was not the case, as there existed a few issues, that took me quite a while to figure out. That can be sorted out with some extensions made to a webpack.config.js file.

Which can be used as more or less a starting point for new users to integrate both tools.

Tweaks - such as:

• Entrypoints - resolve.mainFields - this is to with Gatsby's ES6 entrypoint (module) over commonjs (main) entrypoint
• GraphQL Compatibility - plugins - utilising babel-plugin-remove-graphql-queries, gatsby env set to production - this plugin only works in production
• React Compatibility - presets - use @babel/preset-react for JSX and env (instead of staged presets)

Describe the solution you'd like

A starter webpack.config.js, I can stick into my project on the go, to get started with gatsbyjs

Describe alternatives you've considered

Starting a new package @storybook/gatsbyjs

Are you able to assist bring the feature to reality?

webpack.config.js solution - I'm certain that current solution will help make it easier for users of gatsby to get head start in their project.

@storybook/gatsby solution - On the other hand, implementing the alternative of @storybook/gatsby at my current programming level, I won't feel like I'd ready. Unless there is some assistance available

[shilman]

This is awesome. So far the Gatsby folks have done a great job at documenting Storybook usage at https://www.gatsbyjs.org/docs/visual-testing-with-storybook/. I agree we could do a much better job on our side, both with the docs and also with the tool integration on the CLI. I think @Keraito took a look at this at one point, and @igor-dv has done a lot of work with webpack presets (partially documented here https://github.com/storybooks/storybook/pull/5333) that would also be a great candidate for this work...

@Keraito is this something you might be able to work on with @anthonytranDev and me?

[anthonytranDev]

@Keraito would be awesome to work with you on this - if I get the chance that is

Currently have a basic solution that works for Storybook v4. I think at the rate both tools are changing and being updated, it's always nice to have additional hands on the projects. :smiley:

[Keraito]

@shilman @anthonytranDev Definitely would like to help if possible, also because of what @shilman stated that we kind of lack documentation on our side. How could I help?

Edit: Also, feel free to hit me up on Discord any time, same username as on Github.

[anthonytranDev]

@shilman @Keraito
What Help is Requested - The plan here is to create documentation within "Configuration" > "Gatsby Config" (primary the recent Gatsby v2). With the website route - https://storybook.js.org/docs/configurations/gatsby-config/

High Risk - With the current adoption rate of both Gatsby and Storybook it seems most appropriate that we want to get as many eye balls, to users of both tools. As I can imagine they must have issue to why the tools weren't so easily compatible.

On a Personal Note - Honestly due to lack of experience I prefer to ask for direct opinions of the Storybook Team, even ask for members of the Gatsby Team to monitor this. Before, either Github drafting or providing a PR

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Hi @anthonytranDev any interest in picking this up again? @Keraito?

[anthonytranDev]

Hello There, I still am interested in helping with this Issue

I'll be sending @Keraito some of the work I'll be getting up to, before the end of the week!

Unfortunately, it's still premature at this point. However it's a least a start...

[anthonytranDev]

Hi @Keraito, how can I contact you - so that you check whether my Gatsby + Storybook support fits? Tried to find you on the Discord channel, your name didn't match your GitHub name

[Keraito]

@anthonytranDev Discord or Twitter is also fine.

Tried to find you on the Discord channel, your name didn't match your GitHub name

Weird, it's Keraito everywhere, just like on Github.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!