[#17288] refactor: migrate previews to new api

src/quo2/core.cljs

@@ -93,6 +93,7 @@
     quo2.components.numbered-keyboard.numbered-keyboard.view
     quo2.components.onboarding.small-option-card.view
     quo2.components.password.tips.view
+    quo2.components.profile.collectible.view
     quo2.components.profile.profile-card.view
     quo2.components.profile.select-profile.view
     quo2.components.profile.showcase-nav.view
@@ -297,6 +298,7 @@
 (def tips quo2.components.password.tips.view/view)
 
 ;;;; Profile
+(def collectible quo2.components.profile.collectible.view/collectible)
 (def profile-card quo2.components.profile.profile-card.view/profile-card)
 (def select-profile quo2.components.profile.select-profile.view/view)
 (def showcase-nav quo2.components.profile.showcase-nav.view/view)
@@ -315,6 +317,9 @@
 (def filter quo2.components.selectors.filter.view/view)
 (def reactions quo2.components.selectors.reactions.view/view)
 (def checkbox quo2.components.selectors.selectors.view/checkbox)
+(def toggle quo2.components.selectors.selectors.view/toggle)
+(def radio quo2.components.selectors.selectors.view/radio)
+(def checkbox-prefill quo2.components.selectors.selectors.view/checkbox-prefill)
 
 ;;;; Settings
 (def account quo2.components.settings.accounts.view/account)

src/status_im2/contexts/quo_preview/main.cljs

@@ -352,25 +352,25 @@
    :password          [{:name      :tips
                         :component tips/view}]
    :profile           [{:name      :profile-card
-                        :component profile-card/preview-profile-card}
+                        :component profile-card/view}
                        {:name      :collectible
-                        :component collectible/preview-collectible}
+                        :component collectible/view}
                        {:name      :select-profile
-                        :component select-profile/preview-select-profile}
+                        :component select-profile/view}
                        {:name      :showcase-nav
                         :component showcase-nav/view}]
    :reactions         [{:name      :react
-                        :component react/preview-react}]
+                        :component react/view}]
    :record-audio      [{:name      :record-audio
-                        :component record-audio/preview-record-audio}]
+                        :component record-audio/view}]
    :selectors         [{:name      :disclaimer
-                        :component disclaimer/preview-disclaimer}
+                        :component disclaimer/view}
                        {:name      :filter
-                        :component filter/preview}
+                        :component filter/view}
                        {:name      :selectors
-                        :component selectors/preview-selectors}
+                        :component selectors/view}
                        {:name      :select-reactions
-                        :component selector-reactions/preview}]
+                        :component selector-reactions/view}]
    :settings          [{:name      :privacy-option
                         :component privacy-option/preview-options}
                        {:name      :accounts

src/status_im2/contexts/quo_preview/profile/collectible.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.profile.collectible
   (:require
-    [quo2.components.profile.collectible.view :as quo]
-    [react-native.core :as rn]
+    [quo2.core :as quo]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]
     [status-im2.common.resources :as resources]))
@@ -10,31 +9,21 @@
 (def test-images (repeat 10 test-image))
 
 (def descriptor
-  [{:label   "Number of images"
-    :key     :num-images
+  [{:key     :num-images
     :type    :select
     :options (map (fn [n]
                     {:key n :value (str n " images")})
-                  (range 1 (inc (count test-images))))}
-   {:label "Random order of images"
-    :key   :shuffle-images
-    :type  :boolean}])
+                  (range 1 (inc (count test-images))))}])
 
-(defn preview-collectible
+(defn view
   []
-  (let [state (reagent/atom {:num-images 1 :shuffle-images false})]
+  (let [state (reagent/atom {:num-images 1})]
     (fn []
-      (let [images-to-show (cond->> test-images
-                             (:shuffle-images @state)
-                             (shuffle)
-                             :always
-                             (take (:num-images @state)))]
-        [preview/preview-container
-         {:state      state
-          :descriptor descriptor}
-         [rn/view
-          {:padding-vertical 100
-           :align-items      :center}
-          [quo/collectible
-           {:images   images-to-show
-            :on-press #(js/alert "Pressed")}]]]))))
+      [preview/preview-container
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-vertical 20
+                                    :align-items      :center}}
+       [quo/collectible
+        {:images   (repeat (:num-images @state) test-image)
+         :on-press #(js/alert "Pressed")}]])))

src/status_im2/contexts/quo_preview/profile/profile_card.cljs

@@ -1,51 +1,23 @@
 (ns status-im2.contexts.quo-preview.profile.profile-card
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]
+  (:require [reagent.core :as reagent]
             [quo2.core :as quo]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Show: Is from key card?"
-    :key   :keycard-account?
-    :type  :boolean}
-   {:label "Show: Emoji hash?"
-    :key   :show-emoji-hash?
-    :type  :boolean}
-   {:label "Show: User hash?"
-    :key   :show-user-hash?
-    :type  :boolean}
-   {:label "Show: Options Button?"
-    :key   :show-options-button?
-    :type  :boolean}
-   {:label "Show: Logged In?"
-    :key   :show-logged-in?
-    :type  :boolean}
-   {:label "Login Card?"
-    :key   :login-card?
-    :type  :boolean}
-   {:label "Last Item?"
-    :key   :last-item?
-    :type  :boolean}
-   {: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 "Hash"
-    :key   :hash
-    :type  :text}
-   {:label "Emoji hash"
-    :key   :emoji-hash
-    :type  :text}])
+  [{:key :keycard-account? :type :boolean}
+   {:key :show-emoji-hash? :type :boolean}
+   {:key :show-user-hash? :type :boolean}
+   {:key :show-options-button? :type :boolean}
+   {:key :show-logged-in? :type :boolean}
+   {:key :login-card? :type :boolean}
+   {:key :last-item? :type :boolean}
+   {:key :name :type :text}
+   {:key :hash :type :text}
+   {:key :emoji-hash :type :text}
+   (preview/customization-color-option)])
 
-(defn preview-profile-card
+(defn view
   []
   (let [state (reagent/atom {:keycard-account? false
                              :name "Matt Grote"
@@ -64,11 +36,7 @@
                              :emoji-hash "😄😂🫣🍑😇🤢😻🥷🏻🦸🏻‍♀️🦸🏻🦸🏻‍♂️🦹🏻‍♀️🧑🏻‍🎄🎅🏻"})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :flex-direction   :row
-          :justify-content  :center}
-         [quo/profile-card @state]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-bottom 50}}
+       [quo/profile-card @state]])))

src/status_im2/contexts/quo_preview/profile/select_profile.cljs

@@ -1,27 +1,15 @@
 (ns status-im2.contexts.quo-preview.profile.select-profile
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]
+  (:require [reagent.core :as reagent]
             [quo2.core :as quo]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Customization Color"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [color]
-                    {:key   color
-                     :value color})
-                  (keys colors/customization))}
-   {:label "Name"
-    :key   :name
-    :type  :text}
-   {:label "Selected"
-    :key   :selected?
-    :type  :boolean}])
+  [(preview/customization-color-option)
+   {:key :name :type :text}
+   {:key :selected? :type :boolean}])
 
-(defn preview-select-profile
+(defn view
   []
   (let [state     (reagent/atom {:selected?           false
                                  :name                "Alisher Yakupov"
@@ -30,13 +18,7 @@
         selected? (reagent/cursor state [:selected?])]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical   60
-          :flex-direction     :row
-          :padding-horizontal 20
-          :background-color   colors/neutral-90
-          :justify-content    :center}
-         [quo/select-profile (merge @state {:on-change #(reset! selected? %)})]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding 20}}
+       [quo/select-profile (merge @state {:on-change #(reset! selected? %)})]])))

src/status_im2/contexts/quo_preview/profile/showcase_nav.cljs

@@ -12,20 +12,17 @@
                 :id   index}))))
 
 (def descriptor
-  [{:type :number
-    :key  :previews-length}
+  [{:type :number :key :previews-length}
    {:type    :select
     :key     :state
-    :options [{:key   :default
-               :value "default"}
-              {:key   :scroll
-               :value "scroll"}]}])
+    :options [{:key :default}
+              {:key :scroll}]}])
 
 (defn view
   []
   (let [state           (reagent/atom {:state           :default
                                        :previews-length 10
-                                       :active-id       0})
+                                       :active-id       3})
         component-state (reagent/cursor state [:state])
         previews-length (reagent/cursor state [:previews-length])
         active-id       (reagent/cursor state [:active-id])
@@ -36,8 +33,7 @@
         :descriptor                descriptor
         :component-container-style {:padding-horizontal 0}}
        [quo/showcase-nav
-        {:default-active 3
-         :state          @component-state
-         :active-id      @active-id
-         :data           (take (or @previews-length 1) nav-data)
-         :on-press       #(swap! state assoc :active-id %)}]])))
+        {:state     @component-state
+         :active-id @active-id
+         :data      (take (or @previews-length 1) nav-data)
+         :on-press  #(swap! state assoc :active-id %)}]])))

src/status_im2/contexts/quo_preview/reactions/react.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.reactions.react
   (:require [clojure.string :as string]
             [quo2.core :as quo]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.constants :as constants]
             [status-im2.contexts.quo-preview.preview :as preview]))
@@ -10,31 +9,23 @@
   [{:label "Count"
     :key   :clicks
     :type  :text}
-   {:label   "Emoji"
-    :key     :emoji
+   {:key     :emoji
     :type    :select
     :options (for [reaction (vals constants/reactions)]
                {:key   reaction
                 :value (string/capitalize (name reaction))})}
-   {:label "Neutral"
-    :key   :neutral?
-    :type  :boolean}])
+   {:key :neutral? :type :boolean}])
 
-(defn preview-react
+(defn view
   []
   (let [state (reagent/atom {:emoji :reaction/love})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view
-        {:padding-bottom 150
-         :align-items    :center}
-        [rn/view
-         {:width            100
-          :padding-vertical 60
-          :justify-content  :space-evenly
-          :flex-direction   :row
-          :align-items      :center}
-         [quo/reaction @state]
-         [quo/add-reaction]]]])))
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-bottom  50
+                                    :flex-direction  :row
+                                    :align-items     :center
+                                    :justify-content :center}}
+       [quo/reaction @state]
+       [quo/add-reaction]])))

src/status_im2/contexts/quo_preview/record_audio/record_audio.cljs

@@ -1,6 +1,5 @@
 (ns status-im2.contexts.quo-preview.record-audio.record-audio
-  (:require [quo2.components.record-audio.record-audio.view :as record-audio]
-            [quo2.core :as quo]
+  (:require [quo2.core :as quo]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]
@@ -12,7 +11,7 @@
 
 (defonce record-audio-permission-granted (reagent/atom false))
 
-(defn preview-record-audio
+(defn view
   []
   (let [message                            (reagent/atom
                                             "Press & hold the mic button to start recording...")
@@ -41,13 +40,11 @@
                                                       :t/audio-recorder-permissions-error)))
                                                   50)}]))]
     (fn []
-      [preview/preview-container
+      [preview/preview-container {:component-container-style {:justify-content :center}}
        [rn/view
-        {:padding-top      150
-         :align-items      :center
-         :background-color :transparent
-         :flex-direction   :row}
-        [record-audio/record-audio
+        {:align-items     :center
+         :justify-content :center}
+        [quo/record-audio
          {:record-audio-permission-granted    @record-audio-permission-granted
           :on-send                            on-send
           :on-start-recording                 on-start-recording
@@ -56,4 +53,4 @@
           :on-check-audio-permissions         on-check-audio-permissions
           :on-request-record-audio-permission on-request-record-audio-permission
           :max-duration-ms                    constants/audio-max-duration-ms}]]
-       [quo/text {:style {:margin-horizontal 20}} @message]])))
+       [quo/text @message]])))