feat: category quo2 component (#16713)

* feat: category component

Author: OmarBasem

src/quo2/components/settings/category/component_spec.cljs

@@ -0,0 +1,20 @@
+(ns quo2.components.settings.category.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.components.settings.category.view :as category]))
+
+(h/describe "category tests"
+  (h/test "category label renders"
+    (h/render [category/category
+               {:label "label"
+                :data  [{:title     "Item 1"
+                         :left-icon :i/browser
+                         :chevron?  true}]}])
+    (h/is-truthy (h/get-by-text "label")))
+
+  (h/test "category item renders"
+    (h/render [category/category
+               {:label "label"
+                :data  [{:title     "Item 1"
+                         :left-icon :i/browser
+                         :chevron?  true}]}])
+    (h/is-truthy (h/get-by-text "Item 1"))))

src/quo2/components/settings/category/style.cljs

@@ -0,0 +1,44 @@
+(ns quo2.components.settings.category.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container
+  {:left               0
+   :right              0
+   :padding-horizontal 20
+   :padding-top        12
+   :padding-bottom     8})
+
+(defn items
+  [theme blur?]
+  {:margin-top       12
+   :border-radius    16
+   :background-color (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/white colors/neutral-95 theme))
+   :border-width     1
+   :border-color     (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+
+(defn separator
+  [theme blur?]
+  {:height           1
+   :background-color (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+
+(defn blur-container
+  []
+  {:position :absolute
+   :left     0
+   :right    0
+   :bottom   0
+   :top      0
+   :overflow :hidden})
+
+(defn blur-view
+  []
+  {:style       {:flex 1}
+   :blur-radius 10
+   :blur-type   (colors/theme-colors :light :dark)
+   :blur-amount 20})

src/quo2/components/settings/category/view.cljs

@@ -0,0 +1,27 @@
+(ns quo2.components.settings.category.view
+  (:require
+    [quo2.components.markdown.text :as text]
+    [quo2.components.settings.settings-list.view :as settings-list]
+    [quo2.foundations.colors :as colors]
+    [react-native.blur :as blur]
+    [react-native.core :as rn]
+    [quo2.components.settings.category.style :as style]
+    [quo2.theme :as quo.theme]))
+
+(defn- category-internal
+  [{:keys [label data blur? theme]}]
+  [rn/view {:style style/container}
+   (when blur?
+     [rn/view (style/blur-container) [blur/view (style/blur-view)]])
+   [text/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+    label]
+   [rn/flat-list
+    {:data      data
+     :style     (style/items theme blur?)
+     :render-fn (fn [item] [settings-list/settings-list item])
+     :separator [rn/view {:style (style/separator theme blur?)}]}]])
+
+(def category (quo.theme/with-theme category-internal))

src/quo2/core.cljs

@@ -82,6 +82,7 @@
     quo2.components.settings.privacy-option
     quo2.components.settings.reorder-item.view
     quo2.components.settings.settings-list.view
+    quo2.components.settings.category.view
     quo2.components.share.qr-code.view
     quo2.components.share.share-qr-code.view
     quo2.components.tabs.account-selector
@@ -231,6 +232,7 @@
 (def account quo2.components.settings.accounts.view/account)
 (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)
 
 ;;;; SHARE
 (def qr-code quo2.components.share.qr-code.view/qr-code)

src/quo2/core_spec.cljs

@@ -37,5 +37,6 @@
     [quo2.components.selectors.selectors.component-spec]
     [quo2.components.settings.reorder-item.component-spec]
     [quo2.components.settings.settings-list.component-spec]
+    [quo2.components.settings.category.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.--tests--.status-tags-component-spec]))

src/status_im2/contexts/quo_preview/main.cljs

@@ -95,6 +95,7 @@
     [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
     [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
     [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
+    [status-im2.contexts.quo-preview.settings.category :as category]
     [status-im2.contexts.quo-preview.keycard.keycard :as keycard]
     [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
     [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]))
@@ -330,7 +331,10 @@
                         :component settings-list/preview-settings-list}
                        {:name      :reorder-item
                         :options   {:topBar {:visible true}}
-                        :component reorder-item/preview-reorder-item}]
+                        :component reorder-item/preview-reorder-item}
+                       {:name      :category
+                        :options   {:topBar {:visible true}}
+                        :component category/preview}]
    :share             [{:name      :qr-code
                         :options   {:topBar {:visible true}}
                         :component qr-code/preview-qr-code}

src/status_im2/contexts/quo_preview/settings/category.cljs

@@ -0,0 +1,65 @@
+(ns status-im2.contexts.quo-preview.settings.category
+  (:require
+    [quo2.core :as quo]
+    [quo2.foundations.colors :as colors]
+    [quo2.theme :as theme]
+    [react-native.core :as rn]
+    [react-native.fast-image :as fast-image]
+    [reagent.core :as reagent]
+    [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def item
+  {:title     "Item 1"
+   :left-icon :i/browser
+   :chevron?  true})
+
+(def descriptor
+  [{:label "Category label:"
+    :key   :label
+    :type  :text}
+   {:label "Category size:"
+    :key   :size
+    :type  :text}
+   {:label "Blur:"
+    :key   :blur?
+    :type  :boolean}])
+
+(def image-uri
+  "https://4kwallpapers.com/images/wallpapers/giau-pass-mountain-pass-italy-dolomites-landscape-mountain-750x1334-4282.jpg")
+
+(def label "Label")
+
+(defn preview
+  []
+  (let [state                  (reagent/atom {:label "Label"
+                                              :size  "5"
+                                              :blur? false})
+        {:keys [width height]} (rn/get-window)]
+    [:f>
+     (fn []
+       (let [data (repeat (js/parseInt (:size @state)) item)]
+         (rn/use-effect (fn []
+                          (if (:blur? @state)
+                            (theme/set-theme :dark)
+                            (theme/set-theme :light)))
+                        [(:blur? @state)])
+         [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+          [rn/view
+           {:style {:flex             1
+                    :padding-bottom   150
+                    :margin-bottom    50
+                    :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}}
+           [rn/view
+            {:style {:min-height 180
+                     :z-index    1}} [preview/customizer state descriptor]]
+           (when (:blur? @state)
+             [fast-image/fast-image
+              {:source {:uri image-uri}
+               :style  {:width    width
+                        :height   height
+                        :position :absolute}}])
+           [rn/view
+            {:style {:background-color (if (:blur? @state)
+                                         colors/neutral-80-opa-80
+                                         (colors/theme-colors colors/neutral-5 colors/neutral-95))}}
+            [quo/category {:label (:label @state) :data data :blur? (:blur? @state)}]]]]))]))