Added size and container style props to help component

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

ios/Podfile.lock

@@ -707,7 +707,7 @@ SPEC CHECKSUMS:
   FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991
   FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: d93527a855523adb8c113837db4be68fb00e230d
+  glog: 166d178815c300e8126de9a7900101814eb16253
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
@@ -772,7 +772,7 @@ SPEC CHECKSUMS:
   RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
   RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
   RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
-  RNReanimated: d0db0ee059c33381bca787a2193c27e52750ccaf
+  RNReanimated: 3e375fc41870cc66c5152a38514c450f7adbc3e1
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
   RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9

src/mocks/js_dependencies.cljs

@@ -368,6 +368,11 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
 (def worklet-factory
   #js {:applyAnimationsToStyle (fn [])})
 
+(def twemoji
+  #js
+   {:Twemoji     #js {}
+    :TwemojiText #js {}})
+
 ;; Update i18n_resources.cljs
 (defn mock
   [module]
@@ -418,6 +423,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     "react-native-transparent-video"                 react-native-transparent-video
     "react-native-orientation-locker"                react-native-orientation-locker
     "react-native-gifted-charts"                     react-native-gifted-charts
+    "../src/js/components/twemoji.js"                twemoji
     "../src/js/worklets/core.js"                     worklet-factory
     "../src/js/worklets/shell/bottom_tabs.js"        #js {}
     "../src/js/worklets/shell/home_stack.js"         #js {}

src/quo2/components/avatars/account_avatar/component_spec.cljs

@@ -8,14 +8,13 @@
   (h/test "default render"
     (h/render [account-avatar/view])
     (h/is-truthy (h/query-by-label-text :account-avatar))
-    (h/is-truthy (h/query-by-label-text :account-emoji)))
+    (h/is-truthy (h/query-by-label-text account-avatar/default-emoji)))
 
   (h/test "with emoji"
     (let [emoji "💸"]
       (h/render [account-avatar/view {:emoji emoji :size 80}])
       (h/is-truthy (h/query-by-label-text :account-avatar))
-      (h/is-truthy (h/query-by-label-text :account-emoji))
-      (h/is-truthy (h/query-by-text emoji))))
+      (h/is-truthy (h/query-by-label-text emoji))))
 
   (h/test "size 80 with emoji, with type - default"
     (let [opts {:emoji               "🏝️"
@@ -29,10 +28,7 @@
                     :width           (:size opts)
                     :borderRadius    (style/get-border-radius (:size opts))
                     :backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 60)})
-      (h/is-truthy (h/query-by-label-text :account-emoji))
-      (h/has-style (h/query-by-label-text :account-emoji)
-                   {:fontSize (style/get-emoji-size (:size opts))})
-      (h/is-truthy (h/query-by-text (:emoji opts)))))
+      (h/is-truthy (h/query-by-label-text (:emoji opts)))))
 
   (h/test "size 48 with emoji, with type - watch only"
     (let [opts {:emoji               "💵"
@@ -48,10 +44,7 @@
         :borderRadius    (style/get-border-radius (:size opts))
         :borderWidth     1
         :backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 50 10 10)})
-      (h/is-truthy (h/query-by-label-text :account-emoji))
-      (h/has-style (h/query-by-label-text :account-emoji)
-                   {:fontSize (style/get-emoji-size (:size opts))})
-      (h/is-truthy (h/query-by-text (:emoji opts)))))
+      (h/is-truthy (h/query-by-label-text (:emoji opts)))))
 
   (h/test "size 28 with emoji, with type - default"
     (let [opts {:emoji               "🏝️"
@@ -65,10 +58,7 @@
                     :width           (:size opts)
                     :borderRadius    (style/get-border-radius (:size opts))
                     :backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 60)})
-      (h/is-truthy (h/query-by-label-text :account-emoji))
-      (h/has-style (h/query-by-label-text :account-emoji)
-                   {:fontSize (style/get-emoji-size (:size opts))})
-      (h/is-truthy (h/query-by-text (:emoji opts)))))
+      (h/is-truthy (h/query-by-label-text (:emoji opts)))))
 
   (h/test "size 16 with emoji, with type - watch only"
     (let [opts {:emoji               "🎉"
@@ -84,7 +74,4 @@
         :borderRadius    (style/get-border-radius (:size opts))
         :borderWidth     0.8
         :backgroundColor (colors/custom-color-by-theme (:customization-color opts) 50 50 10 10)})
-      (h/is-truthy (h/query-by-label-text :account-emoji))
-      (h/has-style (h/query-by-label-text :account-emoji)
-                   {:fontSize (style/get-emoji-size (:size opts))})
-      (h/is-truthy (h/query-by-text (:emoji opts))))))
+      (h/is-truthy (h/query-by-label-text (:emoji opts))))))

src/quo2/components/avatars/account_avatar/view.cljs

@@ -1,9 +1,12 @@
 (ns quo2.components.avatars.account-avatar.view
   (:require [clojure.string :as string]
             [quo2.components.avatars.account-avatar.style :as style]
+            [quo2.foundations.twemoji :as twemoji]
             [quo2.theme :as quo.theme]
             [react-native.core :as rn]))
 
+(def default-emoji "🍑")
+
 (defn- view-internal
   "Opts:
    
@@ -18,17 +21,15 @@
     :theme - keyword -> :light/:dark"
   [{:keys [size emoji]
     :or   {size  style/default-size
-           emoji "🍑"}
+           emoji default-emoji}
     :as   opts}]
   (let [emoji-size (style/get-emoji-size size)]
     [rn/view
      {:accessible          true
       :accessibility-label :account-avatar
       :style               (style/root-container opts)}
-     [rn/text
-      {:accessibility-label      :account-emoji
-       :adjusts-font-size-to-fit true
-       :style                    {:font-size emoji-size}}
+     [twemoji/twemoji
+      {:style {:font-size emoji-size}}
       (string/trim emoji)]]))
 
 (def view (quo.theme/with-theme view-internal))

src/quo2/components/avatars/channel_avatar/view.cljs

@@ -4,6 +4,7 @@
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
+            [quo2.foundations.twemoji :as twemoji]
             [react-native.core :as rn]
             utils.string))
 
@@ -54,8 +55,7 @@
     :style               (style/outer-container {:size size :color customization-color})}
    (if (string/blank? emoji)
      [initials full-name size customization-color]
-     [text/text
-      {:accessibility-label :emoji
-       :size                (if (= size :size/l) :paragraph-1 :label)}
+     [twemoji/twemoji
+      {:style {:font-size (if (= size :size/l) 15 12)}}
       (string/trim emoji)])
    [lock locked? size]])

src/quo2/components/common/emoji_hash/style.cljs

@@ -0,0 +1,10 @@
+(ns quo2.components.common.emoji-hash.style)
+
+(def root-container
+  {:flex-direction :row})
+
+(def emoji-container
+  {:height          20
+   :width           20
+   :align-items     :center
+   :justify-content :center})

src/quo2/components/common/emoji_hash/view.cljs

@@ -0,0 +1,28 @@
+(ns quo2.components.common.emoji-hash.view
+  (:require [quo2.components.common.emoji-hash.style :as style]
+            [quo2.foundations.twemoji :as twemoji]
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]))
+
+(defn- view-internal
+  "Opts:
+    :emoji-hash - vector consist of emojis -> [😄 😂 🫣 🍑 😇 🤢 😻 🥷🏻 🦸🏻‍♀️ 🌶️ 💃 🚌 🧑🏻‍🎄 🪗]
+
+    :size - number (optional) - 16 [default] 
+
+    :container-style - map (optional)
+
+    :emoji-container-style - map (optional)
+
+    :theme - keyword -> :light/:dark"
+  [{:keys [emoji-hash size container-style emoji-container-style]}]
+  (let [emoji-size (or size 16)]
+    (into [rn/view {:style (merge style/root-container container-style)}]
+          (map #(with-meta [rn/view {:style (merge style/emoji-container emoji-container-style)}
+                            [twemoji/twemoji
+                             {:image-style {:height emoji-size
+                                            :width  emoji-size}} %]]
+                           {:key %})
+               emoji-hash))))
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/markdown/text.cljs

@@ -1,8 +1,8 @@
 (ns quo2.components.markdown.text
   (:require [quo2.foundations.colors :as colors]
             [quo2.foundations.typography :as typography]
+            [quo2.foundations.twemoji :as twemoji]
             [quo2.theme :as quo.theme]
-            [react-native.core :as rn]
             [reagent.core :as reagent]))
 
 (defn text-style
@@ -31,11 +31,10 @@
 
 (defn- text-view-internal
   [props & children]
-  (let [style (text-style props)]
-    (into [rn/text
-           (merge {:style style}
-                  (dissoc props :style :size :align :weight :color :theme))]
-          children)))
+  (let [style      (text-style props)
+        text-props (merge {:style style}
+                          (dissoc props :style :size :align :weight :color :theme))]
+    (into [twemoji/text text-props] children)))
 
 (def ^:private text-view (quo.theme/with-theme text-view-internal))
 

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

@@ -27,8 +27,7 @@
   {:color colors/white})
 
 (def emoji-hash
-  {:margin-top     12
-   :letter-spacing 1.5})
+  {:margin-top 12})
 
 (def user-hash
   {:margin-top 2

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

@@ -8,7 +8,8 @@
             [quo2.components.markdown.text :as text]
             [quo2.components.buttons.button.view :as button]
             [quo2.components.profile.profile-card.style :as style]
-            [quo2.components.avatars.user-avatar.view :as user-avatar]))
+            [quo2.components.avatars.user-avatar.view :as user-avatar]
+            [quo2.components.common.emoji-hash.view :as emoji-hash]))
 
 (defn- f-profile-card-component
   [{:keys [keycard-account? profile-picture name hash
@@ -96,10 +97,9 @@
           {:weight :monospace
            :style  style/user-hash} hash])
        (when (and show-emoji-hash? emoji-hash)
-         [text/text
-          {:weight          :monospace
-           :number-of-lines 1
-           :style           style/emoji-hash} emoji-hash])]]]))
+         [emoji-hash/view
+          {:emoji-hash      emoji-hash
+           :container-style style/emoji-hash}])]]]))
 
 (defn profile-card
   [props]

src/quo2/foundations/twemoji.cljs

@@ -0,0 +1,12 @@
+(ns quo2.foundations.twemoji
+  (:require [reagent.core :as reagent]))
+
+(def ^:private twemoji-js (js/require "../src/js/components/twemoji.js"))
+
+;; For rendering single Twemoji
+;; Usage in: Account avatar, Channel avatar, Emoji hash and Emoji picker
+(def twemoji (reagent/adapt-react-class (.-Twemoji ^js twemoji-js)))
+
+;; For parsing the string and replacing emoji with Twemoji equivalent
+;; Usage in: Chat
+(def text (reagent/adapt-react-class (.-TwemojiText ^js twemoji-js)))

src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs

@@ -1,5 +1,6 @@
 (ns status-im2.contexts.onboarding.identifiers.profile-card.view
   (:require [quo2.core :as quo]
+            [quo2.components.common.emoji-hash.view :as emoji-hash]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.masked-view :as masked-view]
@@ -51,11 +52,9 @@
        hash]
       [reanimated/view
        {:style [emoji-hash-style]}
-       [quo/text
-        {:weight          :monospace
-         :number-of-lines 1
-         :style           style/emoji-hash}
-        emoji-hash]]]]))
+       [emoji-hash/view
+        {:emoji-hash      emoji-hash
+         :container-style style/emoji-hash}]]]]))
 
 (defn profile-card
   [props]

src/status_im2/contexts/onboarding/identifiers/view.cljs

@@ -1,6 +1,5 @@
 (ns status-im2.contexts.onboarding.identifiers.view
   (:require [react-native.core :as rn]
-            [clojure.string :as string]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]
             [quo2.core :as quo]
@@ -28,8 +27,7 @@
         {:keys [emoji-hash display-name compressed-key
                 public-key]} (rf/sub [:profile/profile])
         {:keys [color]}      (rf/sub [:onboarding-2/profile])
-        photo-path           (rf/sub [:chats/photo-path public-key])
-        emoji-string         (string/join emoji-hash)]
+        photo-path           (rf/sub [:chats/photo-path public-key])]
     (carousel.animation/use-initialize-animation progress paused? true is-dragging? drag-amount)
     (rn/use-effect
      (fn []
@@ -50,7 +48,7 @@
         {:profile-picture     photo-path
          :name                display-name
          :hash                compressed-key
-         :emoji-hash          emoji-string
+         :emoji-hash          emoji-hash
          :customization-color color
          :progress            progress}]
        [quo/button

src/status_im2/contexts/quo_preview/foundations/typography.cljs

@@ -0,0 +1,43 @@
+(ns status-im2.contexts.quo-preview.foundations.typography
+  (:require [quo2.core :as quo]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:type :text
+    :key  :label}
+   {:type    :select
+    :key     :size
+    :options [{:key   :label
+               :value "label"}
+              {:key   :paragraph-1
+               :value "paragraph-1"}
+              {:key   :paragraph-2
+               :value "paragraph-2"}
+              {:key   :heading-1
+               :value "heading-1"}
+              {:key   :heading-2
+               :value "heading-2"}]}
+   {:type    :select
+    :key     :weight
+    :options [{:key   :regular
+               :value "regular"}
+              {:key   :medium
+               :value "medium"}
+              {:key   :semi-bold
+               :value "semi-bold"}
+              {:key   :bold
+               :value "bold"}
+              {:key   :monospace
+               :value "monospace"}
+              {:key   :code
+               :value "code"}]}])
+
+(defn view
+  []
+  (let [state (reagent/atom {:label  "Let’s meet for 🍔 and 🍺"
+                             :size   :heading-1
+                             :weight :bold})]
+    (fn []
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/text @state (:label @state)]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -46,6 +46,7 @@
     [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.foundations.shadows :as shadows]
+    [status-im2.contexts.quo-preview.foundations.typography :as typography]
     [status-im2.contexts.quo-preview.info.info-message :as info-message]
     [status-im2.contexts.quo-preview.info.information-box :as information-box]
     [status-im2.contexts.quo-preview.inputs.input :as input]
@@ -123,7 +124,9 @@
 
 (def screens-categories
   {:foundations       [{:name      :shadows
-                        :component shadows/preview-shadows}]
+                        :component shadows/preview-shadows}
+                       {:name      :typography
+                        :component typography/view}]
    :animated-list     [{:name      :animated-header-list
                         :component animated-header-list/mock-screen}]
    :avatar            [{:name      :group-avatar

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

@@ -3,7 +3,6 @@
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [quo2.core :as quo]
-            [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
@@ -40,28 +39,25 @@
     :type  :text}
    {:label "Hash"
     :key   :hash
-    :type  :text}
-   {:label "Emoji hash"
-    :key   :emoji-hash
     :type  :text}])
 
 (defn cool-preview
   []
-  (let [state (reagent/atom {:keycard-account? false
-                             :name "Matt Grote"
-                             :on-options-press nil
-                             :on-card-press nil
+  (let [state (reagent/atom {:keycard-account?     false
+                             :name                 "Matt Grote"
+                             :on-options-press     nil
+                             :on-card-press        nil
                              :show-options-button? true
-                             :show-logged-in? true
-                             :show-user-hash? false
-                             :login-card? false
-                             :last-item? true
-                             :on-press-sign nil
-                             :customization-color :turquoise
-                             :profile-picture (resources/get-mock-image :user-picture-male5)
-                             :show-emoji-hash? false
-                             :hash "zQ3k83euenmcikw7474hfu73t5N"
-                             :emoji-hash "😄😂🫣🍑😇🤢😻🥷🏻🦸🏻‍♀️🦸🏻🦸🏻‍♂️🦹🏻‍♀️🧑🏻‍🎄🎅🏻"})]
+                             :show-logged-in?      true
+                             :show-user-hash?      true
+                             :login-card?          false
+                             :last-item?           true
+                             :on-press-sign        nil
+                             :customization-color  :turquoise
+                             :show-emoji-hash?     true
+                             :hash                 "zQ3k83euenmcikw7474hfu73t5N"
+                             :emoji-hash           ["😄" "😂" "🫣" "🍑" "😇" "🤢" "😻" "🥷🏻" "🦸🏻‍♀️"
+                                                    "🌶️" "💃" "🚌" "🧑🏻‍🎄" "🪗"]})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view {:padding-bottom 150}

src/status_im2/contexts/shell/share/style.cljs

@@ -70,11 +70,10 @@
 
 (def emoji-hash-label
   {:color          colors/white-opa-40
-   :margin-top     8
+   :margin-top     2
    :padding-bottom (if platform/ios? 2 0)
    :padding-left   12})
 
-
 (def share-button-container
   {:position :absolute
    :right    0
@@ -86,12 +85,9 @@
    :top      16})
 
 (def emoji-hash-content
-  {:color          colors/white
-   :align-self     :flex-start
-   :padding-top    4
-   :padding-bottom 12
-   :padding-left   12
-   :font-size      14})
+  {:margin-top    2
+   :margin-left   12
+   :margin-bottom 8})
 
 (def tabs-container
   {:padding-horizontal screen-padding

src/status_im2/contexts/shell/share/view.cljs

@@ -11,7 +11,8 @@
             [utils.image-server :as image-server]
             [react-native.navigation :as navigation]
             [clojure.string :as string]
-            [utils.address :as address]))
+            [utils.address :as address]
+            [quo2.components.common.emoji-hash.view :as emoji-hash]))
 
 (defn header
   []
@@ -106,7 +107,10 @@
           :on-long-press    #(rf/dispatch [:share/copy-text-and-show-toast
                                            {:text-to-copy      emoji-hash-string
                                             :post-copy-message (i18n/label :t/emoji-hash-copied)}])}
-         [rn/text {:style style/emoji-hash-content} emoji-hash-string]]]]
+         [emoji-hash/view
+          {:emoji-hash            emoji-hash
+           :container-style       style/emoji-hash-content
+           :emoji-container-style {:margin-left -1}}]]]]
       [rn/view {:style style/emoji-share-button-container}
        [quo/button
         {:icon-only?          true