Create an alert method

front/apps/web/package.json

@@ -35,6 +35,7 @@
 		"react-native-web": "0.19.1",
 		"solito": "^3.0.0",
 		"superjson": "^1.12.2",
+		"sweetalert2": "^11.7.12",
 		"yoshiki": "1.2.2",
 		"zod": "^3.21.4"
 	},

front/packages/primitives/src/alert.tsx

@@ -0,0 +1,41 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+// Stolen from https://github.com/necolas/react-native-web/issues/1026#issuecomment-1458279681
+
+import {
+	Alert as RNAlert,
+	type AlertOptions,
+	type AlertButton,
+} from "react-native";
+import { type SweetAlertIcon } from "sweetalert2";
+
+export interface ExtendedAlertStatic {
+	alert: (
+		title: string,
+		message?: string,
+		buttons?: AlertButton[],
+		options?: AlertOptions & { icon?: SweetAlertIcon },
+	) => void;
+}
+
+export const Alert: ExtendedAlertStatic = RNAlert as ExtendedAlertStatic;
+

front/packages/primitives/src/alert.web.tsx

@@ -0,0 +1,67 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+// Stolen from https://github.com/necolas/react-native-web/issues/1026#issuecomment-1458279681
+
+import { type AlertButton, type AlertOptions } from "react-native";
+import Swal, { type SweetAlertIcon } from "sweetalert2";
+
+export class Alert {
+	static alert(
+		title: string,
+		message?: string,
+		buttons?: AlertButton[],
+		options?: AlertOptions & { icon?: SweetAlertIcon },
+	): void {
+		const confirmButton = buttons
+			? buttons.find((button) => button.style === "default")
+			: undefined;
+		const denyButton = buttons ? buttons.find((button) => button.style === "destructive") : undefined;
+		const cancelButton = buttons
+			? buttons.find((button) => button.style === "cancel")
+			: undefined;
+
+		Swal.fire({
+			title: title,
+			text: message,
+			showConfirmButton: !!confirmButton,
+			showDenyButton: !!denyButton,
+			showCancelButton: !!cancelButton,
+			confirmButtonText: confirmButton?.text,
+			denyButtonText: denyButton?.text,
+			cancelButtonText: cancelButton?.text,
+			icon: options?.icon,
+		}).then((result) => {
+			if (result.isConfirmed) {
+				if (confirmButton?.onPress !== undefined) {
+					confirmButton.onPress();
+				}
+			} else if (result.isDenied) {
+				if (denyButton?.onPress !== undefined) {
+					denyButton.onPress();
+				}
+			} else if (result.isDismissed) {
+				if (cancelButton?.onPress !== undefined) {
+					cancelButton.onPress();
+				}
+			}
+		});
+	}
+}

front/packages/primitives/src/index.ts

@@ -31,6 +31,7 @@ export * from "./container";
 export * from "./divider";
 export * from "./progress";
 export * from "./slider";
+export * from "./alert";
 export * from "./menu";
 export * from "./input";
 export * from "./button";

front/packages/primitives/src/themes/theme.tsx

@@ -35,6 +35,7 @@ type FontList = Partial<
 >;
 
 type Mode = {
+	mode: "light" | "dark" | "auto";
 	overlay0: Property.Color;
 	overlay1: Property.Color;
 	link: Property.Color;
@@ -80,8 +81,18 @@ const selectMode = (
 	mode: "light" | "dark" | "auto",
 ): Theme => {
 	const { light: lightBuilder, dark: darkBuilder, ...options } = theme;
-	const light = { ...lightBuilder, ...lightBuilder.default, contrast: lightBuilder.colors.black };
-	const dark = { ...darkBuilder, ...darkBuilder.default, contrast: darkBuilder.colors.white };
+	const light: Mode & Variant = {
+		...lightBuilder,
+		...lightBuilder.default,
+		contrast: lightBuilder.colors.black,
+		mode: "light",
+	};
+	const dark: Mode & Variant = {
+		...darkBuilder,
+		...darkBuilder.default,
+		contrast: darkBuilder.colors.white,
+		mode: "dark",
+	};
 	if (Platform.OS !== "web" || mode !== "auto") {
 		const value = mode === "light" ? light : dark;
 		const alternate = mode === "light" ? dark : light;
@@ -102,10 +113,11 @@ const selectMode = (
 	return {
 		...options,
 		...auto,
+		mode: "auto",
 		light,
 		dark,
-		user: auto,
-		alternate,
+		user: { ...auto, mode: "auto" },
+		alternate: { ...alternate, mode: "auto" },
 	};
 };
 

front/yarn.lock

@@ -13221,6 +13221,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sweetalert2@npm:^11.7.12":
+  version: 11.7.12
+  resolution: "sweetalert2@npm:11.7.12"
+  checksum: 3f0d26399f7660bf8f410686d9e53bc2216e973a6cedd53a4566fd3f5952e642cf012d0ae68bc47d89cb2e29244ea54489c524217481581945983e5138ce1510
+  languageName: node
+  linkType: hard
+
 "synckit@npm:^0.8.4":
   version: 0.8.5
   resolution: "synckit@npm:0.8.5"
@@ -14116,6 +14123,7 @@ __metadata:
     react-native-web: 0.19.1
     solito: ^3.0.0
     superjson: ^1.12.2
+    sweetalert2: ^11.7.12
     typescript: ^4.9.5
     webpack: ^5.76.1
     yoshiki: 1.2.2