mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-11-23 15:16:50 +00:00
Publish storybook now we are using more modern node
Breaking change - I was having issues getting the knobs feature to work so it has been removed for the time being. Bug: T236589 Depends-On: I8505d2dad69aefed5f8ed1f599b3ca1b7e79acf5 Change-Id: I42fbf37124477e2d950b4bca15acf77703cd3f5d
This commit is contained in:
jdlrobson
parent
c6cf10ff1f
commit
189b386a13
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,4 +1,5 @@
|
|||
/docs/js/
|
||||
/docs/ui/
|
||||
/.nyc_output/
|
||||
/node_modules/
|
||||
/vendor/
|
||||
|
|
@ -6,3 +7,4 @@
|
|||
/.eslintcache
|
||||
/.storybook/node_modules
|
||||
/.storybook/dist
|
||||
.storybook/mocks/**/*.less
|
||||
|
|
|
|||
|
|
@ -2,17 +2,3 @@
|
|||
|
||||
This "mini-project" contains all the dependencies and code to run a
|
||||
Storybook app (https://storybook.js.org/) for the Popups repository.
|
||||
|
||||
**Quickstart:**
|
||||
`npm install && npm run start` visit http://localhost:6006
|
||||
|
||||
NOTE: This project requires a different version of Node then the main Popups project. NVM is recommended to manage these versions.
|
||||
(`cd .storybook && nvm use`)
|
||||
|
||||
This project is configured to run separately from the main Popups project
|
||||
because it requires at least Node 8.4, whereas Popups (currently)
|
||||
runs Node 6 for consistency with C.I.
|
||||
|
||||
When the Popups Node version is upgraded, the Storybook dependencies
|
||||
can be moved into the main Popups package.json file and the one in
|
||||
this folder can be removed.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import { configure, addDecorator } from '@storybook/html';
|
||||
import { withOptions } from '@storybook/addon-options';
|
||||
import { configure, addDecorator, addParameters } from '@storybook/html';
|
||||
import { withCssResources } from '@storybook/addon-cssresources';
|
||||
import jquery from 'jquery';
|
||||
import mockMediaWiki from '../node_modules/@wikimedia/mw-node-qunit/src/mockMediaWiki.js';
|
||||
|
||||
global.mw = mockMediaWiki();
|
||||
global.$ = jquery;
|
||||
|
||||
/**
|
||||
* Storybook global configuration
|
||||
|
|
@ -21,43 +25,17 @@ addDecorator(
|
|||
);
|
||||
|
||||
// Option defaults:
|
||||
addDecorator(
|
||||
withOptions({
|
||||
/**
|
||||
* name to display in the top left corner
|
||||
* @type {String}
|
||||
*/
|
||||
name: 'Popups',
|
||||
/**
|
||||
* URL for name in top left corner to link to
|
||||
* @type {String}
|
||||
*/
|
||||
url: '#',
|
||||
/**
|
||||
* show story component as full screen
|
||||
* @type {Boolean}
|
||||
*/
|
||||
goFullScreen: false,
|
||||
/**
|
||||
* display panel that shows a list of stories
|
||||
* @type {Boolean}
|
||||
*/
|
||||
showStoriesPanel: true,
|
||||
/**
|
||||
* display panel that shows addon configurations
|
||||
* @type {Boolean}
|
||||
*/
|
||||
showAddonPanel: true,
|
||||
addParameters( {
|
||||
options: {
|
||||
isFullScreen: false,
|
||||
showNav: true,
|
||||
/**
|
||||
* display floating search box to search through stories
|
||||
* @type {Boolean}
|
||||
*/
|
||||
showSearchBox: false,
|
||||
/**
|
||||
* show addon panel as a vertical panel on the right
|
||||
* @type {Boolean}
|
||||
*/
|
||||
addonPanelInRight: true,
|
||||
panelPosition: 'right',
|
||||
isToolshown: true,
|
||||
/**
|
||||
* sorts stories
|
||||
* @type {Boolean}
|
||||
|
|
@ -96,8 +74,8 @@ addDecorator(
|
|||
* @type {Boolean}
|
||||
*/
|
||||
enableShortcuts: true, // true by default
|
||||
})
|
||||
);
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
// automatically import all files ending in *.stories.js
|
||||
|
|
|
|||
35
.storybook/mocks/custom.less
Normal file
35
.storybook/mocks/custom.less
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* These are custom styles designed to supplement styles produced
|
||||
* by ResourceLoad or MediaWiki-core.
|
||||
**/
|
||||
@import './mediawiki.ui/components/icons.less';
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Stopping the fade animation to avoid the animation appearing
|
||||
* whenever a user types into the "knob" fields and the popup rerenders.
|
||||
* NOTE: To test the animation, remove these rules.
|
||||
*/
|
||||
.mwe-popups-fade-in-up {
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.mwe-popups-fade-in-down {
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* show popups by default */
|
||||
.mwe-popups {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Settings icon generated by resourceLoader */
|
||||
.mw-ui-icon-popups-settings:before {
|
||||
background: linear-gradient(transparent,transparent), url('../../resources/ext.popups.images/cog.svg');
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
/**
|
||||
* Mocks out various mediawiki.js functionality to avoid the mw dependency.
|
||||
*/
|
||||
const messages = require( '../../../i18n/en.json');
|
||||
module.exports = {
|
||||
msg: function ( key ) {
|
||||
return messages[ key ];
|
||||
},
|
||||
Title: function( string ) {
|
||||
return {
|
||||
getUrl: function(){ return string }
|
||||
};
|
||||
},
|
||||
html: {
|
||||
escape: function( str ){
|
||||
return str
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/**
|
||||
* This file reaches into mediawiki-core and imports a LESS file
|
||||
* in order to resolve `@import "mediawiki.mixins"` statements in Popups LESS files.
|
||||
*/
|
||||
|
||||
@import '../../../../../resources/src/mediawiki.less/mediawiki.mixins.less';
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/**
|
||||
* This file reaches into mediawiki-core and imports a LESS file in order to
|
||||
* resolve `@import "mediawiki.mixins.animation.less"` statements in Popups LESS files.
|
||||
*/
|
||||
|
||||
@import '../../../../../resources/src/mediawiki.less/mediawiki.mixins.animation.less';
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/**
|
||||
* This file reaches into mediawiki-core and imports a LESS file in order to
|
||||
* resolve `@import "mediawiki.mixins.less"` statements in Popups LESS files.
|
||||
*/
|
||||
|
||||
@import '../../../../../resources/src/mediawiki.less/mediawiki.mixins.less';
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/**
|
||||
* This file reaches into mediawiki-core and imports a LESS file in order to
|
||||
* resolve `@import "mediawiki.ui/variables"` statements in Popups LESS files.
|
||||
*/
|
||||
|
||||
@import '../../../../../../resources/src/mediawiki.less/mediawiki.ui/variables.less';
|
||||
1
.storybook/mocks/mediawiki.ui/README.md
Normal file
1
.storybook/mocks/mediawiki.ui/README.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
Please run "npm run storybook"
|
||||
1
.storybook/mocks/mediawiki.ui/components/README.md
Normal file
1
.storybook/mocks/mediawiki.ui/components/README.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
Please run "npm run storybook"
|
||||
10273
.storybook/package-lock.json
generated
10273
.storybook/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,23 +0,0 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "start-storybook --config-dir=. -p 6006",
|
||||
"build": "build-storybook -c . -o dist"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.1.6",
|
||||
"cssjanus": "1.3.1",
|
||||
"@storybook/addon-cssresources": "4.1.0-alpha.9",
|
||||
"@storybook/addon-knobs": "4.0.9",
|
||||
"@storybook/addon-options": "4.0.12",
|
||||
"@storybook/html": "4.0.9",
|
||||
"@storybook/react": "4.0.12",
|
||||
"babel-loader": "8.0.4",
|
||||
"expose-loader": "0.7.5",
|
||||
"jquery": "3.3.1",
|
||||
"less": "3.8.1",
|
||||
"less-loader": "4.1.0",
|
||||
"svg-inline-loader": "0.8.0",
|
||||
"url-loader": "1.1.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +1,14 @@
|
|||
/**
|
||||
* Browser globals
|
||||
*/
|
||||
import jquery from 'jquery';
|
||||
import '../mocks/js/mockMediaWiki.js';
|
||||
|
||||
/**
|
||||
* CSS
|
||||
* Custom CSS is inserted into the <head> via webpack.
|
||||
* However, the Popups-specific CSS is imported as a string and inserted into the <head> manually
|
||||
* in order to change it later for RTL transformations with CSSJanus.
|
||||
*/
|
||||
import '../mocks/less/custom.less';
|
||||
// NOTE: The following import overrides the webpack config for this specific LESS file in order to
|
||||
// omit the 'style-loader' and import the content as a string.
|
||||
// The "./mocks/less" path is hard-coded and should be kept in sync with the path in webpack.config.js
|
||||
import PopupsCSSString from '!css-loader!less-loader?{"paths":"./mocks/less"}!../../src/ui/index.less';
|
||||
import PopupsCSSString from '../../src/ui/index.less';
|
||||
import '../mocks/custom.less';
|
||||
// The CSSJanus library is used to transform CSS for RTL languages.
|
||||
import * as cssjanus from 'cssjanus';
|
||||
|
||||
|
|
@ -23,7 +17,7 @@ import * as cssjanus from 'cssjanus';
|
|||
*/
|
||||
import { document } from 'global';
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs, text, select, number, object } from '@storybook/addon-knobs';
|
||||
import { text, select, number, object } from '@storybook/addon-knobs';
|
||||
|
||||
/**
|
||||
* Popups dependencies
|
||||
|
|
@ -143,12 +137,11 @@ function useApiOrInitModel( ApiValue, initModel, thumbnailSize, ApiParser ) {
|
|||
createPointerMasks( document.body );
|
||||
insertPopupsStyleElement();
|
||||
modifyStorybookHead( 'en', 'ltr' );
|
||||
|
||||
/**
|
||||
* Stories
|
||||
*/
|
||||
|
||||
storiesOf( 'Thumbnails', module )
|
||||
.addDecorator(withKnobs)
|
||||
.add( 'portrait', () => {
|
||||
const
|
||||
initModel = extendModelWithKnobs( MODELS.THUMBNAIL_PORTRAIT ),
|
||||
|
|
@ -165,7 +158,6 @@ storiesOf( 'Thumbnails', module )
|
|||
`;
|
||||
|
||||
}, KNOBS_PARAM )
|
||||
.addDecorator(withKnobs)
|
||||
.add( 'landscape', () => {
|
||||
const
|
||||
initModel = extendModelWithKnobs( MODELS.THUMBNAIL_LANDSCAPE ),
|
||||
|
|
|
|||
7
.storybook/storybook-resources.sh
Executable file
7
.storybook/storybook-resources.sh
Executable file
|
|
@ -0,0 +1,7 @@
|
|||
#!/usr/bin/env bash
|
||||
set -ex
|
||||
|
||||
curl https://raw.githubusercontent.com/wikimedia/mediawiki/master/resources/src/mediawiki.less/mediawiki.mixins.less -o .storybook/mocks/mediawiki.mixins.less
|
||||
curl https://raw.githubusercontent.com/wikimedia/mediawiki/master/resources/src/mediawiki.less/mediawiki.mixins.animation.less -o .storybook/mocks/mediawiki.mixins.animation.less
|
||||
curl https://raw.githubusercontent.com/wikimedia/mediawiki/master/resources/src/mediawiki.less/mediawiki.ui/variables.less -o .storybook/mocks/mediawiki.ui/variables.less
|
||||
curl https://raw.githubusercontent.com/wikimedia/mediawiki/master/resources/src/mediawiki.ui/components/icons.less -o .storybook/mocks/mediawiki.ui/components/icons.less
|
||||
|
|
@ -1,9 +1,29 @@
|
|||
const path = require("path");
|
||||
const webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [ {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
// Beware of https://github.com/babel/babel-loader/issues/690. Changes to browsers require
|
||||
// manual invalidation.
|
||||
cacheDirectory: true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [ {
|
||||
loader: 'style-loader'
|
||||
}, {
|
||||
loader: 'css-loader'
|
||||
} ]
|
||||
},
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: [{
|
||||
loader: 'style-loader'
|
||||
|
|
@ -13,15 +33,7 @@ module.exports = {
|
|||
loader: 'less-loader',
|
||||
options: {
|
||||
paths: [
|
||||
/**
|
||||
* Less files are resolved to this path,
|
||||
* which contain less files that essentially
|
||||
* just reach into mediawiki core fo the
|
||||
* appropriate files.
|
||||
* This path is also specified in stories/index.stories.less
|
||||
* when importing '../../src/ui/index.less'.
|
||||
*/
|
||||
path.resolve(__dirname, './mocks/less')
|
||||
path.resolve( __dirname, 'mocks' )
|
||||
]
|
||||
}
|
||||
}],
|
||||
|
|
@ -38,32 +50,10 @@ module.exports = {
|
|||
options: {
|
||||
removeSVGTagAttrs: false // Keep width and height attributes.
|
||||
}
|
||||
},
|
||||
{
|
||||
test: require.resolve('jquery'),
|
||||
use: [{
|
||||
loader: 'expose-loader',
|
||||
options: '$'
|
||||
}]
|
||||
},
|
||||
{
|
||||
test: require.resolve('./mocks/js/mockMediaWiki.js'),
|
||||
use: [{
|
||||
loader: 'expose-loader',
|
||||
options: 'mw'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'mw': require.resolve('./mocks/js/mockMediaWiki.js')
|
||||
},
|
||||
extensions: [ '.js' ]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.ProvidePlugin({
|
||||
mw: 'mw'
|
||||
} )
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
2
docs/ui/README.md
Normal file
2
docs/ui/README.md
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
Run `npm run docs`!
|
||||
|
||||
6664
package-lock.json
generated
6664
package-lock.json
generated
File diff suppressed because it is too large
Load diff
16
package.json
16
package.json
|
|
@ -1,12 +1,14 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"storybook": "./.storybook/storybook-resources.sh && start-storybook --config-dir=.storybook -p 6006",
|
||||
"build-storybook": "./.storybook/storybook-resources.sh && build-storybook --config-dir=.storybook -o docs/ui",
|
||||
"start": "webpack -w --mode=development",
|
||||
"build": "webpack --mode=production",
|
||||
"lint:fix": "grunt fix",
|
||||
"test:unit": "mw-node-qunit 'tests/node-qunit/**/*.test.js' --require \"$PWD/tests/node-qunit/run.js\" | tap-mocha-reporter dot",
|
||||
"test": "npm -s run check-built-assets && grunt lint && npm -s run coverage && npm -s run -s doc && bundlesize",
|
||||
"doc": "jsdoc -c jsdoc.json",
|
||||
"test": "npm -s run check-built-assets && grunt lint && npm -s run coverage && npm -s run -s doc && bundlesize && npm run build-storybook",
|
||||
"doc": "jsdoc -c jsdoc.json && npm run build-storybook",
|
||||
"node-debug": "node -v && npm -v && echo 'Please ensure you are running the correct version of nvm before running this command.'",
|
||||
"check-built-assets": "echo 'CHECKING BUILD SOURCES ARE COMMITTED OR STAGED' && npm -s run build && git diff --exit-code resources/dist || { npm run node-debug; false; }",
|
||||
"coverage": "SPAWN_WRAP_SHIM_ROOT=\"$PWD/.nyc_output\" nyc npm -s run test:unit",
|
||||
|
|
@ -21,19 +23,28 @@
|
|||
"@babel/core": "7.2.0",
|
||||
"@babel/preset-env": "7.2.0",
|
||||
"@babel/register": "7.0.0",
|
||||
"@storybook/addon-cssresources": "5.2.5",
|
||||
"@storybook/addon-knobs": "5.2.5",
|
||||
"@storybook/addon-options": "5.2.5",
|
||||
"@storybook/html": "5.1.10",
|
||||
"@types/jquery": "3.3.29",
|
||||
"@wikimedia/mw-node-qunit": "6.1.0",
|
||||
"babel-loader": "8.0.4",
|
||||
"bundlesize": "0.18.0",
|
||||
"clean-webpack-plugin": "1.0.0",
|
||||
"cssjanus": "1.3.1",
|
||||
"eslint-config-wikimedia": "0.14.3",
|
||||
"expose-loader": "0.7.5",
|
||||
"grunt": "1.0.4",
|
||||
"grunt-banana-checker": "0.8.1",
|
||||
"grunt-contrib-watch": "1.1.0",
|
||||
"grunt-eslint": "22.0.0",
|
||||
"grunt-stylelint": "0.11.1",
|
||||
"grunt-svgmin": "5.0.0",
|
||||
"jquery": "3.3.1",
|
||||
"jsdoc": "3.6.3",
|
||||
"less": "3.8.1",
|
||||
"less-loader": "4.1.0",
|
||||
"nyc": "13.1.0",
|
||||
"pre-commit": "1.2.2",
|
||||
"redux": "4.0.1",
|
||||
|
|
@ -41,6 +52,7 @@
|
|||
"stylelint-config-wikimedia": "0.6.0",
|
||||
"svg-inline-loader": "0.8.0",
|
||||
"tap-mocha-reporter": "3.0.7",
|
||||
"url-loader": "1.1.2",
|
||||
"wdio-junit-reporter": "0.4.4",
|
||||
"wdio-mediawiki": "0.4.0",
|
||||
"wdio-mocha-framework": "0.6.4",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'mediawiki.mixins.animation';
|
||||
@import 'mediawiki.mixins.animation.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'mediawiki.ui/variables';
|
||||
@import '../../variables.less';
|
||||
|
||||
.mwe-popups-settings-icon {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import 'mediawiki.mixins.less';
|
||||
@import 'mediawiki.ui/variables';
|
||||
@import 'mediawiki.ui/variables.less';
|
||||
|
||||
#mwe-popups-settings {
|
||||
z-index: 1000;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'mediawiki.ui/variables';
|
||||
@import 'mediawiki.ui/variables.less';
|
||||
|
||||
@popupPadding: 16px;
|
||||
@popupWidth: 320px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue