Retire TSlint

.eslintignore

@@ -1 +1,10 @@
+dist
+node_modules
 es
+lib
+types
+eui.d.ts
+**/*.snap.js
+**/assets/**/*.js
+src-docs/src/views/icon/icon_example.js
+src-framer/code/canvas.tsx

.eslintrc.js

@@ -1,16 +1,26 @@
 module.exports = {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
   settings: {
     "import/resolver": {
        node: {
-        extensions: [".js"]
+        extensions: [".ts", ".tsx", ".js", ".json"]
       },
       webpack: {
         config: "./src-docs/webpack.config.js"
       }
+    },
+    react: {
+      version: "detect"
     }
   },
   extends: [
     "@elastic/eslint-config-kibana",
+    "plugin:@typescript-eslint/recommended",
     // Prettier options need to come last, in order to override other style
     // rules.
     "prettier/react",
@@ -23,7 +33,23 @@ module.exports = {
   ],
   rules: {
     "prefer-template": "error",
-    "local/i18n": "error"
+    "local/i18n": "error",
+    "no-use-before-define": "off",
+    "quotes": ["warn", "single", "avoid-escape"],
+
+    "@typescript-eslint/array-type": ["error", "array-simple"],
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/class-name-casing": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "@typescript-eslint/indent": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-parameter-properties": "off",
+    "@typescript-eslint/no-triple-slash-reference": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_", "ignoreRestSiblings": true }],
+    "@typescript-eslint/no-use-before-define": "off",
   },
   env: {
     jest: true

custom_typings/framer/index.d.ts

@@ -0,0 +1,67 @@
+/**
+ * This was cobbled together from a few places, most notably:
+ *
+ * https://github.com/modest/framerx-js-lib/blob/master/src/index.d.ts
+ *
+ * It's extremley incompletely, probably wrong and shouldn't be relied upon
+ * to do almost anything.
+ */
+
+declare module 'framer' {
+  export enum ControlType {
+    Boolean = 'boolean',
+    Number = 'number',
+    String = 'string',
+    FusedNumber = 'fusednumber',
+    Enum = 'enum',
+    SegmentedEnum = 'segmentedenum',
+    Color = 'color',
+    Image = 'image',
+    File = 'file',
+    ComponentInstance = 'componentinstance',
+    Array = 'array',
+    Object = 'object',
+  }
+
+  export interface PropertyControls {
+    [propName: string]: { type: ControlType; [otherProp: string]: any };
+  }
+
+  export type Override<
+    T extends object & {
+      [key: string]: any;
+    }
+  > = OverrideObject<T> | OverrideFunction<T>;
+
+  export type OverrideFunction<P extends object = any> = (
+    props: P
+  ) => Partial<P>;
+
+  export type OverrideObject<T extends object = any> = Partial<T>;
+
+  export function Data<T extends object = object>(
+    initial?: Partial<T> | object
+  ): T;
+
+  export interface Animatable<Value> {
+    get(): Value;
+    set(value: Value | Animatable<Value>): void;
+    set(value: Value | Animatable<Value>, transaction?: number): void;
+  }
+
+  export function Animatable<Value>(
+    value: Value | Animatable<Value>
+  ): Animatable<Value>;
+
+  export interface Animate {
+    spring(from: any, to: any, options?: object): any;
+    bezier(from: any, to: any, options?: object): any;
+    linear(from: any, to: any, options?: number | object): any;
+    ease(from: any, to: any, options?: object): any;
+    easeIn(from: any, to: any, options?: object): any;
+    easeOut(from: any, to: any, options?: object): any;
+    easeInOut(from: any, to: any, options?: object): any;
+  }
+
+  export const animate: Animate;
+}

package.json

@@ -17,16 +17,12 @@
     "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && node ./scripts/compile-scss.js $npm_package_name",
     "compile-icons": "node ./scripts/compile-icons.js",
     "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
-    "lint": "yarn lint-es && yarn lint-ts && yarn lint-sass && yarn lint-framer",
+    "lint": "yarn tsc && yarn lint-es && yarn lint-sass",
     "lint-fix": "yarn lint-es-fix && yarn lint-ts-fix",
-    "lint-es": "eslint --cache --ignore-pattern \"**/*.snap.js\", --ignore-pattern \"**/assets/**/*.js\" \"src/**/*.js\" \"src-docs/**/*.js\"",
-    "lint-es-fix": "eslint --fix --cache --ignore-pattern \"**/*.snap.js\", \"**/assets/**/*.js\" \"src/**/*.js\" \"src-docs/**/*.js\"",
+    "lint-es": "eslint --cache '{src,src-docs,src-framer}/**/*.{ts,tsx,js}'",
+    "lint-es-fix": "yarn lint-es --fix",
     "lint-sass": "sass-lint -v --max-warnings 0",
     "lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
-    "lint-ts": "tsc -p ./tsconfig.json --noEmit && tslint -c ./tslint.yaml -p ./tsconfig.json",
-    "lint-ts-fix": "tslint -c ./tslint.yaml -p ./tsconfig.json --fix",
-    "lint-framer": "tslint -c ./tslint.yaml -p ./src-framer/tsconfig.json",
-    "lint-framer-fix": "tslint -c ./tslint.yaml -p ./src-framer/tsconfig.json --fix",
     "test": "yarn lint && yarn test-unit",
     "test-unit": "jest --config ./scripts/jest/config.json",
     "start-test-server": "webpack-dev-server --config src-docs/webpack.config.js --port 9999",
@@ -90,9 +86,11 @@
     "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
     "@types/uuid": "^3.4.4",
+    "@typescript-eslint/eslint-plugin": "^1.9.0",
+    "@typescript-eslint/parser": "^1.9.0",
     "autoprefixer": "^7.1.5",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^8.0.1",
+    "babel-eslint": "^10.0.1",
     "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-add-module-exports": "^1.0.0",
@@ -114,18 +112,18 @@
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.0",
-    "eslint": "^4.9.0",
+    "eslint": "^5.16.0",
     "eslint-config-prettier": "^4.2.0",
-    "eslint-import-resolver-webpack": "^0.8.3",
-    "eslint-plugin-babel": "^4.1.2",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jest": "^21.6.2",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-import-resolver-webpack": "^0.11.1",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-import": "^2.17.2",
+    "eslint-plugin-jest": "^22.5.1",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-local": "^1.0.0",
-    "eslint-plugin-mocha": "^4.11.0",
+    "eslint-plugin-mocha": "^5.3.0",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.13.0",
     "file-loader": "^1.1.11",
     "findup": "^0.1.5",
     "fork-ts-checker-webpack-plugin": "^0.4.4",
@@ -169,10 +167,7 @@
     "sinon": "^4.4.8",
     "start-server-and-test": "^1.1.4",
     "style-loader": "^0.19.0",
-    "tslint": "^5.11.0",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "^3.3.3",
+    "typescript": "^3.4.5",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "url-loader": "^1.0.1",
     "wdio-chromedriver-service": "^0.1.2",

scripts/eslint-plugin-i18n/i18n.js

@@ -1,5 +1,7 @@
 // Enforce EuiI18n token names & variable names in render prop
 
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const path = require('path');
 
 function attributesArrayToLookup(attributesArray) {
@@ -13,7 +15,7 @@ function attributesArrayToLookup(attributesArray) {
 }
 
 function getDefinedValues(valuesNode) {
-  if (valuesNode == null) return new Set();
+  if (valuesNode == null || valuesNode.expression.properties == null) return new Set();
   return valuesNode.expression.properties.reduce(
     (valueNames, property) => {
       valueNames.add(property.key.name);
@@ -239,7 +241,7 @@ module.exports = {
             // default is a function
             // validate the destructured param defined by default function match the values
             const defaultFn = attributes.default.expression;
-            const objProperties = defaultFn.params ? defaultFn.params[0].properties : [];
+            const objProperties = defaultFn.params && defaultFn.params[0] ? defaultFn.params[0].properties : [];
             const expectedNames = new Set(objProperties.map(property => property.key.name));
             if (areSetsEqual(valueNames, expectedNames) === false) {
               context.report({

src-docs/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: '../.eslintrc.js',
+  rules: {
+    '@typescript-eslint/no-var-requires': 'off',
+  }
+}

src-docs/src/components/guide_section/guide_section.js

@@ -367,16 +367,16 @@ export class GuideSection extends Component {
       sourceObject => sourceObject.type === name
     );
     const npmImports = code
-      .replace(/(from )'(..\/)+src\/components(\/?';)/, `from '@elastic/eui';`)
+      .replace(/(from )'(..\/)+src\/components(\/?';)/, "from '@elastic/eui';")
       .replace(
         /(from )'(..\/)+src\/services(\/?';)/,
-        `from '@elastic/eui/lib/services';`
+        "from '@elastic/eui/lib/services';"
       )
       .replace(
         /(from )'(..\/)+src\/experimental(\/?';)/,
-        `from '@elastic/eui/lib/experimental';`
+        "from '@elastic/eui/lib/experimental';"
       )
-      .replace(/(from )'(..\/)+src\/components\/.*?';/, `from '@elastic/eui';`);
+      .replace(/(from )'(..\/)+src\/components\/.*?';/, "from '@elastic/eui';");
 
     return (
       <div key={name} ref={name}>

src-docs/src/routes.js

@@ -206,7 +206,7 @@ const slugify = str => {
 const createExample = example => {
   if (!example) {
     throw new Error(
-      `One of your example pages is undefined. This usually happens when you export or import it with the wrong name.`
+      'One of your example pages is undefined. This usually happens when you export or import it with the wrong name.'
     );
   }
 

src-docs/src/views/card/card_image.js

@@ -42,7 +42,7 @@ export default () => (
         href="https://elastic.github.io/eui/"
         image="https://source.unsplash.com/400x200/?City"
         icon={<EuiIcon size="xxl" type="logoBeats" />}
-        title={`Beats in the City`}
+        title={'Beats in the City'}
         description="This card has an href and should be a link."
       />
     </EuiFlexItem>

src-docs/src/views/card/card_layout.js

@@ -12,25 +12,25 @@ export default () => (
     <EuiFlexItem>
       <EuiCard
         layout="horizontal"
-        icon={<EuiIcon size="xxl" type={`logoBeats`} />}
-        title={`Elastic Beats`}
+        icon={<EuiIcon size="xxl" type={'logoBeats'} />}
+        title={'Elastic Beats'}
         description="Example of a card's description. Stick to one or two sentences."
         onClick={() => window.alert('Card clicked')}
       />
     </EuiFlexItem>
     <EuiFlexItem>
       <EuiCard
         layout="horizontal"
-        icon={<EuiIcon size="xxl" type={`logoCloud`} />}
-        title={`Elastic Cloud`}
+        icon={<EuiIcon size="xxl" type={'logoCloud'} />}
+        title={'Elastic Cloud'}
         description="Example of a card's description. Stick to one or two sentences."
         onClick={() => window.alert('Card clicked')}
       />
     </EuiFlexItem>
     <EuiFlexItem>
       <EuiCard
         layout="horizontal"
-        title={`No icon example`}
+        title={'No icon example'}
         description="Example of a card's description. Stick to one or two sentences."
         onClick={() => window.alert('Card clicked')}
       />

src-docs/src/views/context_menu/context_menu_example.js

@@ -54,7 +54,7 @@ export const ContextMenuExample = {
       demo: <ContextMenu />,
     },
     {
-      title: `With single panel`,
+      title: 'With single panel',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -74,7 +74,7 @@ export const ContextMenuExample = {
       demo: <SinglePanel />,
     },
     {
-      title: `Displaying custom elements`,
+      title: 'Displaying custom elements',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -95,7 +95,7 @@ export const ContextMenuExample = {
       demo: <ContentPanel />,
     },
     {
-      title: `Using panels with mixed items & content`,
+      title: 'Using panels with mixed items & content',
       source: [
         {
           type: GuideSectionTypes.JS,

src-docs/src/views/drag_and_drop/drag_and_drop_example.js

@@ -60,16 +60,16 @@ export const DragAndDropExample = {
         </p>
         <ul>
           <li>
-            <EuiCode>{`<EuiDragDropContext />`}</EuiCode>: Section of your
+            <EuiCode>{'<EuiDragDropContext />'}</EuiCode>: Section of your
             application containing the draggable elements and the drop targets.
           </li>
           <li>
-            <EuiCode>{`<EuiDroppable />`}</EuiCode>: Area into which items can
-            be dropped. Contains <EuiCode>{`<EuiDraggable />`}</EuiCode>s.
+            <EuiCode>{'<EuiDroppable />'}</EuiCode>: Area into which items can
+            be dropped. Contains <EuiCode>{'<EuiDraggable />'}</EuiCode>s.
           </li>
           <li>
-            <EuiCode>{`<EuiDraggable />`}</EuiCode>: Items that can be dragged.
-            Must be part of an <EuiCode>{`<EuiDroppable />`}</EuiCode>
+            <EuiCode>{'<EuiDraggable />'}</EuiCode>: Items that can be dragged.
+            Must be part of an <EuiCode>{'<EuiDroppable />'}</EuiCode>
           </li>
         </ul>
       </EuiText>
@@ -158,7 +158,7 @@ export const DragAndDropExample = {
           <ul>
             <li>
               <EuiCode>reorder</EuiCode>:{' '}
-              {`change an item's location in a droppable area`}
+              {"change an item's location in a droppable area"}
             </li>
             <li>
               <EuiCode>copy</EuiCode>: create a duplicate of an item in a

src-docs/src/views/flex/flex_example.js

@@ -470,7 +470,7 @@ export const FlexExample = {
           By default <EuiCode>EuiFlexGroup</EuiCode> is responsive. However,
           often you only want to use groups for alignment and margins, rather
           than layouts. Simply apply the{' '}
-          <EuiCode>responsive={`{false}`}</EuiCode> prop to retain a single row
+          <EuiCode>responsive={'{false}'}</EuiCode> prop to retain a single row
           layout for the group.
         </p>
       ),

src-docs/src/views/guidelines/sass.js

@@ -232,7 +232,7 @@ function renderAnimationSpeed(speed) {
           <EuiSpacer size="s" />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <div className={`guideSass__animParent`}>
+      <div className={'guideSass__animParent'}>
         <div className="guideSass__animChild" />
       </div>
     </div>
@@ -257,7 +257,7 @@ function renderAnimationTiming(speed) {
           <EuiSpacer size="s" />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <div className={`guideSass__animParent`}>
+      <div className={'guideSass__animParent'}>
         <div className="guideSass__animChild" />
       </div>
     </div>