Commit graph

9 commits

Author SHA1 Message Date
Jan Drewniak dbb58da86b [Storybook] Upgrade Storybook to v6.2.9
This removes the webpack.config.js file, moving the webpack config
into main.js, which replaces config.js.

- Moves the global jQuery into the webpack config in main.js.
- Removes the outdates .nvmrc file in the webpack folder.
- Moves the mockMediaWiki initialization from config.js into
  index.stories.js
- Upgrades webpack to 4.22.2

Bug: T271763
Change-Id: Ie008d69e992625113ae98d52ad6d37186eb933de
2021-07-16 15:38:29 +00:00
Jan Drewniak 1e04551b1c [Storybook] Removing custom CSS grid and addons from Storybook
Removes the following add-ons and their configuration from Storybook:

- addon-cssresources
- addon-knobs
- addon-options

This will hopefully ease the upgrade to Storybook 6.

Removes the custom CSS grid used to position previews within the Storybook
instance in favour of a flexbox layout. This simplifies the creation
of previews for Storybook.

This change requires us to to add relative positioning to
`.mwe-popups-container` so that the footer is correctly positioned in the
popup without absolute positioning. This positioning has been moved to
be Storybook specific to avoid an regressions in production.

Bug: T271763
Change-Id: I9a97291cb4bca7d4cc60dad232a60f6f92c0adea
2021-07-14 12:54:55 +02:00
Jan Drewniak 02f4650a01 [Storybook] Remove unused Less file in Storybook folder.
This file was used in the initial Storybook implementation but has been
replaced by `.storybook/mocks/custom.less`.

Bug: T271763
Change-Id: I24d2690db13edebdeeb09c5f37c097548007ef89
2021-07-12 13:58:49 +02:00
Noam Rosenthal 4492b54a44 Performance optimization for popup rendering
Reduce layout/style thrashing by measuring all required geometries
at event handler, not waiting for delays/redux/style changes.

Use CSS bottom instead of top, to avoid having to measure the popup
before positioning it, if it's placed above the link ("flippedY").

Disable some test cases that relied on implementation detail of using
"top" CSS.

Change-Id: Id0cbf506009b824d0fb6af4d6fe220e2f69aaaad
2020-11-30 17:33:07 +02:00
jdlrobson 189b386a13 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
2019-12-11 15:16:13 -08:00
Ed Sanders 2687d12c52 eslint: Remove valid-jsdoc override
Change-Id: I6a9936743a74afb528713f21e016838947fa1914
2019-08-15 08:00:24 +00:00
Jan Drewniak da369d09ae Improving RTL support for the Storybook app
- Adds CSSJanus support on a story-by-story basis for the Storybook app.
- Adds an extra RTL portrait thumbnail test-case.
- Adds an extra RTL 'thin' portrait thumbnail test-case.
- Removes the `createContextualFragment` wrapper from stories,
  as well as the wrapper divs.

Bug: T204627
Change-Id: I22195c6ddc73d69f15dc8e24c33b49ef28d9b0be
2019-03-25 11:19:15 +01:00
Jan Drewniak bdb535c643 Add SVG masks to Storybook app
The SVG masks used for previews are clip paths, making it hard to
visualize what their actual shape is. This patch extracts the paths
inside those clip paths into new SVG objects and renders them in
the Storybook app.

Also removes a few previews from the portrait/landscape thumbnails
so that the Knobs addon can function properly.

Change-Id: I160746d8877deaa12ace925ce170323946ce532d
2019-03-06 14:21:33 +00:00
Jan Drewniak 83a28d177f Storybook.js for Popups
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
2019-01-08 14:19:00 +01:00