We estimated this as high as we suspect this will require some refactoring to the render code to obtain an easy way to generate HTML of a preview.

We expect this will introduce a new JS bundle that is loaded on a static HTML file (we would not need any of the redux code)

We expect this would look something like this:

const { popupToHtml  } = require( './render' );

[
  [exampleParams1, 'Horizontal popup with row in top left"].
  [exampleParams2, 'Horizontal popup with row in top right"].
].forEach((example) => {
  const html = popupToHtml( example[0] );
  $( html ).appendTo( document.body );
  $( '<p>').text(  example[1]
} );

There is of course some risk as we would be refactoring code in production and we haven't worked on the codebase in a while and the render code is likely to benefit from an opportunistic refactor.

@ovasileva Jan has made some great progress on this. Given we are looking at other popups tasks right now and this is high priority 8 pointer I'd like us to queue this up.

Change 479354 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/extensions/Popups@master] POC - Storybook.js for Popups

https://gerrit.wikimedia.org/r/479354

Th patch above is a big addition to the Popups repo. It introduces the Storybook framework. Storybook is a UI library for viewing and working with UI components.

https://storybook.js.org

This allows us to look at multiple Popups permutations at once.
So far I've created the following scenarios:

• with thumbnails
• without thumbnails
• with SVG thumbnails
• with narrow thumbnails
• with white background thumbnails
• in RTL languages
• in non-latin languages
• disambiguation popups

To boot, I also added the "knobs" plugin which lets users change the image or text of a popup, as well as just paste in the page-summary API response into a text-field and generate a popup based on that!

Here's the generated version of the Storybook app:
https://zen-pasteur-e92b1e.netlify.com/

Integrating Storybook with the repo proved rather challenging. Not because of the Popups code itself, but rather the dependencies. Storybook requires at least Node v8.3 to run, and Popups use v6. This is because that's the version in CI. Also, older versions of Webpack and Babel conflicted with the ones in Storybook. To get around this, I placed all the dependencies, including the package.json, into the .storybook folder.

Known bugs: images don't appear in Safari.

Change 479354 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Storybook.js for Popups

https://gerrit.wikimedia.org/r/479354