[Communities] Add quo Collectible Tag (#18748)

* register and basic imports for collectible tag component

* implement variations and design for collectible tag component

* Refined based on review feedback and implemented schema enhancements

src/quo/components/tags/collectible_tag/style.cljs

@@ -0,0 +1,50 @@
+(ns quo.components.tags.collectible-tag.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn container
+  [size options blur? theme]
+  (let [hold? (= options :hold)]
+    (merge {:background-color (if blur?
+                                (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                                (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
+            :flex-direction   :row
+            :align-items      :center
+            :padding-left     2
+            :border-width     (if hold? 1 0)
+            :border-radius    0
+            :border-color     (colors/resolve-color :success theme)}
+           (condp = size
+             :size-24 {:height        (if hold? 26 24)
+                       :padding-right 10
+                       :border-radius 8}
+             :size-32 {:height        (if hold? 34 32)
+                       :padding-right 12
+                       :border-radius 10}))))
+
+(defn options-icon
+  [size]
+  (assoc
+   (condp = size
+     :size-24 {:right -8
+               :top   -8}
+     :size-32 {:right -6
+               :top   -6})
+   :position
+   :absolute))
+
+(defn collectible-img
+  [size]
+  (condp = size
+    :size-24 {:width         20
+              :height        20
+              :margin-right  6
+              :border-radius 6}
+    :size-32 {:width         28
+              :height        28
+              :margin-right  8
+              :border-radius 8}))
+
+(defn label
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})

src/quo/components/tags/collectible_tag/view.cljs

@@ -0,0 +1,70 @@
+(ns quo.components.tags.collectible-tag.view
+  (:require
+    [quo.components.icon :as icons]
+    [quo.components.markdown.text :as text]
+    [quo.components.tags.collectible-tag.style :as style]
+    [quo.theme]
+    [react-native.core :as rn]
+    [react-native.hole-view :as hole-view]
+    [schema.core :as schema]))
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:options {:optional true} [:maybe [:enum false :add :hold]]]
+      [:size {:optional true} [:enum :size-24 :size-32]]
+      [:blur? {:optional true} :boolean]
+      [:theme :schema.common/theme]
+      [:collectible-img-src [:or :int :string]]
+      [:collectible-name :string]
+      [:collectible-id :string]
+      [:container-width :number]
+      [:on-layout {:optional true} [:maybe fn?]]]]]
+   :any])
+
+(defn- view-internal
+  []
+  (fn [{:keys [options size blur? theme collectible-img-src collectible-name collectible-id
+               container-width on-layout]
+        :or   {size :size-24}}]
+    [rn/view
+     {:on-layout on-layout}
+     [hole-view/hole-view
+      {:holes (if options
+                [{:x            (- container-width
+                                   (case size
+                                     :size-24 10
+                                     :size-32 12
+                                     nil))
+                  :y            (case size
+                                  :size-24 -6
+                                  :size-32 -4
+                                  nil)
+                  :width        16
+                  :height       16
+                  :borderRadius 8}]
+                [])}
+      [rn/view {:style (style/container size options blur? theme)}
+       [rn/image {:style (style/collectible-img size) :source collectible-img-src}]
+       [text/text
+        {:size   :paragraph-2
+         :weight :medium
+         :style  (style/label theme)}
+        collectible-name]
+       [text/text
+        {:size        :paragraph-2
+         :weight      :medium
+         :margin-left 5
+         :style       (style/label theme)}
+        collectible-id]]]
+     (when options
+       [rn/view {:style (style/options-icon size)}
+        [icons/icon (if (= options :hold) :i/hold :i/add-token)
+         {:size     20
+          :no-color true}]])]))
+
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal ?schema)))

src/quo/core.cljs

@@ -135,6 +135,7 @@
     quo.components.tabs.account-selector
     quo.components.tabs.segmented-tab
     quo.components.tabs.tabs.view
+    quo.components.tags.collectible-tag.view
     quo.components.tags.context-tag.view
     quo.components.tags.network-tags.view
     quo.components.tags.number-tag.view
@@ -387,6 +388,7 @@
 (def account-selector quo.components.tabs.account-selector/account-selector)
 
 ;;;; Tags
+(def collectible-tag quo.components.tags.collectible-tag.view/view)
 (def context-tag quo.components.tags.context-tag.view/view)
 (def network-tags quo.components.tags.network-tags.view/view)
 (def number-tag quo.components.tags.number-tag.view/view)

src/status_im/contexts/preview/quo/main.cljs

@@ -158,6 +158,7 @@
     [status-im.contexts.preview.quo.tabs.account-selector :as account-selector]
     [status-im.contexts.preview.quo.tabs.segmented-tab :as segmented]
     [status-im.contexts.preview.quo.tabs.tabs :as tabs]
+    [status-im.contexts.preview.quo.tags.collectible-tag :as collectible-tag]
     [status-im.contexts.preview.quo.tags.context-tags :as context-tags]
     [status-im.contexts.preview.quo.tags.network-tags :as network-tags]
     [status-im.contexts.preview.quo.tags.number-tag :as number-tag]
@@ -457,7 +458,9 @@
                         :component tabs/view}
                        {:name      :account-selector
                         :component account-selector/view}]
-   :tags              [{:name      :context-tags
+   :tags              [{:name      :collectible-tag
+                        :component collectible-tag/view}
+                       {:name      :context-tags
                         :component context-tags/view}
                        {:name      :network-tags
                         :component network-tags/view}

src/status_im/contexts/preview/quo/tags/collectible_tag.cljs

@@ -0,0 +1,51 @@
+(ns status-im.contexts.preview.quo.tags.collectible-tag
+  (:require
+    [oops.core :refer [oget]]
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im.common.resources :as resources]
+    [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:key     :size
+    :type    :select
+    :options [{:key   :size-24
+               :value "Size 24"}
+              {:key   :size-32
+               :value "Size 32"}]}
+   {:key     :options
+    :type    :select
+    :options [{:key   false
+               :value false}
+              {:key   :add
+               :value :add}
+              {:key   :hold
+               :value :hold}]}
+   {:key  :blur?
+    :type :boolean}
+   {:key  :collectible-name
+    :type :text}
+   {:key  :collectible-id
+    :type :text}])
+
+(defn view
+  []
+  (let [state     (reagent/atom {:size                :size-24
+                                 :collectible-name    "Collectible"
+                                 :collectible-id      "#123"
+                                 :collectible-img-src (resources/mock-images :collectible)
+                                 :options             false
+                                 :blur?               false
+                                 :container-width     0})
+        on-layout #(swap! state assoc
+                     :container-width
+                     (oget % :nativeEvent :layout :width))]
+    (fn []
+      [preview/preview-container
+       {:state                 state
+        :blur?                 (:blur? @state)
+        :show-blur-background? true
+        :descriptor            descriptor}
+       [rn/view {:style {:align-items :center}}
+        [quo/collectible-tag (assoc @state :on-layout on-layout)]]])))