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

21 lines
2.1 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'
[Storybook] Fix PNG/SVG asset resolution. Fixes the missing images in the Logo story. The current method of downloading the images into docs/ui/assets and treating them as static assets (with the start-storybook -s option) could be problematic if that directory is deleted or "cleaned" before the storybook build. Instead, the images are now downloaded into ./storybook/resolve-imports and imported explicitly in the code in Logo.stories.data.js. * ./storybook/resolve-less-imports renamed to resolve-imports * .gitignore is updated to reflect that * Webpack config is updated with the `resolve-imports` path * static option (-s) is removed from npm start script * Images are explicitly imported in Logo.stories.data.js * Type definitions are added for .svg and .png files Change-Id: I242d229242c86a5784d6d4611d0b9c7049712dac
2020-09-24 12:15:37 +00:00
mkdir -p .storybook/resolve-imports/mediawiki.ui
mkdir -p .storybook/resolve-imports/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
[Storybook] Fix PNG/SVG asset resolution. Fixes the missing images in the Logo story. The current method of downloading the images into docs/ui/assets and treating them as static assets (with the start-storybook -s option) could be problematic if that directory is deleted or "cleaned" before the storybook build. Instead, the images are now downloaded into ./storybook/resolve-imports and imported explicitly in the code in Logo.stories.data.js. * ./storybook/resolve-less-imports renamed to resolve-imports * .gitignore is updated to reflect that * Webpack config is updated with the `resolve-imports` path * static option (-s) is removed from npm start script * Images are explicitly imported in Logo.stories.data.js * Type definitions are added for .svg and .png files Change-Id: I242d229242c86a5784d6d4611d0b9c7049712dac
2020-09-24 12:15:37 +00:00
rm -f .storybook/resolve-imports/mediawiki.skin.variables.less
cp resources/mediawiki.less/mediawiki.skin.variables.less .storybook/resolve-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
docs: Expand on curl options in Storybook setup script Change-Id: I7bba4773d27e17e42f2670242f226517e24b33d8
2020-09-17 10:06:20 +00:00
# Fetch resources via curl, `-sSL` silently, Show only errors, Location header and also with a 3XX response code.
[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
[Storybook] Fix PNG/SVG asset resolution. Fixes the missing images in the Logo story. The current method of downloading the images into docs/ui/assets and treating them as static assets (with the start-storybook -s option) could be problematic if that directory is deleted or "cleaned" before the storybook build. Instead, the images are now downloaded into ./storybook/resolve-imports and imported explicitly in the code in Logo.stories.data.js. * ./storybook/resolve-less-imports renamed to resolve-imports * .gitignore is updated to reflect that * Webpack config is updated with the `resolve-imports` path * static option (-s) is removed from npm start script * Images are explicitly imported in Logo.stories.data.js * Type definitions are added for .svg and .png files Change-Id: I242d229242c86a5784d6d4611d0b9c7049712dac
2020-09-24 12:15:37 +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-imports/mediawiki.skin.defaults.less
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-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-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-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-imports/mediawiki.mixins.animation.less
curl -sS "https://en.m.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg" -o ".storybook/resolve-imports/assets/wordmark.svg"
curl -sS "https://en.m.wikipedia.org/static/images/mobile/copyright/wikipedia.png" -o ".storybook/resolve-imports/assets/icon.png"
curl -sS "https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-tagline-en.svg" -o ".storybook/resolve-imports/assets/tagline.svg"
Reference in a new issue Copy permalink