refactor: Adopt @doist/eslint-config (#377)

* Install @doist/eslint-config.

* Adopt @doist/eslint-config.

* Disable func-style.

* Ignore prefer-string-starts-ends-with.

* Fix no-named-as-default.

* Fix react/no-unescaped-entities.

* Ignore react/display-name.

* Ignore no-default-export.

* Allow unescaped entities in test.

* fix: address linting error in MenuStory

* fix: address linting error in button component

* fix: ignore linting error in time-utils

* .eslintignore jest.config.js

Co-authored-by: Henning Muszynski <henningmu@users.noreply.github.com>

Author: proxi

.eslintignore

@@ -1 +1,2 @@
 lint-staged.config.js
+jest.config.js

.eslintrc

@@ -1,15 +1,10 @@
 {
     "plugins": ["jest"],
     "extends": [
+        "@doist/eslint-config/recommended-requiring-type-checking",
+        "@doist/eslint-config/react",
         "react-app",
-        "prettier/@typescript-eslint",
-        "plugin:prettier/recommended",
-        "plugin:jest/recommended",
-        "prettier",
-        "plugin:@typescript-eslint/eslint-recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking",
-        "prettier/@typescript-eslint"
+        "plugin:jest/recommended"
     ],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
@@ -30,9 +25,8 @@
         "webpack.config.*"
     ],
     "rules": {
-        "prettier/prettier": "error",
-        "react/no-did-mount-set-state": "error",
-        "react/no-did-update-set-state": "error",
+        "func-style": "off",
+        "import/no-default-export": "off", // Legacy API.
         "react/no-find-dom-node": "off",
         "@typescript-eslint/explicit-module-boundary-types": "off",
         "@typescript-eslint/ban-ts-comment": "off"
@@ -43,6 +37,7 @@
             // jest mocks are hard to type, allow incomplete types in tests.
             "files": ["stories/**/*", "*.test.*"],
             "rules": {
+                "react/no-unescaped-entities": "off",
                 "@typescript-eslint/no-unsafe-member-access": "off",
                 "@typescript-eslint/no-unsafe-call": "off",
                 "@typescript-eslint/no-unsafe-assignment": "off",

package-lock.json

@@ -57,6 +57,7 @@
         "@babel/preset-react": "^7.0.0",
         "@babel/preset-typescript": "^7.10.1",
         "@babel/register": "^7.0.0",
+        "@doist/eslint-config": "^3.0.0",
         "@doist/prettier-config": "^3.0.5",
         "@storybook/addon-actions": "^5.3.18",
         "@storybook/addon-docs": "^5.3.18",

package.json

@@ -8,6 +8,8 @@ function getInitials(name?: string) {
     const lastInitial = seed[seed.length - 1]
 
     let initials = firstInitial[0]
+    // Better readable this way.
+    // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with
     if (firstInitial[0] !== lastInitial[0]) {
         initials += lastInitial[0]
     }

src/components/avatar/utils.ts

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { Tooltip } from '../tooltip'
@@ -77,13 +76,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
 
 Button.displayName = 'Button'
 
-Button.propTypes = {
-    loading: PropTypes.bool,
-    variant: PropTypes.oneOf(['primary', 'secondary', 'danger', 'link']),
-    size: PropTypes.oneOf(['default', 'small', 'large']),
-    tooltip: PropTypes.node,
-}
-
 Button.defaultProps = {
     size: 'default',
     loading: false,

src/components/button/button.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'
 import { shallow, mount } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
-import * as Modal from './modal'
+import { default as Modal } from '../modal'
 import type { Modal as ModalType } from '../modal'
 import Button from '../button' // for more descriptive snapshots
 

src/components/modal/modal.test.tsx

@@ -1,4 +1,15 @@
 import dayjs from 'dayjs'
+/**
+ * There's a problem with our setup where the default export from
+ * localizedFormat (and likely every other dayjs plugin) isn't properly
+ * recognized. The proposed workarounds (importing with `.js` ending, or adding
+ * `allowSyntheticDefaultImports` to the tsconfig) either broke linting or type
+ * checking. After spending some time on this it was decided that further
+ * investigations are not worth it, the code works and the eslint ignore is fine.
+ * ref: https://github.com/iamkun/dayjs/issues/593
+ * ref: https://day.js.org/docs/en/installation/typescript
+ */
+// eslint-disable-next-line import/default
 import LocalizedFormat from 'dayjs/plugin/localizedFormat'
 
 dayjs.extend(LocalizedFormat)

src/components/time/time-utils.ts

@@ -26,7 +26,7 @@ function StandardButtonsStory() {
             <Button>Plain Button</Button>
             <p>
                 You can <Button variant="link">add link buttons inline</Button> and it works as
-                you'd expect.
+                you&apos;d expect.
             </p>
         </section>
     )

stories/components/ButtonStory.tsx

@@ -109,6 +109,7 @@ function SimpleMenuExample() {
 
 const SimpleMenuChapter = {
     subtitle: 'Some menu examples',
+    // eslint-disable-next-line react/display-name
     sections: [{ sectionFn: () => <SimpleMenuExample />, options: optionsSourceOnly }],
 }
 
@@ -154,8 +155,8 @@ function OverflowMenuExample() {
                 be used as a context menu).
             </p>
             <ul>
-                {items.map((item) => (
-                    <Item {...item} />
+                {items.map((item, index) => (
+                    <Item key={index} {...item} />
                 ))}
             </ul>
         </section>
@@ -164,6 +165,7 @@ function OverflowMenuExample() {
 
 const OverflowMenuChapter = {
     subtitle: 'A list of items with an overflow options menu',
+    // eslint-disable-next-line react/display-name
     sections: [{ sectionFn: () => <OverflowMenuExample />, options: optionsSourceOnly }],
 }