Assets Integration Branch: React Support with Mayflower Assets Package (

#1047)

* DP-18263: Adds support for assets package with react.

* DP-18263: Updates react package to use latest mayflower-assets package, removes debugging in storybook config.

* Update react/.storybook/main.js

* DP-18263: Adds .env file for react.

* DP-18263: Fixes bugs related to fonts, layouts. Removes bourbon and bourbon neat dependencies.

* DP-18263: Fixes stylelint errors for mayflower-assets.

* DP-18263: Updates mayflower-assets package.

* DP-18263: Fixes visual regression on HeaderSearch component.

.gitignore

@@ -5,6 +5,6 @@
 node_modules
 
 .env
-
+!react/.env
 # Distribution folder
 dist

react/.env

@@ -0,0 +1 @@
+SASS_PATH=./src/components:./node_modules:./node_modules/@massds/mayflower-assets/scss:./node_modules/@massds/mayflower-assets/scss/00-base:./node_modules/@massds/mayflower-assets/scss/00-base/mixins:./node_modules/@massds/mayflower-assets/scss/01-atoms:./node_modules/@massds/mayflower-assets/scss/02-molecules:./node_modules/@massds/mayflower-assets/scss/03-organisms:./node_modules/@massds/mayflower-assets/scss/04-templates/./node_modules/@massds/mayflower-assets/scss/05-dataviz:./node_modules/@massds/mayflower-assets/scss/08-print

react/.gitignore

@@ -7,6 +7,7 @@
 npm-debug.log*
 
 src/**/*.css
+src/**/*.css.map
 storybook-static
 
 backstop/data/bitmaps_test/

react/.storybook/main.js

@@ -1,33 +1,37 @@
-const path = require("path");
+const path = require('path');
 module.exports = {
-  stories: ['../**/*.stories.js'],
+  stories: ['../src/**/*.stories.js'],
   addons: [
-    '@storybook/addon-knobs',
     '@storybook/addon-actions',
     '@storybook/addon-links',
+    '@storybook/addon-knobs',
     '@storybook/addon-viewport',
     '@storybook/addon-storysource',
-    '@storybook/addon-a11y'
+    '@storybook/addon-a11y',
   ],
   webpackFinal: async (config, { configType }) => {
     // 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-plugin-dynamic-import-node',
       "@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. Note that we guard this logic because
-    // the storybook development server doesn't actually use the
-    // mini-css-extract-plugin.
-    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 = '../../';
+    // 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) + '/';
+          };
+        }
       }
     }
 
@@ -42,10 +46,10 @@ module.exports = {
       ...config.resolve,
       alias: {
         ...config.resolve.alias,
-        SharedAssets: path.resolve(__dirname, '../../assets/')
+        SharedAssets: '@massds/mayflower-assets/static'
       }};
 
     // Return the altered config
     return config;
   },
-};
+};

react/.storybook/mayflowerTheme.js

@@ -1,6 +1,5 @@
 import { create } from '@storybook/theming/create';
 import logo from './mayflower-react-logo.png';
-
 export default create({
   base: 'light',
 
@@ -14,8 +13,8 @@ export default create({
   appBorderRadius: 6,
 
   // Typography
-  // fontBase: '"Open Sans", sans-serif',
-  // fontCode: 'monospace',
+  fontBase: '"Texta", "Helvetica", "Arial", sans-serif',
+  fontCode: '"Source Code Pro", "Monaco", monospace',
 
   // Text colors
   textColor: 'black',

react/.storybook/preview.js

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

react/nwb.config.js

@@ -10,7 +10,7 @@ module.exports = {
       ['module-resolver', {
         root: ['./src'],
         alias: {
-          SharedAssets: './src/assets'
+          SharedAssets: '@massds/mayflower-assets/static'
         }
       }],
       'babel-plugin-dynamic-import-node'