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] - Request to add Storybook example with Providers #1960

Open
AdamAnSubtractM opened this issue Aug 7, 2024 · 0 comments
Open

[FEATURE] - Request to add Storybook example with Providers #1960

AdamAnSubtractM opened this issue Aug 7, 2024 · 0 comments

Comments

@AdamAnSubtractM
Copy link

Is your feature request related to a problem? Please describe.
It would be nice if the team could find sometime to put together a Storybook integration example.

Describe the solution you'd like
The example should include rendering the Storybook component with the PWA Kit providers that wrap the App. This can be done by modifying .storybook/preview.tsx file to include a decorators property (docs here) which will ensure every component with a Story will be rendered with correct context providers. The big roadblock you'll run into seems to be related to the MultiSiteProvider located in '@salesforce/retail-react-app/app/contexts'. When trying to use this to wrap the app, you'll get a webpack loader issue in Storybook. This is problematic for any component that needs to use the buildUrl function from the useMultiSite() hook.

Describe alternatives you've considered

  • We've been creating Dummy/Presentation components specifically for Storybook but its becoming tough to manage. It would be nice to just use one component (which is how Sotrybook is intended to be used).

Additional context
In .storybook/main.ts you can add a webpackFinal property which is an async function that gives you access to the Storybook webpack config. So in theory, you could require a webpack config in this file and spread its properties into the Storybook config if additional loaders need added. See these docs for an example.
Screenshot 2024-08-07 at 1 37 51 PM

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

No branches or pull requests

1 participant