status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Mohsen 2023-10-02 16:28:35 +03:00 committed by GitHub
parent d8d8a6c7a0
commit ee85d6d596
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 134 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/quo2/core.cljs
View File

@ -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)

18
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -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

37
src/status_im2/contexts/quo_preview/profile/collectible.cljs
View File

@ -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")}]])))

66
src/status_im2/contexts/quo_preview/profile/profile_card.cljs
View File

@ -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]])))

36
src/status_im2/contexts/quo_preview/profile/select_profile.cljs
View File

@ -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? %)})]])))

20
src/status_im2/contexts/quo_preview/profile/showcase_nav.cljs
View File

@ -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 %)}]])))

31
src/status_im2/contexts/quo_preview/reactions/react.cljs
View File

@ -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]])))

17
src/status_im2/contexts/quo_preview/record_audio/record_audio.cljs
View File

@ -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]])))

55
src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs
View File

@ -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}])
[{:key :checked? :type :boolean}
{:key :blur? :type :boolean}
{: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}]]))
(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"]]))))

44
src/status_im2/contexts/quo_preview/selectors/filter.cljs
View File

@ -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]])))

36
src/status_im2/contexts/quo_preview/selectors/reactions.cljs
View File

@ -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}}])]])

52
src/status_im2/contexts/quo_preview/selectors/selectors.cljs
View File

@ -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]])))