diff --git a/entry_types/scrolled/package/.eslintrc.js b/entry_types/scrolled/package/.eslintrc.js index 281e16c07f..324a55dbd8 100644 --- a/entry_types/scrolled/package/.eslintrc.js +++ b/entry_types/scrolled/package/.eslintrc.js @@ -2,7 +2,8 @@ module.exports = { "extends": [ "react-app", "plugin:import/errors", - "plugin:import/warnings" + "plugin:import/warnings", + "plugin:storybook/recommended" ], "settings": { "import/resolver": { diff --git a/entry_types/scrolled/package/.percy.yml b/entry_types/scrolled/package/.percy.yml new file mode 100644 index 0000000000..4e3ba61b4b --- /dev/null +++ b/entry_types/scrolled/package/.percy.yml @@ -0,0 +1,6 @@ +version: 2 +snapshot: + enable-javascript: true + widths: + - 1280 + min-height: 800 diff --git a/entry_types/scrolled/package/.storybook/main.js b/entry_types/scrolled/package/.storybook/main.js index d8f28f494a..5371ba5ca6 100644 --- a/entry_types/scrolled/package/.storybook/main.js +++ b/entry_types/scrolled/package/.storybook/main.js @@ -1,8 +1,21 @@ +import { dirname, join } from "path"; const path = require('path'); module.exports = { - addons: ['@storybook/addon-viewport/register'], stories: ['../src/**/*stories.js'], + staticDirs: ['./static'], + + addons: ['@storybook/addon-viewport'], + + framework: { + name: '@storybook/react-webpack5', + options: {} + }, + + features: { + // Required to make deprecated storiesOf API work + storyStoreV7: false, + }, webpackFinal: async (config, {configType}) => { return { @@ -10,11 +23,9 @@ module.exports = { module: { ...config.module, rules: [ - ...addModuleOptionToCssLoader( + ...addPostCssLoader( removeSvgFromFileLoader( - includePageflowPackageInBabelRule( - config.module.rules - ) + config.module.rules ) ), reactSvgLoader(), @@ -23,18 +34,9 @@ module.exports = { resolve: { alias: { ...config.resolve.alias, - 'videojs': path.resolve(__dirname, '../../../../vendor/assets/javascripts/videojs'), 'pageflow/frontend': path.resolve(__dirname, '../../../../package/src/frontend'), 'pageflow-scrolled/frontend': path.resolve(__dirname, '../src/frontend'), - 'pageflow-scrolled/testHelpers': path.resolve(__dirname, '../src/testHelpers'), - - // css-loader (used by Storybook's Webpack setup) expects - // imports from node modules to be prefixed with a tilde, - // e.g. "~pageflow-scrolled/..."). This syntax is not - // supported by our Rollup setup, though. Without the tilde, - // css-loader interprets imports as relative. We use this - // alias as a workaround to mimic the Rollup behavior. - './pageflow-scrolled/values': path.resolve(__dirname, '../values'), + 'pageflow-scrolled/testHelpers': path.resolve(__dirname, '../src/testHelpers') } } }; @@ -60,7 +62,7 @@ function reactSvgLoader() { function removeSvgFromFileLoader(rules) { return rules.map(rule => { - if (!rule.test.toString().includes('svg|')) { + if (!rule.test || !rule.test.toString().includes('svg|')) { return rule; } @@ -71,54 +73,20 @@ function removeSvgFromFileLoader(rules) { }); } -function addModuleOptionToCssLoader(rules) { +function addPostCssLoader(rules) { return rules.map(rule => { - if (rule.test.toString() !== '/\\.css$/') { + if (!rule.test || rule.test.toString() !== '/\\.css$/') { return rule; } - const use = rule.use.map(u => { - const { loader } = u; - - if (!loader || !loader.includes('/css-loader/')) { - return u; - } - - const options = { - ...u.options, - modules: { - localIdentName: '[name]_[local]__[hash:base64:5]' - } - }; - - return { - ...u, - options - }; - }); - return { ...rule, - use + use: [ + ...rule.use, + { + loader: 'postcss-loader' + } + ] }; }); } - -// Since resolve.alias above makes imports from pageflow/frontend -// point to the package's src directory, we need to make sure that -// files from the pageflow package are also transpiled. -function includePageflowPackageInBabelRule(rules) { - return rules.map(rule => { - if (rule.test.toString().includes('|jsx?)')) { - return { - ...rule, - include: [ - ...rule.include, - path.resolve(__dirname, '../../../../package') - ] - }; - } - - return rule; - }); -} diff --git a/entry_types/scrolled/package/.storybook/preview.js b/entry_types/scrolled/package/.storybook/preview.js new file mode 100644 index 0000000000..738821b0fd --- /dev/null +++ b/entry_types/scrolled/package/.storybook/preview.js @@ -0,0 +1 @@ +export const parameters = { layout: 'fullscreen' }; diff --git a/entry_types/scrolled/package/.storybook/static/packs/media/pageflow-scrolled/themes/default/logoDesktop-8cd13ee3ce69f56574539f06beb83914.svg b/entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/logoDesktop-1a15d5ac41444c6531b4.svg similarity index 100% rename from entry_types/scrolled/package/.storybook/static/packs/media/pageflow-scrolled/themes/default/logoDesktop-8cd13ee3ce69f56574539f06beb83914.svg rename to entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/logoDesktop-1a15d5ac41444c6531b4.svg diff --git a/entry_types/scrolled/package/.storybook/static/packs-test/media/pageflow-scrolled/themes/default/logoMobile-8003a8454bf92b9da59cc3dd56b78e90.svg b/entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/logoMobile-c48f68e97a285a626294.svg similarity index 100% rename from entry_types/scrolled/package/.storybook/static/packs-test/media/pageflow-scrolled/themes/default/logoMobile-8003a8454bf92b9da59cc3dd56b78e90.svg rename to entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/logoMobile-c48f68e97a285a626294.svg diff --git a/entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/unmute-669cf0e573b8bed67460.mp3 b/entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/unmute-669cf0e573b8bed67460.mp3 new file mode 100644 index 0000000000..350ba5f521 Binary files /dev/null and b/entry_types/scrolled/package/.storybook/static/packs-test/static/pageflow-scrolled/themes/default/unmute-669cf0e573b8bed67460.mp3 differ diff --git a/entry_types/scrolled/package/.storybook/static/packs-test/media/pageflow-scrolled/themes/default/logoDesktop-f78def7815967d2ebedd9bd48d52c0fb.svg b/entry_types/scrolled/package/.storybook/static/packs/static/pageflow-scrolled/themes/default/logoDesktop-1a15d5ac41444c6531b4.svg similarity index 97% rename from entry_types/scrolled/package/.storybook/static/packs-test/media/pageflow-scrolled/themes/default/logoDesktop-f78def7815967d2ebedd9bd48d52c0fb.svg rename to entry_types/scrolled/package/.storybook/static/packs/static/pageflow-scrolled/themes/default/logoDesktop-1a15d5ac41444c6531b4.svg index 39b6e1c759..8fda98c52f 100644 --- a/entry_types/scrolled/package/.storybook/static/packs-test/media/pageflow-scrolled/themes/default/logoDesktop-f78def7815967d2ebedd9bd48d52c0fb.svg +++ b/entry_types/scrolled/package/.storybook/static/packs/static/pageflow-scrolled/themes/default/logoDesktop-1a15d5ac41444c6531b4.svg @@ -1,7 +1,7 @@ + viewBox="0 -50 951.9 338.9" style="enable-background:new 0 0 851.9 238.9;" xml:space="preserve">