diff --git a/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs index 4c1e289d33..c9564490f7 100644 --- a/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/account_avatar.cljs @@ -1,20 +1,14 @@ (ns status-im2.contexts.quo-preview.avatars.account-avatar - (:require [quo2.components.avatars.account-avatar.view :as account-avatar] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.core :as quo] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Type" - :key :type + [{:key :type :type :select - :options [{:key :default - :value "default"} - {:key :watch-only - :value "watch only"}]} - {:label "Size" - :key :size + :options [{:key :default} + {:key :watch-only}]} + {:key :size :type :select :options [{:key 16 :value "16"} @@ -35,29 +29,12 @@ :type :text} (preview/customization-color-option)]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:customization-color :purple :size 80 :emoji "🍑" :type :default})] (fn [] - [rn/view - {:style {:margin-bottom 50 - :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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/account-avatar @state]]))) diff --git a/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs index cdad0064ae..8bcfb9d7a6 100644 --- a/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs @@ -1,34 +1,26 @@ (ns status-im2.contexts.quo-preview.avatars.channel-avatar (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Size:" - :key :size + [{:key :size :type :select :options [{:key :size/l :value "Large"} - {:key :default :value "Default"}]} - {:label "Emoji:" - :key :emoji - :type :text} - {:label "Full name:" - :key :full-name - :type :text} + {:key :default}]} + {:key :emoji + :type :text} + {:key :full-name + :type :text} (preview/customization-color-option) - {:label "Locked state:" - :key :locked-state + {:key :locked-state :type :select - :options [{:key :not-set - :value "Not set"} - {:key :unlocked - :value "Unlocked"} - {:key :locked - :value "Locked"}]}]) + :options [{:key :not-set} + {:key :unlocked} + {:key :locked}]}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:size :size/l :locked-state :not-set @@ -42,26 +34,8 @@ :unlocked false :locked true nil)] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:style {:padding-bottom 150}} - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor]] - [rn/view - {: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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/channel-avatar + (assoc @state + :locked? locked? + :customization-color customization-color)]])))) diff --git a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs index 4df21a2bb0..335721201d 100644 --- a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs @@ -1,14 +1,11 @@ (ns status-im2.contexts.quo-preview.avatars.group-avatar - (:require [quo2.core :as quo2] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.core :as quo] [reagent.core :as reagent] [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Size" - :key :size + [{:key :size :type :select :options [{:key :size/s-20 :value "20"} @@ -20,40 +17,21 @@ :value "48"} {:key :size/s-80 :value "80"}]} - {:label "Avatar" + {:label "Avatar:" :key :picture? :type :boolean} (preview/customization-color-option)]) (def avatar (resources/get-mock-image :photo1)) -(defn cool-preview +(defn view [] - (let [state (reagent/atom {:theme :light - :customization-color :blue + (let [state (reagent/atom {:customization-color :blue :size :size/s-20 :picture? false})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:style {:padding-bottom 150}} - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor]] - [rn/view - {: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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/group-avatar + (cond-> @state + (:picture? @state) + (assoc :picture avatar))]]))) diff --git a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs index 789a2c7e24..13c64e6750 100644 --- a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs @@ -1,59 +1,27 @@ (ns status-im2.contexts.quo-preview.avatars.icon-avatar - (:require [quo2.components.avatars.icon-avatar :as quo2] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.components.avatars.icon-avatar :as quo] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Size" - :key :size + [{:key :size :type :select - :options [{:key :small - :value "Small"} - {:key :medium - :value "Medium"} - {:key :big - :value "Big"}]} - {:label "Icon" - :key :icon + :options [{:key :small} + {:key :medium} + {:key :big}]} + {:key :icon :type :select - :options [{:key :main-icons/placeholder20 + :options [{:key :i/placeholder20 :value "Placeholder"} - {:key :main-icons/wallet - :value "Wallet"} - {:key :main-icons/play - :value "Play"}]} - {:label "Color" - :key :color - :type :select - :options (map - (fn [c] - {:key c - :value c}) - (keys colors/customization))}]) + {:key :i/wallet} + {:key :i/play}]} + (preview/customization-color-option {:key :color})]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:size :big - :icon :main-icons/placeholder20 + :icon :i/placeholder20 :color :primary})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/icon-avatar @state]]))) diff --git a/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs index 5227c16d3f..d3d23176e5 100644 --- a/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs @@ -1,48 +1,29 @@ (ns status-im2.contexts.quo-preview.avatars.user-avatar - (:require [quo2.components.avatars.user-avatar.view :as quo2] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.components.avatars.user-avatar.view :as quo] [reagent.core :as reagent] [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Size:" - :key :size + [{:key :size :type :select - :options [{:key :big - :value "Big"} - {:key :medium - :value "Medium"} - {:key :small - :value "Small"} - {:key :xs - :value "x Small"} - {:key :xxs - :value "xx Small"} - {:key :xxxs - :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} + :options [{:key :big} + {:key :medium} + {:key :small} + {:key :xs} + {:key :xxs} + {:key :xxxs}]} + (preview/customization-color-option) + {:key :online? + :type :boolean} + {:key :status-indicator? + :type :boolean} {:label "Identicon Ring (applies only when there's no profile picture)" :key :ring? :type :boolean} - {:label "Full name separated by space" - :key :full-name - :type :text} - {:label "Profile Picture" - :key :profile-picture + {:key :full-name + :type :text} + {:key :profile-picture :type :select :options [{:value "None" :key nil} @@ -51,7 +32,7 @@ {:value "pedro.eth" :key (resources/get-mock-image :user-picture-male4)}]}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:full-name "A Y" :status-indicator? true @@ -59,23 +40,5 @@ :size :medium :customization-color :blue})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/user-avatar @state]]))) diff --git a/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs index 43bf2d4ebd..59b35fee74 100644 --- a/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs @@ -1,7 +1,5 @@ (ns status-im2.contexts.quo-preview.avatars.wallet-user-avatar - (:require [quo2.components.avatars.wallet-user-avatar :as quo2] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.components.avatars.wallet-user-avatar :as quo] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -12,46 +10,21 @@ {:label "Last name" :key :l-name :type :text} - {:label "Size" - :key :size + {:key :size :type :select - :options [{:key :small - :value "Small"} - {:key :medium - :value "Medium"} - {:key :large - :value "Large"} + :options [{:key :small} + {:key :medium} + {:key :large} {:key :x-large :value "X Large"}]} - {:label "Color" - :key :color - :type :select - :options (map - (fn [c] - {:key c - :value c}) - (keys colors/customization))}]) + (preview/customization-color-option {:key :color})]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:first-name "empty" :last-name "name" :size :x-large :color :indigo})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/wallet-user-avatar @state]]))) diff --git a/src/status_im2/contexts/quo_preview/banners/banner.cljs b/src/status_im2/contexts/quo_preview/banners/banner.cljs index 63da6cb70e..f39ecb7255 100644 --- a/src/status_im2/contexts/quo_preview/banners/banner.cljs +++ b/src/status_im2/contexts/quo_preview/banners/banner.cljs @@ -1,46 +1,22 @@ (ns status-im2.contexts.quo-preview.banners.banner - (:require [quo2.core :as quo2] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.core :as quo] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "message" - :key :latest-pin-text - :type :text} - {:label "number of messages" - :key :pins-count - :type :text} - {:label "hide pin icon?" - :key :hide-pin? - :type :boolean} - ]) + [{:key :latest-pin-text + :type :text} + {:key :pins-count + :type :text} + {:key :hide-pin? + :type :boolean}]) -(defn cool-preview +(defn view [] - (let [state (reagent/atom - {:hide-pin? false - :pins-count 2 - :latest-pin-text "Be respectful of fellow community members, even if they"})] + (let [state (reagent/atom {:hide-pin? false + :pins-count 2 + :latest-pin-text + "Be respectful of fellow community members, even if they"})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/banner @state]]))) diff --git a/src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs b/src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs deleted file mode 100644 index 528adb45f6..0000000000 --- a/src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs +++ /dev/null @@ -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}]]) diff --git a/src/status_im2/contexts/quo_preview/buttons/button.cljs b/src/status_im2/contexts/quo_preview/buttons/button.cljs index e4b42cb29b..7f851a6762 100644 --- a/src/status_im2/contexts/quo_preview/buttons/button.cljs +++ b/src/status_im2/contexts/quo_preview/buttons/button.cljs @@ -1,33 +1,22 @@ (ns status-im2.contexts.quo-preview.buttons.button (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview] - [status-im2.common.resources :as resources])) + [status-im2.common.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Type:" - :key :type + [{:key :type :type :select - :options [{:key :primary - :value "Primary"} - {:key :positive - :value "Positive"} - {:key :grey - :value "Grey"} - {:key :dark-grey - :value "Dark Grey"} - {:key :outline - :value "Outline"} - {:key :ghost - :value "Ghost"} - {:key :danger - :value "Danger"} - {:key :black - :value "Black"}]} - {:label "Size:" - :key :size + :options [{:key :primary} + {:key :positive} + {:key :grey} + {:key :dark-grey} + {:key :outline} + {:key :ghost} + {:key :danger} + {:key :black}]} + {:key :size :type :select :options [{:key 56 :value "56"} @@ -37,40 +26,25 @@ :value "32"} {:key 24 :value "24"}]} - {:label "Background:" - :key :background + {:key :background :type :select - :options [{:key :blur - :value "Blur"} - {:key :photo - :value "Photo"}]} - {:label "Icon Only?:" - :key :icon-only? - :type :boolean} - {:label "show icon-top " - :key :icon-top - :type :boolean} - {:label "show icon-right" - :key :icon-right - :type :boolean} - {:label "show icon-left" - :key :icon-left - :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))}]) + :options [{:key :blur} + {:key :photo}]} + {:key :icon-only? + :type :boolean} + {:key :icon-top + :type :boolean} + {:key :icon-right + :type :boolean} + {:key :icon-left + :type :boolean} + {:key :disabled? + :type :boolean} + {:key :label + :type :text} + (preview/customization-color-option)]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:label "Press Me" :size 40 @@ -82,46 +56,31 @@ icon-top (reagent/cursor state [:icon-top]) icon-only? (reagent/cursor state [:icon-only?])] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view - {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - (when (= :photo (:background @state)) - [rn/image - {:source (resources/get-mock-image :community-cover) - :style {:position :absolute - :top 0 - :left 0 - :right 0 - :bottom 0}}]) - [quo/button - (merge (dissoc @state - :theme - :customization-color - :icon-left - :icon-right) - {:background (:background @state) - :on-press #(println "Hello world!")} - (when (= :primary (:type @state)) {:customization-color (:customization-color @state)}) - (when @icon-top - {:icon-top :i/placeholder}) - (when @icon-left - {: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}]]) + [preview/preview-container + {:state state + :descriptor descriptor + :component-container-style {:align-items :center}} + (when (= :photo (:background @state)) + [rn/image + {:source (resources/get-mock-image :community-cover) + :style {:position :absolute + :top 0 + :left 0 + :right 0 + :bottom 0}}]) + [quo/button + (merge (dissoc @state + :theme + :customization-color + :icon-left + :icon-right) + {:background (:background @state) + :on-press #(println "Hello world!")} + (when (= :primary (:type @state)) {:customization-color (:customization-color @state)}) + (when @icon-top + {:icon-top :i/placeholder}) + (when @icon-left + {:icon-left :i/placeholder}) + (when @icon-right + {:icon-right :i/placeholder})) + (if @icon-only? :i/placeholder @label)]]))) diff --git a/src/status_im2/contexts/quo_preview/buttons/composer_button.cljs b/src/status_im2/contexts/quo_preview/buttons/composer_button.cljs index 014d18fd5c..70735da38c 100644 --- a/src/status_im2/contexts/quo_preview/buttons/composer_button.cljs +++ b/src/status_im2/contexts/quo_preview/buttons/composer_button.cljs @@ -1,49 +1,24 @@ (ns status-im2.contexts.quo-preview.buttons.composer-button (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [quo2.theme :as quo2.theme] - [react-native.core :as rn] [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview] - [status-im2.common.resources :as resources])) + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Blur?:" - :key :blur? - :type :boolean} - {:label "Disabled?:" - :key :disabled? - :type :boolean}]) + [{:key :blur? + :type :boolean} + {:key :disabled? + :type :boolean}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:icon :i/placeholder + :blur? false :on-press #(js/alert "pressed") :on-long-press #(js/alert "long pressed")})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:flex 1 :padding-bottom 20} - [rn/view {:height 200} - [preview/customizer state descriptor]] - [rn/view - {:flex 1 - :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]]) + [preview/preview-container + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true} + [quo/composer-button @state]]))) diff --git a/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs b/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs index 3bf659b731..dd409c9111 100644 --- a/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs +++ b/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs @@ -1,55 +1,31 @@ (ns status-im2.contexts.quo-preview.buttons.dynamic-button (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] - [utils.i18n :as i18n] - [status-im2.contexts.quo-preview.preview :as preview])) + [status-im2.contexts.quo-preview.preview :as preview] + [utils.i18n :as i18n])) (def descriptor - [{:label "Type:" - :key :type + [{:key :type :type :select - :options [{:key :jump-to - :value "Jump To"} - {:key :mention - :value "Mention"} - {:key :notification-down - :value "Notification Down"} - {:key :notification-up - :value "Notification Up"} - {:key :search - :value "Search"} - {:key :search-with-label - :value "Search With Label"} - {:key :scroll-to-bottom - :value "Bottom"}]} - {:label "Count" - :key :count - :type :text}]) + :options [{:key :jump-to} + {:key :mention} + {:key :notification-down} + {:key :notification-up} + {:key :search} + {:key :search-with-label} + {:key :scroll-to-bottom}]} + {:key :count + :type :text}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:count "5" :type :jump-to :labels {:jump-to (i18n/label :t/jump-to) :search-with-label (i18n/label :t/back)}})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view - {:padding-vertical 60 - :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}]]) + [preview/preview-container + {:state state + :descriptor descriptor + :component-container-style {:align-items :center}} + [quo/dynamic-button @state]]))) diff --git a/src/status_im2/contexts/quo_preview/buttons/predictive_keyboard.cljs b/src/status_im2/contexts/quo_preview/buttons/predictive_keyboard.cljs index cc9a41c0fa..a2825438c0 100644 --- a/src/status_im2/contexts/quo_preview/buttons/predictive_keyboard.cljs +++ b/src/status_im2/contexts/quo_preview/buttons/predictive_keyboard.cljs @@ -1,59 +1,34 @@ (ns status-im2.contexts.quo-preview.buttons.predictive-keyboard (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] - [react-native.blur :as blur] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Type" - :key :type + [{:key :type :type :select - :options [{:key :error :value "Error"} - {:key :empty :value "Empty"} - {:key :info :value "Info"} - {:key :words :value "Words"}]} - {:label "Text" - :key :text - :type :text} - {:label "Blur" - :key :blur? - :type :boolean}]) + :options [{:key :error} + {:key :empty} + {:key :info} + {:key :words}]} + {:key :text + :type :text} + {: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?])] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view - (when @blur? - [blur/view - {:style {:position :absolute - :left 0 - :right 0 - :top 0 - :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}]]) + [preview/preview-container + {:state state + :descriptor descriptor + :blur? @blur? + :blur-container-style {:background-color colors/neutral-80-opa-70} + :blur-view-props {:overlay-color :transparent}} + [quo/predictive-keyboard + (merge @state + {:words ["label" "label" "labor" "ladder" "lady" "lake"] + :on-press #(js/alert (str "Pressed: " %))})]]))) diff --git a/src/status_im2/contexts/quo_preview/buttons/slide_button.cljs b/src/status_im2/contexts/quo_preview/buttons/slide_button.cljs index 7bd2fd2535..e79399cda4 100644 --- a/src/status_im2/contexts/quo_preview/buttons/slide_button.cljs +++ b/src/status_im2/contexts/quo_preview/buttons/slide_button.cljs @@ -1,30 +1,18 @@ (ns status-im2.contexts.quo-preview.buttons.slide-button (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Size:" - :key :size + [{:key :size :type :select - :options [{:key :large - :value "Large"} - {:key :small - :value "Small"}]} - {:label "Disabled:" - :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))}]) + :options [{:key :large} + {:key :small}]} + {:key :disabled? + :type :boolean} + (preview/customization-color-option {:key :color})]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:disabled? false :color :blue @@ -34,34 +22,20 @@ size (reagent/cursor state [:size]) complete? (reagent/atom false)] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view - {:padding-vertical 60 - :padding-horizontal 40 - :align-items :center} - (if (not @complete?) - [quo/slide-button - {:track-text "We gotta slide" - :track-icon :face-id - :customization-color @color - :size @size - :disabled? @disabled? - :on-complete (fn [] - (js/setTimeout (fn [] (reset! complete? true)) - 1000) - (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}]]) + [preview/preview-container + {:state state + :descriptor descriptor + :component-container-style {:align-items :center}} + (if (not @complete?) + [quo/slide-button + {:track-text "We gotta slide" + :track-icon :face-id + :customization-color @color + :size @size + :disabled? @disabled? + :on-complete (fn [] + (js/setTimeout (fn [] (reset! complete? true)) + 1000) + (js/alert "I don't wanna slide anymore"))}] + [quo/button {:on-press (fn [] (reset! complete? false))} + "Try again"])]))) diff --git a/src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs b/src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs index 056c7593f0..b4eb65b72c 100644 --- a/src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs +++ b/src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs @@ -1,35 +1,19 @@ (ns status-im2.contexts.quo-preview.buttons.wallet-button - (:require - [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview])) + (:require [quo2.core :as quo] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Disabled?:" - :key :disabled? - :type :boolean}]) + [{:key :disabled? :type :boolean}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:icon :i/placeholder :on-press #(js/alert "pressed") :on-long-press #(js/alert "long pressed")})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:flex 1 :padding-bottom 20} - [rn/view {:height 200} - [preview/customizer state descriptor]] - [rn/view - {: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]]) + [preview/preview-container + {:state state + :descriptor descriptor + :component-container-style {:align-items :center}} + [quo/wallet-button @state]]))) diff --git a/src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs b/src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs index 309b153ae1..9b2b1f411f 100644 --- a/src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs +++ b/src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs @@ -1,30 +1,12 @@ (ns status-im2.contexts.quo-preview.buttons.wallet-ctas - (:require - [quo2.core :as quo] - [react-native.core :as rn] - [reagent.core :as reagent])) + (:require [quo2.core :as quo] + [status-im2.contexts.quo-preview.preview :as preview])) -(defn cool-preview +(defn view [] - (let [state (reagent/atom {:buy-action #(js/alert "Buy button pressed") - :send-action #(js/alert "Send button pressed") - :receive-action #(js/alert "Receive button pressed") - :bridge-action #(js/alert "Bridge button pressed")})] - (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [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}]]) + [preview/preview-container {} + [quo/wallet-ctas + {:buy-action #(js/alert "Buy button pressed") + :send-action #(js/alert "Send button pressed") + :receive-action #(js/alert "Receive button pressed") + :bridge-action #(js/alert "Bridge button pressed")}]]) diff --git a/src/status_im2/contexts/quo_preview/calendar/calendar.cljs b/src/status_im2/contexts/quo_preview/calendar/calendar.cljs index e7dd0fcf2d..73f714ed88 100644 --- a/src/status_im2/contexts/quo_preview/calendar/calendar.cljs +++ b/src/status_im2/contexts/quo_preview/calendar/calendar.cljs @@ -1,42 +1,26 @@ (ns status-im2.contexts.quo-preview.calendar.calendar - (:require [status-im2.contexts.quo-preview.preview :as preview] - [react-native.core :as rn] - [utils.datetime :as dt] - [quo2.foundations.colors :as colors] + (:require [quo2.core :as quo] [reagent.core :as reagent] - [quo2.core :as quo])) + [status-im2.contexts.quo-preview.preview :as preview] + [utils.datetime :as datetime])) (def descriptor - [{:label "Start Date" - :key :start-date - :type :text} - {:label "End Date" - :key :end-date - :type :text}]) + [{:key :start-date + :type :text} + {:key :end-date + :type :text}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:start-date nil :end-date nil}) range (reagent/atom {:start-date nil :end-date nil})] - (fn - [] - [rn/touchable-without-feedback - {:on-press rn/dismiss-keyboard!} - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor] - [rn/view {:style {:padding 19 :flex-grow 2}} - [quo/calendar - {:start-date (:start-date @range) - :end-date (:end-date @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]]) + (fn [] + [preview/preview-container {:state state :descriptor descriptor} + [quo/calendar + {:start-date (:start-date @range) + :end-date (:end-date @range) + :on-change (fn [new-range] + (reset! state + {:start-date (datetime/format-date (:start-date new-range)) + :end-date (datetime/format-date (:end-date new-range))}) + (reset! range new-range))}]]))) diff --git a/src/status_im2/contexts/quo_preview/calendar/calendar_day.cljs b/src/status_im2/contexts/quo_preview/calendar/calendar_day.cljs index 6de205af63..330fc7dcdb 100644 --- a/src/status_im2/contexts/quo_preview/calendar/calendar_day.cljs +++ b/src/status_im2/contexts/quo_preview/calendar/calendar_day.cljs @@ -1,45 +1,21 @@ (ns status-im2.contexts.quo-preview.calendar.calendar-day - (:require [status-im2.contexts.quo-preview.preview :as preview] - [react-native.core :as rn] - [quo2.foundations.colors :as colors] + (:require [quo2.core :as quo] [reagent.core :as reagent] - [quo2.core :as quo])) + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "State:" - :key :state + [(preview/customization-color-option) + {:key :state :type :select - :options [{:key :default - :value "Default"} - {:key :selected - :value "Selected"} - {:key :disabled - :value "Disabled"} - {:key :today - :value "Today"}]}]) + :options [{:key :default} + {:key :selected} + {:key :disabled} + {:key :today}]}]) -(defn cool-preview +(defn view [] - (let [state (reagent/atom - {:state :default})] - (fn - [] - [rn/touchable-without-feedback - {: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}]]) + (let [state (reagent/atom {:state :default + :customization-color :blue})] + (fn [] + [preview/preview-container {:state state :descriptor descriptor} + [quo/calendar-day @state 12]]))) diff --git a/src/status_im2/contexts/quo_preview/calendar/calendar_year.cljs b/src/status_im2/contexts/quo_preview/calendar/calendar_year.cljs index 4b291a093e..0ff94fbc63 100644 --- a/src/status_im2/contexts/quo_preview/calendar/calendar_year.cljs +++ b/src/status_im2/contexts/quo_preview/calendar/calendar_year.cljs @@ -1,39 +1,16 @@ (ns status-im2.contexts.quo-preview.calendar.calendar-year - (:require [status-im2.contexts.quo-preview.preview :as preview] - [react-native.core :as rn] - [quo2.foundations.colors :as colors] + (:require [quo2.core :as quo] [reagent.core :as reagent] - [quo2.core :as quo])) + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Selected?" - :key :selected? - :type :boolean} - {:label "Disabled?" - :key :disabled? - :type :boolean}]) + [{:key :selected? :type :boolean} + {:key :disabled? :type :boolean}]) -(defn cool-preview +(defn view [] - (let [state (reagent/atom {:selected? false :disabled? false})] - (fn - [] - [rn/touchable-without-feedback - {:on-press rn/dismiss-keyboard!} - [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}]]) + (let [state (reagent/atom {:selected? false + :disabled? false})] + (fn [] + [preview/preview-container {:state state :descriptor descriptor} + [quo/calendar-year @state "2023"]]))) diff --git a/src/status_im2/contexts/quo_preview/code/snippet.cljs b/src/status_im2/contexts/quo_preview/code/snippet.cljs index f1bc89c405..4a5d77b6f4 100644 --- a/src/status_im2/contexts/quo_preview/code/snippet.cljs +++ b/src/status_im2/contexts/quo_preview/code/snippet.cljs @@ -1,7 +1,5 @@ (ns status-im2.contexts.quo-preview.code.snippet - (:require [quo2.components.code.snippet :as snippet] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.core :as quo] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -69,25 +67,21 @@ :text go-example}}) (def descriptor - [{:label "Language:" - :key :language + [{:key :language :type :select - :options [{:key :clojure - :value :clojure} - {:key :go - :value :go}]} - {:label "Max lines:" - :key :max-lines + :options [{:key :clojure} + {:key :go}]} + {:key :max-lines :type :select :options (map (fn [n] {:key n :value (str n " lines")}) (range 0 41 5))} - {:label "Syntax highlight:" + {:label "Syntax highlight?" :key :syntax :type :boolean}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:language :clojure :max-lines 40 @@ -99,25 +93,9 @@ (js/parseInt max-lines) (when-not (js/Number.isNaN max-lines) max-lines))] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:style {:padding-bottom 150}} - [preview/customizer state descriptor] - [rn/view - {:style {:padding-vertical 60 - :padding-horizontal 16}} - [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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/snippet + {:language language + :max-lines max-lines + :on-copy-press #(js/alert %)} + text]])))) diff --git a/src/status_im2/contexts/quo_preview/community/channel_actions.cljs b/src/status_im2/contexts/quo_preview/community/channel_actions.cljs index deb2a6e375..ae4f40eaf6 100644 --- a/src/status_im2/contexts/quo_preview/community/channel_actions.cljs +++ b/src/status_im2/contexts/quo_preview/community/channel_actions.cljs @@ -1,27 +1,27 @@ (ns status-im2.contexts.quo-preview.community.channel-actions - (:require [react-native.core :as rn] - [quo2.components.community.channel-actions :as channel-actions])) + (:require [quo2.core :as quo] + [react-native.core :as rn])) -(defn preview-channel-actions +(defn view [] [rn/view {:flex 1} [rn/scroll-view {:style {:flex 1 :padding-horizontal 20}} - [channel-actions/channel-actions + [quo/channel-actions {:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 0}]}] [rn/view {:height 50}] - [channel-actions/channel-actions + [quo/channel-actions {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} {:label "Mute chat" :color :blue :icon :i/muted}]}] [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} {:label "Mute chat" :color :blue :icon :i/muted}]}] [rn/view {:height 50}] - [channel-actions/channel-actions + [quo/channel-actions {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5} {:label "Mute chat" :color :blue :icon :i/muted} {:label "Something else" :color :blue :icon :i/placeholder}]}]]]) diff --git a/src/status_im2/contexts/quo_preview/community/community_card_view.cljs b/src/status_im2/contexts/quo_preview/community/community_card_view.cljs index 37774ca912..a238612eb6 100644 --- a/src/status_im2/contexts/quo_preview/community/community_card_view.cljs +++ b/src/status_im2/contexts/quo_preview/community/community_card_view.cljs @@ -1,12 +1,10 @@ (ns status-im2.contexts.quo-preview.community.community-card-view (:require [quo.design-system.colors :as quo.colors] - [quo2.components.community.community-card-view :as community-card-view] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + [quo2.core :as quo] [reagent.core :as reagent] - [utils.i18n :as i18n] [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 {:id "id" @@ -28,48 +26,22 @@ :emoji (resources/get-image :podcasts)}]}) (def descriptor - [{:label "Status:" - :key :status + [{:key :status :type :select - :options [{:key :gated - :value "Gated"} - {:key :open - :value "Open"}]} - {:label "Locked?" - :key :locked? - :type :boolean} - {:label "Loading?" - :key :loading? - :type :boolean}]) + :options [{:key :gated} + {:key :open}]} + {:key :locked? + :type :boolean} + {:key :loading? + :type :boolean}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:status :gated :locked? true :loading? false})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [rn/view - {:flex 1 - :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}]]) - + [preview/preview-container {:state state :descriptor descriptor} + [quo/community-card-view-item + {:community (merge @state community-data) + :loading? (:loading? @state)}]]))) diff --git a/src/status_im2/contexts/quo_preview/community/community_membership_list_view.cljs b/src/status_im2/contexts/quo_preview/community/community_membership_list_view.cljs index eb32107b3f..58d71ce86e 100644 --- a/src/status_im2/contexts/quo_preview/community/community_membership_list_view.cljs +++ b/src/status_im2/contexts/quo_preview/community/community_membership_list_view.cljs @@ -1,70 +1,37 @@ (ns status-im2.contexts.quo-preview.community.community-membership-list-view - (:require [quo.previews.preview :as preview] - [quo.react-native :as rn] - [quo2.components.community.community-list-view :as community-list-view] - [quo2.foundations.colors :as colors] + (:require [quo2.core :as quo] [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 - [{:label "Notifications:" - :key :notifications + [{:key :notifications :type :select - :options [{:key :muted - :value "Muted"} - {:key :unread-mentions-count - :value "Mention counts"} - {:key :unread-messages-count - :value "Unread messages"}]} - {:label "Status:" - :key :status + :options [{:key :muted} + {:key :unread-mentions-count} + {:key :unread-messages-count}]} + {:key :status :type :select - :options [{:key :gated - :value "Gated"} - {:key :open - :value "Open"}]} - {:label "Locked:" - :key :locked? - :type :boolean}]) + :options [{:key :gated} + {:key :open}]} + {:key :locked? + :type :boolean}]) -(defn cool-preview +(defn view [] - (let [notifications (reagent/atom (:notifications nil)) - state (reagent/atom {:locked? true - :notifications nil - :status (if notifications - :gated - :open)})] + (let [state (reagent/atom {:locked? true + :notifications :muted + :status :gated})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [rn/view - {:flex 1 - :padding 16} - [preview/customizer state descriptor]] - [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) + [preview/preview-container {:state state :descriptor descriptor} + [quo/communities-membership-list-item {} + false + (cond-> (merge @state data/community) + (= :muted (:notifications @state)) + (assoc :muted? true) - (= :unread-mentions-count (:notifications @state)) - (assoc :unread-mentions-count 5) + (= :unread-mentions-count (:notifications @state)) + (assoc :unread-mentions-count 5) - (= :unread-messages-count (:notifications @state)) - (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}]]) + (= :unread-messages-count (:notifications @state)) + (assoc :unread-messages? true))]]))) diff --git a/src/status_im2/contexts/quo_preview/community/discover_card.cljs b/src/status_im2/contexts/quo_preview/community/discover_card.cljs index d0296d7439..7d3dac2aac 100644 --- a/src/status_im2/contexts/quo_preview/community/discover_card.cljs +++ b/src/status_im2/contexts/quo_preview/community/discover_card.cljs @@ -1,42 +1,17 @@ (ns status-im2.contexts.quo-preview.community.discover-card - (:require [quo.previews.preview :as preview] - [quo.react-native :as rn] - [quo2.components.community.banner.view :as discover-card] - [quo2.foundations.colors :as colors] + (:require [quo2.core :as quo] [reagent.core :as reagent] - [utils.i18n :as i18n])) + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Joined:" - :key :joined? - :type :boolean}]) + [{:key :title :type :text} + {:key :description :type :text}]) -(defn cool-preview +(defn view [] - (let [state (reagent/atom {:joined? :false})] + (let [state (reagent/atom {:title "Discover" + :description "Your favourite communities" + :joined? false})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/discover-card @state]]))) diff --git a/src/status_im2/contexts/quo_preview/community/token_gating.cljs b/src/status_im2/contexts/quo_preview/community/token_gating.cljs index ccbc7d0f8e..c97350279c 100644 --- a/src/status_im2/contexts/quo_preview/community/token_gating.cljs +++ b/src/status_im2/contexts/quo_preview/community/token_gating.cljs @@ -1,27 +1,21 @@ (ns status-im2.contexts.quo-preview.community.token-gating - (:require - [quo2.foundations.resources :as resources] - [reagent.core :as reagent] - [react-native.core :as rn] - [status-im2.contexts.quo-preview.preview :as preview] - [quo2.core :as quo])) + (:require [quo2.core :as quo] + [quo2.foundations.resources :as resources] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Tokens sufficient" + [{:label "Tokens sufficient?" :key :sufficient? :type :boolean} - {:label "Many tokens ?" - :key :many-tokens? - :type :boolean} - {:label "Loading ?" - :key :loading? - :type :boolean} - {:label "Сondition ?" - :key :condition? - :type :boolean} - {:label "Padding ?" - :key :padding? - :type :boolean}]) + {:key :many-tokens? + :type :boolean} + {:key :loading? + :type :boolean} + {:key :condition? + :type :boolean} + {:key :padding? + :type :boolean}]) (defn join-gate-options-base [sufficient? many-tokens? loading?] @@ -75,17 +69,12 @@ loading?)]) :padding? padding?})) -(def state - (reagent/atom {:sufficient? false - :many-tokens? false - :condition? false - :padding? false})) - -(defn preview-token-gating +(defn view [] - (let [preview-props (get-mocked-props @state)] - [rn/view {:flex 1} - [rn/scroll-view {:style {:flex 1}} - [preview/customizer state descriptor]] - [rn/view {:padding-horizontal 20 :padding-vertical 20} - [quo/token-requirement-list preview-props]]])) + (let [state (reagent/atom {:sufficient? false + :many-tokens? false + :condition? false + :padding? false})] + (fn [] + [preview/preview-container {:state state :descriptor descriptor} + [quo/token-requirement-list (get-mocked-props @state)]]))) diff --git a/src/status_im2/contexts/quo_preview/counter/counter.cljs b/src/status_im2/contexts/quo_preview/counter/counter.cljs index 7a344244c6..a2f00f4b7b 100644 --- a/src/status_im2/contexts/quo_preview/counter/counter.cljs +++ b/src/status_im2/contexts/quo_preview/counter/counter.cljs @@ -1,52 +1,23 @@ (ns status-im2.contexts.quo-preview.counter.counter (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Type:" - :key :type + [{:key :type :type :select - :options [{:key :default - :value "Default"} - {:key :secondary - :value "Secondary"} - {:key :grey - :value "Grey"} - {:key :outline - :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))}]) + :options [{:key :default} + {:key :secondary} + {:key :grey} + {:key :outline}]} + {:key :value + :type :text} + (preview/customization-color-option)]) -(defn cool-preview +(defn view [] - (let [state (reagent/atom {:value 5 :type :default})] + (let [state (reagent/atom {:value "5" + :type :default})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/counter @state (:value @state)]]))) diff --git a/src/status_im2/contexts/quo_preview/counter/step.cljs b/src/status_im2/contexts/quo_preview/counter/step.cljs index 01feb13457..8f90ba7fc0 100644 --- a/src/status_im2/contexts/quo_preview/counter/step.cljs +++ b/src/status_im2/contexts/quo_preview/counter/step.cljs @@ -1,46 +1,28 @@ (ns status-im2.contexts.quo-preview.counter.step - (:require [quo2.core :as quo2] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.core :as quo] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Type:" - :key :type + [{:key :type :type :select - :options [{:key :neutral - :value "Neutral (default)"} - {:key :active - :value "Active"} - {:key :complete - :value "Complete"}]} - {:label "In blur view?" - :key :in-blur-view? - :type :boolean} - {:label "Value" - :key :value - :type :text}]) + :options [{:key :neutral} + {:key :active} + {:key :complete}]} + {:key :in-blur-view? + :type :boolean} + {: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 [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view - {:padding-vertical 60 - :align-items :center} - [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}]]) + [preview/preview-container + {:state state + :descriptor descriptor + :blur? (:in-blur-view? @state) + :show-blur-background? (:in-blur-view? @state)} + [quo/step @state (:value @state)]]))) diff --git a/src/status_im2/contexts/quo_preview/dividers/date.cljs b/src/status_im2/contexts/quo_preview/dividers/date.cljs index eed133b9e1..a0e6449c36 100644 --- a/src/status_im2/contexts/quo_preview/dividers/date.cljs +++ b/src/status_im2/contexts/quo_preview/dividers/date.cljs @@ -1,33 +1,14 @@ (ns status-im2.contexts.quo-preview.dividers.date (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Value" - :key :label - :type :text}]) -(defn cool-preview + [{:key :label :type :text}]) + +(defn view [] (let [state (reagent/atom {:label "Today"})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/divider-date (@state :label)]]))) diff --git a/src/status_im2/contexts/quo_preview/dividers/new_messages.cljs b/src/status_im2/contexts/quo_preview/dividers/new_messages.cljs index 0f6442ffae..2eed1052f3 100644 --- a/src/status_im2/contexts/quo_preview/dividers/new_messages.cljs +++ b/src/status_im2/contexts/quo_preview/dividers/new_messages.cljs @@ -1,62 +1,30 @@ (ns status-im2.contexts.quo-preview.dividers.new-messages - (:require [quo2.components.dividers.new-messages :as new-messages] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.core :as quo] [reagent.core :as reagent] - [utils.i18n :as i18n] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Label" - :key :label - :type :text} - {:label "Color" - :key :color + [{:key :label + :type :text} + {:key :color :type :select - :options [{:key :primary - :value "Primary"} - {:key :purple - :value "Purple"} - {:key :indigo - :value "Indigo"} - {:key :turquoise - :value "Turquoise"} - {:key :blue - :value "Blue"} - {:key :green - :value "Green"} - {:key :yellow - :value "yellow"} - {:key :orange - :value "Orange"} - {:key :red - :value "Red"} - {:key :pink - :value "Pink"} - {:key :brown - :value "Brown"} - {:key :beige - :value "Beige"}]}]) -(defn cool-preview + :options [{:key :primary} + {:key :purple} + {:key :indigo} + {:key :turquoise} + {:key :blue} + {:key :green} + {:key :yellow} + {:key :orange} + {:key :red} + {:key :pink} + {:key :brown} + {:key :beige}]}]) + +(defn view [] - (let [state (reagent/atom {:label (i18n/label :new-messages-header) + (let [state (reagent/atom {:label "New messages" :color :primary})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/new-messages @state]]))) diff --git a/src/status_im2/contexts/quo_preview/dividers/strength_divider.cljs b/src/status_im2/contexts/quo_preview/dividers/strength_divider.cljs index 58afc73663..57b7855599 100644 --- a/src/status_im2/contexts/quo_preview/dividers/strength_divider.cljs +++ b/src/status_im2/contexts/quo_preview/dividers/strength_divider.cljs @@ -1,55 +1,28 @@ (ns status-im2.contexts.quo-preview.dividers.strength-divider (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Type" - :key :type + [{:key :type :type :select - :options [{:key :very-weak - :value "Very weak"} - {:key :weak - :value "Weak"} - {:key :okay - :value "Okay"} - {:key :strong - :value "Strong"} - {:key :very-strong - :value "Very strong"} - {:key :alert - :value "Alert"} - {:key :info - :value "Info"}]} - {:label "Text(only works for info/alert)" + :options [{:key :very-weak} + {:key :weak} + {:key :okay} + {:key :strong} + {:key :very-strong} + {:key :alert} + {:key :info}]} + {:label "Text (only works for info/alert)" :key :text :type :text}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:text "Common password, shouldn’t be used" - :type :alert}) - text (reagent/cursor state [:text]) - type (reagent/cursor state [:type])] + :type :alert})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60 :background-color colors/neutral-95} - [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}]]) - + [preview/preview-container {:state state :descriptor descriptor} + [quo/strength-divider + {:type (:type @state)} + (:text @state)]]))) diff --git a/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs b/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs index ab3f0bfcb4..d11ce0dd17 100644 --- a/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs +++ b/src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs @@ -1,26 +1,21 @@ (ns status-im2.contexts.quo-preview.drawers.action-drawers (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [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 - [{:label "Muted?" - :key :muted? - :type :boolean} - {:label "Mark as read disabled?" - :key :mark-as-read-disabled? - :type :boolean} - {:label "Show red options?" - :key :show-red-options? - :type :boolean} - {:label "Drawer theme" - :key :theme + [{:key :muted? + :type :boolean} + {:key :mark-as-read-disabled? + :type :boolean} + {:key :show-red-options? + :type :boolean} + {:key :theme :type :select - :options [{:key :dark :value "Dark"} - {:key :light :value "Light"} + :options [{:key :dark} + {:key :light} {:key nil :value "System"}]}]) (def options-with-consequences @@ -30,7 +25,7 @@ :add-divider? true :on-press #(js/alert "clear history")}]) -(defn render-action-sheet +(defn action-sheet [state] [quo/action-drawer (cond-> @@ -58,31 +53,17 @@ (:show-red-options? @state) (conj options-with-consequences))]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:muted? true :show-red-options? true})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 400} - [preview/customizer state descriptor] - [quo/button - {:container-style {:margin-horizontal 40} - :on-press #(rf/dispatch [:show-bottom-sheet - {:content (fn [] [render-action-sheet state]) - :theme (:theme @state)}])} - "See in bottom sheet"] - [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))}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/button + {:container-style {:margin-horizontal 40} + :on-press #(rf/dispatch [:show-bottom-sheet + {:content (fn [] [action-sheet state]) + :theme (:theme @state)}])} + "See in bottom sheet"] + [rn/view {:padding-vertical 60} + [action-sheet state]]]))) diff --git a/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs b/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs index 00a81ae2d1..6a6d2440e4 100644 --- a/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs +++ b/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs @@ -7,27 +7,23 @@ [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Title" - :key :title - :type :text} - {:label "Show button" - :key :show-button? - :type :boolean} - {:label "Button label" - :key :button-label - :type :text} - {:label "Shell" - :key :shell? - :type :boolean}]) + [{:key :title + :type :text} + {:key :show-button? + :type :boolean} + {:key :button-label + :type :text} + {:key :shell? + :type :boolean}]) (defn documentation-content - [override-theme] - [quo/text {:style {:color (colors/theme-colors colors/neutral-100 colors/white override-theme)}} + [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."]) (defn documentation-content-full - [override-theme] - (let [text-color (colors/theme-colors colors/neutral-100 colors/white override-theme) + [theme] + (let [text-color (colors/theme-colors colors/neutral-100 colors/white theme) text-style {:color text-color :margin-bottom 10}] [rn/view [quo/text {:style text-style} @@ -75,7 +71,7 @@ [quo/text {:style text-style} "Group chats are always end-to-end encrypted with secure cryptographic keys. Only the group chat members will have access to the messages in it. Status doesn't have the keys and can't access any messages by design."]])) -(defn render-documenation-drawer +(defn documenation-drawer [title show-button? button-label expanded? shell?] [quo/documentation-drawers {:title title @@ -88,45 +84,26 @@ [documentation-content-full (when shell? :dark)] [documentation-content (when shell? :dark)])]) -(defn cool-preview +(defn view [] - (let - [state - (reagent/atom - {:title "Create a group chat" - :button-label "Read more"}) - title (reagent/cursor state [:title]) - show-button? (reagent/cursor state [:show-button?]) - button-label (reagent/cursor state [:button-label]) - shell? (reagent/cursor state [:shell?]) - expanded? (reagent/atom false)] + (let [state (reagent/atom {:title "Create a group chat" + :button-label "Read more"}) + title (reagent/cursor state [:title]) + show-button? (reagent/cursor state [:show-button?]) + button-label (reagent/cursor state [:button-label]) + shell? (reagent/cursor state [:shell?]) + expanded? (reagent/atom false)] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60} - [quo/button - {:container-style {:margin-horizontal 40 - :margin-bottom 20} - :on-press #(rf/dispatch [:show-bottom-sheet - {:content (constantly [render-documenation-drawer @title - @show-button? - @button-label expanded? @shell?]) - :expandable? @show-button? - :shell? @shell? - :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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/button + {:container-style {:margin-horizontal 40 + :margin-bottom 20} + :on-press #(rf/dispatch [:show-bottom-sheet + {:content (constantly [documenation-drawer @title + @show-button? + @button-label expanded? @shell?]) + :expandable? @show-button? + :shell? @shell? + :expanded? @expanded?}])} + "Open drawer"] + [documenation-drawer @title @show-button? @button-label expanded?]]))) diff --git a/src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs b/src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs index 255115ec2d..d6b1536b50 100644 --- a/src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs +++ b/src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs @@ -1,20 +1,16 @@ (ns status-im2.contexts.quo-preview.drawers.drawer-buttons (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Top Heading" - :key :top-heading - :type :text} - {:label "Top Sub heading" - :key :top-sub-heading - :type :text} - {:label "Bottom heading" - :key :bottom-heading - :type :text}]) + [{:key :top-heading + :type :text} + {:key :top-sub-heading + :type :text} + {:key :bottom-heading + :type :text}]) (defn text-with-link [] @@ -35,40 +31,20 @@ :weight :semi-bold} "Terms of Use"]]) -(defn render-drawer-buttons - [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 +(defn view [] - (let [state (reagent/atom {:top-heading "Sign in " + (let [state (reagent/atom {:top-heading "Sign in" :top-sub-heading "You already use Status" - :bottom-heading "I’m new to Status"})] + :bottom-heading "I'm new to Status"})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 400} - [preview/customizer state descriptor] - [rn/view {:padding-vertical 60} - [render-drawer-buttons state]]]]))) - -(defn preview-drawer-buttons - [] - [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 :id}]]) + [preview/preview-container + {:state state + :descriptor descriptor + :component-container-style {:margin-top 40}} + [quo/drawer-buttons + {: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]]]))) diff --git a/src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs b/src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs index 1af8ca17fa..9ab2075277 100644 --- a/src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs +++ b/src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs @@ -5,6 +5,8 @@ [react-native.core :as rn] [status-im2.common.resources :as resources])) +(def token-icon (resources/get-mock-image :status-logo)) + (defn example-1 [] [:<> @@ -13,14 +15,12 @@ {:size 24 :locked? false :tokens [{:id 1 - :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)} - {:id 2 :token-icon (resources/get-mock-image :status-logo)} - {:id 3 :token-icon (resources/get-mock-image :status-logo)} - {:id 4 :token-icon (resources/get-mock-image :status-logo)} - {:id 5 :token-icon (resources/get-mock-image :status-logo)}]}] - :background-color (colors/theme-colors - colors/neutral-10 - colors/neutral-80)}] + :group [{:id 1 :token-icon token-icon} + {:id 2 :token-icon token-icon} + {:id 3 :token-icon token-icon} + {:id 4 :token-icon token-icon} + {:id 5 :token-icon token-icon}]}] + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)}] [quo/text {:style {:margin-left 4 :margin-right 4}} "Or"] @@ -28,14 +28,12 @@ {:size 24 :locked? false :tokens [{:id 1 - :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)} - {:id 2 :token-icon (resources/get-mock-image :status-logo)} - {:id 3 :token-icon (resources/get-mock-image :status-logo)} - {:id 4 :token-icon (resources/get-mock-image :status-logo)} - {:id 5 :token-icon (resources/get-mock-image :status-logo)}]}] - :background-color (colors/theme-colors - colors/neutral-10 - colors/neutral-80)}] + :group [{:id 1 :token-icon token-icon} + {:id 2 :token-icon token-icon} + {:id 3 :token-icon token-icon} + {:id 4 :token-icon token-icon} + {:id 5 :token-icon token-icon}]}] + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)}] [quo/text {:style {:margin-left 4}} "To post"]]) (defn example-2 @@ -53,7 +51,7 @@ [quo/icon :i/communities {:color (colors/theme-colors colors/neutral-100 colors/white)}] [quo/text {:style {:margin-right 4}} "Join community to post"]]) -(defn cool-preview +(defn view [] (fn [] [:<> @@ -63,15 +61,3 @@ [quo/permission-context [example-2] #(js/alert "drawer pressed")]] [rn/view {:margin-top 60} [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}]]) diff --git a/src/status_im2/contexts/quo_preview/dropdowns/dropdown.cljs b/src/status_im2/contexts/quo_preview/dropdowns/dropdown.cljs index 1c2eafc0b0..d2a8e603fd 100644 --- a/src/status_im2/contexts/quo_preview/dropdowns/dropdown.cljs +++ b/src/status_im2/contexts/quo_preview/dropdowns/dropdown.cljs @@ -1,32 +1,20 @@ (ns status-im2.contexts.quo-preview.dropdowns.dropdown - (:require [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.core :as quo] [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview] - [quo2.core :as quo])) + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Type:" - :key :type + [{:key :type :type :select - :options [{:key :primary - :value "Primary"} - {:key :secondary - :value "Secondary"} - {:key :grey - :value "Grey"} - {:key :dark-grey - :value "Dark Grey"} - {:key :outline - :value "Outline"} - {:key :ghost - :value "Ghost"} - {:key :danger - :value "Danger"} - {:key :positive - :value "Positive"}]} - {:label "Size:" - :key :size + :options [{:key :primary} + {:key :secondary} + {:key :grey} + {:key :dark-grey} + {:key :outline} + {:key :ghost} + {:key :danger} + {:key :positive}]} + {:key :size :type :select :options [{:key 56 :value "56"} @@ -36,20 +24,17 @@ :value "32"} {:key 24 :value "24"}]} - {:label "Icon:" - :key :icon - :type :boolean} + {:key :icon + :type :boolean} {:label "Before icon:" :key :before :type :boolean} - {:label "Disabled:" - :key :disabled - :type :boolean} - {:label "Label" - :key :label - :type :text}]) + {:key :disabled + :type :boolean} + {:key :label + :type :text}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:label "Press Me" :size 40}) @@ -57,32 +42,16 @@ before (reagent/cursor state [:before]) icon (reagent/cursor state [:icon])] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view - {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo/dropdown - (merge (dissoc @state - :theme - :before - :after) - {:on-press #(println "Hello world!")} - (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}]]) + [preview/preview-container + {:state state + :descriptor descriptor + :component-container-style {:align-items :center}} + [quo/dropdown + (merge (dissoc @state + :theme + :before + :after) + {:on-press #(println "Hello world!")} + (when @before + {:before :i/placeholder})) + (if @icon :i/placeholder @label)]]))) diff --git a/src/status_im2/contexts/quo_preview/dropdowns/network_dropdown.cljs b/src/status_im2/contexts/quo_preview/dropdowns/network_dropdown.cljs index f387d6cce3..b848b30186 100644 --- a/src/status_im2/contexts/quo_preview/dropdowns/network_dropdown.cljs +++ b/src/status_im2/contexts/quo_preview/dropdowns/network_dropdown.cljs @@ -8,35 +8,27 @@ (def descriptor [{:key :state :type :select - :options [{:key :default - :value "Default"} - {:key :disabled - :value "Disabled"}]} + :options [{:key :default} + {:key :disabled}]} {:key :blur? :type :select - :options [{:key true - :value "True"} - {:key false - :value "False"}]} + :options [{:key true} + {:key false}]} {:key :amount :type :select - :options [{:key 1 - :value 1} - {:key 2 - :value 2} - {:key 3 - :value 3}]}]) + :options [{:key 1} + {:key 2} + {:key 3}]}]) (def ^:private networks-list [{:source (quo.resources/get-network :ethereum)} {:source (quo.resources/get-network :optimism)} {:source (quo.resources/get-network :arbitrum)}]) -(defn preview-dropdown +(defn view [] (let [component-state (reagent/atom {:state :default :blur? false :amount 3})] (fn [] - [preview/preview-container {:state component-state :descriptor descriptor diff --git a/src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs b/src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs index 09e37c96c2..dd27526ff8 100644 --- a/src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs +++ b/src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs @@ -1,40 +1,28 @@ (ns status-im2.contexts.quo-preview.empty-state.empty-state (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview] - [status-im2.common.resources :as resources])) + [status-im2.common.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Title:" - :key :title - :type :text} - {:label "Description:" - :key :description - :type :text} - {:label "Image:" - :key :image + [{:key :title + :type :text} + {:key :description + :type :text} + {:key :image :type :select - :options [{:key :no-contacts-light - :value "No contacts light"} - {:key :no-contacts-dark - :value "No contacts dark"} - {:key :no-messages-light - :value "No messages light"} - {:key :no-messages-dark - :value "No messages dark"}]} - {:label "Upper button text" - :key :upper-button-text - :type :text} - {:label "Lower button text" - :key :lower-button-text - :type :text} - {:label "Blur:" - :key :blur? - :type :boolean}]) + :options [{:key :no-contacts-light} + {:key :no-contacts-dark} + {:key :no-messages-light} + {:key :no-messages-dark}]} + {:key :upper-button-text + :type :text} + {:key :lower-button-text + :type :text} + {:key :blur? + :type :boolean}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:image :no-messages-light :title "A big friendly title" @@ -43,42 +31,18 @@ :upper-button-text "Send community link" :lower-button-text "Invite friends to Status"})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view - {:style {:margin-vertical 24 - :background-color (when (:blur? @state) colors/neutral-95)}} - [preview/blur-view - {:style {:width "100%" - :align-items :center - :top (if (:blur? @state) 32 16) - :position (if (:blur? @state) - :absolute - :relative)} - :height 300 - :show-blur-background? (:blur? @state) - :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}]]) + [preview/preview-container + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :blur-height 300 + :show-blur-background? true} + [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))]]))) diff --git a/src/status_im2/contexts/quo_preview/foundations/shadows.cljs b/src/status_im2/contexts/quo_preview/foundations/shadows.cljs index d5644bf232..ba29fb9714 100644 --- a/src/status_im2/contexts/quo_preview/foundations/shadows.cljs +++ b/src/status_im2/contexts/quo_preview/foundations/shadows.cljs @@ -24,50 +24,36 @@ (when shadow? shadow-style))}]]) (def descriptor - [{:label "Shadows enabled?" - :key :shadow? - :type :boolean}]) + [{:key :shadow? + :type :boolean}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:shadow? true}) shadow? (reagent/cursor state [:shadow?])] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:style {:padding-bottom 150}} - [preview/customizer state descriptor] - [quo/text - {:style {:margin-left :auto - :margin-right :auto - :align-items :center}} - "Normal Scales"] - [demo-box @shadow? "Shadow 1" (shadows/get 1)] - [demo-box @shadow? "Shadow 2" (shadows/get 2)] - [demo-box @shadow? "Shadow 3" (shadows/get 3)] - [demo-box @shadow? "Shadow 4" (shadows/get 4)] - [quo/text - {:style {:margin-left :auto - :margin-right :auto - :align-items :center}} - "Inverted Scales"] - [demo-box @shadow? "Shadow 1" (shadows/get 1 (quo.theme/get-theme) :inverted)] - [demo-box @shadow? "Shadow 2" (shadows/get 2 (quo.theme/get-theme) :inverted)] - [demo-box @shadow? "Shadow 3" (shadows/get 3 (quo.theme/get-theme) :inverted)] - [demo-box @shadow? "Shadow 4" (shadows/get 4 (quo.theme/get-theme) :inverted)] - [quo/text - {:style {:margin-left :auto - :margin-right :auto - :align-items :center}} - "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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/text + {:style {:margin-left :auto + :margin-right :auto + :align-items :center}} + "Normal Scales"] + [demo-box @shadow? "Shadow 1" (shadows/get 1)] + [demo-box @shadow? "Shadow 2" (shadows/get 2)] + [demo-box @shadow? "Shadow 3" (shadows/get 3)] + [demo-box @shadow? "Shadow 4" (shadows/get 4)] + [quo/text + {:style {:margin-left :auto + :margin-right :auto + :align-items :center}} + "Inverted Scales"] + [demo-box @shadow? "Shadow 1" (shadows/get 1 (quo.theme/get-theme) :inverted)] + [demo-box @shadow? "Shadow 2" (shadows/get 2 (quo.theme/get-theme) :inverted)] + [demo-box @shadow? "Shadow 3" (shadows/get 3 (quo.theme/get-theme) :inverted)] + [demo-box @shadow? "Shadow 4" (shadows/get 4 (quo.theme/get-theme) :inverted)] + [quo/text + {:style {:margin-left :auto + :margin-right :auto + :align-items :center}} + "Inverted Scales"] + [demo-box @shadow? "Inner Shadow" shadows/inner-shadow]]))) diff --git a/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs b/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs index 65f6aceae3..688755be3a 100644 --- a/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs +++ b/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.quo-preview.gradient.gradient-cover (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [quo2.theme :as quo.theme] [react-native.blur :as blur] [react-native.core :as rn] @@ -43,7 +42,7 @@ :key :blur? :type :boolean}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:customization-color :blue :blur? false}) blur? (reagent/cursor state [:blur?]) @@ -54,8 +53,7 @@ (when @blur? (quo.theme/set-theme :dark))) [@blur?]) - [:<> - [preview/customizer state descriptor] + [preview/preview-container {:state state :descriptor descriptor} [rn/view {:style {:height 332 :margin-top 24 @@ -75,13 +73,6 @@ :padding-vertical 40} :blur-type :dark} [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 {:container-style {:margin-horizontal 40} :on-press #(rf/dispatch [:show-bottom-sheet @@ -89,16 +80,3 @@ :gradient-cover? true :customization-color @customization-color}])} "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}]]) diff --git a/src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs b/src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs index 505607b08a..c8c318f684 100644 --- a/src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs +++ b/src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs @@ -1,7 +1,5 @@ (ns status-im2.contexts.quo-preview.graph.wallet-graph (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) @@ -20,26 +18,17 @@ (recur (dec n) new-prices new-price volatility))))) (def descriptor - [{:label "State:" - :key :state + [{:key :state :type :select - :options [{:key :positive - :value "Positive"} - {:key :negative - :value "Negative"}]} - {:label "Time frame:" - :key :time-frame + :options [{:key :positive} + {:key :negative}]} + {:key :time-frame :type :select - :options [{:key :empty - :value "Empty"} - {:key :1-week - :value "1 Week"} - {:key :1-month - :value "1 Month"} - {:key :3-months - :value "3 Months"} - {:key :1-year - :value "1 Year"} + :options [{:key :empty} + {:key :1-week} + {:key :1-month} + {:key :3-months} + {:key :1-year} {:key :all-time :value "All time (500 years data)"}]}]) @@ -61,31 +50,16 @@ 0.005)] (generate-crypto-token-prices data-points volatility))) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:state :positive :time-frame :1-week})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view {:margin-top 300} - [quo/wallet-graph - {:data (generate-data (:time-frame @state)) - :state (:state @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}]]) + [preview/preview-container + {:state state + :descriptor descriptor + :component-container-style {:padding-horizontal 0 :margin-top 200}} + [quo/wallet-graph + {:data (generate-data (:time-frame @state)) + :state (:state @state) + :time-frame (:time-frame @state)}]]))) diff --git a/src/status_im2/contexts/quo_preview/info/info_message.cljs b/src/status_im2/contexts/quo_preview/info/info_message.cljs index 32464a34c9..c126132812 100644 --- a/src/status_im2/contexts/quo_preview/info/info_message.cljs +++ b/src/status_im2/contexts/quo_preview/info/info_message.cljs @@ -1,53 +1,27 @@ (ns status-im2.contexts.quo-preview.info.info-message - (:require [quo2.components.info.info-message :as quo2] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.components.info.info-message :as quo] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Type:" - :key :type + [{:key :type :type :select - :options [{:key :default - :value "Default"} - {:key :success - :value "Success"} - {:key :error - :value "Error"}]} - {:label "Size:" - :key :size + :options [{:key :default} + {:key :success} + {:key :error}]} + {:key :size :type :select - :options [{:key :default - :value "Default"} - {:key :tiny - :value "Tiny"}]} - {:label "Message" - :key :message - :type :text}]) + :options [{:key :default} + {:key :tiny}]} + {:key :message + :type :text}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:type :default :size :default :icon :i/placeholder :message "This is a message"})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/info-message @state (:message @state)]]))) diff --git a/src/status_im2/contexts/quo_preview/info/information_box.cljs b/src/status_im2/contexts/quo_preview/info/information_box.cljs index d6248edba3..b7459d75bb 100644 --- a/src/status_im2/contexts/quo_preview/info/information_box.cljs +++ b/src/status_im2/contexts/quo_preview/info/information_box.cljs @@ -1,38 +1,28 @@ (ns status-im2.contexts.quo-preview.info.information-box (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Type:" - :key :type + [{:key :type :type :select - :options [{:key :default - :value "Default"} - {:key :informative - :value "Informative"} - {:key :error - :value "Error"}]} - {:label "Closable?" - :key :closable? - :type :boolean} - {:label "Message" - :key :message - :type :text} - {:label "Button Label" - :key :button-label - :type :text}]) + :options [{:key :default} + {:key :informative} + {:key :error}]} + {:key :closable? + :type :boolean} + {:key :message + :type :text} + {:key :button-label + :type :text}]) -(defn cool-preview +(defn view [] - (let [state (reagent/atom - {:type :default - :closable? true - :message (str "If you registered a stateofus.eth name " - "you might be eligible to connect $ENS") - :button-label "Button"}) + (let [state (reagent/atom {:type :default + :closable? true + :message (str "If you registered a stateofus.eth name " + "you might be eligible to connect $ENS") + :button-label "Button"}) closable? (reagent/cursor state [:closable?]) closed? (reagent/cursor state [:closed?]) on-close (fn [] @@ -40,26 +30,10 @@ (js/setTimeout (fn [] (reset! closed? false)) 2000))] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view - [preview/customizer state descriptor] - [rn/view - {:style {:padding-vertical 20 - :align-items :center}} - [quo/information-box - (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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/information-box + (merge {:icon :i/info + :style {:width 335} + :on-close (when @closable? on-close)} + @state) + (:message @state)]]))) diff --git a/src/status_im2/contexts/quo_preview/inputs/input.cljs b/src/status_im2/contexts/quo_preview/inputs/input.cljs index 4936d58c85..15e0274c11 100644 --- a/src/status_im2/contexts/quo_preview/inputs/input.cljs +++ b/src/status_im2/contexts/quo_preview/inputs/input.cljs @@ -1,48 +1,33 @@ (ns status-im2.contexts.quo-preview.inputs.input (:require [clojure.string :as string] [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Type:" - :key :type + [{:key :type :type :select - :options [{:key :text - :value "Text"} - {:key :password - :value "Password"}]} - {:label "Blur:" - :key :blur? - :type :boolean} - {:label "Error:" - :key :error? - :type :boolean} - {:label "Icon:" - :key :icon-name - :type :boolean} - {:label "Disabled:" - :key :disabled? - :type :boolean} - {:label "Clearable:" - :key :clearable? - :type :boolean} - {:label "Small:" - :key :small? - :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 + :options [{:key :text} + {:key :password}]} + {:key :blur? + :type :boolean} + {:key :error? + :type :boolean} + {:key :icon-name + :type :boolean} + {:key :disabled? + :type :boolean} + {:key :clearable? + :type :boolean} + {:key :small? + :type :boolean} + {:key :multiline + :type :boolean} + {:key :button + :type :boolean} + {:key :label + :type :text} + {:key :char-limit :type :select :options [{:key 10 :value "10"} @@ -50,14 +35,13 @@ :value "50"} {:key 100 :value "100"}]} - {:label "Value:" - :key :value - :type :text}]) + {:key :value + :type :text}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:type :text - :blur false + :blur? false :placeholder "Type something" :error false :icon-name false @@ -66,36 +50,23 @@ :on-char-limit-reach #(js/alert (str "Char limit reached: " %))})] (fn [] - (let [blank-label? (string/blank? (:label @state)) - icon? (boolean (:icon-name @state)) - button-props {:on-press #(js/alert "Button pressed!") - :text "My button"}] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:style {:padding-bottom 150}} - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor]] - [preview/blur-view - {:style {:flex 1 - :align-items :center - :margin-vertical 20} - :show-blur-background? (:blur? @state)} - [rn/view {:style {:width 300}} - [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))]]]]])))) + (let [blank-label? (string/blank? (:label @state))] + [preview/preview-container + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true} + [quo/input + (cond-> (assoc @state + :on-clear? #(swap! state assoc :value "") + :on-change-text #(swap! state assoc :value %)) + (:button @state) + (assoc :button + {:on-press #(js/alert "Button pressed!") + :text "My button"}) -(defn preview-input - [] - [rn/view - {:style {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1}} - [rn/flat-list - {:style {:flex 1} - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) + blank-label? + (dissoc :label) + + (:icon-name @state) + (assoc :icon-name :i/placeholder))]])))) diff --git a/src/status_im2/contexts/quo_preview/inputs/locked_input.cljs b/src/status_im2/contexts/quo_preview/inputs/locked_input.cljs index d6a0d81dde..593c5d19b8 100644 --- a/src/status_im2/contexts/quo_preview/inputs/locked_input.cljs +++ b/src/status_im2/contexts/quo_preview/inputs/locked_input.cljs @@ -1,42 +1,24 @@ (ns status-im2.contexts.quo-preview.inputs.locked-input - (:require [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [quo2.core :as quo] + (:require [quo2.core :as quo] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "show icon" - :key :icon - :type :boolean} - {:label "label" - :key :label - :type :text} - {:label "Value" - :key :value - :type :text}]) + [{:key :icon :type :boolean} + {:key :label :type :text} + {:key :value :type :text}]) -(defn preview-locked-input +(defn view [] (let [state (reagent/atom {:value "$1,648.34" :label "Network fee"})] (fn [] (let [{:keys [label value icon]} @state] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1 - :flex-direction :column - :padding-top 20 - :padding-left 20} - [rn/view {:style {:height 200}} - [preview/customizer state descriptor]] - [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]]])))) + [preview/preview-container {:state state :descriptor descriptor} + [quo/locked-input + {:icon (when icon :i/gas) + :label label + :container-style {:margin-right 20 + :margin-horizontal 20 + :flex 1}} + value]])))) diff --git a/src/status_im2/contexts/quo_preview/inputs/profile_input.cljs b/src/status_im2/contexts/quo_preview/inputs/profile_input.cljs index 42b677af47..bf8caef544 100644 --- a/src/status_im2/contexts/quo_preview/inputs/profile_input.cljs +++ b/src/status_im2/contexts/quo_preview/inputs/profile_input.cljs @@ -1,67 +1,42 @@ (ns status-im2.contexts.quo-preview.inputs.profile-input - (:require [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [reagent.core :as reagent] - [quo2.core :as quo] + (:require [quo2.core :as quo] + [quo2.foundations.colors :as colors] [react-native.blur :as blur] + [reagent.core :as reagent] [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "disabled?" - :key :disabled? - :type :boolean} - {:label "image selected?" - :key :image-selected? - :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))}]) + [{:key :disabled? + :type :boolean} + {:key :image-selected? + :type :boolean} + (preview/customization-color-option {:key :color})]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:color :blue :image-selected? false :disabled? false}) max-length 24 - value (reagent/atom "") on-change-text #(reset! value %)] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [rn/view {:flex 1}] - [preview/customizer state descriptor] - [blur/view - {:background-color colors/neutral-80-opa-80 - :flex-direction :row - :margin-horizontal 20 - :justify-content :center} - [quo/profile-input - {:default-value "" - :on-change-text on-change-text - :customization-color (:color @state) - :placeholder "Your Name" - :on-press #(js/alert "show image selector") - :image-picker-props {:profile-picture (when (:image-selected? @state) - (resources/get-mock-image :user-picture-male5)) - :full-name @value} - :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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [blur/view + {:background-color colors/neutral-80-opa-80 + :flex-direction :row + :margin-horizontal 20 + :justify-content :center} + [quo/profile-input + {:default-value "" + :on-change-text on-change-text + :customization-color (:color @state) + :placeholder "Your Name" + :on-press #(js/alert "show image selector") + :image-picker-props {:profile-picture (when (:image-selected? @state) + (resources/get-mock-image :user-picture-male5)) + :full-name @value} + :title-input-props {:disabled? (:disabled? @state) + :max-length max-length + :on-change-text on-change-text}}]]]))) diff --git a/src/status_im2/contexts/quo_preview/inputs/recovery_phrase_input.cljs b/src/status_im2/contexts/quo_preview/inputs/recovery_phrase_input.cljs index 0226627a05..53e61a0e2b 100644 --- a/src/status_im2/contexts/quo_preview/inputs/recovery_phrase_input.cljs +++ b/src/status_im2/contexts/quo_preview/inputs/recovery_phrase_input.cljs @@ -1,76 +1,48 @@ (ns status-im2.contexts.quo-preview.inputs.recovery-phrase-input (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Text" - :key :text - :type :text} - {:label "Placeholder" - :key :placeholder - :type :text} - {:label "Blur" - :key :blur? - :type :boolean} - {:label "Mark errors" - :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 + [{:key :text + :type :text} + {:key :placeholder + :type :text} + {:key :blur? + :type :boolean} + {:key :mark-errors? + :type :boolean} + (preview/customization-color-option) + {:key :word-limit :type :select :options [{:key nil :value "No limit"} {:key 5 :value "5 words"} {:key 10 :value "10 words"} {:key 20 :value "20 words"}]}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:text "" :placeholder "Type or paste your recovery phrase" :customization-color :blue :word-limit 20 + :blur? false :mark-errors? true})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:style {:padding-bottom 150}} - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor] - [quo/text {:size :paragraph-2} - "(Any word with at least 6 chars is marked as error)"]] - [preview/blur-view - {:style {:align-items :center - :margin-vertical 20 - :width "100%"} - :height 200 - :show-blur-background? (:blur? @state)} - [rn/view - {:style {:height 150 - :width "100%"}} - [quo/recovery-phrase-input - {: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}]]) + [preview/preview-container + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true} + [quo/text {:size :paragraph-2} + "(Any word with at least 6 chars is marked as error)"] + [rn/view {:style {:height 150}} + [quo/recovery-phrase-input + {: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)]]]))) diff --git a/src/status_im2/contexts/quo_preview/inputs/search_input.cljs b/src/status_im2/contexts/quo_preview/inputs/search_input.cljs index b37f0dbd31..35a667c89f 100644 --- a/src/status_im2/contexts/quo_preview/inputs/search_input.cljs +++ b/src/status_im2/contexts/quo_preview/inputs/search_input.cljs @@ -1,23 +1,17 @@ (ns status-im2.contexts.quo-preview.inputs.search-input (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] [reagent.core :as reagent] [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Value" - :key :value - :type :text} - {:label "Blur" - :key :blur? - :type :boolean} - {:label "Disabled" - :key :disabled? - :type :boolean} - {:label "Number of Tags" - :key :number-tags + [{:key :value + :type :text} + {:key :blur? + :type :boolean} + {:key :disabled? + :type :boolean} + {:key :number-tags :type :select :options (map (fn [n] {:key n :value (str n)}) @@ -35,40 +29,24 @@ (resources/get-mock-image :user-picture-female2) "Freya Odinson"]]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:blur? false :disabled? false :number-tags 0 :placeholder "Search..." - :value "" - :on-clear #(js/alert "Clear pressed")}) + :value ""}) on-change-text (fn [new-text] (swap! state assoc :value new-text))] (fn [] (let [tags (take (:number-tags @state) (example-tags (:blur? @state)))] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:style {:padding-bottom 150}} - [rn/view {:style {:flex 1}} - [preview/customizer state descriptor]] - [preview/blur-view - {:style {:align-items :center - :margin-vertical 20 - :width "100%"} - :show-blur-background? (:blur? @state)} - [rn/view {:style {:width "100%"}} - [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}]]) + [preview/preview-container + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true} + [quo/search-input + (assoc @state + :on-clear #(swap! state assoc :value "") + :tags tags + :on-change-text on-change-text)]])))) diff --git a/src/status_im2/contexts/quo_preview/inputs/title_input.cljs b/src/status_im2/contexts/quo_preview/inputs/title_input.cljs index 763f03b709..f7a8f33d5a 100644 --- a/src/status_im2/contexts/quo_preview/inputs/title_input.cljs +++ b/src/status_im2/contexts/quo_preview/inputs/title_input.cljs @@ -1,57 +1,30 @@ (ns status-im2.contexts.quo-preview.inputs.title-input - (:require [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.core :as quo] [reagent.core :as reagent] - [quo2.core :as quo] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "disabled?" - :key :disabled? - :type :boolean} - {:label "blur?" - :key :blur? - :type :boolean} - {:label "Cursor Color" - :key :color - :type :select - :options (map (fn [{:keys [name]}] {:key name :value name}) (quo/picker-colors))}]) + [{:key :disabled? + :type :boolean} + {:key :placeholder + :type :text} + {:key :max-length + :type :number} + {:key :blur? + :type :boolean} + (preview/customization-color-option)]) -(defn cool-preview +(defn view [] - (let [state (reagent/atom {:color nil - :blur? false - :disabled? false}) - max-length 24 - on-change-text (fn [_v] - (println (str "cool-preview -> on-change-text called " _v)))] + (let [state (reagent/atom {:color nil + :placeholder "Type something here" + :max-length 24 + :blur? false + :disabled? false})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [rn/view {:flex 1}] - [preview/customizer state descriptor] - - [preview/blur-view - {: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}]]) + [preview/preview-container + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true} + [quo/title-input (assoc @state :default-value "")]]))) diff --git a/src/status_im2/contexts/quo_preview/keycard/keycard.cljs b/src/status_im2/contexts/quo_preview/keycard/keycard.cljs index b92373a40a..7bbb271f56 100644 --- a/src/status_im2/contexts/quo_preview/keycard/keycard.cljs +++ b/src/status_im2/contexts/quo_preview/keycard/keycard.cljs @@ -1,37 +1,17 @@ (ns status-im2.contexts.quo-preview.keycard.keycard - (:require [status-im2.contexts.quo-preview.preview :as preview] - [react-native.core :as rn] - [quo2.foundations.colors :as colors] + (:require [quo2.core :as quo] [reagent.core :as reagent] - [quo2.core :as quo])) + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Holder" - :key :holder-name - :type :text} - {:label "Locked?" - :key :locked? - :type :boolean}]) + [{:key :holder-name :type :text} + {:key :locked? :type :boolean}]) -(defn cool-preview +(defn view [] - (let [state (reagent/atom {:holder-name nil + (let [state (reagent/atom {:holder-name "" :locked? true})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view [preview/customizer state descriptor] - [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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/keycard @state]]))) diff --git a/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs b/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs index ebc09bcb41..b9a190f046 100644 --- a/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs @@ -1,27 +1,19 @@ (ns status-im2.contexts.quo-preview.list-items.account-list-card - (:require - [quo2.core :as quo] - [react-native.core :as rn] - [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview])) + (:require [quo2.core :as quo] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "State:" - :key :state + [{:key :state :type :select - :options [{:key :default - :value "Default"} - {:key :pressed - :value "Pressed"}]} - {:label "Action:" - :key :action + :options [{:key :default} + {:key :pressed}]} + {:key :action :type :select - :options [{:key :none - :value "None"} - {:key :icon - :value "Icon"}]}]) + :options [{:key :none} + {:key :icon}]}]) -(defn preview +(defn view [] (let [state (reagent/atom {:account-props {:customization-color :purple :size 32 @@ -34,9 +26,5 @@ :action :none :on-press (fn [] (js/alert "Button pressed"))})] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view - {:style {:flex 1 - :padding-horizontal 20}} - [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]] - [quo/account-list-card @state]]]))) + [preview/preview-container {:state state :descriptor descriptor} + [quo/account-list-card @state]]))) diff --git a/src/status_im2/contexts/quo_preview/list_items/channel.cljs b/src/status_im2/contexts/quo_preview/list_items/channel.cljs index 91ca89b127..e84885d7e8 100644 --- a/src/status_im2/contexts/quo_preview/list_items/channel.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/channel.cljs @@ -1,28 +1,20 @@ (ns status-im2.contexts.quo-preview.list-items.channel - (:require [quo2.components.list-items.channel :as quo2-channel] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] + (:require [quo2.core :as quo] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Muted?:" - :key :muted? - :type :boolean} - {:label "Name" - :key :name - :type :text} - {:label "Number of mentions" - :key :mentions-count - :type :text} - {:label "Unread Messages:" - :key :unread-messages? - :type :boolean} - {:label "Avatar emoji" - :key :emoji - :type :text} - {:label "is Locked?" - :key :locked? + [{:key :muted? + :type :boolean} + {:key :name + :type :text} + {:key :mentions-count + :type :text} + {:key :unread-messages? + :type :boolean} + {:key :emoji + :type :text} + {:key :locked? :type :select :options [{:key nil :value "None"} @@ -30,11 +22,9 @@ :value "Unlocked"} {:key true :value "Locked"}]} - {:label "Is Pressed Channel:" - :key :is-active-channel? - :type :boolean} - {:label "Channel color" - :key :channel-color + {:key :is-active-channel? + :type :boolean} + {:key :channel-color :type :select :options [{:key "#00FFFF" :value "Blue"} @@ -43,7 +33,7 @@ {:key "#FFFF00" :value "Yellow"}]}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:is-active-channel? false :muted? false @@ -54,27 +44,5 @@ :name "channel" :locked? true})] (fn [] - [rn/view - {:margin-bottom 50 - :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}]]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/channel-list-item @state]]))) diff --git a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs index 3cc3ab6126..b3dbc2c8d2 100644 --- a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs @@ -1,16 +1,12 @@ (ns status-im2.contexts.quo-preview.list-items.preview-lists - (:require [quo2.components.list-items.preview-list :as quo2] - [quo2.foundations.colors :as colors] + (:require [quo2.core :as quo] [quo2.foundations.resources :as quo.resources] - [react-native.core :as rn] [reagent.core :as reagent] - [utils.i18n :as i18n] [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor - [{:label "Size:" - :key :size + [{:key :size :type :select :options [{:key 32 :value "32"} @@ -18,21 +14,15 @@ :value "24"} {:key 16 :value "16"}]} - {:label "Type:" - :key :type + {:key :type :type :select - :options [{:key :user - :value "User"} - {:key :photo - :value "Photo"} - {:key :network - :value "Network"}]} - {:label "List Size" - :key :list-size + :options [{:key :user} + {:key :photo} + {:key :network}]} + {:key :list-size :default 10 :type :text}]) -;; Mocked list items (def user-list [{:full-name "ABC DEF"} {:full-name "GHI JKL"} @@ -52,33 +42,17 @@ {:source (quo.resources/get-network :optimism)} {:source (quo.resources/get-network :arbitrum)}]) -(defn cool-preview +(defn view [] (let [state (reagent/atom {:type :user :size 32 :list-size 10 - :more-than-99-label (i18n/label :counter-99-plus)}) + :more-than-99-label "99+"}) type (reagent/cursor state [:type])] (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view - {:padding-vertical 60 - :align-items :center} - [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}]]) + [preview/preview-container {:state state :descriptor descriptor} + [quo/preview-list @state + (case @type + :user user-list + :photo photos-list + :network networks-list)]]))) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index aedd0b698c..fa51d5d8ac 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -126,107 +126,107 @@ (def screens-categories {:foundations [{:name :shadows - :component shadows/preview-shadows}] + :component shadows/view}] :animated-list [{:name :animated-header-list :component animated-header-list/mock-screen}] :avatar [{:name :group-avatar - :component group-avatar/preview-group-avatar} + :component group-avatar/view} {:name :icon-avatar - :component icon-avatar/preview-icon-avatar} + :component icon-avatar/view} {:name :user-avatar - :component user-avatar/preview-user-avatar} + :component user-avatar/view} {:name :wallet-user-avatar - :component wallet-user-avatar/preview-wallet-user-avatar} + :component wallet-user-avatar/view} {:name :channel-avatar - :component channel-avatar/preview-channel-avatar} + :component channel-avatar/view} {:name :account-avatar - :component account-avatar/preview-account-avatar}] + :component account-avatar/view}] :banner [{:name :banner - :component banner/preview-banner}] + :component banner/view}] :buttons [{:name :button - :component button/preview-button} + :component button/view} {:name :composer-button - :component composer-button/preview-composer-button} + :component composer-button/view} {:name :dynamic-button - :component dynamic-button/preview-dynamic-button} + :component dynamic-button/view} {:name :slide-button - :component slide-button/preview-slide-button} + :component slide-button/view} {:name :predictive-keyboard - :component predictive-keyboard/preview-predictive-keyboard} + :component predictive-keyboard/view} {:name :wallet-button - :component wallet-button/preview} + :component wallet-button/view} {:name :wallet-ctas - :component wallet-ctas/preview}] + :component wallet-ctas/view}] :browser [{:name :browser-input :component browser-input/preview-browser-input}] :calendar [{:name :calendar - :component calendar/preview-calendar} + :component calendar/view} {:name :calendar-day - :component calendar-day/preview-calendar-day} + :component calendar-day/view} {:name :calendar-year - :component calendar-year/preview-calendar-year}] + :component calendar-year/view}] :code [{:name :snippet - :component code-snippet/preview-code-snippet}] + :component code-snippet/view}] :colors [{:name :color-picker :component color-picker/view}] :community [{:name :community-card-view - :component community-card/preview-community-card} + :component community-card/view} {:name :community-membership-list-view - :component community-membership-list-view/preview-community-list-view} + :component community-membership-list-view/view} {:name :discover-card - :component discover-card/preview-discoverd-card} + :component discover-card/view} {:name :token-gating :options {:insets {:bottom? true}} - :component token-gating/preview-token-gating} + :component token-gating/view} {:name :channel-actions :options {:insets {:bottom? true}} - :component channel-actions/preview-channel-actions}] + :component channel-actions/view}] :counter [{:name :counter - :component counter/preview-counter} + :component counter/view} {:name :step - :component step/preview-step}] + :component step/view}] :dividers [{:name :divider-label :component divider-label/view} {:name :new-messages - :component new-messages/preview-new-messages} + :component new-messages/view} {:name :divider-date - :component divider-date/preview-divider-date} + :component divider-date/view} {:name :strength-divider - :component strength-divider/preview-strength-divider}] + :component strength-divider/view}] :drawers [{:name :action-drawers - :component action-drawers/preview-action-drawers} + :component action-drawers/view} {:name :documentation-drawer - :component documenation-drawers/preview-documenation-drawers} + :component documenation-drawers/view} {:name :drawer-buttons - :component drawer-buttons/preview-drawer-buttons} + :component drawer-buttons/view} {:name :permission-drawers - :component permission-drawers/preview-permission-drawers}] + :component permission-drawers/view}] :dropdowns [{:name :dropdown - :component dropdown/preview-dropdown} + :component dropdown/view} {:name :network-dropdown - :component network-dropdown/preview-dropdown}] + :component network-dropdown/view}] :empty-state [{:name :empty-state - :component empty-state/preview-empty-state}] + :component empty-state/view}] :gradient [{:name :gradient-cover - :component gradient-cover/preview-gradient-cover}] + :component gradient-cover/view}] :graph [{:name :wallet-graph - :component wallet-graph/preview-wallet-graph}] + :component wallet-graph/view}] :info [{:name :info-message - :component info-message/preview-info-message} + :component info-message/view} {:name :information-box - :component information-box/preview-information-box}] + :component information-box/view}] :inputs [{:name :input - :component input/preview-input} + :component input/view} {:name :locked-input - :component locked-input/preview-locked-input} + :component locked-input/view} {:name :profile-input - :component profile-input/preview-profile-input} + :component profile-input/view} {:name :recovery-phrase-input - :component recovery-phrase-input/preview-recovery-phrase-input} + :component recovery-phrase-input/view} {:name :search-input - :component search-input/preview-search-input} + :component search-input/view} {:name :title-input - :component title-input/preview-title-input}] + :component title-input/view}] :numbered-keyboard [{:name :keyboard-key :options {:insets {:top? true}} :component keyboard-key/preview-keyboard-key} @@ -243,16 +243,16 @@ :options {:insets {:top? true}} :component link-preview/view}] :list-items [{:name :account-list-card - :component account-list-card/preview} + :component account-list-card/view} {:name :channel - :component channel/preview-channel} + :component channel/view} {:name :community-list :options {:insets {:top? true}} :component community-list/view} {:name :dapp :component dapp/preview} {:name :preview-lists - :component preview-lists/preview-preview-lists} + :component preview-lists/view} {:name :user-list :component user-list/preview-user-list} {:name :token-value @@ -363,7 +363,7 @@ {:name :wallet-overview :component wallet-overview/preview-wallet-overview}] :keycard [{:name :keycard-component - :component keycard/preview-keycard}]}) + :component keycard/view}]}) (defn- navigation-bar [] diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs index 050159f27f..03662bbbcf 100644 --- a/src/status_im2/contexts/quo_preview/preview.cljs +++ b/src/status_im2/contexts/quo_preview/preview.cljs @@ -139,15 +139,15 @@ "Close"]]]]]]) (defn- customizer-select-button - [{:keys [open selected-key]}] + [{:keys [open selected-option]}] [rn/pressable {:style (style/select-container) :on-press #(reset! open true)} [rn/text {:style (style/field-select) :number-of-lines 1} - (if selected-key - (humanize selected-key) + (if selected-option + (or (:value selected-option) (humanize (:key selected-option))) "Select option")] [rn/view [quo/icon :i/chevron-right]]]) @@ -156,9 +156,9 @@ [] (let [open (reagent/atom nil)] (fn [{:keys [label state options] :as args}] - (let [label (or label (key->text-label (:key args))) - field-value (reagent/cursor state [(:key args)]) - selected-key (:key (find-selected-option @field-value options))] + (let [label (or label (key->text-label (:key args))) + field-value (reagent/cursor state [(:key args)]) + selected-option (find-selected-option @field-value options)] [rn/view {:style style/field-row} [label-view state label] [rn/view {:style style/field-column} @@ -166,7 +166,7 @@ {:open open :options options :field-value field-value}] - [customizer-select-button {:open open :selected-key selected-key}]]])))) + [customizer-select-button {:open open :selected-option selected-option}]]])))) (defn customizer [state descriptors] @@ -189,8 +189,7 @@ ([] (customization-color-option {})) ([opts] - (merge {:label "Custom color:" - :key :customization-color + (merge {:key :customization-color :type :select :options (->> colors/customization keys @@ -200,7 +199,7 @@ opts))) (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 {:style {:flex 1 :padding-vertical 16}} @@ -221,39 +220,39 @@ :blur-amount 10 :overlay-color (colors/theme-colors colors/white-opa-70 colors/neutral-80-opa-80)} blur-view-props)]]) - [rn/view - {:style (merge {:position :absolute - :top 32 - :padding-horizontal 16} - style)} - children]]) + (into [rn/view + {:style (merge {:position :absolute + :top 32 + :padding-horizontal 16} + style)}] + children)]) (defn preview-container [{:keys [state descriptor blur? component-container-style blur-container-style blur-view-props blur-height show-blur-background?] :or {blur-height 200}} - component] + & children] [rn/scroll-view {:style (style/panel-basic) :shows-vertical-scroll-indicator false} [rn/pressable {:on-press rn/dismiss-keyboard!} - [rn/view {:style style/customizer-container} - [customizer state descriptor]] - [rn/view - (merge {:style style/component-container} - component-container-style) - (if blur? - [blur-view - {:show-blur-background? show-blur-background? - :height blur-height - :style (merge {:width "100%" - :flex-grow 1} - (when-not show-blur-background? - {:padding-horizontal 0 - :top 0}) - blur-container-style) - :blur-view-props (merge {:blur-type (quo.theme/get-theme)} - blur-view-props)} - component] - component)]]]) + (when descriptor + [rn/view {:style style/customizer-container} + [customizer state descriptor]]) + (if blur? + [rn/view {:style (merge style/component-container component-container-style)} + (into [blur-view + {:show-blur-background? show-blur-background? + :height blur-height + :style (merge {:width "100%" + :flex-grow 1} + (when-not show-blur-background? + {:padding-horizontal 0 + :top 0}) + blur-container-style) + :blur-view-props (merge {:blur-type (quo.theme/get-theme)} + blur-view-props)}] + children)] + (into [rn/view {:style (merge style/component-container component-container-style)}] + children))]])