DP-18740: Integrates React/Storybook with Assets Package

.circleci/config.yml

@@ -194,6 +194,7 @@ jobs:
           docker-compose up --no-start web backstop
           docker cp ./ $(docker-compose ps -q backstop):/src/
           docker cp ../assets $(docker-compose ps -q backstop):/src/assets
+          docker cp ../docs $(docker-compose ps -q backstop):/src/docs
           docker cp ./storybook-static/. $(docker-compose ps -q web):/usr/share/nginx/html
       - run: |
           cd react

react/.storybook/main.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const assets = require('@massds/mayflower-assets');
 module.exports = {
   stories: ['../src/**/*.stories.js'],
   addons: [
@@ -8,29 +9,55 @@ module.exports = {
     '@storybook/addon-viewport',
     '@storybook/addon-storysource',
     '@storybook/addon-a11y',
+    {
+      name: '@storybook/preset-create-react-app',
+    },
   ],
   webpackFinal: async (config, { configType }) => {
+
+    // Remove the default sass-loader rule from create-react-app.
+    config.module.rules = config.module.rules.filter(rule => {
+      if (rule.test) {
+        if (!'some.scss'.match(rule.test)) {
+          return true;
+        } else {
+          return rule.oneOf;
+        }
+      } else {
+        return true;
+      }
+    });
+    // @storybook/preset-create-react-app changes the entire
+    // structure of rules. one of the rules with oneOf
+    // contains all the rules now.
+    const groupedRules = config.module.rules.find((rule) => {
+      if (rule.oneOf) {
+        return rule;
+      }
+    });
     // Add special plugins to the babel loader.
-    const babelRule = config.module.rules.find(rule => rule.loader && rule.loader.match('babel-loader'));
-    babelRule.options.plugins = babelRule.options.plugins.concat([
-      "@babel/proposal-export-default-from",
-      '@babel/proposal-class-properties',
-      '@babel/plugin-proposal-object-rest-spread'
-    ]);
-
-    // Alter the mini-css-extract-plugin to look for asset files relative to
-    // the storybook-static directory.
-    if ( configType === 'PRODUCTION') {
-      const cssRule = config.module.rules.find(rule => rule.test && 'some.css'.match(rule.test));
-      if(cssRule) {
-        const cssFileLoader = cssRule.use.find(loader => loader.loader && loader.loader.match('mini-css-extract-plugin'));
-        if(cssFileLoader) {
-          cssFileLoader.options.publicPath = (resourcePath, context) => {
-            // publicPath is the relative path of the resource to the context
-            // e.g. for ./css/admin/main.css the publicPath will be ../../
-            // while for ./css/main.css the publicPath will be ../
-            return path.relative(path.dirname(resourcePath), context) + '/';
-          };
+    const babelRule = groupedRules.oneOf.find(rule => rule.loader && rule.loader.match('babel-loader'));
+    if (babelRule) {
+      babelRule.options.plugins = babelRule.options.plugins.concat([
+        "@babel/proposal-export-default-from",
+      ]);
+      // Remove preset-env and preset-react as preset-react-app already defines it.
+      babelRule.options.presets = babelRule.options.presets.filter((plugin) => {
+        return !plugin.includes('/preset-env/') && !plugin.includes('/preset-react/');
+      });
+    }
+    const sassRule = groupedRules.oneOf.find((nestedRule) => nestedRule.test && 'some.scss'.match(nestedRule.test))
+    if (sassRule) {
+      const sassLoader = sassRule.use.find(loader => loader.loader && loader.loader.includes('sass-loader'));      
+      if (sassLoader) {
+        sassLoader.options = {
+          sourceMap: configType !== 'PRODUCTION',
+          implementation: require('sass'),
+          sassOptions: {
+            includePaths: [
+              path.resolve(__dirname, '../src/components'),
+            ].concat(assets.includePaths)
+          }
         }
       }
     }

react/.storybook/preview.js

@@ -1,7 +1,7 @@
 import { addDecorator, addParameters } from '@storybook/react';
 import { withA11y } from '@storybook/addon-a11y';
 import { withInfo } from '@storybook/addon-info';
-import '../src/index.css';
+import '../src/index.scss';
 
 const storyKindOrder = [
   'about', // storyKindOrder.indexOf -1 follow alphabetical order

react/backstop/listDirs.js

@@ -7,12 +7,12 @@ const path = require('path');
  * @param {string} dir
  */
 const listDirs = (dir) => {
-  const fileNames = fs.readdirSync(dir);
+  // Set withFileTypes for symlink support.
+  const fileNames = fs.readdirSync(dir, { withFileTypes: true });
   let dirList = [];
-
   fileNames.forEach((fileName) => {
-    const absFilePath = path.join(dir, fileName);
-    if (fs.statSync(absFilePath).isDirectory()) {
+    const absFilePath = path.join(dir, fileName.name);
+    if (fileName.isDirectory()) {
       dirList.push(absFilePath);
       dirList = dirList.concat(listDirs(absFilePath));
     }

react/nwb.config.js

@@ -3,17 +3,5 @@ module.exports = {
   npm: {
     esModules: true,
     umd: false
-  },
-  babel: {
-    stage: 1,
-    plugins: [
-      ['module-resolver', {
-        root: ['./src'],
-        alias: {
-          SharedAssets: '@massds/mayflower-assets/static'
-        }
-      }],
-      'babel-plugin-dynamic-import-node'
-    ]
   }
 };