mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-11-28 17:30:26 +00:00
83a28d177f
Storybook.js provides a framework for viewing and working with UI components. https://storybook.js.org/ This patch adds the Storybook.js UI library to Popups for the purposes of viewing multiple previews at once. This enables viewing page previews in the following states: - with thumbnails - without thumbnails - with SVG thumbnails - with narrow thumbnails - with white background thumbnails - in RTL languages - in non-latin languages - disambiguation popups Storybook also allows users to change the image or text of a popup through a GUI. This patch sets up Storybook as a "mini" repo inside the.storybook folder with a seperate package.json file to avoid incompatibilities with the current webpack/babel (or even Node) versions used in the Popups repo. Storybook requires at least Node v8.3 to run. (an .nvmrc file with 11.3.0 has been added to the .stories dir). To start: `cd .storybook && npm install && npm run start`. Bug: T205989 Change-Id: I041e46c4f0cf173950015067e2dce81c023d3fdd
110 lines
2.5 KiB
JavaScript
110 lines
2.5 KiB
JavaScript
import { configure, addDecorator } from '@storybook/html';
|
|
import { withOptions } from '@storybook/addon-options';
|
|
import { withCssResources } from '@storybook/addon-cssresources';
|
|
|
|
/**
|
|
* Storybook global configuration
|
|
*/
|
|
|
|
addDecorator(
|
|
withCssResources({
|
|
cssresources: [{
|
|
name: `x-ray`,
|
|
code: `<style>
|
|
body * {
|
|
outline: 1px solid rgb(255, 0, 0);
|
|
background-color: rgba(255, 0, 0, 0.07);}
|
|
</style>`,
|
|
picked: false,
|
|
}],
|
|
})
|
|
);
|
|
|
|
// 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,
|
|
/**
|
|
* 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,
|
|
/**
|
|
* sorts stories
|
|
* @type {Boolean}
|
|
*/
|
|
sortStoriesByKind: false,
|
|
/**
|
|
* regex for finding the hierarchy separator
|
|
* @example:
|
|
* null - turn off hierarchy
|
|
* /\// - split by `/`
|
|
* /\./ - split by `.`
|
|
* /\/|\./ - split by `/` or `.`
|
|
* @type {Regex}
|
|
*/
|
|
hierarchySeparator: null,
|
|
/**
|
|
* regex for finding the hierarchy root separator
|
|
* @example:
|
|
* null - turn off multiple hierarchy roots
|
|
* /\|/ - split by `|`
|
|
* @type {Regex}
|
|
*/
|
|
hierarchyRootSeparator: null,
|
|
/**
|
|
* sidebar tree animations
|
|
* @type {Boolean}
|
|
*/
|
|
sidebarAnimations: true,
|
|
/**
|
|
* id to select an addon panel
|
|
* @type {String}
|
|
*/
|
|
selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
|
|
/**
|
|
* enable/disable shortcuts
|
|
* @type {Boolean}
|
|
*/
|
|
enableShortcuts: true, // true by default
|
|
})
|
|
);
|
|
|
|
|
|
// automatically import all files ending in *.stories.js
|
|
const req = require.context('./stories', true, /.stories.js$/);
|
|
function loadStories() {
|
|
req.keys().forEach(filename => req(filename));
|
|
}
|
|
|
|
configure(loadStories, module);
|