[#16077] Empty state component

src/quo2/components/empty_state/empty_state/styles.cljs

@@ -0,0 +1,30 @@
+(ns quo2.components.empty-state.empty-state.styles
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container
+  {:padding     12
+   :align-items :center})
+
+(def image
+  {:width  80
+   :height 80})
+
+(def text-container
+  {:margin-top  12
+   :align-items :center})
+
+(defn title
+  [blur?]
+  (cond-> {:margin-bottom 2}
+    blur? (assoc :color colors/white)))
+
+(defn description
+  [blur?]
+  (when blur?
+    {:color colors/white}))
+
+(def button-container {:margin-top 20})
+
+(defn upper-button-color
+  [customization-color]
+  (colors/custom-color-by-theme customization-color 50 60))

src/quo2/components/empty_state/empty_state/view.cljs

@@ -0,0 +1,50 @@
+(ns quo2.components.empty-state.empty-state.view
+  (:require [quo2.components.buttons.button :as button]
+            [quo2.components.empty-state.empty-state.styles :as styles]
+            [quo2.components.markdown.text :as text]
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]))
+
+(defn empty-state
+  [{:keys        [customization-color image title description blur?]
+    upper-button :upper-button
+    lower-button :lower-button
+    :or          {customization-color :blue}}]
+  [rn/view {:style styles/container}
+   [fast-image/fast-image
+    {:style  styles/image
+     :source image}]
+   [rn/view {:style styles/text-container}
+    [text/text
+     {:style           (styles/title blur?)
+      :number-of-lines 1
+      :weight          :semi-bold
+      :size            :paragraph-1}
+     title]
+    [text/text
+     {:style           (styles/description blur?)
+      :number-of-lines 1
+      :text-align      :center
+      :weight          :regular
+      :size            :paragraph-2}
+     description]]
+   (when-let [{upper-button-text     :text
+               upper-button-on-press :on-press} upper-button]
+     [rn/view {:style styles/button-container}
+      [button/button
+       (cond-> {:type                      :primary
+                :size                      32
+                :override-background-color (styles/upper-button-color customization-color)
+                :on-press                  upper-button-on-press}
+         blur? (assoc :override-theme :dark))
+       upper-button-text]
+
+      (when-let [{lower-button-text     :text
+                  lower-button-on-press :on-press} lower-button]
+        [button/button
+         (cond-> {:style    {:margin-top 12}
+                  :size     32
+                  :type     :blur-bg
+                  :on-press lower-button-on-press}
+           blur? (assoc :override-theme :dark))
+         lower-button-text])])])

src/quo2/core.cljs

@@ -30,6 +30,7 @@
     quo2.components.drawers.permission-context.view
     quo2.components.dropdowns.dropdown
     quo2.components.header
+    quo2.components.empty-state.empty-state.view
     quo2.components.icon
     quo2.components.info.info-message
     quo2.components.info.information-box
@@ -168,6 +169,9 @@
 (def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
 (def permission-context quo2.components.drawers.permission-context.view/view)
 
+;;;; EMPTY STATE
+(def empty-state quo2.components.empty-state.empty-state.view/empty-state)
+
 ;;;; INPUTS
 (def input quo2.components.inputs.input.view/input)
 (def profile-input quo2.components.inputs.profile-input.view/profile-input)

src/status_im2/common/resources.cljs

@@ -23,7 +23,9 @@
    :discover                      (js/require "../resources/images/ui2/discover.png")
    :invite-friends                (js/require "../resources/images/ui2/invite-friends.png")
    :no-contacts-light             (js/require "../resources/images/ui2/no-contacts-light.png")
-   :no-contacts-dark              (js/require "../resources/images/ui2/no-contacts-dark.png")})
+   :no-contacts-dark              (js/require "../resources/images/ui2/no-contacts-dark.png")
+   :no-messages-light             (js/require "../resources/images/ui2/no-messages-light.png")
+   :no-messages-dark              (js/require "../resources/images/ui2/no-messages-dark.png")})
 
 (def mock-images
   {:coinbase             (js/require "../resources/images/mock2/coinbase.png")

src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs

@@ -0,0 +1,84 @@
+(ns status-im2.contexts.quo-preview.empty-state.empty-state
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [status-im2.common.resources :as resources]))
+
+(def descriptor
+  [{:label "Title:"
+    :key   :title
+    :type  :text}
+   {:label "Description:"
+    :key   :description
+    :type  :text}
+   {:label   "Image:"
+    :key     :image
+    :type    :select
+    :options [{:key   :no-contacts-light
+               :value "No contacts light"}
+              {:key   :no-contacts-dark
+               :value "No contacts dark"}
+              {:key   :no-messages-light
+               :value "No messages light"}
+              {:key   :no-messages-dark
+               :value "No messages dark"}]}
+   {:label "Upper button text"
+    :key   :upper-button-text
+    :type  :text}
+   {:label "Lower button text"
+    :key   :lower-button-text
+    :type  :text}
+   {:label "Blur:"
+    :key   :blur?
+    :type  :boolean}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:image             :no-messages-light
+                             :title             "A big friendly title"
+                             :description       "Some cool description will be here"
+                             :blur?             false
+                             :upper-button-text "Send community link"
+                             :lower-button-text "Invite friends to Status"})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         {:style {:margin-vertical  24
+                  :background-color (when (:blur? @state) colors/neutral-95)}}
+         [preview/blur-view
+          {:style                 {:width       "100%"
+                                   :align-items :center
+                                   :top         (if (:blur? @state) 32 16)
+                                   :position    (if (:blur? @state)
+                                                  :absolute
+                                                  :relative)}
+           :height                300
+           :show-blur-background? (:blur? @state)
+           :blur-view-props       (when (:blur? @state)
+                                    {:overlay-color colors/neutral-80-opa-80})}
+
+          [rn/view {:style {:flex 1 :width "100%"}}
+           [quo/empty-state
+            (-> @state
+                (assoc :upper-button
+                       {:text     (:upper-button-text @state)
+                        :on-press #(js/alert "Upper button")})
+                (assoc :lower-button
+                       {:text     (:lower-button-text @state)
+                        :on-press #(js/alert "Lower button")})
+                (update :image resources/get-image))]]]]]])))
+
+(defn preview-empty-state
+  []
+  [rn/view
+   {:style {:flex             1
+            :background-color (colors/theme-colors colors/white colors/neutral-95)}}
+   [rn/flat-list
+    {:style                        {:flex 1}
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -83,6 +83,7 @@
     [status-im2.contexts.quo-preview.tabs.account-selector :as account-selector]
     [status-im2.contexts.quo-preview.tabs.segmented-tab :as segmented]
     [status-im2.contexts.quo-preview.tabs.tabs :as tabs]
+    [status-im2.contexts.quo-preview.empty-state.empty-state :as empty-state]
     [status-im2.contexts.quo-preview.tags.context-tags :as context-tags]
     [status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
     [status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
@@ -187,6 +188,9 @@
    :dropdowns             [{:name      :dropdown
                             :options   {:topBar {:visible true}}
                             :component dropdown/preview-dropdown}]
+   :empty-state           [{:name      :empty-state
+                            :options   {:topBar {:visible true}}
+                            :component empty-state/preview-empty-state}]
    :info                  [{:name      :info-message
                             :options   {:topBar {:visible true}}
                             :component info-message/preview-info-message}