Page MenuHomePhabricator

Add storybook to Vector
Closed, ResolvedPublic3 Estimated Story Points

Description

As we start working on desktop improvements and freezing the existing Vector it will be imperative to minimise the risk of UI regressions here by being able to easily toggle between the modes without need to logout/manage config/install extensions. It will also be imperative that we are aware of potentially breaking changes to hooks.

I suggest we add Storybook to Vector to aid with this.

Developer notes

JR set one up while testing
It will need somebody to verify the storybook and its contents are complete, and a code review.

One challenge I hit while working on this was that we'll need to overhaul the directory structure. @Niedzielski
suggested doing this in a separate commit which I think is a good idea (and still remains to be done).

Acceptance criteria

  • A developer can run a storybook locally
  • A storybook is published to docs.wikimedia.org

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 13 2020, 9:46 PM

Change 563307 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Add storybook to Vector

https://gerrit.wikimedia.org/r/563307

Jdlrobson updated the task description. (Show Details)Jan 13 2020, 9:47 PM
Jdlrobson added a subscriber: Niedzielski.

Change 563314 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Storybook: Add search, tabs, menus, portals

https://gerrit.wikimedia.org/r/563314

Change 563568 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Dev: Complete porting of Vector to Mustache

https://gerrit.wikimedia.org/r/563568

ovasileva triaged this task as Medium priority.Jan 14 2020, 11:10 AM

Change 563568 abandoned by Jdlrobson:
Dev: Complete porting of Vector to Mustache

Reason:
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/ /564754 Dev: Complete porting of Vector to Mustache

https://gerrit.wikimedia.org/r/563568

ovasileva set the point value for this task to 3.Jan 15 2020, 5:34 PM
Jdlrobson moved this task from Needs triage to Needs Design on the Vector board.Jan 15 2020, 5:54 PM

Change 565396 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Dev: Include closed body and html tags in getTrail

https://gerrit.wikimedia.org/r/565396

Handover to whoever picks this up - getting https://gerrit.wikimedia.org/r/565142 merged should be first priority.
Then get https://gerrit.wikimedia.org/r/563307 merged to add storybook.

I'd suggest making sure the lingering patches on T240062 are all merged and signed off before powering ahead with the other patch https://gerrit.wikimedia.org/r/c/563314 - that patch will likely need a rebase anyway as its not chained onto the patches in T240062 that it needs.

Change 565396 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Dev: Include closed body and html tags in getTrail

https://gerrit.wikimedia.org/r/565396

phuedx claimed this task.Jan 20 2020, 6:11 PM
MBinder_WMF reassigned this task from phuedx to Jdlrobson.Jan 22 2020, 6:13 PM
MBinder_WMF added subscribers: phuedx, MBinder_WMF.

Assigning based on history and kickoff meeting chat (without @phuedx ). Might be a conversation for happy dev time.

Change 563314 abandoned by Jdlrobson:
Storybook: Add search, tabs, menus, portals

Reason:
Folded into https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/ /563307/22

https://gerrit.wikimedia.org/r/563314

phuedx added a comment.EditedJan 31 2020, 12:17 PM

As I said during my review, we should standardise on quoting styles for the *stories.js* files rather than allow a free-for-all. Storybook stories are no different from the other parts of the codebase.

IMO we should aim to stay as close to MediaWiki's coding standards as possible to avoid unnecessary cognitive burden while altering the codebase. Note well that with ESLint's parser options set to { "sourceType": "module", "ecmaVersion": 6 }, backticks are allowed when interpolation is used, i.e.

[0]
// 👍
const foo = `bar ${baz}`;

// 👎
const foo = `bar baz`;

/cc @Jdrewniak @nray @Niedzielski

phuedx added a subscriber: nray.Jan 31 2020, 12:18 PM

Change 563307 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Add storybook to Vector

https://gerrit.wikimedia.org/r/563307

Change 569390 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[integration/config@master] Publish npm run doc for Vector

https://gerrit.wikimedia.org/r/569390

Change 569390 merged by jenkins-bot:
[integration/config@master] Publish npm run doc for Vector

https://gerrit.wikimedia.org/r/569390

Mentioned in SAL (#wikimedia-releng) [2020-02-03T16:28:55Z] <James_F> Zuul: Publish npm run doc for Vector T242674

Enabled, but this is now failing:

00:00:49.742 > jsduck && npm run build-storybook
00:00:49.742 
00:00:49.996 Warning: /src/collapsibleTabs.js File not found
00:00:49.996 Error: You should specify some input files, otherwise there's nothing I can do :(
00:00:50.077 npm ERR! code ELIFECYCLE
00:00:50.077 npm ERR! errno 1
00:00:50.078 npm ERR! @ doc: `jsduck && npm run build-storybook`
00:00:50.078 npm ERR! Exit status 1
00:00:50.078 npm ERR! 
00:00:50.079 npm ERR! Failed at the @ doc script.
00:00:50.079 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Want me to revert, or is there a quick fix?

Change 569576 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/Vector@master] [fix] [jsduck] Update config JavaScript path

https://gerrit.wikimedia.org/r/569576

Change 569576 merged by jenkins-bot:
[mediawiki/skins/Vector@master] [fix] [jsduck] Update config JavaScript path

https://gerrit.wikimedia.org/r/569576

Change 569588 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[integration/docroot@master] doc: Add link to Vector skin documentation

https://gerrit.wikimedia.org/r/569588

Change 569588 merged by jenkins-bot:
[integration/docroot@master] doc: Add link to Vector skin documentation

https://gerrit.wikimedia.org/r/569588

Jdlrobson reassigned this task from Jdlrobson to Volker_E.Feb 4 2020, 9:17 AM

Want to take a look and sign this off?

This is awesome. Minor question, should we add the good article/page protected icons to storybook for the Skin/Vector stories?

Volker_E closed this task as Resolved.Feb 6 2020, 8:57 PM
Volker_E updated the task description. (Show Details)

This is awesome. Minor question, should we add the good article/page protected icons to storybook for the Skin/Vector stories?

I forgot that on docs.wikimedia.org //upload.wikimedia.org is blocked so these are only showing up on the dev version. So we'll need to replace the upload.wikimedia.org with local downloads of the files via the dev-script or included in the repo. Do you want to have a go to test out your storybookfoo? Storybook allows a static directory to be passed as a parameter.