chore(deps): bump actions/checkout from 2 to 4

.github/workflows/build.yml

@@ -26,10 +26,10 @@ jobs:
                   else
                     echo ENV_NAME="prod" >> $GITHUB_ENV
                   fi
-            - uses: actions/checkout@v2.3.4
+            - uses: actions/checkout@v4
             - uses: actions/setup-node@v3
               with:
-                  node-version: 14
+                  node-version: 18
                   registry-url: 'https://npm.pkg.github.com'
                   cache: 'npm'
             - name: Load .env file
@@ -53,6 +53,9 @@ jobs:
                   echo "127.0.0.1 localhost" | sudo tee -a /etc/hosts
                   echo "fs.inotify.max_user_watches=524288" | sudo tee -a /etc/sysctl.conf
                   npm run test
+            - name: Run component tests
+              run: |
+                  npm run test:components
             - name: Run build
               run: |
                   npm run build

.github/workflows/dockerImage.yml

@@ -21,7 +21,7 @@ jobs:
             FAIL_WEBHOOK_SECRET: ${{ secrets.MS_TEAMS_FAIL_WEBHOOK_URI }}
         steps:
             - name: Checkout
-              uses: actions/checkout@v2
+              uses: actions/checkout@v4
             - name: set env
               run: |
                   RAW=$(git branch -r --contains ${{ github.ref }})
@@ -34,7 +34,7 @@ jobs:
                   fi
             - uses: actions/setup-node@v3
               with:
-                  node-version: 14
+                  node-version: 18
                   cache: 'npm'
             - name: Load .env file
               uses: xom9ikk/dotenv@v2
@@ -55,6 +55,9 @@ jobs:
                   echo "127.0.0.1 localhost" | sudo tee -a /etc/hosts
                   echo "fs.inotify.max_user_watches=524288" | sudo tee -a /etc/sysctl.conf
                   npm run test
+            - name: Run component tests
+              run: |
+                  npm run test:components
             - name: Run build
               run: |
                   npm run build
@@ -87,7 +90,7 @@ jobs:
             IMAGE_WEBHOOK_SECRET: ${{ secrets.MS_TEAMS_IMAGE_WEBHOOK_URI }}
             FAIL_WEBHOOK_SECRET: ${{ secrets.MS_TEAMS_FAIL_WEBHOOK_URI }}
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v4
             - name: Download buildfiles artifact
               uses: actions/download-artifact@v2
               with:

.github/workflows/storybook.yml

@@ -0,0 +1,45 @@
+name: Deploy storybook to Pages
+
+on:
+    push:
+        branches: ['develop']
+
+    workflow_dispatch:
+
+permissions:
+    contents: read
+    pages: write
+    id-token: write
+
+concurrency:
+    group: 'pages'
+    cancel-in-progress: false
+
+jobs:
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+                  cache: 'npm'
+            - run: npm ci
+            - name: set env
+              run: |
+                  echo REACT_APP_API_URL=https://dev.diakonie.dev.virtual-identity.com >> $GITHUB_ENV
+            - name: Run build
+              run: npm run build-storybook
+            - name: Setup Pages
+              uses: actions/configure-pages@v3
+            - name: Upload artifact
+              uses: actions/upload-pages-artifact@v1
+              with:
+                  path: './storybook-static'
+            - name: Deploy to GitHub Pages
+              id: deployment
+              uses: actions/deploy-pages@v2

.gitignore

@@ -22,6 +22,7 @@
 .env.test.local
 .env.production.local
 .idea
+storybook-static
 
 # cypress
 browserstack.json

.storybook/main.ts

@@ -0,0 +1,73 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import * as webpackConfigFactory from '../config/webpack.config';
+import { Configuration } from 'webpack';
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'storybook-react-i18next'
+	],
+	framework: {
+		name: '@storybook/react-webpack5',
+		options: {}
+	},
+	webpackFinal: async (config, { configType }) => {
+		// @ts-ignore
+		const webpackConfig = webpackConfigFactory.default(
+			configType.toLowerCase()
+		);
+
+		return {
+			...config,
+			resolve: {
+				...config.resolve,
+				modules: [
+					...webpackConfig.resolve.modules,
+					...config.resolve.modules
+				],
+				extensions: [
+					...webpackConfig.resolve.extensions,
+					...config.resolve.extensions
+				],
+				alias: {
+					...webpackConfig.resolve.alias,
+					...config.resolve.alias
+				},
+				plugins: [...webpackConfig.resolve.plugins]
+			},
+			plugins: [...webpackConfig.plugins, ...config.plugins],
+			module: {
+				...config.module,
+				rules: [
+					// Exclude svg from storybook file-loader
+					...config.module.rules.map((r: any) => {
+						if (r.test && /svg/.test(r.test)) {
+							// Silence the Storybook loaders for SVG files
+							return { ...r, exclude: /\.svg$/i };
+						}
+						return r;
+					}),
+					// Filter the last catch all because storybook needs to handle mjs files
+					...webpackConfig.module.rules.map((r) => {
+						if (!r.oneOf) {
+							return r;
+						}
+						return {
+							...r,
+							oneOf: r.oneOf.filter(
+								(o) => o.type !== 'asset/resource'
+							)
+						};
+					})
+				]
+			}
+		} as Configuration;
+	},
+	docs: {
+		autodocs: 'tag'
+	}
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,54 @@
+import '../src/resources/styles/styles.scss';
+import '../src/resources/styles/mui-variables-mapping.scss';
+import i18n from 'i18next';
+import { ThemeProvider } from '@mui/material';
+import type { Preview } from '@storybook/react';
+import * as React from 'react';
+import theme from '../src/theme';
+//import i18n from './i18next';
+import { config } from '../src/resources/scripts/config';
+import { LegalLinksProvider } from '../src/globalState/provider/LegalLinksProvider';
+import { init, FALLBACK_LNG } from '../src/i18n';
+import { BrowserRouter as Router } from 'react-router-dom';
+init(config.i18n);
+
+export const withMuiTheme = (Story) => (
+	<Router>
+		<ThemeProvider theme={theme}>
+			<LegalLinksProvider legalLinks={config.legalLinks}>
+				<Story />
+			</LegalLinksProvider>
+		</ThemeProvider>
+	</Router>
+);
+
+export const decorators = [withMuiTheme];
+
+const locales = {};
+(config.i18n.supportedLngs || []).forEach((supportLng) => {
+	const lng = supportLng.split('_informal')[0];
+	locales[supportLng] = i18n.getResource(FALLBACK_LNG, 'languages', lng);
+	if (supportLng.indexOf('_informal') >= 0) {
+		locales[supportLng] += ' (informal)';
+	}
+});
+
+const preview: Preview = {
+	parameters: {
+		i18n,
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/
+			}
+		}
+	},
+	globals: {
+		locale: FALLBACK_LNG,
+		locales
+	},
+	decorators: [withMuiTheme]
+};
+
+export default preview;

.stylelintrc.js

@@ -1,18 +1,10 @@
-const defaultConfig = require('@biotope/quality-gate/config/.stylelintrc');
-
 module.exports = {
-	...defaultConfig,
-	extends: [
-		// TODO: From the admin app. Probably a good idea to enable.
-		// 'stylelint-config-idiomatic-order',
-
-		// The config from quality-gate isn't compatible with stylelint@^14,
-		// therefore merge it with working alternatives.
-		'stylelint-config-standard-scss',
-		'stylelint-config-prettier'
-	],
+	plugins: ['stylelint-scss', 'stylelint-no-unsupported-browser-features'],
+	extends: ['stylelint-config-standard', 'stylelint-config-standard-scss'],
 	rules: {
-		...defaultConfig.rules,
+		'selector-max-id': 0,
+		'scss/dollar-variable-colon-space-after': 'always',
+		'scss/dollar-variable-colon-space-before': 'never',
 		'plugin/no-unsupported-browser-features': [
 			true,
 			{
@@ -39,14 +31,6 @@ module.exports = {
 				]
 			}
 		],
-
-		// From admin app
-		'max-empty-lines': [
-			2,
-			{
-				ignore: ['comments']
-			}
-		],
 		'rule-empty-line-before': [
 			'always-multi-line',
 			{
@@ -56,7 +40,6 @@ module.exports = {
 
 		// Defaults are not good
 		'alpha-value-notation': 'number',
-		'number-leading-zero': 'always',
 		'color-function-notation': 'legacy',
 		'value-keyword-case': null, // Requires e.g. "robotoslab" instead of "RobotoSlab"
 		'scss/operator-no-unspaced': null, // Has false positives

cypress.config.js

@@ -1,4 +1,5 @@
 const { defineConfig } = require('cypress');
+const webpackConfig = require('./config/webpack.config')('development');
 
 // @ts-ignore
 const wp = require('@cypress/webpack-preprocessor');
@@ -22,19 +23,26 @@ const options = {
 
 module.exports = defineConfig({
 	e2e: {
+		testIsolation: true,
 		baseUrl: 'http://localhost:9001',
 		supportFile: 'cypress/support/e2e.{js,jsx,ts,tsx}',
 		setupNodeEvents(on, config) {
 			on('file:preprocessor', wp(options));
 		}
 	},
+	component: {
+		devServer: {
+			framework: 'react',
+			bundler: 'webpack',
+			webpackConfig
+		}
+	},
 	env: {
 		CYPRESS_WS_URL:
 			process.env.CYPRESS_WS_URL || process.env.REACT_APP_API_URL
 	},
-	retries: {
-		runMode: 2
-	},
+	experimentalMemoryManagement: true,
+	numTestsKeptInMemory: 20,
 	video: false,
 	chromeWebSecurity: false,
 	viewportWidth: 1200,