[#17288] refactor: migrate previews to new api (#17776)

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

@@ -36,7 +36,7 @@
    {:key  :show-alert-on-press?
     :type :boolean}])
 
-(defn preview-token-network
+(defn view
   []
   (let [state (reagent/atom {:token               (quo.resources/get-token :snt)
                              :label               "Status"

src/status_im2/contexts/quo_preview/main.cljs

@@ -331,7 +331,7 @@
                        {:name      :saved-contact-address
                         :component saved-contact-address/view}
                        {:name      :token-network
-                        :component token-network/preview-token-network}
+                        :component token-network/view}
                        {:name      :token-value
                         :component token-value/view}
                        {:name      :user-list
@@ -359,9 +359,9 @@
                        {:name      :floating-shell-button
                         :component floating-shell-button/view}]
    :notifications     [{:name      :activity-logs
-                        :component activity-logs/preview-activity-logs}
+                        :component activity-logs/view}
                        {:name      :activity-logs-photos
-                        :component activity-logs-photos/preview-activity-logs-photos}
+                        :component activity-logs-photos/view}
                        {:name      :toast
                         :component toast/view}
                        {:name      :notification
@@ -435,27 +435,27 @@
                        {:name      :tags
                         :component tags/view}
                        {:name      :tiny-tag
-                        :component tiny-tag/preview-tiny-tag}
+                        :component tiny-tag/view}
                        {:name      :token-tag
                         :component token-tag/view}]
    :text-combinations [{:name      :text-combinations
                         :component text-combinations/view}]
-   :wallet            [{:name :account-card :component account-card/preview-account-card}
+   :wallet            [{:name :account-card :component account-card/view}
                        {:name :account-origin :component account-origin/view}
                        {:name      :account-overview
-                        :component account-overview/preview-account-overview}
-                       {:name :keypair :component keypair/preview}
-                       {:name :network-amount :component network-amount/preview}
-                       {:name :network-bridge :component network-bridge/preview}
-                       {:name :network-link :component network-link/preview}
-                       {:name :network-routing :component network-routing/preview}
-                       {:name :progress-bar :component progress-bar/preview}
-                       {:name :summary-info :component summary-info/preview}
-                       {:name :token-input :component token-input/preview}
+                        :component account-overview/view}
+                       {:name :keypair :component keypair/view}
+                       {:name :network-amount :component network-amount/view}
+                       {:name :network-bridge :component network-bridge/view}
+                       {:name :network-link :component network-link/view}
+                       {:name :network-routing :component network-routing/view}
+                       {:name :progress-bar :component progress-bar/view}
+                       {:name :summary-info :component summary-info/view}
+                       {:name :token-input :component token-input/view}
                        {:name :wallet-activity :component wallet-activity/view}
                        {:name :transaction-summary :component transaction-summary/view}
                        {:name      :wallet-overview
-                        :component wallet-overview/preview-wallet-overview}]
+                        :component wallet-overview/view}]
    :keycard           [{:name :keycard-component :component keycard/view}]})
 
 (defn- category-view

src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs

@@ -105,7 +105,7 @@
   {:body  "Your favorite color is Turquoise."
    :title "What's my favorite color?"})
 
-(defn preview-activity-logs
+(defn view
   []
   (let [state (reagent/atom {:button-1-label "Decline"
                              :button-1-type  :danger

src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs

@@ -31,7 +31,7 @@
    (resources/get-mock-image :photo2)
    (resources/get-mock-image :photo3)])
 
-(defn preview-activity-logs-photos
+(defn view
   []
   (let [state (reagent/atom {:count 1})]
     (fn []

src/status_im2/contexts/quo_preview/tags/tiny_tag.cljs

@@ -6,14 +6,10 @@
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Blur?"
-    :key   :blur?
-    :type  :boolean}
-   {:label "Label"
-    :key   :label
-    :type  :text}])
+  [{:key :blur? :type :boolean}
+   {:key :label :type :text}])
 
-(defn preview-tiny-tag
+(defn view
   []
   (let [state (reagent/atom {:blur? false
                              :label "1,000 SNT"})]

src/status_im2/contexts/quo_preview/wallet/account_card.cljs

@@ -1,56 +1,27 @@
 (ns status-im2.contexts.quo-preview.wallet.account-card
   (:require
-    [quo.components.icon :as icon]
-    [quo.components.markdown.text :as text]
     [quo.core :as quo]
-    [quo.foundations.colors :as colors]
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]
     [utils.collection]))
 
 (def descriptor
-  [{:label   "Type:"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :watch-only
-               :value "Watch Only"}
-              {:key   :add-account
-               :value "Add Account"}
-              {:key   :empty
-               :value "Empty"}
-              {:key   :missing-keypair
-               :value "Missing Keypair"}]}
-   {:label   "Customization color:"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [[color-kw _]]
-                    {:key   color-kw
-                     :value (name color-kw)})
-                  colors/customization)}
-   {:label "Name:"
-    :key   :name
-    :type  :text}
-   {:label "Balance:"
-    :key   :balance
-    :type  :text}
-   {:label "Percentage value:"
-    :key   :percentage-value
-    :type  :text}
-   {:label "Amount:"
-    :key   :amount
-    :type  :text}
-   {:label "Metrics:"
-    :key   :metrics?
-    :type  :boolean}
-   {:label "Loading:"
-    :key   :loading?
-    :type  :boolean}
-   {:label "Emoji:"
-    :key   :emoji
-    :type  :text}])
+    :options [{:key :default}
+              {:key :watch-only}
+              {:key :add-account}
+              {:key :empty}
+              {:key :missing-keypair}]}
+   (preview/customization-color-option)
+   {:key :name :type :text}
+   {:key :balance :type :text}
+   {:key :percentage-value :type :text}
+   {:key :amount :type :text}
+   {:key :metrics? :type :boolean}
+   {:key :loading? :type :boolean}
+   {:key :emoji :type :text}])
 
 (defn initial-state
   [type]
@@ -101,7 +72,7 @@
      :type                :add-account}))
 
 
-(defn preview-account-card
+(defn view
   []
   (let [state (reagent/atom (initial-state :default))]
     [:f>
@@ -112,23 +83,4 @@
        [preview/preview-container
         {:state      state
          :descriptor descriptor}
-        [rn/view
-         {:style {:margin-vertical 40
-                  :padding-left    40
-                  :flex-direction  :row
-                  :align-items     :center}}
-         [text/text
-          {:size   :heading-1
-           :weight :semi-bold}
-          "Account card"]
-         [rn/view
-          {:style {:width            20
-                   :height           20
-                   :border-radius    60
-                   :background-color colors/success-50
-                   :align-items      :center
-                   :justify-content  :center
-                   :margin-left      8}}
-          [icon/icon :i/check {:color colors/white :size 16}]]]
-        [rn/view {:style {:align-items :center :margin-bottom 20}}
-         [quo/account-card @state]]])]))
+        [quo/account-card @state]])]))

src/status_im2/contexts/quo_preview/wallet/account_overview.cljs

@@ -1,53 +1,30 @@
 (ns status-im2.contexts.quo-preview.wallet.account-overview
   (:require
     [quo.core :as quo]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Time frame string"
-    :key   :time-frame-string
-    :type  :text}
-   {:label "Time frame to string"
-    :key   :time-frame-to-string
-    :type  :text}
-   {:label "Percentage change"
-    :key   :percentage-change
-    :type  :text}
-   {:label "Currency change"
-    :key   :currency-change
-    :type  :text}
-   {:label "Current value"
-    :key   :current-value
-    :type  :text}
-   {:label   "State"
-    :key     :state
+  [{:key :time-frame-string :type :text}
+   {:key :time-frame-to-string :type :text}
+   {:key :percentage-change :type :text}
+   {:key :currency-change :type :text}
+   {:key :current-value :type :text}
+   {:key     :state
     :type    :select
-    :options [{:key   :default
-               :value "Default"}
-              {:key   :loading
-               :value "Loading"}]}
-   {:label   "Metrics"
-    :key     :metrics
+    :options [{:key :default}
+              {:key :loading}]}
+   {:key     :metrics
     :type    :select
-    :options [{:key   "Positive"
-               :value :positive}
-              {:key   "Negative"
-               :value :negative}]}
-   {:label "Account name"
-    :key   :account-name
-    :type  :text}
+    :options [{:key :positive}
+              {:key :negative}]}
+   {:key :account-name :type :text}
    (preview/customization-color-option)
-   {:label   "Account"
-    :key     :account
+   {:key     :account
     :type    :select
-    :options [{:key   :watched-address
-               :value "Watched address"}
-              {:key   :default
-               :value "Default"}]}
-   {:label   "Time frame"
-    :key     :time-frame
+    :options [{:key :watched-address}
+              {:key :default}]}
+   {:key     :time-frame
     :type    :select
     :options [{:key   :one-week
                :value "1 Week"}
@@ -62,7 +39,7 @@
               {:key   :custom
                :value "Custom"}]}])
 
-(defn preview-account-overview
+(defn view
   []
   (let [state (reagent/atom {:metrics              :positive
                              :currency-change      "€0.00"
@@ -76,11 +53,9 @@
                              :customization-color  :blue})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:style {:padding-bottom 150}}
-        [rn/view
-         {:style {:padding-vertical 60
-                  :flex-direction   :row
-                  :justify-content  :center}}
-         [quo/account-overview @state]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical 60
+                                    :flex-direction   :row
+                                    :justify-content  :center}}
+       [quo/account-overview @state]])))

src/status_im2/contexts/quo_preview/wallet/keypair.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.wallet.keypair
   (:require
     [quo.core :as quo]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -62,38 +61,28 @@
   (map (fn [account] (assoc account :blur? blur?)) accounts))
 
 (def descriptor
-  [{:label   "Stored:"
-    :key     :stored
+  [{:key     :stored
     :type    :select
-    :options [{:key   :on-device
-               :value "On device"}
-              {:key   :on-keycard
-               :value "On Keycard"}]}
-   {:label   "Action:"
-    :key     :action
+    :options [{:key :on-device}
+              {:key :on-keycard}]}
+   {:key     :action
     :type    :select
-    :options [{:key   :selector
-               :value "Selector"}
-              {:key   :options
-               :value "Options"}]}
-   {:label   "Type:"
-    :key     :type
+    :options [{:key :selector}
+              {:key :options}]}
+   {:key     :type
     :type    :select
-    :options [{:key   :default-keypair
-               :value "Default keypair"}
-              {:key   :other
-               :value "Other"}]}
+    :options [{:key :default-keypair}
+              {:key :other}]}
    (preview/customization-color-option)
-   {:key  :blur?
-    :type :boolean}])
+   {:key :blur? :type :boolean}])
 
 (def default-details
   {:full-name "John Doe"
    :address   "zQ3...6fBd2"})
 
 (def other-details {:full-name "Metamask"})
 
-(defn preview
+(defn view
   []
   (let [state (reagent/atom {:customization-color :blue
                              :type                :default-keypair
@@ -103,18 +92,17 @@
                              :blur?               false})]
     (fn []
       [preview/preview-container
-       {:state                 state
-        :descriptor            descriptor
-        :blur?                 (:blur? @state)
-        :show-blur-background? true
-        :blur-dark-only?       true
-        :blur-height           400}
-       [rn/view
-        {:style {:padding-vertical 30
-                 :flex-direction   :row
-                 :justify-content  :center}}
-        [quo/keypair
-         (merge
-          @state
-          {:details  (if (= (:type @state) :default-keypair) default-details other-details)
-           :accounts (get-accounts (:blur? @state))})]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :blur?                     (:blur? @state)
+        :show-blur-background?     true
+        :blur-dark-only?           true
+        :blur-height               400
+        :component-container-style {:padding-vertical 30
+                                    :flex-direction   :row
+                                    :justify-content  :center}}
+       [quo/keypair
+        (merge
+         @state
+         {:details  (if (= (:type @state) :default-keypair) default-details other-details)
+          :accounts (get-accounts (:blur? @state))})]])))