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