From 07336edef6b66fded54fc9450014584c72817669 Mon Sep 17 00:00:00 2001
From: mmilad75 <55688834+mmilad75@users.noreply.github.com>
Date: Wed, 2 Aug 2023 11:38:38 +0330
Subject: [PATCH] Implement Quo2 Numbered-Keyboard / Keyboard Key component
 (#16723)

* Implement Quo2 Numbered-Keyboard / Keyboard Key component

* add tests

* fix lint issues

* add derivation-path icon

* add tests

* refactor preview
---
 .../icons2/32x32/derivation-path@2x.png       | Bin 0 -> 749 bytes
 .../icons2/32x32/derivation-path@3x.png       | Bin 0 -> 1007 bytes
 .../keyboard_key/component_spec.cljs          |  50 +++++++++++++++
 .../numbered_keyboard/keyboard_key/style.cljs |  28 +++++++++
 .../numbered_keyboard/keyboard_key/view.cljs  |  39 ++++++++++++
 src/quo2/core.cljs                            |   4 ++
 src/quo2/core_spec.cljs                       |   1 +
 src/status_im2/contexts/quo_preview/main.cljs |   5 ++
 .../numbered_keyboard/keyboard_key.cljs       |  59 ++++++++++++++++++
 9 files changed, 186 insertions(+)
 create mode 100644 resources/images/icons2/32x32/derivation-path@2x.png
 create mode 100644 resources/images/icons2/32x32/derivation-path@3x.png
 create mode 100644 src/quo2/components/numbered_keyboard/keyboard_key/component_spec.cljs
 create mode 100644 src/quo2/components/numbered_keyboard/keyboard_key/style.cljs
 create mode 100644 src/quo2/components/numbered_keyboard/keyboard_key/view.cljs
 create mode 100644 src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs

diff --git a/resources/images/icons2/32x32/derivation-path@2x.png b/resources/images/icons2/32x32/derivation-path@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..e859586968cf0ce30e0030d50a0d439026047a82
GIT binary patch
literal 749
zcmV<J0uud+P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0)k0IK~#7F?U_+-
z)G!c+|70t)6+D>tf^vl3fb;}#1a1JFpm2k76SzS*0p$h(E$@Cot<c8CRvY0sD@$JN
z8Ke4>Rx8g#;{2KM%w&K{rBbO>DwP5`70=(EiZku}J|QtJiblP3S1p={CII^7Qe7i4
zC&++xS9fg|7q@aZAc802te+N^X8a|0$pt9Z1I)v}a@P$oAOpn;U>^8|XZnl`6e++~
zbe##CbJwP@N$&oZ<N^rM3H&21rgP79eJjTi8AvX`9(#ZD*y1Gi?Rn`BUyzC90!(OE
zZ%@imA_DEDKXV`^&;K(S&H(*pd4uL7B6uu1BcSeFTWkuAA*ldc@$9v~`3ai=5lrj&
zACQq`0@#z=q^?WXW?cD0?BUgV@o%n@CH*<~OLd{?a{2a~(YWq=MB>MP`@eXAg8u$@
z)kuxa1tPKKuaUq>qqhA0nI-?vBopB7ZMX02ruXLIkICC=)%@sh$V}2^=tlmyGJjV%
z677}0Ioe;JVoKrr3bJ=?u^HqTiV@&9rrtAUD}P-|YK9i+uR)Xb@S7<}0PPn*S@Zu)
z5ds`)e;*OVzoiflSjGPk+dv&l5dyTU_|Mn=9=JC@>#sj~%U_oU%-Hr<VgJ=J$s4(Q
z3L@A&Ktc7MiOl^i1%yEU=}(9f&VYWoR3rt^466Wl?XOGz_Sc710IKOv2vz~8ravLr
z1fZP$gkTeZa{3eA2Onh9pAc*UP)>hBu$00F%3t$6amTV377w7F{)Au=fO`59f<*x8
z=}!o90XU{VA;<;bnEr$y7l32>6M|F#uIWz*QUSQ8KOsm3(9pfRrkehQAQhm5_P0{0
fR4SE9rE<?7IDpD62K69D00000NkvXXu0mjfMvPNf

literal 0
HcmV?d00001

diff --git a/resources/images/icons2/32x32/derivation-path@3x.png b/resources/images/icons2/32x32/derivation-path@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..81b1f0fd6d7554b1ee593a1004384e47ba1847f9
GIT binary patch
literal 1007
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7OGooCO|{#S9FJK(?X<qw6$7kP61)
zAa^H*b?0PW0y!+{j=qiz3>*8o|0J?9Ffg}xx;TbZFut98(f5vnKwJ7*!MT%cb~G%o
zke$HwD5OBMF+?Dc@dD#Y1}_h*9VHH0CsYsY{w%OVq2^rP1<z?)tsf<Re6xR^|D)9J
z2M^u9TT%9hyF<h^5RRs-OvrGu(f@wV>J?wx>$WpLeT#oiWYNfQDsd@Ic&*K8D9NaQ
zD(k-1ikj;48R?!*K5h=)Z|f4WZ<?%bYnd@o;q#}^Se8?Ve2Ytc1UFufEcy5Ky-LRl
zhVsvEeJ#0i<bz$DzV283<<#V}h-L4V`zEUwe919={VdC~$;at{+MT~K6AUH`B%D6K
z`#@jB@13gEjH!`3F9rYp_C|ldN}`ZxLYPRWbyhZ4%wzvz+pj_?TK}uWH|xj$5c6f4
zU)R2Z!Fqb7?2TWZAJ;vyZHQ#Nufe#)JK$~nyJ;egm64&}7~hCq;OdkA)xo)8@=5-M
zd;7|iW&51I&eywkHp`V$LG8e_`TmV-Gt8HBT=}mw@zY}g!3SQ<tkKS&XDSKm*>8H>
zZl}b=b9X*#Sx$CErJvw~W9N%!b#9*@?Iv!Z|D8{x#=vT!M@~jC`!<*3=bha|ANVa*
zv-sQd{bhZ^<`3&n_sjq4(R!f2)qUZn3m4B-cX|8Xdp#rNRDW^^<F?N~Wp7ya+!V9x
znZLKAe|~$9R>I%^y5WU4;y2GdbuzcO)=O|>tlx{Ci9Ww~rhaMvko)=dmw9RVv1iN8
z>t%mlU3{43*!gWoeV6^cqcn}Xi2up*7jAbX4{zIPUsEl6_TG{rrh7_dLUpUcHgGJH
zKclsE_WKhbTYWA)ey(_v)5GxZv58X~LN4daL~?qVf;bFme{^QmJwD;(u<E6GUk=NX
zIY5q^!zl#E$>9}{qr<Xf9#Cc}i({|+uM{PPw_l{$_b{}4k#=Xh-|z)!;0GpwOEB^R
zQvi?+As?u6DE~dy_>X5rZTHHh_bn1w70^fp)&;=ua^Q0C-e0(2n!=5bp9MS^GhUkW
zSul2BB{djV0L76>3C0sZ5eT_NXv*0i3;8E7+yOeVrD4vo^Ue<Y7;gaOIT&BS$i646
zPbSno7Wm7~*Z=U`zc*F?rp?*-*Z$FuNJRDk<rBq!jAxn5?l1a$<tH$IGI+ZBxvX<a
GXaWGjBEp{l

literal 0
HcmV?d00001

diff --git a/src/quo2/components/numbered_keyboard/keyboard_key/component_spec.cljs b/src/quo2/components/numbered_keyboard/keyboard_key/component_spec.cljs
new file mode 100644
index 0000000000..e711a6e33a
--- /dev/null
+++ b/src/quo2/components/numbered_keyboard/keyboard_key/component_spec.cljs
@@ -0,0 +1,50 @@
+(ns quo2.components.numbered-keyboard.keyboard-key.component-spec
+  (:require [quo2.components.numbered-keyboard.keyboard-key.view :as component]
+            [test-helpers.component :as h]))
+
+(h/describe "Keyboard Key"
+  (h/test "render digit type"
+    (h/render [component/keyboard-key
+               {:disabled? false
+                :on-press  #(js/alert "pressed")
+                :blur?     false
+                :type      :digit} 1])
+    (h/is-truthy (h/query-by-label-text :text-label)))
+
+  (h/test "render key type"
+    (h/render [component/keyboard-key
+               {:disabled? false
+                :on-press  #(js/alert "pressed")
+                :blur?     false
+                :type      :key} :i/delete])
+    (h/is-truthy (h/query-by-label-text :icon-label)))
+
+  (h/test "render derivation path type"
+    (h/render [component/keyboard-key
+               {:disabled? false
+                :on-press  #(js/alert "pressed")
+                :blur?     false
+                :type      :derivation-path}])
+    (h/is-truthy (h/query-by-label-text :derivation-path-label)))
+
+  (h/test "Is pressable when disabled is false"
+    (let [on-press (h/mock-fn)]
+      (h/render [component/keyboard-key
+                 {:disabled? false
+                  :on-press  #(on-press)
+                  :blur?     false
+                  :type      :digit} 1])
+      (h/is-truthy (h/query-by-label-text :text-label))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key))
+      (h/was-called on-press)))
+
+  (h/test "Is not pressable when disabled is true"
+    (let [on-press (h/mock-fn)]
+      (h/render [component/keyboard-key
+                 {:disabled? true
+                  :on-press  #(on-press)
+                  :blur?     false
+                  :type      :digit} 1])
+      (h/is-truthy (h/query-by-label-text :text-label))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key))
+      (h/was-not-called on-press))))
diff --git a/src/quo2/components/numbered_keyboard/keyboard_key/style.cljs b/src/quo2/components/numbered_keyboard/keyboard_key/style.cljs
new file mode 100644
index 0000000000..3b9e029e1c
--- /dev/null
+++ b/src/quo2/components/numbered_keyboard/keyboard_key/style.cljs
@@ -0,0 +1,28 @@
+(ns quo2.components.numbered-keyboard.keyboard-key.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn get-label-color
+  [disabled? theme blur?]
+  (cond
+    (and disabled? (or (= :dark theme) blur?))  colors/white-opa-30
+    (and disabled? (or (= :light theme) blur?)) colors/neutral-30
+    (or (= :dark theme) blur?)                  colors/white
+    :else                                       colors/neutral-100))
+
+(defn toggle-background-color
+  [pressed-in? blur? theme]
+  (if pressed-in?
+    (cond
+      blur?            colors/white-opa-10
+      (= :light theme) colors/neutral-10
+      (= :dark theme)  colors/neutral-80)
+    :transparent))
+
+(defn container
+  [color]
+  {:width            48
+   :height           48
+   :justify-content  :center
+   :align-items      :center
+   :border-radius    999
+   :background-color color})
diff --git a/src/quo2/components/numbered_keyboard/keyboard_key/view.cljs b/src/quo2/components/numbered_keyboard/keyboard_key/view.cljs
new file mode 100644
index 0000000000..78fea9900b
--- /dev/null
+++ b/src/quo2/components/numbered_keyboard/keyboard_key/view.cljs
@@ -0,0 +1,39 @@
+(ns quo2.components.numbered-keyboard.keyboard-key.view
+  (:require [react-native.core :as rn]
+            [quo2.theme :as quo.theme]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.icon :as icons]
+            [quo2.components.numbered-keyboard.keyboard-key.style :as style]
+            [reagent.core :as reagent]))
+
+(defn- keyboard-key-internal
+  []
+  (let [pressed? (reagent/atom false)]
+    (fn [{:keys [disabled? theme blur? on-press type]} label]
+      (let [label-color      (style/get-label-color disabled? theme blur?)
+            background-color (style/toggle-background-color @pressed? blur? theme)]
+        [rn/pressable
+         {:accessibility-label :keyboard-key
+          :disabled            disabled?
+          :on-press            on-press
+          :on-press-in         #(reset! pressed? true)
+          :on-press-out        #(reset! pressed? false)
+          :style               (style/container background-color)}
+         (condp = type
+           :key             [icons/icon
+                             label
+                             {:color               label-color
+                              :accessibility-label :icon-label}]
+           :digit           [text/text
+                             {:accessibility-label :text-label
+                              :weight              :regular
+                              :size                :heading-1
+                              :style               {:color label-color}}
+                             label]
+           :derivation-path [icons/icon
+                             :i/derivation-path
+                             {:color               label-color
+                              :size                32
+                              :accessibility-label :derivation-path-label}])]))))
+
+(def keyboard-key (quo.theme/with-theme keyboard-key-internal))
diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs
index 60e235947f..2d1e6df19a 100644
--- a/src/quo2/core.cljs
+++ b/src/quo2/core.cljs
@@ -74,6 +74,7 @@
     quo2.components.notifications.notification-dot
     quo2.components.notifications.notification.view
     quo2.components.notifications.toast.view
+    quo2.components.numbered-keyboard.keyboard-key.view
     quo2.components.onboarding.small-option-card.view
     quo2.components.password.tips.view
     quo2.components.profile.profile-card.view
@@ -200,6 +201,9 @@
 (def search-input quo2.components.inputs.search-input.view/search-input)
 (def title-input quo2.components.inputs.title-input.view/title-input)
 
+;;;; NUMBERED KEYBOARD
+(def keyboard-key quo2.components.numbered-keyboard.keyboard-key.view/keyboard-key)
+
 ;;;; LIST ITEMS
 (def channel-list-item quo2.components.list-items.channel/list-item)
 (def menu-item quo2.components.list-items.menu-item/menu-item)
diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs
index 358d129089..e8f7597f36 100644
--- a/src/quo2/core_spec.cljs
+++ b/src/quo2/core_spec.cljs
@@ -34,6 +34,7 @@
     [quo2.components.markdown.text-component-spec]
     [quo2.components.markdown.list.component-spec]
     [quo2.components.notifications.notification.component-spec]
+    [quo2.components.numbered-keyboard.keyboard-key.component-spec]
     [quo2.components.onboarding.small-option-card.component-spec]
     [quo2.components.password.tips.component-spec]
     [quo2.components.profile.select-profile.component-spec]
diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs
index a79c9a560d..2f72d20b3b 100644
--- a/src/status_im2/contexts/quo_preview/main.cljs
+++ b/src/status_im2/contexts/quo_preview/main.cljs
@@ -50,6 +50,7 @@
     [status-im2.contexts.quo-preview.inputs.profile-input :as profile-input]
     [status-im2.contexts.quo-preview.inputs.search-input :as search-input]
     [status-im2.contexts.quo-preview.inputs.title-input :as title-input]
+    [status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key :as keyboard-key]
     [status-im2.contexts.quo-preview.links.url-preview :as url-preview]
     [status-im2.contexts.quo-preview.links.url-preview-list :as url-preview-list]
     [status-im2.contexts.quo-preview.links.link-preview :as link-preview]
@@ -244,6 +245,10 @@
                        {:name      :title-input
                         :options   {:topBar {:visible true}}
                         :component title-input/preview-title-input}]
+   :numbered-keyboard [{:name      :keyboard-key
+                        :options   {:insets {:top? true}
+                                    :topBar {:visible true}}
+                        :component keyboard-key/preview-keyboard-key}]
    :links             [{:name      :url-preview
                         :options   {:insets {:top? true}
                                     :topBar {:visible true}}
diff --git a/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs b/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs
new file mode 100644
index 0000000000..81ba86a10b
--- /dev/null
+++ b/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs
@@ -0,0 +1,59 @@
+(ns status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key
+  (:require [quo2.core :as quo]
+            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label "Blur:"
+    :key   :blur?
+    :type  :boolean}
+   {:label "Disable:"
+    :key   :disabled?
+    :type  :boolean}
+   {:label   "Type"
+    :type    :select
+    :key     :type
+    :options [{:key   :digit
+               :value "Digit"}
+              {:key   :key
+               :value "Key"}
+              {:key   :derivation-path
+               :value "Derivation Path"}]}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:disabled? false
+                             :on-press  #(js/alert "pressed" %)
+                             :blur?     false
+                             :type      :digit})]
+    (fn []
+      (let [value (case (:type @state)
+                    :key             :i/delete
+                    :derivation-path nil
+                    :digit           1
+                    nil)]
+        [rn/view {:style {:padding-bottom 150}}
+         [rn/view {:style {:flex 1}}
+          [preview/customizer state descriptor]]
+         [preview/blur-view
+          {:style                 {:flex              1
+                                   :align-self        :center
+                                   :justify-self      :center
+                                   :margin-horizontal 20}
+           :show-blur-background? (:blur? @state)
+           :blur-view-props       (when (:blur? @state)
+                                    {:overlay-color colors/neutral-80-opa-80})}
+          [quo/keyboard-key @state value]]]))))
+
+(defn preview-keyboard-key
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-90)
+            :flex             1}}
+   [rn/flat-list
+    {:style                        {:flex 1}
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])