[#17288] refactor: migrate previews (markdown, messages) to new api (#17280)

src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs

@@ -25,9 +25,7 @@
                :value "48"}
               {:key   80
                :value "80"}]}
-   {:label "Emoji"
+   {:key :emoji :type :text}
-    :key   :emoji
-    :type  :text}
    (preview/customization-color-option)])
 
 (defn view

src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs

@@ -1,5 +1,5 @@
 (ns status-im2.contexts.quo-preview.avatars.icon-avatar
-  (:require [quo2.components.avatars.icon-avatar :as quo]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 

src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs

@@ -1,5 +1,5 @@
 (ns status-im2.contexts.quo-preview.avatars.user-avatar
-  (:require [quo2.components.avatars.user-avatar.view :as quo]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))

src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs

@@ -1,5 +1,5 @@
 (ns status-im2.contexts.quo-preview.avatars.wallet-user-avatar
-  (:require [quo2.components.avatars.wallet-user-avatar :as quo]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 

src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs

@@ -71,7 +71,7 @@
      [quo/text {:style text-style}
       "Group chats are always end-to-end encrypted with secure cryptographic keys. Only the group chat members will have access to the messages in it. Status doesn't have the keys and can't access any messages by design."]]))
 
-(defn documenation-drawer
+(defn documentation-drawer
   [title show-button? button-label expanded? shell?]
   [quo/documentation-drawers
    {:title           title
@@ -99,11 +99,11 @@
         {:container-style {:margin-horizontal 40
                            :margin-bottom     20}
          :on-press        #(rf/dispatch [:show-bottom-sheet
-                                         {:content     (constantly [documenation-drawer @title
+                                         {:content     (constantly [documentation-drawer @title
                                                                     @show-button?
                                                                     @button-label expanded? @shell?])
                                           :expandable? @show-button?
                                           :shell?      @shell?
                                           :expanded?   @expanded?}])}
         "Open drawer"]
-       [documenation-drawer @title @show-button? @button-label expanded?]])))
+       [documentation-drawer @title @show-button? @button-label expanded?]])))

src/status_im2/contexts/quo_preview/info/info_message.cljs

@@ -1,5 +1,5 @@
 (ns status-im2.contexts.quo-preview.info.info-message
-  (:require [quo2.components.info.info-message :as quo]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 

src/status_im2/contexts/quo_preview/main.cljs

@@ -43,7 +43,7 @@
     [status-im2.contexts.quo-preview.dividers.new-messages :as new-messages]
     [status-im2.contexts.quo-preview.dividers.strength-divider :as strength-divider]
     [status-im2.contexts.quo-preview.drawers.action-drawers :as action-drawers]
-    [status-im2.contexts.quo-preview.drawers.documentation-drawers :as documenation-drawers]
+    [status-im2.contexts.quo-preview.drawers.documentation-drawers :as documentation-drawers]
     [status-im2.contexts.quo-preview.drawers.drawer-buttons :as drawer-buttons]
     [status-im2.contexts.quo-preview.drawers.drawer-top :as drawer-top]
     [status-im2.contexts.quo-preview.drawers.permission-drawers :as permission-drawers]
@@ -209,7 +209,7 @@
    :drawers           [{:name      :action-drawers
                         :component action-drawers/view}
                        {:name      :documentation-drawer
-                        :component documenation-drawers/view}
+                        :component documentation-drawers/view}
                        {:name      :drawer-buttons
                         :component drawer-buttons/view}
                        {:name      :drawer-top
@@ -283,15 +283,15 @@
                         :options   {:topBar {:visible true}}
                         :component skeleton-list/view}]
    :markdown          [{:name      :texts
-                        :component text/preview-text}
+                        :component text/view}
                        {:name      :markdown-list
-                        :component markdown-list/preview-markdown-list}]
+                        :component markdown-list/view}]
    :messages          [{:name      :gap
                         :component messages-gap/preview-messages-gap}
                        {:name      :system-messages
                         :component system-message/preview-system-message}
                        {:name      :author
-                        :component messages-author/preview-author}]
+                        :component messages-author/view}]
    :navigation        [{:name      :bottom-nav-tab
                         :component bottom-nav-tab/preview-bottom-nav-tab}
                        {:name      :top-nav

src/status_im2/contexts/quo_preview/markdown/list.cljs

@@ -1,80 +1,35 @@
 (ns status-im2.contexts.quo-preview.markdown.list
   (: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]
             [status-im2.common.resources :as resources]))
 
 (def descriptor
-  [{:label "Title:"
+  [{:key :title :type :text}
-    :key   :title
+   {:key :description :type :text}
-    :type  :text}
+   {:key :tag-name :type :text}
-   {:label "Description:"
+   {:key :description-after-tag :type :text}
-    :key   :description
+   {:key :step-number :type :text}
-    :type  :text}
+   {:key :blur? :type :boolean}
-   {:label "Tag name:"
+   {:key     :type
-    :key   :tag-name
-    :type  :text}
-   {:label "Description After Tag (Set tag name):"
-    :key   :description-after-tag
-    :type  :text}
-   {:label   "Type: (step uses index)"
-    :key     :type
     :type    :select
-    :options [{:key   :bullet
+    :options [{:key :bullet}
-               :value :bullet}
+              {:key :step}]}
-              {:key   :step
+   (preview/customization-color-option)])
-               :value :step}]}
-   {:label "Step Number:"
-    :key   :step-number
-    :type  :text}
-   {:label   "Customization Color:"
-    :key     :customization-color
-    :type    :select
-    :options [{:key   :blue
-               :value :blue}
-              {:key   :army
-               :value :army}
-              {:key   :none
-               :value :none}]}
-   {:label "Blur? (Dark only):"
-    :key   :blur?
-    :type  :boolean}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:title       "Be respectful"
                              :description "Lorem ipsum dolor sit amet."})]
     (fn []
-      (let [{:keys [title step-number customization-color description tag-name description-after-tag type
+      (let [{:keys [title tag-name]} @state
-                    blur?]} @state
+            tag-picture              (when tag-name (resources/get-mock-image :monkey))]
-            tag-picture     (when tag-name (resources/get-mock-image :monkey))]
+        [preview/preview-container
-        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+         {:state                 state
-         [rn/view {:padding-bottom 150}
+          :descriptor            descriptor
-          [preview/customizer state descriptor]
+          :blur?                 (:blur? @state)
-          [rn/view
+          :show-blur-background? (:blur? @state)}
-           {:padding-vertical 60
+         [quo/markdown-list
-            :background-color (when blur? "#484F5E")}
+          (assoc @state
-           [quo/markdown-list
+                 :title       (when (pos? (count title)) title)
-            {:type                  type
+                 :tag-picture tag-picture)]]))))
-             :blur?                 blur?
-             :title                 (when (pos? (count title)) title)
-             :step-number           step-number
-             :description           description
-             :tag-name              tag-name
-             :tag-picture           tag-picture
-             :description-after-tag description-after-tag
-             :customization-color   customization-color}]]]]))))
-
-(defn preview-markdown-list
-  []
-  [rn/view
-   {:background-color
-    (colors/theme-colors colors/white colors/neutral-95)
-    :flex 1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/markdown/text.cljs

@@ -1,43 +1,30 @@
 (ns status-im2.contexts.quo-preview.markdown.text
-  (:require [quo2.components.markdown.text :as quo2]
+  (:require [quo2.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   :heading-1
+    :options [{:key :heading-1}
-               :value "Heading 1"}
+              {:key :heading-2}
-              {:key   :heading-2
+              {:key :paragraph-1}
-               :value "Heading 2"}
+              {:key :paragraph-2}
-              {:key   :paragraph-1
+              {:key :label}]}
-               :value "Paragraph 1"}
+   {:key     :weight
-              {:key   :paragraph-2
-               :value "Paragraph 2"}
-              {:key   :label
-               :value "Label"}]}
-   {:label   "Weight:"
-    :key     :weight
     :type    :select
-    :options [{:key   :regular
+    :options [{:key :regular}
-               :value "Regular"}
+              {:key :medium}
-              {:key   :medium
+              {:key :semi-bold}
-               :value "Medium"}
+              {:key :monospace}]}])
-              {:key   :semi-bold
-               :value "Semi-bold"}
-              {:key   :monospace
-               :value "Monospace"}]}])
 
-(defn preview-text
+(defn view
   []
   (let [state (reagent/atom {})]
     (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-vertical 60}
+       [quo/text @state
-         [quo2/text @state
+        "The quick brown fox jumped over the lazy dog."]])))
-          "The quick brown fox jumped over the lazy dog."]]]])))

src/status_im2/contexts/quo_preview/messages/author.cljs

@@ -1,51 +1,31 @@
 (ns status-im2.contexts.quo-preview.messages.author
-  (:require [quo2.components.markdown.text :as text]
+  (:require [quo2.core :as quo]
-            [quo2.components.messages.author.view :as quo2]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Primary name"
+  [{:key :primary-name :type :text :limit 24}
-    :key   :primary-name
+   {:key :secondary-name :type :text}
-    :type  :text
+   {:key :short-chat-key :type :text}
-    :limit 24}
+   {:key :time-str :type :text :limit 5}
-   {:label "Secondary name"
+   {:key :contact? :type :boolean}
-    :key   :secondary-name
+   {:key :verified? :type :boolean}
-    :type  :text}
+   {:key :muted? :type :boolean}
-   {:label "Chat key"
+   {:key :untrustworthy? :type :boolean}
-    :key   :chat-key
+   {:key     :size
-    :type  :text}
+    :type    :select
-   {:label "Time"
+    :options [{:key 13 :value "13"}
-    :key   :time-str
+              {:key 15 :value "15"}]}])
-    :type  :text
-    :limit 5}
-   {:label "Is contact?"
-    :key   :contact?
-    :type  :boolean}
-   {:label "Is verified?"
-    :key   :verified?
-    :type  :boolean}
-   {:label "Is untrustworthy?"
-    :key   :untrustworthy?
-    :type  :boolean}])
 
-(defn preview-author
+(defn view
   []
-  (let [state (reagent/atom {:primary-name    "Alisher Yakupov"
+  (let [state (reagent/atom {:primary-name "Alisher Yakupov"
-                             :seconadary-name ""
+                             :time-str     "09:30"
-                             :time-str        "09:30"
+                             :size         13})]
-                             :contact?        false
-                             :verified?       false
-                             :untrustworthy?  false})]
     (fn []
       [preview/preview-container
-       {:state state :descriptor descriptor}
+       {:state                     state
-       [rn/view {:padding-bottom 150}
+        :descriptor                descriptor
-        [rn/view
+        :component-container-style {:padding-vertical   50
-         {:padding-vertical    60
+                                    :padding-horizontal 20}}
-          :padding--horizontal 15
+       [quo/author @state]])))
-          :justify-content     :center}
-         [rn/view
-          [text/text "Author:"]
-          [quo2/author @state]]]]])))

src/status_im2/contexts/quo_preview/messages/gap.cljs

@@ -1,17 +1,12 @@
 (ns status-im2.contexts.quo-preview.messages.gap
-  (:require [quo2.components.messages.gap :as gap]
+  (:require [quo2.core :as quo]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
-            [utils.i18n :as i18n]
+            [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [utils.i18n :as i18n]))
 
 (def descriptor
-  [{:label "Timestamp Far"
+  [{:key :timestamp-far :type :text}
-    :key   :timestamp-far
+   {:key :timestamp-near :type :text}])
-    :type  :text}
-   {:label "Timestamp Near"
-    :key   :timestamp-near
-    :type  :text}])
 
 (defn preview-messages-gap
   []
@@ -22,9 +17,7 @@
                              :warning-label          (i18n/label :messages-gap-warning)})]
     (fn []
       [preview/preview-container
-       {:state      state
+       {:state                     state
-        :descriptor descriptor}
+        :descriptor                descriptor
-       [rn/view
+        :component-container-style {:padding-vertical 60}}
-        {:padding-vertical 60
+       [quo/gap @state]])))
-         :align-items      :center}
-        [gap/gap @state]]])))

src/status_im2/contexts/quo_preview/messages/system_message.cljs

@@ -1,58 +1,44 @@
 (ns status-im2.contexts.quo-preview.messages.system-message
-  (:require [quo2.components.messages.system-message :as system-message]
+  (:require [quo2.core :as quo]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Message Type"
+  [{:label "Message Content"
+    :key   :content
+    :type  :text}
+   {:label   "Message Type"
     :key     :type
     :type    :select
     :options [{:value "Message pinned"
                :key   :pinned}
-              {:value "Contact request"
+              {:key :contact-request}
-               :key   :contact-request}
               {:value "User added"
                :key   :added}
               {:value "User removed"
                :key   :removed}
               {:value "Message deleted"
                :key   :deleted}]}
-   {:label   "Action"
+   {:key :pinned-by :type :text}
-    :key     :action
+   {:key :incoming? :type :boolean}
-    :type    :select
+   (preview/customization-color-option)])
-    :options [{:value "none"
-               :key   nil}
-              {:value "Undo"
-               :key   :undo}]}
-   {:label "Pinned By"
-    :key   :pinned-by
-    :type  :text}
-   {:label "Content Text"
-    :key   :content-text
-    :type  :text}
-   {:label "Content Info"
-    :key   :content-info
-    :type  :text}])
 
 (defn finalize-state
   [state]
   (merge @state
-         {:child        (when (= (:type @state) :pinned) [rn/text "Message content"])
+         {:child        (when (= (:type @state) :pinned) [rn/text (:content @state)])
           :display-name (:pinned-by @state)}))
 
 (defn preview-system-message
   []
-  (let [state (reagent/atom {:type         :pinned
+  (let [state (reagent/atom {:type      :pinned
-                             :pinned-by    "Steve"
+                             :pinned-by "Steve"
-                             :timestamp    "09:41"
+                             :timestamp "09:41"
-                             :content-text "Hello! This is an example of a pinned message!"
+                             :content   "Hello! This is an example of a content!"})]
-                             :content-info "3 photos"})]
     (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/system-message (finalize-state state)]])))
-         {:padding-vertical 60 :flex 1}
-         [system-message/system-message (finalize-state state)]]]])))