Update to Hilla 24

2026-06-15 08:15:37 +00:00 · 2024-08-22 10:55:22 +02:00
parent 042c326380
commit cb073c6bcf
52 changed files with 5944 additions and 4078 deletions
@@ -0,0 +1,27 @@
+import {useField} from "formik";
+import {XCircle} from "@phosphor-icons/react";
+import {Input as NextUiInput} from "@nextui-org/react";
+
+// @ts-ignore
+const Input = ({label, ...props}) => {
+    // @ts-ignore
+    const [field, meta] = useField(props);
+
+    return (
+        <div className="grid w-full max-w-sm items-center gap-1.5">
+            <NextUiInput
+                {...props}
+                {...field}
+                id={label}
+                placeholder={label}
+                isInvalid={meta.touched && !!meta.error}
+                errorMessage={
+                    <small className="flex flex-row items-center gap-1 text-danger">
+                        <XCircle weight="fill" size={14}/> {meta.error}
+                    </small>}
+            />
+        </div>
+    );
+}
+
+export default Input;
@@ -0,0 +1,68 @@
+import {useAuth} from "Frontend/util/auth";
+import {GearFine, Question, SignOut, User} from "@phosphor-icons/react";
+import {Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger} from "@nextui-org/react";
+import {useNavigate} from "react-router-dom";
+
+export default function ProfileMenu() {
+    const {state, logout} = useAuth();
+    const navigate = useNavigate();
+
+    const profileMenuItems = [
+        {
+            label: "My Profile",
+            icon: <User/>,
+            onClick: () => navigate('/profile')
+        },
+        {
+            label: "Administration",
+            icon: <GearFine/>,
+            onClick: () => alert("Administration"),
+            showIf: state.user?.roles?.some(a => a?.includes("ADMIN"))
+        },
+        {
+            label: "Help",
+            icon: <Question/>,
+            onClick: () => window.open("https://github.com/gameyfin/gameyfin/tree/v2", "_blank")
+        },
+        {
+            label: "Sign Out",
+            icon: <SignOut/>,
+            onClick: () => logout(),
+            color: "primary"
+        },
+    ];
+
+    return (
+        <Dropdown placement="bottom-end">
+            <DropdownTrigger>
+                <Avatar showFallback
+                        radius="full"
+                        as="button"
+                        className="transition-transform size-8"
+                        classNames={{
+                            base: "gradient-primary",
+                            icon: "text-background/80"
+                        }}
+                />
+            </DropdownTrigger>
+            <DropdownMenu>
+                {/* @ts-ignore */}
+                {profileMenuItems.map(({label, icon, onClick, showIf, color}) => {
+                    return (
+                        (showIf === undefined || showIf === true) ?
+                            <DropdownItem
+                                key={label}
+                                onClick={onClick}
+                                startContent={<div color={color}>{icon}</div>}
+                                /* @ts-ignore */
+                                color={color ? color : ""}
+                                className={`text-${color} hover:bg-primary/20`}
+                            >
+                                {label}
+                            </DropdownItem> : null
+                    );
+                })}
+            </DropdownMenu>
+        </Dropdown>
+    );
+}
@@ -0,0 +1,16 @@
+export default function GameyfinLogo({className}: {
+    className?: string
+}) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 365.58 336.34" className={className}>
+            <polygon points="190.1 49.13 190.1 69.24 207.98 44.13 190.1 49.13"/>
+            <polygon points="365.58 0 263.22 28.66 205.64 95.97 365.58 51.18 365.58 0"/>
+            <polygon
+                points="190.1 283.11 248.6 266.73 248.6 149.74 365.58 116.99 365.58 73.12 190.1 122.25 190.1 283.11"/>
+            <polygon
+                points="58.49 144.48 155.98 117.18 175.48 89.79 175.48 53.23 0 102.36 0 336.34 58.49 254.15 58.49 144.48"/>
+            <polygon
+                points="116.99 199.59 116.99 245.09 65.81 259.42 0 336.34 175.48 287.2 175.48 170.22 131.61 182.5 116.99 199.59"/>
+        </svg>
+    );
+}
@@ -0,0 +1,18 @@
+import {Theme} from "Frontend/theming/theme";
+import {Tooltip} from "@nextui-org/react";
+
+export default function ThemePreview({theme, mode, isSelected}: {
+    theme: Theme,
+    mode: "light" | "dark",
+    isSelected?: boolean
+}) {
+    return (
+        <Tooltip content={<p className="capitalize">{theme.name?.replace("-", " ")}</p>} placement="bottom">
+            <div className={`
+                ${theme.name}-${mode}
+                bg-primary p-6 border-2 rounded-full
+                ${isSelected ? "border-foreground" : "border-foreground-200 hover:border-focus"}`}
+            />
+        </Tooltip>
+    );
+}
@@ -0,0 +1,55 @@
+import {useTheme} from "next-themes";
+import React, {useLayoutEffect, useState} from "react";
+import {Switch} from "@nextui-org/react";
+import {Moon, SunDim} from "@phosphor-icons/react";
+import {themes} from "Frontend/theming/themes";
+import {Theme} from "Frontend/theming/theme";
+import ThemePreview from "Frontend/components/theming/ThemePreview";
+
+export function ThemeSelector() {
+
+    const {theme, setTheme} = useTheme();
+    const [isSelected, setIsSelected] = useState(theme ? theme.includes("light") : false);
+    const [currentTheme, setCurrentTheme] = useState(theme?.substring(0, theme?.lastIndexOf("-")));
+
+    useLayoutEffect(() => setTheme(`${currentTheme}-${mode()}`), [isSelected]);
+
+    function mode(): "light" | "dark" {
+        return isSelected ? "light" : "dark";
+    }
+
+    return (
+        <div className="flex flex-col size-full items-center">
+            <div className="w-full flex flex-row items-center justify-center gap-4 mb-16">
+                <Switch
+                    size="lg"
+                    startContent={<SunDim size={32}/>}
+                    endContent={<Moon size={32}/>}
+                    isSelected={isSelected}
+                    onValueChange={() => {
+                        setIsSelected(!isSelected);
+                    }}
+                />
+
+            </div>
+            <div className="grid grid-flow-col auto-cols-auto auto-cols-max-4 gap-8">
+                {
+                    //min-w-[468px]
+                    themes.map(((t: Theme) => (
+                        <div
+                            key={t.name}
+                            onClick={() => {
+                                setCurrentTheme(t.name);
+                                setTheme(`${t.name}-${mode()}`);
+                            }}>
+                            <ThemePreview
+                                theme={t}
+                                mode={mode()}
+                                isSelected={currentTheme === t.name}/>
+                        </div>
+                    )))
+                }
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,98 @@
+import React, {ReactNode, useState} from "react";
+import {Form, Formik, FormikBag, FormikHelpers} from "formik";
+import {ArrowLeft, ArrowRight, Check} from "@phosphor-icons/react";
+import {Button} from "@nextui-org/react";
+import {Step, Stepper} from "@material-tailwind/react";
+
+const Wizard = ({children, initialValues, onSubmit}: {
+    children: ReactNode,
+    initialValues: any,
+    onSubmit: (values: any, bag: FormikHelpers<any> | FormikBag<any, any>) => Promise<any>
+}) => {
+    const [stepNumber, setStepNumber] = useState(0);
+    const steps = React.Children.toArray(children);
+    const [snapshot, setSnapshot] = useState(initialValues);
+
+    const step = steps[stepNumber];
+    const totalSteps = steps.length;
+    const isFirstStep = stepNumber === 0;
+    const isLastStep = stepNumber === totalSteps - 1;
+
+    const next = (values: any) => {
+        setSnapshot(values);
+        setStepNumber(Math.min(stepNumber + 1, totalSteps - 1));
+    };
+
+    const previous = (values: any) => {
+        setSnapshot(values);
+        setStepNumber(Math.max(stepNumber - 1, 0));
+    };
+
+    const handleSubmit = async (values: any, bag: FormikBag<any, any> | FormikHelpers<any>) => {
+        /*// @ts-ignore*/
+        if (step.props.onSubmit) {
+            /*// @ts-ignore*/
+            await step.props.onSubmit(values, bag);
+        }
+        if (isLastStep) {
+            return onSubmit(values, bag);
+        } else {
+            await bag.setTouched({});
+            next(values);
+        }
+    };
+
+    return (
+        <Formik
+            initialValues={snapshot}
+            onSubmit={handleSubmit}
+            /*// @ts-ignore*/
+            validationSchema={step.props.validationSchema}
+        >
+            {(formik: { values: any; isSubmitting: any; }) => (
+                <Form className="flex flex-col h-full">
+                    <div className="w-full mb-8">
+                        {/*<p>Step {stepNumber + 1} of {steps.length}</p>*/}
+                        <Stepper activeStep={stepNumber} activeLineClassName="bg-primary"
+                                 lineClassName="bg-foreground"
+                                 placeholder={undefined}
+                                 onPointerEnterCapture={undefined}
+                                 onPointerLeaveCapture={undefined}>
+                            {steps.map((child, index) => (
+                                <Step key={index}
+                                      className="bg-foreground text-background"
+                                      activeClassName="bg-primary"
+                                      completedClassName="bg-primary"
+                                      placeholder={undefined}
+                                      onPointerEnterCapture={undefined}
+                                      onPointerLeaveCapture={undefined}>
+                                    {/*@ts-ignore*/}
+                                    {child.props.icon}
+                                </Step>
+                            ))}
+                        </Stepper>
+                    </div>
+                    <div className="flex grow">
+                        {step}
+                    </div>
+                    <div className="left-8 right-8 absolute bottom-8 -z-1">
+                        <div className="flex justify-between">
+                            <Button color="primary" onClick={() => previous(formik.values)} disabled={isFirstStep}>
+                                <ArrowLeft/>
+                            </Button>
+                            <Button
+                                color="primary"
+                                isLoading={formik.isSubmitting}
+                                type="submit"
+                            >
+                                {formik.isSubmitting ? "" : isLastStep ? <Check/> : <ArrowRight/>}
+                            </Button>
+                        </div>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+};
+
+export default Wizard;
@@ -0,0 +1,11 @@
+import {JSX, ReactNode} from "react";
+import * as Yup from 'yup';
+
+export default function WizardStep({children, icon, validationSchema}: {
+    children: ReactNode,
+    icon: JSX.Element,
+    validationSchema?: Yup.Schema,
+    onSubmit?: (...values: any) => Promise<void>
+}) {
+    return children;
+}