From ee35fd52f63d2540ce5640d076d8609f3269560b Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Thu, 21 Mar 2024 15:54:14 +0000 Subject: [PATCH] chore(quo): add profile/extended collectible component (#19297) --- .../profile/collectible_list_item/view.cljs | 21 ++--- .../expanded_collectible/component_spec.cljs | 40 ++++++++++ .../profile/expanded_collectible/style.cljs | 33 ++++++++ .../profile/expanded_collectible/view.cljs | 77 +++++++++++++++++++ src/quo/core.cljs | 2 + src/quo/core_spec.cljs | 1 + src/status_im/contexts/preview/quo/main.cljs | 3 + .../quo/profile/expanded_collectible.cljs | 46 +++++++++++ 8 files changed, 210 insertions(+), 13 deletions(-) create mode 100644 src/quo/components/profile/expanded_collectible/component_spec.cljs create mode 100644 src/quo/components/profile/expanded_collectible/style.cljs create mode 100644 src/quo/components/profile/expanded_collectible/view.cljs create mode 100644 src/status_im/contexts/preview/quo/profile/expanded_collectible.cljs diff --git a/src/quo/components/profile/collectible_list_item/view.cljs b/src/quo/components/profile/collectible_list_item/view.cljs index 5541679d8f6..13f3c2629b8 100644 --- a/src/quo/components/profile/collectible_list_item/view.cljs +++ b/src/quo/components/profile/collectible_list_item/view.cljs @@ -4,7 +4,7 @@ [quo.components.counter.collectible-counter.view :as collectible-counter] [quo.components.icon :as icon] [quo.components.list-items.preview-list.view :as preview-list] - [quo.components.markdown.text :as quo] + [quo.components.markdown.text :as text] [quo.components.profile.collectible-list-item.style :as style] [quo.foundations.colors :as colors] [quo.foundations.gradients :as gradients] @@ -14,14 +14,13 @@ [utils.i18n :as i18n])) (defn- fallback-view - [{:keys [label theme type]}] + [{:keys [label theme]}] [rn/view - {:style (style/fallback {:type type - :theme theme})} + {:style (style/fallback {:theme theme})} [rn/view [icon/icon :i/sad {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]] [rn/view {:style {:height 4}}] - [quo/text + [text/text {:size :paragraph-2 :style {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}} label]]) @@ -46,7 +45,7 @@ [rn/view {:style style/card-details-container} (cond (= :cant-fetch status) - [quo/text + [text/text {:size :paragraph-1 :weight :medium :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} @@ -64,7 +63,7 @@ :size :size-20} [avatar-image-src]] [rn/view {:style {:width 8}}] - [quo/text + [text/text {:size :paragraph-1 :weight :semi-bold :style style/card-detail-text} @@ -76,7 +75,7 @@ {:size :size-20 :image avatar-image-src}] [rn/view {:style {:width 8}}] - [quo/text + [text/text {:size :paragraph-1 :weight :semi-bold :ellipsize-mode :tail @@ -86,7 +85,7 @@ (defn- card-view [{:keys [avatar-image-src collectible-name community? counter - gradient-color-index image-src status type]}] + gradient-color-index image-src status]}] (let [theme (quo.theme/use-theme-value)] [rn/view {:style (style/card-view-container theme)} [rn/view {:style {:aspect-ratio 1}} @@ -99,13 +98,11 @@ (= status :unsupported) [fallback-view {:theme theme - :type type :label (i18n/label :t/unsupported-file)}] (= status :cant-fetch) [fallback-view {:theme theme - :type type :label (i18n/label :t/cant-fetch-info)}] :else @@ -139,13 +136,11 @@ (= status :unsupported) [fallback-view {:theme theme - :type type :label (i18n/label :t/unsupported-file)}] (= status :cant-fetch) [fallback-view {:theme theme - :type type :label (i18n/label :t/cant-fetch-info)}] :else [rn/view {:style {:aspect-ratio 1}} diff --git a/src/quo/components/profile/expanded_collectible/component_spec.cljs b/src/quo/components/profile/expanded_collectible/component_spec.cljs new file mode 100644 index 00000000000..10d00a4d557 --- /dev/null +++ b/src/quo/components/profile/expanded_collectible/component_spec.cljs @@ -0,0 +1,40 @@ +(ns quo.components.profile.expanded-collectible.component-spec + (:require + [quo.components.profile.expanded-collectible.view :as expanded-collectible] + [test-helpers.component :as h])) + +(h/describe "Profile/ expanded collectible " + (h/test "renders with counter and has on-press event" + (let [on-press (h/mock-fn)] + (h/render-with-theme-provider + [expanded-collectible/view + {:image-src + "https://media.istockphoto.com/id/603164912/photo/suburb-asphalt-road-and-sun-flowers.jpg?s=612x612&w=0&k=20&c=qLoQ5QONJduHrQ0kJF3fvoofmGAFcrq6cL84HbzdLQM=" + :counter "1200" + :on-press on-press}]) + (h/fire-event :press (h/get-by-label-text :expanded-collectible)) + (h/was-called on-press) + (h/is-truthy (h/get-by-text "1200")))) + + (h/test "renders with status :cant-fetch and has on-press event" + (let [on-press (h/mock-fn)] + (h/render-with-theme-provider + [expanded-collectible/view + {:counter "1200" + :status :cant-fetch + :on-press on-press}]) + (h/fire-event :press (h/get-by-label-text :expanded-collectible)) + (h/was-called on-press) + (h/is-truthy (h/get-by-translation-text :t/cant-fetch-info)))) + + + (h/test "renders with status :unsupported and has on-press event" + (let [on-press (h/mock-fn)] + (h/render-with-theme-provider + [expanded-collectible/view + {:counter "1200" + :status :unsupported + :on-press on-press}]) + (h/fire-event :press (h/get-by-label-text :expanded-collectible)) + (h/was-called on-press) + (h/is-truthy (h/get-by-translation-text :t/unsupported-file))))) diff --git a/src/quo/components/profile/expanded_collectible/style.cljs b/src/quo/components/profile/expanded_collectible/style.cljs new file mode 100644 index 00000000000..798970dad76 --- /dev/null +++ b/src/quo/components/profile/expanded_collectible/style.cljs @@ -0,0 +1,33 @@ +(ns quo.components.profile.expanded-collectible.style + (:require [quo.foundations.colors :as colors] + [quo.foundations.shadows :as shadows])) + +(def container + (merge (shadows/get 2) + {:flex 1 + :align-items :center + :justify-content :center + :border-radius 16})) + +(defn image + [square? aspect-ratio] + {:width "100%" + :aspect-ratio (if square? 1 aspect-ratio) + :border-radius 16}) + +(defn fallback + [{:keys [theme]}] + {:background-color (colors/theme-colors colors/neutral-2_5 colors/neutral-90 theme) + :border-style :dashed + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) + :border-width 1 + :border-radius 16 + :width "100%" + :aspect-ratio 1 + :align-items :center + :justify-content :center}) + +(def counter + {:position :absolute + :top 12 + :right 12}) diff --git a/src/quo/components/profile/expanded_collectible/view.cljs b/src/quo/components/profile/expanded_collectible/view.cljs new file mode 100644 index 00000000000..53893ee1555 --- /dev/null +++ b/src/quo/components/profile/expanded_collectible/view.cljs @@ -0,0 +1,77 @@ +(ns quo.components.profile.expanded-collectible.view + (:require + [promesa.core :as p] + [quo.components.counter.collectible-counter.view :as collectible-counter] + [quo.components.icon :as icon] + [quo.components.markdown.text :as text] + [quo.components.profile.expanded-collectible.style :as style] + [quo.foundations.colors :as colors] + [quo.theme] + [react-native.core :as rn] + [schema.core :as schema] + [utils.i18n :as i18n])) + +(defn- counter-view + [counter] + (when counter + [collectible-counter/view + {:container-style style/counter + :value counter}])) + +(defn- fallback-view + [{:keys [label theme counter]}] + [rn/view + {:style (style/fallback {:theme theme})} + [counter-view counter] + [rn/view + [icon/icon :i/sad {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]] + [rn/view {:style {:height 4}}] + [text/text + {:size :paragraph-2 + :style {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}} + label]]) + +(defn view-internal + [{:keys [container-style square? status on-press counter image-src] :or {status :default}}] + (let [theme (quo.theme/use-theme-value) + [image-size set-image-size] (rn/use-state {})] + (rn/use-effect + (fn [] + (p/let [[image-width image-height] (rn/image-get-size image-src)] + (set-image-size {:width image-width + :height image-height + :aspect-ratio (/ image-width image-height)}))) + [image-src]) + [rn/pressable + {:on-press on-press + :accessibility-label :expanded-collectible + :style (merge container-style style/container)} + (case status + :unsupported [fallback-view + {:label (i18n/label :t/unsupported-file) + :counter counter + :theme theme}] + :cant-fetch [fallback-view + {:label (i18n/label :t/cant-fetch-info) + :counter counter + :theme theme}] + [rn/view {:style {:flex 1}} + [rn/image + {:style (style/image square? (:aspect-ratio image-size)) + :source image-src}] + [counter-view counter]])])) + +(def ?schema + [:=> + [:catn + [:props + [:map {:closed true} + [:image-src {:optional true} string?] + [:container-style {:optional true} [:maybe :map]] + [:square? {:optional true} [:maybe boolean?]] + [:counter {:optional true} [:maybe string?]] + [:status {:optional true} [:maybe [:enum :default :loading :cant-fetch :unsupported]]] + [:on-press {:optional true} [:maybe fn?]]]]] + :any]) + +(def view (schema/instrument #'view-internal ?schema)) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 2a69418bfdd..633fcbe6887 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -112,6 +112,7 @@ quo.components.password.tips.view quo.components.profile.collectible-list-item.view quo.components.profile.collectible.view + quo.components.profile.expanded-collectible.view quo.components.profile.link-card.view quo.components.profile.profile-card.view quo.components.profile.select-profile.view @@ -354,6 +355,7 @@ ;;;; Profile (def collectible quo.components.profile.collectible.view/collectible) (def collectible-list-item quo.components.profile.collectible-list-item.view/view) +(def expanded-collectible quo.components.profile.expanded-collectible.view/view) (def link-card quo.components.profile.link-card.view/view) (def profile-card quo.components.profile.profile-card.view/profile-card) (def select-profile quo.components.profile.select-profile.view/view) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index e5269171244..6be17e44c05 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -64,6 +64,7 @@ quo.components.onboarding.small-option-card.component-spec quo.components.password.tips.component-spec quo.components.profile.collectible-list-item.component-spec + quo.components.profile.expanded-collectible.component-spec quo.components.profile.link-card.component-spec quo.components.profile.select-profile.component-spec quo.components.profile.showcase-nav.component-spec diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index 067209e32be..492c4fed7c5 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -135,6 +135,7 @@ [status-im.contexts.preview.quo.password.tips :as tips] [status-im.contexts.preview.quo.profile.collectible :as collectible] [status-im.contexts.preview.quo.profile.collectible-list-item :as collectible-list-item] + [status-im.contexts.preview.quo.profile.expanded-collectible :as expanded-collectible] [status-im.contexts.preview.quo.profile.link-card :as link-card] [status-im.contexts.preview.quo.profile.profile-card :as profile-card] [status-im.contexts.preview.quo.profile.select-profile :as select-profile] @@ -420,6 +421,8 @@ :component collectible/view} {:name :collectible-list-item :component collectible-list-item/view} + {:name :expanded-collectible + :component expanded-collectible/view} {:name :link-card :component link-card/view} {:name :profile-card diff --git a/src/status_im/contexts/preview/quo/profile/expanded_collectible.cljs b/src/status_im/contexts/preview/quo/profile/expanded_collectible.cljs new file mode 100644 index 00000000000..506a4c0bb97 --- /dev/null +++ b/src/status_im/contexts/preview/quo/profile/expanded_collectible.cljs @@ -0,0 +1,46 @@ +(ns status-im.contexts.preview.quo.profile.expanded-collectible + (:require + [quo.core :as quo] + [reagent.core :as reagent] + [status-im.contexts.preview.quo.preview :as preview])) + +(defonce vertical-image + "https://images.unsplash.com/photo-1526512340740-9217d0159da9?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dmVydGljYWx8ZW58MHx8MHx8fDA%3D") +(defonce horizontal-image + "https://media.istockphoto.com/id/603164912/photo/suburb-asphalt-road-and-sun-flowers.jpg?s=612x612&w=0&k=20&c=qLoQ5QONJduHrQ0kJF3fvoofmGAFcrq6cL84HbzdLQM=") + +(def descriptor + [{:key :square? + :type :boolean} + {:key :counter + :type :text} + {:key :status + :type :select + :options [{:key :loading} + {:key :default} + {:key :unsupported} + {:key :cant-fetch}]} + {:type :select + :key :image-type + :options [{:key :vertical} + {:key :horizontal}]}]) + +(defn view + [] + (let [state (reagent/atom {:square? false + :counter "" + :status :default + :image-type :horizontal})] + (fn [] + [preview/preview-container + {:state state + :descriptor descriptor + :component-container-style {:padding-vertical 20 + :margin-horizontal 35}} + [quo/expanded-collectible + (assoc (dissoc @state :image-type) + :image-src (if (= :vertical (:image-type @state)) + vertical-image + horizontal-image) + :counter (when (seq (:counter @state)) (:counter @state)) + :on-press #(js/alert "Pressed"))]])))