feat: add in-app notification, refactor toast

src/quo2/components/notifications/notification/style.cljs

@@ -0,0 +1,39 @@
+(ns quo2.components.notifications.notification.style
+  (:require
+    [quo2.foundations.colors :as colors]
+    [quo2.foundations.shadows :as shadows]))
+
+(def box-container
+  {:margin-horizontal 8
+   :border-radius     16
+   :overflow          :hidden})
+
+(def blur-container
+  {:height           "100%"
+   :width            "100%"
+   :position         :absolute
+   :padding-vertical 8
+   :padding-left     10
+   :padding-right    8
+   :background-color :transparent})
+
+(defn content-container
+  [override-theme]
+  (merge
+   (:shadow-1 shadows/normal-scale)
+   {:background-color   (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
+    :flex-direction     :row
+    :padding-vertical   8
+    :padding-horizontal 12}))
+
+(def right-side-container {:flex 1})
+
+(defn title
+  [override-theme]
+  {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
+
+(defn text
+  [override-theme]
+  {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
+
+(def avatar-container {:margin-right 8 :margin-top 4})

src/quo2/components/notifications/notification/view.cljs

@@ -0,0 +1,61 @@
+(ns quo2.components.notifications.notification.view
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.components.notifications.notification.style :as style]
+            [react-native.blur :as blur]
+            [react-native.core :as rn]))
+
+(defn body-container
+  [& children]
+  [into [rn/view] children])
+
+(defn avatar-container
+  [& children]
+  [into [rn/view {:style style/avatar-container}] children])
+
+(defn title
+  ([text weight] (title text weight nil))
+  ([text weight override-theme]
+   [text/text
+    {:size                :paragraph-1
+     :weight              (or weight :semi-bold)
+     :style               (style/title override-theme)
+     :accessibility-label :notification-title}
+    text]))
+
+(defn message
+  [text override-theme]
+  [text/text
+   {:size                :paragraph-2
+    :style               (style/text override-theme)
+    :accessibility-label :notification-content}
+   text])
+
+(defn- notification-container
+  [{:keys [avatar header body container-style override-theme]}]
+  [rn/view
+   {:style (merge style/box-container container-style)}
+   [blur/view
+    {:style         style/blur-container
+     :blur-amount   13
+     :blur-radius   10
+     :blur-type     :transparent
+     :overlay-color :transparent}]
+   [rn/view
+    {:style (style/content-container override-theme)}
+    avatar
+    [rn/view
+     {:style style/right-side-container}
+     header
+     body]]])
+
+(defn notification
+  [{title-text :title :keys [avatar header title-weight text body container-style override-theme]}]
+  (let [header (or header (when title-text [title title-text title-weight override-theme]))
+        body   (or body (when text [body-container [message text override-theme]]))
+        avatar [avatar-container avatar]]
+    [notification-container
+     {:avatar          avatar
+      :header          header
+      :body            body
+      :container-style container-style
+      :override-theme  override-theme}]))

src/quo2/components/notifications/toast/style.cljs

@@ -0,0 +1,52 @@
+(ns quo2.components.notifications.toast.style
+  (:require
+    [quo2.foundations.colors :as colors]
+    [quo2.foundations.shadows :as shadows]))
+
+(def box-container
+  {:margin-horizontal 12
+   :border-radius     12
+   :overflow          :hidden})
+
+(def blur-container
+  {:height           "100%"
+   :width            "100%"
+   :position         :absolute
+   :padding-vertical 8
+   :padding-left     10
+   :padding-right    8
+   :background-color :transparent})
+
+(defn content-container
+  [override-theme]
+  (merge
+   (:shadow-1 shadows/normal-scale)
+   {:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
+    :flex-direction   :row
+    :justify-content  :space-between
+    :padding-vertical 8
+    :padding-left     10
+    :padding-right    8
+    :border-radius    12}))
+
+(defn title
+  [override-theme]
+  {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
+
+(defn text
+  [override-theme]
+  {:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
+
+(defn icon
+  [override-theme]
+  {:color           (colors/theme-colors colors/white colors/neutral-100 override-theme)
+   :container-style {:width 20 :height 20}})
+
+(defn action-container
+  [override-theme]
+  {:background-color   (colors/theme-colors colors/white-opa-5 colors/neutral-80-opa-5 override-theme)
+   :flex-direction     :row
+   :padding-vertical   3
+   :padding-horizontal 8
+   :align-items        :center
+   :border-radius      8})

src/quo2/components/notifications/toast/view.cljs

@@ -0,0 +1,76 @@
+(ns quo2.components.notifications.toast.view
+  (:require [quo2.components.icon :as icon]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.notifications.count-down-circle :as count-down-circle]
+            [quo2.components.notifications.toast.style :as style]
+            [quo2.theme :as theme]
+            [react-native.blur :as blur]
+            [react-native.core :as rn]
+            [utils.i18n :as i18n]))
+
+(defn toast-action-container
+  [{:keys [on-press style]} & children]
+  [rn/touchable-highlight
+   {:on-press       on-press
+    :underlay-color :transparent}
+   [into
+    [rn/view
+     {:style (merge (style/action-container (theme/get-theme)) style)}]
+    children]])
+
+(defn toast-undo-action
+  [duration on-press override-theme]
+  [toast-action-container
+   {:on-press on-press :accessibility-label :toast-undo-action}
+   [rn/view {:style {:margin-right 5}}
+    [count-down-circle/circle-timer {:duration duration}]]
+   [text/text
+    {:size :paragraph-2 :weight :medium :style (style/text override-theme)}
+    [i18n/label :t/undo]]])
+
+(defn- toast-container
+  [{:keys [left title text right container-style override-theme]}]
+  [rn/view
+   {:style (merge style/box-container container-style)}
+   [blur/view
+    {:style         style/blur-container
+     :blur-amount   13
+     :blur-radius   10
+     :blur-type     :transparent
+     :overlay-color :transparent}]
+   [rn/view
+    {:style (style/content-container override-theme)}
+    [rn/view {:style {:padding 2}} left]
+    [rn/view {:style {:padding 4 :flex 1}}
+     (when title
+       [text/text
+        {:size                :paragraph-1
+         :weight              :semi-bold
+         :style               (style/title override-theme)
+         :accessibility-label :toast-title}
+        title])
+     (when text
+       [text/text
+        {:size                :paragraph-2
+         :weight              :medium
+         :style               (style/text override-theme)
+         :accessibility-label :toast-content}
+        text])]
+    (when right right)]])
+
+(defn toast
+  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style
+           override-theme]}]
+  [toast-container
+   {:left            (when icon
+                       [icon/icon icon
+                        (cond-> (style/icon override-theme)
+                          icon-color
+                          (assoc :color icon-color))])
+    :title           title
+    :text            text
+    :right           (if undo-duration
+                       [toast-undo-action undo-duration undo-on-press override-theme]
+                       action)
+    :container-style container-style
+    :override-theme  override-theme}])