Major 3.0 (#118)

Co-authored-by: Maison da Silva <maisonmdsgreen@hotmail.com>

contexts/DialogProvider.tsx

@@ -0,0 +1,51 @@
+import { Dialog, DialogModalType } from "@fluentui/react-components";
+import { createContext, PropsWithChildren, ReactElement } from "react";
+import PromptDialog, { PromptDialogProps } from "@/components/PromptDialog";
+
+const DialogContext = createContext<DialogContextType>(null!);
+
+export default function DialogProvider(props: PropsWithChildren): ReactElement
+{
+	const [dialog, setDialog] = useState<ReactElement | null>(null);
+	const [modalType, setModalType] = useState<DialogModalType | undefined>(undefined);
+	const [onDismiss, setOnDismiss] = useState<(() => void) | undefined>(undefined);
+
+	const pushPrompt = (props: PromptDialogProps): void =>
+		setDialog(
+			<PromptDialog { ...props } />
+		);
+
+	const pushCustom = (dialogSurface: ReactElement, modalType?: DialogModalType, onDismiss?: () => void): void =>
+	{
+		setDialog(dialogSurface);
+		setModalType(modalType);
+		setOnDismiss(() => onDismiss);
+	};
+
+	const handleOpenChange = () =>
+	{
+		onDismiss?.();
+		setOnDismiss(undefined);
+		setTimeout(() => setDialog(null), 200);
+	};
+
+	return (
+		<DialogContext.Provider value={ { pushPrompt, pushCustom } }>
+			{ props.children }
+
+			{ dialog &&
+				<Dialog defaultOpen onOpenChange={ handleOpenChange } modalType={ modalType }>
+					{ dialog }
+				</Dialog>
+			}
+		</DialogContext.Provider>
+	);
+}
+
+export const useDialog = () => useContext<DialogContextType>(DialogContext);
+
+export type DialogContextType =
+	{
+		pushPrompt(props: PromptDialogProps): void;
+		pushCustom(dialogSurface: ReactElement, modalType?: DialogModalType, onDismiss?: () => void): void;
+	};

contexts/ThemeProvider.tsx

@@ -0,0 +1,35 @@
+import { FluentProvider, Theme, webDarkTheme, webLightTheme } from "@fluentui/react-components";
+import { createContext } from "react";
+
+const ThemeContext = createContext<ThemeContextType>({ theme: webLightTheme, isDark: false });
+const media: MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+
+export default function ThemeProvider(props: React.PropsWithChildren): React.ReactElement
+{
+	const [isDark, setIsDark] = useState<boolean>(media.matches);
+	const theme = useMemo(() => isDark ? webDarkTheme : webLightTheme, [isDark]);
+
+	useEffect(() =>
+	{
+		const updateTheme = (args: MediaQueryListEvent) => setIsDark(args.matches);
+		media.addEventListener("change", updateTheme);
+
+		return () => media.removeEventListener("change", updateTheme);
+	}, []);
+
+	return (
+		<ThemeContext.Provider value={ { theme, isDark } }>
+			<FluentProvider theme={ theme }>
+				{ props.children }
+			</FluentProvider>
+		</ThemeContext.Provider>
+	);
+}
+
+export const useTheme = (): ThemeContextType => useContext(ThemeContext);
+
+export type ThemeContextType =
+	{
+		theme: Theme;
+		isDark: boolean;
+	};