Search code examples
angularreactjsstorybook

common storybook for angular and react

There are react and angular projets in my team and I would like to integrate storybook in both of them. I would like to know if there is a way to build a common storybook that could be imported in both react and angular projects ? the only thing that comes to my mind would be the use of WebComponents, but that would make React lose its interest.

Has anybody some kind of experience ?

(this is a general question, I am asking just for general directions)

Solution

  • The idea with Storybook or any UI components documentation library is to be able to let your components be developed and exist in isolation from rest of the UI sourcecode. That being said, there are a couple of approaches that could be followed here -

    1. Port all your components into a language agnostic component setup using something like Stencil. You could do so using Web Components as well, but using Stencil will be lot shorter and faster development wise. Yes, it would require effort into learning "yet another JS framework" (or not! Did you know that Stencil is just a compiler and you can write it using the tech stack you're already familiar with!). And a substantial testing effort once you port over your components, if you have these apps deployed on production. But the benefits you'd get over a long period of time can justify it in a multi-tech stack environment.

    2. Separate out and place (only) your components from both projects to a components-only project. There are ways for them to co-exist, either as wrapper directives or with third party libraries like ngReact. It might add a certain level of complexity for devs with knowledge of only one of these tech stacks, but certainly a way to do it nonetheless. you can then use Storybook on these half-original, half-wrapped components and it can serve as a single one for all.

    In any case, these good design principles should be followed with your components -

    • Rip out the components from multiple places into a single source of truth.

    • Keep the development agnostic to where the components are being used.

    • If possible, try not to have a multi-stack architecture, at least for your components. Prefer language agnostic libraries / frameworks for components.