[#17288] refactor: migrate previews to new api

src/quo2/components/list_items/token_value/view.cljs

@@ -12,9 +12,9 @@
     [reagent.core :as reagent]))
 
 (defn- internal-view
-  [{:keys [theme customization-color status token metrics? values on-press]}]
+  []
   (let [state (reagent/atom :default)]
-    (fn []
+    (fn [{:keys [theme customization-color status token metrics? values on-press]}]
       (let [bg-opacity                                                      (case @state
                                                                               :active  10
                                                                               :pressed 5
@@ -42,7 +42,7 @@
            [text/text
             {:size  :paragraph-2
              :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-            (str crypto-value " " (string/upper-case (clj->js token)))]]]
+            (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]]
          [rn/view
           {:style {:align-items     :flex-end
                    :justify-content :space-between}}

src/quo2/components/navigation/bottom_nav_tab/view.cljs

@@ -86,6 +86,6 @@
            counter-label]
           [rn/view {:style (styles/notification-dot customization-color)}]))]]))
 
-(defn bottom-nav-tab
+(defn view
   [opts]
   [:f> f-bottom-nav-tab opts])

src/quo2/core.cljs

@@ -77,6 +77,7 @@
     quo2.components.messages.gap
     quo2.components.messages.system-message
     quo2.components.navigation.floating-shell-button.view
+    quo2.components.navigation.bottom-nav-tab.view
     quo2.components.navigation.page-nav.view
     quo2.components.navigation.top-nav.view
     quo2.components.notifications.activity-log.view
@@ -262,6 +263,7 @@
 (def skeleton-list quo2.components.loaders.skeleton-list.view/view)
 
 ;;;; Navigation
+(def bottom-nav-tab quo2.components.navigation.bottom-nav-tab.view/view)
 (def floating-shell-button quo2.components.navigation.floating-shell-button.view/view)
 (def page-nav quo2.components.navigation.page-nav.view/page-nav)
 (def top-nav quo2.components.navigation.top-nav.view/view)

src/status_im2/contexts/quo_preview/browser/browser_input.cljs

@@ -11,7 +11,7 @@
    {:key :disabled? :type :boolean}
    (preview/customization-color-option)])
 
-(defn preview-browser-input
+(defn view
   []
   (let [state (reagent/atom {:blur?       false
                              :disabled?   false

src/status_im2/contexts/quo_preview/list_items/token_value.cljs

@@ -1,42 +1,28 @@
 (ns status-im2.contexts.quo-preview.list-items.token-value
   (:require
     [quo2.core :as quo]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Token:"
-    :key     :token
+  [{:key     :token
     :type    :select
-    :options [{:key   :eth
-               :value "ETH"}
-              {:key   :snt
-               :value "SNT"}]}
-   {:label   "State:"
-    :key     :state
+    :options [{:key :eth}
+              {:key :snt}]}
+   {:key     :state
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :pressed
-               :value "Pressed"}
-              {:key   :active
-               :value "Active"}]}
-   {:label   "Status:"
-    :key     :status
+    :options [{:key :default}
+              {:key :pressed}
+              {:key :active}]}
+   {:key     :status
     :type    :select
-    :options [{:key   :empty
-               :value "Empty"}
-              {:key   :positive
-               :value "Positive"}
-              {:key   :negative
-               :value "Negative"}]}
+    :options [{:key :empty}
+              {:key :positive}
+              {:key :negative}]}
    (preview/customization-color-option)
-   {:label "Metrics?:"
-    :key   :metrics?
-    :type  :boolean}])
+   {:key :metrics? :type :boolean}])
 
-(defn preview
+(defn view
   []
   (let [state (reagent/atom {:token               :snt
                              :state               :default
@@ -49,11 +35,9 @@
                                                    :fiat-change       "€0.00"}})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view
-        [rn/view
-         {:style {:align-items :center
-                  :margin-top  50}}
-         [quo/token-value @state]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:align-items :center
+                                    :margin-top  50}}
+       [quo/token-value @state]])))
 

src/status_im2/contexts/quo_preview/list_items/user_list.cljs

@@ -1,35 +1,19 @@
 (ns status-im2.contexts.quo-preview.list-items.user-list
-  (:require [react-native.core :as rn]
-            [reagent.core :as reagent]
+  (:require [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]
-            [quo2.components.list-items.user-list :as user-list]
+            [quo2.core :as quo]
             [utils.address :as address]))
 
 (def descriptor
-  [{:label "Primary name"
-    :key   :primary-name
+  [{:key   :primary-name
     :type  :text
     :limit 24}
-   {:label "Secondary name"
-    :key   :secondary-name
-    :type  :text}
-   {:label "Chat key"
-    :key   :chat-key
-    :type  :text}
-   {:label "Is contact?"
-    :key   :contact?
-    :type  :boolean}
-   {:label "Is verified?"
-    :key   :verified?
-    :type  :boolean}
-   {:label "Is untrustworthy?"
-    :key   :untrustworthy?
-    :type  :boolean}
-   {:label "Online?"
-    :key   :online?
-    :type  :boolean}
-   {:label   "Accessory:"
-    :key     :accessory
+   {:key :secondary-name :type :text}
+   {:key :contact? :type :boolean}
+   {:key :verified? :type :boolean}
+   {:key :untrustworthy? :type :boolean}
+   {:key :online? :type :boolean}
+   {:key     :accessory
     :type    :select
     :options [{:key   {:type :options}
                :value "Options"}
@@ -38,7 +22,7 @@
               {:key   {:type :close}
                :value "Close"}]}])
 
-(defn preview-user-list
+(defn view
   []
   (let [state (reagent/atom {:primary-name   "Alisher Yakupov"
                              :short-chat-key (address/get-shortened-compressed-key
@@ -50,11 +34,8 @@
                              :online?        false})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical    60
-          :padding--horizontal 15
-          :justify-content     :center}
-         [user-list/user-list @state]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical   30
+                                    :padding-horizontal 15}}
+       [quo/user-list @state]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -169,7 +169,7 @@
                        {:name      :wallet-ctas
                         :component wallet-ctas/view}]
    :browser           [{:name      :browser-input
-                        :component browser-input/preview-browser-input}]
+                        :component browser-input/view}]
    :calendar          [{:name      :calendar
                         :component calendar/view}
                        {:name      :calendar-day
@@ -275,10 +275,10 @@
                        {:name      :preview-lists
                         :component preview-lists/view}
                        {:name      :token-value
-                        :component token-value/preview}
+                        :component token-value/view}
                        {:name      :user-list
                         :options   {:topBar {:visible true}}
-                        :component user-list/preview-user-list}]
+                        :component user-list/view}]
    :loaders           [{:name      :skeleton-list
                         :options   {:topBar {:visible true}}
                         :component skeleton-list/view}]
@@ -287,19 +287,19 @@
                        {:name      :markdown-list
                         :component markdown-list/view}]
    :messages          [{:name      :gap
-                        :component messages-gap/preview-messages-gap}
+                        :component messages-gap/view}
                        {:name      :system-messages
-                        :component system-message/preview-system-message}
+                        :component system-message/view}
                        {:name      :author
                         :component messages-author/view}]
    :navigation        [{:name      :bottom-nav-tab
-                        :component bottom-nav-tab/preview-bottom-nav-tab}
+                        :component bottom-nav-tab/view}
                        {:name      :top-nav
-                        :component top-nav/preview}
+                        :component top-nav/view}
                        {:name      :page-nav
-                        :component page-nav/preview-page-nav}
+                        :component page-nav/view}
                        {:name      :floating-shell-button
-                        :component floating-shell-button/preview-floating-shell-button}]
+                        :component floating-shell-button/view}]
    :notifications     [{:name      :activity-logs
                         :component activity-logs/preview-activity-logs}
                        {:name      :activity-logs-photos

src/status_im2/contexts/quo_preview/messages/gap.cljs

@@ -8,7 +8,7 @@
   [{:key :timestamp-far :type :text}
    {:key :timestamp-near :type :text}])
 
-(defn preview-messages-gap
+(defn view
   []
   (let [state (reagent/atom {:timestamp-far          "Jan 8 · 09:12"
                              :timestamp-near         "Mar 8 · 22:42"

src/status_im2/contexts/quo_preview/messages/system_message.cljs

@@ -30,7 +30,7 @@
          {:child        (when (= (:type @state) :pinned) [rn/text (:content @state)])
           :display-name (:pinned-by @state)}))
 
-(defn preview-system-message
+(defn view
   []
   (let [state (reagent/atom {:type      :pinned
                              :pinned-by "Steve"

src/status_im2/contexts/quo_preview/navigation/bottom_nav_tab.cljs

@@ -1,15 +1,12 @@
 (ns status-im2.contexts.quo-preview.navigation.bottom-nav-tab
-  (:require [clojure.string :as string]
-            [quo2.components.navigation.bottom-nav-tab.view :as quo2]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
             [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type"
-    :key     :icon
+  [{:key     :icon
     :type    :select
     :options [{:key   :i/communities
                :value "Communities"}
@@ -19,33 +16,15 @@
                :value "Wallet"}
               {:key   :i/browser
                :value "Browser"}]}
-   {:label "Selected?"
-    :key   :selected?
-    :type  :boolean}
-   {:label "Pass through?"
-    :key   :pass-through?
-    :type  :boolean}
-   {:label "New Notifications?"
-    :key   :new-notifications?
-    :type  :boolean}
-   {:label   "Notification Indicator"
-    :key     :notification-indicator
+   {:key :selected? :type :boolean}
+   {:key :pass-through? :type :boolean}
+   {:key :new-notifications? :type :boolean}
+   {:key     :notification-indicator
     :type    :select
-    :options [{:key   :counter
-               :value :counter}
-              {:key   :unread-dot
-               :value :unread-dot}]}
-   {:label "Counter Label"
-    :key   :counter-label
-    :type  :text}
-
-   {:label   "Customization color"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [[k _]]
-                    {:key   k
-                     :value (string/capitalize (name k))})
-                  colors/customization)}])
+    :options [{:key :counter}
+              {:key :unread-dot}]}
+   {:key :counter-label :type :text}
+   (preview/customization-color-option)])
 
 (defn get-icon-color
   [selected? pass-through?]
@@ -60,11 +39,11 @@
     (reanimated/set-shared-value
      icon-color-anim
      (get-icon-color selected? pass-through?))
-    [quo2/bottom-nav-tab
+    [quo/bottom-nav-tab
      (merge state {:icon-color-anim icon-color-anim})
      (:value state)]))
 
-(defn preview-bottom-nav-tab
+(defn view
   []
   (let [state         (reagent/atom {:icon                   :i/communities
                                      :new-notifications?     true
@@ -76,10 +55,8 @@
         pass-through? (reagent/cursor state [:pass-through?])]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [:f> f-bottom-tab @state @selected? @pass-through?]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical 60
+                                    :align-items      :center}}
+       [:f> f-bottom-tab @state @selected? @pass-through?]])))