Skip to content

Commit

Permalink
[#17288] refactor: migrate previews to new api
Browse files Browse the repository at this point in the history
  • Loading branch information
@mohsen-ghafouri
mohsen-ghafouri committed Oct 31, 2023
1 parent abbf29d commit 8b766ee
Show file tree
Hide file tree
Showing 16 changed files with 200 additions and 339 deletions.
2 changes: 1 addition & 1 deletion src/status_im2/contexts/quo_preview/list_items/token_network.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
{:key :show-alert-on-press?
:type :boolean}])

(defn preview-token-network
(defn view
[]
(let [state (reagent/atom {:token (quo.resources/get-token :snt)
:label "Status"
Expand Down
30 changes: 15 additions & 15 deletions src/status_im2/contexts/quo_preview/main.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,7 +331,7 @@
{:name :saved-contact-address
:component saved-contact-address/view}
{:name :token-network
:component token-network/preview-token-network}
:component token-network/view}
{:name :token-value
:component token-value/view}
{:name :user-list
Expand Down Expand Up @@ -359,9 +359,9 @@
{:name :floating-shell-button
:component floating-shell-button/view}]
:notifications [{:name :activity-logs
:component activity-logs/preview-activity-logs}
:component activity-logs/view}
{:name :activity-logs-photos
:component activity-logs-photos/preview-activity-logs-photos}
:component activity-logs-photos/view}
{:name :toast
:component toast/view}
{:name :notification
Expand Down Expand Up @@ -435,27 +435,27 @@
{:name :tags
:component tags/view}
{:name :tiny-tag
:component tiny-tag/preview-tiny-tag}
:component tiny-tag/view}
{:name :token-tag
:component token-tag/view}]
:text-combinations [{:name :text-combinations
:component text-combinations/view}]
:wallet [{:name :account-card :component account-card/preview-account-card}
:wallet [{:name :account-card :component account-card/view}
{:name :account-origin :component account-origin/view}
{:name :account-overview
:component account-overview/preview-account-overview}
{:name :keypair :component keypair/preview}
{:name :network-amount :component network-amount/preview}
{:name :network-bridge :component network-bridge/preview}
{:name :network-link :component network-link/preview}
{:name :network-routing :component network-routing/preview}
{:name :progress-bar :component progress-bar/preview}
{:name :summary-info :component summary-info/preview}
{:name :token-input :component token-input/preview}
:component account-overview/view}
{:name :keypair :component keypair/view}
{:name :network-amount :component network-amount/view}
{:name :network-bridge :component network-bridge/view}
{:name :network-link :component network-link/view}
{:name :network-routing :component network-routing/view}
{:name :progress-bar :component progress-bar/view}
{:name :summary-info :component summary-info/view}
{:name :token-input :component token-input/view}
{:name :wallet-activity :component wallet-activity/view}
{:name :transaction-summary :component transaction-summary/view}
{:name :wallet-overview
:component wallet-overview/preview-wallet-overview}]
:component wallet-overview/view}]
:keycard [{:name :keycard-component :component keycard/view}]})

(defn- category-view
Expand Down
2 changes: 1 addition & 1 deletion src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
{:body "Your favorite color is Turquoise."
:title "What's my favorite color?"})

(defn preview-activity-logs
(defn view
[]
(let [state (reagent/atom {:button-1-label "Decline"
:button-1-type :danger
Expand Down
2 changes: 1 addition & 1 deletion src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
(resources/get-mock-image :photo2)
(resources/get-mock-image :photo3)])

(defn preview-activity-logs-photos
(defn view
[]
(let [state (reagent/atom {:count 1})]
(fn []
Expand Down
10 changes: 3 additions & 7 deletions src/status_im2/contexts/quo_preview/tags/tiny_tag.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,10 @@
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Blur?"
:key :blur?
:type :boolean}
{:label "Label"
:key :label
:type :text}])
[{:key :blur? :type :boolean}
{:key :label :type :text}])

(defn preview-tiny-tag
(defn view
[]
(let [state (reagent/atom {:blur? false
:label "1,000 SNT"})]
Expand Down
99 changes: 35 additions & 64 deletions src/status_im2/contexts/quo_preview/wallet/account_card.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
(ns status-im2.contexts.quo-preview.wallet.account-card
(:require
[quo.components.icon :as icon]
[quo.components.markdown.text :as text]
[quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.core :as rn]
Expand All @@ -10,47 +8,21 @@
[utils.collection]))

(def descriptor
[{:label "Type:"
:key :type
[{:key :type
:type :select
:options [{:key :default
:value "Default"}
{:key :watch-only
:value "Watch Only"}
{:key :add-account
:value "Add Account"}
{:key :empty
:value "Empty"}
{:key :missing-keypair
:value "Missing Keypair"}]}
{:label "Customization color:"
:key :customization-color
:type :select
:options (map (fn [[color-kw _]]
{:key color-kw
:value (name color-kw)})
colors/customization)}
{:label "Name:"
:key :name
:type :text}
{:label "Balance:"
:key :balance
:type :text}
{:label "Percentage value:"
:key :percentage-value
:type :text}
{:label "Amount:"
:key :amount
:type :text}
{:label "Metrics:"
:key :metrics?
:type :boolean}
{:label "Loading:"
:key :loading?
:type :boolean}
{:label "Emoji:"
:key :emoji
:type :text}])
:options [{:key :default}
{:key :watch-only}
{:key :add-account}
{:key :empty}
{:key :missing-keypair}]}
(preview/customization-color-option)
{:key :name :type :text}
{:key :balance :type :text}
{:key :percentage-value :type :text}
{:key :amount :type :text}
{:key :metrics? :type :boolean}
{:key :loading? :type :boolean}
{:key :emoji :type :text}])

(defn initial-state
[type]
Expand Down Expand Up @@ -101,7 +73,7 @@
:type :add-account}))


(defn preview-account-card
(defn view
[]
(let [state (reagent/atom (initial-state :default))]
[:f>
Expand All @@ -110,25 +82,24 @@
(fn [] (reset! state (initial-state (:type @state))))
[(:type @state)])
[preview/preview-container
{:state state
:descriptor descriptor}
{:state state
:descriptor descriptor
:component-container-style {:margin-vertical 40
:padding-left 40
:flex-direction :row
:align-items :center}}
[quo/text
{:size :heading-1
:weight :semi-bold}
"Account card"]
[rn/view
{:style {:margin-vertical 40
:padding-left 40
:flex-direction :row
:align-items :center}}
[text/text
{:size :heading-1
:weight :semi-bold}
"Account card"]
[rn/view
{:style {:width 20
:height 20
:border-radius 60
:background-color colors/success-50
:align-items :center
:justify-content :center
:margin-left 8}}
[icon/icon :i/check {:color colors/white :size 16}]]]
[rn/view {:style {:align-items :center :margin-bottom 20}}
[quo/account-card @state]]])]))
{:style {:width 20
:height 20
:border-radius 60
:background-color colors/success-50
:align-items :center
:justify-content :center
:margin-left 8}}
[quo/icon :i/check {:color colors/white :size 16}]]]
[rn/view {:style {:align-items :center :margin-bottom 20}}
[quo/account-card @state]])]))
71 changes: 23 additions & 48 deletions src/status_im2/contexts/quo_preview/wallet/account_overview.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,30 @@
(ns status-im2.contexts.quo-preview.wallet.account-overview
(:require
[quo.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))

(def descriptor
[{:label "Time frame string"
:key :time-frame-string
:type :text}
{:label "Time frame to string"
:key :time-frame-to-string
:type :text}
{:label "Percentage change"
:key :percentage-change
:type :text}
{:label "Currency change"
:key :currency-change
:type :text}
{:label "Current value"
:key :current-value
:type :text}
{:label "State"
:key :state
[{:key :time-frame-string :type :text}
{:key :time-frame-to-string :type :text}
{:key :percentage-change :type :text}
{:key :currency-change :type :text}
{:key :current-value :type :text}
{:key :state
:type :select
:options [{:key :default
:value "Default"}
{:key :loading
:value "Loading"}]}
{:label "Metrics"
:key :metrics
:options [{:key :default}
{:key :loading}]}
{:key :metrics
:type :select
:options [{:key "Positive"
:value :positive}
{:key "Negative"
:value :negative}]}
{:label "Account name"
:key :account-name
:type :text}
:options [{:key :positive}
{:key :negative}]}
{:key :account-name :type :text}
(preview/customization-color-option)
{:label "Account"
:key :account
{:key :account
:type :select
:options [{:key :watched-address
:value "Watched address"}
{:key :default
:value "Default"}]}
{:label "Time frame"
:key :time-frame
:options [{:key :watched-address}
{:key :default}]}
{:key :time-frame
:type :select
:options [{:key :one-week
:value "1 Week"}
Expand All @@ -62,7 +39,7 @@
{:key :custom
:value "Custom"}]}])

(defn preview-account-overview
(defn view
[]
(let [state (reagent/atom {:metrics :positive
:currency-change "€0.00"
Expand All @@ -76,11 +53,9 @@
:customization-color :blue})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:style {:padding-bottom 150}}
[rn/view
{:style {:padding-vertical 60
:flex-direction :row
:justify-content :center}}
[quo/account-overview @state]]]])))
{:state state
:descriptor descriptor
:component-container-style {:padding-vertical 60
:flex-direction :row
:justify-content :center}}
[quo/account-overview @state]])))
Loading

0 comments on commit 8b766ee

Please sign in to comment.