chore: switch to eslint

.eslintignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.yalc
+.yarn
+build
+cache
+.cache

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@stoplight'],
+};

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('@stoplight/eslint-config/prettier.config'),
+};

.storybook/config.js

@@ -1,3 +1,3 @@
 import '@stoplight/storybook-config/config';
 
-import '../src/styles/_ui-kit.scss';
+import '../src/styles/_ui-kit.scss';

.storybook/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const defaultConfig = require('@stoplight/storybook-config/webpack.config');
 const inliner = require('sass-inline-svg');
-const {last} = require('lodash');
+const { last } = require('lodash');
 
 const cwd = process.cwd();
 
@@ -16,7 +16,7 @@ module.exports = (baseConfig, env, config) => {
     {
       optimize: true,
       encodingFormat: 'uri',
-    }
+    },
   );
 
   return config;

README.md

@@ -1,8 +1,12 @@
 # UI-KIT
 
-[![Maintainability](https://api.codeclimate.com/v1/badges/f0df5b38120a6471be33/maintainability)](https://codeclimate.com/repos/5bdb489c9a98842d0a00d211/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/f0df5b38120a6471be33/test_coverage)](https://codeclimate.com/repos/5bdb489c9a98842d0a00d211/test_coverage)
+[![Maintainability](https://api.codeclimate.com/v1/badges/f0df5b38120a6471be33/maintainability)](https://codeclimate.com/repos/5bdb489c9a98842d0a00d211/maintainability)
+[![Test Coverage](https://api.codeclimate.com/v1/badges/f0df5b38120a6471be33/test_coverage)](https://codeclimate.com/repos/5bdb489c9a98842d0a00d211/test_coverage)
 
-Stoplight UI-Kit is a shared component library that contains basic components built using [Blueprint](https://blueprintjs.com/docs/), [Tailwind](https://next.tailwindcss.com/), and [SCSS](https://sass-lang.com/guide) All custom components should support overridable theming from a theme object, and also come with default styling from our prepackaged theme.
+Stoplight UI-Kit is a shared component library that contains basic components built using
+[Blueprint](https://blueprintjs.com/docs/), [Tailwind](https://next.tailwindcss.com/), and
+[SCSS](https://sass-lang.com/guide) All custom components should support overridable theming from a theme object, and
+also come with default styling from our prepackaged theme.
 
 - Explore the components: [Storybook](https://stoplightio.github.io/ui-kit/)
 - View the changelog: [Releases](https://github.com/stoplightio/ui-kit/releases)
@@ -19,39 +23,61 @@ yarn add @stoplight/ui-kit
 - `yarn storybook`: Starts the storybook playground
 - `yarn build`: Builds the package.
 - `yarn build.styles`: Builds and copies over the appropriate scss related files to dist.
-- `yarn build.tw`: Generates the tailwind scss file from the config (needs to be rerun everytime `tailwind.config` is updated).
+- `yarn build.tw`: Generates the tailwind scss file from the config (needs to be rerun everytime `tailwind.config` is
+  updated).
 - `yarn build.bp`: Generates the blueprint icons scss file (should not need to run often)
 
 ## Important Files/Folders
 
 #### [./src/styles/blueprint](./src/styles/blueprint)
 
-- [\_base.scss](./src/styles/blueprint/_base.scss):
-  Contains a remapping of stoplight variables to blueprint variables. This file should rarely be edited directly and require minimal maintenance. Any updates to variables in here should be updated through [\_variables.scss](./src/styles/common/_variables.scss)
+- [\_base.scss](./src/styles/blueprint/_base.scss): Contains a remapping of stoplight variables to blueprint variables.
+  This file should rarely be edited directly and require minimal maintenance. Any updates to variables in here should be
+  updated through [\_variables.scss](./src/styles/common/_variables.scss)
 
-- [\_icons.scss](./src/styles/blueprint/_icons.scss): Auto generated file of blueprint icon fonts. Created with the `yarn build.bp` command and should not be updated directly
+- [\_icons.scss](./src/styles/blueprint/_icons.scss): Auto generated file of blueprint icon fonts. Created with the
+  `yarn build.bp` command and should not be updated directly
 
 - [icons directory](./src/styles/blueprint/icons): Icon fonts used by \_icons.scss
 
 #### [./src/styles/tailwind](./src/styles/tailwind)
 
-- [\_base.scss](./src/styles/tailwind/_base.scss): Auto generated tailwind classnames that utilize our stoplight scss variables. This file should NEVER be updated directly and is created using `yarn build.tw`
+- [\_base.scss](./src/styles/tailwind/_base.scss): Auto generated tailwind classnames that utilize our stoplight scss
+  variables. This file should NEVER be updated directly and is created using `yarn build.tw`
 
-- [tailwind.config.js](./src/styles/tailwind/tailwind.config.js): Tailwind config object. Note two special features. A few properties, like colors, map to scss [utility function](./src/styles/common/_utils.scss) strings so that we can properly convert to our scss theme variable during the compile process. And the inclusing of a `.dark` plugin that adds extra dark classes so we can do things like `className="text-success dark:text-danger"`
+- [tailwind.config.js](./src/styles/tailwind/tailwind.config.js): Tailwind config object. Note two special features. A
+  few properties, like colors, map to scss [utility function](./src/styles/common/_utils.scss) strings so that we can
+  properly convert to our scss theme variable during the compile process. And the inclusing of a `.dark` plugin that
+  adds extra dark classes so we can do things like `className="text-success dark:text-danger"`
 
 #### [./src/styles/common](./src/styles/common)
 
 - [\_variables.scss](./src/styles/common/_variables.scss): Contains three major variables used for style consistency:
 
-  - `$sl-defaults`: app wide defaults, this where we define defaults for things we might want an end consumer to overwrite. This should never be used outside of this file. Notice that it extends the defaults/variables from specific components like "code"
+  - `$sl-defaults`: app wide defaults, this where we define defaults for things we might want an end consumer to
+    overwrite. This should never be used outside of this file. Notice that it extends the defaults/variables from
+    specific components like "code"
 
-  - `$sl-config`: This is an empy variable with a default value of `()`, think of it as an empty representation of what a consumer might pass to ui-kit. It is needed since scss `map-merge` does not deep merge, so we cannot explicity overwrite `$sl-defaults`. For more information on this see [example usage below](#example-usage). This should never be used elsewhere within this repo
+  - `$sl-config`: This is an empy variable with a default value of `()`, think of it as an empty representation of what
+    a consumer might pass to ui-kit. It is needed since scss `map-merge` does not deep merge, so we cannot explicity
+    overwrite `$sl-defaults`. For more information on this see [example usage below](#example-usage). This should never
+    be used elsewhere within this repo
 
-  - `$sl-variables`: A map that equals a deep merge of consumer passed in `$sl-config` and internally defined `$sl-defaults`. This is the actual variable map that our theme with be using. and should only every be used in [\_theme]()./src/styles/common/\_theme.scss)
+  - `$sl-variables`: A map that equals a deep merge of consumer passed in `$sl-config` and internally defined
+    `$sl-defaults`. This is the actual variable map that our theme with be using. and should only every be used in
+    [\_theme]()./src/styles/common/\_theme.scss)
 
-- [\_theme.scss](./src/styles/common/_theme.scss): Contains our SCSS Theme `$sl-theme` and helpful theme getters!! Includes any values that we think might be valuable to other components. Notice that colors uses `$sl-variables` because we allow that value to be overwritten by a consumer. It's set up in such a way that that we will have complete control over how these properties behave. (colors can be changed but font sizes for example cannot). The theme will also include any fields from \$sl-variables that are not explicity defined in the main `$sl-theme` map. So for example, although `code-editor` does not appear in `$sl-theme` directly it's still included because we extend the fields \$sl-variables that are missing. If you want to access the theme in any other scss files just import @stoplight/ui-kit/src/styles/common/theme
+- [\_theme.scss](./src/styles/common/_theme.scss): Contains our SCSS Theme `$sl-theme` and helpful theme getters!!
+  Includes any values that we think might be valuable to other components. Notice that colors uses `$sl-variables`
+  because we allow that value to be overwritten by a consumer. It's set up in such a way that that we will have complete
+  control over how these properties behave. (colors can be changed but font sizes for example cannot). The theme will
+  also include any fields from \$sl-variables that are not explicity defined in the main `$sl-theme` map. So for
+  example, although `code-editor` does not appear in `$sl-theme` directly it's still included because we extend the
+  fields \$sl-variables that are missing. If you want to access the theme in any other scss files just import
+  @stoplight/ui-kit/src/styles/common/theme
 
-- [\_utils.scss](./src/styles/common/_utils.scss): Has some helpful utils around map functions. Includes map-deep-get, map-safe-get, and map-extend
+- [\_utils.scss](./src/styles/common/_utils.scss): Has some helpful utils around map functions. Includes map-deep-get,
+  map-safe-get, and map-extend
 
 #### [./src/styles/ui-kit.scss](./src/styles/ui-kit.scss): This is the scss file that will be imported by the end consumer and contains everything else!
 
@@ -60,17 +86,28 @@ yarn add @stoplight/ui-kit
 1. Add a folder with you component name to the `./src/components` directory
 2. Add a `{Component}.tsx` under `./src/components/{component}`
 3. Add a `__tests__` folder under `./src/components/{component}`
-4. If this component requires special styling or a unique class name create `./src/components/{component}/styles/_base.scss` and `./src/components/{component}/styles/class.ts` respectively
+4. If this component requires special styling or a unique class name create
+   `./src/components/{component}/styles/_base.scss` and `./src/components/{component}/styles/class.ts` respectively
 
    - Rules for styling:
-     - **Class Name**: If the component does not follow under one of the blueprint class names, create one for this component using the name space variable, we need to use namespacing so we keep our classes unique, the NS variable will always be the same
+     - **Class Name**: If the component does not follow under one of the blueprint class names, create one for this
+       component using the name space variable, we need to use namespacing so we keep our classes unique, the NS
+       variable will always be the same
      ```javascript
      const NS = process.env.BLUEPRINT_NAMESPACE || 'bp3';
      export const CODE_EDITOR = `${NS}-code-editor`;
      ```
-     -**SCSS**: Every component using custom scss should support both light an dark styling. Dark selectors will look something like `.{$ns}-dark .{$ns}-code-editor` look at [tailwind](./src/styles/tailwind/_base.scss) for examples on how this is done. If a component requires themable variables (think really just colors), they should be defined in an adjacent file named `_variables.scss`. The variables should NEVER be used directly. Instead they get injected back into the theme and should be used by using the `get-theme` function in your `_base.scss`. Lastly avoid created separate variables for light and dark. So don't create `$sl-var: red` and `$sl-var-dark: blue`, instead be creative and use different shades of the same color. So `$sl-var: red` then do something like `.{$ns}-dark .{$ns}-code-editor (color: lighten($sl-var, 10%))`
-
-5. If this component requires specific types or utils include them in this component folder as well. We want to keep everything really independent
+     -**SCSS**: Every component using custom scss should support both light an dark styling. Dark selectors will look
+     something like `.{$ns}-dark .{$ns}-code-editor` look at [tailwind](./src/styles/tailwind/_base.scss) for examples
+     on how this is done. If a component requires themable variables (think really just colors), they should be defined
+     in an adjacent file named `_variables.scss`. The variables should NEVER be used directly. Instead they get injected
+     back into the theme and should be used by using the `get-theme` function in your `_base.scss`. Lastly avoid created
+     separate variables for light and dark. So don't create `$sl-var: red` and `$sl-var-dark: blue`, instead be creative
+     and use different shades of the same color. So `$sl-var: red` then do something like
+     `.{$ns}-dark .{$ns}-code-editor (color: lighten($sl-var, 10%))`
+
+5. If this component requires specific types or utils include them in this component folder as well. We want to keep
+   everything really independent
 
 ## Example Usage
 
@@ -88,9 +125,12 @@ Then in your main `scss` file
 @import '~@stoplight/ui-kit/src/styles/ui-kit';
 ```
 
-Lastly make sure compile your scss to css during your build process. This can be done using the scss-loader in webpack, or even just straight node-sass if so desired.
+Lastly make sure compile your scss to css during your build process. This can be done using the scss-loader in webpack,
+or even just straight node-sass if so desired.
 
-Okay its working, but you decided you're really not a fan of the theming :( well luckily its easily overwrittable to whatever you want! In the same file as your import include an `$sl-config` variable ABOVE the import. If its after the import it wont work. Compile after as you normally would as see the updates.
+Okay its working, but you decided you're really not a fan of the theming :( well luckily its easily overwrittable to
+whatever you want! In the same file as your import include an `$sl-config` variable ABOVE the import. If its after the
+import it wont work. Compile after as you normally would as see the updates.
 
 ```scss
 /*main.scss*/

package.json

@@ -29,8 +29,9 @@
     "build.styles": "yarn build.tw && copyfiles -u 1 \"./src/styles/**/*\" ./dist",
     "build.tw": "postcss ./scripts/build-tailwind/tailwind.css -o ./src/styles/tailwind/_base.scss -c ./sripts/tailwind-build/postcss.config.js",
     "commit": "git-cz",
-    "lint": "tslint -c tslint.json 'src/**/*.ts{,x}'",
-    "lint.fix": "yarn lint --fix",
+    "lint": "yarn prettier.check && eslint --ext .js,.jsx,.ts,.tsx .",
+    "lint.fix": "prettier --ignore-path .eslintignore --write '**/*.{js,jsx,ts,tsx,graphql,md}'; eslint --ext .js,.jsx,.ts,.tsx . --fix",
+    "prettier.check": "prettier --ignore-path .eslintignore --check '**/*.{js,jsx,ts,tsx,md}'",
     "release": "sl-scripts release",
     "release.dryRun": "sl-scripts release --dry-run --debug",
     "storybook": "start-storybook -p 9001",
@@ -61,6 +62,7 @@
   "devDependencies": {
     "@babel/core": "^7.9",
     "@sambego/storybook-state": "^1.3",
+    "@stoplight/eslint-config": "^1.1.0",
     "@stoplight/json": "^3.6.0",
     "@stoplight/scripts": "^8.2.0",
     "@stoplight/storybook-config": "2.0.5",
@@ -88,20 +90,29 @@
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.1",
     "@types/yup": "~0.26.35",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
     "autoprefixer": "^9.7.6",
     "babel-loader": "^8.1.0",
     "copyfiles": "^2.2.0",
     "css-loader": "^3.5.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
+    "eslint": "^6.8.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jest": "^23.8.2",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
+    "eslint-plugin-simple-import-sort": "^5.0.2",
     "jest": "^25.3.0",
     "jest-enzyme": "^7.1.2",
     "lodash": "^4.17.15",
     "node-sass": "^4.13.1",
     "postcss-cli": "^7.1.0",
     "postcss-import": "^12.0.1",
-    "prettier": "^1.19.1",
+    "prettier": "~2.0.4",
     "react": "~16.12.0",
     "react-dom": "~16.12.0",
     "resolve-url-loader": "^3.1.1",
@@ -110,12 +121,6 @@
     "tailwindcss": "^1.2.0",
     "ts-jest": "^25.3.1",
     "ts-loader": "^6.2.2",
-    "tslint": "^5.20.1",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-config-stoplight": "^1.4.0",
-    "tslint-plugin-prettier": "^2.1.0",
-    "tslint-react": "^4.1.0",
-    "tslint-react-hooks": "^2.2.1",
     "typescript": "3.7.5",
     "webpack": "~4.42.1"
   },
@@ -143,10 +148,5 @@
   },
   "release": {
     "extends": "@stoplight/scripts/release"
-  },
-  "prettier": {
-    "printWidth": 120,
-    "singleQuote": true,
-    "trailingComma": "es5"
   }
 }

src/CodeEditor/__tests__/Editor.spec.tsx

@@ -1,7 +1,9 @@
-import { mount } from 'enzyme';
 import 'jest-enzyme';
+
+import { mount } from 'enzyme';
 import * as React from 'react';
 import ReactSimpleCodeEditor from 'react-simple-code-editor';
+
 import { CodeEditor } from '..';
 
 describe('Code Editor component', () => {

src/CodeEditor/utils/highlightCode.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line simple-import-sort/sort
 import * as Prism from 'prismjs';
 
 import 'prismjs/components/prism-bash';
@@ -51,7 +52,8 @@ export const highlightCode = (code: string = '', language: string, showLineNumbe
 
     return result;
   } catch (error) {
-    console.log('Error highlighting code:', error, code);
+    // eslint-disable-next-line no-console
+    console.error('Error highlighting code:', error, code);
     return code;
   }
 };

src/CodeViewer/__tests__/Viewer.spec.tsx

@@ -1,6 +1,8 @@
-import { mount } from 'enzyme';
 import 'jest-enzyme';
+
+import { mount } from 'enzyme';
 import * as React from 'react';
+
 import { CodeViewer } from '..';
 
 describe('Code Viewer component', () => {

src/CodeViewer/index.tsx

@@ -1,5 +1,6 @@
-import * as cn from 'classnames';
 import 'prismjs';
+
+import * as cn from 'classnames';
 import * as React from 'react';
 
 import { Classes } from '../classes';

src/CodeViewer/types.ts

@@ -1,4 +1,5 @@
 import { ReactHTML } from 'react';
+
 import { Dictionary } from '../types';
 
 export type ASTNode = Partial<{

src/Dropdown/Dropdown.tsx

@@ -43,7 +43,7 @@ export const Dropdown: React.FunctionComponent<IDropdown> = ({
         </Menu>
       );
     },
-    [maxRows, itemSize],
+    [className, maxRows, itemSize],
   );
 
   return React.createElement(

src/FAIcon/index.tsx

@@ -26,6 +26,7 @@ export const FAIcon = ({ icon, className, size, style }: IIcon) => {
     prefix = icon.prefix || prefix;
     name = icon.iconName;
   } else {
+    // eslint-disable-next-line no-console
     console.warn('Invalid icon prop provided to Icon component', icon);
     name = 'exclamation';
   }

src/FormInput/index.tsx

@@ -8,10 +8,10 @@ import {
   Tooltip,
 } from '@blueprintjs/core';
 import * as React from 'react';
-import { useValidateSchema } from '../_hooks/useValidateSchema';
-
 // TODO: should probably use ajv and json schema
 import * as yup from 'yup';
+
+import { useValidateSchema } from '../_hooks/useValidateSchema';
 import { Dictionary } from '../types';
 
 /**

src/ScrollContainer/__tests__/ScrollContainer.spec.tsx

@@ -1,6 +1,8 @@
-import { shallow } from 'enzyme';
 import 'jest-enzyme';
+
+import { shallow } from 'enzyme';
 import * as React from 'react';
+
 import { ScrollContainer } from '../';
 import { AutoSizer } from '../../AutoSizer';
 

src/SecretInput/index.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react';
-
 import { Button, HTMLInputProps, IInputGroupProps, InputGroup, Tooltip } from '@blueprintjs/core';
+import * as React from 'react';
 
 type SecretInputProps = {
   selectOnFocus?: boolean;