You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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 adecorators
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 theMultiSiteProvider
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 thebuildUrl
function from theuseMultiSite()
hook.Describe alternatives you've considered
Additional context
In
.storybook/main.ts
you can add awebpackFinal
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.The text was updated successfully, but these errors were encountered: