Convert services to TypeScript, part 1

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Reinstate ([#1353](https://github.com/elastic/eui/pull/1353)) `onBlur` action on `EuiComboBox` ([#1364](https://github.com/elastic/eui/pull/1364))
+- Convert roughly half of the services to TypeScript ([#1400](https://github.com/elastic/eui/pull/1400))
 
 **Bug fixes**
 

package.json

@@ -41,6 +41,7 @@
     "url": "https://github.com/elastic/eui.git"
   },
   "dependencies": {
+    "@types/numeral": "^0.0.25",
     "classnames": "^2.2.5",
     "core-js": "^2.5.1",
     "focus-trap-react": "^3.0.4",
@@ -75,6 +76,7 @@
     "@types/lodash": "^4.14.116",
     "@types/react": "^16.3.0",
     "@types/react-virtualized": "^9.18.6",
+    "@types/uuid": "^3.4.4",
     "autoprefixer": "^7.1.5",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^8.0.1",

src/components/table/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="./table_pagination/index.d.ts" />
 import { CommonProps, NoArgCallback } from '../common';
 import { IconType } from '../icon';
-/// <reference path="../../services/alignment.d.ts" />
+import { HorizontalAlignment } from '../../services/alignment';
 
 import {
   SFC,

src/services/accessibility/html_id_generator.js → src/services/accessibility/html_id_generator.ts

@@ -7,7 +7,7 @@ import uuid from 'uuid';
  * specify it, it generates a random id prefix. If you specify a custom prefix
  * it should begin with an letter to be HTML4 compliant.
  */
-export function htmlIdGenerator(idPrefix) {
+export function htmlIdGenerator(idPrefix?: string) {
   const prefix = idPrefix || `i${uuid.v1()}`;
-  return (suffix) => `${prefix}_${suffix || uuid.v1()}`;
+  return (suffix?: string) => `${prefix}_${suffix || uuid.v1()}`;
 }

src/services/alignment.js → src/services/alignment.ts

@@ -1,3 +1,5 @@
 export const LEFT_ALIGNMENT = 'left';
 export const RIGHT_ALIGNMENT = 'right';
 export const CENTER_ALIGNMENT = 'center';
+
+export type HorizontalAlignment = 'left' | 'right' | 'center';

src/services/browser/browser.ts

@@ -0,0 +1,11 @@
+interface IBrowser {
+  isEventSupported: (name: string, element: EventTarget) => boolean;
+}
+
+const BrowserImpl: IBrowser = {
+  isEventSupported: (name, element): boolean => {
+    return `on${name}` in element;
+  },
+};
+
+export const Browser = Object.freeze(BrowserImpl);

src/services/color/color_palette.test.ts

@@ -0,0 +1,31 @@
+import { colorPalette} from './color_palette';
+
+describe('colorPalette', () => {
+  it('should generate the expected palette', () => {
+    const actualPalette = colorPalette('#FFFF6D', '#1EA593');
+    expect(actualPalette).toEqual([
+      '#FFFF6D',
+      '#E6F571',
+      '#CDEB75',
+      '#B4E17A',
+      '#9BD77E',
+      '#82CD82',
+      '#69C386',
+      '#50B98B',
+      '#37AF8F',
+      '#1EA593',
+    ]);
+  });
+
+  it('should generate a palette with the specified spread', () => {
+    const actualPalette = colorPalette('#FFFF6D', '#1EA593', 6);
+    expect(actualPalette).toEqual([
+      '#FFFF6D',
+      '#D2ED75',
+      '#A5DB7C',
+      '#78C984',
+      '#4BB78B',
+      '#1EA593',
+    ]);
+  });
+});

src/services/color/color_palette.js → src/services/color/color_palette.ts

@@ -1,11 +1,14 @@
+import { rgbDef } from './color_types';
+import { hexToRgb } from './hex_to_rgb';
+
 /**
  * Create the color object for manipulation by other functions
  */
 class Color {
-  constructor(r, g, b) {
-    this.r = r; // Red value
-    this.g = g; // Green value
-    this.b = b; // Blue value
+  collection: rgbDef;
+  text: string;
+
+  constructor(public r: number, public g: number, public b: number) {
     this.collection = [r, g, b];
     this.text = createHex(this.collection);
   }
@@ -15,21 +18,19 @@ class Color {
  * This function takes a color palette name and returns an array of hex color
  * codes for use in UI elements such as charts.
  *
- * @param {string} hexStart The beginning hexidecimal color code
- * @param {string} hexEnd The ending hexidecimal color code
+ * @param {string} hexStart The beginning hexadecimal color code
+ * @param {string} hexEnd The ending hexadecimal color code
  * @param {number} len The number of colors in the resulting array (default 10)
- * @returns {Array} Returns an array of hexidecimal color codes
+ * @returns {Array} Returns an array of hexadecimal color codes
  */
 
-function colorPalette(hexStart, hexEnd, len = 10) {
+export function colorPalette(hexStart: string, hexEnd: string, len: number = 10) {
   if (isHex(hexStart) && isHex(hexEnd)) {
-    const hex1 = formatHex(hexStart); // format to #RRGGBB
-    const hex2 = formatHex(hexEnd); // format to #RRGGBB
-    const colorArray = [];
-    const hexPalette = [];
+    const colorArray: Color[] = [];
+    const hexPalette: string[] = [];
     const count = len - 1;
-    const startHex = colorParse(hex1); // get RGB equivalent values as array
-    const endHex = colorParse(hex2); // get RGB equivalent values as array
+    const startHex = hexToRgb(hexStart); // get RGB equivalent values as array
+    const endHex = hexToRgb(hexEnd); // get RGB equivalent values as array
     colorArray[0] = new Color(startHex[0], startHex[1], startHex[2]); // create first color obj
     colorArray[count] = new Color(endHex[0], endHex[1], endHex[2]); // create last color obj
     const step = stepCalc(count, colorArray[0], colorArray[count]); // create array of step increments
@@ -52,75 +53,40 @@ function colorPalette(hexStart, hexEnd, len = 10) {
 }
 
 /**
- * Check if argument is a valid 3 or 6 character hexidecimal color code
+ * Check if argument is a valid 3 or 6 character hexadecimal color code
  */
-function isHex(value) {
+function isHex(value: string): boolean {
   return /^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value);
 }
 
 /**
- * Calculate and construct the hexideciaml color code from RGB values
+ * Calculate and construct the hexadecimal color code from RGB values
  */
-function createHex(rgbValues) {
+function createHex(rgbValues: rgbDef): string {
   let result = '';
   let val = 0;
   let piece;
   const base = 16;
   for (let k = 0; k < 3; k++) {
     val = Math.round(rgbValues[k]);
     piece = val.toString(base); // Converts to radix 16 based value (0-9, A-F)
-    if (piece.length < 2) {piece = `0${piece}`;}
+    if (piece.length < 2) {piece = `0${piece}`; }
     result = result + piece;
   }
-  result = `#${result.toUpperCase()}`; // Return in #RRGGBB fomat
+  result = `#${result.toUpperCase()}`; // Return in #RRGGBB format
   return result;
 }
 
 /**
- * Convert hexideciaml color into an array of RGB integer values
- */
-function colorParse(color) {
-  const base = 16;
-  let col = color.toUpperCase().replace('#', '');
-
-  if (col.length === 3) {
-    const a = col.substr(0, 1);
-    const b = col.substr(1, 1);
-    const c = col.substr(2, 1);
-    col = a + a + b + b + c + c;
-  }
-  const num = [col.substr(0, 2), col.substr(2, 2), col.substr(4, 2)];
-  const ret = [parseInt(num[0], base), parseInt(num[1], base), parseInt(num[2], base)];
-  return(ret);
-}
-
-/**
- * Format hexideciaml inputs to #RRGGBB
- */
-function formatHex(hex) {
-  let cleanHex = hex;
-  if (cleanHex.length === 3 || cleanHex.length === 6) {
-    cleanHex = `#${cleanHex}`;
-  }
-  if (cleanHex.length === 4) {
-    cleanHex = cleanHex.split('');
-    cleanHex = cleanHex[0] + cleanHex[1] + cleanHex[1] + cleanHex[2] + cleanHex[2] + cleanHex[3] + cleanHex[3];
-  }
-  return cleanHex;
-}
-
-/**
- * Calculate the step increment for each piece of the hexidecimal color code
+ * Calculate the step increment for each piece of the hexadecimal color code
  */
-function stepCalc(st, cStart, cEnd) {
+function stepCalc(st: number, cStart: Color, cEnd: Color): rgbDef {
   const steps = st;
-  const step = [
+  const step: rgbDef = [
     (cEnd.r - cStart.r) / steps, // Calc step amount for red value
     (cEnd.g - cStart.g) / steps, // Calc step amount for green value
     (cEnd.b - cStart.b) / steps, // Calc step amount for blue value
   ];
 
   return step;
 }
-
-export { colorPalette };

src/services/color/color_types.ts

@@ -0,0 +1 @@
+export type rgbDef = [number, number, number];

src/services/color/eui_palettes.ts

@@ -0,0 +1,60 @@
+interface EuiPalette {
+  colors: string[];
+}
+
+const euiPaletteColorBlind: EuiPalette = {
+  colors: [
+    '#1EA593',
+    '#2B70F7',
+    '#CE0060',
+    '#38007E',
+    '#FCA5D3',
+    '#F37020',
+    '#E49E29',
+    '#B0916F',
+    '#7B000B',
+    '#34130C',
+  ],
+};
+
+const euiPaletteForLightBackground: EuiPalette = {
+  colors: [
+    '#006BB4',
+    '#017D73',
+    '#F5A700',
+    '#BD271E',
+    '#DD0A73',
+  ],
+};
+
+const euiPaletteForDarkBackground: EuiPalette = {
+  colors: [
+    '#4DA1C0',
+    '#01B2A4',
+    '#C06C4C',
+    '#BF4D4D',
+    '#F5258C',
+  ],
+};
+
+const euiPaletteForStatus: EuiPalette = {
+  colors: [
+    '#58BA6D',
+    '#6ECE67',
+    '#A5E26A',
+    '#D2E26A',
+    '#EBDF61',
+    '#EBD361',
+    '#EBC461',
+    '#D99D4C',
+    '#D97E4C',
+    '#D75949',
+  ],
+};
+
+export const palettes = {
+  euiPaletteColorBlind,
+  euiPaletteForLightBackground,
+  euiPaletteForDarkBackground,
+  euiPaletteForStatus,
+};

src/services/color/hex_to_rgb.test.ts

@@ -0,0 +1,20 @@
+import { hexToRgb } from './hex_to_rgb';
+
+describe('hexToRgb ', () => {
+
+  it('should handle 3 digit codes without a hash prefix', () => {
+    expect(hexToRgb('0a8')).toEqual([0, 170, 136]);
+  });
+
+  it('should handle 3 digit codes with a hash prefix', () => {
+    expect(hexToRgb('#0a8')).toEqual([0, 170, 136]);
+  });
+
+  it('should handle 6 digit codes without a hash prefix', () => {
+    expect(hexToRgb('00aa88')).toEqual([0, 170, 136]);
+  });
+
+  it('should handle 6 digit codes with a hash prefix', () => {
+    expect(hexToRgb('#00aa88')).toEqual([0, 170, 136]);
+  });
+});