Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature(website): storybook docusaurus integration #7648

Open
wants to merge 11 commits into
base: main
Choose a base branch
from

Conversation

axel7083
Copy link
Contributor

What does this PR do?

First draft of the Storybook integration this pull request contains the following

A Docusaurus plugin

This plugin, which is located in website/storybook.js is responsible of generating the sidebar and populate the docusaurus build folder with the storybook sources.

A react page

Once the plugin has generated a sidebar under the docusaurus format, a custom react page will use it to create a page located at /storybook.

Screenshot / video of UI

TODO

What issues does this PR fix or reference?

Fixes #7438

How to test this PR?

  • Tests are covering the bug fix or the new feature

website/storybook.js Outdated Show resolved Hide resolved
@axel7083 axel7083 force-pushed the feature/storybook-docusaurus-integration-v2 branch from 0f675a4 to 1cea817 Compare June 14, 2024 12:16
@axel7083
Copy link
Contributor Author

Here is a demo https://6672bf678132600ac54716c3--podman-desktop-pr.netlify.app/storybook?id=example-button--docs

ℹ️ Special note

The sidebar is very basic on purpose, I will need to improve it, but as it will probably be a lot of work, it will be made in a follow-up PR

@axel7083 axel7083 marked this pull request as ready for review June 19, 2024 11:25
@axel7083 axel7083 requested review from slemeur, cdrage and a team as code owners June 19, 2024 11:25
@axel7083 axel7083 requested review from dgolovin and removed request for a team June 19, 2024 11:25
@benoitf
Copy link
Collaborator

benoitf commented Jun 19, 2024

it looks like vale is broken

@deboer-tim
Copy link
Collaborator

Odd flashing when toggling between pages, but I assume that can mostly be fixed by having consistent light/dark mode?

Also noticed some Storybook issues like inprogress not quite working, enums, hard to clear values, but those are separate.

@axel7083
Copy link
Contributor Author

Odd flashing when toggling between pages, but I assume that can mostly be fixed by having consistent light/dark mode?

yeah this is very complicated, as the default value of the iframe is set to light mode, and the docusaurus page will send the theme value when the page is rendered. We can probably improve that later, but for now this little flickering is here.

Also noticed some Storybook issues like inprogress not quite working, enums, hard to clear values, but those are separate.

Yeah, because all values are extracted from reflection on svelte component, we can improve those later

Copy link
Collaborator

@benoitf benoitf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you remove the job for storybook as now it's part of the website ?

@axel7083
Copy link
Contributor Author

you remove the job for storybook as now it's part of the website ?

Yes, sorry I forgot to mention it

@axel7083 axel7083 force-pushed the feature/storybook-docusaurus-integration-v2 branch from faef756 to 0cb16dc Compare June 21, 2024 11:03
@axel7083 axel7083 force-pushed the feature/storybook-docusaurus-integration-v2 branch from 0cb16dc to d242524 Compare June 21, 2024 12:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

integrate storybook using the result of the investigation
3 participants