WIP: feat: add storybook with @storybook/builder-vite #1785

dpschen · 2022-04-09T14:59:01Z

dpschen commented

2022-04-09 14:59:01 +00:00

This helps building components that work in isolation.
As the current example shows we can use it for components but could also use it later for full pages.
This would help us build pages that are only prop & event driven.

Having storybook could help us as well to better understand where we rely on global Bulma styles.

I added this as a proposol. That's why it's not finished at all. E.g. we could add:

deployment
our components ;)
integrate some tests
...

What do you think?

This helps building components that work in isolation. As the current example shows we can use it for components but could also use it later for full pages. This would help us build pages that are only prop & event driven. Having storybook could help us as well to better understand where we rely on global Bulma styles. I added this as a proposol. That's why it's not finished at all. E.g. we could add: - deployment - our components ;) - integrate some tests - ... ---- What do you think?

dpschen added the

kind/feature

label 2022-04-09 14:59:01 +00:00

konrad was assigned by dpschen

2022-04-09 14:59:01 +00:00

dpschen added 1 commit 2022-04-09 14:59:02 +00:00

continuous-integration/drone/pr Build is failing Details

698247adeb

feat: add storybook with @storybook/builder-vite

This helps building components that work in isolation.
As the current example shows we can use it for components but could also use it later for full pages.
This would help us build pages that are only prop & event driven.

Having storybook could help us as well to better understand where we rely on global Bulma styles.

dpschen added 1 commit 2022-04-09 17:15:54 +00:00

continuous-integration/drone/pr Build is passing Details

fd308c25cf

chore: lint

frederick commented

2022-04-09 17:20:16 +00:00

Hi dpschen!

Thank you for creating a PR!

I've deployed the changes of this PR on a preview environment under this URL: https://1785-feature-storybook--vikunja-frontend-preview.netlify.app

You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.

Have a nice day!

Beep boop, I'm a bot.

Hi dpschen! Thank you for creating a PR! I've deployed the changes of this PR on a preview environment under this URL: https://1785-feature-storybook--vikunja-frontend-preview.netlify.app You can use this url to view the changes live and test them out. You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/. Have a nice day! > Beep boop, I'm a bot.

dpschen commented

2022-04-23 11:31:27 +00:00

@konrad:

What do you think of using storybook?

@konrad: What do you think of using storybook?

konrad commented

2022-04-25 17:37:55 +00:00

@dpschen I think it's a very interesting thing from looking at it, but didn't had the time yet to properly check it out and test it.

👍 1

dpschen commented

2022-07-10 11:40:44 +00:00

Maybe an update about this:

I've been working with storbook for years at work, but I always had some problems with the setup. In the beginning it was issues with the webpack configuration, that was a bit solved by a very well written plugin to vue-cli. Now I use storybook-builder-vite here in order to use almost the same vite config (storybook needs some small differences).

I keep running in some issues with the storybook typing. This is realated to the fact that storybook is based on react and leaks some typings.

With storybook 7 these issues should be gone. They are working on separating the build system from the core (so that you can chose between webpack and vite and it's not just some plugin).

So maybe we should wait for storybook 7 to mature. As an alternative there is now https://histoire.dev written by Akryum (Guillaume Chau, vue core-team member and behind vue-devtools) which is based on vite from the start.

Maybe an update about this: I've been working with storbook for years at work, but I always had some problems with the setup. In the beginning it was issues with the webpack configuration, that was a bit solved by a very well written plugin to vue-cli. Now I use storybook-builder-vite here in order to use almost the same vite config (storybook needs some small differences). I keep running in some issues with the storybook typing. This is realated to the fact that storybook is based on react and leaks some typings. With storybook 7 these issues should be gone. They are working on separating the build system from the core (so that you can chose between webpack and vite and it's not just some plugin). So maybe we should wait for storybook 7 to mature. As an alternative there is now https://histoire.dev written by Akryum (Guillaume Chau, vue core-team member and behind vue-devtools) which is based on vite from the start.

👍 1

konrad commented

2023-10-22 17:42:17 +00:00

Wasn't this replaced by histoire?

Please rebase and reopen if you think this is still relevant.

Wasn't this replaced by histoire? Please rebase and reopen if you think this is still relevant.

konrad closed this pull request

2023-10-22 17:42:22 +00:00

This repo is archived. You cannot comment on pull requests.

No reviewers