Improved storybook integration

[musangowope]

Currently, the way we integrate storybook with our stencil component library isn't the greatest. We want to implement storybook in a better way with our stencil components.

• Follow this [tutorial](https://ionicframework.com/blog/how-to-use-storybook-with-stencil/) and implement storybook with stencil in a proof of concept repo
• Apply knowledge gained from tutorial to update LA web components storybook integration

[musangowope]

I have made sample repo with react and storybook integration https://github.com/musangowope/poc-stencil-component-library

[musangowope]

NX Dev

This is monorepo tool used to house multiple technologies under repo and focuses on integrations and workflows between technologies. Recommended by ionic team

Main advantage:

Great integrations and workflows between stencil components and react component generation and stencil components to storybook generation

Unknowns:

• NPM publishing. Find elegant integration for this. Lerna was mentioned in the docs for this. Will explore this https://sonigaurav119.medium.com/how-i-use-lerna-with-nx-to-automate-the-versioning-1fada7f7f64f

Doing some experimentation on https://github.com/musangowope/poc-stencil-component-library

Points of reference: https://ionicframework.com/blog/building-react-and-angular-component-libraries-with-stencil-and-nx/ Getting started building a react and angular library from stencil components with nx

Adding storybook https://ionicframework.com/blog/how-to-use-storybook-with-stencil/

Just found this now, its a more integrated approach https://www.youtube.com/watch?v=sFpqyjT7u4s Storybook plugin integration