fix: fix broken deps and updates scripts

Author: fox1t

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  ignorePatterns: ['commitlint.config.js'],
+  ignorePatterns: ['commitlint.config.js', 'stories/.eslintrc.js', '.eslintrc.js'],
   env: {
     browser: true,
     es6: true,
@@ -52,19 +52,17 @@ module.exports = {
     'no-nested-ternary': 'off',
     'import/no-unresolved': 'off',
     'import/extensions': ['error', 'never'],
-    'import/order': ["error", {
-      "groups": [
-        "external",
-        ["sibling","parent","internal"],
-        "builtin",
-        "unknown",
-      ],
-      "newlines-between": "always",
-      "alphabetize": {
-        "order": 'asc',
-        "caseInsensitive": true,
+    'import/order': [
+      'error',
+      {
+        groups: ['external', ['sibling', 'parent', 'internal'], 'builtin', 'unknown'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
       },
-    }],
+    ],
     curly: ['error', 'all'],
   },
 }

package.json

@@ -21,6 +21,7 @@
     "commit": "npx git-cz",
     "dev": "tsdx watch",
     "build": "tsdx build",
+    "update": "npx npm-check -u",
     "prepublishOnly": "npm run build",
     "test": "tsdx test --env=jsdom",
     "test:ci": "cross-env CI=true tsdx test --env=jsdom",
@@ -35,8 +36,8 @@
   },
   "peerDependencies": {
     "bootstrap": "~4.5.0",
-    "react": "~16.9.0",
-    "react-bootstrap": "~1.0.0-beta.14"
+    "react": "~16.13.0",
+    "react-bootstrap": "~1.0.1"
   },
   "husky": {
     "hooks": {
@@ -76,16 +77,16 @@
     "@types/enzyme": "~3.10.3",
     "@types/jest": "~26.0.0",
     "@types/lodash": "^4.14.149",
-    "@types/node": "~13.13.3",
+    "@types/node": "~14.0.13",
     "@types/react": "~16.9.17",
     "@types/react-dom": "~16.9.1",
     "@types/react-table": "^7.0.4",
     "@types/sinon": "~9.0.0",
     "@types/storybook__addon-info": "~5.2.0",
     "@types/tinymce": "~4.5.23",
-    "@typescript-eslint/eslint-plugin": "~2.34.0",
-    "@typescript-eslint/parser": "~3.2.0",
-    "autoprefixer": "~9.7.3",
+    "@typescript-eslint/eslint-plugin": "~3.3.0",
+    "@typescript-eslint/parser": "~3.3.0",
+    "autoprefixer": "~9.8.0",
     "awesome-typescript-loader": "~5.2.1",
     "babel-loader": "~8.1.0",
     "bootstrap": "~4.5.0",
@@ -96,20 +97,20 @@
     "cz-conventional-changelog": "~3.2.0",
     "enzyme": "~3.11.0",
     "enzyme-adapter-react-16": "~1.15.2",
-    "eslint": "~6.8.0",
+    "eslint": "~7.2.0",
     "eslint-config-airbnb": "~18.1.0",
-    "eslint-config-prettier": "~6.10.0",
+    "eslint-config-prettier": "~6.11.0",
     "eslint-plugin-import": "~2.21.1",
     "eslint-plugin-jest": "~23.13.1",
     "eslint-plugin-jsx-a11y": "~6.2.3",
     "eslint-plugin-prettier": "~3.1.1",
-    "eslint-plugin-react": "~7.19.0",
+    "eslint-plugin-react": "~7.20.0",
     "eslint-plugin-react-hooks": "~4.0.1",
     "husky": "~4.2.0",
     "jest-canvas-mock": "~2.2.0",
     "lint-staged": "~10.2.0",
     "node-sass": "~4.14.1",
-    "prettier": "~1.19.1",
+    "prettier": "~2.0.5",
     "react": "~16.13.0",
     "react-bootstrap": "~1.0.0-beta.16",
     "react-docgen": "~5.3.0",
@@ -119,36 +120,36 @@
     "sass-loader": "~8.0.0",
     "semantic-release": "~17.0.3",
     "sinon": "~9.0.0",
-    "tsdx": "~0.13.0",
-    "tslib": "~1.12.0",
+    "tsdx": "~0.13.2",
+    "tslib": "~2.0.0",
     "typescript": "~3.8.2"
   },
   "dependencies": {
     "@fortawesome/fontawesome-common-types": "~0.2.28",
     "@fortawesome/fontawesome-svg-core": "~1.2.25",
     "@fortawesome/free-regular-svg-icons": "~5.13.0",
-    "@fortawesome/free-solid-svg-icons": "~5.12.0",
+    "@fortawesome/free-solid-svg-icons": "~5.13.0",
     "@fortawesome/react-fontawesome": "~0.1.9",
-    "@fullcalendar/core": "~4.3.1",
-    "@fullcalendar/daygrid": "~4.3.0",
-    "@fullcalendar/interaction": "~4.4.0",
-    "@fullcalendar/react": "~4.3.0",
-    "@fullcalendar/timegrid": "~4.3.0",
+    "@fullcalendar/core": "~4.4.2",
+    "@fullcalendar/daygrid": "~4.4.2",
+    "@fullcalendar/interaction": "~4.4.2",
+    "@fullcalendar/react": "~4.4.2",
+    "@fullcalendar/timegrid": "~4.4.2",
     "@tinymce/tinymce-react": "~3.6.0",
-    "@types/react-bootstrap-typeahead": "^3.4.5",
+    "@types/react-bootstrap-typeahead": "^3.4.6",
     "@types/react-datepicker": "~2.11.0",
     "babel-jest": "^26.0.1",
     "chart.js": "~2.9.3",
     "date-fns": "^2.9.0",
     "formik": "~2.1.0",
     "lodash": "^4.17.15",
     "moment": "~2.26.0",
-    "react-bootstrap-typeahead": "^4.0.0",
+    "react-bootstrap-typeahead": "^4.2.3",
     "react-datepicker": "~3.0.0",
-    "react-spinners": "~0.8.0",
-    "react-table": "^7.0.0",
+    "react-spinners": "~0.8.3",
+    "react-table": "~7.2.0",
     "react-toastify": "~5.5.0",
-    "tinymce": "~5.3.0",
+    "tinymce": "~5.3.2",
     "video-react": "~0.14.1"
   },
   "jest": {

src/components/Graph/BarGraph.tsx

@@ -32,7 +32,7 @@ interface Props {
 /**
  * A customizable Bar Graph component built on chart.js
  */
-class BarGraph extends Component<Props, {}> {
+class BarGraph extends Component<Props, Record<string, unknown>> {
   graph: ChartJs | null
 
   chart: HTMLCanvasElement | null

src/components/Graph/LineGraph.tsx

@@ -32,7 +32,7 @@ interface Props {
 /**
  * A customizable Line Graph component built on chart.js
  */
-class LineGraph extends Component<Props, {}> {
+class LineGraph extends Component<Props, Record<string, unknown>> {
   graph: ChartJs | null
 
   chart: HTMLCanvasElement | null

src/components/Graph/PieGraph.tsx

@@ -25,7 +25,7 @@ interface Props {
 /**
  * A customizable Pie Graph component built on chart.js
  */
-class PieGraph extends Component<Props, {}> {
+class PieGraph extends Component<Props, Record<string, unknown>> {
   graph: ChartJs | null
 
   chart: HTMLCanvasElement | null

src/components/RichText/RichText.tsx

@@ -58,7 +58,6 @@ const RichText = (props: Props) => {
         // skin & content_css are set to 'false' to avoid tinyMCE looking to fetch files when they are already imported above.
         skin: false,
         // eslint disabled on next line due to TinyMCE option attribute naming.
-        // eslint-disable-next-line @typescript-eslint/camelcase
         content_css: false,
         plugins: [`autolink lists link table paste charmap`],
         toolbar: [

src/components/Table/Table.tsx

@@ -38,7 +38,7 @@ function Table({ data, tableProperties }: Props) {
     useFilters,
     useSortBy,
     usePagination,
-  ) as TableInstance<object>
+  ) as TableInstance<Record<string, unknown>>
 
   return (
     <>

src/components/Table/helper.tsx

@@ -80,15 +80,15 @@ export const generateColumns = (columns: CustomColumn[]) => {
             element.undefinedMeansFalse === false
               ? element.customTrueIcon
                 ? element.customFalseIcon
-                  ? ({ row }: CellProps<object>) => (
+                  ? ({ row }: CellProps<Record<string, unknown>>) => (
                       <>
                         {row.values[element.accessor] === true && element.customTrueIcon}
                         {row.values[element.accessor] === false && element.customFalseIcon}
                         {row.values[element.accessor] !== true &&
                           row.values[element.accessor] !== false && <div />}
                       </>
                     )
-                  : ({ row }: CellProps<object>) => (
+                  : ({ row }: CellProps<Record<string, unknown>>) => (
                       <>
                         {row.values[element.accessor] === true && element.customTrueIcon}
                         {row.values[element.accessor] === false && (
@@ -99,7 +99,7 @@ export const generateColumns = (columns: CustomColumn[]) => {
                       </>
                     )
                 : element.customFalseIcon
-                ? ({ row }: CellProps<object>) => (
+                ? ({ row }: CellProps<Record<string, unknown>>) => (
                     <>
                       {row.values[element.accessor] === true && (
                         <div style={{ color: 'green' }}>true</div>
@@ -109,7 +109,7 @@ export const generateColumns = (columns: CustomColumn[]) => {
                         row.values[element.accessor] !== false && <div />}
                     </>
                   )
-                : ({ row }: CellProps<object>) => (
+                : ({ row }: CellProps<Record<string, unknown>>) => (
                     <>
                       {row.values[element.accessor] === true && (
                         <div style={{ color: 'green' }}>true</div>
@@ -123,13 +123,13 @@ export const generateColumns = (columns: CustomColumn[]) => {
                   )
               : element.customTrueIcon
               ? element.customFalseIcon
-                ? ({ row }: CellProps<object>) => (
+                ? ({ row }: CellProps<Record<string, unknown>>) => (
                     <>
                       {row.values[element.accessor] === true && element.customTrueIcon}
                       {row.values[element.accessor] !== true && element.customFalseIcon}
                     </>
                   )
-                : ({ row }: CellProps<object>) => (
+                : ({ row }: CellProps<Record<string, unknown>>) => (
                     <>
                       {row.values[element.accessor] === true && element.customTrueIcon}
                       {row.values[element.accessor] !== true && (
@@ -138,15 +138,15 @@ export const generateColumns = (columns: CustomColumn[]) => {
                     </>
                   )
               : element.customFalseIcon
-              ? ({ row }: CellProps<object>) => (
+              ? ({ row }: CellProps<Record<string, unknown>>) => (
                   <>
                     {row.values[element.accessor] === true && (
                       <div style={{ color: 'green' }}>true</div>
                     )}
                     {row.values[element.accessor] !== true && element.customFalseIcon}
                   </>
                 )
-              : ({ row }: CellProps<object>) => (
+              : ({ row }: CellProps<Record<string, unknown>>) => (
                   <>
                     {row.values[element.accessor] === true && (
                       <div style={{ color: 'green' }}>true</div>
@@ -181,7 +181,7 @@ export const generateColumns = (columns: CustomColumn[]) => {
         el = {
           Header: element.title || element.accessor || '',
           accessor: element.accessor || '',
-          Cell: ({ row }: CellProps<object>) => {
+          Cell: ({ row }: CellProps<Record<string, unknown>>) => {
             let resultingStyle = {}
             let applyStyle = true
             if (element.styles && element.styles.length) {

src/components/Table/interfaces.ts

@@ -29,22 +29,22 @@ export interface ColumnStyle {
 type StyleObject = Record<string, any>
 
 export interface DefaultColumnFilterOptions {
-  column: TableColumn<object>
+  column: TableColumn<Record<string, unknown>>
 }
 
 interface CustomFilters {
   filterPlaceholder?: string
 }
 
-interface TableColumn<D extends object = {}>
+interface TableColumn<D extends Record<string, unknown> = Record<string, unknown>>
   extends ColumnInstance<D>,
     UseSortByColumnProps<D>,
     UseFiltersColumnProps<D>,
     CustomFilters {}
 
 export type Element = any
 
-export type Data = object
+export type Data = Record<string, unknown>
 
 interface CustomSubColumn {
   headerClassName?: string

test/icon.test.tsx

@@ -9,10 +9,7 @@ describe('Icon', () => {
   it('onClick event prop is activated when clicked', () => {
     const spy = sinon.spy()
     const wrapper = mount(<Icon icon="appointment" onClick={spy} />)
-    wrapper
-      .find(FontAwesomeIcon)
-      .first()
-      .simulate('click')
+    wrapper.find(FontAwesomeIcon).first().simulate('click')
     expect(spy.calledOnce).toBe(true)
   })