Centralized vs. Decentralized Storybook Architecture

[gfellerph]

This discussion should serve as a descision base for the package architecture concerning Storybook.

Setup & configuration

Centralized
There is only one setup to do and maintain and all packages share the exact same setup. A conflicting setup (e.g. one component uses Angular, the other Stencil) might be hard to resolve.

Decentralized
https://storybook.js.org/docs/react/sharing/storybook-composition
Every package maintains it's own Storybook setup. It would be possible to inherit common settings from a centralized location and extend them as needed.

Development

Storybook will be the visual interface we're developing packages on. So in order to see changes to the styles or components, the storybook needs to be started.

Centralized
Two processes in different pacakges need to be started. You start the main storybook and your package's start script and see the changes in the main storybook. To simplify starting the two processes, a script in the root package.json can be written.

Decentralized
All the information needed to start developing is contained inside the package. You start your package's start script which can run the development process and the local storybook.

Tests

Centralized
Unit tests can be run per package, cypress integration tests need to be run on the main Storybook. Filtering test runs needs additional custom functionality (e.g. test only stories related to the styles package).

Decentralized
Unit and cypress tests can be run per package and pnpm makes it easy to run tests only on packages that changed compared to the main branch or other conditions.

Releases

Centralized
Every release of a package will also trigger a deploy of the main storybook. There is only one server running the main storybook.

Decentralized
Every package Storybook lives on it's own server and has it's own deployment process. In order to release a new version of a package, only the package Storybook needs to be updated, the main Storybook will inherit the change without deployment because it just loads a URL.

File location

Centralized
Stories and component code live in a separate package.

packages
  | documentation
  | | button
  | | | tests (cypress)
  | | | stories
  | components
  | | button
  | | | component files
  | | | tests (unit)

Decentralized
Stories, tests, documentation and other files belonging to one component can live together.

components
  | button
  | | component files
  | | tests (cypress & unit)
  | | stories

Feature comparison

Feature	Centralized	Decentralized
Setup	Choose one	Supports other Storybook setups like Angular, React, etc.
Scalability	Vertical	Horizontal
pnpm filtering	no	yes

P.S.: More features or discussion points can be added.

[gfellerph]

After starting to work with the chosen approach, some issues were detected. For example, if we have a component that has multiple implementations (as HTML and as a Web Component), we'd have a duplicate entry in the navigation. It would be easier to have tabs on the same page for components that have more than one implementation. Therefore, #782 was created to switch to a more centralized approach where we have a clean navigation structure.