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

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]
+    [quo2.core :as quo]
-    [react-native.core :as rn]
     [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))))}
+                  (range 1 (inc (count test-images))))}])
-   {:label "Random order of images"
-    :key   :shuffle-images
-    :type  :boolean}])
 
-(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
+      [preview/preview-container
-                             (:shuffle-images @state)
+       {:state                     state
-                             (shuffle)
+        :descriptor                descriptor
-                             :always
+        :component-container-style {:padding-vertical 20
-                             (take (:num-images @state)))]
+                                    :align-items      :center}}
-        [preview/preview-container
+       [quo/collectible
-         {:state      state
+        {:images   (repeat (:num-images @state) test-image)
-          :descriptor descriptor}
+         :on-press #(js/alert "Pressed")}]])))
-         [rn/view
-          {:padding-vertical 100
-           :align-items      :center}
-          [quo/collectible
-           {:images   images-to-show
-            :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]
+  (:require [reagent.core :as reagent]
-            [react-native.core :as rn]
-            [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}
-    :key   :keycard-account?
+   {:key :show-emoji-hash? :type :boolean}
-    :type  :boolean}
+   {:key :show-user-hash? :type :boolean}
-   {:label "Show: Emoji hash?"
+   {:key :show-options-button? :type :boolean}
-    :key   :show-emoji-hash?
+   {:key :show-logged-in? :type :boolean}
-    :type  :boolean}
+   {:key :login-card? :type :boolean}
-   {:label "Show: User hash?"
+   {:key :last-item? :type :boolean}
-    :key   :show-user-hash?
+   {:key :name :type :text}
-    :type  :boolean}
+   {:key :hash :type :text}
-   {:label "Show: Options Button?"
+   {:key :emoji-hash :type :text}
-    :key   :show-options-button?
+   (preview/customization-color-option)])
-    :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}])
 
-(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
+       {:state                     state
-        :descriptor descriptor}
+        :descriptor                descriptor
-       [rn/view {:padding-bottom 150}
+        :component-container-style {:padding-bottom 50}}
-        [rn/view
+       [quo/profile-card @state]])))
-         {:padding-vertical 60
-          :flex-direction   :row
-          :justify-content  :center}
-         [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]
+  (:require [reagent.core :as reagent]
-            [react-native.core :as rn]
-            [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"
+  [(preview/customization-color-option)
-    :key     :customization-color
+   {:key :name :type :text}
-    :type    :select
+   {:key :selected? :type :boolean}])
-    :options (map (fn [color]
-                    {:key   color
-                     :value color})
-                  (keys colors/customization))}
-   {:label "Name"
-    :key   :name
-    :type  :text}
-   {:label "Selected"
-    :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
+       {:state                     state
-        :descriptor descriptor}
+        :descriptor                descriptor
-       [rn/view {:padding-bottom 150}
+        :component-container-style {:padding 20}}
-        [rn/view
+       [quo/select-profile (merge @state {:on-change #(reset! selected? %)})]])))
-         {: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? %)})]]]])))

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

@@ -12,20 +12,17 @@
                 :id   index}))))
 
 (def descriptor
-  [{:type :number
+  [{:type :number :key :previews-length}
-    :key  :previews-length}
    {:type    :select
     :key     :state
-    :options [{:key   :default
+    :options [{:key :default}
-               :value "default"}
+              {:key :scroll}]}])
-              {:key   :scroll
-               :value "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
-         :state          @component-state
+         :active-id @active-id
-         :active-id      @active-id
+         :data      (take (or @previews-length 1) nav-data)
-         :data           (take (or @previews-length 1) nav-data)
+         :on-press  #(swap! state assoc :active-id %)}]])))
-         :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
+       {:state                     state
-        :descriptor descriptor}
+        :descriptor                descriptor
-       [rn/view
+        :component-container-style {:padding-bottom  50
-        {:padding-bottom 150
+                                    :flex-direction  :row
-         :align-items    :center}
+                                    :align-items     :center
-        [rn/view
+                                    :justify-content :center}}
-         {:width            100
+       [quo/reaction @state]
-          :padding-vertical 60
+       [quo/add-reaction]])))
-          :justify-content  :space-evenly
-          :flex-direction   :row
-          :align-items      :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]
+  (:require [quo2.core :as quo]
-            [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
-         :align-items      :center
+         :justify-content :center}
-         :background-color :transparent
+        [quo/record-audio
-         :flex-direction   :row}
-        [record-audio/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]])))

src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs

@@ -1,35 +1,15 @@
 (ns status-im2.contexts.quo-preview.selectors.disclaimer
   (:require [quo2.core :as quo]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
+            [react-native.core :as rn]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Checked:"
+  [{:key :checked? :type :boolean}
-    :key   :checked?
+   {:key :blur? :type :boolean}
-    :type  :boolean}
+   {:key :text :type :text}])
-   {:label "Blur (only for dark theme):"
-    :key   :blur?
-    :type  :boolean}
-   {:label "Text"
-    :key   :text
-    :type  :text}])
 
-(defn blur-background
+(defn view
-  [blur?]
-  (when (and blur? (theme/dark?))
-    [rn/view
-     {:style {:position :absolute
-              :top      0
-              :bottom   0
-              :left     0
-              :right    0}}
-     [preview/blur-view
-      {:style                 {:flex 1}
-       :show-blur-background? true}]]))
-
-(defn preview-disclaimer
   []
   (let [state (reagent/atom {:checked? false
                              :blur?    true
@@ -37,15 +17,16 @@
     (fn []
       (let [{:keys [blur? checked? text]} @state]
         [preview/preview-container
-         {:state      state
+         {:state                     state
-          :descriptor descriptor}
+          :descriptor                descriptor
-         [rn/view {:style {:padding-horizontal 15}}
+          :blur?                     blur?
-          [blur-background blur?]
+          :show-blur-background?     true
-          [rn/view {:style {:margin-vertical 50}}
+          :component-container-style {:padding 20}}
-           [quo/disclaimer
+         [rn/view {:style {:margin-bottom 20}}
-            {:blur?     blur?
+          [quo/disclaimer
-             :checked?  checked?
+           {:blur?     blur?
-             :on-change #(swap! state update :checked? not)}
+            :checked?  checked?
-            text]]
+            :on-change #(swap! state update :checked? not)}
-          [quo/button {:disabled? (not checked?)}
+           text]]
-           "submit"]]]))))
+         [quo/button {:disabled? (not checked?)}
+          "submit"]]))))

src/status_im2/contexts/quo_preview/selectors/filter.cljs

@@ -1,43 +1,19 @@
 (ns status-im2.contexts.quo-preview.selectors.filter
-  (:require [quo2.components.selectors.filter.view :as quo]
+  (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Theme"
+  [{:key :blur? :type :boolean}])
-    :key     :override-theme
-    :type    :select
-    :options [{:key   :dark
-               :value "Dark"}
-              {:key   :light
-               :value "Light"}]}
-   {:label "Blur?"
-    :key   :blur?
-    :type  :boolean}])
 
-(defn preview
+(defn view
   []
-  (let [state (reagent/atom {:override-theme (theme/get-theme)
+  (let [state (reagent/atom {:blur? false})]
-                             :blur?          false})]
     (fn []
       [preview/preview-container
-       {:state      state
+       {:state                     state
-        :descriptor descriptor}
+        :descriptor                descriptor
-       [rn/view
+        :blur?                     (:blur? @state)
-        {:style {:padding-vertical 60
+        :show-blur-background?     true
-                 :align-items      :center}}
+        :component-container-style {:align-items :center}}
-        [rn/view
+       [quo/filter @state]])))
-         {:style {:width            "100%"
-                  :height           250
-                  :align-items      :center
-                  :justify-content  :center
-                  :border-radius    20
-                  :background-color (cond (= :dark (:override-theme @state))
-                                          colors/neutral-95
-
-                                          (= :light (:override-theme @state))
-                                          colors/white)}}
-         [quo/view @state]]]])))

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

@@ -1,30 +1,18 @@
 (ns status-im2.contexts.quo-preview.selectors.reactions
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
+            [status-im2.contexts.quo-preview.preview :as preview]
             [status-im2.constants :as constants]))
 
-(defn cool-preview
+(defn view
   []
-  [rn/view
+  [preview/preview-container
-   [rn/view {:style {:margin-vertical 24}}
+   {:component-container-style {:flex            1
-    (into [rn/view
+                                :padding-top     20
-           {:style {:flex            1
+                                :flex-direction  :row
-                    :margin-top      200
+                                :justify-content :center
-                    :flex-direction  :row
+                                :align-items     :center}}
-                    :justify-content :center
+   [rn/view {:flex-direction :row}
-                    :align-items     :center}}]
+    (for [emoji (vals constants/reactions)]
-          (for [emoji (vals constants/reactions)]
+      ^{:key emoji}
-            ^{:key emoji}
+      [quo/reactions emoji {:container-style {:margin-right 5}}])]])
-            [quo/reactions emoji {:container-style {:margin-right 5}}]))]])
-
-(defn preview
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
-            :flex             1}}
-   [rn/flat-list
-    {:style                        {:flex 1}
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/selectors/selectors.cljs

@@ -1,61 +1,39 @@
 (ns status-im2.contexts.quo-preview.selectors.selectors
-  (:require [quo2.components.markdown.text :as text]
+  (:require [quo2.core :as quo]
-            [quo2.components.selectors.selectors.view :as quo2]
-            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Disabled"
+  [{:key :disabled? :type :boolean}
-    :key   :disabled?
+   {:key :blur? :type :boolean}
-    :type  :boolean}
+   (preview/customization-color-option)])
-   {:label "Blur"
-    :key   :blur?
-    :type  :boolean}
-   {:label   "Customization color"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [[color _]]
-                    {:key color :value (name color)})
-                  colors/customization)}])
 
 (defn selector-preview
   [text component {:keys [disabled? blur? customization-color]}]
   [rn/view
    {:style {:margin      6
             :align-items :center}}
-   [text/text {:size :paragraph-1} text]
+   [quo/text {:size :paragraph-1} text]
    [component
     {:container-style     {:margin 4}
      :disabled?           disabled?
      :blur?               blur?
      :customization-color customization-color}]])
 
-(defn preview-selectors
+(defn view
   []
   (let [state (reagent/atom {:disabled?           false
                              :blur?               false
                              :customization-color :blue})]
     (fn []
       [preview/preview-container
-       {:state      state
+       {:state                 state
-        :descriptor descriptor}
+        :descriptor            descriptor
-       [rn/view {:style {:margin-vertical 24}}
+        :blur?                 (:blur? @state)
-        [preview/blur-view
+        :show-blur-background? true
-         {:style                 {:width       "100%"
+        :blur-height           300}
-                                  :align-items :center
+       [selector-preview "Toggle" quo/toggle @state]
-                                  :top         (if (:blur? @state) 32 16)
+       [selector-preview "Radio" quo/radio @state]
-                                  :position    (if (:blur? @state)
+       [selector-preview "Checkbox" quo/checkbox @state]
-                                                 :absolute
+       [selector-preview "Checkbox Prefill" quo/checkbox-prefill @state]])))
-                                                 :relative)}
-          :height                300
-          :show-blur-background? (:blur? @state)}
-
-         [rn/view
-          {:style {:flex        1
-                   :align-items :center}}
-          [selector-preview "Toggle" quo2/toggle @state]
-          [selector-preview "Radio" quo2/radio @state]
-          [selector-preview "Checkbox" quo2/checkbox @state]
-          [selector-preview "Checkbox Prefill" quo2/checkbox-prefill @state]]]]])))