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

src/status_im2/contexts/quo_preview/main.cljs

@@ -408,13 +408,13 @@
    :switchers         [{:name      :group-messaging-card
                         :component group-messaging-card/view}
                        {:name      :switcher-cards
-                        :component switcher-cards/preview-switcher-cards}]
+                        :component switcher-cards/view}]
    :tabs              [{:name      :segmented
-                        :component segmented/preview-segmented}
+                        :component segmented/view}
                        {:name      :tabs
-                        :component tabs/preview-tabs}
+                        :component tabs/view}
                        {:name      :account-selector
-                        :component account-selector/preview-this}]
+                        :component account-selector/view}]
    :tags              [{:name      :context-tags
                         :component context-tags/preview-context-tags}
                        {:name      :network-tags
@@ -432,7 +432,7 @@
                        {:name      :token-tag
                         :component token-tag/preview-token-tag}]
    :text-combinations [{:name      :text-combinations
-                        :component text-combinations/preview}]
+                        :component text-combinations/view}]
    :wallet            [{:name :account-card :component account-card/preview-account-card}
                        {:name :account-origin :component account-origin/view}
                        {:name      :account-overview

src/status_im2/contexts/quo_preview/switcher/group_messaging_card.cljs

@@ -6,46 +6,27 @@
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Title"
+  [{:key :title :type :text}
-    :key   :title
+   {:key     :status
-    :type  :text}
-   {:label   "Status"
-    :key     :status
     :type    :select
-    :options [{:key   :read
+    :options [{:key :read}
-               :value :read}
+              {:key :unread}
-              {:key   :unread
+              {:key :mention}]}
-               :value :unread}
+   {:key :counter-label :type :text}
-              {:key   :mention
+   {:key     :type
-               :value :mention}]}
-   {:label "Counter Label"
-    :key   :counter-label
-    :type  :text}
-   {:label   "Type"
-    :key     :type
     :type    :select
     :options [{:key   :message
                :value :text}
-              {:key   :photo
+              {:key :photo}
-               :value :photo}
+              {:key :sticker}
-              {:key   :sticker
+              {:key :gif}
-               :value :sticker}
+              {:key :audio}
-              {:key   :gif
+              {:key :community}
-               :value :gif}
+              {:key :link}
-              {:key   :audio
-               :value :audio}
-              {:key   :community
-               :value :community}
-              {:key   :link
-               :value :link}
               {:key   :code
                :value :code-snippet}]}
-   {:label "Last Message"
+   {:key :last-message :type :text}
-    :key   :last-message
+   {:key :avatar? :type :boolean}
-    :type  :text}
-   {:label "Avatar:"
-    :key   :avatar?
-    :type  :boolean}
    (preview/customization-color-option)])
 
 ;; Mock data

src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.switcher.switcher-cards
   (:require
     [quo.foundations.colors :as colors]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.common.resources :as resources]
     [status-im2.constants :as constants]
@@ -10,8 +9,7 @@
     [status-im2.contexts.shell.jump-to.constants :as shell.constants]))
 
 (def descriptor
-  [{:label   "Type"
+  [{:key     :type
-    :key     :type
     :type    :select
     :options [{:key   shell.constants/communities-discover
                :value "Communities Discover"}
@@ -33,27 +31,15 @@
                :value "Wallet Graph"}
               {:key   shell.constants/empty-card
                :value "Empty Card"}]}
-   {:label "Title"
+   {:key :title :type :text}
-    :key   :title
+   {:key :new-notifications? :type :boolean}
-    :type  :text}
+   {:key :banner? :type :boolean}
-   {:label "New Notifications?"
+   {:key     :notification-indicator
-    :key   :new-notifications?
-    :type  :boolean}
-   {:label "Banner?"
-    :key   :banner?
-    :type  :boolean}
-   {:label   "Notification Indicator"
-    :key     :notification-indicator
     :type    :select
-    :options [{:key   :counter
+    :options [{:key :counter}
-               :value :counter}
+              {:key :unread-dot}]}
-              {:key   :unread-dot
+   {:key :counter-label :type :text}
-               :value :unread-dot}]}
+   {:key     :content-type
-   {:label "Counter Label"
-    :key   :counter-label
-    :type  :text}
-   {:label   "Content Type"
-    :key     :content-type
     :type    :select
     :options [{:key   constants/content-type-text
                :value :text}
@@ -69,21 +55,10 @@
                :value :community}
               {:key   constants/content-type-link
                :value :link}]}
-   {:label "Last Message"
+   {:key :last-message :type :text}
-    :key   :last-message
+   (preview/customization-color-option)])
-    :type  :text}
-   {:label "Customization"
-    :key :customization-color
-    :type :select
-    :options
-    (map
-     (fn [c]
-       {:key   c
-        :value c})
-     (keys colors/customization))}])
 
 ;; Mocked Data
-
 (def banner (resources/get-mock-image :community-banner))
 (def sticker {:source (resources/get-mock-image :sticker)})
 (def community-avatar {:source (resources/get-mock-image :community-logo)})
@@ -151,7 +126,7 @@
      :else
      {})))
 
-(defn preview-switcher-cards
+(defn view
   []
   (let [state (reagent/atom {:type                   shell.constants/private-group-chat-card
                              :title                  "Alisher Yakupov"
@@ -165,10 +140,7 @@
                              :preview-label-color    colors/white})]
     (fn []
       [preview/preview-container
-       {:state      state
+       {:state                     state
-        :descriptor descriptor}
+        :descriptor                descriptor
-       [rn/view {:padding-bottom 150}
+        :component-container-style {:padding-vertical 60}}
-        [rn/view
+       [switcher-cards/card (get-mock-data @state)]])))
-         {:padding-vertical 60
-          :align-items      :center}
-         [switcher-cards/card (get-mock-data @state)]]]])))

src/status_im2/contexts/quo_preview/tabs/account_selector.cljs

@@ -1,23 +1,14 @@
 (ns status-im2.contexts.quo-preview.tabs.account-selector
   (:require
-    [quo.components.tabs.account-selector :as quo]
+    [quo.core :as quo]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Show Label?:"
+  [{:key :show-label? :type :boolean}
-    :key   :show-label?
+   {:key :transparent? :type :boolean}
-    :type  :boolean}
+   {:key :account-text :type :text}
-   {:label "Transparent Background?:"
+   {:key :label-text :type :text}])
-    :key   :transparent?
-    :type  :boolean}
-   {:label "Account Text"
-    :key   :account-text
-    :type  :text}
-   {:label "Label Text"
-    :key   :label-text
-    :type  :text}])
 
 ;; keeping this unused data structure in the code for now
 ;; will reference them when I introduce multiple account support
@@ -46,7 +37,7 @@
     :account-emoji "🍟"
     :label-text    "Label 3"}])
 
-(defn preview-this
+(defn view
   []
   (let [state (reagent/atom {:show-label?   true
                              :transparent?  false
@@ -56,10 +47,7 @@
                              :label-text    "Label"})]
     (fn []
       [preview/preview-container
-       {:state      state
+       {:state                     state
-        :descriptor descriptor}
+        :descriptor                descriptor
-       [rn/view {:padding-bottom 150}
+        :component-container-style {:padding-vertical 60}}
-        [rn/view
+       [quo/account-selector @state]])))
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo/account-selector @state]]]])))

src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs

@@ -1,50 +1,44 @@
 (ns status-im2.contexts.quo-preview.tabs.segmented-tab
   (:require
-    [quo.components.tabs.segmented-tab :as quo]
+    [quo.core :as quo]
-    [quo.theme :as theme]
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
+  [{:key     :size
-    :key     :size
     :type    :select
     :options [{:key   28
                :value "28"}
               {:key   20
                :value "20"}]}
-   {:label "Blur?"
+   {:key  :blur?
-    :key   :blur?
+    :type :boolean}])
-    :type  :boolean}])
 
-(defn preview-segmented
+(defn view
   []
   (let [state (reagent/atom {:size  32
                              :blur? false})]
     (fn []
       [preview/preview-container
-       {:state      state
+       {:state                     state
-        :descriptor descriptor}
+        :descriptor                descriptor
-       [rn/view {:padding-bottom 150}
+        :blur?                     (:blur? @state)
-        [preview/blur-view
+        :show-blur-background?     true
-         {:show-blur-background? (:blur? @state)
+        :component-container-style {:padding-vertical 60}}
-          :height                200
+       [:<>
-          :style                 {:width "100%"}
+        [quo/segmented-control
-          :blur-view-props       {:blur-type (theme/get-theme)}}
+         (assoc @state
-         [:<>
+                :default-active 1
-          [quo/segmented-control
+                :data           [{:id 1 :label "Tab 1"}
-           (merge @state
+                                 {:id 2 :label "Tab 2"}
-                  {:default-active 1
+                                 {:id 3 :label "Tab 3"}
-                   :data           [{:id 1 :label "Tab 1"}
+                                 {:id 4 :label "Tab 4"}]
-                                    {:id 2 :label "Tab 2"}
+                :on-change      #(println "Active tab" %))]
-                                    {:id 3 :label "Tab 3"}
+        [rn/view {:style {:padding-top 24}}
-                                    {:id 4 :label "Tab 4"}]
+         [quo/segmented-control
-                   :on-change      #(println "Active tab" %)})]
+          (assoc @state
-          [rn/view {:style {:padding-top 24}}
+                 :default-active 1
-           [quo/segmented-control
+                 :data           [{:id 1 :label "Tab 1"}
-            (merge @state
+                                  {:id 2 :label "Tab 2"}]
-                   {:default-active 1
+                 :on-change      #(println "Active tab" %))]]]])))
-                    :data           [{:id 1 :label "Tab 1"}
-                                     {:id 2 :label "Tab 2"}]
-                    :on-change      #(println "Active tab" %)})]]]]]])))

src/status_im2/contexts/quo_preview/tabs/tabs.cljs

@@ -1,24 +1,18 @@
 (ns status-im2.contexts.quo-preview.tabs.tabs
   (: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   "Size:"
+  [{:key     :size
-    :key     :size
     :type    :select
     :options [{:key   32
                :value "32"}
               {:key   24
                :value "24"}]}
-   {:label "Show unread indicators?"
+   {:key :unread-indicators? :type :boolean}
-    :key   :unread-indicators?
+   {:key :scrollable? :type :boolean}])
-    :type  :boolean}
-   {:label "Scrollable:"
-    :key   :scrollable?
-    :type  :boolean}])
 
 (defn generate-tab-items
   [length unread-indicators?]
@@ -28,27 +22,25 @@
      :label             (str "Tab " (inc index))
      :notification-dot? (and unread-indicators? (zero? (rem index 2)))}))
 
-(defn preview-tabs
+(defn view
   []
   (let [state (reagent/atom {:size        32
                              :scrollable? false})]
     (fn []
       [preview/preview-container
-       {:state      state
+       {:state                     state
-        :descriptor descriptor}
+        :descriptor                descriptor
-       [rn/view {:padding-bottom 150}
+        :component-container-style {:padding-vertical   60
-        [rn/view
+                                    :padding-horizontal 20
-         {:padding-vertical   60
+                                    :flex-direction     :row
-          :padding-horizontal 20
+                                    :justify-content    :center}}
-          :flex-direction     :row
+       [quo/tabs
-          :justify-content    :center}
+        (merge @state
-         [quo/tabs
+               {:default-active 1
-          (merge @state
+                :data           (generate-tab-items (if (:scrollable? @state) 15 4)
-                 {:default-active 1
+                                                    (:unread-indicators? @state))
-                  :data           (generate-tab-items (if (:scrollable? @state) 15 4)
+                :on-change      #(println "Active tab" %)}
-                                                      (:unread-indicators? @state))
+               (when (:scrollable? @state)
-                  :on-change      #(println "Active tab" %)}
+                 {:scroll-on-press?    true
-                 (when (:scrollable? @state)
+                  :fade-end-percentage 0.4
-                   {:scroll-on-press?    true
+                  :fade-end?           true}))]])))
-                    :fade-end-percentage 0.4
-                    :fade-end?           true}))]]]])))

src/status_im2/contexts/quo_preview/text_combinations/preview.cljs

@@ -1,28 +1,15 @@
 (ns status-im2.contexts.quo-preview.text-combinations.preview
   (:require
-    [quo.components.text-combinations.view :as quo]
+    [quo.core :as quo]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Title"
+  [{:key :title :type :text}
-    :key   :title
+   {:key :avatar :type :boolean}
-    :type  :text}
+   {:key  :description
-   {:label :avatar
+    :type :text}])
-    :key   :avatar
-    :type  :boolean}
-   {:label   "Description type:"
-    :key     :description
-    :type    :select
-    :options [{:key   :none
-               :value nil}
-              {:key   :description
-               :value :description}]}
-   {:label "Description text"
-    :key   :description-props
-    :type  :text}])
 
 (defn state->text-combinations-props
   [state]
@@ -30,20 +17,15 @@
     (assoc state :avatar (resources/get-mock-image :user-picture-male4))
     state))
 
-(defn preview
+(defn view
   []
   (let [state (reagent/atom {:title                           "Title"
                              :title-accessibility-label       :title
-                             :description                     nil
+                             :description                     ""
-                             :description-props               ""
                              :description-accessibility-label :subtitle})]
     (fn []
       [preview/preview-container
-       {:state      state
+       {:state                     state
-        :descriptor descriptor}
+        :descriptor                descriptor
-       [rn/view {:padding-bottom 150}
+        :component-container-style {:padding-vertical 60}}
-        [rn/view
+       [quo/text-combinations (state->text-combinations-props @state)]])))
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo/view
-          (state->text-combinations-props @state)]]]])))