Skip to content

Move to Histoire #2924

@asvae

Description

@asvae

Right now component demos play important role by ensuring high component quality. We use vue-book for that.

The problem with vue-book is that it's not well supported. Fortunately, modern alternative exists, which is pretty much the same functionally. It's called Histoire and it ships with native Vite support.

I reviewed it and I think it's a good fit for us.

This effort is useful for developers as well as @asvae, who'll have a talk on stories.

So here's the plan:

  • Play with Histoire for a couple of weeks, every developer could create a couple of demos and see if it works for them. Here's a couple of things we should probably pay attention to:
    • Is performance all right (Histoire uses iframes by default)?
    • Is it ok to debug?
    • and any other suspicion you may think of.
  • If it doesn't work - we just rollback to vue-book. Dead end 👺.
  • If it works we replace vue-book with Histoire.
    • .demo.vue files could be renamed to .story.vue.
    • Stories should be wrapped in <story> according to Histoire syntax. Stories should work without errors. Use script setup.
    • Remove vue-cli and anything vue-book related from ui package (files, scripts, deps).
    • Add information about histoire to contribution docs.
    • book staging should become histoire staging (modify docker file accordingly)

Next steps

  • Experiment with story/variant docs
  • Add figma link, similarly to storybook
  • Visual and e2e tests
  • Onboarding guide should have detailed readme on how to work with storybook on conceptual level

Metadata

Metadata

Assignees

Labels

d3: mediumNo cheats. Monsters a bit faster.epicFeature that is too big to fit in one issueimplementationRequires implementationstorybookRelates to storybooktestsRefers to testingv4: must haveThis is something really user want to have

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions