[FEATURE] - Request to add Storybook example with Providers

[AdamAnSubtractM]

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.