Add Collectible ui component (#14803)

src/quo2/components/profile/collectible/style.cljs

@@ -0,0 +1,68 @@
+(ns quo2.components.profile.collectible.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def tile-style-by-size
+  {:xl {:width         160
+        :height        160
+        :border-radius 12}
+   :lg {:width         104
+        :height        104
+        :border-radius 10}
+   :md {:width         76
+        :height        76
+        :border-radius 10}
+   :sm {:width         48
+        :height        48
+        :border-radius 8}
+   :xs {:width         36
+        :height        36
+        :border-radius 8}})
+
+(def tile-outer-container
+  {:width   176
+   :height  176
+   :padding 8})
+
+(def tile-inner-container
+  {:position :relative
+   :flex     1})
+
+(def tile-sub-container
+  {:position :absolute
+   :width    76
+   :height   76
+   :bottom   0
+   :right    0})
+
+(def top-left
+  {:position :absolute
+   :top      0
+   :left     0})
+
+(def top-right
+  {:position :absolute
+   :top      0
+   :right    0})
+
+(def bottom-left
+  {:position :absolute
+   :bottom   0
+   :left     0})
+
+(def bottom-right
+  {:position :absolute
+   :bottom   0
+   :right    0})
+
+(defn remaining-tiles
+  []
+  (let [bg-color  (colors/theme-colors colors/neutral-20 colors/neutral-80)
+        tile-size (tile-style-by-size :xs)]
+    (assoc tile-size
+           :justify-content  :center
+           :align-items      :center
+           :background-color bg-color)))
+
+(defn remaining-tiles-text
+  []
+  {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)})

src/quo2/components/profile/collectible/view.cljs

@@ -0,0 +1,97 @@
+(ns quo2.components.profile.collectible.view
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.components.profile.collectible.style :as style]
+            [react-native.core :as rn]))
+
+(defn remaining-tiles
+  [amount]
+  [rn/view {:style (merge style/bottom-right (style/remaining-tiles))}
+   [text/text
+    {:style  (style/remaining-tiles-text)
+     :size   :paragraph-2
+     :weight :medium}
+    (str "+" amount)]])
+
+(defn tile
+  [{:keys [style resource size]}]
+  (let [source (if (string? resource) {:uri resource} resource)]
+    [rn/view {:style style}
+     [rn/image
+      {:style  (style/tile-style-by-size size)
+       :source source}]]))
+
+(defn two-tiles
+  [{:keys [images size]}]
+  [:<>
+   [tile
+    {:style    style/top-left
+     :size     size
+     :resource (first images)}]
+   [tile
+    {:style    style/bottom-right
+     :size     size
+     :resource (second images)}]])
+
+(defn three-tiles
+  [{:keys [tiles size]}]
+  (let [[image-1 image-2 image-3 & _] tiles]
+    [:<>
+     [tile
+      {:style    style/top-left
+       :size     size
+       :resource image-1}]
+     [tile
+      {:style    style/top-right
+       :size     size
+       :resource image-2}]
+     [tile
+      {:style    style/bottom-left
+       :size     size
+       :resource image-3}]]))
+
+(defn tile-container
+  [{:keys [images]}]
+  (let [num-images (count images)]
+    (case num-images
+      1 [tile
+         {:resource (first images)
+          :size     :xl}]
+      2 [two-tiles
+         {:images images
+          :size   :lg}]
+      3 [three-tiles
+         {:tiles images
+          :size  :md}]
+      (let [[first-three-images remaining-images] (split-at 3 images)]
+        [:<>
+         [three-tiles {:tiles first-three-images :size :md}]
+         [rn/view {:style style/tile-sub-container}
+          (case num-images
+            4 [tile
+               {:resource (nth images 3 nil)
+                :size     :md}]
+            5 [two-tiles
+               {:images (take 2 remaining-images)
+                :size   :sm}]
+            6 [three-tiles
+               {:tiles (take 3 remaining-images)
+                :size  :xs}]
+            7 [:<>
+               [three-tiles
+                {:tiles (take 3 remaining-images)
+                 :size  :xs}]
+               [tile
+                {:style    style/bottom-right
+                 :size     :xs
+                 :resource (nth remaining-images 3 nil)}]]
+            [:<>
+             [three-tiles
+              {:tiles (take 3 remaining-images)
+               :size  :xs}]
+             [remaining-tiles (- (count remaining-images) 3)]])]]))))
+
+(defn collectible
+  [{:keys [images]}]
+  [rn/view {:style style/tile-outer-container}
+   [rn/view {:style style/tile-inner-container}
+    [tile-container {:images images}]]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -45,6 +45,7 @@
    [status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs]
    [status-im2.contexts.quo-preview.notifications.toast :as toast]
    [status-im2.contexts.quo-preview.posts-and-attachments.messages-skeleton :as messages-skeleton]
+   [status-im2.contexts.quo-preview.profile.collectible :as collectible]
    [status-im2.contexts.quo-preview.profile.profile-card :as profile-card]
    [status-im2.contexts.quo-preview.reactions.react :as react]
    [status-im2.contexts.quo-preview.record-audio.record-audio :as record-audio]
@@ -178,7 +179,10 @@
                             :component messages-skeleton/preview-messages-skeleton}]
    :profile               [{:name      :profile-card
                             :insets    {:top false}
-                            :component profile-card/preview-profile-card}]
+                            :component profile-card/preview-profile-card}
+                           {:name      :collectible
+                            :insets    {:top false}
+                            :component collectible/preview-collectible}]
    :reactions             [{:name      :react
                             :insets    {:top false}
                             :component react/preview-react}]

src/status_im2/contexts/quo_preview/profile/collectible.cljs

@@ -0,0 +1,47 @@
+(ns status-im2.contexts.quo-preview.profile.collectible
+  (:require
+   [quo2.components.profile.collectible.view :as quo]
+   [react-native.core :as rn]
+   [reagent.core :as reagent]
+   [status-im2.contexts.quo-preview.preview :as preview]))
+
+(defonce test-image (js/require "../resources/images/mock/collectible.png"))
+(def test-images (repeat 10 test-image))
+
+(def descriptor
+  [{:label   "Number of images"
+    :key     :num-images
+    :type    :select
+    :options (map (fn [n]
+                    {:key n :value (str n " images")})
+                  (range 1 (inc (count test-images))))}
+   {:label "Random order of images"
+    :key   :shuffle-images
+    :type  :boolean}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:num-images 1 :shuffle-images false})]
+    (fn []
+      (let [images-to-show (cond->> test-images
+                                    (:shuffle-images @state)
+                                    (shuffle)
+                                    :always
+                                    (take (:num-images @state)))]
+        [rn/view
+         {:margin-bottom 50
+          :padding       16}
+         [preview/customizer state descriptor]
+         [rn/view
+          {:padding-vertical 100
+           :align-items      :center}
+          [quo/collectible {:images images-to-show}]]]))))
+
+(defn preview-collectible
+  []
+  [rn/view {:style {:flex 1}}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])