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

21 lines
2.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'
[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.
Language button is quiet with focus, active and hover states * Add mediawiki ui button styles to Vector and convert language button to a quiet button * Restore the arrow for language button with ULS * Vertically align button to first line of header * Add a storybook entry for LanguageButton Additional changes: * Fix issues revealed by storybook - menu dropdown should reset generic typography rule for `ul` tags * Allow quotes usage in storybook without disable rule Bug: T268241 Change-Id: I483350084fb46a51c50af6aab78c62db6d02df89
2021-02-08 23:10:21 +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|mediawiki.ui.icon|mediawiki.ui.button" -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