wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-12 09:21:11 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/dev-scripts/setup-storybook.sh

20 lines
2 KiB
Bash
Raw Normal View History

Add storybook to Vector - 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
2020-01-09 22:11:00 +00:00
#!/usr/bin/env bash
set -euo pipefail
IFS=$'\n\t'
mkdir -p .storybook/resolve-less-imports/mediawiki.ui
[modern] A new version of Vector with a new logo 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
2020-03-09 05:51:00 +00:00
mkdir -p docs/ui/assets/
Add storybook to Vector - 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
2020-01-09 22:11:00 +00:00
Fix the storybook instance * Use `cp` over `ln` - the node resolver appears to get tripped up by linked files. * Fix a story referencing the wrong class Follow up to I47da3046678117d5214354d1efe635f32f307dad Bug: T263064 Change-Id: I80cb33ad70f9e6757dbe7f71b00539bec28abca9
2020-09-16 20:28:25 +00:00
rm -f .storybook/resolve-less-imports/mediawiki.skin.variables.less
cp resources/mediawiki.less/mediawiki.skin.variables.less .storybook/resolve-less-imports/
Implement mediawiki.skin.variables.less for Vector For now, only define: - @font-family-sans - @border-radius-base Bug: T112747 Depends-On: Icf86c930a3b5524254bb549624737d3b9dccb032 Change-Id: I47da3046678117d5214354d1efe635f32f307dad
2018-05-20 18:58:47 +00:00
[dev][Storybook] move to start script; report errors not status 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
2020-05-12 16:51:49 +00:00
curl -sS "https://en.wikipedia.org/w/load.php?only=styles&skin=vector&debug=true&modules=ext.echo.styles.badge|ext.uls.pt|wikibase.client.init|mediawiki.skinning.interface" -o .storybook/integration.less
Implement mediawiki.skin.variables.less for Vector For now, only define: - @font-family-sans - @border-radius-base Bug: T112747 Depends-On: Icf86c930a3b5524254bb549624737d3b9dccb032 Change-Id: I47da3046678117d5214354d1efe635f32f307dad
2018-05-20 18:58:47 +00:00
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.skin.defaults.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.skin.defaults.less
[dev][Storybook] move to start script; report errors not status 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
2020-05-12 16:51:49 +00:00
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.mixins.less
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.ui/variables.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.ui/variables.less
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.rotation.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.mixins.rotation.less
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.animation.less?format=TEXT" | base64 --decode > .storybook/resolve-less-imports/mediawiki.mixins.animation.less
curl -sS "https://en.m.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg" -o "docs/ui/assets/wordmark.svg"
curl -sS "https://en.m.wikipedia.org/static/images/mobile/copyright/wikipedia.png" -o "docs/ui/assets/icon.png"
curl -sS "https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-tagline-en.svg" -o "docs/ui/assets/tagline.svg"
Reference in a new issue Copy permalink