diff --git a/front/apps/web/package.json b/front/apps/web/package.json
index 0bdd359c..954db2fd 100644
--- a/front/apps/web/package.json
+++ b/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"
},
diff --git a/front/packages/primitives/src/alert.tsx b/front/packages/primitives/src/alert.tsx
new file mode 100644
index 00000000..332a6d25
--- /dev/null
+++ b/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 .
+ */
+
+
+// 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;
+
diff --git a/front/packages/primitives/src/alert.web.tsx b/front/packages/primitives/src/alert.web.tsx
new file mode 100644
index 00000000..3c16b02b
--- /dev/null
+++ b/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 .
+ */
+
+// 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();
+ }
+ }
+ });
+ }
+}
diff --git a/front/packages/primitives/src/index.ts b/front/packages/primitives/src/index.ts
index 20e551ce..28c2bae7 100644
--- a/front/packages/primitives/src/index.ts
+++ b/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";
diff --git a/front/packages/primitives/src/themes/theme.tsx b/front/packages/primitives/src/themes/theme.tsx
index 0e36463d..db210f93 100644
--- a/front/packages/primitives/src/themes/theme.tsx
+++ b/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" },
};
};
diff --git a/front/yarn.lock b/front/yarn.lock
index b419efb1..578da6ec 100644
--- a/front/yarn.lock
+++ b/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