chore: fix component tests and permission drawer preview (#14831)

Makefile

@@ -351,7 +351,6 @@ component-test: export COMPONENT_TEST := true
 component-test: export BABEL_ENV := test
 component-test: ##@test Run tests once in NodeJS
 	# Here we create the gyp bindings for nodejs
-	yarn install
 	yarn shadow-cljs compile component-test && \
 	jest --config=test/jest/jest.config.js
 

src/quo2/components/drawers/action_drawers/component_spec.cljs

@@ -1,6 +1,6 @@
-(ns quo2.components.drawers.--tests--.action-drawers-component-spec
+(ns quo2.components.drawers.action-drawers.component-spec
   (:require ["@testing-library/react-native" :as rtl]
-            [quo2.components.drawers.action-drawers :as action-drawer]
+            [quo2.components.drawers.action-drawers.view :as action-drawer]
             [reagent.core :as reagent]))
 
 (defn render-action-drawer

src/quo2/components/drawers/action_drawers/style.cljs

@@ -0,0 +1,41 @@
+(ns quo2.components.drawers.action-drawers.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def divider
+  {:border-top-width 1
+   :border-top-color (colors/theme-colors
+                      colors/neutral-10
+                      colors/neutral-90)
+   :margin-top       8
+   :margin-bottom    7
+   :align-items      :center
+   :flex-direction   :row})
+
+(defn container
+  [sub-label]
+  {:border-radius     12
+   :height            (if sub-label 58 50)
+   :margin-horizontal 8})
+
+(defn row-container
+  [sub-label]
+  {:height            (if sub-label 58 50)
+   :margin-horizontal 12
+   :flex-direction    :row})
+
+(def left-icon
+  {:height        20
+   :margin-top    :auto
+   :margin-bottom :auto
+   :margin-right  12
+   :width         20})
+
+(def text-container
+  {:flex            1
+   :justify-content :center})
+
+(def right-icon
+  {:height        20
+   :margin-top    :auto
+   :margin-bottom :auto
+   :width         20})

src/quo2/components/drawers/action_drawers/view.cljs

@@ -1,8 +1,9 @@
-(ns quo2.components.drawers.action-drawers
+(ns quo2.components.drawers.action-drawers.view
   (:require [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]))
+            [react-native.core :as rn]
+            [quo2.components.drawers.action-drawers.style :as style]))
 
 (defn- get-icon-color
   [danger?]
@@ -12,14 +13,7 @@
 
 (def divider
   [rn/view
-   {:style               {:border-top-width 1
+   {:style               style/divider
-                          :border-top-color (colors/theme-colors
-                                             colors/neutral-10
-                                             colors/neutral-90)
-                          :margin-top       8
-                          :margin-bottom    7
-                          :align-items      :center
-                          :flex-direction   :row}
     :accessible          true
     :accessibility-label :divider}])
 
@@ -38,32 +32,20 @@
      (when add-divider? divider)
      [rn/touchable-highlight
       {:accessibility-label accessibility-label
-       :style               {:border-radius     12
+       :style               style/container
-                             :height            (if sub-label 58 50)
-                             :margin-horizontal 8}
        :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90)
        :on-press            on-press}
       [rn/view
-       {:style
+       {:style style/row-container}
-        {:height            (if sub-label 58 50)
-         :margin-horizontal 12
-         :flex-direction    :row}}
        [rn/view
         {:accessibility-label :left-icon-for-action
          :accessible          true
-         :style
+         :style               style/left-icon}
-         {:height        20
-          :margin-top    :auto
-          :margin-bottom :auto
-          :margin-right  12
-          :width         20}}
         [icon/icon icon
          {:color (get-icon-color danger?)
           :size  20}]]
        [rn/view
-        {:style
+        {:style style/text-container}
-         {:flex            1
-          :justify-content :center}}
         [text/text
          {:size   :paragraph-1
           :weight :medium
@@ -79,11 +61,7 @@
            sub-label])]
        (when right-icon
          [rn/view
-          {:style
+          {:style               style/right-icon
-           {:height        20
-            :margin-top    :auto
-            :margin-bottom :auto
-            :width         20}
            :accessible          true
            :accessibility-label :right-icon-for-action}
           [icon/icon right-icon

src/quo2/components/drawers/permission_context/component_spec.cljs

@@ -1,10 +1,10 @@
-(ns quo2.components.drawers.permission-context.--tests--.permission-context-component-spec
+(ns quo2.components.drawers.permission-context.component-spec
   (:require [quo2.components.drawers.permission-context.view :as permission-context]
             [react-native.core :as rn]
             [test-helpers.component :as h]))
 
 (h/describe "permission context"
-  (h/test
+  (h/test "it tests the default render"
     (h/render [permission-context/view
                [rn/text
                 {:accessibility-label :accessibility-id}

src/quo2/components/drawers/permission_context/style.cljs

@@ -3,9 +3,13 @@
 
 (def radius 20)
 (def container
-  {:padding-top             16
+  {:flex-direction          :row
+   :background-color        (colors/theme-colors colors/white colors/neutral-90)
+   :height                  82
+   :padding-top             16
    :padding-bottom          48
-   :padding-horizontal      20
+   :justify-content         :center
+   :padding-right           :auto
    :shadow-offset           {:width  0
                              :height 2}
    :shadow-radius           radius

src/quo2/components/drawers/permission_context/view.cljs

@@ -1,8 +1,12 @@
 (ns quo2.components.drawers.permission-context.view
   (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
             [quo2.components.drawers.permission-context.style :as style]))
 
 (defn view
-  [children]
+  [children on-press]
-  [rn/view {:style style/container}
+  [rn/touchable-highlight
+   {:on-press       on-press
+    :underlay-color (colors/theme-colors :transparent colors/neutral-95-opa-70)
+    :style          style/container}
    children])

src/quo2/core.cljs

@@ -20,7 +20,8 @@
    quo2.components.dividers.date
    quo2.components.dividers.divider-label
    quo2.components.dividers.new-messages
-   quo2.components.drawers.action-drawers
+   quo2.components.drawers.action-drawers.view
+   quo2.components.drawers.permission-context.view
    quo2.components.dropdowns.dropdown
    quo2.components.header
    quo2.components.icon
@@ -41,6 +42,7 @@
    quo2.components.notifications.info-count
    quo2.components.notifications.notification-dot
    quo2.components.notifications.toast
+   quo2.components.profile.profile-card.view
    quo2.components.reactions.reaction
    quo2.components.selectors.disclaimer.view
    quo2.components.selectors.filter.view
@@ -52,8 +54,10 @@
    quo2.components.tabs.tabs
    quo2.components.tags.context-tags
    quo2.components.tags.status-tags
-   quo2.components.profile.profile-card.view
+   quo2.components.tags.permission-tag
-   quo2.components.tags.tags))
+   quo2.components.tags.tag
+   quo2.components.tags.tags
+   quo2.components.tags.token-tag))
 
 (def toast quo2.components.notifications.toast/toast)
 (def button quo2.components.buttons.button/button)
@@ -63,7 +67,6 @@
 (def separator quo2.components.separator/separator)
 (def counter quo2.components.counter.counter/counter)
 (def header quo2.components.header/header)
-(def action-drawer quo2.components.drawers.action-drawers/action-drawer)
 (def dropdown quo2.components.dropdowns.dropdown/dropdown)
 (def info-message quo2.components.info.info-message/info-message)
 (def information-box quo2.components.info.information-box/information-box)
@@ -71,7 +74,6 @@
 (def system-message quo2.components.messages.system-message/system-message)
 (def reaction quo2.components.reactions.reaction/reaction)
 (def add-reaction quo2.components.reactions.reaction/add-reaction)
-(def tags quo2.components.tags.tags/tags)
 (def user-avatar-tag quo2.components.tags.context-tags/user-avatar-tag)
 (def context-tag quo2.components.tags.context-tags/context-tag)
 (def group-avatar-tag quo2.components.tags.context-tags/group-avatar-tag)
@@ -80,7 +82,6 @@
 (def tabs quo2.components.tabs.tabs/tabs)
 (def account-selector quo2.components.tabs.account-selector/account-selector)
 (def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
-(def status-tag quo2.components.tags.status-tags/status-tag)
 (def page-nav quo2.components.navigation.page-nav/page-nav)
 (def disclaimer quo2.components.selectors.disclaimer.view/view)
 (def checkbox quo2.components.selectors.selectors/checkbox)
@@ -118,6 +119,10 @@
 (def new-messages quo2.components.dividers.new-messages/new-messages)
 (def divider-date quo2.components.dividers.date/date)
 
+;;;; DRAWERS
+(def action-drawer quo2.components.drawers.action-drawers.view/action-drawer)
+(def permission-context quo2.components.drawers.permission-context.view/view)
+
 ;;;; LIST ITEMS
 (def channel-list-item quo2.components.list-items.channel/list-item)
 (def menu-item quo2.components.list-items.menu-item/menu-item)
@@ -135,3 +140,10 @@
 ;;;; SETTINGS
 (def privacy-option quo2.components.settings.privacy-option/card)
 (def account quo2.components.settings.accounts.view/account)
+
+;;;; TAGS
+(def tag quo2.components.tags.tag/tag)
+(def tags quo2.components.tags.tags/tags)
+(def permission-tag quo2.components.tags.permission-tag/tag)
+(def status-tag quo2.components.tags.status-tags/status-tag)
+(def token-tag quo2.components.tags.token-tag/tag)

src/quo2/core_spec.cljs

@@ -3,8 +3,8 @@
             [quo2.components.buttons.--tests--.buttons-component-spec]
             [quo2.components.counter.--tests--.counter-component-spec]
             [quo2.components.dividers.--tests--.divider-label-component-spec]
-            [quo2.components.drawers.--tests--.action-drawers-component-spec]
+            [quo2.components.drawers.action-drawers.component-spec]
-            [quo2.components.drawers.permission-context.--tests--.permission-context-component-spec]
+            [quo2.components.drawers.permission-context.component-spec]
             [quo2.components.markdown.--tests--.text-component-spec]
             [quo2.components.selectors.--tests--.selectors-component-spec]
             [quo2.components.selectors.filter.component-spec]))

src/status_im2/common/home/actions/view.cljs

@@ -1,6 +1,6 @@
 (ns status-im2.common.home.actions.view
   (:require [utils.i18n :as i18n]
-            [quo2.components.drawers.action-drawers :as drawer]
+            [quo2.core :as quo]
             [status-im2.common.confirmation-drawer.view :as confirmation-drawer]
             [status-im2.constants :as constants]
             [utils.re-frame :as rf]))
@@ -407,7 +407,7 @@
 
 (defn one-to-one-actions
   [{:keys [chat-id] :as item} inside-chat?]
-  [drawer/action-drawer
+  [quo/action-drawer
    [[(view-profile-entry chat-id)
      (edit-nickname-entry chat-id)]
     (notification-actions item inside-chat?)
@@ -415,7 +415,7 @@
 
 (defn public-chat-actions
   [{:keys [chat-id] :as item} inside-chat?]
-  [drawer/action-drawer
+  [quo/action-drawer
    [[(group-details-entry chat-id)
      (when inside-chat?
        (add-members-entry))]
@@ -424,7 +424,7 @@
 
 (defn private-group-chat-actions
   [item inside-chat?]
-  [drawer/action-drawer
+  [quo/action-drawer
    [(group-actions item inside-chat?)
     (notification-actions item inside-chat?)
     (destructive-actions item)]])
@@ -432,7 +432,7 @@
 (defn contact-actions
   [{:keys [public-key] :as contact} {:keys [chat-id admin?] :as extra-data}]
   (let [current-pub-key (rf/sub [:multiaccount/public-key])]
-    [drawer/action-drawer
+    [quo/action-drawer
      [[(view-profile-entry public-key)
        (remove-from-contacts-entry contact)
        (rename-entry)
@@ -460,7 +460,7 @@
   [{:keys [admins] :as group}]
   (let [current-pub-key (rf/sub [:multiaccount/public-key])
         admin?          (get admins current-pub-key)]
-    [drawer/action-drawer
+    [quo/action-drawer
      [(when admin? [(edit-name-image-entry)])
       [(notifications-entry admin?)]
       (destructive-actions group)]]))

src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs

@@ -1,6 +1,5 @@
 (ns status-im2.contexts.quo-preview.drawers.action-drawers
-  (:require [quo2.components.buttons.button :as button]
+  (:require [quo2.core :as quo]
-            [quo2.components.drawers.action-drawers :as quo2]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
@@ -27,7 +26,7 @@
   [rn/view
    {:height           300
     :background-color (colors/theme-colors colors/white colors/neutral-95)}
-   [quo2/action-drawer
+   [quo/action-drawer
     (cond->
       [[{:icon     :i/friend
          :label    "View channel members and details"
@@ -59,7 +58,7 @@
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view {:padding-bottom 400}
         [preview/customizer state descriptor]
-        [button/button
+        [quo/button
          {:style    {:margin-horizontal 40}
           :on-press #(rf/dispatch [:bottom-sheet/show-sheet
                                    {:content        (constantly (render-action-sheet state))

src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs

@@ -0,0 +1,76 @@
+(ns status-im2.contexts.quo-preview.drawers.permission-drawers
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [status-im.react-native.resources :as resources]))
+
+(defn example-1
+  []
+  [:<>
+   [quo/text {:style {:margin-right 4}} "Hold"]
+   [quo/permission-tag
+    {:size             24
+     :locked           false
+     :tokens           [{:id    1
+                         :group [{:id 1 :token-icon (resources/get-image :status-logo)}
+                                 {:id 2 :token-icon (resources/get-image :status-logo)}
+                                 {:id 3 :token-icon (resources/get-image :status-logo)}
+                                 {:id 4 :token-icon (resources/get-image :status-logo)}
+                                 {:id 5 :token-icon (resources/get-image :status-logo)}]}]
+     :background-color (colors/theme-colors
+                        colors/neutral-10
+                        colors/neutral-80)}]
+   [quo/text
+    {:style {:margin-left  4
+             :margin-right 4}} "Or"]
+   [quo/permission-tag
+    {:size             24
+     :locked           false
+     :tokens           [{:id    1
+                         :group [{:id 1 :token-icon (resources/get-image :status-logo)}
+                                 {:id 2 :token-icon (resources/get-image :status-logo)}
+                                 {:id 3 :token-icon (resources/get-image :status-logo)}
+                                 {:id 4 :token-icon (resources/get-image :status-logo)}
+                                 {:id 5 :token-icon (resources/get-image :status-logo)}]}]
+     :background-color (colors/theme-colors
+                        colors/neutral-10
+                        colors/neutral-80)}]
+   [quo/text {:style {:margin-left 4}} "To post"]])
+
+(defn example-2
+  []
+  [:<>
+   [quo/text {:style {:margin-right 4}} "Hold"]
+   [quo/token-tag
+    {:size          :small
+     :token-img-src (js/require "../resources/images/tokens/mainnet/ETH.png")} "ETH"]
+   [quo/text {:style {:margin-left 4}} "To post"]])
+
+(defn example-3
+  []
+  [:<>
+   [quo/icon :i/communities {:color (colors/theme-colors colors/neutral-100 colors/white)}]
+   [quo/text {:style {:margin-right 4}} "Join community to post"]])
+
+(defn cool-preview
+  []
+  (fn []
+    [:<>
+     [rn/view {:margin-top 60}
+      [quo/permission-context [example-1] #(js/alert "drawer pressed")]]
+     [rn/view {:margin-top 60}
+      [quo/permission-context [example-2] #(js/alert "drawer pressed")]]
+     [rn/view {:margin-top 60}
+      [quo/permission-context [example-3] #(js/alert "drawer pressed")]]]))
+
+(defn preview-permission-drawers
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/neutral-20 colors/neutral-100)}
+    :flex  1}
+   [rn/flat-list
+    {:flex                         1
+     :nested-scroll-enabled        true
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       hash}]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -29,6 +29,7 @@
    [status-im2.contexts.quo-preview.dividers.divider-label :as divider-label]
    [status-im2.contexts.quo-preview.dividers.new-messages :as new-messages]
    [status-im2.contexts.quo-preview.drawers.action-drawers :as drawers]
+   [status-im2.contexts.quo-preview.drawers.permission-drawers :as permission-drawers]
    [status-im2.contexts.quo-preview.dropdowns.dropdown :as dropdown]
    [status-im2.contexts.quo-preview.info.info-message :as info-message]
    [status-im2.contexts.quo-preview.info.information-box :as information-box]
@@ -128,7 +129,10 @@
                             :component divider-date/preview-divider-date}]
    :drawers               [{:name      :action-drawers
                             :insets    {:top false}
-                            :component drawers/preview-action-drawers}]
+                            :component drawers/preview-action-drawers}
+                           {:name      :permission-drawers
+                            :insets    {:top false}
+                            :component permission-drawers/preview-permission-drawers}]
    :dropdowns             [{:name      :dropdown
                             :insets    {:top false}
                             :component dropdown/preview-dropdown}]