Using EUI strictly as Dev dependency

.ci/bin/check_paths_for_matches.py

@@ -0,0 +1,80 @@
+#!/usr/bin/env python3
+"""
+Small wrapper script for jenkins to see if a regex pattern matches any of the
+paths generated by diffing between two commits.
+"""
+import argparse
+import os
+import re
+import subprocess
+import sys
+
+debug = "DEBUG" in os.environ
+
+
+def check_paths_for_matches(pattern, git_commit, git_previous_commit):
+    """Check if any paths between GIT_PREVIOUS_COMMIT and GIT_COMMIT match our pattern.
+
+    For merge commits only actual path changes are included rather than changes
+    from all parents. If GIT_PREVIOUS_COMMIT is not populated, use just the
+    paths that GIT_COMMIT represents. If GIT_PREVIOUS_COMMIT is not populated
+    and GIT_COMMIT is a merge commit, use all path changes from each parent. If
+    GIT_PREVIOUS_COMMIT is the same as GIT_COMMIT, that should generate no path
+    changes.
+    """
+    # Handle case where GIT_PREVIOUS_COMMIT isn't set (e.g. the first build),
+    if not git_previous_commit:
+        command = [
+            "git",
+            "diff-tree",
+            "-m",
+            "--no-commit-id",
+            "--name-only",
+            "-r",
+            git_commit,
+        ]
+    else:
+        command = ["git", "diff", "--name-only", git_previous_commit, git_commit]
+
+    # Run the command and populate paths.
+    completed_process = subprocess.run(
+        command, check=True, stdout=subprocess.PIPE, stderr=subprocess.STDOUT
+    )
+    paths = completed_process.stdout.decode().strip().split("\n")
+
+    # Look for any matches of pattern -> path.
+    possible_matches = [(path, pattern.match(path)) for path in paths]
+    if any([match for path, match in possible_matches]):
+        if debug:
+            print("matching change(s) found for {}".format(git_commit))
+            for path, match in possible_matches:
+                if match:
+                    print(path)
+        sys.stdout.write("match")
+        sys.stdout.flush()
+        exit(0)
+    else:
+        if debug:
+            print("no matching change(s) found for {}".format(git_commit))
+        exit(1)
+
+
+if __name__ == "__main__":
+    # Change our working directory so we're in $WORKSPACE.
+    os.chdir(os.path.dirname(os.path.abspath(__file__)))
+
+    # Define and parse arguments.
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--pattern", help="A regular expression pattern.")
+    parser.add_argument(
+        "--git-commit", help="The contents of the GIT_COMMIT environmental variable."
+    )
+    parser.add_argument(
+        "--git-previous-commit",
+        nargs="?",
+        help="The contents of the GIT_PREVIOUS_COMMIT environmental variable.",
+    )
+    args = parser.parse_args()
+
+    compiled_pattern = re.compile(args.pattern)
+    check_paths_for_matches(compiled_pattern, args.git_commit, args.git_previous_commit)

.ci/jobs/defaults.yml

@@ -0,0 +1,76 @@
+---
+
+##### GLOBAL METADATA
+
+- meta:
+    cluster: kibana-ci
+
+##### JOB DEFAULTS
+
+- job:
+    logrotate:
+      daysToKeep: 30
+      numToKeep: 100
+    properties:
+    - github:
+        url: https://github.com/elastic/elastic-charts/
+    - inject:
+        properties-content: 'HOME=$JENKINS_HOME
+
+          '
+    concurrent: true
+    node: linux
+    scm:
+    - git:
+        name: origin
+        credentials-id: f6c7695a-671e-4f4f-a331-acdce44ff9ba
+        reference-repo: /var/lib/jenkins/.git-references/elastic-charts.git
+        branches:
+        - ${ghprbActualCommit}
+        url: [email protected]:elastic/elastic-charts.git
+        refspec: +refs/pull/${ghprbPullId}/*:refs/remotes/origin/pr/${ghprbPullId}/*
+        basedir: ''
+        wipe-workspace: 'True'
+    triggers:
+    - github-pull-request:
+        org-list:
+        - elastic
+        allow-whitelist-orgs-as-admins: true
+        github-hooks: true
+        status-context: kibana-ci
+        cancel-builds-on-update: true
+    vault:
+      role_id: 443f9500-f443-19ba-d698-1a48e104f8ba
+    wrappers:
+    - ansicolor
+    - timeout:
+        type: absolute
+        timeout: 180
+        fail: true
+    - timestamps
+    builders:
+    - shell: |-
+        #!/usr/local/bin/runbld
+
+        set -euo pipefail
+
+        set +x
+        export VAULT_TOKEN=$(vault write -field=token auth/approle/login role_id="$VAULT_ROLE_ID" secret_id="$VAULT_SECRET_ID")
+        unset VAULT_ROLE_ID VAULT_SECRET_ID
+        export CODECOV_TOKEN=$(vault read -field=token secret/kibana-issues/prod/codecov)
+        unset VAULT_TOKEN
+        set -x
+
+        ./.ci/run.sh
+    publishers:
+    - email:
+        recipients: [email protected]
+    - google-cloud-storage:
+        credentials-id: kibana-ci-gcs-plugin
+        uploads:
+        - classic:
+            file-pattern: stories/__image_diff_snapshots__/**/*
+            storage-location: gs://kibana-ci-artifacts/jobs/$JOB_NAME/$BUILD_NUMBER
+            share-publicly: true
+            upload-for-failed-jobs: true
+            show-inline: true

.ci/jobs/elastic+elastic-charts+pull-request.yml

@@ -0,0 +1,5 @@
+---
+- job:
+    name: elastic+elastic-charts+pull-request
+    display-name: 'elastic / elastic-charts # pull-request'
+    description: Testing of elastic-charts pull requests.

.playground/index.tsx

@@ -1,6 +1,7 @@
 import '@babel/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import '../src/reset_light.scss';
 import '../src/theme_light.scss';
 import { Playground } from './playgroud';
 

.storybook/config.ts

@@ -2,11 +2,9 @@ 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 '../src/theme_light.scss';
-import './style.scss';
 import { switchTheme } from './theme_service';
-
 switchTheme('light');
+import './style.scss';
 
 addDecorator(
   withOptions({

.storybook/style.scss

@@ -4,7 +4,7 @@
 }
 .story-chart-dark {
   box-sizing: border-box;
-  background: black;
+  background: #1a1b20;
 }
 #root {
   background-color: blanchedalmond;

.storybook/theme_service.ts

@@ -1,16 +1,24 @@
 /* tslint:disable */
 // @ts-ignore
+import resetDark from '!!style-loader/useable?{attrs:{"nonce":"Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ="}}!css-loader!sass-loader!../src/reset_dark.scss';
+// @ts-ignore
+import resetLight from '!!style-loader/useable?{attrs:{"nonce":"Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ="}}!css-loader!sass-loader!../src/reset_light.scss';
+// @ts-ignore
 import themeDark from '!!style-loader/useable?{attrs:{"nonce":"Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ="}}!css-loader!sass-loader!../src/theme_dark.scss';
 // @ts-ignore
 import themeLight from '!!style-loader/useable?{attrs:{"nonce":"Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ="}}!css-loader!sass-loader!../src/theme_light.scss';
 
 export function switchTheme(theme: string) {
   switch (theme) {
     case 'light':
+      resetDark.unuse();
+      resetLight.use();
       themeDark.unuse();
       themeLight.use();
       return;
     case 'dark':
+      resetLight.unuse();
+      resetDark.use();
       themeLight.unuse();
       themeDark.use();
       return;

package.json

@@ -15,7 +15,7 @@
     "cz": "git-cz",
     "build:clean": "rm -rf ./dist",
     "build:ts": "tsc -p ./tsconfig.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",
+    "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/reset_light.scss dist/reset_light.css --output-style compressed && node-sass src/reset_dark.scss dist/reset_dark.css --output-style compressed",
     "build": "yarn build:clean && yarn build:ts && yarn build:sass",
     "start": "yarn storybook",
     "storybook": "start-storybook -p 9001 -c .storybook",
@@ -48,6 +48,7 @@
   "devDependencies": {
     "@babel/core": "^7.3.4",
     "@babel/polyfill": "^7.4.4",
+    "@elastic/eui": "^11.2.1",
     "@commitlint/cli": "^7.5.2",
     "@commitlint/config-conventional": "^7.5.0",
     "@semantic-release/changelog": "^3.0.2",

src/components/_annotation.scss

@@ -1,12 +1,6 @@
 .echAnnotation {
-  @include echFontSizeXS;
   pointer-events: none;
   position: absolute;
-  z-index: $echZLevel9;
-  max-width: $echSizeXL * 10;
-  overflow: hidden;
-  overflow-wrap: break-word;
-  transition: opacity $echAnimSpeedNormal;
   user-select: none;
 }
 
@@ -16,34 +10,22 @@
 }
 
 .echAnnotation__tooltip {
-  @include echBottomShadow($color: $echColorFullShade);
-  @include echFontSizeXS;
-  pointer-events: none;
+  @include euiToolTipStyle;
+  @include euiFontSizeXS;
   position: absolute;
-  z-index: $echZLevel9;
-  background-color: rgba(tintOrShade($echColorFullShade, 25%, 80%), 0.9);
-  color: $echColorGhost;
-  border-radius: $echBorderRadius;
-  max-width: $echSizeXL * 10;
-  overflow: hidden;
-  overflow-wrap: break-word;
-  transition: opacity $echAnimSpeedNormal;
+  padding: 0;
+
+  // overflow: hidden;
+  transition: opacity $euiAnimSpeedNormal;
+  pointer-events: none;
   user-select: none;
 }
 
 .echAnnotation__header {
-  margin: 0;
-  background: rgba(shade($echColorGhost, 20%), 0.9);
-  color: $echColorFullShade;
-  padding: 0 8px;
+  @include euiToolTipTitle;
+  padding: $euiSizeXS ($euiSizeXS * 2);
 }
 
 .echAnnotation__details {
-  margin: 0;
-  padding: 0 8px;
-  display: flex;
-}
-
-.echAnnotation__detailsMarker {
-  margin-right: 4px;
+  padding: $euiSizeXS ($euiSizeXS * 2);
 }

src/components/_container.scss

@@ -1,16 +1,15 @@
+/**
+ * The Base Elastic-Charts container
+ */
+
 .echContainer {
   position: relative;
   width: 100%;
   height: 100%;
-  font-size: $echFontSize;
-  color: $echTextColor;
-  box-sizing: border-box;
+
   &:hover {
     .echLegend__toggle {
       opacity: 1;
     }
   }
-  div {
-    box-sizing: border-box;
-  }
 }

src/components/_crosshair.scss

@@ -1,16 +1,11 @@
-.echCrosshair {
+.echCrosshair,
+.echCrosshair__band,
+.echCrosshair__line {
   position: absolute;
   pointer-events: none;
 }
 
-.echCrosshair__band {
-  position: absolute;
-  pointer-events: none;
-}
 
 .echCrosshair__line {
-  position: absolute;
-  pointer-events: none;
-  z-index: $echZLevel8;
-  background: 'transparent';
+  z-index: $euiZLevel8;
 }

src/components/_index.scss

@@ -1,7 +1,11 @@
+@import '../../node_modules/@elastic/eui/src/components/tool_tip/variables';
+@import '../../node_modules/@elastic/eui/src/components/tool_tip/mixins';
+
 @import 'container';
-@import 'icons/icon';
-@import 'legend/index';
-@import 'tooltip';
+@import 'annotation';
 @import 'crosshair';
 @import 'highlighter';
-@import 'annotation';
+@import 'tooltip';
+
+@import 'icons/index';
+@import 'legend/index';