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

Open
dpschen wants to merge 2 commits from dpschen/frontend:feature/storybook into main
Collaborator

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 6 months ago
konrad was assigned by dpschen 6 months ago
dpschen added 1 commit 6 months ago
698247adeb
feat: add storybook with @storybook/builder-vite
dpschen added 1 commit 6 months ago
fd308c25cf
chore: lint
Collaborator

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.
Poster
Collaborator

@konrad:

What do you think of using storybook?

@konrad: What do you think of using storybook?
Owner

@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.

@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.
Poster
Collaborator

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.
All checks were successful
continuous-integration/drone/pr Build is passing
Required
Details
This pull request has changes conflicting with the target branch.
package.json
Sign in to join this conversation.
No reviewers
No Milestone
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: vikunja/frontend#1785
Loading…
There is no content yet.