fix: packages upgrade and code refactoring

.eslintrc

@@ -37,6 +37,7 @@
   },
   "rules": {
     "no-unused-vars": "off",
+    "@typescript-eslint/consistent-type-imports": "error",
     "@typescript-eslint/no-unused-vars": ["error"],
     "import/no-extraneous-dependencies": [
       "error",

.storybook/main.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
   webpackFinal: async (config) => {
     config.resolve.fallback.crypto = require.resolve('crypto-browserify');
@@ -29,6 +29,7 @@ module.exports = {
         },
       },
     },
+    '@storybook/addon-webpack5-compiler-babel',
   ],
 
   framework: {
@@ -38,7 +39,9 @@ module.exports = {
 
   staticDirs: ['../static', '../public'],
 
-  docs: {
-    autodocs: true,
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
   },
 };

.storybook/preview.js

@@ -26,3 +26,4 @@ mswInitialize();
 
 // Provide the MSW addon decorator globally
 export const decorators = [mswDecorator];
+export const tags = ['autodocs', 'autodocs'];

.storybook/test-runner.js

@@ -1,6 +1,6 @@
 const { injectAxe, checkA11y } = require('axe-playwright');
 module.exports = {
-    preVisit: async (page) => {
+  preVisit: async (page) => {
     // before the story has been rendered inject AXE
     await injectAxe(page);
   },

Dockerfile

@@ -1,86 +1,80 @@
 # ===============================================
-FROM helsinkitest/node:20-slim as appbase
+FROM registry.access.redhat.com/ubi9/nodejs-20 AS appbase
 # ===============================================
 
-# Offical image has npm log verbosity as info. More info - https://github.com/nodejs/docker-node#verbosity
+# Set environment
+ARG PORT=3000
+ENV PORT $PORT
+
+WORKDIR /app
+
+# Install yarn
+USER root
+RUN curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | tee /etc/yum.repos.d/yarn.repo && \
+    yum -y install yarn
+
+# Yarn version
+ENV YARN_VERSION 4.0.0
+RUN yarn policies set-version ${YARN_VERSION}
+
+
+# Set npm log verbosity level
 ENV NPM_CONFIG_LOGLEVEL warn
 
-# Global npm deps in a non-root user directory
+# Global npm dependencies in a non-root user directory
 ENV NPM_CONFIG_PREFIX=/app/.npm-global
 ENV PATH=$PATH:/app/.npm-global/bin
 
-# Set env
-ARG PORT
-ENV PORT $PORT
-
-# Yarn
-ENV YARN_VERSION 1.19.1
-RUN yarn policies set-version $YARN_VERSION
-
-# Use non-root user
-USER appuser
+# Set NODE_ENV to development in the development container
+ARG NODE_ENV=development
+ENV NODE_ENV $NODE_ENV
 
-# Copy package.json and package-lock.json/yarn.lock files
-COPY --chown=appuser:appuser package*.json *yarn* ./
+# Copy package.json and yarn.lock files
+COPY --chown=default:root package*.json *yarn* ./
 
 # Make scripts in dependencies available through path
 ENV PATH /app/node_modules/.bin:$PATH
 
-USER root
-
-# Build scripts for production stage rely on devDependencies. When
-# NODE_ENV is production, some of these dependencies would not be
-# installed. For this purpose, we are setting NODE_ENV to "develop" for
-# the durationo this RUN command to ensure that all dependencies are
-# installed.
-RUN export NODE_ENV=develop && \
-    apt-install.sh \
-    build-essential && \
-    su appuser -c "yarn && yarn cache clean --force" && \
-    apt-cleanup.sh build-essential
-
-USER appuser
+# Install dependencies including storybook addons
+RUN yarn && yarn cache clean
 
 # =============================
-FROM appbase as development
+FROM appbase AS development
 # =============================
 
-# Set NODE_ENV to development in the development container
-ARG NODE_ENV=development
-ENV NODE_ENV $NODE_ENV
-
 # Copy all files
-COPY --chown=appuser:appuser . .
+COPY --chown=default:root . .
 
-# Bake package.json start command into the image
-CMD ["yarn", "dev"]
+# Start command for development
+CMD ["yarn", "dev:no-open"]
 
 # =============================
-FROM appbase as staticbuilder
+FROM appbase AS staticbuilder
 # =============================
 
 # Set NODE_ENV to production for build
 ARG NODE_ENV=production
 ENV NODE_ENV $NODE_ENV
 
-# Copy all files
-COPY --chown=appuser:appuser . .
+# Copy all files, including .mdx stories
+COPY --chown=default:root . .
 
+# Build Storybook
 RUN yarn build-storybook --loglevel error
 
 # =============================
-FROM appbase as production
+FROM appbase AS production
 # =============================
 
 # Set NODE_ENV to production in the production container
 ARG NODE_ENV=production
 ENV NODE_ENV $NODE_ENV
 
 # Copy build folder
-COPY --from=staticbuilder --chown=appuser:appuser /app/storybook-static/ /app/storybook-static/
+COPY --from=staticbuilder --chown=default:root /app/storybook-static/ /app/storybook-static/
 
 # Copy server folder
-COPY --from=staticbuilder --chown=appuser:appuser /app/storybook-server/ /app/storybook-server/
+COPY --from=staticbuilder --chown=default:root /app/storybook-server/ /app/storybook-server/
 
 # Start server
-CMD ["yarn", "node", "./storybook-server/index.js"]
+CMD ["node", "./storybook-server/index.js"]

docker-compose.yml

@@ -1,4 +1,3 @@
-version: '3.7'
 services:
   app:
     container_name: react-helsinki-headless-cms

package.json

@@ -7,6 +7,7 @@
   "types": "index.d.ts",
   "scripts": {
     "dev": "yarn storybook",
+    "dev:no-open": "yarn storybook --no-open",
     "typecheck": "tsc --project ./tsconfig.json --noEmit",
     "lint": "yarn eslint \"src/**/*.{ts,tsx}\" && yarn prettier ./src -c",
     "lint-fix": "yarn eslint \"src/**/*.{ts,tsx}\" --fix && yarn prettier ./src -w",
@@ -46,7 +47,7 @@
   },
   "homepage": "https://github.com/City-of-Helsinki/react-helsinki-headless-cms#readme",
   "peerDependencies": {
-    "@apollo/client": "^3.7.16",
+    "@apollo/client": "^3.10.16",
     "date-fns": "^2.28.0",
     "hds-react": ">=1.11.1",
     "react": ">=16.8.0",
@@ -58,92 +59,95 @@
     }
   },
   "devDependencies": {
-    "@apollo/client": "^3.7.16",
-    "@babel/core": "^7.22.10",
-    "@babel/plugin-transform-runtime": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@graphql-codegen/cli": "^5.0.0",
-    "@graphql-codegen/typescript": "^4.0.1",
-    "@graphql-codegen/typescript-operations": "^4.0.1",
-    "@graphql-codegen/typescript-react-apollo": "^3.2.11",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.2.0",
-    "@storybook/addon-a11y": "^7.3.1",
-    "@storybook/addon-actions": "^7.3.1",
-    "@storybook/addon-essentials": "^7.3.1",
-    "@storybook/addon-interactions": "^7.3.1",
-    "@storybook/addon-links": "^7.3.1",
-    "@storybook/addon-viewport": "^7.3.1",
+    "@apollo/client": "^3.11.10",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@chromatic-com/storybook": "^3",
+    "@graphql-codegen/cli": "^5.0.3",
+    "@graphql-codegen/typescript": "^4.1.1",
+    "@graphql-codegen/typescript-operations": "^4.3.1",
+    "@graphql-codegen/typescript-react-apollo": "^4.3.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@storybook/addon-a11y": "^8.4.2",
+    "@storybook/addon-actions": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/addon-viewport": "^8.4.2",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.3.1",
-    "@storybook/react-webpack5": "^7.3.1",
-    "@storybook/test-runner": "^0.16.0",
-    "@storybook/testing-library": "^0.2.0",
-    "@testing-library/jest-dom": "^6.1.6",
-    "@testing-library/react": "^14.1.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/dompurify": "^3.0.2",
-    "@types/jest": "^29.5.3",
-    "@types/jest-axe": "^3.5.5",
-    "@types/lodash-es": "^4.17.9",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "axe-playwright": "^1.1.11",
-    "babel-loader": "^9.1.3",
-    "classnames": "^2.3.1",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-webpack5": "^8.4.2",
+    "@storybook/test": "^8.4.2",
+    "@storybook/test-runner": "^0.19.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/dompurify": "^3.0.5",
+    "@types/jest": "^29.5.14",
+    "@types/jest-axe": "^3.5.9",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
+    "axe-playwright": "^2.0.3",
+    "babel-loader": "^9.2.1",
+    "classnames": "^2.5.1",
     "cross-env": "^7.0.3",
-    "crypto-browserify": "^3.12.0",
+    "crypto-browserify": "^3.12.1",
     "css-loader": "^6.7.1",
-    "edit-json-file": "^1.7.0",
-    "eslint": "^8.47.0",
+    "edit-json-file": "^1.8.0",
+    "eslint": "^8.0.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "git-rev-sync": "^3.0.2",
-    "graphql": "^16.8.0",
-    "hds-react": "^3.9.0",
+    "graphql": "^16.9.0",
+    "hds-react": "^3.11.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.6.2",
-    "jest-axe": "^8.0.0",
+    "jest": "^29.7.0",
+    "jest-axe": "^9.0.0",
     "jest-fetch-mock": "^3.0.3",
     "msw": "^1.1.0",
-    "msw-storybook-addon": "^1.8.0",
-    "postcss": "^8.4.28",
-    "prettier": "3.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-helmet-async": "^1.2.3",
-    "rollup": "^3.28.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-dts": "^6.0.0",
+    "msw-storybook-addon": "1.8.0",
+    "postcss": "^8.4.49",
+    "postcss-scss": "^4.0.9",
+    "prettier": "3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
+    "rollup": "^4.26.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.1.0",
+    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-includepaths": "^0.2.4",
-    "rollup-plugin-polyfill-node": "^0.12.0",
+    "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-typescript2": "^0.35.0",
+    "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.66.0",
     "sass-loader": "^13.3.2",
-    "storybook": "^7.3.1",
-    "style-loader": "^3.3.1",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "webpack": "^5.70.0"
+    "storybook": "^8.4.2",
+    "style-loader": "^4.0.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.3",
+    "webpack": "^5.96.1"
   },
   "dependencies": {
-    "hds-design-tokens": "^3.9.0",
-    "html-entities": "^2.4.0",
-    "html-react-parser": "^4.2.9",
-    "isomorphic-dompurify": "^1.8.0",
-    "jest-environment-jsdom": "^29.6.2",
+    "hds-design-tokens": "^3.11.0",
+    "html-entities": "^2.5.2",
+    "html-react-parser": "^5.1.18",
+    "isomorphic-dompurify": "^2.16.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lodash-es": "^4.17.21"
   },
   "msw": {