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

24 lines
2.4 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.
[Storybook] Add Header component * Moves screen variables relating to Header to Header * Adds a Header storybook entry * Moves data-logo from Logo template to Header.mustache * Updates UserLinks to use USER_LINK_PARTIALS * Renames confusing SearchBox story names * Updates package.json to use a static folder. * Use mediawiki.org for sourcing mw-ui-button and mw-ui-icon styles since deploys there come earlier * Removes usages of ID selectors Change-Id: I0e158fa7e62c56a50cfff497d75f0808effd1eed
2021-09-13 21:19:58 +00:00
curl -sS "https://www.mediawiki.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"
Improve readability of anon user menu for screenreaders Bug: T288293 Change-Id: I10ca58aa492447f179c0ce12eabc0cd1ce4e9d9b
2021-08-25 20:16:33 +00:00
# Add less variable support
echo "@msg-parentheses-start: '(';" >> .storybook/resolve-imports/mediawiki.skin.defaults.less
echo "@msg-parentheses-end: ')';" >> .storybook/resolve-imports/mediawiki.skin.defaults.less
Reference in a new issue Copy permalink