Update packages

All packages that could be updated without tests or the build failing
were updated to the last versions.

Updating eslint-plugin-react required a few fixes where code was
violating the linting rules.

Updating to the latest version of Storybook is not trivial. Currently
@dump247/storybook-state is used, but this package does not work with
the next major version of Storybook. This, in addition to some typing
issues, is the biggest hurdle to upgrade to the latest version of
Storybook.

Author: matijs

.storybook/webpack.config.js

@@ -19,10 +19,7 @@ module.exports = {
                 test: /\.tsx?$/,
                 loaders: [
                     'awesome-typescript-loader',
-                    // 'react-docgen-typescript-loader',
                 ],
-                include: path.resolve(__dirname, '../src'),
-                exclude: /node_modules/,
             },
             {
                 test: /\.scss$/,

package-lock.json

@@ -42,72 +42,71 @@
         "gettext-parser": "^3.1.0",
         "lodash.debounce": "^4.0.8",
         "node-gettext": "^2.0.0",
-        "react": "^16.4.2",
         "react-alice-carousel": "^1.14.0",
         "react-avatar-editor": "^11.0.4",
         "react-date-picker": "6.13.0",
-        "react-dom": "^16.4.2",
         "react-dropzone": "^8.1.0",
         "react-player": "^1.7.0",
         "react-router-dom": "^4.1.1",
         "react-spring": "7.2.0",
         "react-tag-autocomplete": "^5.8.0",
         "react-textarea-autosize": "^7.0.4",
-        "uuid": "^3.3.3"
+        "uuid": "^3.4.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.2.2",
-        "@dump247/storybook-state": "^1.5.0",
+        "@babel/core": "^7.8.4",
+        "@dump247/storybook-state": "^1.6.1",
         "@sambego/storybook-styles": "^1.0.0",
-        "@storybook/addon-actions": "^4.0.12",
-        "@storybook/addon-info": "^4.1.11",
-        "@storybook/addon-knobs": "^4.1.11",
-        "@storybook/addon-viewport": "^4.1.11",
-        "@storybook/addons": "^4.1.11",
-        "@storybook/react": "^4.1.11",
+        "@storybook/addon-actions": "^4.1.18",
+        "@storybook/addon-info": "^4.1.18",
+        "@storybook/addon-knobs": "^4.1.18",
+        "@storybook/addon-viewport": "^4.1.18",
+        "@storybook/addons": "^4.1.18",
+        "@storybook/react": "^4.1.18",
         "@types/classnames": "^2.2.9",
-        "@types/enzyme": "^3.10.3",
+        "@types/enzyme": "^3.10.4",
         "@types/enzyme-adapter-react-16": "^1.0.5",
-        "@types/history": "^4.7.0",
         "@types/jest": "^23.3.14",
         "@types/lodash.debounce": "^4.0.6",
-        "@types/node": "^11.9.3",
+        "@types/node": "^12.12.26",
         "@types/react-avatar-editor": "^10.3.5",
-        "@types/react-dom": "^16.0.7",
+        "@types/react-dom": "^16.9.5",
         "@types/react-router": "^4.0.30",
         "@types/react-router-dom": "^4.3.0",
-        "@types/storybook__addon-actions": "^3.0.3",
-        "@types/storybook__addon-links": "^3.3.1",
-        "@types/storybook__react": "^4.0.0",
-        "@types/uuid": "^3.4.6",
-        "@typescript-eslint/parser": "^2.3.0",
+        "@types/storybook__addon-actions": "^3.4.3",
+        "@types/storybook__react": "^4.0.2",
+        "@types/uuid": "^3.4.7",
+        "@typescript-eslint/parser": "^2.19.0",
         "@ultimaker/eslint-config": "^1.1.1",
-        "@ultimaker/stylelint-config": "^1.0.0",
+        "@ultimaker/stylelint-config": "^1.1.3",
         "awesome-typescript-loader": "^5.2.1",
-        "babel-loader": "^8.0.5",
-        "copyfiles": "^2.1.0",
-        "css-loader": "^3.2.0",
-        "enzyme": "^3.10.0",
-        "enzyme-adapter-react-16": "^1.15.1",
-        "enzyme-to-json": "^3.3.4",
-        "eslint": "^6.4.0",
+        "babel-loader": "^8.0.6",
+        "copyfiles": "^2.2.0",
+        "css-loader": "^3.4.2",
+        "enzyme": "^3.11.0",
+        "enzyme-adapter-react-16": "^1.15.2",
+        "enzyme-to-json": "^3.4.4",
+        "eslint": "^6.8.0",
         "eslint-config-airbnb": "^18.0.1",
         "eslint-plugin-import": "^2.18.2",
         "eslint-plugin-jsx-a11y": "^6.2.3",
-        "eslint-plugin-react": "^7.14.3",
+        "eslint-plugin-react": "^7.18.3",
         "eslint-plugin-react-hooks": "^1.7.0",
-        "file-loader": "^3.0.1",
+        "file-loader": "^5.0.2",
         "gettext-extractor": "^3.4.0",
         "jest": "^24.9.0",
-        "react-docgen-typescript-loader": "^3.0.1",
-        "react-docgen-typescript-webpack-plugin": "^1.1.0",
-        "rimraf": "^2.6.3",
-        "sass": "^1.22.12",
-        "sass-loader": "^7.0.3",
-        "storybook-addon-jsx": "^7.0.0",
-        "stylelint": "^11.0.0",
+        "react": "^16.12.0",
+        "react-dom": "^16.12.0",
+        "rimraf": "^3.0.1",
+        "sass": "^1.25.0",
+        "sass-loader": "^8.0.2",
+        "stylelint": "^13.0.0",
         "ts-jest": "^24.2.0",
-        "typescript": "^3.7.2",
-        "webpack": "4.29.3"
+        "typescript": "^3.7.5",
+        "webpack": "^4.41.5"
+    },
+    "peerDependencies": {
+        "react": "^16.12.0",
+        "react-dom": "^16.12.0"
     }
 }

package.json

@@ -34,11 +34,6 @@ const triggerWidth = 45;
 const windowMargin = 12;
 
 export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuState> {
-    public static defaultProps: Partial<ContextMenuProps> = {
-        menuOffsetDirection: 'left',
-        menuDirection: 'south',
-    };
-
     static _getMenuStyle(
         menuOffset: number,
         menuOffsetDirection: MenuOffsetDirection,
@@ -63,6 +58,11 @@ export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuSt
 
     private _menuRef;
 
+    public static defaultProps: Partial<ContextMenuProps> = {
+        menuOffsetDirection: 'left',
+        menuDirection: 'south',
+    };
+
     constructor(props: ContextMenuProps) {
         super(props);
         this.state = {

src/components/context_menu.tsx

@@ -26,16 +26,16 @@ export interface DropDownMenuBaseProps {
 }
 
 export class DropDownMenuBase extends React.Component<DropDownMenuBaseProps, {}> {
-    public static defaultProps: Partial<DropDownMenuBaseProps> = {
-        menuDirection: 'south',
-    };
-
     static _stopPropagation(e): void {
         e.stopPropagation();
     }
 
     private _menuRef;
 
+    public static defaultProps: Partial<DropDownMenuBaseProps> = {
+        menuDirection: 'south',
+    };
+
     constructor(props: DropDownMenuBaseProps) {
         super(props);
         this._menuRef = React.createRef();

src/components/drop_down_menu_base.tsx

@@ -55,17 +55,6 @@ export class ImageCropper extends React.Component<ImageCropperProps, ImageCroppe
         return parseFloat(size) * sizeScale - borderSize * 2;
     }
 
-    static defaultProps: ImageCropperProps = {
-        shape: 'square',
-        size: '200px',
-        minScale: 0.5,
-        maxScale: 2.5,
-        scaleStep: 0.05,
-        borderSize: 0,
-        imageURL: null,
-        onImageChanged: null,
-    };
-
     /**
      * Handles the image changed event. This is debounced because the image data
      * can be pretty large and change very often during zooming / scaling.
@@ -92,6 +81,17 @@ export class ImageCropper extends React.Component<ImageCropperProps, ImageCroppe
         }
     };
 
+    static defaultProps: ImageCropperProps = {
+        shape: 'square',
+        size: '200px',
+        minScale: 0.5,
+        maxScale: 2.5,
+        scaleStep: 0.05,
+        borderSize: 0,
+        imageURL: null,
+        onImageChanged: null,
+    };
+
     constructor(props) {
         super(props);
         this.state = {

src/components/image_cropper.tsx

@@ -61,13 +61,6 @@ export interface OldInputFieldProps extends InputFieldProps {
  * However this component is still available to be backwards compatible.
  */
 export class InputField extends React.Component<OldInputFieldProps, {}> {
-    static defaultProps = {
-        type: 'text',
-        labelLayoutWidth: '1/1',
-        labelWidthBreakpoint: 'sm',
-        staticField: false,
-    };
-
     private readonly inputFields = {
         number: NumberField,
         textarea: TextareaField,
@@ -86,6 +79,13 @@ export class InputField extends React.Component<OldInputFieldProps, {}> {
         search: SearchField,
     };
 
+    static defaultProps = {
+        type: 'text',
+        labelLayoutWidth: '1/1',
+        labelWidthBreakpoint: 'sm',
+        staticField: false,
+    };
+
     render() {
         const { children, ...wrapperProps } = this.props;
         const Component = this.inputFields[wrapperProps.type];

src/components/input_field.tsx

@@ -42,26 +42,18 @@ export interface CodeFieldState {
  * The code field is a text field that includes {maxLength} single-letter password inputs.
  */
 export class CodeField extends React.Component<CodeFieldProps, CodeFieldState> {
-    /**
-     * if the user wrote one of the later characters but not earlier ones,
-     * we add this character as filler
-     */
-    private static readonly _emptyChar: string = '\t';
-
     /**
      * References to the input fields to focus on them.
      * Note that we don't use React.CreateRef because that would require some extra code
      * for re-initializing the array whenever {maxLength} changes.
      */
+    private readonly _inputRefs: HTMLInputElement[] = [];
 
-    /** The default props */
     static defaultProps = {
         type: 'number',
     };
 
-    private readonly _inputRefs: HTMLInputElement[] = [];
-
-    constructor(props) {
+    constructor(props: Readonly<CodeFieldProps>) {
         super(props);
 
         this.state = {
@@ -110,6 +102,11 @@ export class CodeField extends React.Component<CodeFieldProps, CodeFieldState> {
         };
     }
 
+    /**
+     * if the user wrote one of the later characters but not earlier ones,
+     * we add this character as filler
+     */
+    private static readonly _emptyChar: string = '\t';
 
     /**
      * Handles changes to the text selection in the document.

src/components/input_fields/code_field.tsx

@@ -16,17 +16,17 @@ interface SearchBarState {
 }
 
 class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
-    static defaultProps = {
-        emitDelay: 0,
-        query: '',
-    }
-
     id = uuidv4();
 
     debouncedEmit = (({ onChange, emitDelay }) => debounce(
         onChange, emitDelay,
     ))(this.props);
 
+    static defaultProps = {
+        emitDelay: 0,
+        query: '',
+    }
+
     constructor(props: Readonly<SearchBarProps>) {
         super(props);
         const { query } = props;

src/components/search_bar/search_bar.tsx

@@ -22,10 +22,6 @@ export interface TooltipState {
 const windowMargin = 10;
 
 export class Tooltip extends React.Component<TooltipProps, TooltipState> {
-    static defaultProps = {
-        direction: 'north',
-    };
-
     private static _getElementDetails(el: any): any {
         // get global positions of a html element
         const element = el.getBoundingClientRect();
@@ -39,6 +35,10 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
 
     private _tooltipRef;
 
+    static defaultProps = {
+        direction: 'north',
+    };
+
     constructor(props) {
         super(props);
         this.state = {