fix: update EUI, storybook and add autoprefixer (#267)

EUI and storybook v5 are updated to their latest versions. The commit also fix the an issue with coloured background and the legend. fix #249
elastic · Jul 30, 2019 · f70e084 · f70e084
1 parent 8ebe600
commit f70e084
Show file tree

Hide file tree

Showing 10 changed files with 1,988 additions and 1,158 deletions.
diff --git a/.playground/webpack.config.js b/.playground/webpack.config.js
@@ -15,13 +15,22 @@ module.exports = {
           configFile: 'tsconfig.json',
         },
       },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-      },
       {
         test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: { importLoaders: 1 },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: [require('autoprefixer')],
+            },
+          },
+          'sass-loader',
+        ],
       },
     ],
   },

diff --git a/.storybook/addons.ts b/.storybook/addons.ts
@@ -1,4 +1,2 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-knobs/register';
-import '@storybook/addon-options/register';
-import '@storybook/addon-storysource/register';
diff --git a/.storybook/config.ts b/.storybook/config.ts
@@ -1,24 +1,30 @@
 import { withInfo } from '@storybook/addon-info';
 import { withKnobs } from '@storybook/addon-knobs';
-import { withOptions } from '@storybook/addon-options';
-import { addDecorator, configure } from '@storybook/react';
+import { addDecorator, configure, addParameters } from '@storybook/react';
 import { switchTheme } from './theme_service';
 switchTheme('light');
 import './style.scss';
 
-addDecorator(
-  withOptions({
-    name: 'Elastic Charts',
-    url: 'https://github.com/elastic/elastic-charts',
-    addonPanelInRight: true,
+import { create } from '@storybook/theming';
+addParameters({
+  options: {
+    theme: create({
+      base: 'light',
+      brandTitle: 'Elastic Charts',
+      brandUrl: 'https://github.com/elastic/elastic-charts',
+      brandImage:
+        'https://static-www.elastic.co/v3/assets/bltefdd0b53724fa2ce/blt6ae3d6980b5fd629/5bbca1d1af3a954c36f95ed3/logo-elastic.svg',
+    }),
+    panelPosition: 'right',
     sidebarAnimations: true,
-  }),
-);
+  },
+});
+
 addDecorator(withKnobs);
 addDecorator(
   withInfo({
     inline: true,
-    source: false,
+    source: true,
     styles: {
       infoBody: {
         marginTop: 0,

diff --git a/.storybook/theme_service.ts b/.storybook/theme_service.ts
@@ -1,8 +1,8 @@
 /* eslint-disable import/no-unresolved */
 // @ts-ignore
-import themeDark from '!!style-loader/useable?{attrs:{"nonce":"Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ="}}!css-loader!sass-loader!../src/theme_dark.scss';
+import themeDark from '../src/theme_dark.scss?lazy';
 // @ts-ignore
-import themeLight from '!!style-loader/useable?{attrs:{"nonce":"Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ="}}!css-loader!sass-loader!../src/theme_light.scss';
+import themeLight from '../src/theme_light.scss?lazy';
 
 export function switchTheme(theme: string) {
   switch (theme) {

diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -1,15 +1,31 @@
 // eslint-disable-next-line
 const path = require('path');
 
-module.exports = (baseConfig, env, config) => {
-  if (env === 'DEVELOPMENT') {
+const nonce = 'Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ=';
+const scssLoaders = [
+  {
+    loader: 'css-loader',
+    options: { importLoaders: 1 },
+  },
+  {
+    loader: 'postcss-loader',
+    options: {
+      plugins: [require('autoprefixer')],
+    },
+  },
+  'sass-loader',
+];
+
+module.exports = async ({ config, mode }) => {
+  if (mode === 'DEVELOPMENT') {
     config.devtool = 'inline-source-map';
   } else {
     config.devtool = 'source-map';
   }
+
   config.module.rules.push({
     test: /\.tsx?$/,
-    loader: require.resolve('ts-loader'),
+    loader: 'ts-loader',
     exclude: /node_modules/,
     options: {
       configFile: 'tsconfig.json',
@@ -20,38 +36,60 @@ module.exports = (baseConfig, env, config) => {
     loader: require.resolve('react-docgen-typescript-loader'),
     exclude: /node_modules/,
   });
+
+  // Replace default css rules with nonce
+  config.module.rules = config.module.rules.filter(({ test }) => !test.test('.css'));
   config.module.rules.push({
-    test: /\.tsx?$/,
-    include: [path.resolve(__dirname, '../stories')],
-    loaders: [
+    test: /\.css$/,
+    use: [
       {
-        loader: require.resolve('@storybook/addon-storysource/loader'),
+        loader: 'style-loader',
         options: {
-          parser: 'typescript',
+          attrs: {
+            nonce,
+          },
         },
       },
+      {
+        loader: 'css-loader',
+        options: { importLoaders: 1 },
+      },
     ],
-    enforce: 'pre',
   });
+
   config.module.rules.push({
     test: /\.scss$/,
+    include: [path.resolve(__dirname, '../.storybook'), path.resolve(__dirname, '../node_modules/@elastic')],
     use: [
       {
         loader: 'style-loader',
         options: {
           attrs: {
-            nonce: 'Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ=',
+            nonce,
           },
         },
       },
+      ...scssLoaders,
+    ],
+  });
+
+  // Used for lazy loaded scss files
+  config.module.rules.push({
+    test: /\.scss$/,
+    resourceQuery: /^\?lazy$/,
+    use: [
       {
-        loader: 'css-loader',
-      },
-      {
-        loader: 'sass-loader',
+        loader: 'style-loader/useable',
+        options: {
+          attrs: {
+            nonce,
+          },
+        },
       },
+      ...scssLoaders,
     ],
   });
+
   config.resolve.extensions.push('.ts', '.tsx');
 
   return config;

diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "build:ts": "tsc -p ./tsconfig.lib.json",
     "build:sass": "node-sass src/theme_light.scss dist/theme_light.css --output-style compressed && node-sass src/theme_dark.scss dist/theme_dark.css --output-style compressed && node-sass src/theme_only_light.scss dist/theme_only_light.css --output-style compressed && node-sass src/theme_only_dark.scss dist/theme_only_dark.css --output-style compressed",
     "concat:sass": "node scripts/concat_sass.js",
-    "build": "yarn build:clean && yarn build:ts && yarn build:sass && yarn concat:sass",
+    "autoprefix:css": "yarn postcss dist/*.css --no-map --use autoprefixer -d dist",
+    "build": "yarn build:clean && yarn build:ts && yarn build:sass && yarn autoprefix:css && yarn concat:sass",
     "start": "yarn storybook",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "storybook:build": "rm -rf .out && build-storybook -c .storybook -o .out",
@@ -46,19 +47,17 @@
     "@babel/polyfill": "^7.4.4",
     "@commitlint/cli": "^7.5.2",
     "@commitlint/config-conventional": "^7.5.0",
-    "@elastic/eui": "^11.2.1",
+    "@elastic/eui": "^12.3.1",
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/commit-analyzer": "^6.1.0",
     "@semantic-release/git": "^7.0.8",
     "@semantic-release/github": "^5.2.10",
     "@semantic-release/npm": "^5.1.4",
     "@semantic-release/release-notes-generator": "^7.1.4",
-    "@storybook/addon-actions": "^4.1.13",
-    "@storybook/addon-info": "^4.1.13",
-    "@storybook/addon-knobs": "^4.1.13",
-    "@storybook/addon-options": "^4.1.13",
-    "@storybook/addon-storysource": "^4.1.13",
-    "@storybook/react": "^4.1.13",
+    "@storybook/addon-actions": "^5.1.9",
+    "@storybook/addon-info": "^5.1.9",
+    "@storybook/addon-knobs": "^5.1.9",
+    "@storybook/react": "^5.1.9",
     "@types/classnames": "^2.2.7",
     "@types/d3-array": "^1.2.6",
     "@types/d3-collection": "^1.0.8",
@@ -70,14 +69,14 @@
     "@types/lodash": "^4.14.121",
     "@types/react": "^16.8.5",
     "@types/react-dom": "^16.8.2",
-    "@types/storybook__addon-actions": "^3.4.2",
-    "@types/storybook__addon-info": "^4.0.1",
-    "@types/storybook__addon-knobs": "^4.0.1",
-    "@types/storybook__addon-options": "^4.0.1",
-    "@types/storybook__react": "^4.0.0",
+    "@types/storybook__addon-actions": "^3.4.3",
+    "@types/storybook__addon-info": "^4.1.2",
+    "@types/storybook__addon-knobs": "^5.0.3",
+    "@types/storybook__react": "^4.0.2",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "@typescript-eslint/parser": "^1.9.0",
+    "autoprefixer": "^9.6.1",
     "babel-loader": "^8.0.5",
     "canvas": "^2.4.1",
     "commitizen": "^3.0.7",
@@ -96,6 +95,7 @@
     "jest": "^24.1.0",
     "jest-environment-jsdom-fourteen": "^0.1.0",
     "node-sass": "^4.11.0",
+    "postcss-cli": "^6.1.3",
     "prettier": "1.16.4",
     "react-docgen-typescript-loader": "^3.0.1",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
@@ -141,5 +141,8 @@
   "engines": {
     "node": "10.15.2",
     "yarn": "^1.10.1"
-  }
+  },
+  "browserslist": [
+    "last 2 versions"
+  ]
 }
diff --git a/src/chart_types/xy_chart/store/chart_state.ts b/src/chart_types/xy_chart/store/chart_state.ts
@@ -193,10 +193,10 @@ export class ChartStore {
 
   onElementClickListener?: ElementClickListener;
   onElementOverListener?: ElementOverListener;
-  onElementOutListener?: () => undefined;
+  onElementOutListener?: () => undefined | void;
   onBrushEndListener?: BrushEndListener;
   onLegendItemOverListener?: LegendItemListener;
-  onLegendItemOutListener?: () => undefined;
+  onLegendItemOutListener?: () => undefined | void;
   onLegendItemClickListener?: LegendItemListener;
   onLegendItemPlusClickListener?: LegendItemListener;
   onLegendItemMinusClickListener?: LegendItemListener;
@@ -644,7 +644,7 @@ export class ChartStore {
   setOnElementOverListener(listener: ElementOverListener) {
     this.onElementOverListener = listener;
   }
-  setOnElementOutListener(listener: () => undefined) {
+  setOnElementOutListener(listener: () => undefined | void) {
     this.onElementOutListener = listener;
   }
   setOnBrushEndListener(listener: BrushEndListener) {
@@ -653,7 +653,7 @@ export class ChartStore {
   setOnLegendItemOverListener(listener: LegendItemListener) {
     this.onLegendItemOverListener = listener;
   }
-  setOnLegendItemOutListener(listener: () => undefined) {
+  setOnLegendItemOutListener(listener: () => undefined | void) {
     this.onLegendItemOutListener = listener;
   }
   setOnLegendItemClickListener(listener: LegendItemListener) {

diff --git a/src/components/legend/_legend.scss b/src/components/legend/_legend.scss
@@ -1,10 +1,9 @@
 // Legend
 
 .echLegend {
-  @include euiOverflowShadow;
-  // Padding supplied in JS to match chart margins
+  // Margin supplied in JS to match chart margins
   position: absolute !important; // Override shadow
-  overflow: hidden;
+  overflow-y: hidden;
 }
 
 .echLegend--collapsed {
@@ -62,9 +61,7 @@
 }
 
 .echLegendListContainer {
-  @include euiScrollBar;
-  height: 100%;
+  @include euiYScrollWithShadows;
   width: 100%;
   overflow-y: auto;
-  overflow-x: hidden;
 }
diff --git a/src/specs/settings.tsx b/src/specs/settings.tsx
@@ -46,10 +46,10 @@ export interface SettingSpecProps {
   showLegendDisplayValue: boolean;
   onElementClick?: ElementClickListener;
   onElementOver?: ElementOverListener;
-  onElementOut?: () => undefined;
+  onElementOut?: () => undefined | void;
   onBrushEnd?: BrushEndListener;
   onLegendItemOver?: LegendItemListener;
-  onLegendItemOut?: () => undefined;
+  onLegendItemOut?: () => undefined | void;
   onLegendItemClick?: LegendItemListener;
   onLegendItemPlusClick?: LegendItemListener;
   onLegendItemMinusClick?: LegendItemListener;