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

[Feature]: Storybook Support #1974

Closed
edhgoose opened this issue Apr 1, 2024 · 4 comments
Closed

[Feature]: Storybook Support #1974

edhgoose opened this issue Apr 1, 2024 · 4 comments
Assignees

Comments

@edhgoose
Copy link

edhgoose commented Apr 1, 2024

What problem does this feature solve?

We would like an "easy" way to get started with Storybook.

We used to do everything in webpack but due to performance issues we moved our Storybook config from Webpack to Vite.

Since discovering rsbuild, we've seamlessly migrated all of our webpack configuration - it was a genuine joy to do!

But we've struggled with how to remove the Vite config for Storybook. Trying to understand the rspack config for our rsbuild has helped (using rsbuild inspect), but we've not been able to completely get it so far.

A plugin for Storybook to support rsbuild would be awesome.

What does the proposed API look like?

I think the perfect solution for us would look something like this (this is a Storybook main.ts example

const config: StorybookConfig = {
    framework: {
        name: "@storybook/react-rsbuild",
        options: {
            // Our Storybook configuration isn't in the same folder as our rsbuild. We currently tell rsbuild where to look
            // for a config file.
            rsbuildConfigFile: "../path/to/rsbuild.config.ts"
        },
    },
    rsbuildFinal: (config, { configType }) => {
        // Some way of modifying the rsbuild if necessary
    },
};

export default config;

It would be inspired by the work going on for rspack, e.g.:

@chenjiahan
Copy link
Member

We have implemented a storybook framework for Modern.js based on Rsbuild and it worked very well, see: https://modernjs.dev/en/guides/advanced-features/using-storybook.html (Modern.js is a web framework based on Rsbuild)

It would be great if we could implement a storybook framework for Rsbuild users, we will include this in our future plans. 😄

@chenjiahan
Copy link
Member

@fi3ework is working on this, we will share here when we make progress 😄

@fi3ework
Copy link
Member

@edhgoose
We just released Rsbuild builder for Storybook in https://github.com/rspack-contrib/storybook-rsbuild. You could give it a try now. Feel free to feed back if you need any help or encounter any issue!

@edhgoose
Copy link
Author

edhgoose commented Jun 9, 2024

Hey @fi3ework @chenjiahan - thank you so much. I've started playing with it, but unfortunately hit an issue:

rspack-contrib/storybook-rsbuild#21

I'm not sure how best to debug it, I feel a bit lost - if there's anything I can provide you to figure out the issue I gladly will.

Thanks!

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

3 participants