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

DRY up preview screens (#17095) 

Migrate 47 out of ~90 preview screens to use the new capabilities found in quo-preview.preview.
This commit is contained in:
Icaro Motta 2023-08-23 20:56:34 +00:00 committed by GitHub
parent 0552713143
commit 17df7a0d35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
53 changed files with 990 additions and 2236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs
View File

@ -1,20 +1,14 @@
(ns status-im2.contexts.quo-preview.avatars.account-avatar (ns status-im2.contexts.quo-preview.avatars.account-avatar
(:require [quo2.components.avatars.account-avatar.view :as account-avatar] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Type" [{:key :type
:key :type
:type :select :type :select
:options [{:key :default :options [{:key :default}
:value "default"} {:key :watch-only}]}
{:key :watch-only {:key :size
:value "watch only"}]}
{:label "Size"
:key :size
:type :select :type :select
:options [{:key 16 :options [{:key 16
:value "16"} :value "16"}
@ -35,29 +29,12 @@
:type :text} :type :text}
(preview/customization-color-option)]) (preview/customization-color-option)])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:customization-color :purple (let [state (reagent/atom {:customization-color :purple
:size 80 :size 80
:emoji "🍑" :emoji "🍑"
:type :default})] :type :default})]
(fn [] (fn []
[rn/view [preview/preview-container {:state state :descriptor descriptor}
{:style {:margin-bottom 50 [quo/account-avatar @state]])))
:padding 16}}
[preview/customizer state descriptor]
[rn/view
{:style {:padding-vertical 60
:align-items :center}}
[account-avatar/view @state]]])))
(defn preview-account-avatar
[]
[rn/view
{:style {:flex 1
:background-color (colors/theme-colors colors/white colors/neutral-95)}}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

58
src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs
View File

@ -1,34 +1,26 @@
(ns status-im2.contexts.quo-preview.avatars.channel-avatar (ns status-im2.contexts.quo-preview.avatars.channel-avatar
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Size:" [{:key :size
:key :size
:type :select :type :select
:options [{:key :size/l :value "Large"} :options [{:key :size/l :value "Large"}
{:key :default :value "Default"}]} {:key :default}]}
{:label "Emoji:" {:key :emoji
:key :emoji :type :text}
:type :text} {:key :full-name
{:label "Full name:" :type :text}
:key :full-name
:type :text}
(preview/customization-color-option) (preview/customization-color-option)
{:label "Locked state:" {:key :locked-state
:key :locked-state
:type :select :type :select
:options [{:key :not-set :options [{:key :not-set}
:value "Not set"} {:key :unlocked}
{:key :unlocked {:key :locked}]}])
:value "Unlocked"}
{:key :locked
:value "Locked"}]}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:size :size/l (let [state (reagent/atom {:size :size/l
:locked-state :not-set :locked-state :not-set
@ -42,26 +34,8 @@
:unlocked false :unlocked false
:locked true :locked true
nil)] nil)]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:style {:padding-bottom 150}} [quo/channel-avatar
[rn/view {:style {:flex 1}} (assoc @state
[preview/customizer state descriptor]] :locked? locked?
[rn/view :customization-color customization-color)]]))))
{:style {:padding-vertical 60
:flex-direction :row
:justify-content :center}}
[quo/channel-avatar
(assoc @state
:locked? locked?
:customization-color customization-color)]]]]))))
(defn preview-channel-avatar
[]
[rn/view
{:style {: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}]])

42
src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs
View File

@ -1,14 +1,11 @@
(ns status-im2.contexts.quo-preview.avatars.group-avatar (ns status-im2.contexts.quo-preview.avatars.group-avatar
(:require [quo2.core :as quo2] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Size" [{:key :size
:key :size
:type :select :type :select
:options [{:key :size/s-20 :options [{:key :size/s-20
:value "20"} :value "20"}
@ -20,40 +17,21 @@
:value "48"} :value "48"}
{:key :size/s-80 {:key :size/s-80
:value "80"}]} :value "80"}]}
{:label "Avatar" {:label "Avatar:"
:key :picture? :key :picture?
:type :boolean} :type :boolean}
(preview/customization-color-option)]) (preview/customization-color-option)])
(def avatar (resources/get-mock-image :photo1)) (def avatar (resources/get-mock-image :photo1))
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:theme :light (let [state (reagent/atom {:customization-color :blue
:customization-color :blue
:size :size/s-20 :size :size/s-20
:picture? false})] :picture? false})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:style {:padding-bottom 150}} [quo/group-avatar
[rn/view {:style {:flex 1}} (cond-> @state
[preview/customizer state descriptor]] (:picture? @state)
[rn/view (assoc :picture avatar))]])))
{:style {:padding-vertical 60
:flex-direction :row
:justify-content :center}}
(let [{:keys [picture?]} @state
params (if picture? (assoc @state :picture avatar) @state)]
[quo2/group-avatar params])]]])))
(defn preview-group-avatar
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white
colors/neutral-90)
:flex 1}}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

60
src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs
View File

@ -1,59 +1,27 @@
(ns status-im2.contexts.quo-preview.avatars.icon-avatar (ns status-im2.contexts.quo-preview.avatars.icon-avatar
(:require [quo2.components.avatars.icon-avatar :as quo2] (:require [quo2.components.avatars.icon-avatar :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Size" [{:key :size
:key :size
:type :select :type :select
:options [{:key :small :options [{:key :small}
:value "Small"} {:key :medium}
{:key :medium {:key :big}]}
:value "Medium"} {:key :icon
{:key :big
:value "Big"}]}
{:label "Icon"
:key :icon
:type :select :type :select
:options [{:key :main-icons/placeholder20 :options [{:key :i/placeholder20
:value "Placeholder"} :value "Placeholder"}
{:key :main-icons/wallet {:key :i/wallet}
:value "Wallet"} {:key :i/play}]}
{:key :main-icons/play (preview/customization-color-option {:key :color})])
:value "Play"}]}
{:label "Color"
:key :color
:type :select
:options (map
(fn [c]
{:key c
:value c})
(keys colors/customization))}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:size :big (let [state (reagent/atom {:size :big
:icon :main-icons/placeholder20 :icon :i/placeholder20
:color :primary})] :color :primary})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/icon-avatar @state]])))
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[quo2/icon-avatar @state]]]])))
(defn preview-icon-avatar
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

75
src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs
View File

@ -1,48 +1,29 @@
(ns status-im2.contexts.quo-preview.avatars.user-avatar (ns status-im2.contexts.quo-preview.avatars.user-avatar
(:require [quo2.components.avatars.user-avatar.view :as quo2] (:require [quo2.components.avatars.user-avatar.view :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Size:" [{:key :size
:key :size
:type :select :type :select
:options [{:key :big :options [{:key :big}
:value "Big"} {:key :medium}
{:key :medium {:key :small}
:value "Medium"} {:key :xs}
{:key :small {:key :xxs}
:value "Small"} {:key :xxxs}]}
{:key :xs (preview/customization-color-option)
:value "x Small"} {:key :online?
{:key :xxs :type :boolean}
:value "xx Small"} {:key :status-indicator?
{:key :xxxs :type :boolean}
:value "xxx Small"}]}
{:label "Customization color:"
:key :customization-color
:type :select
:options (map (fn [[color-kw _]]
{:key color-kw
:value (name color-kw)})
colors/customization)}
{:label "Online status"
:key :online?
:type :boolean}
{:label "Status Indicator"
:key :status-indicator?
:type :boolean}
{:label "Identicon Ring (applies only when there's no profile picture)" {:label "Identicon Ring (applies only when there's no profile picture)"
:key :ring? :key :ring?
:type :boolean} :type :boolean}
{:label "Full name separated by space" {:key :full-name
:key :full-name :type :text}
:type :text} {:key :profile-picture
{:label "Profile Picture"
:key :profile-picture
:type :select :type :select
:options [{:value "None" :options [{:value "None"
:key nil} :key nil}
@ -51,7 +32,7 @@
{:value "pedro.eth" {:value "pedro.eth"
:key (resources/get-mock-image :user-picture-male4)}]}]) :key (resources/get-mock-image :user-picture-male4)}]}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:full-name "A Y" (let [state (reagent/atom {:full-name "A Y"
:status-indicator? true :status-indicator? true
@ -59,23 +40,5 @@
:size :medium :size :medium
:customization-color :blue})] :customization-color :blue})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/user-avatar @state]])))
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/user-avatar @state]]]])))
(defn preview-user-avatar
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

45
src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs
View File

@ -1,7 +1,5 @@
(ns status-im2.contexts.quo-preview.avatars.wallet-user-avatar (ns status-im2.contexts.quo-preview.avatars.wallet-user-avatar
(:require [quo2.components.avatars.wallet-user-avatar :as quo2] (:require [quo2.components.avatars.wallet-user-avatar :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
@ -12,46 +10,21 @@
{:label "Last name" {:label "Last name"
:key :l-name :key :l-name
:type :text} :type :text}
{:label "Size" {:key :size
:key :size
:type :select :type :select
:options [{:key :small :options [{:key :small}
:value "Small"} {:key :medium}
{:key :medium {:key :large}
:value "Medium"}
{:key :large
:value "Large"}
{:key :x-large {:key :x-large
:value "X Large"}]} :value "X Large"}]}
{:label "Color" (preview/customization-color-option {:key :color})])
:key :color
:type :select
:options (map
(fn [c]
{:key c
:value c})
(keys colors/customization))}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:first-name "empty" (let [state (reagent/atom {:first-name "empty"
:last-name "name" :last-name "name"
:size :x-large :size :x-large
:color :indigo})] :color :indigo})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/wallet-user-avatar @state]])))
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[quo2/wallet-user-avatar @state]]]])))
(defn preview-wallet-user-avatar
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

52
src/status_im2/contexts/quo_preview/banners/banner.cljs
View File

@ -1,46 +1,22 @@
(ns status-im2.contexts.quo-preview.banners.banner (ns status-im2.contexts.quo-preview.banners.banner
(:require [quo2.core :as quo2] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "message" [{:key :latest-pin-text
:key :latest-pin-text :type :text}
:type :text} {:key :pins-count
{:label "number of messages" :type :text}
:key :pins-count {:key :hide-pin?
:type :text} :type :boolean}])
{:label "hide pin icon?"
:key :hide-pin?
:type :boolean}
])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom (let [state (reagent/atom {:hide-pin? false
{:hide-pin? false :pins-count 2
:pins-count 2 :latest-pin-text
:latest-pin-text "Be respectful of fellow community members, even if they"})] "Be respectful of fellow community members, even if they"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/banner @state]])))
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/banner @state]]]])))
(defn preview-banner
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

64
src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs
View File

@ -1,64 +0,0 @@
(ns status-im2.contexts.quo-preview.bottom-sheet.bottom-sheet
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[re-frame.core :as re-frame]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Show handle:"
:key :show-handle?
:type :boolean}
{:label "Backdrop dismiss:"
:key :backdrop-dismiss?
:type :boolean}
{:label "Expendable:"
:key :expandable?
:type :boolean}
{:label "Disable drag:"
:key :disable-drag?
:type :boolean}])
(defn bottom-sheet-content
[]
[rn/view
{:style {:justify-content :center
:align-items :center}}
[quo/button {:on-press #(do (re-frame/dispatch [:hide-bottom-sheet]))} "Close bottom sheet"]
[quo/text {:style {:padding-top 20}} "Hello world!"]])
(defn cool-preview
[]
(let [state (reagent/atom {:show-handle? true
:backdrop-dismiss? true
:expandable? true
:disable-drag? false})
on-bottom-sheet-open (fn []
(re-frame/dispatch [:show-bottom-sheet
(merge
{:content bottom-sheet-content}
@state)]))]
(fn []
[rn/view
{:style {:margin-bottom 50
:padding 16}}
[preview/customizer state descriptor]
[:<>
[rn/view
{:style {:align-items :center
:padding 16}}
[quo/button {:on-press on-bottom-sheet-open} "Open bottom sheet"]]]])))
(defn preview-bottom-sheet
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

155
src/status_im2/contexts/quo_preview/buttons/button.cljs
View File

@ -1,33 +1,22 @@
(ns status-im2.contexts.quo-preview.buttons.button (ns status-im2.contexts.quo-preview.buttons.button
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview] [status-im2.common.resources :as resources]
[status-im2.common.resources :as resources])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Type:" [{:key :type
:key :type
:type :select :type :select
:options [{:key :primary :options [{:key :primary}
:value "Primary"} {:key :positive}
{:key :positive {:key :grey}
:value "Positive"} {:key :dark-grey}
{:key :grey {:key :outline}
:value "Grey"} {:key :ghost}
{:key :dark-grey {:key :danger}
:value "Dark Grey"} {:key :black}]}
{:key :outline {:key :size
:value "Outline"}
{:key :ghost
:value "Ghost"}
{:key :danger
:value "Danger"}
{:key :black
:value "Black"}]}
{:label "Size:"
:key :size
:type :select :type :select
:options [{:key 56 :options [{:key 56
:value "56"} :value "56"}
@ -37,40 +26,25 @@
:value "32"} :value "32"}
{:key 24 {:key 24
:value "24"}]} :value "24"}]}
{:label "Background:" {:key :background
:key :background
:type :select :type :select
:options [{:key :blur :options [{:key :blur}
:value "Blur"} {:key :photo}]}
{:key :photo {:key :icon-only?
:value "Photo"}]} :type :boolean}
{:label "Icon Only?:" {:key :icon-top
:key :icon-only? :type :boolean}
:type :boolean} {:key :icon-right
{:label "show icon-top " :type :boolean}
:key :icon-top {:key :icon-left
:type :boolean} :type :boolean}
{:label "show icon-right" {:key :disabled?
:key :icon-right :type :boolean}
:type :boolean} {:key :label
{:label "show icon-left" :type :text}
:key :icon-left (preview/customization-color-option)])
:type :boolean}
{:label "Disabled?:"
:key :disabled?
:type :boolean}
{:label "Label"
:key :label
:type :text}
{:label "Customization color:"
:key :customization-color
:type :select
:options (map (fn [color]
(let [k (get color :name)]
{:key k :value k}))
(quo/picker-colors))}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:label "Press Me" (let [state (reagent/atom {:label "Press Me"
:size 40 :size 40
@ -82,46 +56,31 @@
icon-top (reagent/cursor state [:icon-top]) icon-top (reagent/cursor state [:icon-top])
icon-only? (reagent/cursor state [:icon-only?])] icon-only? (reagent/cursor state [:icon-only?])]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:padding-bottom 150} {:state state
[rn/view {:flex 1} :descriptor descriptor
[preview/customizer state descriptor]] :component-container-style {:align-items :center}}
[rn/view (when (= :photo (:background @state))
{:padding-vertical 60 [rn/image
:flex-direction :row {:source (resources/get-mock-image :community-cover)
:justify-content :center} :style {:position :absolute
(when (= :photo (:background @state)) :top 0
[rn/image :left 0
{:source (resources/get-mock-image :community-cover) :right 0
:style {:position :absolute :bottom 0}}])
:top 0 [quo/button
:left 0 (merge (dissoc @state
:right 0 :theme
:bottom 0}}]) :customization-color
[quo/button :icon-left
(merge (dissoc @state :icon-right)
:theme {:background (:background @state)
:customization-color :on-press #(println "Hello world!")}
:icon-left (when (= :primary (:type @state)) {:customization-color (:customization-color @state)})
:icon-right) (when @icon-top
{:background (:background @state) {:icon-top :i/placeholder})
:on-press #(println "Hello world!")} (when @icon-left
(when (= :primary (:type @state)) {:customization-color (:customization-color @state)}) {:icon-left :i/placeholder})
(when @icon-top (when @icon-right
{:icon-top :i/placeholder}) {:icon-right :i/placeholder}))
(when @icon-left (if @icon-only? :i/placeholder @label)]])))
{:icon-left :i/placeholder})
(when @icon-right
{:icon-right :i/placeholder}))
(if @icon-only? :i/placeholder @label)]]]])))
(defn preview-button
[]
[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}]])

51
src/status_im2/contexts/quo_preview/buttons/composer_button.cljs
View File

@ -1,49 +1,24 @@
(ns status-im2.contexts.quo-preview.buttons.composer-button (ns status-im2.contexts.quo-preview.buttons.composer-button
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[quo2.theme :as quo2.theme]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview] [status-im2.contexts.quo-preview.preview :as preview]))
[status-im2.common.resources :as resources]))
(def descriptor (def descriptor
[{:label "Blur?:" [{:key :blur?
:key :blur? :type :boolean}
:type :boolean} {:key :disabled?
{:label "Disabled?:" :type :boolean}])
:key :disabled?
:type :boolean}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:icon :i/placeholder (let [state (reagent/atom {:icon :i/placeholder
:blur? false
:on-press #(js/alert "pressed") :on-press #(js/alert "pressed")
:on-long-press #(js/alert "long pressed")})] :on-long-press #(js/alert "long pressed")})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:flex 1 :padding-bottom 20} {:state state
[rn/view {:height 200} :descriptor descriptor
[preview/customizer state descriptor]] :blur? (:blur? @state)
[rn/view :show-blur-background? true}
{:flex 1 [quo/composer-button @state]])))
:align-items :center
:justify-content :center}
(when (:blur? @state)
[rn/image
{:source (if (= :light (quo2.theme/get-theme))
(resources/get-mock-image :community-cover)
(resources/get-mock-image :dark-blur-bg))
:style {:position :absolute
:top 200
:left 0
:right 0
:bottom 0}}])
[quo/composer-button @state]]]])))
(defn preview-composer-button
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}
[cool-preview]])

60
src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs
View File

@ -1,55 +1,31 @@
(ns status-im2.contexts.quo-preview.buttons.dynamic-button (ns status-im2.contexts.quo-preview.buttons.dynamic-button
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [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 (def descriptor
[{:label "Type:" [{:key :type
:key :type
:type :select :type :select
:options [{:key :jump-to :options [{:key :jump-to}
:value "Jump To"} {:key :mention}
{:key :mention {:key :notification-down}
:value "Mention"} {:key :notification-up}
{:key :notification-down {:key :search}
:value "Notification Down"} {:key :search-with-label}
{:key :notification-up {:key :scroll-to-bottom}]}
:value "Notification Up"} {:key :count
{:key :search :type :text}])
:value "Search"}
{:key :search-with-label
:value "Search With Label"}
{:key :scroll-to-bottom
:value "Bottom"}]}
{:label "Count"
:key :count
:type :text}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:count "5" (let [state (reagent/atom {:count "5"
:type :jump-to :type :jump-to
:labels {:jump-to (i18n/label :t/jump-to) :labels {:jump-to (i18n/label :t/jump-to)
:search-with-label (i18n/label :t/back)}})] :search-with-label (i18n/label :t/back)}})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:padding-bottom 150} {:state state
[preview/customizer state descriptor] :descriptor descriptor
[rn/view :component-container-style {:align-items :center}}
{:padding-vertical 60 [quo/dynamic-button @state]])))
:align-items :center}
[quo/dynamic-button @state]]]])))
(defn preview-dynamic-button
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

69
src/status_im2/contexts/quo_preview/buttons/predictive_keyboard.cljs
View File

@ -1,59 +1,34 @@
(ns status-im2.contexts.quo-preview.buttons.predictive-keyboard (ns status-im2.contexts.quo-preview.buttons.predictive-keyboard
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.blur :as blur]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Type" [{:key :type
:key :type
:type :select :type :select
:options [{:key :error :value "Error"} :options [{:key :error}
{:key :empty :value "Empty"} {:key :empty}
{:key :info :value "Info"} {:key :info}
{:key :words :value "Words"}]} {:key :words}]}
{:label "Text" {:key :text
:key :text :type :text}
:type :text} {:key :blur?
{:label "Blur" :type :boolean}])
:key :blur?
:type :boolean}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:type :info :text "Enter 12, 18 or 24 words separated by a space"}) (let [state (reagent/atom {:type :info
:text "Enter 12, 18 or 24 words separated by a space"})
blur? (reagent/cursor state [:blur?])] blur? (reagent/cursor state [:blur?])]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:padding-bottom 150} {:state state
[preview/customizer state descriptor] :descriptor descriptor
[rn/view :blur? @blur?
(when @blur? :blur-container-style {:background-color colors/neutral-80-opa-70}
[blur/view :blur-view-props {:overlay-color :transparent}}
{:style {:position :absolute [quo/predictive-keyboard
:left 0 (merge @state
:right 0 {:words ["label" "label" "labor" "ladder" "lady" "lake"]
:top 0 :on-press #(js/alert (str "Pressed: " %))})]])))
:bottom 0
:background-color colors/neutral-80-opa-70}
:overlay-color :transparent}])
[rn/view {:padding-vertical 60 :align-items :center}
[quo/predictive-keyboard
(merge @state
{:words ["label" "label" "labor" "ladder" "lady" "lake"]
:on-press #(js/alert (str "Pressed: " %))})]]]]])))
(defn preview-predictive-keyboard
[]
[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}]])

74
src/status_im2/contexts/quo_preview/buttons/slide_button.cljs
View File

@ -1,30 +1,18 @@
(ns status-im2.contexts.quo-preview.buttons.slide-button (ns status-im2.contexts.quo-preview.buttons.slide-button
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Size:" [{:key :size
:key :size
:type :select :type :select
:options [{:key :large :options [{:key :large}
:value "Large"} {:key :small}]}
{:key :small {:key :disabled?
:value "Small"}]} :type :boolean}
{:label "Disabled:" (preview/customization-color-option {:key :color})])
:key :disabled?
:type :boolean}
{:label "Custom Color"
:key :color
:type :select
:options (map (fn [color]
(let [k (get color :name)]
{:key k :value k}))
(quo/picker-colors))}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:disabled? false (let [state (reagent/atom {:disabled? false
:color :blue :color :blue
@ -34,34 +22,20 @@
size (reagent/cursor state [:size]) size (reagent/cursor state [:size])
complete? (reagent/atom false)] complete? (reagent/atom false)]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:padding-bottom 150} {:state state
[preview/customizer state descriptor] :descriptor descriptor
[rn/view :component-container-style {:align-items :center}}
{:padding-vertical 60 (if (not @complete?)
:padding-horizontal 40 [quo/slide-button
:align-items :center} {:track-text "We gotta slide"
(if (not @complete?) :track-icon :face-id
[quo/slide-button :customization-color @color
{:track-text "We gotta slide" :size @size
:track-icon :face-id :disabled? @disabled?
:customization-color @color :on-complete (fn []
:size @size (js/setTimeout (fn [] (reset! complete? true))
:disabled? @disabled? 1000)
:on-complete (fn [] (js/alert "I don't wanna slide anymore"))}]
(js/setTimeout (fn [] (reset! complete? true)) [quo/button {:on-press (fn [] (reset! complete? false))}
1000) "Try again"])])))
(js/alert "I don't wanna slide anymore"))}]
[quo/button {:on-press (fn [] (reset! complete? false))}
"Try again"])]]])))
(defn preview-slide-button
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

36
src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs
View File

@ -1,35 +1,19 @@
(ns status-im2.contexts.quo-preview.buttons.wallet-button (ns status-im2.contexts.quo-preview.buttons.wallet-button
(:require (:require [quo2.core :as quo]
[quo2.core :as quo] [reagent.core :as reagent]
[quo2.foundations.colors :as colors] [status-im2.contexts.quo-preview.preview :as preview]))
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Disabled?:" [{:key :disabled? :type :boolean}])
:key :disabled?
:type :boolean}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:icon :i/placeholder (let [state (reagent/atom {:icon :i/placeholder
:on-press #(js/alert "pressed") :on-press #(js/alert "pressed")
:on-long-press #(js/alert "long pressed")})] :on-long-press #(js/alert "long pressed")})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:flex 1 :padding-bottom 20} {:state state
[rn/view {:height 200} :descriptor descriptor
[preview/customizer state descriptor]] :component-container-style {:align-items :center}}
[rn/view [quo/wallet-button @state]])))
{:flex 1
:align-items :center
:justify-content :center}
[quo/wallet-button @state]]]])))
(defn preview
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}
[cool-preview]])

36
src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs
View File

@ -1,30 +1,12 @@
(ns status-im2.contexts.quo-preview.buttons.wallet-ctas (ns status-im2.contexts.quo-preview.buttons.wallet-ctas
(:require (:require [quo2.core :as quo]
[quo2.core :as quo] [status-im2.contexts.quo-preview.preview :as preview]))
[react-native.core :as rn]
[reagent.core :as reagent]))
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:buy-action #(js/alert "Buy button pressed") [preview/preview-container {}
:send-action #(js/alert "Send button pressed") [quo/wallet-ctas
:receive-action #(js/alert "Receive button pressed") {:buy-action #(js/alert "Buy button pressed")
:bridge-action #(js/alert "Bridge button pressed")})] :send-action #(js/alert "Send button pressed")
(fn [] :receive-action #(js/alert "Receive button pressed")
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} :bridge-action #(js/alert "Bridge button pressed")}]])
[rn/view {:style {:padding-bottom 150}}
[rn/view
{:style {:padding-vertical 60
:flex-direction :row
:justify-content :center}}
[quo/wallet-ctas @state]]]])))
(defn preview
[]
[rn/view
{:style {:flex 1}}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

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

@ -1,42 +1,26 @@
(ns status-im2.contexts.quo-preview.calendar.calendar (ns status-im2.contexts.quo-preview.calendar.calendar
(:require [status-im2.contexts.quo-preview.preview :as preview] (:require [quo2.core :as quo]
[react-native.core :as rn]
[utils.datetime :as dt]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.core :as quo])) [status-im2.contexts.quo-preview.preview :as preview]
[utils.datetime :as datetime]))
(def descriptor (def descriptor
[{:label "Start Date" [{:key :start-date
:key :start-date :type :text}
:type :text} {:key :end-date
{:label "End Date" :type :text}])
:key :end-date
:type :text}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:start-date nil :end-date nil}) (let [state (reagent/atom {:start-date nil :end-date nil})
range (reagent/atom {:start-date nil :end-date nil})] range (reagent/atom {:start-date nil :end-date nil})]
(fn (fn []
[] [preview/preview-container {:state state :descriptor descriptor}
[rn/touchable-without-feedback [quo/calendar
{:on-press rn/dismiss-keyboard!} {:start-date (:start-date @range)
[rn/view {:style {:flex 1}} :end-date (:end-date @range)
[preview/customizer state descriptor] :on-change (fn [new-range]
[rn/view {:style {:padding 19 :flex-grow 2}} (reset! state
[quo/calendar {:start-date (datetime/format-date (:start-date new-range))
{:start-date (:start-date @range) :end-date (datetime/format-date (:end-date new-range))})
:end-date (:end-date @range) (reset! range new-range))}]])))
:on-change (fn [new-range]
(reset! state
{:start-date (dt/format-date (:start-date new-range))
:end-date (dt/format-date (:end-date new-range))})
(reset! range new-range))}]]]])))
(defn preview-calendar
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}}
[cool-preview]])

52
src/status_im2/contexts/quo_preview/calendar/calendar_day.cljs
View File

@ -1,45 +1,21 @@
(ns status-im2.contexts.quo-preview.calendar.calendar-day (ns status-im2.contexts.quo-preview.calendar.calendar-day
(:require [status-im2.contexts.quo-preview.preview :as preview] (:require [quo2.core :as quo]
[react-native.core :as rn]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.core :as quo])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "State:" [(preview/customization-color-option)
:key :state {:key :state
:type :select :type :select
:options [{:key :default :options [{:key :default}
:value "Default"} {:key :selected}
{:key :selected {:key :disabled}
:value "Selected"} {:key :today}]}])
{:key :disabled
:value "Disabled"}
{:key :today
:value "Today"}]}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom (let [state (reagent/atom {:state :default
{:state :default})] :customization-color :blue})]
(fn (fn []
[] [preview/preview-container {:state state :descriptor descriptor}
[rn/touchable-without-feedback [quo/calendar-day @state 12]])))
{:on-press rn/dismiss-keyboard!}
[rn/view
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[quo/calendar-day (assoc @state :customization-color :blue) 12]]]])))
(defn preview-calendar-day
[]
[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}]])

43
src/status_im2/contexts/quo_preview/calendar/calendar_year.cljs
View File

@ -1,39 +1,16 @@
(ns status-im2.contexts.quo-preview.calendar.calendar-year (ns status-im2.contexts.quo-preview.calendar.calendar-year
(:require [status-im2.contexts.quo-preview.preview :as preview] (:require [quo2.core :as quo]
[react-native.core :as rn]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.core :as quo])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Selected?" [{:key :selected? :type :boolean}
:key :selected? {:key :disabled? :type :boolean}])
:type :boolean}
{:label "Disabled?"
:key :disabled?
:type :boolean}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:selected? false :disabled? false})] (let [state (reagent/atom {:selected? false
(fn :disabled? false})]
[] (fn []
[rn/touchable-without-feedback [preview/preview-container {:state state :descriptor descriptor}
{:on-press rn/dismiss-keyboard!} [quo/calendar-year @state "2023"]])))
[rn/view
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[quo/calendar-year @state "2023"]]]])))
(defn preview-calendar-year
[]
[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}]])

48
src/status_im2/contexts/quo_preview/code/snippet.cljs
View File

@ -1,7 +1,5 @@
(ns status-im2.contexts.quo-preview.code.snippet (ns status-im2.contexts.quo-preview.code.snippet
(:require [quo2.components.code.snippet :as snippet] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
@ -69,25 +67,21 @@
:text go-example}}) :text go-example}})
(def descriptor (def descriptor
[{:label "Language:" [{:key :language
:key :language
:type :select :type :select
:options [{:key :clojure :options [{:key :clojure}
:value :clojure} {:key :go}]}
{:key :go {:key :max-lines
:value :go}]}
{:label "Max lines:"
:key :max-lines
:type :select :type :select
:options (map (fn [n] :options (map (fn [n]
{:key n {:key n
:value (str n " lines")}) :value (str n " lines")})
(range 0 41 5))} (range 0 41 5))}
{:label "Syntax highlight:" {:label "Syntax highlight?"
:key :syntax :key :syntax
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:language :clojure (let [state (reagent/atom {:language :clojure
:max-lines 40 :max-lines 40
@ -99,25 +93,9 @@
(js/parseInt max-lines) (js/parseInt max-lines)
(when-not (js/Number.isNaN max-lines) (when-not (js/Number.isNaN max-lines)
max-lines))] max-lines))]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:style {:padding-bottom 150}} [quo/snippet
[preview/customizer state descriptor] {:language language
[rn/view :max-lines max-lines
{:style {:padding-vertical 60 :on-copy-press #(js/alert %)}
:padding-horizontal 16}} text]]))))
[snippet/snippet
{:language language
:max-lines max-lines
:on-copy-press #(js/alert %)}
text]]]]))))
(defn preview-code-snippet
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

14
src/status_im2/contexts/quo_preview/community/channel_actions.cljs
View File

@ -1,27 +1,27 @@
(ns status-im2.contexts.quo-preview.community.channel-actions (ns status-im2.contexts.quo-preview.community.channel-actions
(:require [react-native.core :as rn] (:require [quo2.core :as quo]
[quo2.components.community.channel-actions :as channel-actions])) [react-native.core :as rn]))
(defn preview-channel-actions (defn view
[] []
[rn/view {:flex 1} [rn/view {:flex 1}
[rn/scroll-view {:style {:flex 1 :padding-horizontal 20}} [rn/scroll-view {:style {:flex 1 :padding-horizontal 20}}
[channel-actions/channel-actions [quo/channel-actions
{:actions [{:big? true {:actions [{:big? true
:label "Pinned Messages" :label "Pinned Messages"
:color :blue :color :blue
:icon :i/pin :icon :i/pin
:counter-value 0}]}] :counter-value 0}]}]
[rn/view {:height 50}] [rn/view {:height 50}]
[channel-actions/channel-actions [quo/channel-actions
{:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}]}] {:label "Mute chat" :color :blue :icon :i/muted}]}]
[rn/view {:height 50}] [rn/view {:height 50}]
[channel-actions/channel-actions [quo/channel-actions
{:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} {:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}]}] {:label "Mute chat" :color :blue :icon :i/muted}]}]
[rn/view {:height 50}] [rn/view {:height 50}]
[channel-actions/channel-actions [quo/channel-actions
{:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted} {:label "Mute chat" :color :blue :icon :i/muted}
{:label "Something else" :color :blue :icon :i/placeholder}]}]]]) {:label "Something else" :color :blue :icon :i/placeholder}]}]]])

58
src/status_im2/contexts/quo_preview/community/community_card_view.cljs
View File

@ -1,12 +1,10 @@
(ns status-im2.contexts.quo-preview.community.community-card-view (ns status-im2.contexts.quo-preview.community.community-card-view
(:require [quo.design-system.colors :as quo.colors] (:require [quo.design-system.colors :as quo.colors]
[quo2.components.community.community-card-view :as community-card-view] [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[utils.i18n :as i18n]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]
[utils.i18n :as i18n]))
(def community-data (def community-data
{:id "id" {:id "id"
@ -28,48 +26,22 @@
:emoji (resources/get-image :podcasts)}]}) :emoji (resources/get-image :podcasts)}]})
(def descriptor (def descriptor
[{:label "Status:" [{:key :status
:key :status
:type :select :type :select
:options [{:key :gated :options [{:key :gated}
:value "Gated"} {:key :open}]}
{:key :open {:key :locked?
:value "Open"}]} :type :boolean}
{:label "Locked?" {:key :loading?
:key :locked? :type :boolean}])
:type :boolean}
{:label "Loading?"
:key :loading?
:type :boolean}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:status :gated (let [state (reagent/atom {:status :gated
:locked? true :locked? true
:loading? false})] :loading? false})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/community-card-view-item
[rn/view {:community (merge @state community-data)
{:flex 1 :loading? (:loading? @state)}]])))
:padding 16}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:justify-content :center}
[community-card-view/view
{:community (merge @state community-data)
:loading? (:loading? @state)}]]]])))
(defn preview-community-card
[]
[rn/view
{:background-color (colors/theme-colors colors/neutral-5
colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

85
src/status_im2/contexts/quo_preview/community/community_membership_list_view.cljs
View File

@ -1,70 +1,37 @@
(ns status-im2.contexts.quo-preview.community.community-membership-list-view (ns status-im2.contexts.quo-preview.community.community-membership-list-view
(:require [quo.previews.preview :as preview] (:require [quo2.core :as quo]
[quo.react-native :as rn]
[quo2.components.community.community-list-view :as community-list-view]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.community.data :as data])) [status-im2.contexts.quo-preview.community.data :as data]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Notifications:" [{:key :notifications
:key :notifications
:type :select :type :select
:options [{:key :muted :options [{:key :muted}
:value "Muted"} {:key :unread-mentions-count}
{:key :unread-mentions-count {:key :unread-messages-count}]}
:value "Mention counts"} {:key :status
{:key :unread-messages-count
:value "Unread messages"}]}
{:label "Status:"
:key :status
:type :select :type :select
:options [{:key :gated :options [{:key :gated}
:value "Gated"} {:key :open}]}
{:key :open {:key :locked?
:value "Open"}]} :type :boolean}])
{:label "Locked:"
:key :locked?
:type :boolean}])
(defn cool-preview (defn view
[] []
(let [notifications (reagent/atom (:notifications nil)) (let [state (reagent/atom {:locked? true
state (reagent/atom {:locked? true :notifications :muted
:notifications nil :status :gated})]
:status (if notifications
:gated
:open)})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/communities-membership-list-item {}
[rn/view false
{:flex 1 (cond-> (merge @state data/community)
:padding 16} (= :muted (:notifications @state))
[preview/customizer state descriptor]] (assoc :muted? true)
[rn/view
{:padding-vertical 60
:justify-content :center}
[community-list-view/communities-membership-list-item {}
false
(cond-> (merge @state data/community)
(= :muted (:notifications @state))
(assoc :muted? true)
(= :unread-mentions-count (:notifications @state)) (= :unread-mentions-count (:notifications @state))
(assoc :unread-mentions-count 5) (assoc :unread-mentions-count 5)
(= :unread-messages-count (:notifications @state)) (= :unread-messages-count (:notifications @state))
(assoc :unread-messages? true))]]]]))) (assoc :unread-messages? true))]])))
(defn preview-community-list-view
[]
[rn/view
{:background-color (colors/theme-colors colors/neutral-5
colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

45
src/status_im2/contexts/quo_preview/community/discover_card.cljs
View File

@ -1,42 +1,17 @@
(ns status-im2.contexts.quo-preview.community.discover-card (ns status-im2.contexts.quo-preview.community.discover-card
(:require [quo.previews.preview :as preview] (:require [quo2.core :as quo]
[quo.react-native :as rn]
[quo2.components.community.banner.view :as discover-card]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent] [reagent.core :as reagent]
[utils.i18n :as i18n])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Joined:" [{:key :title :type :text}
:key :joined? {:key :description :type :text}])
:type :boolean}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:joined? :false})] (let [state (reagent/atom {:title "Discover"
:description "Your favourite communities"
:joined? false})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/discover-card @state]])))
[rn/view
{:flex 1
:padding 16}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:justify-content :center}
[discover-card/view
{:joined? (:joined? @state)
:title (i18n/label :t/discover)
:description (i18n/label :t/favorite-communities)}]]]])))
(defn preview-discoverd-card
[]
[rn/view
{:background-color (colors/theme-colors colors/neutral-5
colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

53
src/status_im2/contexts/quo_preview/community/token_gating.cljs
View File

@ -1,27 +1,21 @@
(ns status-im2.contexts.quo-preview.community.token-gating (ns status-im2.contexts.quo-preview.community.token-gating
(:require (:require [quo2.core :as quo]
[quo2.foundations.resources :as resources] [quo2.foundations.resources :as resources]
[reagent.core :as reagent] [reagent.core :as reagent]
[react-native.core :as rn] [status-im2.contexts.quo-preview.preview :as preview]))
[status-im2.contexts.quo-preview.preview :as preview]
[quo2.core :as quo]))
(def descriptor (def descriptor
[{:label "Tokens sufficient" [{:label "Tokens sufficient?"
:key :sufficient? :key :sufficient?
:type :boolean} :type :boolean}
{:label "Many tokens ?" {:key :many-tokens?
:key :many-tokens? :type :boolean}
:type :boolean} {:key :loading?
{:label "Loading ?" :type :boolean}
:key :loading? {:key :condition?
:type :boolean} :type :boolean}
{:label "Сondition ?" {:key :padding?
:key :condition? :type :boolean}])
:type :boolean}
{:label "Padding ?"
:key :padding?
:type :boolean}])
(defn join-gate-options-base (defn join-gate-options-base
[sufficient? many-tokens? loading?] [sufficient? many-tokens? loading?]
@ -75,17 +69,12 @@
loading?)]) loading?)])
:padding? padding?})) :padding? padding?}))
(def state (defn view
(reagent/atom {:sufficient? false
:many-tokens? false
:condition? false
:padding? false}))
(defn preview-token-gating
[] []
(let [preview-props (get-mocked-props @state)] (let [state (reagent/atom {:sufficient? false
[rn/view {:flex 1} :many-tokens? false
[rn/scroll-view {:style {:flex 1}} :condition? false
[preview/customizer state descriptor]] :padding? false})]
[rn/view {:padding-horizontal 20 :padding-vertical 20} (fn []
[quo/token-requirement-list preview-props]]])) [preview/preview-container {:state state :descriptor descriptor}
[quo/token-requirement-list (get-mocked-props @state)]])))

55
src/status_im2/contexts/quo_preview/counter/counter.cljs
View File

@ -1,52 +1,23 @@
(ns status-im2.contexts.quo-preview.counter.counter (ns status-im2.contexts.quo-preview.counter.counter
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Type:" [{:key :type
:key :type
:type :select :type :select
:options [{:key :default :options [{:key :default}
:value "Default"} {:key :secondary}
{:key :secondary {:key :grey}
:value "Secondary"} {:key :outline}]}
{:key :grey {:key :value
:value "Grey"} :type :text}
{:key :outline (preview/customization-color-option)])
:value "Outline"}]}
{:label "Value"
:key :value
:type :text}
{:label "Customization color:"
:key :customization-color
:type :select
:options (map (fn [color]
(let [k (get color :name)]
{:key k :value k}))
(quo/picker-colors))}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:value 5 :type :default})] (let [state (reagent/atom {:value "5"
:type :default})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/counter @state (:value @state)]])))
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[quo/counter @state (:value @state)]]]])))
(defn preview-counter
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

56
src/status_im2/contexts/quo_preview/counter/step.cljs
View File

@ -1,46 +1,28 @@
(ns status-im2.contexts.quo-preview.counter.step (ns status-im2.contexts.quo-preview.counter.step
(:require [quo2.core :as quo2] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Type:" [{:key :type
:key :type
:type :select :type :select
:options [{:key :neutral :options [{:key :neutral}
:value "Neutral (default)"} {:key :active}
{:key :active {:key :complete}]}
:value "Active"} {:key :in-blur-view?
{:key :complete :type :boolean}
:value "Complete"}]} {:key :value
{:label "In blur view?" :type :text}])
:key :in-blur-view?
:type :boolean}
{:label "Value"
:key :value
:type :text}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:value 5 :type :neutral :in-blur-view? false})] (let [state (reagent/atom {:value "5"
:type :neutral
:in-blur-view? false})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:padding-bottom 150} {:state state
[preview/customizer state descriptor] :descriptor descriptor
[rn/view :blur? (:in-blur-view? @state)
{:padding-vertical 60 :show-blur-background? (:in-blur-view? @state)}
:align-items :center} [quo/step @state (:value @state)]])))
[quo2/step @state (:value @state)]]]])))
(defn preview-step
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

29
src/status_im2/contexts/quo_preview/dividers/date.cljs
View File

@ -1,33 +1,14 @@
(ns status-im2.contexts.quo-preview.dividers.date (ns status-im2.contexts.quo-preview.dividers.date
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Value" [{:key :label :type :text}])
:key :label
:type :text}]) (defn view
(defn cool-preview
[] []
(let [state (reagent/atom {:label "Today"})] (let [state (reagent/atom {:label "Today"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/divider-date (@state :label)]])))
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[quo/divider-date (@state :label)]]]])))
(defn preview-divider-date
[]
[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}]])

74
src/status_im2/contexts/quo_preview/dividers/new_messages.cljs
View File

@ -1,62 +1,30 @@
(ns status-im2.contexts.quo-preview.dividers.new-messages (ns status-im2.contexts.quo-preview.dividers.new-messages
(:require [quo2.components.dividers.new-messages :as new-messages] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[utils.i18n :as i18n]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Label" [{:key :label
:key :label :type :text}
:type :text} {:key :color
{:label "Color"
:key :color
:type :select :type :select
:options [{:key :primary :options [{:key :primary}
:value "Primary"} {:key :purple}
{:key :purple {:key :indigo}
:value "Purple"} {:key :turquoise}
{:key :indigo {:key :blue}
:value "Indigo"} {:key :green}
{:key :turquoise {:key :yellow}
:value "Turquoise"} {:key :orange}
{:key :blue {:key :red}
:value "Blue"} {:key :pink}
{:key :green {:key :brown}
:value "Green"} {:key :beige}]}])
{:key :yellow
:value "yellow"} (defn view
{:key :orange
:value "Orange"}
{:key :red
:value "Red"}
{:key :pink
:value "Pink"}
{:key :brown
:value "Brown"}
{:key :beige
:value "Beige"}]}])
(defn cool-preview
[] []
(let [state (reagent/atom {:label (i18n/label :new-messages-header) (let [state (reagent/atom {:label "New messages"
:color :primary})] :color :primary})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/new-messages @state]])))
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[new-messages/new-messages @state]]]])))
(defn preview-new-messages
[]
[rn/view
{:background-color (colors/theme-colors
colors/white
colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

57
src/status_im2/contexts/quo_preview/dividers/strength_divider.cljs
View File

@ -1,55 +1,28 @@
(ns status-im2.contexts.quo-preview.dividers.strength-divider (ns status-im2.contexts.quo-preview.dividers.strength-divider
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Type" [{:key :type
:key :type
:type :select :type :select
:options [{:key :very-weak :options [{:key :very-weak}
:value "Very weak"} {:key :weak}
{:key :weak {:key :okay}
:value "Weak"} {:key :strong}
{:key :okay {:key :very-strong}
:value "Okay"} {:key :alert}
{:key :strong {:key :info}]}
:value "Strong"} {:label "Text (only works for info/alert)"
{:key :very-strong
:value "Very strong"}
{:key :alert
:value "Alert"}
{:key :info
:value "Info"}]}
{:label "Text(only works for info/alert)"
:key :text :key :text
:type :text}]) :type :text}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:text "Common password, shouldn’t be used" (let [state (reagent/atom {:text "Common password, shouldn’t be used"
:type :alert}) :type :alert})]
text (reagent/cursor state [:text])
type (reagent/cursor state [:type])]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/strength-divider
[preview/customizer state descriptor] {:type (:type @state)}
[rn/view {:padding-vertical 60 :background-color colors/neutral-95} (:text @state)]])))
[quo/strength-divider {:type @type} @text]]]])))
(defn preview-strength-divider
[]
[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}]])

63
src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs
View File

@ -1,26 +1,21 @@
(ns status-im2.contexts.quo-preview.drawers.action-drawers (ns status-im2.contexts.quo-preview.drawers.action-drawers
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[utils.re-frame :as rf] [status-im2.contexts.quo-preview.preview :as preview]
[status-im2.contexts.quo-preview.preview :as preview])) [utils.re-frame :as rf]))
(def descriptor (def descriptor
[{:label "Muted?" [{:key :muted?
:key :muted? :type :boolean}
:type :boolean} {:key :mark-as-read-disabled?
{:label "Mark as read disabled?" :type :boolean}
:key :mark-as-read-disabled? {:key :show-red-options?
:type :boolean} :type :boolean}
{:label "Show red options?" {:key :theme
:key :show-red-options?
:type :boolean}
{:label "Drawer theme"
:key :theme
:type :select :type :select
:options [{:key :dark :value "Dark"} :options [{:key :dark}
{:key :light :value "Light"} {:key :light}
{:key nil :value "System"}]}]) {:key nil :value "System"}]}])
(def options-with-consequences (def options-with-consequences
@ -30,7 +25,7 @@
:add-divider? true :add-divider? true
:on-press #(js/alert "clear history")}]) :on-press #(js/alert "clear history")}])
(defn render-action-sheet (defn action-sheet
[state] [state]
[quo/action-drawer [quo/action-drawer
(cond-> (cond->
@ -58,31 +53,17 @@
(:show-red-options? @state) (:show-red-options? @state)
(conj options-with-consequences))]) (conj options-with-consequences))])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:muted? true (let [state (reagent/atom {:muted? true
:show-red-options? true})] :show-red-options? true})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 400} [quo/button
[preview/customizer state descriptor] {:container-style {:margin-horizontal 40}
[quo/button :on-press #(rf/dispatch [:show-bottom-sheet
{:container-style {:margin-horizontal 40} {:content (fn [] [action-sheet state])
:on-press #(rf/dispatch [:show-bottom-sheet :theme (:theme @state)}])}
{:content (fn [] [render-action-sheet state]) "See in bottom sheet"]
:theme (:theme @state)}])} [rn/view {:padding-vertical 60}
"See in bottom sheet"] [action-sheet state]]])))
[rn/view {:padding-vertical 60}
[render-action-sheet state]]]])))
(defn preview-action-drawers
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:nestedScrollEnabled true
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn (fn [_ index] (str "actions-drawers-" index))}]])

91
src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs
View File

@ -7,27 +7,23 @@
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Title" [{:key :title
:key :title :type :text}
:type :text} {:key :show-button?
{:label "Show button" :type :boolean}
:key :show-button? {:key :button-label
:type :boolean} :type :text}
{:label "Button label" {:key :shell?
:key :button-label :type :boolean}])
:type :text}
{:label "Shell"
:key :shell?
:type :boolean}])
(defn documentation-content (defn documentation-content
[override-theme] [theme]
[quo/text {:style {:color (colors/theme-colors colors/neutral-100 colors/white override-theme)}} [quo/text {:style {:color (colors/theme-colors colors/neutral-100 colors/white theme)}}
"Group chats are conversations of more than two people. To invite someone to a group chat, you need to have them on your Status contact list."]) "Group chats are conversations of more than two people. To invite someone to a group chat, you need to have them on your Status contact list."])
(defn documentation-content-full (defn documentation-content-full
[override-theme] [theme]
(let [text-color (colors/theme-colors colors/neutral-100 colors/white override-theme) (let [text-color (colors/theme-colors colors/neutral-100 colors/white theme)
text-style {:color text-color :margin-bottom 10}] text-style {:color text-color :margin-bottom 10}]
[rn/view [rn/view
[quo/text {:style text-style} [quo/text {:style text-style}
@ -75,7 +71,7 @@
[quo/text {:style text-style} [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."]])) "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 render-documenation-drawer (defn documenation-drawer
[title show-button? button-label expanded? shell?] [title show-button? button-label expanded? shell?]
[quo/documentation-drawers [quo/documentation-drawers
{:title title {:title title
@ -88,45 +84,26 @@
[documentation-content-full (when shell? :dark)] [documentation-content-full (when shell? :dark)]
[documentation-content (when shell? :dark)])]) [documentation-content (when shell? :dark)])])
(defn cool-preview (defn view
[] []
(let (let [state (reagent/atom {:title "Create a group chat"
[state :button-label "Read more"})
(reagent/atom title (reagent/cursor state [:title])
{:title "Create a group chat" show-button? (reagent/cursor state [:show-button?])
:button-label "Read more"}) button-label (reagent/cursor state [:button-label])
title (reagent/cursor state [:title]) shell? (reagent/cursor state [:shell?])
show-button? (reagent/cursor state [:show-button?]) expanded? (reagent/atom false)]
button-label (reagent/cursor state [:button-label])
shell? (reagent/cursor state [:shell?])
expanded? (reagent/atom false)]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/button
[preview/customizer state descriptor] {:container-style {:margin-horizontal 40
[rn/view {:padding-vertical 60} :margin-bottom 20}
[quo/button :on-press #(rf/dispatch [:show-bottom-sheet
{:container-style {:margin-horizontal 40 {:content (constantly [documenation-drawer @title
:margin-bottom 20} @show-button?
:on-press #(rf/dispatch [:show-bottom-sheet @button-label expanded? @shell?])
{:content (constantly [render-documenation-drawer @title :expandable? @show-button?
@show-button? :shell? @shell?
@button-label expanded? @shell?]) :expanded? @expanded?}])}
:expandable? @show-button? "Open drawer"]
:shell? @shell? [documenation-drawer @title @show-button? @button-label expanded?]])))
:expanded? @expanded?}])}
"Open drawer"]
[render-documenation-drawer @title @show-button? @button-label expanded?]]]])))
(defn preview-documenation-drawers
[]
[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}]])

64
src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs
View File

@ -1,20 +1,16 @@
(ns status-im2.contexts.quo-preview.drawers.drawer-buttons (ns status-im2.contexts.quo-preview.drawers.drawer-buttons
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Top Heading" [{:key :top-heading
:key :top-heading :type :text}
:type :text} {:key :top-sub-heading
{:label "Top Sub heading" :type :text}
:key :top-sub-heading {:key :bottom-heading
:type :text} :type :text}])
{:label "Bottom heading"
:key :bottom-heading
:type :text}])
(defn text-with-link (defn text-with-link
[] []
@ -35,40 +31,20 @@
:weight :semi-bold} :weight :semi-bold}
"Terms of Use"]]) "Terms of Use"]])
(defn render-drawer-buttons (defn view
[state]
[rn/view
{:height 300
:background-color (colors/theme-colors colors/white colors/neutral-95)}
[quo/drawer-buttons
{:container-style {:margin-left 40
:margin-right 24}
:top-card {:on-press #(js/alert "top card clicked")
:heading (:top-heading @state)}
:bottom-card {:on-press #(js/alert "bottom card clicked")
:heading (:bottom-heading @state)}}
(:top-sub-heading @state) [text-with-link]]])
(defn cool-preview
[] []
(let [state (reagent/atom {:top-heading "Sign in " (let [state (reagent/atom {:top-heading "Sign in"
:top-sub-heading "You already use Status" :top-sub-heading "You already use Status"
:bottom-heading "I’m new to Status"})] :bottom-heading "I'm new to Status"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:padding-bottom 400} {:state state
[preview/customizer state descriptor] :descriptor descriptor
[rn/view {:padding-vertical 60} :component-container-style {:margin-top 40}}
[render-drawer-buttons state]]]]))) [quo/drawer-buttons
{:top-card {:on-press #(js/alert "top card clicked")
(defn preview-drawer-buttons :heading (:top-heading @state)}
[] :bottom-card {:on-press #(js/alert "bottom card clicked")
[rn/view :heading (:bottom-heading @state)}}
{:background-color (colors/theme-colors colors/white colors/neutral-95) (:top-sub-heading @state)
:flex 1} [text-with-link]]])))
[rn/flat-list
{:flex 1
:nestedScrollEnabled true
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn :id}]])

44
src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs
View File

@ -5,6 +5,8 @@
[react-native.core :as rn] [react-native.core :as rn]
[status-im2.common.resources :as resources])) [status-im2.common.resources :as resources]))
(def token-icon (resources/get-mock-image :status-logo))
(defn example-1 (defn example-1
[] []
[:<> [:<>
@ -13,14 +15,12 @@
{:size 24 {:size 24
:locked? false :locked? false
:tokens [{:id 1 :tokens [{:id 1
:group [{:id 1 :token-icon (resources/get-mock-image :status-logo)} :group [{:id 1 :token-icon token-icon}
{:id 2 :token-icon (resources/get-mock-image :status-logo)} {:id 2 :token-icon token-icon}
{:id 3 :token-icon (resources/get-mock-image :status-logo)} {:id 3 :token-icon token-icon}
{:id 4 :token-icon (resources/get-mock-image :status-logo)} {:id 4 :token-icon token-icon}
{:id 5 :token-icon (resources/get-mock-image :status-logo)}]}] {:id 5 :token-icon token-icon}]}]
:background-color (colors/theme-colors :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)}]
colors/neutral-10
colors/neutral-80)}]
[quo/text [quo/text
{:style {:margin-left 4 {:style {:margin-left 4
:margin-right 4}} "Or"] :margin-right 4}} "Or"]
@ -28,14 +28,12 @@
{:size 24 {:size 24
:locked? false :locked? false
:tokens [{:id 1 :tokens [{:id 1
:group [{:id 1 :token-icon (resources/get-mock-image :status-logo)} :group [{:id 1 :token-icon token-icon}
{:id 2 :token-icon (resources/get-mock-image :status-logo)} {:id 2 :token-icon token-icon}
{:id 3 :token-icon (resources/get-mock-image :status-logo)} {:id 3 :token-icon token-icon}
{:id 4 :token-icon (resources/get-mock-image :status-logo)} {:id 4 :token-icon token-icon}
{:id 5 :token-icon (resources/get-mock-image :status-logo)}]}] {:id 5 :token-icon token-icon}]}]
:background-color (colors/theme-colors :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)}]
colors/neutral-10
colors/neutral-80)}]
[quo/text {:style {:margin-left 4}} "To post"]]) [quo/text {:style {:margin-left 4}} "To post"]])
(defn example-2 (defn example-2
@ -53,7 +51,7 @@
[quo/icon :i/communities {:color (colors/theme-colors colors/neutral-100 colors/white)}] [quo/icon :i/communities {:color (colors/theme-colors colors/neutral-100 colors/white)}]
[quo/text {:style {:margin-right 4}} "Join community to post"]]) [quo/text {:style {:margin-right 4}} "Join community to post"]])
(defn cool-preview (defn view
[] []
(fn [] (fn []
[:<> [:<>
@ -63,15 +61,3 @@
[quo/permission-context [example-2] #(js/alert "drawer pressed")]] [quo/permission-context [example-2] #(js/alert "drawer pressed")]]
[rn/view {:margin-top 60} [rn/view {:margin-top 60}
[quo/permission-context [example-3] #(js/alert "drawer pressed")]]])) [quo/permission-context [example-3] #(js/alert "drawer pressed")]]]))
(defn preview-permission-drawers
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/neutral-20 colors/neutral-100)}
:flex 1}
[rn/flat-list
{:flex 1
:nested-scroll-enabled true
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn hash}]])

95
src/status_im2/contexts/quo_preview/dropdowns/dropdown.cljs
View File

@ -1,32 +1,20 @@
(ns status-im2.contexts.quo-preview.dropdowns.dropdown (ns status-im2.contexts.quo-preview.dropdowns.dropdown
(:require [quo2.foundations.colors :as colors] (:require [quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview] [status-im2.contexts.quo-preview.preview :as preview]))
[quo2.core :as quo]))
(def descriptor (def descriptor
[{:label "Type:" [{:key :type
:key :type
:type :select :type :select
:options [{:key :primary :options [{:key :primary}
:value "Primary"} {:key :secondary}
{:key :secondary {:key :grey}
:value "Secondary"} {:key :dark-grey}
{:key :grey {:key :outline}
:value "Grey"} {:key :ghost}
{:key :dark-grey {:key :danger}
:value "Dark Grey"} {:key :positive}]}
{:key :outline {:key :size
:value "Outline"}
{:key :ghost
:value "Ghost"}
{:key :danger
:value "Danger"}
{:key :positive
:value "Positive"}]}
{:label "Size:"
:key :size
:type :select :type :select
:options [{:key 56 :options [{:key 56
:value "56"} :value "56"}
@ -36,20 +24,17 @@
:value "32"} :value "32"}
{:key 24 {:key 24
:value "24"}]} :value "24"}]}
{:label "Icon:" {:key :icon
:key :icon :type :boolean}
:type :boolean}
{:label "Before icon:" {:label "Before icon:"
:key :before :key :before
:type :boolean} :type :boolean}
{:label "Disabled:" {:key :disabled
:key :disabled :type :boolean}
:type :boolean} {:key :label
{:label "Label" :type :text}])
:key :label
:type :text}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:label "Press Me" (let [state (reagent/atom {:label "Press Me"
:size 40}) :size 40})
@ -57,32 +42,16 @@
before (reagent/cursor state [:before]) before (reagent/cursor state [:before])
icon (reagent/cursor state [:icon])] icon (reagent/cursor state [:icon])]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:padding-bottom 150} {:state state
[preview/customizer state descriptor] :descriptor descriptor
[rn/view :component-container-style {:align-items :center}}
{:padding-vertical 60 [quo/dropdown
:flex-direction :row (merge (dissoc @state
:justify-content :center} :theme
[quo/dropdown :before
(merge (dissoc @state :after)
:theme {:on-press #(println "Hello world!")}
:before (when @before
:after) {:before :i/placeholder}))
{:on-press #(println "Hello world!")} (if @icon :i/placeholder @label)]])))
(when @before
{:before :i/placeholder}))
(if @icon :i/placeholder @label)]]]])))
(defn preview-dropdown
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:flex-grow 1
:nestedScrollEnabled true
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

24
src/status_im2/contexts/quo_preview/dropdowns/network_dropdown.cljs
View File

@ -8,35 +8,27 @@
(def descriptor (def descriptor
[{:key :state [{:key :state
:type :select :type :select
:options [{:key :default :options [{:key :default}
:value "Default"} {:key :disabled}]}
{:key :disabled
:value "Disabled"}]}
{:key :blur? {:key :blur?
:type :select :type :select
:options [{:key true :options [{:key true}
:value "True"} {:key false}]}
{:key false
:value "False"}]}
{:key :amount {:key :amount
:type :select :type :select
:options [{:key 1 :options [{:key 1}
:value 1} {:key 2}
{:key 2 {:key 3}]}])
:value 2}
{:key 3
:value 3}]}])
(def ^:private networks-list (def ^:private networks-list
[{:source (quo.resources/get-network :ethereum)} [{:source (quo.resources/get-network :ethereum)}
{:source (quo.resources/get-network :optimism)} {:source (quo.resources/get-network :optimism)}
{:source (quo.resources/get-network :arbitrum)}]) {:source (quo.resources/get-network :arbitrum)}])
(defn preview-dropdown (defn view
[] []
(let [component-state (reagent/atom {:state :default :blur? false :amount 3})] (let [component-state (reagent/atom {:state :default :blur? false :amount 3})]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state component-state {:state component-state
:descriptor descriptor :descriptor descriptor

102
src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs
View File

@ -1,40 +1,28 @@
(ns status-im2.contexts.quo-preview.empty-state.empty-state (ns status-im2.contexts.quo-preview.empty-state.empty-state
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview] [status-im2.common.resources :as resources]
[status-im2.common.resources :as resources])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Title:" [{:key :title
:key :title :type :text}
:type :text} {:key :description
{:label "Description:" :type :text}
:key :description {:key :image
:type :text}
{:label "Image:"
:key :image
:type :select :type :select
:options [{:key :no-contacts-light :options [{:key :no-contacts-light}
:value "No contacts light"} {:key :no-contacts-dark}
{:key :no-contacts-dark {:key :no-messages-light}
:value "No contacts dark"} {:key :no-messages-dark}]}
{:key :no-messages-light {:key :upper-button-text
:value "No messages light"} :type :text}
{:key :no-messages-dark {:key :lower-button-text
:value "No messages dark"}]} :type :text}
{:label "Upper button text" {:key :blur?
:key :upper-button-text :type :boolean}])
:type :text}
{:label "Lower button text"
:key :lower-button-text
:type :text}
{:label "Blur:"
:key :blur?
:type :boolean}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:image :no-messages-light (let [state (reagent/atom {:image :no-messages-light
:title "A big friendly title" :title "A big friendly title"
@ -43,42 +31,18 @@
:upper-button-text "Send community link" :upper-button-text "Send community link"
:lower-button-text "Invite friends to Status"})] :lower-button-text "Invite friends to Status"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:padding-bottom 150} {:state state
[preview/customizer state descriptor] :descriptor descriptor
[rn/view :blur? (:blur? @state)
{:style {:margin-vertical 24 :blur-height 300
:background-color (when (:blur? @state) colors/neutral-95)}} :show-blur-background? true}
[preview/blur-view [quo/empty-state
{:style {:width "100%" (-> @state
:align-items :center (assoc :upper-button
:top (if (:blur? @state) 32 16) {:text (:upper-button-text @state)
:position (if (:blur? @state) :on-press #(js/alert "Upper button")})
:absolute (assoc :lower-button
:relative)} {:text (:lower-button-text @state)
:height 300 :on-press #(js/alert "Lower button")})
:show-blur-background? (:blur? @state) (update :image resources/get-image))]])))
:blur-view-props (when (:blur? @state)
{:overlay-color colors/neutral-80-opa-80})}
[rn/view {:style {:flex 1 :width "100%"}}
[quo/empty-state
(-> @state
(assoc :upper-button
{:text (:upper-button-text @state)
:on-press #(js/alert "Upper button")})
(assoc :lower-button
{:text (:lower-button-text @state)
:on-press #(js/alert "Lower button")})
(update :image resources/get-image))]]]]]])))
(defn preview-empty-state
[]
[rn/view
{:style {:flex 1
:background-color (colors/theme-colors colors/white colors/neutral-95)}}
[rn/flat-list
{:style {:flex 1}
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

70
src/status_im2/contexts/quo_preview/foundations/shadows.cljs
View File

@ -24,50 +24,36 @@
(when shadow? shadow-style))}]]) (when shadow? shadow-style))}]])
(def descriptor (def descriptor
[{:label "Shadows enabled?" [{:key :shadow?
:key :shadow? :type :boolean}])
:type :boolean}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:shadow? true}) (let [state (reagent/atom {:shadow? true})
shadow? (reagent/cursor state [:shadow?])] shadow? (reagent/cursor state [:shadow?])]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:style {:padding-bottom 150}} [quo/text
[preview/customizer state descriptor] {:style {:margin-left :auto
[quo/text :margin-right :auto
{:style {:margin-left :auto :align-items :center}}
:margin-right :auto "Normal Scales"]
:align-items :center}} [demo-box @shadow? "Shadow 1" (shadows/get 1)]
"Normal Scales"] [demo-box @shadow? "Shadow 2" (shadows/get 2)]
[demo-box @shadow? "Shadow 1" (shadows/get 1)] [demo-box @shadow? "Shadow 3" (shadows/get 3)]
[demo-box @shadow? "Shadow 2" (shadows/get 2)] [demo-box @shadow? "Shadow 4" (shadows/get 4)]
[demo-box @shadow? "Shadow 3" (shadows/get 3)] [quo/text
[demo-box @shadow? "Shadow 4" (shadows/get 4)] {:style {:margin-left :auto
[quo/text :margin-right :auto
{:style {:margin-left :auto :align-items :center}}
:margin-right :auto "Inverted Scales"]
:align-items :center}} [demo-box @shadow? "Shadow 1" (shadows/get 1 (quo.theme/get-theme) :inverted)]
"Inverted Scales"] [demo-box @shadow? "Shadow 2" (shadows/get 2 (quo.theme/get-theme) :inverted)]
[demo-box @shadow? "Shadow 1" (shadows/get 1 (quo.theme/get-theme) :inverted)] [demo-box @shadow? "Shadow 3" (shadows/get 3 (quo.theme/get-theme) :inverted)]
[demo-box @shadow? "Shadow 2" (shadows/get 2 (quo.theme/get-theme) :inverted)] [demo-box @shadow? "Shadow 4" (shadows/get 4 (quo.theme/get-theme) :inverted)]
[demo-box @shadow? "Shadow 3" (shadows/get 3 (quo.theme/get-theme) :inverted)] [quo/text
[demo-box @shadow? "Shadow 4" (shadows/get 4 (quo.theme/get-theme) :inverted)] {:style {:margin-left :auto
[quo/text :margin-right :auto
{:style {:margin-left :auto :align-items :center}}
:margin-right :auto "Inverted Scales"]
:align-items :center}} [demo-box @shadow? "Inner Shadow" shadows/inner-shadow]])))
"Inverted Scales"]
[demo-box @shadow? "Inner Shadow" shadows/inner-shadow]]])))
(defn preview-shadows
[]
[rn/view
{:background-color (colors/theme-colors colors/neutral-30 colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

26
src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.gradient.gradient-cover (ns status-im2.contexts.quo-preview.gradient.gradient-cover
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[quo2.theme :as quo.theme] [quo2.theme :as quo.theme]
[react-native.blur :as blur] [react-native.blur :as blur]
[react-native.core :as rn] [react-native.core :as rn]
@ -43,7 +42,7 @@
:key :blur? :key :blur?
:type :boolean}]) :type :boolean}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:customization-color :blue :blur? false}) (let [state (reagent/atom {:customization-color :blue :blur? false})
blur? (reagent/cursor state [:blur?]) blur? (reagent/cursor state [:blur?])
@ -54,8 +53,7 @@
(when @blur? (when @blur?
(quo.theme/set-theme :dark))) (quo.theme/set-theme :dark)))
[@blur?]) [@blur?])
[:<> [preview/preview-container {:state state :descriptor descriptor}
[preview/customizer state descriptor]
[rn/view [rn/view
{:style {:height 332 {:style {:height 332
:margin-top 24 :margin-top 24
@ -75,13 +73,6 @@
:padding-vertical 40} :padding-vertical 40}
:blur-type :dark} :blur-type :dark}
[quo/gradient-cover @state]]] [quo/gradient-cover @state]]]
[rn/view
{:style {:padding-vertical 20
:padding-horizontal 16}}
[quo/color-picker
{:blur? @blur?
:selected @customization-color
:on-change #(reset! customization-color %)}]]
[quo/button [quo/button
{:container-style {:margin-horizontal 40} {:container-style {:margin-horizontal 40}
:on-press #(rf/dispatch [:show-bottom-sheet :on-press #(rf/dispatch [:show-bottom-sheet
@ -89,16 +80,3 @@
:gradient-cover? true :gradient-cover? true
:customization-color @customization-color}])} :customization-color @customization-color}])}
"See in bottom sheet"]])])) "See in bottom sheet"]])]))
(defn preview-gradient-cover
[]
[rn/view
{:background-color (colors/theme-colors
colors/white
colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

62
src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs
View File

@ -1,7 +1,5 @@
(ns status-im2.contexts.quo-preview.graph.wallet-graph (ns status-im2.contexts.quo-preview.graph.wallet-graph
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
@ -20,26 +18,17 @@
(recur (dec n) new-prices new-price volatility))))) (recur (dec n) new-prices new-price volatility)))))
(def descriptor (def descriptor
[{:label "State:" [{:key :state
:key :state
:type :select :type :select
:options [{:key :positive :options [{:key :positive}
:value "Positive"} {:key :negative}]}
{:key :negative {:key :time-frame
:value "Negative"}]}
{:label "Time frame:"
:key :time-frame
:type :select :type :select
:options [{:key :empty :options [{:key :empty}
:value "Empty"} {:key :1-week}
{:key :1-week {:key :1-month}
:value "1 Week"} {:key :3-months}
{:key :1-month {:key :1-year}
:value "1 Month"}
{:key :3-months
:value "3 Months"}
{:key :1-year
:value "1 Year"}
{:key :all-time {:key :all-time
:value "All time (500 years data)"}]}]) :value "All time (500 years data)"}]}])
@ -61,31 +50,16 @@
0.005)] 0.005)]
(generate-crypto-token-prices data-points volatility))) (generate-crypto-token-prices data-points volatility)))
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:state :positive (let [state (reagent/atom {:state :positive
:time-frame :1-week})] :time-frame :1-week})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:padding-bottom 150} {:state state
[preview/customizer state descriptor] :descriptor descriptor
[rn/view {:margin-top 300} :component-container-style {:padding-horizontal 0 :margin-top 200}}
[quo/wallet-graph [quo/wallet-graph
{:data (generate-data (:time-frame @state)) {:data (generate-data (:time-frame @state))
:state (:state @state) :state (:state @state)
:time-frame (:time-frame @state)}]]]]))) :time-frame (:time-frame @state)}]])))
(defn preview-wallet-graph
[]
[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
:scroll-enabled false}]])

52
src/status_im2/contexts/quo_preview/info/info_message.cljs
View File

@ -1,53 +1,27 @@
(ns status-im2.contexts.quo-preview.info.info-message (ns status-im2.contexts.quo-preview.info.info-message
(:require [quo2.components.info.info-message :as quo2] (:require [quo2.components.info.info-message :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Type:" [{:key :type
:key :type
:type :select :type :select
:options [{:key :default :options [{:key :default}
:value "Default"} {:key :success}
{:key :success {:key :error}]}
:value "Success"} {:key :size
{:key :error
:value "Error"}]}
{:label "Size:"
:key :size
:type :select :type :select
:options [{:key :default :options [{:key :default}
:value "Default"} {:key :tiny}]}
{:key :tiny {:key :message
:value "Tiny"}]} :type :text}])
{:label "Message"
:key :message
:type :text}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:type :default (let [state (reagent/atom {:type :default
:size :default :size :default
:icon :i/placeholder :icon :i/placeholder
:message "This is a message"})] :message "This is a message"})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/info-message @state (:message @state)]])))
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[quo2/info-message @state (:message @state)]]]])))
(defn preview-info-message
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

72
src/status_im2/contexts/quo_preview/info/information_box.cljs
View File

@ -1,38 +1,28 @@
(ns status-im2.contexts.quo-preview.info.information-box (ns status-im2.contexts.quo-preview.info.information-box
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Type:" [{:key :type
:key :type
:type :select :type :select
:options [{:key :default :options [{:key :default}
:value "Default"} {:key :informative}
{:key :informative {:key :error}]}
:value "Informative"} {:key :closable?
{:key :error :type :boolean}
:value "Error"}]} {:key :message
{:label "Closable?" :type :text}
:key :closable? {:key :button-label
:type :boolean} :type :text}])
{:label "Message"
:key :message
:type :text}
{:label "Button Label"
:key :button-label
:type :text}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom (let [state (reagent/atom {:type :default
{:type :default :closable? true
:closable? true :message (str "If you registered a stateofus.eth name "
:message (str "If you registered a stateofus.eth name " "you might be eligible to connect $ENS")
"you might be eligible to connect $ENS") :button-label "Button"})
:button-label "Button"})
closable? (reagent/cursor state [:closable?]) closable? (reagent/cursor state [:closable?])
closed? (reagent/cursor state [:closed?]) closed? (reagent/cursor state [:closed?])
on-close (fn [] on-close (fn []
@ -40,26 +30,10 @@
(js/setTimeout (fn [] (reset! closed? false)) (js/setTimeout (fn [] (reset! closed? false))
2000))] 2000))]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view [quo/information-box
[preview/customizer state descriptor] (merge {:icon :i/info
[rn/view :style {:width 335}
{:style {:padding-vertical 20 :on-close (when @closable? on-close)}
:align-items :center}} @state)
[quo/information-box (:message @state)]])))
(merge {:icon :i/info
:style {:width 335}
:on-close (when @closable? on-close)}
@state)
(:message @state)]]]])))
(defn preview-information-box
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

119
src/status_im2/contexts/quo_preview/inputs/input.cljs
View File

@ -1,48 +1,33 @@
(ns status-im2.contexts.quo-preview.inputs.input (ns status-im2.contexts.quo-preview.inputs.input
(:require [clojure.string :as string] (:require [clojure.string :as string]
[quo2.core :as quo] [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Type:" [{:key :type
:key :type
:type :select :type :select
:options [{:key :text :options [{:key :text}
:value "Text"} {:key :password}]}
{:key :password {:key :blur?
:value "Password"}]} :type :boolean}
{:label "Blur:" {:key :error?
:key :blur? :type :boolean}
:type :boolean} {:key :icon-name
{:label "Error:" :type :boolean}
:key :error? {:key :disabled?
:type :boolean} :type :boolean}
{:label "Icon:" {:key :clearable?
:key :icon-name :type :boolean}
:type :boolean} {:key :small?
{:label "Disabled:" :type :boolean}
:key :disabled? {:key :multiline
:type :boolean} :type :boolean}
{:label "Clearable:" {:key :button
:key :clearable? :type :boolean}
:type :boolean} {:key :label
{:label "Small:" :type :text}
:key :small? {:key :char-limit
:type :boolean}
{:label "Multiline:"
:key :multiline
:type :boolean}
{:label "Button:"
:key :button
:type :boolean}
{:label "Label:"
:key :label
:type :text}
{:label "Char limit:"
:key :char-limit
:type :select :type :select
:options [{:key 10 :options [{:key 10
:value "10"} :value "10"}
@ -50,14 +35,13 @@
:value "50"} :value "50"}
{:key 100 {:key 100
:value "100"}]} :value "100"}]}
{:label "Value:" {:key :value
:key :value :type :text}])
:type :text}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:type :text (let [state (reagent/atom {:type :text
:blur false :blur? false
:placeholder "Type something" :placeholder "Type something"
:error false :error false
:icon-name false :icon-name false
@ -66,36 +50,23 @@
:on-char-limit-reach #(js/alert :on-char-limit-reach #(js/alert
(str "Char limit reached: " %))})] (str "Char limit reached: " %))})]
(fn [] (fn []
(let [blank-label? (string/blank? (:label @state)) (let [blank-label? (string/blank? (:label @state))]
icon? (boolean (:icon-name @state)) [preview/preview-container
button-props {:on-press #(js/alert "Button pressed!") {:state state
:text "My button"}] :descriptor descriptor
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} :blur? (:blur? @state)
[rn/view {:style {:padding-bottom 150}} :show-blur-background? true}
[rn/view {:style {:flex 1}} [quo/input
[preview/customizer state descriptor]] (cond-> (assoc @state
[preview/blur-view :on-clear? #(swap! state assoc :value "")
{:style {:flex 1 :on-change-text #(swap! state assoc :value %))
:align-items :center (:button @state)
:margin-vertical 20} (assoc :button
:show-blur-background? (:blur? @state)} {:on-press #(js/alert "Button pressed!")
[rn/view {:style {:width 300}} :text "My button"})
[quo/input
(cond-> @state
:always (assoc
:on-clear? #(swap! state assoc :value "")
:on-change-text #(swap! state assoc :value %))
(:button @state) (assoc :button button-props)
blank-label? (dissoc :label)
icon? (assoc :icon-name :i/placeholder))]]]]]))))
(defn preview-input blank-label?
[] (dissoc :label)
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-90) (:icon-name @state)
:flex 1}} (assoc :icon-name :i/placeholder))]]))))
[rn/flat-list
{:style {:flex 1}
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

44
src/status_im2/contexts/quo_preview/inputs/locked_input.cljs
View File

@ -1,42 +1,24 @@
(ns status-im2.contexts.quo-preview.inputs.locked-input (ns status-im2.contexts.quo-preview.inputs.locked-input
(:require [quo2.foundations.colors :as colors] (:require [quo2.core :as quo]
[react-native.core :as rn]
[quo2.core :as quo]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "show icon" [{:key :icon :type :boolean}
:key :icon {:key :label :type :text}
:type :boolean} {:key :value :type :text}])
{:label "label"
:key :label
:type :text}
{:label "Value"
:key :value
:type :text}])
(defn preview-locked-input (defn view
[] []
(let [state (reagent/atom {:value "$1,648.34" (let [state (reagent/atom {:value "$1,648.34"
:label "Network fee"})] :label "Network fee"})]
(fn [] (fn []
(let [{:keys [label value icon]} @state] (let [{:keys [label value icon]} @state]
[rn/view [preview/preview-container {:state state :descriptor descriptor}
{:background-color (colors/theme-colors colors/white colors/neutral-90) [quo/locked-input
:flex 1 {:icon (when icon :i/gas)
:flex-direction :column :label label
:padding-top 20 :container-style {:margin-right 20
:padding-left 20} :margin-horizontal 20
[rn/view {:style {:height 200}} :flex 1}}
[preview/customizer state descriptor]] value]]))))
[rn/view
{:style {:margin-top 11
:flex-direction :row}}
[quo/locked-input
{:icon (when icon :i/gas)
:label label
:container-style {:margin-right 20
:margin-horizontal 20
:flex 1}}
value]]]))))

79
src/status_im2/contexts/quo_preview/inputs/profile_input.cljs
View File

@ -1,67 +1,42 @@
(ns status-im2.contexts.quo-preview.inputs.profile-input (ns status-im2.contexts.quo-preview.inputs.profile-input
(:require [quo2.foundations.colors :as colors] (:require [quo2.core :as quo]
[react-native.core :as rn] [quo2.foundations.colors :as colors]
[reagent.core :as reagent]
[quo2.core :as quo]
[react-native.blur :as blur] [react-native.blur :as blur]
[reagent.core :as reagent]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "disabled?" [{:key :disabled?
:key :disabled? :type :boolean}
:type :boolean} {:key :image-selected?
{:label "image selected?" :type :boolean}
:key :image-selected? (preview/customization-color-option {:key :color})])
:type :boolean}
{:label "Custom Color"
:key :color
:type :select
:options (map (fn [color]
(let [k (get color :name)]
{:key k :value k}))
(quo/picker-colors))}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:color :blue (let [state (reagent/atom {:color :blue
:image-selected? false :image-selected? false
:disabled? false}) :disabled? false})
max-length 24 max-length 24
value (reagent/atom "") value (reagent/atom "")
on-change-text #(reset! value %)] on-change-text #(reset! value %)]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [blur/view
[rn/view {:flex 1}] {:background-color colors/neutral-80-opa-80
[preview/customizer state descriptor] :flex-direction :row
[blur/view :margin-horizontal 20
{:background-color colors/neutral-80-opa-80 :justify-content :center}
:flex-direction :row [quo/profile-input
:margin-horizontal 20 {:default-value ""
:justify-content :center} :on-change-text on-change-text
[quo/profile-input :customization-color (:color @state)
{:default-value "" :placeholder "Your Name"
:on-change-text on-change-text :on-press #(js/alert "show image selector")
:customization-color (:color @state) :image-picker-props {:profile-picture (when (:image-selected? @state)
:placeholder "Your Name" (resources/get-mock-image :user-picture-male5))
:on-press #(js/alert "show image selector") :full-name @value}
:image-picker-props {:profile-picture (when (:image-selected? @state) :title-input-props {:disabled? (:disabled? @state)
(resources/get-mock-image :user-picture-male5)) :max-length max-length
:full-name @value} :on-change-text on-change-text}}]]])))
:title-input-props {:disabled? (:disabled? @state)
:max-length max-length
:on-change-text on-change-text}}]]]])))
(defn preview-profile-input
[]
[rn/view
{:background-color (colors/theme-colors colors/white
colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

84
src/status_im2/contexts/quo_preview/inputs/recovery_phrase_input.cljs
View File

@ -1,76 +1,48 @@
(ns status-im2.contexts.quo-preview.inputs.recovery-phrase-input (ns status-im2.contexts.quo-preview.inputs.recovery-phrase-input
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Text" [{:key :text
:key :text :type :text}
:type :text} {:key :placeholder
{:label "Placeholder" :type :text}
:key :placeholder {:key :blur?
:type :text} :type :boolean}
{:label "Blur" {:key :mark-errors?
:key :blur? :type :boolean}
:type :boolean} (preview/customization-color-option)
{:label "Mark errors" {:key :word-limit
:key :mark-errors?
:type :boolean}
{:label "Customization color"
:key :customization-color
:type :select
:options (map (fn [[color _]]
{:key color :value (name color)})
colors/customization)}
{:label "Word limit"
:key :word-limit
:type :select :type :select
:options [{:key nil :value "No limit"} :options [{:key nil :value "No limit"}
{:key 5 :value "5 words"} {:key 5 :value "5 words"}
{:key 10 :value "10 words"} {:key 10 :value "10 words"}
{:key 20 :value "20 words"}]}]) {:key 20 :value "20 words"}]}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:text "" (let [state (reagent/atom {:text ""
:placeholder "Type or paste your recovery phrase" :placeholder "Type or paste your recovery phrase"
:customization-color :blue :customization-color :blue
:word-limit 20 :word-limit 20
:blur? false
:mark-errors? true})] :mark-errors? true})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:style {:padding-bottom 150}} {:state state
[rn/view {:style {:flex 1}} :descriptor descriptor
[preview/customizer state descriptor] :blur? (:blur? @state)
[quo/text {:size :paragraph-2} :show-blur-background? true}
"(Any word with at least 6 chars is marked as error)"]] [quo/text {:size :paragraph-2}
[preview/blur-view "(Any word with at least 6 chars is marked as error)"]
{:style {:align-items :center [rn/view {:style {:height 150}}
:margin-vertical 20 [quo/recovery-phrase-input
:width "100%"} {:mark-errors? (:mark-errors? @state)
:height 200 :error-pred #(> (count %) 5)
:show-blur-background? (:blur? @state)} :on-change-text #(swap! state assoc :text %)
[rn/view :placeholder (:placeholder @state)
{:style {:height 150 :customization-color (:customization-color @state)
:width "100%"}} :word-limit (:word-limit @state)}
[quo/recovery-phrase-input (:text @state)]]])))
{:mark-errors? (:mark-errors? @state)
:error-pred #(> (count %) 5)
:on-change-text #(swap! state assoc :text %)
:placeholder (:placeholder @state)
:customization-color (:customization-color @state)
:word-limit (:word-limit @state)}
(:text @state)]]]]])))
(defn preview-recovery-phrase-input
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}}
[rn/flat-list
{:style {:flex 1}
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])

60
src/status_im2/contexts/quo_preview/inputs/search_input.cljs
View File

@ -1,23 +1,17 @@
(ns status-im2.contexts.quo-preview.inputs.search-input (ns status-im2.contexts.quo-preview.inputs.search-input
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Value" [{:key :value
:key :value :type :text}
:type :text} {:key :blur?
{:label "Blur" :type :boolean}
:key :blur? {:key :disabled?
:type :boolean} :type :boolean}
{:label "Disabled" {:key :number-tags
:key :disabled?
:type :boolean}
{:label "Number of Tags"
:key :number-tags
:type :select :type :select
:options (map (fn [n] :options (map (fn [n]
{:key n :value (str n)}) {:key n :value (str n)})
@ -35,40 +29,24 @@
(resources/get-mock-image :user-picture-female2) (resources/get-mock-image :user-picture-female2)
"Freya Odinson"]]) "Freya Odinson"]])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:blur? false (let [state (reagent/atom {:blur? false
:disabled? false :disabled? false
:number-tags 0 :number-tags 0
:placeholder "Search..." :placeholder "Search..."
:value "" :value ""})
:on-clear #(js/alert "Clear pressed")})
on-change-text (fn [new-text] on-change-text (fn [new-text]
(swap! state assoc :value new-text))] (swap! state assoc :value new-text))]
(fn [] (fn []
(let [tags (take (:number-tags @state) (example-tags (:blur? @state)))] (let [tags (take (:number-tags @state) (example-tags (:blur? @state)))]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:style {:padding-bottom 150}} {:state state
[rn/view {:style {:flex 1}} :descriptor descriptor
[preview/customizer state descriptor]] :blur? (:blur? @state)
[preview/blur-view :show-blur-background? true}
{:style {:align-items :center [quo/search-input
:margin-vertical 20 (assoc @state
:width "100%"} :on-clear #(swap! state assoc :value "")
:show-blur-background? (:blur? @state)} :tags tags
[rn/view {:style {:width "100%"}} :on-change-text on-change-text)]]))))
[quo/search-input
(assoc @state
:tags tags
:on-change-text on-change-text)]]]]]))))
(defn preview-search-input
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}}
[rn/flat-list
{:style {:flex 1}
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])

71
src/status_im2/contexts/quo_preview/inputs/title_input.cljs
View File

@ -1,57 +1,30 @@
(ns status-im2.contexts.quo-preview.inputs.title-input (ns status-im2.contexts.quo-preview.inputs.title-input
(:require [quo2.foundations.colors :as colors] (:require [quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.core :as quo]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "disabled?" [{:key :disabled?
:key :disabled? :type :boolean}
:type :boolean} {:key :placeholder
{:label "blur?" :type :text}
:key :blur? {:key :max-length
:type :boolean} :type :number}
{:label "Cursor Color" {:key :blur?
:key :color :type :boolean}
:type :select (preview/customization-color-option)])
:options (map (fn [{:keys [name]}] {:key name :value name}) (quo/picker-colors))}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:color nil (let [state (reagent/atom {:color nil
:blur? false :placeholder "Type something here"
:disabled? false}) :max-length 24
max-length 24 :blur? false
on-change-text (fn [_v] :disabled? false})]
(println (str "cool-preview -> on-change-text called " _v)))]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container
[rn/view {:padding-bottom 150} {:state state
[rn/view {:flex 1}] :descriptor descriptor
[preview/customizer state descriptor] :blur? (:blur? @state)
:show-blur-background? true}
[preview/blur-view [quo/title-input (assoc @state :default-value "")]])))
{:show-blur-background? (:blur? @state)
:style {:flex-direction :row
:justify-content :center}}
[quo/title-input
{:max-length max-length
:default-value ""
:on-change-text on-change-text
:disabled? (:disabled? @state)
:customization-color (:color @state)
:blur? (:blur? @state)
:placeholder "type something here"}]]]])))
(defn preview-title-input
[]
[rn/view
{:background-color (colors/theme-colors colors/white
colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

36
src/status_im2/contexts/quo_preview/keycard/keycard.cljs
View File

@ -1,37 +1,17 @@
(ns status-im2.contexts.quo-preview.keycard.keycard (ns status-im2.contexts.quo-preview.keycard.keycard
(:require [status-im2.contexts.quo-preview.preview :as preview] (:require [quo2.core :as quo]
[react-native.core :as rn]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.core :as quo])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Holder" [{:key :holder-name :type :text}
:key :holder-name {:key :locked? :type :boolean}])
:type :text}
{:label "Locked?"
:key :locked?
:type :boolean}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:holder-name nil (let [state (reagent/atom {:holder-name ""
:locked? true})] :locked? true})]
(fn (fn
[] []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view [preview/customizer state descriptor] [quo/keycard @state]])))
[quo/keycard
{:holder-name? (:holder-name @state)
:locked? (:locked? @state)}]]])))
(defn preview-keycard
[]
[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}]])

36
src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs
View File

@ -1,27 +1,19 @@
(ns status-im2.contexts.quo-preview.list-items.account-list-card (ns status-im2.contexts.quo-preview.list-items.account-list-card
(:require (:require [quo2.core :as quo]
[quo2.core :as quo] [reagent.core :as reagent]
[react-native.core :as rn] [status-im2.contexts.quo-preview.preview :as preview]))
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "State:" [{:key :state
:key :state
:type :select :type :select
:options [{:key :default :options [{:key :default}
:value "Default"} {:key :pressed}]}
{:key :pressed {:key :action
:value "Pressed"}]}
{:label "Action:"
:key :action
:type :select :type :select
:options [{:key :none :options [{:key :none}
:value "None"} {:key :icon}]}])
{:key :icon
:value "Icon"}]}])
(defn preview (defn view
[] []
(let [state (reagent/atom {:account-props {:customization-color :purple (let [state (reagent/atom {:account-props {:customization-color :purple
:size 32 :size 32
@ -34,9 +26,5 @@
:action :none :action :none
:on-press (fn [] (js/alert "Button pressed"))})] :on-press (fn [] (js/alert "Button pressed"))})]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view [quo/account-list-card @state]])))
{:style {:flex 1
:padding-horizontal 20}}
[rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
[quo/account-list-card @state]]])))

68
src/status_im2/contexts/quo_preview/list_items/channel.cljs
View File

@ -1,28 +1,20 @@
(ns status-im2.contexts.quo-preview.list-items.channel (ns status-im2.contexts.quo-preview.list-items.channel
(:require [quo2.components.list-items.channel :as quo2-channel] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Muted?:" [{:key :muted?
:key :muted? :type :boolean}
:type :boolean} {:key :name
{:label "Name" :type :text}
:key :name {:key :mentions-count
:type :text} :type :text}
{:label "Number of mentions" {:key :unread-messages?
:key :mentions-count :type :boolean}
:type :text} {:key :emoji
{:label "Unread Messages:" :type :text}
:key :unread-messages? {:key :locked?
:type :boolean}
{:label "Avatar emoji"
:key :emoji
:type :text}
{:label "is Locked?"
:key :locked?
:type :select :type :select
:options [{:key nil :options [{:key nil
:value "None"} :value "None"}
@ -30,11 +22,9 @@
:value "Unlocked"} :value "Unlocked"}
{:key true {:key true
:value "Locked"}]} :value "Locked"}]}
{:label "Is Pressed Channel:" {:key :is-active-channel?
:key :is-active-channel? :type :boolean}
:type :boolean} {:key :channel-color
{:label "Channel color"
:key :channel-color
:type :select :type :select
:options [{:key "#00FFFF" :options [{:key "#00FFFF"
:value "Blue"} :value "Blue"}
@ -43,7 +33,7 @@
{:key "#FFFF00" {:key "#FFFF00"
:value "Yellow"}]}]) :value "Yellow"}]}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:is-active-channel? false (let [state (reagent/atom {:is-active-channel? false
:muted? false :muted? false
@ -54,27 +44,5 @@
:name "channel" :name "channel"
:locked? true})] :locked? true})]
(fn [] (fn []
[rn/view [preview/preview-container {:state state :descriptor descriptor}
{:margin-bottom 50 [quo/channel-list-item @state]])))
:padding-bottom 16
:padding-right 8
:padding-left 8
:padding-top 16}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[quo2-channel/list-item @state]]])))
(defn preview-channel
[]
[rn/keyboard-avoiding-view {:style {:flex 1}}
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]]])

56
src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
View File

@ -1,16 +1,12 @@
(ns status-im2.contexts.quo-preview.list-items.preview-lists (ns status-im2.contexts.quo-preview.list-items.preview-lists
(:require [quo2.components.list-items.preview-list :as quo2] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[quo2.foundations.resources :as quo.resources] [quo2.foundations.resources :as quo.resources]
[react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[utils.i18n :as i18n]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Size:" [{:key :size
:key :size
:type :select :type :select
:options [{:key 32 :options [{:key 32
:value "32"} :value "32"}
@ -18,21 +14,15 @@
:value "24"} :value "24"}
{:key 16 {:key 16
:value "16"}]} :value "16"}]}
{:label "Type:" {:key :type
:key :type
:type :select :type :select
:options [{:key :user :options [{:key :user}
:value "User"} {:key :photo}
{:key :photo {:key :network}]}
:value "Photo"} {:key :list-size
{:key :network
:value "Network"}]}
{:label "List Size"
:key :list-size
:default 10 :default 10
:type :text}]) :type :text}])
;; Mocked list items
(def user-list (def user-list
[{:full-name "ABC DEF"} [{:full-name "ABC DEF"}
{:full-name "GHI JKL"} {:full-name "GHI JKL"}
@ -52,33 +42,17 @@
{:source (quo.resources/get-network :optimism)} {:source (quo.resources/get-network :optimism)}
{:source (quo.resources/get-network :arbitrum)}]) {:source (quo.resources/get-network :arbitrum)}])
(defn cool-preview (defn view
[] []
(let [state (reagent/atom {:type :user (let [state (reagent/atom {:type :user
:size 32 :size 32
:list-size 10 :list-size 10
:more-than-99-label (i18n/label :counter-99-plus)}) :more-than-99-label "99+"})
type (reagent/cursor state [:type])] type (reagent/cursor state [:type])]
(fn [] (fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [preview/preview-container {:state state :descriptor descriptor}
[rn/view {:padding-bottom 150} [quo/preview-list @state
[preview/customizer state descriptor] (case @type
[rn/view :user user-list
{:padding-vertical 60 :photo photos-list
:align-items :center} :network networks-list)]])))
[quo2/preview-list @state
(case @type
:user user-list
:photo photos-list
:network networks-list)]]]])))
(defn preview-preview-lists
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

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

@ -126,107 +126,107 @@
(def screens-categories (def screens-categories
{:foundations [{:name :shadows {:foundations [{:name :shadows
:component shadows/preview-shadows}] :component shadows/view}]
:animated-list [{:name :animated-header-list :animated-list [{:name :animated-header-list
:component animated-header-list/mock-screen}] :component animated-header-list/mock-screen}]
:avatar [{:name :group-avatar :avatar [{:name :group-avatar
:component group-avatar/preview-group-avatar} :component group-avatar/view}
{:name :icon-avatar {:name :icon-avatar
:component icon-avatar/preview-icon-avatar} :component icon-avatar/view}
{:name :user-avatar {:name :user-avatar
:component user-avatar/preview-user-avatar} :component user-avatar/view}
{:name :wallet-user-avatar {:name :wallet-user-avatar
:component wallet-user-avatar/preview-wallet-user-avatar} :component wallet-user-avatar/view}
{:name :channel-avatar {:name :channel-avatar
:component channel-avatar/preview-channel-avatar} :component channel-avatar/view}
{:name :account-avatar {:name :account-avatar
:component account-avatar/preview-account-avatar}] :component account-avatar/view}]
:banner [{:name :banner :banner [{:name :banner
:component banner/preview-banner}] :component banner/view}]
:buttons [{:name :button :buttons [{:name :button
:component button/preview-button} :component button/view}
{:name :composer-button {:name :composer-button
:component composer-button/preview-composer-button} :component composer-button/view}
{:name :dynamic-button {:name :dynamic-button
:component dynamic-button/preview-dynamic-button} :component dynamic-button/view}
{:name :slide-button {:name :slide-button
:component slide-button/preview-slide-button} :component slide-button/view}
{:name :predictive-keyboard {:name :predictive-keyboard
:component predictive-keyboard/preview-predictive-keyboard} :component predictive-keyboard/view}
{:name :wallet-button {:name :wallet-button
:component wallet-button/preview} :component wallet-button/view}
{:name :wallet-ctas {:name :wallet-ctas
:component wallet-ctas/preview}] :component wallet-ctas/view}]
:browser [{:name :browser-input :browser [{:name :browser-input
:component browser-input/preview-browser-input}] :component browser-input/preview-browser-input}]
:calendar [{:name :calendar :calendar [{:name :calendar
:component calendar/preview-calendar} :component calendar/view}
{:name :calendar-day {:name :calendar-day
:component calendar-day/preview-calendar-day} :component calendar-day/view}
{:name :calendar-year {:name :calendar-year
:component calendar-year/preview-calendar-year}] :component calendar-year/view}]
:code [{:name :snippet :code [{:name :snippet
:component code-snippet/preview-code-snippet}] :component code-snippet/view}]
:colors [{:name :color-picker :colors [{:name :color-picker
:component color-picker/view}] :component color-picker/view}]
:community [{:name :community-card-view :community [{:name :community-card-view
:component community-card/preview-community-card} :component community-card/view}
{:name :community-membership-list-view {:name :community-membership-list-view
:component community-membership-list-view/preview-community-list-view} :component community-membership-list-view/view}
{:name :discover-card {:name :discover-card
:component discover-card/preview-discoverd-card} :component discover-card/view}
{:name :token-gating {:name :token-gating
:options {:insets {:bottom? true}} :options {:insets {:bottom? true}}
:component token-gating/preview-token-gating} :component token-gating/view}
{:name :channel-actions {:name :channel-actions
:options {:insets {:bottom? true}} :options {:insets {:bottom? true}}
:component channel-actions/preview-channel-actions}] :component channel-actions/view}]
:counter [{:name :counter :counter [{:name :counter
:component counter/preview-counter} :component counter/view}
{:name :step {:name :step
:component step/preview-step}] :component step/view}]
:dividers [{:name :divider-label :dividers [{:name :divider-label
:component divider-label/view} :component divider-label/view}
{:name :new-messages {:name :new-messages
:component new-messages/preview-new-messages} :component new-messages/view}
{:name :divider-date {:name :divider-date
:component divider-date/preview-divider-date} :component divider-date/view}
{:name :strength-divider {:name :strength-divider
:component strength-divider/preview-strength-divider}] :component strength-divider/view}]
:drawers [{:name :action-drawers :drawers [{:name :action-drawers
:component action-drawers/preview-action-drawers} :component action-drawers/view}
{:name :documentation-drawer {:name :documentation-drawer
:component documenation-drawers/preview-documenation-drawers} :component documenation-drawers/view}
{:name :drawer-buttons {:name :drawer-buttons
:component drawer-buttons/preview-drawer-buttons} :component drawer-buttons/view}
{:name :permission-drawers {:name :permission-drawers
:component permission-drawers/preview-permission-drawers}] :component permission-drawers/view}]
:dropdowns [{:name :dropdown :dropdowns [{:name :dropdown
:component dropdown/preview-dropdown} :component dropdown/view}
{:name :network-dropdown {:name :network-dropdown
:component network-dropdown/preview-dropdown}] :component network-dropdown/view}]
:empty-state [{:name :empty-state :empty-state [{:name :empty-state
:component empty-state/preview-empty-state}] :component empty-state/view}]
:gradient [{:name :gradient-cover :gradient [{:name :gradient-cover
:component gradient-cover/preview-gradient-cover}] :component gradient-cover/view}]
:graph [{:name :wallet-graph :graph [{:name :wallet-graph
:component wallet-graph/preview-wallet-graph}] :component wallet-graph/view}]
:info [{:name :info-message :info [{:name :info-message
:component info-message/preview-info-message} :component info-message/view}
{:name :information-box {:name :information-box
:component information-box/preview-information-box}] :component information-box/view}]
:inputs [{:name :input :inputs [{:name :input
:component input/preview-input} :component input/view}
{:name :locked-input {:name :locked-input
:component locked-input/preview-locked-input} :component locked-input/view}
{:name :profile-input {:name :profile-input
:component profile-input/preview-profile-input} :component profile-input/view}
{:name :recovery-phrase-input {:name :recovery-phrase-input
:component recovery-phrase-input/preview-recovery-phrase-input} :component recovery-phrase-input/view}
{:name :search-input {:name :search-input
:component search-input/preview-search-input} :component search-input/view}
{:name :title-input {:name :title-input
:component title-input/preview-title-input}] :component title-input/view}]
:numbered-keyboard [{:name :keyboard-key :numbered-keyboard [{:name :keyboard-key
:options {:insets {:top? true}} :options {:insets {:top? true}}
:component keyboard-key/preview-keyboard-key} :component keyboard-key/preview-keyboard-key}
@ -243,16 +243,16 @@
:options {:insets {:top? true}} :options {:insets {:top? true}}
:component link-preview/view}] :component link-preview/view}]
:list-items [{:name :account-list-card :list-items [{:name :account-list-card
:component account-list-card/preview} :component account-list-card/view}
{:name :channel {:name :channel
:component channel/preview-channel} :component channel/view}
{:name :community-list {:name :community-list
:options {:insets {:top? true}} :options {:insets {:top? true}}
:component community-list/view} :component community-list/view}
{:name :dapp {:name :dapp
:component dapp/preview} :component dapp/preview}
{:name :preview-lists {:name :preview-lists
:component preview-lists/preview-preview-lists} :component preview-lists/view}
{:name :user-list {:name :user-list
:component user-list/preview-user-list} :component user-list/preview-user-list}
{:name :token-value {:name :token-value
@ -363,7 +363,7 @@
{:name :wallet-overview {:name :wallet-overview
:component wallet-overview/preview-wallet-overview}] :component wallet-overview/preview-wallet-overview}]
:keycard [{:name :keycard-component :keycard [{:name :keycard-component
:component keycard/preview-keycard}]}) :component keycard/view}]})
(defn- navigation-bar (defn- navigation-bar
[] []

71
src/status_im2/contexts/quo_preview/preview.cljs
View File

@ -139,15 +139,15 @@
"Close"]]]]]]) "Close"]]]]]])
(defn- customizer-select-button (defn- customizer-select-button
[{:keys [open selected-key]}] [{:keys [open selected-option]}]
[rn/pressable [rn/pressable
{:style (style/select-container) {:style (style/select-container)
:on-press #(reset! open true)} :on-press #(reset! open true)}
[rn/text [rn/text
{:style (style/field-select) {:style (style/field-select)
:number-of-lines 1} :number-of-lines 1}
(if selected-key (if selected-option
(humanize selected-key) (or (:value selected-option) (humanize (:key selected-option)))
"Select option")] "Select option")]
[rn/view [rn/view
[quo/icon :i/chevron-right]]]) [quo/icon :i/chevron-right]]])
@ -156,9 +156,9 @@
[] []
(let [open (reagent/atom nil)] (let [open (reagent/atom nil)]
(fn [{:keys [label state options] :as args}] (fn [{:keys [label state options] :as args}]
(let [label (or label (key->text-label (:key args))) (let [label (or label (key->text-label (:key args)))
field-value (reagent/cursor state [(:key args)]) field-value (reagent/cursor state [(:key args)])
selected-key (:key (find-selected-option @field-value options))] selected-option (find-selected-option @field-value options)]
[rn/view {:style style/field-row} [rn/view {:style style/field-row}
[label-view state label] [label-view state label]
[rn/view {:style style/field-column} [rn/view {:style style/field-column}
@ -166,7 +166,7 @@
{:open open {:open open
:options options :options options
:field-value field-value}] :field-value field-value}]
[customizer-select-button {:open open :selected-key selected-key}]]])))) [customizer-select-button {:open open :selected-option selected-option}]]]))))
(defn customizer (defn customizer
[state descriptors] [state descriptors]
@ -189,8 +189,7 @@
([] ([]
(customization-color-option {})) (customization-color-option {}))
([opts] ([opts]
(merge {:label "Custom color:" (merge {:key :customization-color
:key :customization-color
:type :select :type :select
:options (->> colors/customization :options (->> colors/customization
keys keys
@ -200,7 +199,7 @@
opts))) opts)))
(defn blur-view (defn blur-view
[{:keys [show-blur-background? image height blur-view-props style]} children] [{:keys [show-blur-background? image height blur-view-props style]} & children]
[rn/view [rn/view
{:style {:flex 1 {:style {:flex 1
:padding-vertical 16}} :padding-vertical 16}}
@ -221,39 +220,39 @@
:blur-amount 10 :blur-amount 10
:overlay-color (colors/theme-colors colors/white-opa-70 colors/neutral-80-opa-80)} :overlay-color (colors/theme-colors colors/white-opa-70 colors/neutral-80-opa-80)}
blur-view-props)]]) blur-view-props)]])
[rn/view (into [rn/view
{:style (merge {:position :absolute {:style (merge {:position :absolute
:top 32 :top 32
:padding-horizontal 16} :padding-horizontal 16}
style)} style)}]
children]]) children)])
(defn preview-container (defn preview-container
[{:keys [state descriptor blur? [{:keys [state descriptor blur?
component-container-style component-container-style
blur-container-style blur-view-props blur-height show-blur-background?] blur-container-style blur-view-props blur-height show-blur-background?]
:or {blur-height 200}} :or {blur-height 200}}
component] & children]
[rn/scroll-view [rn/scroll-view
{:style (style/panel-basic) {:style (style/panel-basic)
:shows-vertical-scroll-indicator false} :shows-vertical-scroll-indicator false}
[rn/pressable {:on-press rn/dismiss-keyboard!} [rn/pressable {:on-press rn/dismiss-keyboard!}
[rn/view {:style style/customizer-container} (when descriptor
[customizer state descriptor]] [rn/view {:style style/customizer-container}
[rn/view [customizer state descriptor]])
(merge {:style style/component-container} (if blur?
component-container-style) [rn/view {:style (merge style/component-container component-container-style)}
(if blur? (into [blur-view
[blur-view {:show-blur-background? show-blur-background?
{:show-blur-background? show-blur-background? :height blur-height
:height blur-height :style (merge {:width "100%"
:style (merge {:width "100%" :flex-grow 1}
:flex-grow 1} (when-not show-blur-background?
(when-not show-blur-background? {:padding-horizontal 0
{:padding-horizontal 0 :top 0})
:top 0}) blur-container-style)
blur-container-style) :blur-view-props (merge {:blur-type (quo.theme/get-theme)}
:blur-view-props (merge {:blur-type (quo.theme/get-theme)} blur-view-props)}]
blur-view-props)} children)]
component] (into [rn/view {:style (merge style/component-container component-container-style)}]
component)]]]) children))]])