Configure eslint-plugin-import

Pending issues with plugin: #199

.eslintrc.js

@@ -1,3 +1,7 @@
+const jsExtensions = ['.js', '.jsx']
+const tsExtensions = ['.ts', '.tsx']
+const allExtensions = jsExtensions.concat(tsExtensions)
+
 module.exports = {
   env: {
     browser: true,
@@ -7,6 +11,9 @@ module.exports = {
   },
   parser: '@typescript-eslint/parser', // Specifies the ESLint parser
   extends: [
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
     'plugin:cypress/recommended',
@@ -34,6 +41,15 @@ module.exports = {
     react: {
       version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
     },
+    'import/extensions': allExtensions,
+    'import/parsers': {
+      '@typescript-eslint/parser': tsExtensions,
+    },
+    'import/resolver': {
+      node: {
+        extensions: allExtensions,
+      },
+    },
   },
   rules: {
     '@typescript-eslint/no-non-null-assertion': 'off',

package.json

@@ -75,7 +75,8 @@
     "react-scripts": "2.1.8",
     "react-simple-keyboard": "^1.21.3",
     "styled-components": "^4.2.0",
-    "typescript": "3.2.2"
+    "typescript": "3.2.2",
+    "typescript-eslint-parser": "^22.0.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^1.5.0",
@@ -85,7 +86,7 @@
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^4.1.0",
     "eslint-plugin-cypress": "^2.2.1",
-    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jest": "^22.4.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-no-null": "^1.0.2",

src/App.tsx

@@ -28,12 +28,12 @@ import './App.css'
 import {
   Election,
   ElectionDefaults,
-  OptionalElection,
-  PartialUserSettings,
-  TextSizeSetting,
+  OptionalElection, // eslint-disable-line import/named
+  PartialUserSettings, // eslint-disable-line import/named
+  TextSizeSetting, // eslint-disable-line import/named
   UserSettings,
-  Vote,
-  VotesDict,
+  Vote, // eslint-disable-line import/named
+  VotesDict, // eslint-disable-line import/named
 } from './config/types'
 
 import electionDefaults from './data/electionDefaults.json'

src/components/CandidateContest.tsx

@@ -5,14 +5,14 @@ import 'react-simple-keyboard/build/css/index.css'
 import styled from 'styled-components'
 
 import {
-  ButtonEvent,
+  ButtonEvent, // eslint-disable-line import/named
   Candidate,
   CandidateContest as CandidateContestInterface,
-  CandidateVote,
-  InputEvent,
-  OptionalCandidate,
-  ScrollDirections,
-  UpdateVoteFunction,
+  CandidateVote, // eslint-disable-line import/named
+  InputEvent, // eslint-disable-line import/named
+  OptionalCandidate, // eslint-disable-line import/named
+  ScrollDirections, // eslint-disable-line import/named
+  UpdateVoteFunction, // eslint-disable-line import/named
 } from '../config/types'
 
 import BallotContext from '../contexts/ballotContext'
@@ -21,7 +21,7 @@ import GLOBALS from '../config/globals'
 import Button from './Button'
 import Modal from './Modal'
 import Prose from './Prose'
-import { Text } from './Typography'
+import Text from './Text'
 
 const tabletMinWidth = 720
 

src/components/LinkButton.tsx

@@ -2,7 +2,9 @@ import React from 'react'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 
 import Button, { ButtonInterface } from '../components/Button'
-import { ButtonEvent } from '../config/types'
+import {
+  ButtonEvent, // eslint-disable-line import/named
+} from '../config/types'
 
 interface Props
   extends ButtonInterface<{}>,

src/components/Typography.test.tsx → src/components/Text.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from 'react-testing-library'
 
-import Text from './Typography'
+import Text from './Text'
 
 it(`outputs paragraph tag`, async () => {
   const text = 'paragraph'

src/components/Typography.tsx → src/components/Text.tsx

@@ -8,7 +8,7 @@ interface Props {
   small?: boolean
   white?: boolean
 }
-export const Text = styled('p')<Props>`
+const Text = styled('p')<Props>`
   color: ${({ error, muted, white }) =>
     (error && 'red') || (white && 'white') || (muted && 'gray') || undefined};
   text-align: ${({ center }) => (center ? 'center' : undefined)};
@@ -22,5 +22,4 @@ export const Text = styled('p')<Props>`
       undefined};
   }
 `
-
 export default Text

src/components/UploadConfig.tsx

@@ -3,11 +3,11 @@ import Dropzone from 'react-dropzone'
 import styled from 'styled-components'
 
 import electionSample from '../data/electionSample.json'
-import isJSON from '../utils/is-json'
+import isJSON from '../utils/isJSON'
 
 import Button from '../components/Button'
 import Prose from '../components/Prose'
-import { Text } from '../components/Typography'
+import Text from './Text'
 import { Election } from '../config/types'
 import Main, { MainChild } from './Main'
 

src/contexts/ballotContext.ts

@@ -1,7 +1,10 @@
 import GLOBALS from '../config/globals'
 
 import { createContext } from 'react'
-import { BallotContextInterface, TextSizeSetting } from '../config/types'
+import {
+  BallotContextInterface,
+  TextSizeSetting, // eslint-disable-line import/named
+} from '../config/types'
 
 const ballot: BallotContextInterface = {
   election: undefined,

src/pages/CastBallotPage.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import LinkButton from '../components/LinkButton'
 import Main, { MainChild } from '../components/Main'
 import Prose from '../components/Prose'
-import Text from '../components/Typography'
+import Text from '../components/Text'
 
 const Directions = styled.div`
   margin: auto;

src/pages/ContestPage.tsx

@@ -1,15 +1,17 @@
 import React, { useContext } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 
-import { CandidateVote } from '../config/types'
+import {
+  CandidateVote, // eslint-disable-line import/named
+} from '../config/types'
 
 import BallotContext from '../contexts/ballotContext'
 
 import ButtonBar from '../components/ButtonBar'
 import CandidateContest from '../components/CandidateContest'
 import LinkButton from '../components/LinkButton'
 import Main, { MainChild } from '../components/Main'
-import Text from '../components/Typography'
+import Text from '../components/Text'
 
 interface ContestParams {
   id: string

src/pages/ReviewPage.tsx

@@ -2,7 +2,9 @@ import React from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import styled from 'styled-components'
 
-import { CandidateVote } from '../config/types'
+import {
+  CandidateVote, // eslint-disable-line import/named
+} from '../config/types'
 
 import { Barcode } from '../assets/BarCodes'
 import Button from '../components/Button'
@@ -11,7 +13,7 @@ import LinkButton from '../components/LinkButton'
 import Main, { MainChild } from '../components/Main'
 import Modal from '../components/Modal'
 import Prose from '../components/Prose'
-import { Text } from '../components/Typography'
+import Text from '../components/Text'
 import BallotContext from '../contexts/ballotContext'
 
 const tabletMinWidth = 768

src/pages/SettingsPage.tsx

@@ -3,7 +3,11 @@ import GLOBALS from '../config/globals'
 import React, { useContext, useState } from 'react'
 import styled from 'styled-components'
 
-import { ButtonEvent, InputEvent, TextSizeSetting } from '../config/types'
+import {
+  ButtonEvent, // eslint-disable-line import/named
+  InputEvent, // eslint-disable-line import/named
+  TextSizeSetting, // eslint-disable-line import/named
+} from '../config/types'
 
 import BallotContext from '../contexts/ballotContext'
 
@@ -14,7 +18,7 @@ import Main, { MainChild } from '../components/Main'
 import Modal from '../components/Modal'
 import Prose from '../components/Prose'
 import RangeInput from '../components/RangeInput'
-import { Text } from '../components/Typography'
+import Text from '../components/Text'
 
 const SettingLabel = styled.label`
   display: block;

src/utils/is-json.test.ts → src/utils/isJSON.test.ts

@@ -1,7 +1,7 @@
 // Ported to TypeScript from:
 // https://github.com/joaquimserafim/is-json/blob/master/test/index.js
 
-import { isJSON, isJSONStrict } from './is-json'
+import isJSON, { isJSONStrict } from './isJSON'
 
 it(`perform isJSON verifications`, () => {
   expect(isJSON('asdada[]asdadada sd asdasda das das')).toBeFalsy()

src/utils/is-json.ts → src/utils/isJSON.ts

@@ -23,7 +23,7 @@ export function isJSONStrict(str: any) {
   }
 }
 
-export function isJSON(str: any, passObject?: boolean): boolean {
+function isJSON(str: any, passObject?: boolean): boolean {
   if (passObject && isObject(str)) {
     return true
   }

test/testUtils.tsx

@@ -7,7 +7,10 @@ import GLOBALS from '../src/config/globals'
 
 import electionSample from '../src/data/electionSample.json'
 
-import { Election, TextSizeSetting } from '../src/config/types'
+import {
+  Election,
+  TextSizeSetting, // eslint-disable-line import/named
+} from '../src/config/types'
 
 import { mergeWithDefaults } from '../src/App'
 import BallotContext from '../src/contexts/ballotContext'

tsconfig.json

@@ -10,8 +10,6 @@
     "module": "esnext",
     "moduleResolution": "node",
     "noEmit": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,

yarn.lock

@@ -4201,7 +4201,7 @@ eslint-plugin-import@2.14.0:
     read-pkg-up "^2.0.0"
     resolve "^1.6.0"
 
-eslint-plugin-import@^2.14.0:
+eslint-plugin-import@^2.16.0:
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.16.0.tgz#97ac3e75d0791c4fac0e15ef388510217be7f66f"
   integrity sha512-z6oqWlf1x5GkHIFgrSvtmudnqM6Q60KM4KvpWi5ubonMjycLjndvd5+8VAZIsTlHC03djdgJuyKG6XO577px6A==
@@ -11397,6 +11397,23 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript-eslint-parser@^22.0.0:
+  version "22.0.0"
+  resolved "https://registry.yarnpkg.com/typescript-eslint-parser/-/typescript-eslint-parser-22.0.0.tgz#f5e766c9b50711b03535e29a10b45f957e3c516a"
+  integrity sha512-pD8D7oTeRwWvFVxK3PaY6FYAiZsuRXFkIc2+1xkwCT3NduySgCgjeAkR5/dnIWecOiFVcEHf4ypXurF02Q6Z3Q==
+  dependencies:
+    eslint-scope "^4.0.0"
+    eslint-visitor-keys "^1.0.0"
+    typescript-estree "18.0.0"
+
+typescript-estree@18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/typescript-estree/-/typescript-estree-18.0.0.tgz#a309f6c6502c64d74b3f88c205d871a9af0b1d40"
+  integrity sha512-HxTWrzFyYOPWA91Ij7xL9mNUVpGTKLH2KiaBn28CMbYgX2zgWdJqU9hO7Are+pAPAqY91NxAYoaAyDDZ3rLj2A==
+  dependencies:
+    lodash.unescape "4.0.1"
+    semver "5.5.0"
+
 typescript@3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.2.tgz#fe8101c46aa123f8353523ebdcf5730c2ae493e5"