Updated to latest bootstrap and reactstrap

2026-02-26 19:56:41 +00:00 · 2022-03-05 13:14:26 +01:00
parent 5a713fe92f
commit ce871fe2a2
7 changed files with 117 additions and 83 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
        "@fortawesome/free-solid-svg-icons": "^5.15.2",
        "@fortawesome/react-fontawesome": "^0.1.14",
        "axios": "^0.21.2",
-        "bootstrap": "^4.6.0",
+        "bootstrap": "^5.1.3",
        "bottlejs": "^2.0.0",
        "bowser": "^2.11.0",
        "chart.js": "^3.5.1",
@@ -38,7 +38,7 @@
        "react-router-dom": "^6.2.1",
        "react-swipeable": "^6.0.1",
        "react-tag-autocomplete": "^6.1.0",
-        "reactstrap": "^8.9.0",
+        "reactstrap": "^9.0.1",
        "redux": "^4.0.5",
        "redux-localstorage-simple": "^2.4.0",
        "redux-thunk": "^2.3.0",
@@ -3129,6 +3129,15 @@
        "node": ">=10"
      }
    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
    "node_modules/@react-leaflet/core": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.0.2.tgz",
@@ -7327,16 +7336,15 @@
      "dev": true
    },
    "node_modules/bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/bootstrap"
      },
      "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.10.2"
      }
    },
    "node_modules/bottlejs": {
@@ -9668,8 +9676,7 @@
    "node_modules/csstype": {
      "version": "3.0.7",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
-      "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==",
-      "dev": true
+      "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
    },
    "node_modules/csvjson": {
      "version": "5.1.0",
@@ -10200,11 +10207,12 @@
      }
    },
    "node_modules/dom-helpers": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
-      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
      "dependencies": {
-        "@babel/runtime": "^7.1.2"
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
      }
    },
    "node_modules/dom-serializer": {
@@ -25832,6 +25840,11 @@
        "react-dom": "^17.0"
      }
    },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
    "node_modules/react-is": {
      "version": "16.7.0",
      "resolved": "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz",
@@ -25850,11 +25863,6 @@
        "react-dom": "^17.0.1"
      }
    },
-    "node_modules/react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
    "node_modules/react-onclickoutside": {
      "version": "6.10.0",
      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.10.0.tgz",
@@ -25978,34 +25986,48 @@
      }
    },
    "node_modules/react-transition-group": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
-      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
      "dependencies": {
-        "dom-helpers": "^3.4.0",
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2",
-        "react-lifecycles-compat": "^3.0.4"
+        "prop-types": "^15.6.2"
      },
      "peerDependencies": {
-        "react": ">=15.0.0",
-        "react-dom": ">=15.0.0"
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
      }
    },
    "node_modules/reactstrap": {
-      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz",
-      "integrity": "sha512-pmf33YjpNZk1IfrjqpWCUMq9hk6GzSnMWBAofTBNIRJQB1zQ0Au2kzv3lPUAFsBYgWEuI9iYa/xKXHaboSiMkQ==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.0.1.tgz",
+      "integrity": "sha512-89VOv7SRlAlpS7RwXhzOQkSWkuhBR8LBsPGfNHifNL3WhtNP9y1sBdTcTYyH1ee2QtI8zRdwD0T5I/blHiwemg==",
      "dependencies": {
        "@babel/runtime": "^7.12.5",
+        "@popperjs/core": "^2.6.0",
        "classnames": "^2.2.3",
        "prop-types": "^15.5.8",
-        "react-popper": "^1.3.6",
-        "react-transition-group": "^2.3.1"
+        "react-popper": "^2.2.4",
+        "react-transition-group": "^4.4.2"
      },
      "peerDependencies": {
-        "react": ">=16.3.0",
-        "react-dom": ">=16.3.0"
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/reactstrap/node_modules/react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17"
      }
    },
    "node_modules/read-pkg": {
@@ -35828,6 +35850,11 @@
        }
      }
    },
+    "@popperjs/core": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+    },
    "@react-leaflet/core": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.0.2.tgz",
@@ -39084,9 +39111,9 @@
      "dev": true
    },
    "bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
      "requires": {}
    },
    "bottlejs": {
@@ -40975,8 +41002,7 @@
    "csstype": {
      "version": "3.0.7",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
-      "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==",
-      "dev": true
+      "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
    },
    "csvjson": {
      "version": "5.1.0",
@@ -41412,11 +41438,12 @@
      }
    },
    "dom-helpers": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
-      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
      "requires": {
-        "@babel/runtime": "^7.1.2"
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
      }
    },
    "dom-serializer": {
@@ -53578,6 +53605,11 @@
      "integrity": "sha512-6Lm0pD6rxrvZGVrWIWda809cAtrIlM3fDsKh9y5bKEVpOI0FTO2nTnxaqEood8+rw3svHJgpJGN6lZHO69ZTAQ==",
      "requires": {}
    },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
    "react-is": {
      "version": "16.7.0",
      "resolved": "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz",
@@ -53591,11 +53623,6 @@
        "@react-leaflet/core": "^1.0.2"
      }
    },
-    "react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
    "react-onclickoutside": {
      "version": "6.10.0",
      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.10.0.tgz",
@@ -53682,26 +53709,38 @@
      "requires": {}
    },
    "react-transition-group": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
-      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
      "requires": {
-        "dom-helpers": "^3.4.0",
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2",
-        "react-lifecycles-compat": "^3.0.4"
+        "prop-types": "^15.6.2"
      }
    },
    "reactstrap": {
-      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz",
-      "integrity": "sha512-pmf33YjpNZk1IfrjqpWCUMq9hk6GzSnMWBAofTBNIRJQB1zQ0Au2kzv3lPUAFsBYgWEuI9iYa/xKXHaboSiMkQ==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.0.1.tgz",
+      "integrity": "sha512-89VOv7SRlAlpS7RwXhzOQkSWkuhBR8LBsPGfNHifNL3WhtNP9y1sBdTcTYyH1ee2QtI8zRdwD0T5I/blHiwemg==",
      "requires": {
        "@babel/runtime": "^7.12.5",
+        "@popperjs/core": "^2.6.0",
        "classnames": "^2.2.3",
        "prop-types": "^15.5.8",
-        "react-popper": "^1.3.6",
-        "react-transition-group": "^2.3.1"
+        "react-popper": "^2.2.4",
+        "react-transition-group": "^4.4.2"
+      },
+      "dependencies": {
+        "react-popper": {
+          "version": "2.2.5",
+          "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+          "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+          "requires": {
+            "react-fast-compare": "^3.0.1",
+            "warning": "^4.0.2"
+          }
+        }
      }
    },
    "read-pkg": {
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "axios": "^0.21.2",
-    "bootstrap": "^4.6.0",
+    "bootstrap": "^5.1.3",
    "bottlejs": "^2.0.0",
    "bowser": "^2.11.0",
    "chart.js": "^3.5.1",
@@ -54,7 +54,7 @@
    "react-router-dom": "^6.2.1",
    "react-swipeable": "^6.0.1",
    "react-tag-autocomplete": "^6.1.0",
-    "reactstrap": "^8.9.0",
+    "reactstrap": "^9.0.1",
    "redux": "^4.0.5",
    "redux-localstorage-simple": "^2.4.0",
    "redux-thunk": "^2.3.0",
--- a/src/domains/DomainSelector.tsx
+++ b/src/domains/DomainSelector.tsx
@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { Button, DropdownItem, Input, InputGroup, InputGroupAddon, UncontrolledTooltip } from 'reactstrap';
-import { InputProps } from 'reactstrap/lib/Input';
+import { Button, DropdownItem, Input, InputGroup, UncontrolledTooltip, InputProps } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUndo } from '@fortawesome/free-solid-svg-icons';
 import { isEmpty, pipe } from 'ramda';
@@ -32,24 +31,22 @@ export const DomainSelector = ({ listDomains, value, domainsList, onChange }: Do
  return inputDisplayed ? (
    <InputGroup>
      <Input
-        value={value}
+        value={value ?? ''}
        placeholder="Domain"
        onChange={(e) => onChange(e.target.value)}
      />
-      <InputGroupAddon addonType="append">
-        <Button
-          id="backToDropdown"
-          outline
-          type="button"
-          className="domains-dropdown__back-btn"
-          onClick={pipe(unselectDomain, hideInput)}
-        >
-          <FontAwesomeIcon icon={faUndo} />
-        </Button>
-        <UncontrolledTooltip target="backToDropdown" placement="left" trigger="hover">
-          Existing domains
-        </UncontrolledTooltip>
-      </InputGroupAddon>
+      <Button
+        id="backToDropdown"
+        outline
+        type="button"
+        className="domains-dropdown__back-btn"
+        onClick={pipe(unselectDomain, hideInput)}
+      >
+        <FontAwesomeIcon icon={faUndo} />
+      </Button>
+      <UncontrolledTooltip target="backToDropdown" placement="left" trigger="hover">
+        Existing domains
+      </UncontrolledTooltip>
    </InputGroup>
  ) : (
    <DropdownBtn
--- a/src/short-urls/ShortUrlForm.tsx
+++ b/src/short-urls/ShortUrlForm.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from 'react';
-import { InputType } from 'reactstrap/lib/Input';
+import { InputType } from 'reactstrap/types/lib/Input';
 import { Button, FormGroup, Input, Row } from 'reactstrap';
 import { cond, isEmpty, pipe, replace, trim, T } from 'ramda';
 import classNames from 'classnames';
--- a/src/utils/FormGroupContainer.tsx
+++ b/src/utils/FormGroupContainer.tsx
@@ -1,6 +1,6 @@
 import { FC, useRef } from 'react';
 import { v4 as uuid } from 'uuid';
-import { InputType } from 'reactstrap/lib/Input';
+import { InputType } from 'reactstrap/types/lib/Input';
 import { FormGroup } from 'reactstrap';

 export interface FormGroupContainerProps {
--- a/src/utils/SimpleCard.tsx
+++ b/src/utils/SimpleCard.tsx
@@ -1,5 +1,4 @@
-import { CardProps } from 'reactstrap/lib/Card';
-import { Card, CardBody, CardHeader } from 'reactstrap';
+import { Card, CardBody, CardHeader, CardProps } from 'reactstrap';
 import { ReactNode } from 'react';

 interface SimpleCardProps extends Omit<CardProps, 'title'> {
--- a/src/utils/TooltipToggleSwitch.tsx
+++ b/src/utils/TooltipToggleSwitch.tsx
@@ -1,6 +1,5 @@
 import { FC, useRef } from 'react';
-import { UncontrolledTooltip } from 'reactstrap';
-import { UncontrolledTooltipProps } from 'reactstrap/lib/Tooltip';
+import { UncontrolledTooltip, UncontrolledTooltipProps } from 'reactstrap';
 import { BooleanControlProps } from './BooleanControl';
 import ToggleSwitch from './ToggleSwitch';