From 6870000490e29b375854047ab80ebcf042937c07 Mon Sep 17 00:00:00 2001 From: mmilad75 <55688834+mmilad75@users.noreply.github.com> Date: Sat, 26 Aug 2023 18:33:10 +0330 Subject: [PATCH] Implement Data Item component (#16960) Implement Data Item component #16960 --- .../common/not_implemented/style.cljs | 12 ++ .../common/not_implemented/view.cljs | 11 ++ .../settings/data_item/component_spec.cljs | 178 ++++++++++++++++++ .../components/settings/data_item/style.cljs | 71 +++++++ .../components/settings/data_item/view.cljs | 126 +++++++++++++ src/quo2/core.cljs | 2 + src/quo2/core_spec.cljs | 1 + src/status_im2/contexts/quo_preview/main.cljs | 6 +- .../quo_preview/settings/data_item.cljs | 105 +++++++++++ translations/en.json | 3 +- 10 files changed, 513 insertions(+), 2 deletions(-) create mode 100644 src/quo2/components/common/not_implemented/style.cljs create mode 100644 src/quo2/components/common/not_implemented/view.cljs create mode 100644 src/quo2/components/settings/data_item/component_spec.cljs create mode 100644 src/quo2/components/settings/data_item/style.cljs create mode 100644 src/quo2/components/settings/data_item/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/settings/data_item.cljs diff --git a/src/quo2/components/common/not_implemented/style.cljs b/src/quo2/components/common/not_implemented/style.cljs new file mode 100644 index 0000000000..e516a8eb28 --- /dev/null +++ b/src/quo2/components/common/not_implemented/style.cljs @@ -0,0 +1,12 @@ +(ns quo2.components.common.not-implemented.style + (:require [quo2.foundations.colors :as colors])) + +(defn text + [blur? theme] + {:border-color :red + :border-width 1 + :color (if blur? + colors/white + (colors/theme-colors colors/neutral-100 + colors/white + theme))}) diff --git a/src/quo2/components/common/not_implemented/view.cljs b/src/quo2/components/common/not_implemented/view.cljs new file mode 100644 index 0000000000..1b4030b874 --- /dev/null +++ b/src/quo2/components/common/not_implemented/view.cljs @@ -0,0 +1,11 @@ +(ns quo2.components.common.not-implemented.view + (:require [react-native.core :as rn] + [quo2.theme :as quo.theme] + [quo2.components.common.not-implemented.style :as style])) + +(defn- view-internal + [{:keys [blur? theme]}] + [rn/text {:style (style/text blur? theme)} + "not implemented"]) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/settings/data_item/component_spec.cljs b/src/quo2/components/settings/data_item/component_spec.cljs new file mode 100644 index 0000000000..888a76da28 --- /dev/null +++ b/src/quo2/components/settings/data_item/component_spec.cljs @@ -0,0 +1,178 @@ +(ns quo2.components.settings.data-item.component-spec + (:require [test-helpers.component :as h] + [quo2.core :as quo])) + +(h/describe + "date item tests" + (h/test "title is visible" + (h/render [quo/data-item + {:on-press (h/mock-fn) + :blur? false + :description :account + :icon-right? false + :card? true + :label :none + :status :default + :size :default + :title "Label" + :subtitle "Description" + :icon :i/placeholder + :emoji "🎮" + :customization-color :yellow}]) + (h/is-truthy (h/get-by-text "Label"))) + + (h/test "data item renders correctly if card? is false" + (h/render [quo/data-item + {:on-press (h/mock-fn) + :blur? false + :description :account + :icon-right? false + :card? false + :label :none + :status :default + :size :default + :title "Label" + :subtitle "Description" + :icon :i/placeholder + :emoji "🎮" + :customization-color :yellow}]) + (h/has-style (h/query-by-label-text :data-item) + {:borderWidth nil})) + + (h/test "data item renders correctly if card? is true and size is small" + (h/render [quo/data-item + {:on-press (h/mock-fn) + :blur? false + :description :account + :icon-right? false + :card? true + :label :none + :status :default + :size :small + :title "Label" + :subtitle "Description" + :icon :i/placeholder + :emoji "🎮" + :customization-color :yellow}]) + (h/has-style (h/query-by-label-text :data-item) + {:borderWidth nil})) + + (h/test "data item renders correctly if card? is true" + (h/render [quo/data-item + {:on-press (h/mock-fn) + :blur? false + :description :account + :icon-right? false + :card? true + :label :none + :status :default + :size :default + :title "Label" + :subtitle "Description" + :icon :i/placeholder + :emoji "🎮" + :customization-color :yellow}]) + (h/has-style (h/query-by-label-text :data-item) + {:borderWidth 1})) + + (h/test "subtitle is visible when status is not loading" + (h/render [quo/data-item + {:on-press (h/mock-fn) + :blur? false + :description :account + :icon-right? false + :card? true + :label :none + :status :default + :size :default + :title "Label" + :subtitle "Description" + :icon :i/placeholder + :emoji "🎮" + :customization-color :yellow}]) + (h/is-truthy (h/get-by-text "Description"))) + + (h/test "right icon is not visible when icon-right? is false" + (h/render [quo/data-item + {:on-press (h/mock-fn) + :blur? false + :description :account + :icon-right? false + :card? true + :label :none + :status :default + :size :default + :title "Label" + :subtitle "Description" + :icon :i/placeholder + :emoji "🎮" + :customization-color :yellow}]) + (h/is-falsy (h/query-by-label-text :icon-right))) + + (h/test "right icon is visible when icon-right? is true" + (h/render [quo/data-item + {:on-press (h/mock-fn) + :blur? false + :description :account + :icon-right? true + :card? true + :label :none + :status :default + :size :default + :title "Label" + :subtitle "Description" + :icon :i/placeholder + :emoji "🎮" + :customization-color :yellow}]) + (h/is-truthy (h/query-by-label-text :icon-right))) + + (h/test "description icon is visible when description is icon" + (h/render [quo/data-item + {:on-press (h/mock-fn) + :blur? false + :description :icon + :icon-right? true + :card? true + :label :preview + :status :default + :size :default + :title "Label" + :subtitle "Description" + :icon :i/placeholder + :emoji "🎮" + :customization-color :yellow}]) + (h/is-truthy (h/query-by-label-text :description-icon))) + + (h/test "description image is visible when description is network" + (h/render [quo/data-item + {:on-press (h/mock-fn) + :blur? false + :description :network + :icon-right? true + :card? true + :label :preview + :status :default + :size :default + :title "Label" + :subtitle "Description" + :icon :i/placeholder + :emoji "🎮" + :customization-color :yellow}]) + (h/is-truthy (h/query-by-label-text :description-image))) + + (h/test "description emoji is visible when description is account" + (h/render [quo/data-item + {:on-press (h/mock-fn) + :blur? false + :description :account + :icon-right? true + :card? true + :label :preview + :status :default + :size :default + :title "Label" + :subtitle "Description" + :icon :i/placeholder + :emoji "🎮" + :customization-color :yellow}]) + (h/is-truthy (h/query-by-label-text :account-emoji)))) diff --git a/src/quo2/components/settings/data_item/style.cljs b/src/quo2/components/settings/data_item/style.cljs new file mode 100644 index 0000000000..31d689ea34 --- /dev/null +++ b/src/quo2/components/settings/data_item/style.cljs @@ -0,0 +1,71 @@ +(ns quo2.components.settings.data-item.style + (:require [quo2.foundations.colors :as colors])) + +(defn container + [size card? blur? theme] + {:flex 1 + :flex-direction :row + :justify-content :space-between + :padding-vertical (when (= size :default) 8) + :padding-horizontal (when (= size :default) 12) + :border-radius 16 + :border-width (when (and card? (not= size :small)) 1) + :border-color (if blur? + colors/white-opa-10 + (colors/theme-colors colors/neutral-10 + colors/neutral-80 + theme))}) + +(defn loading-container + [size blur? theme] + {:width (if (= size :default) 132 72) + :height (if (= size :default) 16 10) + :background-color (if blur? + colors/white-opa-5 + (colors/theme-colors colors/neutral-5 + colors/neutral-90 + theme)) + :border-radius (if (= size :default) 6 3) + :margin-vertical (if (= size :default) 4 3)}) + +(def subtitle-container + {:flex-direction :row + :margin-bottom 1}) + +(def right-container + {:flex-direction :row + :align-items :center}) + +(defn subtitle-icon-container + [description] + {:margin-right (when (not= :default description) 4) + :justify-content :center}) + +(defn title + [theme] + {:color (colors/theme-colors colors/neutral-50 + colors/neutral-40 + theme) + :margin-right 4}) + +(def title-container + {:flex-direction :row + :align-items :center}) + +(def image + {:width 16 + :height 16}) + +(defn description + [blur? theme] + {:color (if blur? + colors/white + (colors/theme-colors colors/neutral-100 + colors/white + theme))}) +(defn right-icon + [label] + {:margin-left (if (or (= label :graph) (= label :none)) 12 8)}) + +(def left-side + {:flex 1}) diff --git a/src/quo2/components/settings/data_item/view.cljs b/src/quo2/components/settings/data_item/view.cljs new file mode 100644 index 0000000000..5a9c80e05d --- /dev/null +++ b/src/quo2/components/settings/data_item/view.cljs @@ -0,0 +1,126 @@ +(ns quo2.components.settings.data-item.view + (:require [quo2.theme :as quo.theme] + [react-native.core :as rn] + [quo2.components.settings.data-item.style :as style] + [quo2.foundations.colors :as colors] + [quo2.components.common.not-implemented.view :as not-implemented] + [quo2.components.icon :as icons] + [quo2.components.markdown.text :as text] + [quo2.components.list-items.preview-list.view :as preview-list] + [quo2.foundations.resources :as quo.resources] + [quo2.components.avatars.account-avatar.view :as account-avatar] + [utils.i18n :as i18n])) + +(defn- left-loading + [{:keys [size blur? theme]}] + [rn/view {:style (style/loading-container size blur? theme)}]) + +(defn- left-subtitle + [{:keys [theme size description icon icon-color blur? subtitle customization-color emoji]}] + [rn/view {:style style/subtitle-container} + (when (not= :small size) + [rn/view {:style (style/subtitle-icon-container description)} + (case description + :icon [icons/icon icon + {:accessibility-label :description-icon + :size 16 + :color icon-color}] + :account [account-avatar/view + {:customization-color customization-color + :size 16 + :emoji emoji + :type :default}] + :network [rn/image + {:accessibility-label :description-image + :source (quo.resources/tokens :eth) + :style style/image}] + nil)]) + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/description blur? theme)} + subtitle]]) + +(defn- left-title + [{:keys [title label size theme]}] + [rn/view {:style style/title-container} + [text/text + {:weight :regular + :size :paragraph-2 + :style (style/title theme)} + title] + (when (and (= :graph label) (not= :small size)) + [text/text + {:weight :regular + :size :label + :style (style/title theme)} + (i18n/label :t/days)])]) + +(defn- left-side + [{:keys [theme title status size blur? description icon subtitle label icon-color customization-color + emoji]}] + [rn/view {:style style/left-side} + [left-title + {:title title + :label label + :size size + :theme theme}] + (if (= status :loading) + [left-loading + {:size size + :blur? blur? + :theme theme}] + [left-subtitle + {:theme theme + :size size + :description description + :icon icon + :icon-color icon-color + :blur? blur? + :subtitle subtitle + :customization-color customization-color + :emoji emoji}])]) + +(defn- right-side + [{:keys [label icon-right? icon-color communities-list]}] + [rn/view {:style style/right-container} + (case label + :preview [preview-list/view + {:type :communities + :number 3 + :size :size/s-24} + communities-list] + :graph [text/text "graph"] + :none nil + nil) + (when icon-right? + [rn/view {:style (style/right-icon label)} + [icons/icon + (if (= :none label) + :i/copy + :i/chevron-right) + {:accessibility-label :icon-right + :color icon-color + :size 20}]])]) + +(def view-internal + (fn [{:keys [blur? card? icon-right? label status size theme on-press communities-list] :as props}] + (let [icon-color (if (or blur? (= :dark theme)) + colors/neutral-40 + colors/neutral-50)] + (if (= :graph label) + [not-implemented/view {:blur? blur?}] + [rn/pressable + {:accessibility-label :data-item + :disabled (not icon-right?) + :on-press on-press + :style (style/container size card? blur? theme)} + [left-side props] + (when (and (= :default status) (not= :small size)) + [right-side + {:label label + :icon-right? icon-right? + :icon-color icon-color + :communities-list communities-list}])])))) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 5d4697549c..367a455043 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -96,6 +96,7 @@ quo2.components.selectors.reactions.view quo2.components.selectors.selectors.view quo2.components.settings.accounts.view + quo2.components.settings.data-item.view quo2.components.settings.privacy-option quo2.components.settings.reorder-item.view quo2.components.settings.settings-list.view @@ -297,6 +298,7 @@ (def settings-list quo2.components.settings.settings-list.view/settings-list) (def reorder-item quo2.components.settings.reorder-item.view/reorder-item) (def category quo2.components.settings.category.view/category) +(def data-item quo2.components.settings.data-item.view/view) ;;;; Share (def qr-code quo2.components.share.qr-code.view/qr-code) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 6d3648c81d..18dc885f66 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -55,6 +55,7 @@ [quo2.components.settings.reorder-item.component-spec] [quo2.components.settings.settings-list.component-spec] [quo2.components.settings.category.component-spec] + [quo2.components.settings.data-item.component-spec] [quo2.components.share.share-qr-code.component-spec] [quo2.components.tags.status-tags-component-spec] [quo2.components.wallet.account-card.component-spec] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index d7dca05eaf..a34d26fcef 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -92,6 +92,7 @@ [status-im2.contexts.quo-preview.selectors.filter :as filter] [status-im2.contexts.quo-preview.selectors.selectors :as selectors] [status-im2.contexts.quo-preview.settings.accounts :as accounts] + [status-im2.contexts.quo-preview.settings.data-item :as data-item] [status-im2.contexts.quo-preview.settings.settings-list :as settings-list] [status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option] [status-im2.contexts.quo-preview.settings.reorder-item :as reorder-item] @@ -321,7 +322,10 @@ {:name :reorder-item :component reorder-item/preview-reorder-item} {:name :category - :component category/preview}] + :options {:topBar {:visible true}} + :component category/preview} + {:name :data-item + :component data-item/preview-data-item}] :share [{:name :qr-code :component qr-code/preview-qr-code} {:name :share-qr-code diff --git a/src/status_im2/contexts/quo_preview/settings/data_item.cljs b/src/status_im2/contexts/quo_preview/settings/data_item.cljs new file mode 100644 index 0000000000..457d4ee9bf --- /dev/null +++ b/src/status_im2/contexts/quo_preview/settings/data_item.cljs @@ -0,0 +1,105 @@ +(ns status-im2.contexts.quo-preview.settings.data-item + (:require [quo2.core :as quo] + [react-native.core :as rn] + [quo2.foundations.colors :as colors] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview] + [status-im2.common.resources :as resources] + [react-native.blur :as blur])) + +(def descriptor + [{:label "Blur:" + :key :blur? + :type :boolean} + {:label "Card:" + :key :card? + :type :boolean} + {:label "Icon Right:" + :key :icon-right? + :type :boolean} + {:label "Label:" + :type :select + :key :label + :options [{:key :none + :value "None"} + {:key :graph + :value "Graph"} + {:key :preview + :value "Preview"}]} + {:label "Description:" + :type :select + :key :description + :options [{:key :default + :value "Default"} + {:key :icon + :value "Icon"} + {:key :network + :value "Network"} + {:key :account + :value "Account"}]} + {:label "Status:" + :type :select + :key :status + :options [{:key :default + :value "Default"} + {:key :loading + :value "Loading"}]} + {:label "Size:" + :type :select + :key :size + :options [{:key :default + :value "Default"} + {:key :small + :value "Small"}]}]) + +(def communities-list + [{:source (resources/get-mock-image :coinbase)} + {:source (resources/get-mock-image :decentraland)} + {:source (resources/get-mock-image :rarible)}]) + +(defn cool-preview + [] + (let [state (reagent/atom {:on-press #(js/alert (str "pressed")) + :blur? false + :description :account + :icon-right? false + :card? true + :label :none + :status :default + :size :default + :title "Label" + :subtitle "Description" + :icon :i/placeholder + :emoji "🎮" + :customization-color :yellow + :communities-list communities-list}) + blur? (reagent/cursor state [:blur?])] + (fn [] + [rn/view + [rn/view {:style {:flex 1}} + [preview/customizer state descriptor]] + (when @blur? + [blur/view + {:style {:position :absolute + :left 0 + :right 0 + :bottom 0 + :height 75 + :background-color colors/neutral-80-opa-70} + :overlay-color :transparent}]) + [rn/view + {:style {:align-items :center + :padding-vertical 10 + :margin-horizontal 20}} + [quo/data-item @state]]]))) + +(defn preview-data-item + [] + [rn/view + {:style {:background-color (colors/theme-colors colors/white colors/neutral-100) + :flex 1}} + [rn/flat-list + {:style {:flex 1} + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/translations/en.json b/translations/en.json index 9b93ebe1a6..9b0f13f6b4 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2288,5 +2288,6 @@ "keypair-title": "{{name}}'s default keypair", "about": "About", "no-permissions": "No permissions", - "no-dapps": "No connected dApps" + "no-dapps": "No connected dApps", + "days": "Days" }