From c42fc5153d9eaf8cd75aacde309d543298f71cb6 Mon Sep 17 00:00:00 2001 From: Mohsen Date: Mon, 23 Oct 2023 20:40:22 +0300 Subject: [PATCH] [#17288] refactor: migrate previews to new api (#17695) --- src/status_im2/contexts/quo_preview/main.cljs | 10 ++-- .../switcher/group_messaging_card.cljs | 49 +++++---------- .../quo_preview/switcher/switcher_cards.cljs | 60 +++++-------------- .../quo_preview/tabs/account_selector.cljs | 32 ++++------ .../quo_preview/tabs/segmented_tab.cljs | 58 ++++++++---------- .../contexts/quo_preview/tabs/tabs.cljs | 48 +++++++-------- .../text_combinations/preview.cljs | 40 ++++--------- 7 files changed, 103 insertions(+), 194 deletions(-) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index d6a4868244..64004722f4 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -408,13 +408,13 @@ :switchers [{:name :group-messaging-card :component group-messaging-card/view} {:name :switcher-cards - :component switcher-cards/preview-switcher-cards}] + :component switcher-cards/view}] :tabs [{:name :segmented - :component segmented/preview-segmented} + :component segmented/view} {:name :tabs - :component tabs/preview-tabs} + :component tabs/view} {:name :account-selector - :component account-selector/preview-this}] + :component account-selector/view}] :tags [{:name :context-tags :component context-tags/preview-context-tags} {:name :network-tags @@ -432,7 +432,7 @@ {:name :token-tag :component token-tag/preview-token-tag}] :text-combinations [{:name :text-combinations - :component text-combinations/preview}] + :component text-combinations/view}] :wallet [{:name :account-card :component account-card/preview-account-card} {:name :account-origin :component account-origin/view} {:name :account-overview diff --git a/src/status_im2/contexts/quo_preview/switcher/group_messaging_card.cljs b/src/status_im2/contexts/quo_preview/switcher/group_messaging_card.cljs index 7f204290ff..a9537b5567 100644 --- a/src/status_im2/contexts/quo_preview/switcher/group_messaging_card.cljs +++ b/src/status_im2/contexts/quo_preview/switcher/group_messaging_card.cljs @@ -6,46 +6,27 @@ [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Title" - :key :title - :type :text} - {:label "Status" - :key :status + [{:key :title :type :text} + {:key :status :type :select - :options [{:key :read - :value :read} - {:key :unread - :value :unread} - {:key :mention - :value :mention}]} - {:label "Counter Label" - :key :counter-label - :type :text} - {:label "Type" - :key :type + :options [{:key :read} + {:key :unread} + {:key :mention}]} + {:key :counter-label :type :text} + {:key :type :type :select :options [{:key :message :value :text} - {:key :photo - :value :photo} - {:key :sticker - :value :sticker} - {:key :gif - :value :gif} - {:key :audio - :value :audio} - {:key :community - :value :community} - {:key :link - :value :link} + {:key :photo} + {:key :sticker} + {:key :gif} + {:key :audio} + {:key :community} + {:key :link} {:key :code :value :code-snippet}]} - {:label "Last Message" - :key :last-message - :type :text} - {:label "Avatar:" - :key :avatar? - :type :boolean} + {:key :last-message :type :text} + {:key :avatar? :type :boolean} (preview/customization-color-option)]) ;; Mock data diff --git a/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs b/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs index d322cc47df..a50e88ba70 100644 --- a/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs +++ b/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs @@ -1,7 +1,6 @@ (ns status-im2.contexts.quo-preview.switcher.switcher-cards (:require [quo.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.common.resources :as resources] [status-im2.constants :as constants] @@ -10,8 +9,7 @@ [status-im2.contexts.shell.jump-to.constants :as shell.constants])) (def descriptor - [{:label "Type" - :key :type + [{:key :type :type :select :options [{:key shell.constants/communities-discover :value "Communities Discover"} @@ -33,27 +31,15 @@ :value "Wallet Graph"} {:key shell.constants/empty-card :value "Empty Card"}]} - {:label "Title" - :key :title - :type :text} - {:label "New Notifications?" - :key :new-notifications? - :type :boolean} - {:label "Banner?" - :key :banner? - :type :boolean} - {:label "Notification Indicator" - :key :notification-indicator + {:key :title :type :text} + {:key :new-notifications? :type :boolean} + {:key :banner? :type :boolean} + {:key :notification-indicator :type :select - :options [{:key :counter - :value :counter} - {:key :unread-dot - :value :unread-dot}]} - {:label "Counter Label" - :key :counter-label - :type :text} - {:label "Content Type" - :key :content-type + :options [{:key :counter} + {:key :unread-dot}]} + {:key :counter-label :type :text} + {:key :content-type :type :select :options [{:key constants/content-type-text :value :text} @@ -69,21 +55,10 @@ :value :community} {:key constants/content-type-link :value :link}]} - {:label "Last Message" - :key :last-message - :type :text} - {:label "Customization" - :key :customization-color - :type :select - :options - (map - (fn [c] - {:key c - :value c}) - (keys colors/customization))}]) + {:key :last-message :type :text} + (preview/customization-color-option)]) ;; Mocked Data - (def banner (resources/get-mock-image :community-banner)) (def sticker {:source (resources/get-mock-image :sticker)}) (def community-avatar {:source (resources/get-mock-image :community-logo)}) @@ -151,7 +126,7 @@ :else {}))) -(defn preview-switcher-cards +(defn view [] (let [state (reagent/atom {:type shell.constants/private-group-chat-card :title "Alisher Yakupov" @@ -165,10 +140,7 @@ :preview-label-color colors/white})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {:padding-vertical 60 - :align-items :center} - [switcher-cards/card (get-mock-data @state)]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 60}} + [switcher-cards/card (get-mock-data @state)]]))) diff --git a/src/status_im2/contexts/quo_preview/tabs/account_selector.cljs b/src/status_im2/contexts/quo_preview/tabs/account_selector.cljs index 25a51247ab..1377b7913b 100644 --- a/src/status_im2/contexts/quo_preview/tabs/account_selector.cljs +++ b/src/status_im2/contexts/quo_preview/tabs/account_selector.cljs @@ -1,23 +1,14 @@ (ns status-im2.contexts.quo-preview.tabs.account-selector (:require - [quo.components.tabs.account-selector :as quo] - [react-native.core :as rn] + [quo.core :as quo] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Show Label?:" - :key :show-label? - :type :boolean} - {:label "Transparent Background?:" - :key :transparent? - :type :boolean} - {:label "Account Text" - :key :account-text - :type :text} - {:label "Label Text" - :key :label-text - :type :text}]) + [{:key :show-label? :type :boolean} + {:key :transparent? :type :boolean} + {:key :account-text :type :text} + {:key :label-text :type :text}]) ;; keeping this unused data structure in the code for now ;; will reference them when I introduce multiple account support @@ -46,7 +37,7 @@ :account-emoji "🍟" :label-text "Label 3"}]) -(defn preview-this +(defn view [] (let [state (reagent/atom {:show-label? true :transparent? false @@ -56,10 +47,7 @@ :label-text "Label"})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {:padding-vertical 60 - :align-items :center} - [quo/account-selector @state]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 60}} + [quo/account-selector @state]]))) diff --git a/src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs b/src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs index c8d7000767..cf27684905 100644 --- a/src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs +++ b/src/status_im2/contexts/quo_preview/tabs/segmented_tab.cljs @@ -1,50 +1,44 @@ (ns status-im2.contexts.quo-preview.tabs.segmented-tab (:require - [quo.components.tabs.segmented-tab :as quo] - [quo.theme :as theme] + [quo.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 28 :value "28"} {:key 20 :value "20"}]} - {:label "Blur?" - :key :blur? - :type :boolean}]) + {:key :blur? + :type :boolean}]) -(defn preview-segmented +(defn view [] (let [state (reagent/atom {:size 32 :blur? false})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [preview/blur-view - {:show-blur-background? (:blur? @state) - :height 200 - :style {:width "100%"} - :blur-view-props {:blur-type (theme/get-theme)}} - [:<> - [quo/segmented-control - (merge @state - {:default-active 1 - :data [{:id 1 :label "Tab 1"} - {:id 2 :label "Tab 2"} - {:id 3 :label "Tab 3"} - {:id 4 :label "Tab 4"}] - :on-change #(println "Active tab" %)})] - [rn/view {:style {:padding-top 24}} - [quo/segmented-control - (merge @state - {:default-active 1 - :data [{:id 1 :label "Tab 1"} - {:id 2 :label "Tab 2"}] - :on-change #(println "Active tab" %)})]]]]]]))) + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true + :component-container-style {:padding-vertical 60}} + [:<> + [quo/segmented-control + (assoc @state + :default-active 1 + :data [{:id 1 :label "Tab 1"} + {:id 2 :label "Tab 2"} + {:id 3 :label "Tab 3"} + {:id 4 :label "Tab 4"}] + :on-change #(println "Active tab" %))] + [rn/view {:style {:padding-top 24}} + [quo/segmented-control + (assoc @state + :default-active 1 + :data [{:id 1 :label "Tab 1"} + {:id 2 :label "Tab 2"}] + :on-change #(println "Active tab" %))]]]]))) diff --git a/src/status_im2/contexts/quo_preview/tabs/tabs.cljs b/src/status_im2/contexts/quo_preview/tabs/tabs.cljs index 83588735cf..b346f08ee8 100644 --- a/src/status_im2/contexts/quo_preview/tabs/tabs.cljs +++ b/src/status_im2/contexts/quo_preview/tabs/tabs.cljs @@ -1,24 +1,18 @@ (ns status-im2.contexts.quo-preview.tabs.tabs (:require [quo.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 32 :value "32"} {:key 24 :value "24"}]} - {:label "Show unread indicators?" - :key :unread-indicators? - :type :boolean} - {:label "Scrollable:" - :key :scrollable? - :type :boolean}]) + {:key :unread-indicators? :type :boolean} + {:key :scrollable? :type :boolean}]) (defn generate-tab-items [length unread-indicators?] @@ -28,27 +22,25 @@ :label (str "Tab " (inc index)) :notification-dot? (and unread-indicators? (zero? (rem index 2)))})) -(defn preview-tabs +(defn view [] (let [state (reagent/atom {:size 32 :scrollable? false})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {:padding-vertical 60 - :padding-horizontal 20 - :flex-direction :row - :justify-content :center} - [quo/tabs - (merge @state - {:default-active 1 - :data (generate-tab-items (if (:scrollable? @state) 15 4) - (:unread-indicators? @state)) - :on-change #(println "Active tab" %)} - (when (:scrollable? @state) - {:scroll-on-press? true - :fade-end-percentage 0.4 - :fade-end? true}))]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 60 + :padding-horizontal 20 + :flex-direction :row + :justify-content :center}} + [quo/tabs + (merge @state + {:default-active 1 + :data (generate-tab-items (if (:scrollable? @state) 15 4) + (:unread-indicators? @state)) + :on-change #(println "Active tab" %)} + (when (:scrollable? @state) + {:scroll-on-press? true + :fade-end-percentage 0.4 + :fade-end? true}))]]))) diff --git a/src/status_im2/contexts/quo_preview/text_combinations/preview.cljs b/src/status_im2/contexts/quo_preview/text_combinations/preview.cljs index ef997dcc80..3288ad12a6 100644 --- a/src/status_im2/contexts/quo_preview/text_combinations/preview.cljs +++ b/src/status_im2/contexts/quo_preview/text_combinations/preview.cljs @@ -1,28 +1,15 @@ (ns status-im2.contexts.quo-preview.text-combinations.preview (:require - [quo.components.text-combinations.view :as quo] - [react-native.core :as rn] + [quo.core :as quo] [reagent.core :as reagent] [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Title" - :key :title - :type :text} - {:label :avatar - :key :avatar - :type :boolean} - {:label "Description type:" - :key :description - :type :select - :options [{:key :none - :value nil} - {:key :description - :value :description}]} - {:label "Description text" - :key :description-props - :type :text}]) + [{:key :title :type :text} + {:key :avatar :type :boolean} + {:key :description + :type :text}]) (defn state->text-combinations-props [state] @@ -30,20 +17,15 @@ (assoc state :avatar (resources/get-mock-image :user-picture-male4)) state)) -(defn preview +(defn view [] (let [state (reagent/atom {:title "Title" :title-accessibility-label :title - :description nil - :description-props "" + :description "" :description-accessibility-label :subtitle})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {:padding-vertical 60 - :align-items :center} - [quo/view - (state->text-combinations-props @state)]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 60}} + [quo/text-combinations (state->text-combinations-props @state)]])))