Abgabe Max Kupper

2025-12-05 09:15:21 +01:00
parent 00bcb5afec
commit 73e13e91db
24 changed files with 65133 additions and 0 deletions
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Electron + Rspack</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>
@@ -0,0 +1,25 @@
+{
+  "name": "renderer",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "rspack serve",
+    "build": "rspack build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "@fluentui/react": "^8.125.2",
+    "@fluentui/theme": "^2.7.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@rspack/cli": "^1.6.5",
+    "@rspack/core": "^1.6.5"
+  }
+}
@@ -0,0 +1,42 @@
+const path = require("path");
+
+module.exports = {
+  mode: "development",
+  entry: "./src/index.jsx",
+  output: {
+    filename: "bundle.js",
+    path: path.resolve(__dirname, "dist"),
+  },
+  devServer: {
+    static: {
+      directory: path.join(__dirname, "dist"),
+    },
+    hot: true,
+    port: 4000,
+  },
+  resolve: {
+    extensions: [".js", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        loader: "builtin:swc-loader",
+        options: {
+          jsc: {
+            parser: {
+              syntax: "ecmascript",
+              jsx: true
+            },
+            transform: {
+              react: {
+                runtime: "automatic", // Für JSX ohne import React
+              }
+            }
+          }
+        },
+        exclude: /node_modules/,
+      }
+    ],
+  },
+};
@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { CommandBar, ICommandBarItemProps, Stack } from "@fluentui/react";
+import ViewHome from "./views/ViewHome";
+import ViewSettings from "./views/ViewSettings";
+
+export default function App() {
+  const [view, setView] = useState("home");
+
+  const items = [
+    { key: "home", text: "Home", iconProps: { iconName: "Home" }, onClick: () => setView("home") },
+    { key: "settings", text: "Settings", iconProps: { iconName: "Settings" }, onClick: () => setView("settings") },
+  ];
+
+  return (
+    <Stack style={{ height: "100vh" }}>
+      <CommandBar items={items} />
+
+      <div style={{ padding: 20 }}>
+        {view === "home" && <ViewHome />}
+        {view === "settings" && <ViewSettings />}
+      </div>
+    </Stack>
+  );
+}
@@ -0,0 +1,27 @@
+import {
+  Dialog,
+  DialogFooter,
+  DialogType,
+  PrimaryButton,
+  DefaultButton,
+  Text
+} from "@fluentui/react";
+
+export default function DialogExample({ open, onClose }) {
+  return (
+    <Dialog
+      hidden={!open}
+      onDismiss={onClose}
+      dialogContentProps={{
+        type: DialogType.normal,
+        title: "Beispiel-Dialog",
+        subText: "Dies ist ein Fluent UI Dialog in Electron."
+      }}
+    >
+      <DialogFooter>
+        <PrimaryButton text="OK" onClick={onClose} />
+        <DefaultButton text="Abbrechen" onClick={onClose} />
+      </DialogFooter>
+    </Dialog>
+  );
+}
@@ -0,0 +1,22 @@
+import { Dropdown } from "@fluentui/react";
+import { useState } from "react";
+
+const options = [
+  { key: "1", text: "Option 1" },
+  { key: "2", text: "Option 2" },
+  { key: "3", text: "Option 3" },
+];
+
+export default function DropdownExample() {
+  const [selected, setSelected] = useState(null);
+
+  return (
+    <Dropdown
+      label="Auswahl"
+      options={options}
+      selectedKey={selected}
+      onChange={(_, option) => setSelected(option.key)}
+      style={{ width: 200 }}
+    />
+  );
+}
@@ -0,0 +1,5 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+createRoot(document.getElementById("root")).render(<App />);
@@ -0,0 +1,26 @@
+import { Text, PrimaryButton } from "@fluentui/react";
+import { useState } from "react";
+import DialogExample from "../components/DialogExample";
+import DropdownExample from "../components/DropdownExample";
+
+export default function ViewHome() {
+  const [showDialog, setShowDialog] = useState(false);
+
+  return (
+    <>
+      <Text variant="xLarge">Home</Text>
+
+      <PrimaryButton
+        text="Dialog öffnen"
+        onClick={() => setShowDialog(true)}
+        style={{ marginTop: 20 }}
+      />
+
+      <DialogExample open={showDialog} onClose={() => setShowDialog(false)} />
+
+      <div style={{ marginTop: 20 }}>
+        <DropdownExample data-testid="dropdown-example" />
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { Text, Stack, ChoiceGroup, TextField } from "@fluentui/react";
+
+export default function ViewSettings() {
+  const [theme, setTheme] = useState("light");
+  const [username, setUsername] = useState("");
+
+  return (
+    <Stack tokens={{ childrenGap: 20 }} style={{ maxWidth: 300 }}>
+      <Text id="settings-title" variant="xLarge">Settings</Text>
+
+      {/* Radio Buttons */}
+      <ChoiceGroup
+        label="Theme auswählen"
+        selectedKey={theme}
+        options={[
+          { key: "light", text: "Hell" },
+          { key: "dark", text: "Dunkel" },
+          { key: "system", text: "System" },
+        ]}
+        onChange={(_, option) => setTheme(option.key)}
+      />
+
+      {/* Text Input */}
+      <TextField
+        label="Benutzername"
+        value={username}
+        onChange={(_, v) => setUsername(v)}
+      />
+
+      <Text>Aktuelle Auswahl:</Text>
+      <Text>- Theme: {theme}</Text>
+      <Text>- Benutzername: {username}</Text>
+    </Stack>
+  );
+}