Add Storybook to Vue.js search
Closed, ResolvedPublic
Actions

Description

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?

Patches

https://github.com/wikimedia/wvui/pull/15

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.

Related Objects
Search...

Status	Assigned	Task
Open	None	T49145 Formally deprecate jQuery UI after we've stopped using jQuery UI in extensions and core
Open	None	T100270 Replace use of jQuery UI and MW UI with OOUI across all Wikimedia-deployed extensions and core
Open	None	T85394 Use OOUI suggestions/autocompletion components only (instead of jquery.suggestions, jquery.ui.autocomplete)
Open	None	T125725 [epic] Update autocomplete search box with metadata and remove and delete the old searchSuggest system
Resolved	ovasileva	T244392 [GOAL] Deploy the new Vue.js search experience
Resolved	Jdlrobson	T249298 [Epic] Establish initial project scaffolding for Vue.js search iterations
Resolved	Jdlrobson	T253348 Add Storybook to Vue.js search

Event Timeline

• Niedzielski created this task.May 21 2020, 9:16 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 21 2020, 9:16 PM

• Niedzielski moved this task from Backlog to Ready on the Design-Systems-team-20200324-20220422 (Vue.js Search Experience (Vector modern)) board.May 21 2020, 9:16 PM

Volker_E updated the task description. (Show Details)May 21 2020, 9:25 PM

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 updated the task description. (Show Details)May 21 2020, 9:49 PM

• Niedzielski updated the task description. (Show Details)

• Niedzielski mentioned this in T251968: [Spike] Prototype a single component for new Vue.js search project.May 31 2020, 3:54 AM

Anribolon claimed this task.Jun 5 2020, 10:02 AM

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

• Niedzielski moved this task from Needs Analysis to Doing on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q4) board.Jun 6 2020, 3:46 AM

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

• Niedzielski moved this task from Ready to On Web Board on the Design-Systems-team-20200324-20220422 (Vue.js Search Experience (Vector modern)) board.Jun 8 2020, 6:05 PM

Documentation generation for distribution on doc.wikimedia.org is build by running

Note this doesn't happen automatically. You'll need to configure the repo https://gerrit.wikimedia.org/r/#/admin/projects/integration/config

Anribolon updated the task description. (Show Details)Jun 16 2020, 1:58 PM

• Niedzielski removed Anribolon as the assignee of this task.Jun 17 2020, 1:57 PM

• Niedzielski moved this task from Doing to Ready for Signoff on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q4) board.

• Niedzielski added a subscriber: Anribolon.

• Niedzielski moved this task from Ready for Signoff to Needs More Work on the Web-Team-Backlog-Archived (Kanbanana-2019-20-Q4) board.Jun 17 2020, 2:00 PM

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

Moved to T255678.

@holger.knust, would you mind signing this one off too?

• Niedzielski removed • holger.knust as the assignee of this task.Jun 25 2020, 1:22 PM

Jdlrobson claimed this task.Jun 25 2020, 5:05 PM

LGTM

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 https://github.com/wikimedia/wvui/pull/44.

MBinder_WMF edited projects, added Web-Team-Backlog-Archived (Kanbanana-FY-2020-21); removed Web-Team-Backlog-Archived (Kanbanana-2019-20-Q4).Jul 9 2020, 5:13 PM

MBinder_WMF moved this task from Needs Analysis to Ready for Signoff on the Web-Team-Backlog-Archived (Kanbanana-FY-2020-21) board.Jul 9 2020, 5:13 PM

Jdlrobson closed this task as Resolved.Jul 9 2020, 5:47 PM

Jdlrobson updated the task description. (Show Details)

	F31921337: Screen Shot 2020-07-08 at 2.31.35 PM.png
	Jul 8 2020, 9:33 PM

Add Storybook to Vue.js searchClosed, ResolvedPublicActions