element-hq / element-hq/element-web

Add Storybook support for Element

Open
#19,135 4 comments 1 reaction 0 assignees View on GitHub
A-Developer-Experience T-Task
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

To help the discovery and development of UI components we want to use [Storybook](https://storybook.js.org/). A developer would be able to create stories alongside components in `matrix-react-sdk` or `element-web` to preview certain components and understand how they behave when provided with a different set of properties

# Setup for element-web

The project is currently split across `element-web`, `matrix-react-sdk` and `matrix-js-sdk`.

All the information to compile the project, load the CSS are located in `element-web` whereas the components live in the React SDK.

Ideally we would want the storybook configuration to live in `element-web` so that it can piggy back our webpack configs. I have experimented with that setup and faced an issue that I raised on the main repo, storybookjs/storybook#15694

We can alternatively have the entire Storybook setup living in the React SDK. This means that we will need to mimic the webpack configuration that `element-web` has. This could lead to a disjointed experience when components are loaded in a Storybook context or inside `element-web`.
This problem could be mitigated by making those limitations clear to developers so that they make sure to test their code in both places

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.