Node version update

.github/workflows/frontend.yml

@@ -10,11 +10,11 @@ on:
 jobs:
   build:
 
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22]
 
     steps:
     - name: Check out code

Dockerfile

@@ -35,7 +35,7 @@ COPY ./backend ./
 RUN make build
 
 # Frontend build
-FROM docker.io/library/node:15 as frontend-install
+FROM docker.io/library/node:22 as frontend-install
 WORKDIR /app/frontend
 COPY frontend/package*.json ./
 RUN npm install

frontend/.storybook/main.js

@@ -1,8 +1,20 @@
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/preset-create-react-app',
   ],
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+
+  staticDirs: ['../public'],
+
+  docs: {
+    autodocs: true
+  }
 };

frontend/.storybook/preview.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import themesConf from '../src/lib/themes';
-import { StylesProvider } from '@material-ui/core/styles';
+import { StylesProvider } from '@mui/styles';
 import '../src/i18n/config';
 import ThemeProviderNexti18n from '../src/i18n/ThemeProviderNexti18n';
+import { StyledEngineProvider } from '@mui/material/styles';
 
 const darkTheme = themesConf['dark'];
 const lightTheme = themesConf['light'];
@@ -12,9 +13,11 @@ const withThemeProvider = (Story, context) => {
   const theme = backgroundColor !== 'dark' ? lightTheme : darkTheme;
 
   const ourThemeProvider = (
-    <ThemeProviderNexti18n theme={theme}>
-      <Story {...context} />
-    </ThemeProviderNexti18n>
+    <StyledEngineProvider injectFirst>
+      <ThemeProviderNexti18n theme={theme}>
+        <Story {...context} />
+      </ThemeProviderNexti18n>
+    </StyledEngineProvider>
   );
   if (process.env.NODE_ENV !== 'test') {
     return ourThemeProvider;