Merge pull request #2066 from tf/storybook-7

Upgrade to Storybook 7

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": {

entry_types/scrolled/package/.percy.yml

@@ -0,0 +1,6 @@
+version: 2
+snapshot:
+  enable-javascript: true
+  widths:
+    - 1280
+  min-height: 800

entry_types/scrolled/package/.storybook/main.js

@@ -1,20 +1,31 @@
+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 {
       ...config,
       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;
-  });
-}

entry_types/scrolled/package/.storybook/preview.js

@@ -0,0 +1 @@
+export const parameters = { layout: 'fullscreen' };

entry_types/scrolled/package/package.json

@@ -43,9 +43,11 @@
   },
   "devDependencies": {
     "@percy-io/in-percy": "^0.1.11",
-    "@percy/storybook": "^3.2.0",
-    "@storybook/addon-viewport": "^5.3.13",
-    "@storybook/react": "^5.3.9",
+    "@percy/cli": "^1.27.7",
+    "@percy/storybook": "^5.0.1",
+    "@storybook/addon-viewport": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
@@ -65,21 +67,24 @@
     "eslint-plugin-jsx-a11y": "6.x",
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-hooks": "1.x",
+    "eslint-plugin-storybook": "^0.6.15",
     "jest": "^27.0.6",
     "jest-fetch-mock": "^3.0.3",
     "jest-svg-transformer": "^1.0.0",
     "mockdate": "^3.0.5",
+    "postcss-loader": "^8.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-svg-loader": "^3.0.3",
     "react-test-renderer": "^16.9.0",
-    "slate-hyperscript": "^0.57.3"
+    "slate-hyperscript": "^0.57.3",
+    "storybook": "^7.6.10"
   },
   "scripts": {
     "test": "jest",
     "lint": "eslint .",
-    "start-storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -s .storybook/static",
-    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook -s .storybook/static -o .storybook/out",
-    "snapshot": "NODE_OPTIONS=--openssl-legacy-provider build-storybook --quiet -s .storybook/static -o .storybook/out && PERCY_TOKEN=${PERCY_TOKEN:-$PT} percy-storybook --widths=1280 --build_dir=.storybook/out"
+    "start-storybook": "storybook dev --port 8001",
+    "build-storybook": "storybook build -o .storybook/out",
+    "snapshot": "storybook build --quiet -o .storybook/out && PERCY_TOKEN=${PERCY_TOKEN:-$PT} percy storybook .storybook/out"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('pageflow/config/postcss/scaleFunctions'),
+    require('autoprefixer')
+  ]
+};

rollup.config.js

@@ -5,10 +5,8 @@ import commonjs from 'rollup-plugin-commonjs';
 import replace from '@rollup/plugin-replace';
 import babel from 'rollup-plugin-babel';
 import postcss from 'rollup-plugin-postcss';
-import autoprefixer from 'autoprefixer';
 import reactSvg from "rollup-plugin-react-svg";
 import image from '@rollup/plugin-image';
-import scaleFunctions from 'pageflow/config/postcss/scaleFunctions';
 import path from 'path'
 
 const pageflowPackageRoot = 'package';
@@ -49,11 +47,7 @@ const plugins = ({extractCss, moduleDirectories} = {}) => [
   postcss({
     modules: true,
     extract: extractCss,
-    minimize: extractCss,
-    plugins: [
-      scaleFunctions,
-      autoprefixer
-    ]
+    minimize: extractCss
   }),
   babel({
     exclude: 'node_modules/**',