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

src/status_im2/contexts/quo_preview/main.cljs

@@ -256,11 +256,9 @@
                        {:name      :title-input
                         :component title-input/view}]
    :numbered-keyboard [{:name      :keyboard-key
-                        :options   {:insets {:top? true}}
+                        :component keyboard-key/view}
-                        :component keyboard-key/preview-keyboard-key}
                        {:name      :numbered-keyboard
-                        :options   {:insets {:top? true}}
+                        :component numbered-keyboard/view}]
-                        :component numbered-keyboard/preview-numbered-keyboard}]
    :links             [{:name      :url-preview
                         :options   {:insets {:top? true}}
                         :component url-preview/view}
@@ -316,9 +314,9 @@
                        {:name      :notification
                         :component notification/view}]
    :onboarding        [{:name      :small-option-card
-                        :component small-option-card/preview-small-option-card}]
+                        :component small-option-card/view}]
    :password          [{:name      :tips
-                        :component tips/preview-tips}]
+                        :component tips/view}]
    :profile           [{:name      :profile-card
                         :component profile-card/preview-profile-card}
                        {:name      :collectible

src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs

@@ -1,27 +1,18 @@
 (ns status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Blur:"
+  [{:key :blur? :type :boolean}
-    :key   :blur?
+   {:key :disabled? :type :boolean}
-    :type  :boolean}
+   {:type    :select
-   {:label "Disable:"
-    :key   :disabled?
-    :type  :boolean}
-   {:label   "Type"
-    :type    :select
     :key     :type
-    :options [{:key   :digit
+    :options [{:key :digit}
-               :value "Digit"}
+              {:key :key}
-              {:key   :key
+              {:key :derivation-path}]}])
-               :value "Key"}
-              {:key   :derivation-path
-               :value "Derivation Path"}]}])
 
-(defn preview-keyboard-key
+(defn view
   []
   (let [state (reagent/atom {:disabled? false
                              :on-press  #(js/alert "pressed" %)
@@ -35,13 +26,7 @@
                     nil)]
         [preview/preview-container
          {:state                 state
-          :descriptor descriptor}
+          :descriptor            descriptor
-         [preview/blur-view
+          :blur?                 (:blur? @state)
-          {:style                 {:flex              1
+          :show-blur-background? (:blur? @state)}
-                                   :align-self        :center
+         [quo/keyboard-key @state value]]))))
-                                   :justify-self      :center
-                                   :margin-horizontal 20}
-           :show-blur-background? (:blur? @state)
-           :blur-view-props       (when (:blur? @state)
-                                    {:overlay-color colors/neutral-80-opa-80})}
-          [quo/keyboard-key @state value]]]))))

src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs

@@ -1,49 +1,30 @@
 (ns status-im2.contexts.quo-preview.numbered-keyboard.numbered-keyboard
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]
+            [status-im2.contexts.quo-preview.preview :as preview]))
-            [react-native.blur :as blur]))
 
 (def descriptor
-  [{:label "Blur:"
+  [{:key :blur? :type :boolean}
-    :key   :blur?
+   {:key :disabled? :type :boolean}
-    :type  :boolean}
+   {:key :delete-key? :type :boolean}
-   {:label "Disable:"
+   {:type    :select
-    :key   :disabled?
-    :type  :boolean}
-   {:label "Delete Key:"
-    :key   :delete-key?
-    :type  :boolean}
-   {:label   "Left Action:"
-    :type    :select
     :key     :left-action
-    :options [{:key   :dot
+    :options [{:key :dot}
-               :value "Dot"}
+              {:key :face-id}
-              {:key   :face-id
+              {:key :none}]}])
-               :value "Face ID"}
-              {:key   :none
-               :value "None"}]}])
 
-(defn preview-numbered-keyboard
+(defn view
   []
   (let [state (reagent/atom {:disabled?   false
                              :on-press    (fn [item] (js/alert (str item " pressed")))
                              :blur?       false
                              :delete-key? true
-                             :left-action :dot})
+                             :left-action :dot})]
-        blur? (reagent/cursor state [:blur?])]
     (fn []
       [preview/preview-container
        {:state                 state
-        :descriptor descriptor}
+        :descriptor            descriptor
-       (when @blur?
+        :blur?                 (:blur? @state)
-         [blur/view
+        :show-blur-background? (:blur? @state)
-          {:style         {:position         :absolute
+        :blur-height           300}
-                           :left             0
-                           :right            0
-                           :bottom           0
-                           :height           220
-                           :background-color colors/neutral-80-opa-70}
-           :overlay-color :transparent}])
        [quo/numbered-keyboard @state]])))

src/status_im2/contexts/quo_preview/onboarding/small_option_card.cljs

@@ -1,35 +1,26 @@
 (ns status-im2.contexts.quo-preview.onboarding.small-option-card
   (:require
-    [quo.react-native :as rn]
+    [quo2.core :as quo]
-    [quo2.components.onboarding.small-option-card.view :as quo2]
     [quo2.foundations.colors :as colors]
     [reagent.core :as reagent]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Variant"
+  [{:key     :variant
-    :key     :variant
     :type    :select
-    :options [{:key   :main
+    :options [{:key :main}
-               :value "Main"}
+              {:key :icon}]}
-              {:key   :icon
+   {:key     :image
-               :value "Icon"}]}
-   {:label   "Image"
-    :key     :image
     :type    :select
     :options [{:key   (resources/get-mock-image :small-opt-card-main)
                :value "Image 1"}
               {:key   (resources/get-mock-image :small-opt-card-icon)
                :value "Image 2"}]}
-   {:label "Title"
+   {:key :title :type :text}
-    :key   :title
+   {:key :subtitle :type :text}])
-    :type  :text}
-   {:label "Subtitle"
-    :key   :subtitle
-    :type  :text}])
 
-(defn preview-small-option-card
+(defn view
   []
   (let [state (reagent/atom {:variant  :main
                              :image    (-> descriptor second :options first :key)
@@ -39,9 +30,7 @@
     (fn []
       [preview/preview-container
        {:state                     state
-        :descriptor descriptor}
+        :descriptor                descriptor
-       [rn/view {:style {:padding-bottom 150}}
+        :component-container-style {:padding          20
-        [rn/view
+                                    :background-color colors/neutral-80}}
-         {:style {:background-color colors/neutral-80
+       [quo/small-option-card @state]])))
-                  :padding          20}}
-         [quo2/small-option-card @state]]]])))

src/status_im2/contexts/quo_preview/password/tips.cljs

@@ -1,19 +1,14 @@
 (ns status-im2.contexts.quo-preview.password.tips
   (:require [quo2.core :as quo]
             [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 "Text"
+  [{:key :text :type :text}
-    :key   :text
+   {:key :completed? :type :boolean}])
-    :type  :text}
-   {:label "Completed"
-    :key   :completed?
-    :type  :boolean}])
 
-(defn preview-tips
+(defn view
   []
   (let [state      (reagent/atom {:text       "Lower case"
                                   :completed? false})
@@ -22,7 +17,7 @@
     (fn []
       [preview/preview-container
        {:state                     state
-        :descriptor descriptor}
+        :descriptor                descriptor
-       [rn/view {:padding-bottom 150}
+        :component-container-style {:padding          20
-        [rn/view {:padding 60 :background-color colors/neutral-95}
+                                    :background-color colors/neutral-95}}
-         [quo/tips {:completed? @completed?} @text]]]])))
+       [quo/tips {:completed? @completed?} @text]])))