golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

[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
This commit is contained in:
Jan Drewniak 2020-09-24 14:15:37 +02:00
parent 57e069ba81
commit 6907c81a15
6 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -43,5 +43,6 @@ Thumbs.db
# storybook # storybook
/.storybook/resolve-less-imports/ /.storybook/resolve-less-imports/
/.storybook/resolve-imports/
/.storybook/integration.less /.storybook/integration.less
.vscode .vscode

7
.storybook/webpack.config.js
View File

@ -24,11 +24,10 @@ module.exports = {
}, },
{ {
test: /\.(gif|png|jpe?g|svg)$/i, test: /\.(gif|png|jpe?g|svg)$/i,
issuer: /\.less$/, loader: 'file-loader',
loader: 'file-loader',
options: { options: {
paths: [ paths: [
path.resolve( __dirname, 'components/images' ) path.resolve( __dirname, './resolve-imports' )
] ]
} }
}, },
@ -44,7 +43,7 @@ module.exports = {
options: { options: {
relativeUrls: false, relativeUrls: false,
paths: [ paths: [
path.resolve( __dirname, 'resolve-less-imports' ) path.resolve( __dirname, 'resolve-imports' )
] ]
} }
} ] } ]

24
dev-scripts/setup-storybook.sh
View File

@ -2,19 +2,19 @@
set -euo pipefail set -euo pipefail
IFS=$'\n\t' IFS=$'\n\t'
mkdir -p .storybook/resolve-less-imports/mediawiki.ui mkdir -p .storybook/resolve-imports/mediawiki.ui
mkdir -p docs/ui/assets/ mkdir -p .storybook/resolve-imports/assets
rm -f .storybook/resolve-less-imports/mediawiki.skin.variables.less rm -f .storybook/resolve-imports/mediawiki.skin.variables.less
cp resources/mediawiki.less/mediawiki.skin.variables.less .storybook/resolve-less-imports/ cp resources/mediawiki.less/mediawiki.skin.variables.less .storybook/resolve-imports/
# Fetch resources via curl, `-sSL` silently, Show only errors, Location header and also with a 3XX response code. # Fetch resources via curl, `-sSL` silently, Show only errors, Location header and also with a 3XX response code.
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 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
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 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-less-imports/mediawiki.mixins.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-less-imports/mediawiki.ui/variables.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-less-imports/mediawiki.mixins.rotation.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-less-imports/mediawiki.mixins.animation.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 "docs/ui/assets/wordmark.svg" 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 "docs/ui/assets/icon.png" 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 "docs/ui/assets/tagline.svg" curl -sS "https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-tagline-en.svg" -o ".storybook/resolve-imports/assets/tagline.svg"

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"scripts": { "scripts": {
"start": "dev-scripts/setup-storybook.sh && start-storybook --quiet -p 6006 -s docs/ui", "start": "dev-scripts/setup-storybook.sh && start-storybook --quiet -p 6006",
"test": "npm -s run lint && tsc && npm -s run doc", "test": "npm -s run lint && tsc && npm -s run doc",
"test:size": "node ./tests/resource-loader-bundlesize.js", "test:size": "node ./tests/resource-loader-bundlesize.js",
"lint": "npm -s run lint:js && npm -s run lint:styles && npm -s run lint:i18n", "lint": "npm -s run lint:js && npm -s run lint:styles && npm -s run lint:i18n",

9
stories/Logo.stories.data.js
View File

@ -4,12 +4,15 @@
*/ */
import logoTemplate from '!!raw-loader!../includes/templates/Logo.mustache'; import logoTemplate from '!!raw-loader!../includes/templates/Logo.mustache';
import wordmarkSrc from '../.storybook/resolve-imports/assets/wordmark.svg';
import tagelineScr from '../.storybook/resolve-imports/assets/tagline.svg';
import iconSrc from '../.storybook/resolve-imports/assets/icon.png';
/** /**
* @type {LogoOptions} * @type {LogoOptions}
*/ */
const wordmark = { const wordmark = {
src: '/assets/wordmark.svg', src: wordmarkSrc,
width: 116, width: 116,
height: 18 height: 18
}; };
@ -18,7 +21,7 @@ const wordmark = {
* @type {LogoOptions} * @type {LogoOptions}
*/ */
const tagline = { const tagline = {
src: '/assets/tagline.svg', src: tagelineScr,
width: 117, width: 117,
height: 13 height: 13
}; };
@ -26,7 +29,7 @@ const tagline = {
/** /**
* @type {string} * @type {string}
*/ */
const icon = '/assets/icon.png'; const icon = iconSrc;
/** /**
* @type {LogoTemplateData} * @type {LogoTemplateData}

10
stories/rawLoader.d.ts vendored
View File

@ -2,3 +2,13 @@ declare module "!!raw-loader!*" {
const src: string; const src: string;
export default src; export default src;
} }
declare module "*.svg" {
const src: string;
export default src;
}
declare module "*.png" {
const src: string;
export default src;
}