chore: upgrade hds-react, next.js, react.js and styled-components (HL…

…-1003) (#2449) Packages - Update hds-react: `2.10.0` -> `2.17.0` - Update next: `12.3.4` -> `13.5.6` - Update react & react-dom: `18.0.0` -> `18.2.0` - Update styled-components: `5.3.1` -> `5.3.11` - Update many dependencies - Add hds-design-tokens: `2.17.0` Changes - All projects: Explicitly include `hds-design-tokens` - All projects: Add `margin: 0; padding: 0` CSS properties to `<body>` - All projects: Clean up the yarn audit whitelist - Benefit-handler: Fix type error in `BatchActionsInspectionForm.tsx` - Benefit-applicant: Remove redundant CSS properties - TET-admin, TET-youth: Use legacy Next.js `<Image>` component - TET-admin, TET-youth: Props in correct type for `<Image>` - TET-youth: Don't use `<a>` inside new Next.js `<Link>` Commits * chore: upgrade hds-react to 2.17.0 and next to 13.5.6 * fix: use new nextjs <Image> in tet * fix: tet youth browser tests * fix: add hds-design-tokens, update react, styled-components * fix: clean up yarn audit whitelist * fix: add global body margin: 0 css
City-of-Helsinki · Nov 27, 2023 · 4d130ce · 4d130ce
1 parent 86b3d8a
commit 4d130ce
Show file tree

Hide file tree

Showing 25 changed files with 628 additions and 362 deletions.
diff --git a/frontend/audit-ci.jsonc b/frontend/audit-ci.jsonc
@@ -4,10 +4,7 @@
     "json5",                // jest, eslint, testcafe, next, babel
     "parse-url",            // lerna
     "parse-path",           // lerna
-    "shell-quote",          // next
-    "loader-utils",         // next
     "moment",               // testcafe
-    "jsonwebtoken",         // testcafe
     "http-cache-semantics", // testcafe
     "requestretry",         // slack-node
     "decode-uri-component", // testcafe, lerna

diff --git a/frontend/benefit/applicant/package.json b/frontend/benefit/applicant/package.json
@@ -28,24 +28,25 @@
     "dotenv": "^16.0.0",
     "finnish-ssn": "^2.1.1",
     "formik": "^2.2.9",
-    "hds-react": "^2.10.0",
+    "hds-design-tokens": "^2.17.0",
+    "hds-react": "^2.17.0",
     "lodash": "^4.17.21",
-    "next": "^12.3.4",
+    "next": "^13.5.6",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^13.0.3",
     "next-plugin-custom-babel-config": "^1.0.5",
     "next-transpile-modules": "^9.1.0",
     "pdfjs-dist": "3.6.172",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-input-mask": "^2.0.4",
     "react-loading-skeleton": "^3.0.3",
     "react-markdown": "^8.0.7",
     "react-pdf": "^7.1.2",
     "react-query": "^3.34.0",
     "react-toastify": "^9.0.4",
     "snakecase-keys": "^5.4.2",
-    "styled-components": "^5.3.1",
+    "styled-components": "^5.3.11",
     "uuid": "^8.3.2",
     "yup": "^0.32.9"
   },

diff --git a/frontend/benefit/applicant/src/pages/_app.tsx b/frontend/benefit/applicant/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import 'react-toastify/dist/ReactToastify.css';
 import '../styles/globals.css';
 import 'benefit-shared/styles/app.css';
+import 'hds-design-tokens';
 
 import AuthProvider from 'benefit/applicant/auth/AuthProvider';
 import Layout from 'benefit/applicant/components/layout/Layout';

diff --git a/frontend/benefit/applicant/src/styles/globals.css b/frontend/benefit/applicant/src/styles/globals.css
@@ -1,9 +1,3 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-}
-
 ul {
   list-style: none;
 }

diff --git a/frontend/benefit/handler/package.json b/frontend/benefit/handler/package.json
@@ -27,22 +27,23 @@
     "finnish-ssn": "^2.1.1",
     "formik": "^2.2.9",
     "fuse.js": "^6.6.2",
-    "hds-react": "^2.10.0",
+    "hds-design-tokens": "^2.17.0",
+    "hds-react": "^2.17.0",
     "ibantools": "^4.3.4",
     "lodash": "^4.17.21",
-    "next": "^12.3.4",
+    "next": "^13.5.6",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^13.0.3",
     "next-plugin-custom-babel-config": "^1.0.5",
     "next-transpile-modules": "^9.1.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-input-mask": "^2.0.4",
     "react-loading-skeleton": "^3.0.3",
     "react-query": "^3.34.0",
     "react-toastify": "^9.0.4",
     "snakecase-keys": "^5.4.2",
-    "styled-components": "^5.3.1",
+    "styled-components": "^5.3.11",
     "uuid": "^8.3.2",
     "yup": "^0.32.9"
   },

diff --git a/frontend/benefit/handler/src/components/batchProcessing/BatchActionsInspectionForm.tsx b/frontend/benefit/handler/src/components/batchProcessing/BatchActionsInspectionForm.tsx
@@ -18,7 +18,6 @@ import React, { ChangeEvent } from 'react';
 import { $GridCell } from 'shared/components/forms/section/FormSection.sc';
 import Modal from 'shared/components/modal/Modal';
 import theme from 'shared/styles/theme';
-import { CSSProperties } from 'styled-components';
 
 import ConfirmModalContent from '../applicationReview/actions/ConfirmModalContent/confirm';
 import { $InspectionTypeContainer } from '../table/BatchCompletion.sc';
@@ -244,7 +243,7 @@ BatchProps) => {
                     name="inspection_mode"
                     checked={inspectorMode === 'ahjo'}
                     onChange={handleRadioButton}
-                    style={theme.components.radio as CSSProperties}
+                    style={theme.components.radio as React.CSSProperties}
                   />
                 </$GridCell>
                 {inspectorMode === 'ahjo' ? (
@@ -312,7 +311,7 @@ BatchProps) => {
                     name="inspection_mode"
                     checked={inspectorMode === 'p2p'}
                     onChange={handleRadioButton}
-                    style={theme.components.radio as CSSProperties}
+                    style={theme.components.radio as React.CSSProperties}
                   />
                 </$GridCell>
                 {inspectorMode === 'p2p' ? (

diff --git a/frontend/benefit/handler/src/pages/_app.tsx b/frontend/benefit/handler/src/pages/_app.tsx
@@ -2,6 +2,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import '../styles/tabs.css';
 import 'benefit-shared/styles/app.css';
 import '../styles/tables.css';
+import 'hds-design-tokens';
 
 import AuthProvider from 'benefit/handler/auth/AuthProvider';
 import Footer from 'benefit/handler/components/footer/Footer';

diff --git a/frontend/benefit/shared/package.json b/frontend/benefit/shared/package.json
@@ -16,11 +16,11 @@
     "@frontend/shared": "*",
     "camelcase-keys": "^7.0.1",
     "date-fns": "^2.24.0",
+    "hds-react": "^2.17.0",
     "ibantools": "^4.1.5",
-    "hds-react": "^2.10.0",
-    "next": "^12.3.4",
-    "react": "^18.0.0",
-    "styled-components": "^5.3.3"
+    "next": "^13.5.6",
+    "react": "^18.2.0",
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
     "eslint-config-adjunct": "^4.11.1",

diff --git a/frontend/kesaseteli/employer/package.json b/frontend/kesaseteli/employer/package.json
@@ -24,23 +24,24 @@
     "axios": "^0.27.2",
     "babel-plugin-import": "^1.13.3",
     "dotenv": "^16.0.0",
-    "hds-react": "^2.10.0",
+    "hds-design-tokens": "^2.17.0",
+    "hds-react": "^2.17.0",
     "ibantools": "^4.1.5",
     "lodash": "^4.17.21",
-    "next": "^12.3.4",
+    "next": "^13.5.6",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^13.0.3",
     "next-plugin-custom-babel-config": "^1.0.5",
     "next-transpile-modules": "^9.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.30.0",
     "react-input-mask": "^2.0.4",
     "react-loading-skeleton": "^3.0.3",
     "react-query": "^3.34.0",
     "react-toastify": "^9.0.4",
     "react-use": "^17.3.2",
-    "styled-components": "^5.3.1",
+    "styled-components": "^5.3.11",
     "ts-node": "^10.0.0"
   },
   "devDependencies": {

diff --git a/frontend/kesaseteli/employer/src/pages/_app.tsx b/frontend/kesaseteli/employer/src/pages/_app.tsx
@@ -1,4 +1,5 @@
 import 'react-toastify/dist/ReactToastify.css';
+import 'hds-design-tokens';
 
 import AuthProvider from 'kesaseteli/employer/auth/AuthProvider';
 import Footer from 'kesaseteli/employer/components/footer/Footer';

diff --git a/frontend/kesaseteli/handler/package.json b/frontend/kesaseteli/handler/package.json
@@ -25,19 +25,20 @@
     "babel-plugin-import": "^1.13.3",
     "dotenv": "^16.0.0",
     "finnish-ssn": "2.0.4",
-    "hds-react": "^2.10.0",
+    "hds-design-tokens": "^2.17.0",
+    "hds-react": "^2.17.0",
     "lodash": "^4.17.21",
-    "next": "^12.3.4",
+    "next": "^13.5.6",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^13.0.3",
     "next-plugin-custom-babel-config": "^1.0.5",
     "next-transpile-modules": "^9.1.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.30.0",
     "react-query": "^3.34.0",
     "react-toastify": "^9.0.4",
-    "styled-components": "^5.3.1",
+    "styled-components": "^5.3.11",
     "ts-node": "^10.0.0"
   },
   "devDependencies": {

diff --git a/frontend/kesaseteli/handler/src/pages/_app.tsx b/frontend/kesaseteli/handler/src/pages/_app.tsx
@@ -1,4 +1,5 @@
 import 'react-toastify/dist/ReactToastify.css';
+import 'hds-design-tokens';
 
 import Header from 'kesaseteli/handler/components/header/Header';
 import { getBackendDomain } from 'kesaseteli-shared/backend-api/backend-api';

diff --git a/frontend/kesaseteli/youth/package.json b/frontend/kesaseteli/youth/package.json
@@ -26,19 +26,20 @@
     "babel-plugin-import": "^1.13.3",
     "dotenv": "^16.0.0",
     "finnish-ssn": "2.0.4",
-    "hds-react": "^2.10.0",
+    "hds-design-tokens": "^2.17.0",
+    "hds-react": "^2.17.0",
     "lodash": "^4.17.21",
-    "next": "^12.3.4",
+    "next": "^13.5.6",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^13.0.3",
     "next-plugin-custom-babel-config": "^1.0.5",
     "next-transpile-modules": "^9.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.30.0",
     "react-query": "^3.34.0",
     "react-toastify": "^9.0.4",
-    "styled-components": "^5.3.1",
+    "styled-components": "^5.3.11",
     "ts-node": "^10.0.0"
   },
   "devDependencies": {

diff --git a/frontend/kesaseteli/youth/src/pages/_app.tsx b/frontend/kesaseteli/youth/src/pages/_app.tsx
@@ -1,4 +1,5 @@
 import 'react-toastify/dist/ReactToastify.css';
+import 'hds-design-tokens';
 
 import Footer from 'kesaseteli/youth/components/footer/Footer';
 import Header from 'kesaseteli/youth/components/header/Header';

diff --git a/frontend/shared/package.json b/frontend/shared/package.json
@@ -22,19 +22,19 @@
     "express": "^4.17.1",
     "fast-deep-equal": "^3.1.3",
     "finnish-ssn": "^2.1.1",
-    "hds-react": "^2.10.0",
+    "hds-react": "^2.17.0",
     "js-file-download": "^0.4.12",
     "lodash": "^4.17.21",
-    "next": "^12.3.4",
+    "next": "^13.5.6",
     "next-i18next": "^13.0.3",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.30.0",
     "react-loading-skeleton": "^3.0.3",
     "react-query": "^3.34.0",
     "react-table": "^7.7.0",
     "react-toastify": "^9.0.4",
-    "styled-components": "^5.3.1",
+    "styled-components": "^5.3.11",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

diff --git a/frontend/shared/src/styles/main.ts b/frontend/shared/src/styles/main.ts
@@ -11,6 +11,8 @@ export const Main = `
     width: 100%;
     display: flex;
     flex-direction: column;
+    padding: 0;
+    margin: 0;
   }
 
   // Override globally all text to use Helsinki font.

diff --git a/frontend/tet/admin/package.json b/frontend/tet/admin/package.json
@@ -25,21 +25,22 @@
     "babel-plugin-import": "^1.13.3",
     "date-fns": "^2.24.0",
     "dotenv": "^16.0.0",
-    "hds-react": "^2.10.0",
+    "hds-design-tokens": "^2.17.0",
+    "hds-react": "^2.17.0",
     "leaflet": "^1.7.1",
-    "next": "^12.3.4",
+    "next": "^13.5.6",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^13.0.3",
     "next-plugin-custom-babel-config": "^1.0.5",
     "next-transpile-modules": "^9.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.30.0",
     "react-leaflet": "^3.2.5",
     "react-leaflet-markercluster": "^3.0.0-rc1",
     "react-query": "^3.34.0",
     "react-toastify": "^9.0.4",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
     "eslint-config-adjunct": "^4.11.1",

diff --git a/frontend/tet/admin/src/components/editor/imageUpload/ImageUpload.tsx b/frontend/tet/admin/src/components/editor/imageUpload/ImageUpload.tsx
@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios';
 import { Button, FileInput, IconTrash, LoadingSpinner } from 'hds-react';
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import { useTranslation } from 'next-i18next';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -108,7 +108,7 @@ const ImageUpload: React.FC<Props> = ({ isNewPosting }) => {
           />
         ) : (
           <>
-            <$ImageContainer>{image_url && <Image src={image_url} width="100%" height="100%" />}</$ImageContainer>
+            <$ImageContainer>{image_url && <Image src={image_url} width="100" height="100" />}</$ImageContainer>
             {image_url && (
               <$ButtonContainer>
                 <Button variant="danger" iconLeft={<IconTrash />} onClick={removeImage}>

diff --git a/frontend/tet/admin/src/pages/_app.tsx b/frontend/tet/admin/src/pages/_app.tsx
@@ -1,4 +1,5 @@
 import 'react-toastify/dist/ReactToastify.css';
+import 'hds-design-tokens';
 
 import { AppProps } from 'next/app';
 import { appWithTranslation } from 'next-i18next';

diff --git a/frontend/tet/shared/package.json b/frontend/tet/shared/package.json
@@ -16,13 +16,13 @@
   "dependencies": {
     "@frontend/shared": "*",
     "axios": "^0.27.2",
-    "hds-react": "^2.10.0",
-    "next": "^12.3.4",
+    "hds-react": "^2.17.0",
+    "next": "^13.5.6",
     "next-i18next": "^13.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-query": "^3.34.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
     "eslint-config-adjunct": "^4.11.1",

diff --git a/frontend/tet/youth/package.json b/frontend/tet/youth/package.json
@@ -23,22 +23,23 @@
     "@sentry/nextjs": "^7.16.0",
     "axios": "^0.27.2",
     "babel-plugin-import": "^1.13.3",
+    "dotenv": "^16.0.0",
+    "hds-design-tokens": "^2.17.0",
+    "hds-react": "^2.17.0",
     "leaflet": "^1.7.1",
     "leaflet.markercluster": "^1.5.3",
-    "dotenv": "^16.0.0",
-    "hds-react": "^2.10.0",
-    "next": "^12.3.4",
+    "next": "^13.5.6",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^13.0.3",
     "next-plugin-custom-babel-config": "^1.0.5",
     "next-transpile-modules": "^9.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-leaflet": "^3.2.5",
     "react-leaflet-markercluster": "^3.0.0-rc1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
     "react-query": "^3.34.0",
     "sharp": "^0.30.4",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
     "eslint-config-adjunct": "^4.11.1",

diff --git a/frontend/tet/youth/src/components/pageContent/PageContent.tsx b/frontend/tet/youth/src/components/pageContent/PageContent.tsx
@@ -31,8 +31,8 @@ const PageContent: React.FC = () => {
       <$PageContent>
         <$ImageWrapper>
           <Image
-            width="100%"
-            height="100%"
+            width="100"
+            height="100"
             layout="responsive"
             objectFit="contain"
             src="/etela-haaga_kirjasto_230421_kuva_jussi_hellsten_0693.jpg"

diff --git a/frontend/tet/youth/src/components/quickSearch/QuickSearch.sc.ts b/frontend/tet/youth/src/components/quickSearch/QuickSearch.sc.ts
@@ -78,7 +78,7 @@ export const $ButtonContainer = styled.div`
   flex-grow: 1;
 `;
 
-export const $FiltersLink = styled.a`
+export const $FiltersLink = styled.span`
   margin-top: ${(props) => props.theme.spacing.m};
   justify-content: flex-end;
   display: flex;

diff --git a/frontend/tet/youth/src/pages/_app.tsx b/frontend/tet/youth/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-// import 'react-toastify/dist/ReactToastify.css';
+import 'hds-design-tokens';
 
 import { AppProps } from 'next/app';
 import Script from 'next/script';