From b73ea572eeefd98abdf50d7751e59297ff4f4ce8 Mon Sep 17 00:00:00 2001 From: Mohsen Ghafouri Date: Fri, 15 Sep 2023 19:53:30 +0300 Subject: [PATCH] [#17288] refactor: migrate previews (markdown, messages) to new api (#17280) --- .../quo_preview/avatars/account_avatar.cljs | 4 +- .../quo_preview/avatars/icon_avatar.cljs | 2 +- .../quo_preview/avatars/user_avatar.cljs | 2 +- .../avatars/wallet_user_avatar.cljs | 2 +- .../drawers/documentation_drawers.cljs | 6 +- .../quo_preview/info/info_message.cljs | 2 +- src/status_im2/contexts/quo_preview/main.cljs | 10 +-- .../contexts/quo_preview/markdown/list.cljs | 89 +++++-------------- .../contexts/quo_preview/markdown/text.cljs | 49 ++++------ .../contexts/quo_preview/messages/author.cljs | 64 +++++-------- .../contexts/quo_preview/messages/gap.cljs | 25 ++---- .../quo_preview/messages/system_message.cljs | 50 ++++------- 12 files changed, 102 insertions(+), 203 deletions(-) diff --git a/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs index 726304bfeb..e54d8eafa9 100644 --- a/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs +++ b/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 diff --git a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs index fbaa703148..e2caa1b90e 100644 --- a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs +++ b/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])) diff --git a/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs index d3d23176e5..fa4adac2ce 100644 --- a/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs +++ b/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])) diff --git a/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs index 59b35fee74..9c165b6f42 100644 --- a/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs +++ b/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])) diff --git a/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs b/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs index 6a6d2440e4..9b9b708ac9 100644 --- a/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs +++ b/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?]]))) diff --git a/src/status_im2/contexts/quo_preview/info/info_message.cljs b/src/status_im2/contexts/quo_preview/info/info_message.cljs index c126132812..883736c6e4 100644 --- a/src/status_im2/contexts/quo_preview/info/info_message.cljs +++ b/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])) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 0b4b661984..0852e1d477 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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 diff --git a/src/status_im2/contexts/quo_preview/markdown/list.cljs b/src/status_im2/contexts/quo_preview/markdown/list.cljs index 3c097eb55c..c1cfc48e5a 100644 --- a/src/status_im2/contexts/quo_preview/markdown/list.cljs +++ b/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} - {:label "Description:" - :key :description - :type :text} - {:label "Tag name:" - :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 + [{:key :title :type :text} + {:key :description :type :text} + {:key :tag-name :type :text} + {:key :description-after-tag :type :text} + {:key :step-number :type :text} + {:key :blur? :type :boolean} + {:key :type :type :select - :options [{:key :bullet - :value :bullet} - {:key :step - :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}]) + :options [{:key :bullet} + {:key :step}]} + (preview/customization-color-option)]) -(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 - blur?]} @state - tag-picture (when tag-name (resources/get-mock-image :monkey))] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view - {:padding-vertical 60 - :background-color (when blur? "#484F5E")} - [quo/markdown-list - {:type type - :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}]]) + (let [{:keys [title tag-name]} @state + tag-picture (when tag-name (resources/get-mock-image :monkey))] + [preview/preview-container + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? (:blur? @state)} + [quo/markdown-list + (assoc @state + :title (when (pos? (count title)) title) + :tag-picture tag-picture)]])))) diff --git a/src/status_im2/contexts/quo_preview/markdown/text.cljs b/src/status_im2/contexts/quo_preview/markdown/text.cljs index 1f5dc3226d..fed1f7c8e2 100644 --- a/src/status_im2/contexts/quo_preview/markdown/text.cljs +++ b/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] - [react-native.core :as rn] + (:require [quo2.core :as quo] [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 - :value "Heading 1"} - {:key :heading-2 - :value "Heading 2"} - {:key :paragraph-1 - :value "Paragraph 1"} - {:key :paragraph-2 - :value "Paragraph 2"} - {:key :label - :value "Label"}]} - {:label "Weight:" - :key :weight + :options [{:key :heading-1} + {:key :heading-2} + {:key :paragraph-1} + {:key :paragraph-2} + {:key :label}]} + {:key :weight :type :select - :options [{:key :regular - :value "Regular"} - {:key :medium - :value "Medium"} - {:key :semi-bold - :value "Semi-bold"} - {:key :monospace - :value "Monospace"}]}]) + :options [{:key :regular} + {:key :medium} + {:key :semi-bold} + {:key :monospace}]}]) -(defn preview-text +(defn view [] (let [state (reagent/atom {})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view {:padding-vertical 60} - [quo2/text @state - "The quick brown fox jumped over the lazy dog."]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 60}} + [quo/text @state + "The quick brown fox jumped over the lazy dog."]]))) diff --git a/src/status_im2/contexts/quo_preview/messages/author.cljs b/src/status_im2/contexts/quo_preview/messages/author.cljs index 19a1514a9f..5a2e789d7e 100644 --- a/src/status_im2/contexts/quo_preview/messages/author.cljs +++ b/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] - [quo2.components.messages.author.view :as quo2] - [react-native.core :as rn] + (:require [quo2.core :as quo] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Primary name" - :key :primary-name - :type :text - :limit 24} - {:label "Secondary name" - :key :secondary-name - :type :text} - {:label "Chat key" - :key :chat-key - :type :text} - {:label "Time" - :key :time-str - :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}]) + [{:key :primary-name :type :text :limit 24} + {:key :secondary-name :type :text} + {:key :short-chat-key :type :text} + {:key :time-str :type :text :limit 5} + {:key :contact? :type :boolean} + {:key :verified? :type :boolean} + {:key :muted? :type :boolean} + {:key :untrustworthy? :type :boolean} + {:key :size + :type :select + :options [{:key 13 :value "13"} + {:key 15 :value "15"}]}]) -(defn preview-author +(defn view [] - (let [state (reagent/atom {:primary-name "Alisher Yakupov" - :seconadary-name "" - :time-str "09:30" - :contact? false - :verified? false - :untrustworthy? false})] + (let [state (reagent/atom {:primary-name "Alisher Yakupov" + :time-str "09:30" + :size 13})] (fn [] [preview/preview-container - {:state state :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {:padding-vertical 60 - :padding--horizontal 15 - :justify-content :center} - [rn/view - [text/text "Author:"] - [quo2/author @state]]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 50 + :padding-horizontal 20}} + [quo/author @state]]))) diff --git a/src/status_im2/contexts/quo_preview/messages/gap.cljs b/src/status_im2/contexts/quo_preview/messages/gap.cljs index db79b10629..2210fa9dd7 100644 --- a/src/status_im2/contexts/quo_preview/messages/gap.cljs +++ b/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] - [react-native.core :as rn] + (:require [quo2.core :as quo] [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} - {:label "Timestamp Near" - :key :timestamp-near - :type :text}]) + [{:key :timestamp-far :type :text} + {: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 - :descriptor descriptor} - [rn/view - {:padding-vertical 60 - :align-items :center} - [gap/gap @state]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 60}} + [quo/gap @state]]))) diff --git a/src/status_im2/contexts/quo_preview/messages/system_message.cljs b/src/status_im2/contexts/quo_preview/messages/system_message.cljs index 88c9ef5998..cede99d568 100644 --- a/src/status_im2/contexts/quo_preview/messages/system_message.cljs +++ b/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 :action - :type :select - :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}]) + {:key :pinned-by :type :text} + {:key :incoming? :type :boolean} + (preview/customization-color-option)]) (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 - :pinned-by "Steve" - :timestamp "09:41" - :content-text "Hello! This is an example of a pinned message!" - :content-info "3 photos"})] + (let [state (reagent/atom {:type :pinned + :pinned-by "Steve" + :timestamp "09:41" + :content "Hello! This is an example of a content!"})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {:padding-vertical 60 :flex 1} - [system-message/system-message (finalize-state state)]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 60}} + [quo/system-message (finalize-state state)]])))