Merge pull request #596 from acelaya-forks/feature/update-deps

Feature/update deps

CHANGELOG.md

@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * [#567](https://github.com/shlinkio/shlink-web-client/pull/567) Improved Shlink 3.0.0 compatibility by checking the `INVALID_SHORT_URL_DELETION` error code when deleting short URLs.
 * [#524](https://github.com/shlinkio/shlink-web-client/pull/524) Updated to react-router v6.
 * [#579](https://github.com/shlinkio/shlink-web-client/pull/579) Replaced react-color with react-colorful.
+* [#564](https://github.com/shlinkio/shlink-web-client/pull/564) Updated most of the dependencies.
 
 ### Deprecated
 * *Nothing*

package.json

@@ -28,77 +28,76 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/react-fontawesome": "^0.1.14",
-    "axios": "^0.21.2",
+    "axios": "^0.26.0",
     "bootstrap": "^5.1.3",
     "bottlejs": "^2.0.0",
     "bowser": "^2.11.0",
-    "chart.js": "^3.5.1",
+    "chart.js": "^3.7.1",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
-    "compare-versions": "^3.6.0",
+    "compare-versions": "^4.1.3",
     "csvjson": "^5.1.0",
-    "date-fns": "^2.22.1",
+    "date-fns": "^2.28.0",
-    "event-source-polyfill": "^1.0.22",
+    "event-source-polyfill": "^1.0.25",
     "leaflet": "^1.7.1",
-    "promise": "^8.1.0",
     "qs": "^6.9.6",
-    "ramda": "^0.27.1",
+    "ramda": "^0.27.2",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
-    "react-chartjs-2": "^3.0.4",
+    "react-chartjs-2": "^3.3.0",
     "react-colorful": "^5.5.1",
-    "react-copy-to-clipboard": "^5.0.2",
+    "react-copy-to-clipboard": "^5.0.4",
     "react-datepicker": "^3.6.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
-    "react-external-link": "^1.2.0",
+    "react-external-link": "^1.2.2",
-    "react-leaflet": "^3.1.0",
+    "react-leaflet": "^3.2.5",
-    "react-redux": "^7.2.2",
+    "react-redux": "^7.2.6",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.2.2",
-    "react-swipeable": "^6.0.1",
+    "react-swipeable": "^6.2.0",
-    "react-tag-autocomplete": "^6.1.0",
+    "react-tag-autocomplete": "^6.3.0",
     "reactstrap": "^9.0.1",
-    "redux": "^4.0.5",
+    "redux": "^4.1.2",
-    "redux-localstorage-simple": "^2.4.0",
+    "redux-localstorage-simple": "^2.4.1",
-    "redux-thunk": "^2.3.0",
+    "redux-thunk": "^2.4.1",
     "uuid": "^8.3.2",
-    "workbox-core": "^6.1.5",
+    "workbox-core": "^6.5.1",
-    "workbox-expiration": "^6.1.5",
+    "workbox-expiration": "^6.5.1",
-    "workbox-precaching": "^6.1.5",
+    "workbox-precaching": "^6.5.1",
-    "workbox-routing": "^6.1.5",
+    "workbox-routing": "^6.5.1",
-    "workbox-strategies": "^6.1.5"
+    "workbox-strategies": "^6.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
     "@shlinkio/eslint-config-js-coding-standard": "~1.2.2",
-    "@stryker-mutator/core": "^5.4.1",
+    "@stryker-mutator/core": "^5.6.1",
-    "@stryker-mutator/jest-runner": "^5.4.1",
+    "@stryker-mutator/jest-runner": "^5.6.1",
-    "@stryker-mutator/typescript-checker": "^5.4.1",
+    "@stryker-mutator/typescript-checker": "^5.6.1",
     "@svgr/webpack": "^5.5.0",
-    "@types/classnames": "^2.2.11",
+    "@types/classnames": "^2.3.1",
     "@types/enzyme": "^3.10.11",
     "@types/jest": "^27.4.1",
-    "@types/leaflet": "^1.5.23",
+    "@types/leaflet": "^1.7.9",
-    "@types/qs": "^6.9.5",
+    "@types/qs": "^6.9.7",
-    "@types/ramda": "^0.27.38",
+    "@types/ramda": "0.27.38",
-    "@types/react": "^17.0.2",
+    "@types/react": "^17.0.39",
-    "@types/react-color": "^3.0.4",
+    "@types/react-color": "^3.0.6",
-    "@types/react-copy-to-clipboard": "^5.0.0",
+    "@types/react-copy-to-clipboard": "^5.0.2",
-    "@types/react-datepicker": "^3.1.5",
+    "@types/react-datepicker": "^4.3.4",
-    "@types/react-dom": "^17.0.1",
+    "@types/react-dom": "^17.0.13",
-    "@types/react-leaflet": "^2.5.2",
+    "@types/react-leaflet": "^2.8.2",
-    "@types/react-redux": "^7.1.16",
+    "@types/react-redux": "^7.1.23",
-    "@types/react-tag-autocomplete": "^6.1.0",
+    "@types/react-tag-autocomplete": "^6.1.1",
-    "@types/uuid": "^8.3.0",
+    "@types/uuid": "^8.3.4",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.5",
-    "adm-zip": "^0.4.16",
+    "adm-zip": "^0.5.9",
-    "autoprefixer": "^10.0.2",
+    "autoprefixer": "^10.4.2",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.3",
-    "babel-plugin-named-asset-import": "^0.3.7",
+    "babel-plugin-named-asset-import": "^0.3.8",
-    "babel-preset-react-app": "^10.0.0",
+    "babel-preset-react-app": "10.0.0",
     "babel-runtime": "^6.26.0",
     "bfj": "^7.0.2",
-    "case-sensitive-paths-webpack-plugin": "^2.3.0",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "chalk": "^4.1.2",
     "css-loader": "^5.0.1",
     "dart-sass": "^1.25.0",
@@ -116,19 +115,18 @@
     "mini-css-extract-plugin": "^1.3.1",
     "object-assign": "^4.1.1",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "pnp-webpack-plugin": "^1.6.4",
+    "pnp-webpack-plugin": "^1.7.0",
-    "postcss": "^8.2.13",
+    "postcss": "^8.4.8",
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "postcss-safe-parser": "^5.0.2",
-    "raf": "^3.4.1",
     "react-dev-utils": "^11.0.0",
-    "resolve": "^1.19.0",
+    "resolve": "^1.22.0",
-    "sass": "^1.29.0",
+    "sass": "^1.49.9",
     "sass-loader": "^10.1.0",
     "serve": "^12.0.0",
-    "stryker-cli": "^1.0.0",
+    "stryker-cli": "^1.0.2",
     "style-loader": "^2.0.0",
     "stylelint": "^13.7.2",
     "stylelint-config-adidas": "^1.3.0",
@@ -140,11 +138,11 @@
     "ts-mockery": "^1.2.0",
     "typescript": "^4.4.4",
     "url-loader": "^4.1.1",
-    "webpack": "^4.44.2",
+    "webpack": "^4.46.0",
-    "webpack-dev-server": "^3.11.0",
+    "webpack-dev-server": "^3.11.3",
     "webpack-manifest-plugin": "^2.2.0",
-    "whatwg-fetch": "^3.5.0",
+    "whatwg-fetch": "^3.6.2",
-    "workbox-webpack-plugin": "^6.1.5"
+    "workbox-webpack-plugin": "^6.5.1"
   },
   "browserslist": [
     ">0.2%",

src/common/Home.scss

@@ -2,8 +2,7 @@
 @import '../utils/mixins/vertical-align';
 
 $mainCardWidth: 720px;
-$totalColumns: 12;
+$fiveColumnsSize: 0.416666667; // 12 / 5 -> Can't use "/" operator in latest dart-sass
-$logoColumns: 5;
 
 .home {
   position: relative;
@@ -25,7 +24,7 @@ $logoColumns: 5;
 .home__logo {
   @include vertical-align();
 
-  width: calc(#{$mainCardWidth / $totalColumns * $logoColumns} - 3rem);
+  width: calc(#{$mainCardWidth * $fiveColumnsSize} - 3rem);
 }
 
 .home__main-card {

src/visits/charts/DoughnutChart.tsx

@@ -57,8 +57,8 @@ export const DoughnutChart: FC<DoughnutChartProps> = memo(({ stats }) => {
       <div className="col-sm-12 col-md-7">
         <Doughnut
           height={300}
-          data={chartData}
+          data={chartData as any}
-          options={options}
+          options={options as any}
           ref={(element) => {
             setChartRef(element ?? undefined);
           }}

src/visits/charts/HorizontalBarChart.tsx

@@ -113,8 +113,8 @@ export const HorizontalBarChart: FC<HorizontalBarChartProps> = (
   const renderChartComponent = (customKey: string) => (
     <Bar
       key={`${height}_${customKey}`}
-      data={chartData}
+      data={chartData as any}
-      options={options}
+      options={options as any}
       height={height}
       getElementAtEvent={chartElementAtEvent(labels, onClick) as any}
     />

src/visits/charts/LineChartCard.tsx

@@ -222,8 +222,8 @@ const LineChartCard = (
   };
   const renderLineChart = () => (
     <Line
-      data={generateChartData()}
+      data={generateChartData() as any}
-      options={options}
+      options={options as any}
       getElementAtEvent={chartElementAtEvent(labels, datasetsByPoint, setSelectedVisits) as any}
     />
   );

test/visits/charts/DoughnutChart.test.tsx

@@ -19,9 +19,9 @@ describe('<DoughnutChart />', () => {
 
     expect(doughnut).toHaveLength(1);
 
-    const { labels, datasets } = doughnut.prop('data');
+    const { labels, datasets } = doughnut.prop('data') as any;
     const [{ data, backgroundColor, borderColor }] = datasets;
-    const { plugins, scales } = doughnut.prop('options') ?? {};
+    const { plugins, scales } = (doughnut.prop('options') ?? {}) as any;
 
     expect(labels).toEqual(keys(stats));
     expect(data).toEqual(values(stats));

test/visits/charts/HorizontalBarChart.test.tsx

@@ -19,8 +19,8 @@ describe('<HorizontalBarChart />', () => {
 
     expect(horizontal).toHaveLength(1);
 
-    const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data');
+    const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data') as any;
-    const { plugins, scales } = horizontal.prop('options') ?? {};
+    const { plugins, scales } = (horizontal.prop('options') ?? {}) as any;
 
     expect(backgroundColor).toEqual(MAIN_COLOR_ALPHA);
     expect(borderColor).toEqual(MAIN_COLOR);
@@ -48,7 +48,7 @@ describe('<HorizontalBarChart />', () => {
     wrapper = shallow(<HorizontalBarChart stats={stats} highlightedStats={highlightedStats} />);
     const horizontal = wrapper.find(Bar);
 
-    const { datasets: [{ data, label }, highlightedData ] } = horizontal.prop('data');
+    const { datasets: [{ data, label }, highlightedData ] } = horizontal.prop('data') as any;
 
     expect(label).toEqual('Visits');
     expect(data).toEqual(expectedData);

test/visits/charts/LineChartCard.test.tsx

@@ -85,7 +85,7 @@ describe('<LineChartCard />', () => {
   ])('renders chart with expected data', (visits, highlightedVisits, expectedLines) => {
     const wrapper = createWrapper(visits, highlightedVisits);
     const chart = wrapper.find(Line);
-    const { datasets } = chart.prop('data');
+    const { datasets } = chart.prop('data') as any;
 
     expect(datasets).toHaveLength(expectedLines);
   });
@@ -96,8 +96,8 @@ describe('<LineChartCard />', () => {
       Mock.of<NormalizedVisit>({ date: '2016-01-01' }),
     ]);
 
-    expect(wrapper.find(Line).prop('data').labels).toHaveLength(2);
+    expect((wrapper.find(Line).prop('data') as any).labels).toHaveLength(2);
     wrapper.find(ToggleSwitch).simulate('change');
-    expect(wrapper.find(Line).prop('data').labels).toHaveLength(4);
+    expect((wrapper.find(Line).prop('data') as any).labels).toHaveLength(4);
   });
 });