Refactor some quo2 components to use best practices

* chore: update quo2 group avatar to best practices

* chore: update quo2 browser-input to best practices

* chore: update quo2 dynamic-button to best practices

* chore: update quo2 tabs to best practices

* chore: cleanup quo2 core file

* chore: use best practices in quo2 banner

* chore: use best practices in quo2 step
This commit is contained in:
Jamie Caprani 2023-08-10 12:59:13 +02:00 committed by GitHub
parent 87574ad78a
commit 302c54b6c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 269 additions and 216 deletions

View File

@ -0,0 +1,14 @@
(ns quo2.components.avatars.group-avatar.style
(:require [quo2.foundations.colors :as colors]))
(defn container
[{:keys [container-size customization-color theme]}]
{:width container-size
:height container-size
:align-items :center
:justify-content :center
:border-radius (/ container-size 2)
:background-color
(colors/theme-colors (colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme)})

View File

@ -1,7 +1,9 @@
(ns quo2.components.avatars.group-avatar (ns quo2.components.avatars.group-avatar.view
(:require [quo2.components.icon :as icon] (:require [quo2.components.icon :as icon]
[quo2.theme :as quo.theme]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn])) [react-native.core :as rn]
[quo2.components.avatars.group-avatar.style :as style]))
(def sizes (def sizes
{:icon {:small 12 {:icon {:small 12
@ -13,20 +15,17 @@
;; TODO: this implementation does not support group display picture (can only display default group ;; TODO: this implementation does not support group display picture (can only display default group
;; icon). ;; icon).
(defn group-avatar (defn- view-internal
[_] [_]
(fn [{:keys [color size]}] (fn [{:keys [color size theme]}]
(let [container-size (get-in sizes [:container size]) (let [container-size (get-in sizes [:container size])
icon-size (get-in sizes [:icon size])] icon-size (get-in sizes [:icon size])]
[rn/view [rn/view
{:width container-size {:style (style/container {:container-size container-size
:height container-size :customization-color color
:align-items :center :theme theme})}
:justify-content :center
:border-radius (/ container-size 2)
;:background-color (colors/custom-color-by-theme color 50 60) ; TODO: this is temporary only.
;Issue: https://github.com/status-im/status-mobile/issues/14566
:background-color color}
[icon/icon :i/group [icon/icon :i/group
{:size icon-size {:size icon-size
:color colors/white-opa-70}]]))) :color colors/white-opa-70}]])))
(def view (quo.theme/with-theme view-internal))

View File

@ -5,7 +5,7 @@
(defn render-banner (defn render-banner
[opts] [opts]
(rtl/render (reagent/as-element [banner/banner opts]))) (rtl/render (reagent/as-element [banner/view opts])))
(js/global.test "basic render of banner component" (js/global.test "basic render of banner component"
(fn [] (fn []

View File

@ -4,10 +4,11 @@
[quo2.components.icon :as icons] [quo2.components.icon :as icons]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn])) [react-native.core :as rn]
[quo2.theme :as quo.theme]))
(defn banner (defn- view-internal
[{:keys [hide-pin? latest-pin-text pins-count on-press]}] [{:keys [hide-pin? latest-pin-text pins-count on-press theme]}]
(when (pos? pins-count) (when (pos? pins-count)
[rn/touchable-opacity [rn/touchable-opacity
{:accessibility-label :pinned-banner {:accessibility-label :pinned-banner
@ -17,7 +18,7 @@
(when-not hide-pin? (when-not hide-pin?
[rn/view {:style style/icon} [rn/view {:style style/icon}
[icons/icon :i/pin [icons/icon :i/pin
{:color (colors/theme-colors colors/neutral-100 colors/white) {:color (colors/theme-colors colors/neutral-100 colors/white theme)
:size 20}]]) :size 20}]])
[rn/view {:style (style/text hide-pin?)} [rn/view {:style (style/text hide-pin?)}
[text/text [text/text
@ -28,3 +29,5 @@
{:accessibility-label :pins-count {:accessibility-label :pins-count
:style style/counter} :style style/counter}
[counter/view {:type :secondary} pins-count]]])) [counter/view {:type :secondary} pins-count]]]))
(def view (quo.theme/with-theme view-internal))

View File

@ -4,14 +4,14 @@
(h/describe "Browser input" (h/describe "Browser input"
(h/test "Renders empty in default state" (h/test "Renders empty in default state"
(h/render [browser-input/browser-input (h/render [browser-input/view
{:on-change-text (h/mock-fn) {:on-change-text (h/mock-fn)
:value ""}]) :value ""}])
(h/is-truthy (h/get-by-label-text :browser-input))) (h/is-truthy (h/get-by-label-text :browser-input)))
(h/test "On change text is fired" (h/test "On change text is fired"
(let [on-change-text (h/mock-fn)] (let [on-change-text (h/mock-fn)]
(h/render [browser-input/browser-input (h/render [browser-input/view
{:on-change-text on-change-text {:on-change-text on-change-text
:value "mock text"}]) :value "mock text"}])
(h/fire-event :change-text (h/get-by-label-text :browser-input) "mock-text-new") (h/fire-event :change-text (h/get-by-label-text :browser-input) "mock-text-new")
@ -19,38 +19,38 @@
(h/describe "Input Label" (h/describe "Input Label"
(h/test "Doesn't render label text when input is focused" (h/test "Doesn't render label text when input is focused"
(h/render [browser-input/browser-input (h/render [browser-input/view
{:auto-focus true}]) {:auto-focus true}])
(h/is-null (h/query-by-label-text :browser-input-label))) (h/is-null (h/query-by-label-text :browser-input-label)))
(h/test "Renders label text when input has a value and input is not focused" (h/test "Renders label text when input has a value and input is not focused"
(h/render [browser-input/browser-input (h/render [browser-input/view
{:default-value "mock default"}]) {:default-value "mock default"}])
(h/is-truthy (h/query-by-label-text :browser-input-label))) (h/is-truthy (h/query-by-label-text :browser-input-label)))
(h/test "Renders site favicon when specified" (h/test "Renders site favicon when specified"
(h/render [browser-input/browser-input (h/render [browser-input/view
{:default-value "mock default" :favicon :i/verified}]) {:default-value "mock default" :favicon :i/verified}])
(h/is-truthy (h/query-by-label-text :browser-input-favicon))) (h/is-truthy (h/query-by-label-text :browser-input-favicon)))
(h/test "Renders lock icon when lock is enabled" (h/test "Renders lock icon when lock is enabled"
(h/render [browser-input/browser-input (h/render [browser-input/view
{:default-value "mock default" :locked? true}]) {:default-value "mock default" :locked? true}])
(h/is-truthy (h/query-by-label-text :browser-input-locked-icon)))) (h/is-truthy (h/query-by-label-text :browser-input-locked-icon))))
(h/describe "Clear button" (h/describe "Clear button"
(h/test "Doesn't render in default state" (h/test "Doesn't render in default state"
(h/render [browser-input/browser-input]) (h/render [browser-input/view])
(h/is-null (h/query-by-label-text :browser-input-clear-button))) (h/is-null (h/query-by-label-text :browser-input-clear-button)))
(h/test "Renders when there is a value" (h/test "Renders when there is a value"
(h/render [browser-input/browser-input (h/render [browser-input/view
{:default-value "mock text"}]) {:default-value "mock text"}])
(h/is-truthy (h/query-by-label-text :browser-input-clear-button))) (h/is-truthy (h/query-by-label-text :browser-input-clear-button)))
(h/test "Is pressable" (h/test "Is pressable"
(let [on-clear (h/mock-fn)] (let [on-clear (h/mock-fn)]
(h/render [browser-input/browser-input (h/render [browser-input/view
{:default-value "mock text" {:default-value "mock text"
:on-clear on-clear}]) :on-clear on-clear}])
(h/is-truthy (h/query-by-label-text :browser-input-clear-button)) (h/is-truthy (h/query-by-label-text :browser-input-clear-button))

View File

@ -67,7 +67,7 @@
[:cursor-color :placeholder-text-color :editable :on-change-text :on-focus [:cursor-color :placeholder-text-color :editable :on-change-text :on-focus
:on-blur :on-clear :value :disabled? :blur? :customization-color :theme]) :on-blur :on-clear :value :disabled? :blur? :customization-color :theme])
(defn browser-input-internal (defn- view-internal
[{:keys [default-value] [{:keys [default-value]
:or {default-value ""}}] :or {default-value ""}}]
(let [state (reagent/atom :default) (let [state (reagent/atom :default)
@ -141,4 +141,4 @@
(when on-clear (on-clear))) (when on-clear (on-clear)))
:theme theme}])]])))) :theme theme}])]]))))
(def browser-input (quo2.theme/with-theme browser-input-internal)) (def view (quo2.theme/with-theme view-internal))

View File

@ -1,107 +0,0 @@
(ns quo2.components.buttons.dynamic-button
(:require [quo2.components.icon :as icon]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]))
(defn- get-button-color
[type pressed? customization-color]
(if (#{:jump-to :mention} type)
(if pressed?
(colors/custom-color-by-theme customization-color 60 50)
(colors/custom-color-by-theme customization-color 50 60))
(if pressed?
(colors/theme-colors colors/neutral-80-opa-80 colors/white-opa-80)
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70))))
(defn- get-icon-and-text-color
[type]
(if (#{:jump-to :mention} type)
colors/white
(colors/theme-colors colors/white colors/neutral-100)))
(defn- icon-view
[type]
[icon/icon
(case type
:jump-to :i/jump-to
:mention :i/mention
:notification-down :i/arrow-down
:notification-up :i/arrow-up
:search-with-label :i/search
:search :i/search
:scroll-to-bottom :i/arrow-down)
{:size 12
:color (get-icon-and-text-color type)
:container-style {:margin-top 6
:margin-bottom 6
:margin-left (case type
:jump-to 0
:mention 8
:notification-down 2
:notification-up 2
:search-with-label 8
:search 6
:scroll-to-bottom 6)
:margin-right (case type
:jump-to 8
:mention 2
:notification-down 8
:notification-up 8
:search-with-label 4
:search 6
:scroll-to-bottom 6)}}])
(defn dynamic-button
"[dynamic-button opts]
opts
{:type :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:scroll-to-bottom
:on-press fn
:count mentions or notifications count
:customization-color customize jump-to and mention button color}"
[_]
(let [pressed? (reagent/atom false)]
(fn [{:keys [type label on-press customization-color style] :as args}]
[rn/touchable-opacity
{:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false)
:on-press on-press
:active-opacity 1
:hit-slop {:top 5 :bottom 5 :left 5 :right 5}
:pointer-events :auto
:accessibility-label type}
[rn/view
{:style (merge
{:flex-direction :row
:height 24
:border-radius 12
:background-color (get-button-color type @pressed? (or customization-color :primary))}
style)}
(when (#{:mention :search :search-with-label :scroll-to-bottom} type)
[icon-view type])
(when (#{:jump-to :mention :notification-down :notification-up :search-with-label} type)
[text/text
{:weight :medium
:size :paragraph-2
:style {:color (get-icon-and-text-color type)
:margin-top 2.5
:margin-bottom 3.5
:margin-left (case type
:jump-to 8
:mention 0
:notification-down 8
:notification-up 8
:search-with-label 0)
:margin-right (case type
:jump-to 0
:mention 8
:notification-down 0
:notification-up 0
:search-with-label 8)}}
(case type
:jump-to label
:search-with-label label
(:mention :notification-down :notification-up) (str (:count args)))])
(when (#{:jump-to :notification-down :notification-up} type)
[icon-view type])]])))

View File

@ -0,0 +1,43 @@
(ns quo2.components.buttons.dynamic-button.style)
(defn container
[type]
{:margin-top 6
:margin-bottom 6
:margin-left (case type
:jump-to 0
:mention 8
:notification-down 2
:notification-up 2
:search-with-label 8
:search 6
:scroll-to-bottom 6
nil)
:margin-right (case type
:jump-to 8
:mention 2
:notification-down 8
:notification-up 8
:search-with-label 4
:search 6
:scroll-to-bottom 6
nil)})
(defn text
[type]
{:margin-top 2.5
:margin-bottom 3.5
:margin-left (case type
:jump-to 8
:mention 0
:notification-down 8
:notification-up 8
:search-with-label 0
nil)
:margin-right (case type
:jump-to 0
:mention 8
:notification-down 0
:notification-up 0
:search-with-label 8
nil)})

View File

@ -0,0 +1,90 @@
(ns quo2.components.buttons.dynamic-button.view
(:require [quo2.components.icon :as icon]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[quo2.theme :as quo.theme]
[quo2.components.buttons.dynamic-button.style :as style]))
(defn- get-button-color
[{:keys [type pressed? customization-color theme]}]
(if (#{:jump-to :mention} type)
(if pressed?
(colors/theme-colors
(colors/custom-color customization-color 60)
(colors/custom-color customization-color 50)
theme)
(colors/theme-colors
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme))
(if pressed?
(colors/theme-colors colors/neutral-80-opa-80 colors/white-opa-80 theme)
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))))
(defn- get-icon-and-text-color
[type theme]
(if (#{:jump-to :mention} type)
colors/white
(colors/theme-colors colors/white colors/neutral-100 theme)))
(defn- icon-view
[type theme]
[icon/icon
(case type
:jump-to :i/jump-to
:mention :i/mention
:notification-down :i/arrow-down
:notification-up :i/arrow-up
:search-with-label :i/search
:search :i/search
:scroll-to-bottom :i/arrow-down)
{:size 12
:color (get-icon-and-text-color type theme)
:container-style (style/container type)}])
(defn- view-internal
"[dynamic-button opts]
opts
{:type :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:scroll-to-bottom
:on-press fn
:count mentions or notifications count
:customization-color customize jump-to and mention button color}"
[_]
(let [pressed? (reagent/atom false)]
(fn [{:keys [type label on-press customization-color style theme] :as args}]
[rn/touchable-opacity
{:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false)
:on-press on-press
:active-opacity 1
:hit-slop {:top 5 :bottom 5 :left 5 :right 5}
:pointer-events :auto
:accessibility-label type}
[rn/view
{:style (merge
{:flex-direction :row
:height 24
:border-radius 12
:background-color (get-button-color {:type type
:pressed? @pressed?
:customization-color (or customization-color
:primary)
:theme theme})}
style)}
(when (#{:mention :search :search-with-label :scroll-to-bottom} type)
[icon-view type])
(when (#{:jump-to :mention :notification-down :notification-up :search-with-label} type)
[text/text
{:weight :medium
:size :paragraph-2
:style (assoc (style/text type) :color (get-icon-and-text-color type theme))}
(case type
:jump-to label
:search-with-label label
(:mention :notification-down :notification-up) (str (:count args)))])
(when (#{:jump-to :notification-down :notification-up} type)
[icon-view type theme])]])))
(def view (quo.theme/with-theme view-internal))

View File

@ -4,16 +4,16 @@
(h/describe "step component" (h/describe "step component"
(h/test "default render of step component" (h/test "default render of step component"
(h/render [step/step {} nil]) (h/render [step/view {} nil])
(-> (h/expect (h/query-by-label-text :step-counter)) (-> (h/expect (h/query-by-label-text :step-counter))
(h/is-truthy))) (h/is-truthy)))
(h/test "renders step with a string value" (h/test "renders step with a string value"
(h/render [step/step {} "1"]) (h/render [step/view {} "1"])
(-> (h/expect (h/get-by-text "1")) (-> (h/expect (h/get-by-text "1"))
(h/is-truthy))) (h/is-truthy)))
(h/test "renders step with an integer value" (h/test "renders step with an integer value"
(h/render [step/step {} 1]) (h/render [step/view {} 1])
(-> (h/expect (h/get-by-text "1")) (-> (h/expect (h/get-by-text "1"))
(h/is-truthy)))) (h/is-truthy))))

View File

@ -6,7 +6,7 @@
[react-native.core :as rn] [react-native.core :as rn]
[utils.number])) [utils.number]))
(defn step-internal (defn- view-internal
[{:keys [type accessibility-label theme in-blur-view? customization-color]} value] [{:keys [type accessibility-label theme in-blur-view? customization-color]} value]
(let [type (or type :neutral) (let [type (or type :neutral)
value (utils.number/parse-int value) value (utils.number/parse-int value)
@ -25,4 +25,4 @@
:size :label :size :label
:style {:color (style/text-color type theme)}} label]])) :style {:color (style/text-color type theme)}} label]]))
(def step (theme/with-theme step-internal)) (def view (theme/with-theme view-internal))

View File

@ -41,7 +41,7 @@
[rn/view {:style (style/container container-style)} [rn/view {:style (style/container container-style)}
[rn/view {:style style/index} [rn/view {:style style/index}
(if (= type :step) (if (= type :step)
[step/step [step/view
{:in-blur-view? blur? {:in-blur-view? blur?
:customization-color customization-color :customization-color customization-color
:type (if customization-color :complete :neutral)} step-number] :type (if customization-color :complete :neutral)} step-number]

View File

@ -1,12 +1,12 @@
(ns quo2.components.navigation.floating-shell-button (ns quo2.components.navigation.floating-shell-button
(:require [quo2.components.buttons.dynamic-button :as dynamic-button] (:require [quo2.components.buttons.dynamic-button.view :as dynamic-button]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.reanimated :as reanimated])) [react-native.reanimated :as reanimated]))
(defn dynamic-button-view (defn dynamic-button-view
[type dynamic-buttons style] [type dynamic-buttons style]
(when-let [{:keys [on-press customization-color label] :as props} (get dynamic-buttons type)] (when-let [{:keys [on-press customization-color label] :as props} (get dynamic-buttons type)]
[dynamic-button/dynamic-button [dynamic-button/view
{:type type {:type type
:label label :label label
:on-press on-press :on-press on-press

View File

@ -0,0 +1,12 @@
(ns quo2.components.tabs.tabs.style
(:require [utils.number]))
(def linear-gradient
{:width "100%"
:height "100%"})
(defn tab
[{:keys [size default-tab-size number-of-items index style]}]
{:margin-right (if (= size default-tab-size) 12 8)
:padding-right (when (= index (dec number-of-items))
(:padding-left style))})

View File

@ -1,4 +1,4 @@
(ns quo2.components.tabs.tabs (ns quo2.components.tabs.tabs.view
(:require [oops.core :refer [oget]] (:require [oops.core :refer [oget]]
[quo2.components.tabs.tab.view :as tab] [quo2.components.tabs.tab.view :as tab]
[react-native.core :as rn] [react-native.core :as rn]
@ -7,7 +7,8 @@
[reagent.core :as reagent] [reagent.core :as reagent]
[utils.collection :as utils.collection] [utils.collection :as utils.collection]
[utils.number] [utils.number]
[react-native.gesture :as gesture])) [react-native.gesture :as gesture]
[quo2.components.tabs.tabs.style :as style]))
(def default-tab-size 32) (def default-tab-size 32)
(def unread-count-offset 3) (def unread-count-offset 3)
@ -34,8 +35,7 @@
:start {:x 0 :y 0} :start {:x 0 :y 0}
:end {:x 1 :y 0} :end {:x 1 :y 0}
:pointer-events :none :pointer-events :none
:style {:width "100%" :style style/linear-gradient}])}]
:height "100%"}}])}]
children) children)
(into [:<>] children))) (into [:<>] children)))
@ -71,9 +71,11 @@
{:keys [id label notification-dot? accessibility-label]} {:keys [id label notification-dot? accessibility-label]}
index] index]
[rn/view [rn/view
{:style {:margin-right (if (= size default-tab-size) 12 8) {:style (style/tab {:size size
:padding-right (when (= index (dec number-of-items)) :default-tab-size default-tab-size
(:padding-left style))}} :number-of-items number-of-items
:index index
:style style})}
[tab/view [tab/view
{:id id {:id id
:notification-dot? notification-dot? :notification-dot? notification-dot?
@ -93,7 +95,7 @@
(on-change id)))} (on-change id)))}
label]]) label]])
(defn tabs (defn view
" Common options (for scrollable and non-scrollable tabs): " Common options (for scrollable and non-scrollable tabs):
- `blur?` Boolean passed down to `quo2.components.tabs.tab/tab`. - `blur?` Boolean passed down to `quo2.components.tabs.tab/tab`.

View File

@ -1,5 +1,5 @@
(ns quo2.components.tags.context-tag.view (ns quo2.components.tags.context-tag.view
(:require [quo2.components.avatars.group-avatar :as group-avatar] (:require [quo2.components.avatars.group-avatar.view :as group-avatar]
[quo2.components.avatars.user-avatar.style :as user-avatar-style] [quo2.components.avatars.user-avatar.style :as user-avatar-style]
[quo2.components.avatars.user-avatar.view :as user-avatar] [quo2.components.avatars.user-avatar.view :as user-avatar]
[quo2.components.icon :as icons] [quo2.components.icon :as icons]
@ -24,7 +24,7 @@
(select-keys [:override-theme :style :blur?]) (select-keys [:override-theme :style :blur?])
(assoc-in [:style :padding-left] 3) (assoc-in [:style :padding-left] 3)
(assoc-in [:style :padding-vertical] 2)) (assoc-in [:style :padding-vertical] 2))
[group-avatar/group-avatar opts] [group-avatar/view opts]
[text/text [text/text
{:weight :medium {:weight :medium
:size :paragraph-2 :size :paragraph-2

View File

@ -3,13 +3,13 @@
(:require (:require
quo2.components.avatars.account-avatar.view quo2.components.avatars.account-avatar.view
quo2.components.avatars.channel-avatar.view quo2.components.avatars.channel-avatar.view
quo2.components.avatars.group-avatar quo2.components.avatars.group-avatar.view
quo2.components.avatars.icon-avatar quo2.components.avatars.icon-avatar
quo2.components.avatars.user-avatar.view quo2.components.avatars.user-avatar.view
quo2.components.avatars.wallet-user-avatar quo2.components.avatars.wallet-user-avatar
quo2.components.banners.banner.view quo2.components.banners.banner.view
quo2.components.buttons.button.view quo2.components.buttons.button.view
quo2.components.buttons.dynamic-button quo2.components.buttons.dynamic-button.view
quo2.components.buttons.predictive-keyboard.view quo2.components.buttons.predictive-keyboard.view
quo2.components.buttons.slide-button.view quo2.components.buttons.slide-button.view
quo2.components.browser.browser-input.view quo2.components.browser.browser-input.view
@ -97,7 +97,7 @@
quo2.components.share.share-qr-code.view quo2.components.share.share-qr-code.view
quo2.components.tabs.account-selector quo2.components.tabs.account-selector
quo2.components.tabs.segmented-tab quo2.components.tabs.segmented-tab
quo2.components.tabs.tabs quo2.components.tabs.tabs.view
quo2.components.tags.context-tag.view quo2.components.tags.context-tag.view
quo2.components.tags.permission-tag quo2.components.tags.permission-tag
quo2.components.tags.status-tags quo2.components.tags.status-tags
@ -116,43 +116,43 @@
(def separator quo2.components.common.separator.view/separator) (def separator quo2.components.common.separator.view/separator)
;;;; AVATAR ;;;; Avatar
(def account-avatar quo2.components.avatars.account-avatar.view/view) (def account-avatar quo2.components.avatars.account-avatar.view/view)
(def channel-avatar quo2.components.avatars.channel-avatar.view/view) (def channel-avatar quo2.components.avatars.channel-avatar.view/view)
(def group-avatar quo2.components.avatars.group-avatar/group-avatar) (def group-avatar quo2.components.avatars.group-avatar.view/view)
(def icon-avatar quo2.components.avatars.icon-avatar/icon-avatar) (def icon-avatar quo2.components.avatars.icon-avatar/icon-avatar)
(def user-avatar quo2.components.avatars.user-avatar.view/user-avatar) (def user-avatar quo2.components.avatars.user-avatar.view/user-avatar)
(def wallet-user-avatar quo2.components.avatars.wallet-user-avatar/wallet-user-avatar) (def wallet-user-avatar quo2.components.avatars.wallet-user-avatar/wallet-user-avatar)
;;;; BANNER ;;;; Banner
(def banner quo2.components.banners.banner.view/banner) (def banner quo2.components.banners.banner.view/view)
;;;; BUTTONS ;;;; Buttons
(def button quo2.components.buttons.button.view/button) (def button quo2.components.buttons.button.view/button)
(def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button) (def dynamic-button quo2.components.buttons.dynamic-button.view/view)
(def predictive-keyboard quo2.components.buttons.predictive-keyboard.view/view) (def predictive-keyboard quo2.components.buttons.predictive-keyboard.view/view)
(def slide-button quo2.components.buttons.slide-button.view/view) (def slide-button quo2.components.buttons.slide-button.view/view)
;;;; BROWSER ;;;; Browser
(def browser-input quo2.components.browser.browser-input.view/browser-input) (def browser-input quo2.components.browser.browser-input.view/view)
;;;; CALENDAR ;;;; Calendar
(def calendar quo2.components.calendar.calendar.view/view) (def calendar quo2.components.calendar.calendar.view/view)
(def calendar-day quo2.components.calendar.calendar-day.view/view) (def calendar-day quo2.components.calendar.calendar-day.view/view)
(def calendar-year quo2.components.calendar.calendar-year.view/view) (def calendar-year quo2.components.calendar.calendar-year.view/view)
;;;; CODE ;;;; Code
(def snippet quo2.components.code.snippet/snippet) (def snippet quo2.components.code.snippet/snippet)
;;;; CARDS ;;;; Cards
(def small-option-card quo2.components.onboarding.small-option-card.view/small-option-card) (def small-option-card quo2.components.onboarding.small-option-card.view/small-option-card)
(def keycard quo2.components.keycard.view/keycard) (def keycard quo2.components.keycard.view/keycard)
;;;; COLORS ;;;; Colors
(def color-picker quo2.components.colors.color-picker.view/view) (def color-picker quo2.components.colors.color-picker.view/view)
(def picker-colors quo2.components.colors.color-picker.view/picker-colors) (def picker-colors quo2.components.colors.color-picker.view/picker-colors)
;;;; COMMUNITY ;;;; Community
(def community-card-view-item quo2.components.community.community-card-view/view) (def community-card-view-item quo2.components.community.community-card-view/view)
(def communities-membership-list-item (def communities-membership-list-item
quo2.components.community.community-list-view/communities-membership-list-item) quo2.components.community.community-list-view/communities-membership-list-item)
@ -166,42 +166,45 @@
(def token-requirement-list quo2.components.community.token-gating/token-requirement-list) (def token-requirement-list quo2.components.community.token-gating/token-requirement-list)
(def channel-actions quo2.components.community.channel-actions/channel-actions) (def channel-actions quo2.components.community.channel-actions/channel-actions)
;;;; COUNTER ;;;; Counter
(def counter quo2.components.counter.counter.view/view) (def counter quo2.components.counter.counter.view/view)
(def step quo2.components.counter.step.view/step) (def step quo2.components.counter.step.view/view)
;;;; DIVIDERS ;;;; Dividers
(def divider-label quo2.components.dividers.divider-label/divider-label) (def divider-label quo2.components.dividers.divider-label/divider-label)
(def new-messages quo2.components.dividers.new-messages/new-messages) (def new-messages quo2.components.dividers.new-messages/new-messages)
(def divider-date quo2.components.dividers.date/date) (def divider-date quo2.components.dividers.date/date)
(def strength-divider quo2.components.dividers.strength-divider.view/view) (def strength-divider quo2.components.dividers.strength-divider.view/view)
;;;; DRAWERS ;;;; Drawers
(def action-drawer quo2.components.drawers.action-drawers.view/action-drawer) (def action-drawer quo2.components.drawers.action-drawers.view/action-drawer)
(def documentation-drawers quo2.components.drawers.documentation-drawers.view/view) (def documentation-drawers quo2.components.drawers.documentation-drawers.view/view)
(def drawer-buttons quo2.components.drawers.drawer-buttons.view/view) (def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
(def permission-context quo2.components.drawers.permission-context.view/view) (def permission-context quo2.components.drawers.permission-context.view/view)
;;;; DROPDOWNS ;;;; Dropdowns
(def dropdown quo2.components.dropdowns.dropdown/dropdown) (def dropdown quo2.components.dropdowns.dropdown/dropdown)
;;;; EMPTY STATE ;;;; Empty State
(def empty-state quo2.components.empty-state.empty-state.view/empty-state) (def empty-state quo2.components.empty-state.empty-state.view/empty-state)
;;;; GRAPH ;;;; Graph
(def wallet-graph quo2.components.graph.wallet-graph.view/view) (def wallet-graph quo2.components.graph.wallet-graph.view/view)
;;;; HEADER ;;;; Header
(def header quo2.components.header/header) (def header quo2.components.header/header)
;;;; ICON ;;;; Gradient
(def gradient-cover quo2.components.gradient.gradient-cover.view/view)
;;;; Icon
(def icon quo2.components.icon/icon) (def icon quo2.components.icon/icon)
;;;; INFO ;;;; Info
(def info-message quo2.components.info.info-message/info-message) (def info-message quo2.components.info.info-message/info-message)
(def information-box quo2.components.info.information-box.view/view) (def information-box quo2.components.info.information-box.view/view)
;;;; INPUTS ;;;; Inputs
(def input quo2.components.inputs.input.view/input) (def input quo2.components.inputs.input.view/input)
(def locked-input quo2.components.inputs.locked-input.view/locked-input) (def locked-input quo2.components.inputs.locked-input.view/locked-input)
(def profile-input quo2.components.inputs.profile-input.view/profile-input) (def profile-input quo2.components.inputs.profile-input.view/profile-input)
@ -209,11 +212,16 @@
(def search-input quo2.components.inputs.search-input.view/search-input) (def search-input quo2.components.inputs.search-input.view/search-input)
(def title-input quo2.components.inputs.title-input.view/title-input) (def title-input quo2.components.inputs.title-input.view/title-input)
;;;; NUMBERED KEYBOARD ;;;; Numbered Keyboard
(def keyboard-key quo2.components.numbered-keyboard.keyboard-key.view/view) (def keyboard-key quo2.components.numbered-keyboard.keyboard-key.view/view)
(def numbered-keyboard quo2.components.numbered-keyboard.numbered-keyboard.view/view) (def numbered-keyboard quo2.components.numbered-keyboard.numbered-keyboard.view/view)
;;;; LIST ITEMS ;;;; Links
(def link-preview quo2.components.links.link-preview.view/view)
(def url-preview quo2.components.links.url-preview.view/view)
(def url-preview-list quo2.components.links.url-preview-list.view/view)
;;;; List items
(def channel-list-item quo2.components.list-items.channel/list-item) (def channel-list-item quo2.components.list-items.channel/list-item)
(def menu-item quo2.components.list-items.menu-item/menu-item) (def menu-item quo2.components.list-items.menu-item/menu-item)
(def preview-list quo2.components.list-items.preview-list/preview-list) (def preview-list quo2.components.list-items.preview-list/preview-list)
@ -221,23 +229,23 @@
(def community-list-item quo2.components.list-items.community.view/view) (def community-list-item quo2.components.list-items.community.view/view)
(def token-value quo2.components.list-items.token-value.view/view) (def token-value quo2.components.list-items.token-value.view/view)
;;;; LOADERS ;;;; Loaders
(def skeleton quo2.components.loaders.skeleton/skeleton) (def skeleton quo2.components.loaders.skeleton/skeleton)
(def static-skeleton quo2.components.loaders.skeleton.view/view) (def static-skeleton quo2.components.loaders.skeleton.view/view)
;;;; NAVIGATION ;;;; Navigation
(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button) (def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
(def page-nav quo2.components.navigation.page-nav/page-nav) (def page-nav quo2.components.navigation.page-nav/page-nav)
;;;; MARKDOWN ;;;; Markdown
(def markdown-list quo2.components.markdown.list.view/view) (def markdown-list quo2.components.markdown.list.view/view)
(def text quo2.components.markdown.text/text) (def text quo2.components.markdown.text/text)
;;;; MESSAGES ;;;; Messages
(def gap quo2.components.messages.gap/gap) (def gap quo2.components.messages.gap/gap)
(def system-message quo2.components.messages.system-message/system-message) (def system-message quo2.components.messages.system-message/system-message)
;;;; NOTIFICATIONS ;;;; Notifications
(def activity-log quo2.components.notifications.activity-log.view/view) (def activity-log quo2.components.notifications.activity-log.view/view)
(def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view) (def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view)
(def notification-dot quo2.components.notifications.notification-dot/notification-dot) (def notification-dot quo2.components.notifications.notification-dot/notification-dot)
@ -245,45 +253,45 @@
(def notification quo2.components.notifications.notification.view/notification) (def notification quo2.components.notifications.notification.view/notification)
(def toast quo2.components.notifications.toast.view/toast) (def toast quo2.components.notifications.toast.view/toast)
;;;; PASSWORD ;;;; Password
(def tips quo2.components.password.tips.view/view) (def tips quo2.components.password.tips.view/view)
;;;; PROFILE ;;;; Profile
(def profile-card quo2.components.profile.profile-card.view/profile-card) (def profile-card quo2.components.profile.profile-card.view/profile-card)
(def select-profile quo2.components.profile.select-profile.view/view) (def select-profile quo2.components.profile.select-profile.view/view)
;;;; REACTIONS ;;;; Reactions
(def reaction quo2.components.reactions.reaction/reaction) (def reaction quo2.components.reactions.reaction/reaction)
(def add-reaction quo2.components.reactions.reaction/add-reaction) (def add-reaction quo2.components.reactions.reaction/add-reaction)
;;;; RECORD AUDIO ;;;; Record Audio
(def record-audio quo2.components.record-audio.record-audio.view/record-audio) (def record-audio quo2.components.record-audio.record-audio.view/record-audio)
(def soundtrack quo2.components.record-audio.soundtrack.view/f-soundtrack) (def soundtrack quo2.components.record-audio.soundtrack.view/f-soundtrack)
;;;; SELECTORS ;;;; Selectors
(def author quo2.components.messages.author.view/author) (def author quo2.components.messages.author.view/author)
(def disclaimer quo2.components.selectors.disclaimer.view/view) (def disclaimer quo2.components.selectors.disclaimer.view/view)
(def filter quo2.components.selectors.filter.view/view) (def filter quo2.components.selectors.filter.view/view)
(def reactions quo2.components.selectors.reactions.view/view) (def reactions quo2.components.selectors.reactions.view/view)
(def checkbox quo2.components.selectors.selectors.view/checkbox) (def checkbox quo2.components.selectors.selectors.view/checkbox)
;;;; SETTINGS ;;;; Settings
(def privacy-option quo2.components.settings.privacy-option/card) (def privacy-option quo2.components.settings.privacy-option/card)
(def account quo2.components.settings.accounts.view/account) (def account quo2.components.settings.accounts.view/account)
(def settings-list quo2.components.settings.settings-list.view/settings-list) (def settings-list quo2.components.settings.settings-list.view/settings-list)
(def reorder-item quo2.components.settings.reorder-item.view/reorder-item) (def reorder-item quo2.components.settings.reorder-item.view/reorder-item)
(def category quo2.components.settings.category.view/category) (def category quo2.components.settings.category.view/category)
;;;; SHARE ;;;; Share
(def qr-code quo2.components.share.qr-code.view/qr-code) (def qr-code quo2.components.share.qr-code.view/qr-code)
(def share-qr-code quo2.components.share.share-qr-code.view/view) (def share-qr-code quo2.components.share.share-qr-code.view/view)
;;;; TABS ;;;; Tabs
(def tabs quo2.components.tabs.tabs/tabs) (def tabs quo2.components.tabs.tabs.view/view)
(def segmented-control quo2.components.tabs.segmented-tab/segmented-control) (def segmented-control quo2.components.tabs.segmented-tab/segmented-control)
(def account-selector quo2.components.tabs.account-selector/account-selector) (def account-selector quo2.components.tabs.account-selector/account-selector)
;;;; TAGS ;;;; Tags
(def tag quo2.components.tags.tag/tag) (def tag quo2.components.tags.tag/tag)
(def tags quo2.components.tags.tags/tags) (def tags quo2.components.tags.tags/tags)
(def permission-tag quo2.components.tags.permission-tag/tag) (def permission-tag quo2.components.tags.permission-tag/tag)
@ -295,18 +303,10 @@
(def audio-tag quo2.components.tags.context-tag.view/audio-tag) (def audio-tag quo2.components.tags.context-tag.view/audio-tag)
(def community-tag quo2.components.tags.context-tag.view/community-tag) (def community-tag quo2.components.tags.context-tag.view/community-tag)
;;;; TITLE ;;;; Title
(def title quo2.components.text-combinations.title.view/title) (def title quo2.components.text-combinations.title.view/title)
;;;; LINKS ;;;; Wallet
(def url-preview quo2.components.links.url-preview.view/view)
(def url-preview-list quo2.components.links.url-preview-list.view/view)
(def link-preview quo2.components.links.link-preview.view/view)
;;;; GRADIENT
(def gradient-cover quo2.components.gradient.gradient-cover.view/view)
;;;; WALLET
(def account-card quo2.components.wallet.account-card.view/view) (def account-card quo2.components.wallet.account-card.view/view)
(def account-overview quo2.components.wallet.account-overview.view/view) (def account-overview quo2.components.wallet.account-overview.view/view)
(def network-amount quo2.components.wallet.network-amount.view/view) (def network-amount quo2.components.wallet.network-amount.view/view)
@ -315,4 +315,3 @@
(def summary-info quo2.components.wallet.summary-info.view/view) (def summary-info quo2.components.wallet.summary-info.view/view)
(def token-input quo2.components.wallet.token-input.view/view) (def token-input quo2.components.wallet.token-input.view/view)
(def wallet-overview quo2.components.wallet.wallet-overview.view/view) (def wallet-overview quo2.components.wallet.wallet-overview.view/view)

View File

@ -5,7 +5,6 @@
[quo.design-system.spacing :as spacing] [quo.design-system.spacing :as spacing]
[quo2.core :as quo2] [quo2.core :as quo2]
[quo2.components.markdown.text :as quo2.text] [quo2.components.markdown.text :as quo2.text]
[quo2.components.tabs.tabs :as quo2.tabs]
[quo2.foundations.colors :as quo2.colors] [quo2.foundations.colors :as quo2.colors]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -124,7 +123,7 @@
(let [tab @selected-tab] (let [tab @selected-tab]
[react/view {:flex 1} [react/view {:flex 1}
[react/view {:padding-horizontal 20 :padding-bottom 20} [react/view {:padding-horizontal 20 :padding-bottom 20}
[quo2.tabs/tabs [quo2/tabs
{:size 24 {:size 24
:on-change #(reset! selected-tab %) :on-change #(reset! selected-tab %)
:default-active :tokens :default-active :tokens

View File

@ -4,7 +4,6 @@
[quo.design-system.colors :as colors] [quo.design-system.colors :as colors]
[quo2.core :as quo2] [quo2.core :as quo2]
[quo2.components.markdown.text :as quo2.text] [quo2.components.markdown.text :as quo2.text]
[quo2.components.tabs.tabs :as quo2.tabs]
[quo2.foundations.colors :as quo2.colors] [quo2.foundations.colors :as quo2.colors]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -283,7 +282,7 @@
:margin-top 12 :margin-top 12
:margin-bottom 20} :margin-bottom 20}
[react/view {:flex-direction :row} [react/view {:flex-direction :row}
[quo2.tabs/tabs [quo2/tabs
{:default-active (:address (first accounts)) {:default-active (:address (first accounts))
:on-change #(reset! selected-account-atom %) :on-change #(reset! selected-account-atom %)
:data accounts-data}] :data accounts-data}]

View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.avatars.group-avatar (ns status-im2.contexts.quo-preview.avatars.group-avatar
(:require [quo2.components.avatars.group-avatar :as quo2] (:require [quo2.core :as quo2]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]

View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.buttons.dynamic-button (ns status-im2.contexts.quo-preview.buttons.dynamic-button
(:require [quo2.components.buttons.dynamic-button :as quo2] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -41,7 +41,7 @@
[rn/view [rn/view
{:padding-vertical 60 {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/dynamic-button @state]]]]))) [quo/dynamic-button @state]]]])))
(defn preview-dynamic-button (defn preview-dynamic-button
[] []

View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.counter.step (ns status-im2.contexts.quo-preview.counter.step
(:require [quo2.components.counter.step.view :as quo2] (:require [quo2.core :as quo2]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]