HDS-1514: dependency warning fixes

CHANGELOG.md

@@ -15,10 +15,12 @@
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed
 
+- Warnings about "unmet peer dependency".
 - Removed old & deprecated individual `lodash` dependencies and replaced with the full package and importing the needed functions only.
 - [HeaderActionBarItemWithDropdown] Removed useless `@layer` css style which caused Jest/jsdom tests output errors.
 - [Checkbox] Layout issue when using external label with htmlLabelFor-attribute
@@ -36,6 +38,7 @@ Changes that are not related to specific components
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed
@@ -55,6 +58,7 @@ Changes that are not related to specific components
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed
@@ -74,6 +78,7 @@ Changes that are not related to specific components
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed
@@ -93,6 +98,7 @@ Changes that are not related to specific components
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed
@@ -112,6 +118,7 @@ Changes that are not related to specific components
 #### Changed
 
 Changes that are not related to specific components
+
 - [Component] What has been changed
 
 #### Fixed
@@ -175,6 +182,7 @@ Changes that are not related to specific components
 ### Icon kit
 
 #### Added:
+
 - [Icons] New icons in the Forms category: document-group, document-blank, document-blank-group, folder, folder-group & box
 
 ## [3.4.0] - January, 16, 2024

package.json

@@ -7,12 +7,12 @@
     "site"
   ],
   "scripts": {
-    "build": "yarn build:tokens && yarn build:core && yarn build:react && yarn build:hds-js && yarn build:site",
+    "build": "yarn build:code && yarn build:site",
     "build:tokens": "lerna run --scope hds-design-tokens build",
     "build:core": "lerna run --scope hds-core build",
     "build:react": "lerna run --scope hds-react build",
-    "build:hds-js": "lerna run --scope hds-react build:hds-js",
     "build:site": "lerna run --scope site build",
+    "build:code": "yarn build:tokens && yarn build:core && yarn build:react",
     "clean": "lerna clean --yes && rimraf node_modules/ packages/core/lib packages/core/storybook-static packages/react/lib packages/react/storybook-static packages/design-tokens/lib site/.cache site/public",
     "start:core": "lerna run --scope hds-core start",
     "start:react": "lerna run --scope hds-react start",
@@ -30,8 +30,9 @@
     "@types/react-dom/@types/react": "17.0.2",
     "@types/react-dom/**/@types/react": "17.0.2",
     "**/@types/react-dom/**/@types/react": "17.0.2",
-    "multer": "1.4.4-lts.1",
+    "multer": "1.4.5-lts.1",
     "jpeg-js": "0.4.4",
-    "json5": "2.2.2"
+    "json5@>=2.0.0": "2.2.3",
+    "json5@>=1.0.0": "1.0.2"
   }
 }

packages/react/.eslintrc.json

@@ -10,11 +10,9 @@
     "plugin:import/typescript",
     "plugin:jest/recommended",
     "airbnb",
-    "prettier/@typescript-eslint",
-    "prettier/react",
     "plugin:prettier/recommended" // this should always be the last item on this array
   ],
-  "plugins": ["@typescript-eslint", "prettier", "jest", "import"],
+  "plugins": ["@typescript-eslint", "prettier", "react", "jest", "import"],
   "parserOptions": {
     "ecmaVersion": 2018,
     "ecmaFeatures": {
@@ -24,6 +22,7 @@
   "ignorePatterns": ["*.module.css"],
   "rules": {
     "no-use-before-define": "off",
+    "default-param-last": "off",
     "@typescript-eslint/no-use-before-define": ["error"],
     "no-shadow": "off", // replaced by ts-eslint rule below
     "@typescript-eslint/no-shadow": "error",
@@ -40,6 +39,7 @@
         "newlines-between": "always"
       }
     ],
+    "react/function-component-definition": "off",
     "react/jsx-filename-extension": "off",
     "react/jsx-one-expression-per-line": "off",
     "react/jsx-props-no-spreading": "off",
@@ -53,7 +53,12 @@
     "react/prop-types": "off",
     "import/extensions": "off",
     "import/prefer-default-export": "off",
-    "jsx-a11y/control-has-associated-label": "warn",
+    "jsx-a11y/control-has-associated-label": [
+      1,
+      {
+        "ignoreElements": ["td"]
+      }
+    ],
     "jsx-a11y/no-interactive-element-to-noninteractive-role": "warn",
     "jsx-a11y/label-has-associated-control": [
       2,

packages/react/package.json

@@ -60,6 +60,7 @@
     "@storybook/manager-webpack5": "^6.5.12",
     "@storybook/preset-create-react-app": "^4.0.0",
     "@storybook/react": "6.4.22",
+    "@testing-library/dom": "^7.31.2",
     "@testing-library/jest-dom": "5.11.6",
     "@testing-library/react": "11.2.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -71,20 +72,20 @@
     "@types/rollup-plugin-generate-package-json": "^3.2.8",
     "@types/uuid": "^9.0.1",
     "@types/yup": "^0.32.0",
-    "@typescript-eslint/eslint-plugin": "5.10.2",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@wessberg/rollup-plugin-ts": "2.0.4",
     "babel-jest": "^26.0.1",
     "babel-plugin-require-context-hook": "1.0.0",
     "chalk": "4.0.0",
-    "eslint": "7.1.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "23.13.1",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-prettier": "3.1.3",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "4.0.2",
+    "eslint": "8.56.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.6.3",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "identity-obj-proxy": "3.0.0",
     "inquirer": "7.1.0",
     "jest": "^26.0.1",
@@ -94,7 +95,7 @@
     "loki": "0.32.0",
     "path": "0.12.7",
     "postcss-import": "^12.0.1",
-    "prettier": "2.0.5",
+    "prettier": "3.2.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-scripts": "^5.0.0",
@@ -124,8 +125,9 @@
     "@juggle/resize-observer": "3.2.0",
     "@popperjs/core": "2.11.5",
     "@react-aria/visually-hidden": "3.8.0",
+    "@react-spring/web": "9.3.0",
     "@types/cookie": "^0.4.1",
-    "@typescript-eslint/parser": "^5.56.0",
+    "@typescript-eslint/parser": "^6.19.0",
     "await-to-js": "^3.0.0",
     "cookie": "^0.4.1",
     "crc-32": "1.2.0",
@@ -138,18 +140,17 @@
     "lodash": "^4.17.21",
     "memoize-one": "5.2.1",
     "oidc-client-ts": "^2.2.2",
+    "postcss": "^8.4.21",
     "react-hook-form": "^7.43.3",
     "react-merge-refs": "1.1.0",
     "react-popper": "2.2.5",
-    "react-spring": "9.3.0",
     "react-use-measure": "2.0.1",
     "react-virtual": "2.10.4",
     "uuid": "^9.0.0",
     "yup": "^1.0.2"
   },
   "resolutions": {
     "babel-jest": "^26.0.1",
-    "eslint-plugin-react": "7.27.1",
     "jest": "^26.0.1",
     "downshift/react-is": "^16.13.1",
     "react-scripts": "^5.0.0",

packages/react/src/components/accordion/Accordion.test.tsx

@@ -27,7 +27,7 @@ describe('<Accordion /> spec', () => {
         Bar
       </Accordion>,
     );
-    userEvent.click(container.querySelector('[id="accordion-heading"] .label'));
+    userEvent.click(container.querySelector('[id="accordion-heading"] .label') as Element);
     expect(container.querySelector('[id="accordion-content"]')).toBeVisible();
   });
 
@@ -39,7 +39,7 @@ describe('<Accordion /> spec', () => {
       </Accordion>,
     );
 
-    userEvent.click(container.querySelector('[data-testid="accordion-closeButton"]'));
+    userEvent.click(container.querySelector('[data-testid="accordion-closeButton"]') as Element);
 
     await act(async () => {
       jest.runAllTimers();

packages/react/src/components/breadcrumb/Breadcrumb.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jest/no-conditional-expect */
 import React from 'react';
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';

packages/react/src/components/card/Card.stories.tsx

@@ -29,8 +29,7 @@ export const TextHeading = (args) => <Card {...args} />;
 TextHeading.storyName = 'With text & heading';
 TextHeading.args = {
   heading: 'Card',
-  text:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
 };
 
 export const WithOtherComponents = (args) => (
@@ -43,17 +42,15 @@ export const WithOtherComponents = (args) => (
 WithOtherComponents.storyName = 'With other components';
 WithOtherComponents.args = {
   heading: 'Card',
-  text:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
 };
 
 export const WithCustomTheme = (args) => <Card {...args} />;
 WithCustomTheme.storyName = 'With custom theme';
 WithCustomTheme.args = {
   border: true,
   heading: 'Card',
-  text:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
   theme: {
     '--background-color': 'var(--color-white)',
     '--border-color': 'var(--color-black-90)',

packages/react/src/components/cookieConsent/CookieConsent.stories.tsx

@@ -1050,8 +1050,7 @@ export const TunnistamoLoginCookies = (args) => {
       sections: {
         main: {
           title: 'List all cookies used in Tunnistamo login',
-          text:
-            'This is an example how to get consents for all cookies when using Tunnistamo login flow. All used session, language, load balancer and csrf cookies are listed. Tunnistamo uses Tunnistus and Suomi.fi services and cookies of those services are also listed as they have no consent queries of their own.',
+          text: 'This is an example how to get consents for all cookies when using Tunnistamo login flow. All used session, language, load balancer and csrf cookies are listed. Tunnistamo uses Tunnistus and Suomi.fi services and cookies of those services are also listed as they have no consent queries of their own.',
         },
       },
     },
@@ -1076,11 +1075,7 @@ export const TunnistamoLoginCookies = (args) => {
     focusTargetSelector: '#focused-element-after-cookie-consent-closed',
   };
 
-  return (
-    <>
-      <CookiePage contentSource={contentSource} />
-    </>
-  );
+  return <CookiePage contentSource={contentSource} />;
 };
 
 TunnistamoLoginCookies.parameters = {

packages/react/src/components/cookieConsent/content.builder.test.ts

@@ -884,7 +884,7 @@ describe(`content.builder.ts`, () => {
     });
   });
   describe('Automatically adds the consent storage cookie to required consents', () => {
-    it('when noCommonConsentCookie is not true ', () => {
+    it('when noCommonConsentCookie is not true', () => {
       const content = createContent({ siteName, currentLanguage: 'fi' });
       expect(content.requiredCookies).toBeDefined();
       expect(content.requiredCookies?.groups[0].title).toBe(commonContent.commonGroups.sharedConsents.fi.title);

packages/react/src/components/cookieConsent/content.builder.ts

@@ -92,9 +92,10 @@ function getLanguage(lang: SupportedLanguage, overrides: CookieContentSource['la
   } as Content['language'];
 }
 
-function getCategoryDescriptions(
-  language: SupportedLanguage,
-): { requiredCookies: Description; optionalCookies: Description } {
+function getCategoryDescriptions(language: SupportedLanguage): {
+  requiredCookies: Description;
+  optionalCookies: Description;
+} {
   const { requiredCookies, optionalCookies } = commonContent;
   return {
     requiredCookies: requiredCookies[language],
@@ -160,9 +161,10 @@ function mergeObjects(target: MergableContent, source: MergableContent, paths: s
   });
 }
 
-function buildCookieGroups(
-  props: CookieContentSource,
-): { requiredCookies: CookieGroup[]; optionalCookies: CookieGroup[] } {
+function buildCookieGroups(props: CookieContentSource): {
+  requiredCookies: CookieGroup[];
+  optionalCookies: CookieGroup[];
+} {
   const requiredCookies = [];
   const optionalCookies = [];
   const groupMap = new Map<string, CookieGroup>();
@@ -309,9 +311,10 @@ export function createContent(props: CookieContentSource): Content {
   return content as Content;
 }
 
-export function pickConsentIdsFromContentSource(
-  contentSource: Partial<CookieContentSource>,
-): { required: string[]; optional: string[] } {
+export function pickConsentIdsFromContentSource(contentSource: Partial<CookieContentSource>): {
+  required: string[];
+  optional: string[];
+} {
   let required: string[] = [];
   let optional: string[] = [];