feat(web): extract ui-services package

packages/ui-services/src/Alert/Functions.ts

@@ -0,0 +1,66 @@
+import { sanitizeHtmlString } from '@standardnotes/utils'
+import { SKAlert } from '@standardnotes/styles'
+
+/** @returns a promise resolving to true if the user confirmed, false if they canceled */
+export function confirmDialog({
+  text,
+  title,
+  confirmButtonText = 'Confirm',
+  cancelButtonText = 'Cancel',
+  confirmButtonStyle = 'info',
+}: {
+  text: string
+  title?: string
+  confirmButtonText?: string
+  cancelButtonText?: string
+  confirmButtonStyle?: 'danger' | 'info'
+}) {
+  return new Promise<boolean>((resolve) => {
+    const alert = new SKAlert({
+      title: title && sanitizeHtmlString(title),
+      text: sanitizeHtmlString(text),
+      buttons: [
+        {
+          text: cancelButtonText,
+          style: 'neutral',
+          action() {
+            resolve(false)
+          },
+        },
+        {
+          text: confirmButtonText,
+          style: confirmButtonStyle,
+          action() {
+            resolve(true)
+          },
+        },
+      ],
+    })
+    alert.present()
+  })
+}
+
+export function alertDialog({
+  title,
+  text,
+  closeButtonText = 'OK',
+}: {
+  title?: string
+  text: string
+  closeButtonText?: string
+}) {
+  return new Promise<void>((resolve) => {
+    const alert = new SKAlert({
+      title: title && sanitizeHtmlString(title),
+      text: sanitizeHtmlString(text),
+      buttons: [
+        {
+          text: closeButtonText,
+          style: 'neutral',
+          action: resolve,
+        },
+      ],
+    })
+    alert.present()
+  })
+}

packages/ui-services/src/Alert/WebAlertService.ts

@@ -0,0 +1,38 @@
+import { AlertService, ButtonType } from '@standardnotes/services'
+import { sanitizeHtmlString } from '@standardnotes/utils'
+import { SKAlert } from '@standardnotes/styles'
+import { alertDialog, confirmDialog } from './Functions'
+
+export class WebAlertService extends AlertService {
+  alert(text: string, title?: string, closeButtonText?: string) {
+    return alertDialog({ text, title, closeButtonText })
+  }
+
+  confirm(
+    text: string,
+    title?: string,
+    confirmButtonText?: string,
+    confirmButtonType?: ButtonType,
+    cancelButtonText?: string,
+  ): Promise<boolean> {
+    return confirmDialog({
+      text,
+      title,
+      confirmButtonText,
+      cancelButtonText,
+      confirmButtonStyle: confirmButtonType === ButtonType.Danger ? 'danger' : 'info',
+    })
+  }
+
+  blockingDialog(text: string, title?: string) {
+    const alert = new SKAlert({
+      title: title && sanitizeHtmlString(title),
+      text: sanitizeHtmlString(text),
+      buttons: [],
+    })
+    alert.present()
+    return () => {
+      alert.dismiss()
+    }
+  }
+}