Remove storybook and update nvm version

The Minerva storybook only has 2 stories which look broken.
Given we never actively began using it, I suggest we remove it
from the repo.

Bug: T310004
Change-Id: I42ce4248f376c683ddbbf3f1ec0e275906f6ab45
This commit is contained in:
Jon Robson 2022-05-23 15:52:19 -07:00
parent ae1d39ab07
commit 0dbe68f974
11 changed files with 28 additions and 23393 deletions

2
.nvmrc
View file

@ -1 +1 @@
14.17.5
16.19.1

View file

@ -1,11 +0,0 @@
import { configure } from '@storybook/html';
// Ideally we'd import at the story level, but we will need to reorganise our styles first.
import '../resources/skins.minerva.base.styles/skin.less';
import '../resources/skins.minerva.scripts/styles.less';
import './storybook.less';
import '../skinStyles/mediawiki.hlist/minerva.less';
// Automatically import all files ending in `*.stories.js`.
configure(require.context('../stories', true, /\.stories\.js$/), module);

View file

@ -1,19 +0,0 @@
@import '../.resolve-less-imports/mediawiki.ui.icons.less';
.mf-mw-ui-icon-rotate-anti-clockwise:before {
transform: rotate( -90deg );
}
// Icons
.mw-ui-icon-mf-expand-gray:before {
background-image: url( '../.resolve-less-imports/images/expand.svg' );
}
.mw-ui-icon-wikimedia-history-base20:before {
background-image: url( ../.resolve-less-imports/images/clock.svg );
}
.mw-ui-icon-mf-expand-invert:before,
.mw-ui-icon-wikimedia-history-invert:before {
filter: brightness( 0 ) invert( 1 );
}

View file

@ -1,46 +0,0 @@
const path = require( 'path' );
module.exports = {
module: {
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: /\.(gif|png|jpe?g|svg)$/i,
issuer: /\.less$/,
loader: 'file-loader',
options: {
paths: [
path.resolve( __dirname, 'components/images' )
]
}
},
{
// In core some LESS imports don't specify filename.
test: /\.less$/,
use: [ {
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'less-loader',
options: {
relativeUrls: false,
paths: [
path.resolve( __dirname, '../.resolve-less-imports' )
]
}
} ]
},
]
}
};

View file

@ -1,27 +0,0 @@
#!/usr/bin/env bash
set -eu
mkdir -p .resolve-less-imports/images
mkdir -p .resolve-less-imports/mediawiki.ui
# Copy skin's mediawiki.skin.variables.less to use it over core's own, which is removed.
rm -f .resolve-less-imports/mediawiki.skin.variables.less
cp resources/mediawiki.less/mediawiki.skin.variables.less .resolve-less-imports/
# Fetch resources via curl, `-sSL` silently, Show only errors, Location header and also with a 3XX response code.
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.skin.defaults.less?format=TEXT" | base64 --decode > .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 > .resolve-less-imports/mediawiki.skin.variables.less
curl -sSL "https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/master/resources/src/mediawiki.less/mediawiki.mixins.less?format=TEXT" | base64 --decode > .resolve-less-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 > .resolve-less-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 > .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.animation.less?format=TEXT" | base64 --decode > .resolve-less-imports/mediawiki.mixins.animation.less
curl "https://en.wikipedia.org/w/load.php?modules=mediawiki.ui.icon&only=styles&debug=true&useskin=minerva" -o .resolve-less-imports/mediawiki.ui.icons.less
# Append compatibility with wgMinervaApplyKnownTemplateHacks.
echo "@wgMinervaApplyKnownTemplateHacks: 1;" >> .resolve-less-imports/mediawiki.ui/variables.less
# clock icon
curl "https://en.m.wikipedia.org/w/load.php?modules=skins.minerva.icons.wikimedia&image=history&format=original&skin=minerva&version=7aa66" -o .resolve-less-imports/images/clock.svg
# expand icon
curl "https://en.m.wikipedia.org/w/load.php?modules=mobile.ooui.icons&image=expand&&format=rasterized&skin=minerva&version=grblv" -o .resolve-less-imports/images/expand.svg

23154
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -2,9 +2,6 @@
"name": "MinervaNeue",
"private": true,
"scripts": {
"storybook:setup": "./dev-scripts/setup-storybook.sh",
"storybook": "npm run storybook:setup && start-storybook -p 6006",
"build-storybook": "npm run storybook:setup && build-storybook -o docs/ui",
"lint": "npm -s run lint:styles && npm -s run lint:js && npm -s run lint:i18n",
"lint:fix": "npm -s run lint:styles -- --fix && npm -s run lint:js -- --fix && npm -s run lint:i18",
"lint:js": "eslint --cache .",
@ -13,14 +10,12 @@
"test": "npm run lint && npm run doc && dev-scripts/svg_check.sh",
"test:a11y": "npx wmf-a11y --config 'tests/a11y/a11y.config.js'",
"minify-svg": "svgo --config=.svgo.config.js --quiet --recursive --folder resources/",
"doc": "jsdoc -c jsdoc.json && npm run build-storybook",
"doc": "jsdoc -c jsdoc.json",
"selenium-test-cucumber": "wdio tests/selenium/wdio.conf.cucumber.js",
"selenium-daily": "npm run selenium-test && npx wmf-a11y --config 'tests/a11y/a11y.config.js' --logResults",
"selenium-test": "wdio tests/selenium/wdio.conf.js"
},
"devDependencies": {
"@babel/core": "7.7.7",
"@storybook/html": "5.2.8",
"@wdio/cli": "7.19.5",
"@wdio/cucumber-framework": "7.16.4",
"@wdio/dot-reporter": "7.16.4",
@ -28,15 +23,10 @@
"@wdio/local-runner": "7.19.5",
"@wdio/mocha-framework": "7.16.4",
"@wdio/sync": "7.19.5",
"babel-loader": "8.0.6",
"eslint-config-wikimedia": "0.22.1",
"grunt-banana-checker": "0.10.0",
"jsdoc": "3.6.10",
"less": "3.8.1",
"less-loader": "4.1.0",
"mustache": "3.0.1",
"mwbot": "2.0.0",
"postcss-less": "6.0.0",
"pre-commit": "1.2.2",
"stylelint-config-wikimedia": "0.13.0",
"svgo": "2.8.0",

View file

@ -1,17 +0,0 @@
{
"root": true,
"extends": [
"wikimedia/common",
"wikimedia/language/es6"
],
"env": {
"browser": true
},
"rules": {
"single-quote": "off",
"quotes": "off"
},
"parserOptions": {
"sourceType": "module"
}
}

View file

@ -1,62 +0,0 @@
import mustache from 'mustache';
import template from '!!raw-loader!../includes/Skins/footer.mustache';
import Logo from '!!raw-loader!../includes/Skins/Logo.mustache';
import footerItemList from '!!raw-loader!../includes/Skins/footerItemList.mustache';
import { lastModifiedBar, lastModifiedBarActive } from './lastModifiedBar.stories';
import { placeholder } from './utils';
export default {
title: 'Footer'
};
const FOOTER_TEMPLATE_DATA = {
'msg-mobile-frontend-sitename': 'Site title OR Logo',
'html-after-content': placeholder( 'Extensions can add here e.g. Related Articles.' ),
'data-info': [
{
id: 'info',
'array-items': [
{
id: 'copyright',
html: 'Content is available under <a rel="nofollow" href="#">Reading Web 3.0 License</a> unless otherwise noted.'
}
]
}
],
'data-places': [
{
id: 'places',
'array-items': [
{
id: 'terms-use',
html: '<a href="#">Terms of Use</a>'
},
{
id: 'privacy',
html: '<a href="#">Privacy</a>'
},
{
id: 'desktop-toggle',
html: '<a href="#">Desktop</a>'
}
]
}
]
};
export const footer = () =>
mustache.render( template, {
'data-footer': Object.assign( FOOTER_TEMPLATE_DATA, {
'data-minerva-history-link': lastModifiedBar()
} )
} );
export const footerRecentEdit = () =>
mustache.render( template, {
'data-footer': Object.assign( FOOTER_TEMPLATE_DATA, {
'data-minerva-history-link': lastModifiedBarActive()
} )
}, {
footerItemList,
Logo
} );

View file

@ -1,45 +0,0 @@
import mustache from 'mustache';
import template from '!!raw-loader!../includes/Skins/history.mustache';
import { withAnnotation } from './utils';
export default {
title: 'Last modified'
};
export const lastModifiedBar = () =>
withAnnotation( mustache.render( template, {
historyIconClass: 'last-modified-bar__icon mw-ui-icon mw-ui-icon-mw-ui-icon-small mw-ui-icon-wikimedia-history-base20',
arrowIconClass: 'mw-ui-icon mw-ui-icon-small mw-ui-icon-mf-expand-gray mf-mw-ui-icon-rotate-anti-clockwise indicator mw-ui-icon-mf-arrow-gray',
text: 'Last edited on 20 January 2020, at 18:38',
href: "#/wiki/Special:History/Username",
'data-user-name': 'Username',
'data-user-gender': 'female',
timestamp: '1579545499'
} ), 'FIXME: Last modified bar currently requires footer element to be styled correctly.', 10 );
export const lastModifiedBarActive = () => {
const html = mustache.render( template, {
historyIconClass: 'last-modified-bar__icon mw-ui-icon mw-ui-icon-mw-ui-icon-small mw-ui-icon-wikimedia-history-base20',
arrowIconClass: 'mw-ui-icon mw-ui-icon-small mw-ui-icon-mf-expand-gray mf-mw-ui-icon-rotate-anti-clockwise indicator mw-ui-icon-mf-arrow-gray',
text: 'Last edited on 20 January 2020, at 18:38',
href: "#/wiki/Special:History/Username",
'data-user-name': 'Username',
'data-user-gender': 'female',
timestamp: '1579545499'
} ),
node = document.createElement( 'div' );
node.innerHTML = html;
node.firstChild.classList.add( 'active' );
node.querySelector( '.last-modified-bar__text' ).outerHTML = `<span class="last-modified-bar__text">
<a href="#">Last edited 57 seconds ago</a> by <a href="#">Username</a></span>`;
// invert icons
node.querySelector( '.mw-ui-icon-wikimedia-history-base20' ).classList.add(
'mw-ui-icon-wikimedia-history-invert'
);
node.querySelector( '.mw-ui-icon-mf-expand-gray' ).classList.add(
'mw-ui-icon-mf-expand-invert'
);
return withAnnotation( node.innerHTML, 'FIXME: Not possible to render active state with template.', 10 );
};

View file

@ -1,26 +0,0 @@
/**
*
* @param {string} msg to display
* @param {number} height of placeholder
* @return {string}
*/
const placeholder = ( msg, height ) => {
return `<div style="width: 100%; height: ${height || 200}px; margin-bottom: 2px;
font-size: 1.4em; padding: 8px;
display: flex; background: #eaecf0; align-items: center; justify-content: center;">${msg}</div>`;
};
/**
*
* @param {string} story to describe.
* @param {string} annotation to annotate story with.
* @param {number} height of placeholder
* @return {string}
*/
const withAnnotation = ( story, annotation, height ) => {
const node = document.createElement( 'div' );
node.innerHTML = placeholder( annotation, height ) + story;
return node.outerHTML;
};
export { placeholder, withAnnotation };