Storybook seems to be our primary stackless development workflow. Move
the `storybook` script to `start` to support the standard `npm start`
command expected in every NPM repo.
Debugging Storybook tooling is the rare case that informational messages
(perhaps even more verbose than default) are wanted. Feature development
is the common workflow that should be optimized for.
Storybook's design philosophy seems to favor incredibly verbose output
by default, both for the CLI and the [browser console]. This is at odds
with Unix's rule of silence, sometimes expressed as "silence is golden."
That is, only report warnings and errors unless told otherwise.
This patch reduces the verbosity of the Storybook [CLIs] as able and its
setup script:
- Only report warnings and errors while building.
- Suppress build informational output when launching.
- Only report curl errors, not progress.
[browser console]: https://github.com/storybookjs/storybook/issues/8461
[CLIs]: https://storybook.js.org/docs/configurations/cli-options/
Change-Id: Ie38ae14e304f7f88f445c0c0fb3f2fbba49d134a
Changes to support feature:
* ResourceLoaderSkinModule logo features are dropped
* New layout provided given the fork in layout between legacy and new.
* Legacy sidebar styles now pulled out
* breakpoint styles are not carried over from legacy Vector
The new Vector layout for now has one breakpoint.
Changes to storybook:
* The storybook script now pulls down image assets so that the logos can
be shown in storybook. The script is adjusted to make use of a static folder to
serve these images.
Note:
* The legacy mode is not touched as part of this patchset.
* The personal menu is unaffected by this patch and is out of scope.
* The alignment issue is noted, but will be solved at a later date.
* Changes to portal are out of scope.
* Adding storybook for modern descoped, given its not possible to load
both legacy layout and modern layout inside a storybook at current time.
Sample config:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];
Coauthor: Aron Manning
Bug: T246170
Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
- Update package.json with the new dependencies.
- A script storybook.sh pulls down CSS and LESS imports from external
dependencies. This copies the approach taken in Popups and MobileFrontend.
- Icons from external repos are maintained within the repo in SVG-only form.
Using load.php modules is also possible, but will pull down other unnecessary icons
and break if any of these modules are changed. Decided that we should manually maintain
these for the time being given there are only 3 icons.
- Several LESS files now import the variables file. I think it's useful for stories
to only import the CSS they use as this encourages us to modularise our CSS. Before these
imports were not necessary as they inherit imports from index.less. This will have no impact
on the bundle size as the LESS compiler silently discards duplicate imports
- stories/utils.js provides a useful placeholder function for generalising our hook entry
points.
Bug: T242674
Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
Stephen Niedzielski
jdlrobson
Reedy
