wip

Signed-off-by: thediveo <[email protected]>

Makefile

@@ -117,3 +117,13 @@ lsallnifs: ## list all network interfaces with their configuration in all networ
 
 vuln: ## run go vulnerabilities check
 	@scripts/vuln.sh
+
+yarnsetup: ## set up yarn v4 correctly
+	cd webui && \
+	rm -f .yarnrc.yml && \
+	rm -rf .yarn/ && \
+	rm -rf node_modules && \
+	yarn set version berry && \
+	yarn config set nodeLinker node-modules && \
+	yarn install && \
+	yarn eslint --init

webui/.env

@@ -0,0 +1 @@
+VITE_REACT_APP_GIT_VERSION=$REACT_APP_GIT_VERSION

webui/.eslintrc.cjs

@@ -0,0 +1,41 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended",
+    ],
+    "settings": {
+        "react": {
+            "version": "detect",
+        },
+    },
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "react"
+    ],
+    "rules": {
+    }
+}

webui/.storybook/main.ts

@@ -0,0 +1,40 @@
+// Copyright 2023 Harald Albrecht.
+//
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy
+// of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations
+// under the License.
+
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+    stories: [
+        '../src/**/*.stories.@(js|jsx|ts|tsx)',
+        '../src/**/*.sb.mdx',
+    ],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+    ],
+    docs: {
+        autodocs: 'tag',
+    },
+    core: {
+        disableTelemetry: true,
+        disableWhatsNewNotifications: true,
+    },
+}
+
+export default config

webui/.storybook/preview.tsx

@@ -0,0 +1,63 @@
+// Copyright 2023 Harald Albrecht.
+//
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy
+// of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations
+// under the License.
+
+import React, { ReactNode } from 'react'
+import { BrowserRouter } from 'react-router-dom'
+
+import type { Preview } from '@storybook/react'
+
+import '@fontsource/roboto/300.css'
+import '@fontsource/roboto/400.css'
+import '@fontsource/roboto/500.css'
+import '@fontsource/roboto/700.css'
+import '@fontsource/roboto-mono/400.css'
+
+import { lxknsLightTheme } from 'app/appstyles'
+import { createTheme, ScopedCssBaseline, StyledEngineProvider, ThemeProvider } from '@mui/material'
+
+
+const lightTheme = createTheme(
+    {
+        components: {
+            MuiSelect: {
+                defaultProps: {
+                    variant: 'standard', // MUI v4 default.
+                },
+            },
+        },
+        palette: {
+            mode: 'light',
+        },
+    },
+    lxknsLightTheme,
+)
+
+
+const preview: Preview = {
+    decorators: [
+        (Story, context) => (
+            <BrowserRouter basename=''>
+                <StyledEngineProvider injectFirst>
+                    <ThemeProvider theme={lightTheme} >
+                        <ScopedCssBaseline>
+                            <Story />
+                        </ScopedCssBaseline>
+                    </ThemeProvider>
+                </StyledEngineProvider>
+            </BrowserRouter>
+        ),
+    ],
+}
+
+export default preview

webui/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs