chore: tslint to eslint

.eslintrc.js

@@ -0,0 +1,127 @@
+module.exports = {
+    env: {
+        browser: true,
+        es6: true,
+        node: true,
+    },
+    extends: ['prettier', 'prettier/@typescript-eslint'],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        project: 'tsconfig.json',
+        sourceType: 'module',
+    },
+    plugins: [
+        'eslint-plugin-import',
+        'eslint-plugin-jsdoc',
+        'eslint-plugin-react',
+        '@typescript-eslint',
+        '@typescript-eslint/tslint',
+    ],
+    rules: {
+        '@typescript-eslint/await-thenable': 'error',
+        '@typescript-eslint/consistent-type-assertions': 'error',
+        '@typescript-eslint/indent': 'off',
+        '@typescript-eslint/member-delimiter-style': [
+            'off',
+            {
+                multiline: {
+                    delimiter: 'none',
+                    requireLast: true,
+                },
+                singleline: {
+                    delimiter: 'semi',
+                    requireLast: false,
+                },
+            },
+        ],
+        '@typescript-eslint/naming-convention': 'error',
+        '@typescript-eslint/no-empty-function': 'error',
+        '@typescript-eslint/no-floating-promises': 'error',
+        '@typescript-eslint/no-misused-new': 'error',
+        '@typescript-eslint/no-unnecessary-qualifier': 'error',
+        '@typescript-eslint/no-unnecessary-type-assertion': 'error',
+        '@typescript-eslint/no-unused-expressions': [
+            'error',
+            {
+                allowTaggedTemplates: true,
+                allowShortCircuit: true,
+            },
+        ],
+        '@typescript-eslint/prefer-namespace-keyword': 'error',
+        '@typescript-eslint/quotes': 'off',
+        '@typescript-eslint/semi': ['off', null],
+        '@typescript-eslint/triple-slash-reference': [
+            'error',
+            {
+                path: 'always',
+                types: 'prefer-import',
+                lib: 'always',
+            },
+        ],
+        '@typescript-eslint/type-annotation-spacing': 'off',
+        '@typescript-eslint/unified-signatures': 'error',
+        'arrow-parens': ['off', 'always'],
+        'brace-style': ['off', 'off'],
+        'comma-dangle': 'off',
+        curly: ['error', 'multi-line'],
+        'eol-last': 'off',
+        eqeqeq: ['error', 'smart'],
+        'id-blacklist': [
+            'error',
+            'any',
+            'Number',
+            'number',
+            'String',
+            'string',
+            'Boolean',
+            'boolean',
+            'Undefined',
+            'undefined',
+        ],
+        'id-match': 'error',
+        'import/no-deprecated': 'error',
+        'jsdoc/check-alignment': 'error',
+        'jsdoc/check-indentation': 'error',
+        'jsdoc/newline-after-description': 'error',
+        'linebreak-style': 'off',
+        'max-len': 'off',
+        'new-parens': 'off',
+        'newline-per-chained-call': 'off',
+        'no-caller': 'error',
+        'no-cond-assign': 'error',
+        'no-constant-condition': 'error',
+        'no-control-regex': 'error',
+        'no-duplicate-imports': 'error',
+        'no-empty': 'error',
+        'no-eval': 'error',
+        'no-extra-semi': 'off',
+        'no-fallthrough': 'error',
+        'no-invalid-regexp': 'error',
+        'no-irregular-whitespace': 'off',
+        'no-multiple-empty-lines': 'off',
+        'no-redeclare': 'error',
+        'no-regex-spaces': 'error',
+        'no-return-await': 'error',
+        'no-throw-literal': 'error',
+        'no-trailing-spaces': 'off',
+        'no-underscore-dangle': 'error',
+        'no-unused-labels': 'error',
+        'no-var': 'error',
+        'one-var': ['error', 'never'],
+        'quote-props': 'off',
+        radix: 'error',
+        'react/jsx-curly-spacing': 'off',
+        'react/jsx-equals-spacing': 'off',
+        'react/jsx-wrap-multilines': 'off',
+        'space-before-function-paren': 'off',
+        'space-in-parens': ['off', 'never'],
+        'spaced-comment': [
+            'error',
+            'always',
+            {
+                markers: ['/'],
+            },
+        ],
+        'use-isnan': 'error',
+    },
+};

.vscode/settings.json

@@ -1,10 +1,10 @@
 {
-    "go.inferGopath": false,
-    "editor.tabSize": 2,
-    "editor.insertSpaces": true,
-    "editor.formatOnSave": true,
-    "bazel.buildifierFixOnFormat": true,
     "[starlark]": {
         "editor.tabSize": 4
-    }
+    },
+    "bazel.buildifierFixOnFormat": true,
+    "editor.formatOnSave": true,
+    "editor.insertSpaces": true,
+    "editor.tabSize": 2,
+    "go.inferGopath": false
 }

package.json

@@ -14,6 +14,7 @@
     "author": "Katalina Okano <git@kat.cafe>",
     "scripts": {
         "lint": "run-p -c lint:* --",
+        "lint:eslint": "eslint",
         "lint:prettier": "cross-env prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx,sh,gitignore,mdx}'",
         "lint:stylelint": "cross-env stylelint '**/*.{ts,tsx}'",
         "now-build": "run-s storybook:build",
@@ -52,11 +53,19 @@
         "@types/react": "^16.9.8",
         "@types/react-dom": "^16.9.8",
         "@types/styled-components": "5.1.4",
+        "@typescript-eslint/eslint-plugin": "^4.4.1",
+        "@typescript-eslint/eslint-plugin-tslint": "^4.4.1",
+        "@typescript-eslint/parser": "^4.4.1",
         "babel-jest": "^26.5.2",
         "babel-loader": "^8.1.0",
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.5",
         "enzyme-to-json": "^3.6.1",
+        "eslint": "^7.11.0",
+        "eslint-config-prettier": "^6.12.0",
+        "eslint-plugin-import": "^2.22.1",
+        "eslint-plugin-jsdoc": "^30.6.5",
+        "eslint-plugin-react": "^7.21.4",
         "jest": "^26.5.3",
         "jest-cli": "^26.5.3",
         "jest-environment-enzyme": "^7.1.2",
@@ -76,10 +85,6 @@
         "stylelint-processor-styled-components": "^1.10.0",
         "ts-jest": "^26.4.1",
         "tsconfig-paths-webpack-plugin": "^3.3.0",
-        "tslint": "6.1.3",
-        "tslint-config-prettier": "^1.18.0",
-        "tslint-config-standard": "^9.0.0",
-        "tslint-plugin-prettier": "^2.3.0",
         "typescript": "^4.0.3"
     }
 }

src/design-system/atoms/avatar/Avatar.styled.ts

@@ -1,6 +1,6 @@
 import { AvatarProps } from './Avatar';
 import styled, { css } from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
 
 type ContainerProps = Pick<AvatarProps, 'size'> & Pick<AvatarProps, 'deliberatelyEmpty'>;

src/design-system/atoms/button/Button.styled.ts

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { text400, text300 } from 'roleypoly/src/design-system/atoms/typography';
 import { fontCSS } from 'roleypoly/src/design-system/atoms/fonts';
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const IconContainer = styled.div`
     margin-right: 0.6rem;

src/design-system/atoms/colors/colors.tsx

@@ -1,5 +1,5 @@
 import { css, createGlobalStyle } from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 import chroma from 'chroma-js';
 
 export const palette = {

src/design-system/atoms/dot-overlay/DotOverlay.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import * as React from 'react';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 const dotOverlayBase = styled.div`
     opacity: 0.6;

src/design-system/atoms/fader/Fader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export type FaderProps = {
     isVisible: boolean;

src/design-system/atoms/fonts/fonts.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Head from 'next/head';
 import styled, { css } from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const InjectTypekitFont = () => {
     React.useEffect(() => {

src/design-system/atoms/halfsies/Halfsies.tsx

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import { onTablet } from 'roleypoly/src/design-system/atoms/breakpoints';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const HalfsiesContainer = styled.div`
     display: flex;

src/design-system/atoms/hero/Hero.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 type HeroContainerProps = {
     topSpacing: number;

src/design-system/atoms/popover/Popover.styled.ts

@@ -2,7 +2,7 @@ import { onSmallScreen, onTablet } from 'roleypoly/src/design-system/atoms/break
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
 import { transitions } from 'roleypoly/src/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 type PopoverStyledProps = {
     active: boolean;

src/design-system/atoms/role/Role.styled.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { transitions } from 'roleypoly/src/design-system/atoms/timings';
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export type StyledProps = {
     selected: boolean;

src/design-system/atoms/space/Space.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const Space = styled.div`
     height: 15px;

src/design-system/atoms/sparkle/Sparkle.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 import { SparklePatternAlpha, SparklePatternBeta } from './Shapes';
 
 type Props = {

src/design-system/atoms/tab-view/TabView.styled.ts

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
 import { transitions } from 'roleypoly/src/design-system/atoms/timings';
 import { onTablet } from 'roleypoly/src/design-system/atoms/breakpoints';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const TabViewStyled = styled.div``;
 

src/design-system/atoms/typography/mdx.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 import { Link, Text, text600, text700, text800, text900 } from './typography';
 
 export const mdxComponents = {

src/design-system/atoms/typography/typography.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
 import { transitions } from 'roleypoly/src/design-system/atoms/timings';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 const reset = css`
     margin: 0;

src/design-system/molecules/demo-discord/DemoDiscord.styled.ts

@@ -1,5 +1,5 @@
 import styled, { keyframes } from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
 
 export const Base = styled.div`

src/design-system/molecules/footer/Footer.styled.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
 import { transitions } from 'roleypoly/src/design-system/atoms/timings';
 

src/design-system/molecules/guild-nav/GuildNav.styled.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 import { transitions } from 'roleypoly/src/design-system/atoms/timings';
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
 

src/design-system/molecules/nav-slug/NavSlug.styled.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const SlugContainer = styled.div`
     display: flex;

src/design-system/molecules/picker-category/PickerCategory.styled.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const Head = styled.div`
     margin: 7px 5px;

src/design-system/molecules/reset-submit/ResetSubmit.styled.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 import { onSmallScreen } from 'roleypoly/src/design-system/atoms/breakpoints';
 
 export const Buttons = styled.div`

src/design-system/molecules/server-masthead/ServerMasthead.styled.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
 import { transitions } from 'roleypoly/src/design-system/atoms/timings';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const Wrapper = styled.div`
     display: flex;

src/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { onSmallScreen } from 'roleypoly/src/design-system/atoms/breakpoints';
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const Collapse = styled.div<{ preventCollapse: boolean }>`
     ${(props) =>

src/design-system/molecules/user-popover/UserPopover.styled.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { palette } from 'roleypoly/src/design-system/atoms/colors';
 import { transitions } from 'roleypoly/src/design-system/atoms/timings';
-import * as _ from 'styled-components'; // tslint:disable-line:no-duplicate-imports
+import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const Base = styled.div`
     text-align: right;

tslint.json

@@ -1,7 +0,0 @@
-{
-    "extends": [
-        "tslint-config-standard",
-        "tslint-plugin-prettier",
-        "tslint-config-prettier"
-    ]
-}