chore: updated (dev)dependencies, incl. [email protected] (#62)

Author: natterstefan

.eslintrc.js

@@ -1,45 +1,34 @@
-const path = require('path')
-
 module.exports = {
-  extends: [
-    'eslint-config-ns',
-    'plugin:@typescript-eslint/recommended',
-    'prettier/@typescript-eslint',
-  ],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-hooks'],
+  extends: ['eslint-config-ns-ts'],
   globals: {
     __DEV__: true,
   },
   rules: {
-    // universal rules
-    'import/extensions': 0,
+    // general ESLint rules
     'no-underscore-dangle': 0,
-    'sort-keys': 0,
-
-    // jest settings
-    'jest/prefer-strict-equal': 'error',
 
     // react settings
     'react/jsx-props-no-spreading': 0,
-    'react/prop-types': 0,
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'error',
 
     // typescript settings
-    '@typescript-eslint/explicit-function-return-type': 0,
-    '@typescript-eslint/no-explicit-any': 0,
-    '@typescript-eslint/no-unused-vars': [
+    // @see https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/naming-convention.md#enforce-that-interface-names-do-not-begin-with-an-i
+    '@typescript-eslint/naming-convention': [
       'error',
-      { argsIgnorePattern: '^_', ignoreRestSiblings: true },
-    ],
-    '@typescript-eslint/interface-name-prefix': [
-      2,
       {
-        prefixWithI: 'always',
-        allowUnderscorePrefix: true,
+        selector: 'interface',
+        format: ['PascalCase'],
+        leadingUnderscore: 'allow',
+        custom: {
+          regex: '^I[A-Z]',
+          match: true,
+        },
       },
     ],
+    // removed
+    '@typescript-eslint/interface-name-prefix': 0,
+    // note you must disable the base rule as it can report incorrect errors
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
   },
   overrides: [
     {
@@ -62,14 +51,4 @@ module.exports = {
       },
     },
   ],
-  settings: {
-    'import/resolver': {
-      node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
-      },
-    },
-    react: {
-      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
-    },
-  },
 }

.travis.yml

@@ -3,9 +3,10 @@ language: node_js
 env:
   global:
     - YARN_VERSION="1.21.1"
+    - NODE_VERSION="12.16.0"
 
 node_js:
-  - "node"
+  - $NODE_VERSION
 
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version $YARN_VERSION
@@ -14,9 +15,17 @@ before_install:
 install:
   - yarn
 
+# if before_script returns a non-zero exit code, the build is errored and stops
+# immediately.
+before_script:
+  - yarn build
+  - yarn lint-js --max-warnings=0
+  - yarn lint-ts
+
+# If script returns a non-zero exit code, the build is failed, but continues to
+# run before being marked as failed.
 script:
   - yarn test
-  - yarn build
   - yarn size
 
 notifications:

README.md

@@ -16,7 +16,7 @@ clients, sites, ...).
 
 ## Getting started
 
-```sh
+```bash
 npm i react-component-catalog --save
 
 # or
@@ -26,13 +26,13 @@ yarn add react-component-catalog
 Then install the correct versions of each peerDependency package, which are
 listed by the command:
 
-```sh
+```bash
 npm info "react-component-catalog@latest" peerDependencies
 ```
 
 If using npm 5+, use this shortcut:
 
-```sh
+```bash
 npx install-peerdeps --dev react-component-catalog
 
 # or
@@ -350,13 +350,13 @@ class App extends React.Component {
 
 ## How to build and test this package
 
-```sh
+```bash
 # -- build the package --
 yarn
 yarn build
 ```
 
-```sh
+```bash
 # -- test the package in an example app --
 # run the example in watch-mode
 yarn watch
@@ -406,6 +406,8 @@ straightforward way. That is why, I decided to create it.
 
 ## Maintainers
 
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
 <table>
   <tbody>
     <tr>
@@ -424,3 +426,5 @@ straightforward way. That is why, I decided to create it.
     </tr>
   <tbody>
 </table>
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->

package.json

@@ -7,9 +7,9 @@
   "scripts": {
     "build": "FORCE_COLOR=1 lerna run build --stream",
     "coveralls": "FORCE_COLOR=1 lerna run coveralls --scope react-component-catalog",
-    "lint": "yarn lint-eslint && yarn lint-tsc",
-    "lint-eslint": "eslint --cache 'packages/**/*.{ts,tsx}' --quiet",
-    "lint-tsc": "tsc --noEmit",
+    "lint": "yarn lint-js && yarn lint-ts",
+    "lint-js": "eslint --cache --quiet 'packages/**/*.{ts,tsx}'",
+    "lint-ts": "tsc --project tsconfig.test.json",
     "prepublishOnly": "yarn release",
     "prerelease": "yarn build && yarn size && yarn test",
     "release": "HUSKY_SKIP_HOOKS=1 standard-version",
@@ -21,62 +21,61 @@
     "watch": "FORCE_COLOR=1 lerna run watch --scope react-component-catalog-example --stream"
   },
   "devDependencies": {
-    "@babel/cli": "7.10.5",
-    "@babel/core": "7.10.5",
-    "@babel/plugin-proposal-class-properties": "7.10.4",
-    "@babel/plugin-proposal-object-rest-spread": "7.10.4",
-    "@babel/plugin-transform-modules-commonjs": "7.10.4",
-    "@babel/preset-env": "7.10.4",
-    "@babel/preset-react": "7.10.4",
-    "@babel/preset-typescript": "7.10.4",
-    "@babel/runtime-corejs3": "7.10.5",
-    "@size-limit/preset-small-lib": "4.5.5",
+    "@babel/cli": "7.12.1",
+    "@babel/core": "7.12.3",
+    "@babel/plugin-proposal-class-properties": "7.12.1",
+    "@babel/plugin-proposal-object-rest-spread": "7.12.1",
+    "@babel/plugin-transform-modules-commonjs": "7.12.1",
+    "@babel/preset-env": "7.12.1",
+    "@babel/preset-react": "7.12.1",
+    "@babel/preset-typescript": "7.12.1",
+    "@babel/runtime-corejs3": "7.12.1",
+    "@size-limit/preset-small-lib": "4.6.2",
     "@types/enzyme": "3.10.5",
     "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/jest": "25.1.2",
+    "@types/jest": "26.0.15",
     "@types/react": "16.9.43",
     "@types/react-dom": "16.9.8",
-    "@typescript-eslint/eslint-plugin": "2.19.2",
-    "@typescript-eslint/parser": "2.19.2",
-    "babel-eslint": "10.0.3",
+    "@typescript-eslint/eslint-plugin": "4.6.0",
+    "@typescript-eslint/parser": "4.6.0",
+    "babel-eslint": "10.1.0",
     "babel-loader": "8.1.0",
     "babel-plugin-dev-expression": "0.2.2",
-    "commitizen": "4.0.3",
+    "commitizen": "4.2.2",
     "core-js": "3.6.5",
-    "coveralls": "3.0.9",
-    "cz-conventional-changelog": "3.1.0",
+    "coveralls": "3.1.0",
+    "cz-conventional-changelog": "3.3.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.2",
-    "eslint": "6.8.0",
-    "eslint-config-airbnb": "18.0.1",
-    "eslint-config-ns": "1.1.0",
-    "eslint-config-prettier": "6.10.0",
+    "enzyme-adapter-react-16": "1.15.5",
+    "eslint": "7.12.1",
+    "eslint-config-airbnb": "18.2.0",
+    "eslint-config-ns-ts": "1.3.0",
+    "eslint-config-prettier": "6.15.0",
     "eslint-import-resolver-alias": "1.1.2",
-    "eslint-plugin-import": "2.20.1",
-    "eslint-plugin-jest": "23.7.0",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-prettier": "3.1.2",
-    "eslint-plugin-react": "7.18.3",
-    "eslint-plugin-react-hooks": "2.3.0",
-    "husky": "4.2.3",
-    "jest": "25.1.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jest": "24.1.0",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.1.4",
+    "eslint-plugin-react": "7.21.5",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "husky": "4.3.0",
+    "jest": "26.6.1",
     "lerna": "3.22.1",
-    "lint-staged": "10.0.7",
-    "nodemon": "2.0.4",
-    "prettier": "1.19.1",
-    "react": "16.8.3",
-    "react-dom": "16.8.3",
+    "lint-staged": "10.5.0",
+    "nodemon": "2.0.6",
+    "prettier": "2.1.2",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
     "rimraf": "3.0.2",
-    "size-limit": "4.5.5",
-    "source-map-loader": "0.2.4",
-    "standard-version": "7.1.0",
-    "terser-webpack-plugin": "2.3.5",
-    "ts-jest": "25.2.0",
-    "ts-loader": "6.2.2",
-    "tsconfig-paths-webpack-plugin": "3.2.0",
-    "typescript": "3.8.3",
-    "webpack": "4.42.1",
-    "webpack-cli": "3.3.11"
+    "size-limit": "4.6.2",
+    "standard-version": "9.0.0",
+    "terser-webpack-plugin": "4.2.3",
+    "ts-jest": "26.4.3",
+    "ts-loader": "8.0.7",
+    "tsconfig-paths-webpack-plugin": "3.3.0",
+    "typescript": "4.0.5",
+    "webpack": "4.44.2",
+    "webpack-cli": "3.3.12"
   },
   "workspaces": [
     "packages/*"
@@ -88,8 +87,14 @@
     }
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "yarn run lint",
+    "*.{js,jsx}": [
+      "yarn run lint-js",
+      "prettier --write",
+      "git update-index --again",
+      "jest --findRelatedTests"
+    ],
+    "*.{ts,tsx}": [
+      "yarn run lint-ts",
       "prettier --write",
       "git update-index --again",
       "jest --findRelatedTests"

packages/example/package.json

@@ -21,15 +21,15 @@
     "watch-server": "nodemon --watch src"
   },
   "dependencies": {
-    "@babel/register": "7.9.0",
-    "@babel/runtime-corejs3": "7.10.5",
-    "@hapi/hapi": "19.2.0",
-    "@hapi/inert": "6.0.1",
+    "@babel/register": "7.12.1",
+    "@babel/runtime-corejs3": "7.12.1",
+    "@hapi/hapi": "20.0.1",
+    "@hapi/inert": "6.0.3",
     "core-js": "3.6.5",
     "dotenv": "8.2.0",
-    "react": "16.8.3",
+    "react": "^16.8.3",
     "react-component-catalog": "2.0.0",
-    "react-dom": "16.8.3",
+    "react-dom": "^16.8.3",
     "regenerator-runtime": "0.13.7"
   },
   "repository": {

packages/react-component-catalog/src/__tests__/index.test.ts

@@ -1,7 +1,6 @@
 import CatalogComponentPart from '../components/catalog-component'
 import CatalogProviderPart from '../components/catalog-provider'
 import withCatalogPart from '../components/with-catalog'
-
 import ReactComponentCatalog, {
   CatalogComponent,
   CatalogProvider,

packages/react-component-catalog/src/components/__tests__/catalog-component.server.test.tsx

@@ -1,15 +1,16 @@
 /**
  * @jest-environment node
  */
-import React from 'react'
+import React, { FunctionComponent } from 'react'
 import { render } from 'enzyme'
 
 import Catalog, { ICatalog } from '../../catalog'
 import CatalogComponent from '../catalog-component'
 import CatalogProvider from '../catalog-provider'
 
-const TestComponent = () => <div>Hello World</div>
-const BaseArticle = () => <div>Hello BaseArticle</div>
+const TestComponent: FunctionComponent = () => <div>Hello World</div>
+const BaseArticle: FunctionComponent = () => <div>Hello BaseArticle</div>
+const EmptyComponent: FunctionComponent = () => <div />
 
 describe('CatalogComponent', () => {
   let backupError: () => void
@@ -21,9 +22,9 @@ describe('CatalogComponent', () => {
       BaseArticle,
     },
     Pages: {
-      NestedPage: () => <div />,
+      NestedPage: EmptyComponent,
       AnotherNestedPage: {
-        OtherPage: () => <div />,
+        OtherPage: EmptyComponent,
       },
     },
   }

packages/react-component-catalog/src/components/catalog-component.tsx

@@ -23,15 +23,15 @@ interface IProps<T> {
    * augmented it matches everything.
    * @see https://stackoverflow.com/a/58512513/1238150
    */
-  component: T extends Record<string, any>
+  component: T extends Record<string, unknown>
     ? keyof T
     : T extends (infer R)[]
     ? R
     : T extends string
     ? string
     : T extends CatalogComponents
     ? keyof CatalogComponents
-    : unknown
+    : any
   /**
    * when no component is found, a fallbackComponent is rendered instead
    */
@@ -70,8 +70,9 @@ const CatalogComponent = React.forwardRef<any, IProps<any>>((props, ref) => {
     return null
   }
 
-  // or catalog.getComponent<ComponentType<PropsWithRef<any>>>(component)
-  const Component = catalog.getComponent(component)
+  const Component = catalog.getComponent<ComponentType<PropsWithRef<any>>>(
+    component,
+  )
   if (Component) {
     return <Component {...others} ref={ref} />
   }