Page MenuHomePhabricator

Add Storybook to Vue.js search
Closed, ResolvedPublic


Add a Storybook configuration to the new Vue.js search repo. See prototype example.
Are there specific Storybook 'knobs' that would be supportive and should be considered?


Acceptance criteria

  • npm start launches the Storybook development workflow.
  • Changing Vue styles or @imports, templates, scripts or imports, revises the targeted page content live via HMR.
  • Documentation on usage is added to the readme.
  • The following addons are considered: a11y, actions, backgrounds, knobs, links, storysource, viewport.
  • v6 is used since it's currently in beta has API breaking changes from v5.
  • Consider adding the docs directory to package.json.

Event Timeline

I think the knobs are on a per component basis. For example, an icon component might expose a knob for different sizes and a news-card component might expose knobs for changing the headline, subtitle, image, and excerpt.

Niedzielski added a subscriber: ovasileva.

@ovasileva, I'm adding this to the Web board for tracking and visibility purposes. Anri is working on this task as part of ramping up and #Vue.js-Search.

ovasileva triaged this task as Medium priority.Jun 8 2020, 9:45 AM
Jdlrobson subscribed.

Documentation generation for distribution on is build by running

Note this doesn't happen automatically. You'll need to configure the repo

Niedzielski updated the task description. (Show Details)

Documentation generation for distribution on is build by running npm run docs:ui which is called by npm docs and tested on commit.

Moved to T255678.


Screen Shot 2020-07-08 at 2.31.35 PM.png (1×2 px, 151 KB)

@Niedzielski was using directories in package.json considered and rejected? If not can it be removed from the a/c ?

@Jdlrobson, thanks for catching. I've just added the directories and main entries in

Jdlrobson updated the task description. (Show Details)