From ee85d6d596024fa00fcfbf98e3fd4ff7c6d4716a Mon Sep 17 00:00:00 2001 From: Mohsen Date: Mon, 2 Oct 2023 16:28:35 +0300 Subject: [PATCH] [#17288] refactor: migrate previews to new api (#17470) --- src/quo2/core.cljs | 5 ++ src/status_im2/contexts/quo_preview/main.cljs | 18 ++--- .../quo_preview/profile/collectible.cljs | 37 ++++------- .../quo_preview/profile/profile_card.cljs | 66 +++++-------------- .../quo_preview/profile/select_profile.cljs | 36 +++------- .../quo_preview/profile/showcase_nav.cljs | 20 +++--- .../contexts/quo_preview/reactions/react.cljs | 31 ++++----- .../record_audio/record_audio.cljs | 17 ++--- .../quo_preview/selectors/disclaimer.cljs | 55 +++++----------- .../quo_preview/selectors/filter.cljs | 44 +++---------- .../quo_preview/selectors/reactions.cljs | 36 ++++------ .../quo_preview/selectors/selectors.cljs | 52 +++++---------- 12 files changed, 134 insertions(+), 283 deletions(-) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index c554b1e22aa..56918a3fb14 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index a8d9d6e49ea..d72ba895500 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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 diff --git a/src/status_im2/contexts/quo_preview/profile/collectible.cljs b/src/status_im2/contexts/quo_preview/profile/collectible.cljs index 8ec4d8e55e6..b75d2b36752 100644 --- a/src/status_im2/contexts/quo_preview/profile/collectible.cljs +++ b/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] - [react-native.core :as rn] + [quo2.core :as quo] [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))))} - {:label "Random order of images" - :key :shuffle-images - :type :boolean}]) + (range 1 (inc (count test-images))))}]) -(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 - (:shuffle-images @state) - (shuffle) - :always - (take (:num-images @state)))] - [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view - {:padding-vertical 100 - :align-items :center} - [quo/collectible - {:images images-to-show - :on-press #(js/alert "Pressed")}]]])))) + [preview/preview-container + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 20 + :align-items :center}} + [quo/collectible + {:images (repeat (:num-images @state) test-image) + :on-press #(js/alert "Pressed")}]]))) diff --git a/src/status_im2/contexts/quo_preview/profile/profile_card.cljs b/src/status_im2/contexts/quo_preview/profile/profile_card.cljs index 0f5b60abdfc..8b15859c1af 100644 --- a/src/status_im2/contexts/quo_preview/profile/profile_card.cljs +++ b/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] - [react-native.core :as rn] - [reagent.core :as reagent] + (:require [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} - {:label "Show: Emoji hash?" - :key :show-emoji-hash? - :type :boolean} - {:label "Show: User hash?" - :key :show-user-hash? - :type :boolean} - {:label "Show: Options Button?" - :key :show-options-button? - :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}]) + [{:key :keycard-account? :type :boolean} + {:key :show-emoji-hash? :type :boolean} + {:key :show-user-hash? :type :boolean} + {:key :show-options-button? :type :boolean} + {:key :show-logged-in? :type :boolean} + {:key :login-card? :type :boolean} + {:key :last-item? :type :boolean} + {:key :name :type :text} + {:key :hash :type :text} + {:key :emoji-hash :type :text} + (preview/customization-color-option)]) -(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 - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo/profile-card @state]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-bottom 50}} + [quo/profile-card @state]]))) diff --git a/src/status_im2/contexts/quo_preview/profile/select_profile.cljs b/src/status_im2/contexts/quo_preview/profile/select_profile.cljs index 71c349e75c5..4602bb75200 100644 --- a/src/status_im2/contexts/quo_preview/profile/select_profile.cljs +++ b/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] - [react-native.core :as rn] - [reagent.core :as reagent] + (:require [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" - :key :customization-color - :type :select - :options (map (fn [color] - {:key color - :value color}) - (keys colors/customization))} - {:label "Name" - :key :name - :type :text} - {:label "Selected" - :key :selected? - :type :boolean}]) + [(preview/customization-color-option) + {:key :name :type :text} + {: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 - :descriptor descriptor} - [rn/view {:padding-bottom 150} - [rn/view - {: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? %)})]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding 20}} + [quo/select-profile (merge @state {:on-change #(reset! selected? %)})]]))) diff --git a/src/status_im2/contexts/quo_preview/profile/showcase_nav.cljs b/src/status_im2/contexts/quo_preview/profile/showcase_nav.cljs index 4b609e59831..0453b906ab0 100644 --- a/src/status_im2/contexts/quo_preview/profile/showcase_nav.cljs +++ b/src/status_im2/contexts/quo_preview/profile/showcase_nav.cljs @@ -12,20 +12,17 @@ :id index})))) (def descriptor - [{:type :number - :key :previews-length} + [{:type :number :key :previews-length} {:type :select :key :state - :options [{:key :default - :value "default"} - {:key :scroll - :value "scroll"}]}]) + :options [{:key :default} + {:key :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 - :active-id @active-id - :data (take (or @previews-length 1) nav-data) - :on-press #(swap! state assoc :active-id %)}]]))) + {:state @component-state + :active-id @active-id + :data (take (or @previews-length 1) nav-data) + :on-press #(swap! state assoc :active-id %)}]]))) diff --git a/src/status_im2/contexts/quo_preview/reactions/react.cljs b/src/status_im2/contexts/quo_preview/reactions/react.cljs index 09464526da5..5071bbb4c75 100644 --- a/src/status_im2/contexts/quo_preview/reactions/react.cljs +++ b/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 - :descriptor descriptor} - [rn/view - {:padding-bottom 150 - :align-items :center} - [rn/view - {:width 100 - :padding-vertical 60 - :justify-content :space-evenly - :flex-direction :row - :align-items :center} - [quo/reaction @state] - [quo/add-reaction]]]]))) + {:state state + :descriptor descriptor + :component-container-style {:padding-bottom 50 + :flex-direction :row + :align-items :center + :justify-content :center}} + [quo/reaction @state] + [quo/add-reaction]]))) diff --git a/src/status_im2/contexts/quo_preview/record_audio/record_audio.cljs b/src/status_im2/contexts/quo_preview/record_audio/record_audio.cljs index 798f334df7c..fe5de47d3e8 100644 --- a/src/status_im2/contexts/quo_preview/record_audio/record_audio.cljs +++ b/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] - [quo2.core :as quo] + (:require [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 - :background-color :transparent - :flex-direction :row} - [record-audio/record-audio + {:align-items :center + :justify-content :center} + [quo/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]]))) diff --git a/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs b/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs index 0c594c20f98..50ed7aa0c45 100644 --- a/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs +++ b/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} - {:label "Blur (only for dark theme):" - :key :blur? - :type :boolean} - {:label "Text" - :key :text - :type :text}]) - -(defn blur-background - [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}]])) + [{:key :checked? :type :boolean} + {:key :blur? :type :boolean} + {:key :text :type :text}]) -(defn preview-disclaimer +(defn view [] (let [state (reagent/atom {:checked? false :blur? true @@ -37,15 +17,16 @@ (fn [] (let [{:keys [blur? checked? text]} @state] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view {:style {:padding-horizontal 15}} - [blur-background blur?] - [rn/view {:style {:margin-vertical 50}} - [quo/disclaimer - {:blur? blur? - :checked? checked? - :on-change #(swap! state update :checked? not)} - text]] - [quo/button {:disabled? (not checked?)} - "submit"]]])))) + {:state state + :descriptor descriptor + :blur? blur? + :show-blur-background? true + :component-container-style {:padding 20}} + [rn/view {:style {:margin-bottom 20}} + [quo/disclaimer + {:blur? blur? + :checked? checked? + :on-change #(swap! state update :checked? not)} + text]] + [quo/button {:disabled? (not checked?)} + "submit"]])))) diff --git a/src/status_im2/contexts/quo_preview/selectors/filter.cljs b/src/status_im2/contexts/quo_preview/selectors/filter.cljs index 45ea95e4fb6..98a172a5505 100644 --- a/src/status_im2/contexts/quo_preview/selectors/filter.cljs +++ b/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] - [quo2.foundations.colors :as colors] - [quo2.theme :as theme] - [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 "Theme" - :key :override-theme - :type :select - :options [{:key :dark - :value "Dark"} - {:key :light - :value "Light"}]} - {:label "Blur?" - :key :blur? - :type :boolean}]) + [{:key :blur? :type :boolean}]) -(defn preview +(defn view [] - (let [state (reagent/atom {:override-theme (theme/get-theme) - :blur? false})] + (let [state (reagent/atom {:blur? false})] (fn [] [preview/preview-container - {:state state - :descriptor descriptor} - [rn/view - {:style {:padding-vertical 60 - :align-items :center}} - [rn/view - {: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]]]]))) + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true + :component-container-style {:align-items :center}} + [quo/filter @state]]))) diff --git a/src/status_im2/contexts/quo_preview/selectors/reactions.cljs b/src/status_im2/contexts/quo_preview/selectors/reactions.cljs index 552f27d7a5d..241b4b98661 100644 --- a/src/status_im2/contexts/quo_preview/selectors/reactions.cljs +++ b/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 - [rn/view {:style {:margin-vertical 24}} - (into [rn/view - {:style {:flex 1 - :margin-top 200 - :flex-direction :row - :justify-content :center - :align-items :center}}] - (for [emoji (vals constants/reactions)] - ^{:key emoji} - [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}]]) + [preview/preview-container + {:component-container-style {:flex 1 + :padding-top 20 + :flex-direction :row + :justify-content :center + :align-items :center}} + [rn/view {:flex-direction :row} + (for [emoji (vals constants/reactions)] + ^{:key emoji} + [quo/reactions emoji {:container-style {:margin-right 5}}])]]) diff --git a/src/status_im2/contexts/quo_preview/selectors/selectors.cljs b/src/status_im2/contexts/quo_preview/selectors/selectors.cljs index bad5755e460..00870a37063 100644 --- a/src/status_im2/contexts/quo_preview/selectors/selectors.cljs +++ b/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] - [quo2.components.selectors.selectors.view :as quo2] - [quo2.foundations.colors :as colors] + (: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 "Disabled" - :key :disabled? - :type :boolean} - {: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)}]) + [{:key :disabled? :type :boolean} + {:key :blur? :type :boolean} + (preview/customization-color-option)]) (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 - :descriptor descriptor} - [rn/view {:style {:margin-vertical 24}} - [preview/blur-view - {:style {:width "100%" - :align-items :center - :top (if (:blur? @state) 32 16) - :position (if (:blur? @state) - :absolute - :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]]]]]))) + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true + :blur-height 300} + [selector-preview "Toggle" quo/toggle @state] + [selector-preview "Radio" quo/radio @state] + [selector-preview "Checkbox" quo/checkbox @state] + [selector-preview "Checkbox Prefill" quo/checkbox-prefill @state]])))