[canvas] Color fixes + Storybook 5

.gitattributes

@@ -0,0 +1 @@
+**/__snapshots__/** linguist-generated=true

x-pack/package.json

@@ -30,13 +30,14 @@
     "@kbn/expect": "1.0.0",
     "@kbn/plugin-helpers": "9.0.2",
     "@kbn/test": "1.0.0",
-    "@storybook/addon-actions": "^4.1.7",
+    "@storybook/addon-actions": "^5.0.5",
     "@storybook/addon-console": "^1.1.0",
-    "@storybook/addon-info": "^4.0.7",
-    "@storybook/addon-knobs": "^4.0.7",
-    "@storybook/addon-options": "^4.1.7",
-    "@storybook/addon-storyshots": "^4.1.7",
-    "@storybook/react": "^4.0.7",
+    "@storybook/addon-info": "^5.0.5",
+    "@storybook/addon-knobs": "^5.0.5",
+    "@storybook/addon-options": "^5.0.5",
+    "@storybook/addon-storyshots": "^5.0.5",
+    "@storybook/react": "^5.0.5",
+    "@storybook/theming": "^5.0.5",
     "@types/angular": "1.6.50",
     "@types/cheerio": "^0.22.10",
     "@types/chroma-js": "^1.4.1",
@@ -65,9 +66,10 @@
     "@types/recompose": "^0.30.2",
     "@types/reduce-reducers": "^0.1.3",
     "@types/sinon": "^5.0.1",
-    "@types/storybook__addon-actions": "^3.4.1",
-    "@types/storybook__addon-info": "^3.4.2",
-    "@types/storybook__react": "^4.0.0",
+    "@types/storybook__addon-actions": "^3.4.2",
+    "@types/storybook__addon-info": "^4.1.1",
+    "@types/storybook__addon-knobs": "^4.0.4",
+    "@types/storybook__react": "^4.0.1",
     "@types/supertest": "^2.0.5",
     "@types/tinycolor2": "^1.4.1",
     "@types/uuid": "^3.4.4",

x-pack/plugins/canvas/.storybook/config.js

@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { configure, addDecorator } from '@storybook/react';
+import { configure, addDecorator, addParameters } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs/react';
 import { withInfo } from '@storybook/addon-info';
-import { withOptions } from '@storybook/addon-options';
+import { create } from '@storybook/theming';
 
 // Import dependent CSS
 require('@elastic/eui/dist/eui_theme_light.css');
@@ -21,16 +21,16 @@ if (process.env.NODE_ENV === 'test') {
 } else {
   // Customize the info for each story.
   addDecorator(
-    withInfo({ 
+    withInfo({
       inline: true,
       styles: {
         infoBody: {
-          margin: 20
+          margin: 20,
         },
         infoStory: {
-          margin: '40px 60px'
-        }
-      }
+          margin: '40px 60px',
+        },
+      },
     })
   );
 
@@ -44,7 +44,11 @@ function loadStories() {
   css.keys().forEach(filename => css(filename));
 
   // Include the legacy styles
-  const uiStyles = require.context('../../../../src/legacy/ui/public/styles', false, /[\/\\](?!mixins|variables|_|\.|bootstrap_(light|dark))[^\/\\]+\.less/);
+  const uiStyles = require.context(
+    '../../../../src/legacy/ui/public/styles',
+    false,
+    /[\/\\](?!mixins|variables|_|\.|bootstrap_(light|dark))[^\/\\]+\.less/
+  );
   uiStyles.keys().forEach(key => uiStyles(key));
 
   // Find all files ending in *.examples.ts
@@ -53,13 +57,18 @@ function loadStories() {
 }
 
 // Set up the Storybook environment with custom settings.
-addDecorator(
-  withOptions({
-    goFullScreen: false,
-    name: 'Canvas Storybook',
-    showAddonsPanel: true,
-    url: 'https://github.com/elastic/kibana/tree/master/x-pack/plugins/canvas'
-  })
-);
+addParameters({
+  options: {
+    theme: create({
+      base: 'light',
+      brandTitle: 'Canvas Storybook',
+      brandUrl: 'https://github.com/elastic/kibana/tree/master/x-pack/plugins/canvas',
+    }),
+    showPanel: true,
+    isFullscreen: false,
+    panelPosition: 'bottom',
+    isToolshown: true,
+  },
+});
 
 configure(loadStories, module);

x-pack/plugins/canvas/.storybook/webpack.config.js

@@ -8,19 +8,16 @@ const path = require('path');
 const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');
 
 // Extend the Storybook Webpack config with some customizations;
-module.exports = (_baseConfig, _env, config) => {
-
+module.exports = async ({ config, _mode }) => {
   // Include the React preset for Storybook JS files.
-  config.module.rules.push(
-    {
-      test: /\.js$/,
-      include: /\.storybook/,
-      loaders: 'babel-loader',
-      options: {
-        presets: [require.resolve('@babel/preset-react')],
-      },
+  config.module.rules.push({
+    test: /\.js$/,
+    exclude: /node_modules/,
+    loaders: 'babel-loader',
+    options: {
+      presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
     },
-  );
+  });
 
   // Find and alter the CSS rule to replace the Kibana public path string with a path
   // to the route we've added in middleware.js
@@ -30,10 +27,10 @@ module.exports = (_baseConfig, _env, config) => {
     options: {
       search: '__REPLACE_WITH_PUBLIC_PATH__',
       replace: '/',
-      flags: 'g'
-    }
+      flags: 'g',
+    },
   });
-  
+
   // Configure loading LESS files from Kibana
   config.module.rules.push({
     test: /\.less$/,
@@ -55,15 +52,9 @@ module.exports = (_baseConfig, _env, config) => {
     test: /\.tsx?$/,
     use: [
       {
-        loader: 'ts-loader',
+        loader: 'babel-loader',
         options: {
-          transpileOnly: true,
-          experimentalWatchApi: true,
-          onlyCompileBundledFiles: true,
-          configFile: require.resolve('../../../../tsconfig.json'),
-          compilerOptions: {
-            sourceMap: true,
-          },
+          presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
         },
       },
       require.resolve('react-docgen-typescript-loader'),
@@ -72,7 +63,7 @@ module.exports = (_baseConfig, _env, config) => {
 
   // Include the TSDocgen plugin to display Typescript param comments in the stories.
   config.plugins.push(new TSDocgenPlugin());
-  
+
   // Tell Webpack about the ts/x extensions
   config.resolve.extensions.push('.ts', '.tsx');
 

x-pack/plugins/canvas/public/components/color_dot/color_dot.tsx

@@ -5,26 +5,28 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { ReactNode, SFC } from 'react';
+import React, { FunctionComponent, ReactNode } from 'react';
 import tinycolor from 'tinycolor2';
 
 export interface Props {
-  /** Any valid CSS color. If not a valid CSS string, the dot will not render */
-  value: string;
+  /** Any valid CSS color. If not a valid CSS string, the dot will be transparent and checkered */
+  value?: string;
   /** Nodes to display within the dot.  Should fit within the constraints. */
   children?: ReactNode;
 }
 
-export const ColorDot: SFC<Props> = ({ value, children }) => {
+export const ColorDot: FunctionComponent<Props> = ({ value, children }) => {
   const tc = tinycolor(value);
-  if (!tc.isValid()) {
-    return null;
+  let style = {};
+
+  if (tc.isValid()) {
+    style = { background: value };
   }
 
   return (
     <div className="canvasColorDot">
       <div className="canvasColorDot__background canvasCheckered" />
-      <div className="canvasColorDot__foreground" style={{ background: tc.toRgbString() }}>
+      <div className="canvasColorDot__foreground" style={style}>
         {children}
       </div>
     </div>

x-pack/plugins/canvas/public/components/color_dot/index.ts

@@ -8,4 +8,5 @@ import { pure } from 'recompose';
 
 import { ColorDot as Component } from './color_dot';
 
+export { Props } from './color_dot';
 export const ColorDot = pure(Component);