Start theming implementation

frontend/components/theming/Theme.tsx

@@ -0,0 +1,9 @@
+export class Theme {
+    constructor(
+        public readonly name: string,
+        public readonly primary: string,
+        public readonly secondary?: string,
+        public readonly tertiary?: string
+    ) {
+    }
+}

frontend/components/theming/ThemePreview.tsx

@@ -0,0 +1,19 @@
+import {Theme} from "Frontend/components/theming/Theme";
+import {Typography} from "@material-tailwind/react";
+
+export default function ThemePreview({theme}: { theme: Theme }) {
+    return (
+        <div className={`
+            size-full bg-background
+            grid grid-rows-3
+            rounded-lg
+            border-2 border-on-background
+            p-4 gap-4
+            `}>
+            <div className="bg-primary flex grow rounded-lg"></div>
+            <div className="bg-secondary flex grow rounded-lg"></div>
+            <div className="bg-tertiary flex grow rounded-lg"></div>
+            <Typography variant="paragraph" className="text-center">{theme.name}</Typography>
+        </div>
+    );
+}

frontend/components/theming/Themes.tsx

@@ -0,0 +1,18 @@
+import {Theme} from "Frontend/components/theming/Theme";
+
+export class Themes {
+    public static LIGHT_DEFAULT = new Theme(
+        "Light default",
+        "#000000"
+    )
+
+    public static DARK_DEFAULT = new Theme(
+        "Dark default",
+        "#ffffff"
+    )
+
+    public static all = [
+        Themes.LIGHT_DEFAULT,
+        Themes.DARK_DEFAULT
+    ];
+}

frontend/components/wizard/Wizard.tsx

@@ -1,9 +1,13 @@
-import React, {useState} from "react";
+import React, {ReactNode, useState} from "react";
 import {Form, Formik, FormikBag, FormikHelpers} from "formik";
 import {Button, Spinner, Step, Stepper} from "@material-tailwind/react";
 import {ArrowLeft, ArrowRight, Check} from "@phosphor-icons/react";
 
-const Wizard = ({children, initialValues, onSubmit}: { children: any, initialValues: any, onSubmit: any }) => {
+const Wizard = ({children, initialValues, onSubmit}: {
+    children: ReactNode,
+    initialValues: any,
+    onSubmit: (values: any, bag: FormikHelpers<any> | FormikBag<any, any>) => Promise<void>
+}) => {
     const [stepNumber, setStepNumber] = useState(0);
     const steps = React.Children.toArray(children);
     const [snapshot, setSnapshot] = useState(initialValues);
@@ -73,7 +77,7 @@ const Wizard = ({children, initialValues, onSubmit}: { children: any, initialVal
                                     type="submit"
                             >
                                 {formik.isSubmitting ?
-                                    <Spinner className="h-5 w-5"/> : isLastStep ? <Check/> : <ArrowRight/>
+                                    <Spinner className="size-5"/> : isLastStep ? <Check/> : <ArrowRight/>
                                 }
                             </Button>
                         </div>

frontend/components/wizard/WizardStep.tsx

@@ -1,3 +1,14 @@
-const WizardStep = ({children}: { children: any }) => children;
+import {JSX, ReactNode} from "react";
+import * as Yup from 'yup';
 
-export default WizardStep;
+export default function WizardStep({children, icon, validationSchema}: {
+    children: ReactNode,
+    icon: JSX.Element,
+    validationSchema?: Yup.Schema,
+    onSubmit?: (...values: any) => Promise<void>
+}) {
+    return children;
+}
+
+//const WizardStep = ({children}: { children: Component }) => children;
+//export default WizardStep;