feat: author component

Signed-off-by: Brian Sztamfater <brian@status.im>

src/quo2/components/messages/author/style.cljs

@@ -0,0 +1,39 @@
+(ns quo2.components.messages.author.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container
+  {:flex           1
+   :flex-wrap      :wrap
+   :height         18
+   :flex-direction :row
+   :align-items    :center})
+
+(defn ens-text []
+  {:color (colors/theme-colors colors/neutral-100 colors/white)})
+
+(defn nickname-text []
+  {:color (colors/theme-colors colors/neutral-100 colors/white)})
+
+(def middle-dot-nickname
+  {:color             colors/neutral-50
+   :margin-horizontal 4})
+
+(def chat-key-text
+  {:color       colors/neutral-50
+   :margin-left 8})
+
+(def middle-dot-chat-key
+  {:color       colors/neutral-50
+   :margin-left 4})
+
+(defn profile-name-text [nickname?]
+  {:color (if nickname?
+            (colors/theme-colors colors/neutral-60 colors/neutral-40)
+            (colors/theme-colors colors/neutral-100 colors/white))})
+
+(def icon-container
+  {:margin-left 4})
+
+(defn time-text [ens?]
+  {:color       colors/neutral-50
+   :margin-left (if ens? 8 4)})

src/quo2/components/messages/author/view.cljs

@@ -0,0 +1,66 @@
+(ns quo2.components.messages.author.view
+  (:require
+   [quo2.components.messages.author.style :as style]
+   [react-native.core :as rn]
+   [quo2.components.markdown.text :as text]
+   [quo2.components.icon :as icons]
+   [status-im.utils.utils :as utils]
+   [clojure.string :as string]))
+
+(def middle-dot "·")
+
+(defn author [{:keys [profile-name nickname chat-key ens-name time-str contact? verified? untrustworthy?]}]
+  [:f>
+   (fn []
+     (let [ens? (-> ens-name string/blank? not)
+           nickname? (-> nickname string/blank? not)]
+       [rn/view {:style style/container}
+        (if ens?
+          [text/text {:weight :semi-bold
+                      :size   :paragraph-2
+                      :style  (style/ens-text)}
+           ens-name]
+          [:<>
+           (when nickname?
+             [:<>
+              [text/text {:weight :semi-bold
+                          :size   :paragraph-2
+                          :style  (style/nickname-text)}
+               nickname]
+              [text/text {:size  :paragraph-2
+                          :style style/middle-dot-nickname}
+               middle-dot]])
+           [text/text {:weight (if nickname? :medium :semi-bold)
+                       :size   :paragraph-2
+                       :style  (style/profile-name-text nickname?)}
+            profile-name]])
+        (when contact?
+          [icons/icon :main-icons2/contact
+           {:size            12
+            :no-color        true
+            :container-style style/icon-container}])
+        (cond
+          verified?
+          [icons/icon :main-icons2/verified
+           {:size            12
+            :no-color        true
+            :container-style style/icon-container}]
+          untrustworthy?
+          [icons/icon :main-icons2/untrustworthy
+           {:size            12
+            :no-color        true
+            :container-style style/icon-container}])
+        (when-not ens?
+          [text/text {:monospace true
+                      :size      :paragraph-2
+                      :style     style/chat-key-text}
+           (utils/get-shortened-address chat-key)])
+        (when-not ens?
+          [text/text {:monospace true
+                      :size      :paragraph-2
+                      :style     style/middle-dot-chat-key}
+           middle-dot])
+        [text/text {:monospace true
+                    :size      :paragraph-2
+                    :style     (style/time-text ens?)}
+         time-str]]))])

src/status_im2/contexts/quo_preview/main.cljs

@@ -28,6 +28,7 @@
             [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
             [status-im2.contexts.quo-preview.list-items.channel :as channel]
             [status-im2.contexts.quo-preview.markdown.text :as text]
+            [status-im2.contexts.quo-preview.messages.author :as messages-author]
             [status-im2.contexts.quo-preview.messages.gap :as messages-gap]
             [status-im2.contexts.quo-preview.messages.system-message :as system-message]
             [status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs]
@@ -129,7 +130,10 @@
                :component messages-gap/preview-messages-gap}
               {:name      :system-messages
                :insets    {:top false}
-               :component system-message/preview-system-message}]
+               :component system-message/preview-system-message}
+              {:name      :author
+               :insets    {:top false}
+               :component messages-author/preview-author}]
    :navigation [{:name      :bottom-nav-tab
                  :insets    {:top false}
                  :component bottom-nav-tab/preview-bottom-nav-tab}

src/status_im2/contexts/quo_preview/messages/author.cljs

@@ -0,0 +1,62 @@
+(ns status-im2.contexts.quo-preview.messages.author
+  (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [quo2.components.messages.author.view :as quo2]
+            [reagent.core :as reagent]))
+
+(def descriptor [{:label "Profile name"
+                  :key   :profile-name
+                  :type  :text
+                  :limit 24}
+                 {:label "Nickname"
+                  :key   :nickname
+                  :type  :text}
+                 {:label "Chat key"
+                  :key   :chat-key
+                  :type  :text}
+                 {:label  "ENS name"
+                  :key    :ens-name
+                  :type   :text
+                  :suffix ".eth"}
+                 {:label "Time"
+                  :key   :time-str
+                  :type  :text
+                  :limit 5}
+                 {:label "Is contact?"
+                  :key   :contact?
+                  :type  :boolean}
+                 {:label "Is verified?"
+                  :key   :verified?
+                  :type  :boolean}
+                 {:label "Is untrustworthy?"
+                  :key   :untrustworthy?
+                  :type  :boolean}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:profile-name   "Alisher Yakupov"
+                             :nickname       ""
+                             :chat-key       "zQ3ssgRy5TtB47MMiMKMKaGyaawkCgMqqbrnAUYrZJ1sgt5N"
+                             :time-str       "09:30"
+                             :ens-name       ""
+                             :contact?       false
+                             :verified?      false
+                             :untrustworthy? false})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1}
+         [preview/customizer state descriptor]]
+        [rn/view {:padding-vertical    60
+                  :padding--horizontal 15
+                  :flex-direction      :row
+                  :justify-content     :center}
+         [quo2/author @state]]]])))
+
+(defn preview-author []
+  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/status_im2/contexts/quo_preview/preview.cljs

@@ -1,7 +1,8 @@
 (ns status-im2.contexts.quo-preview.preview
   (:require [reagent.core :as reagent]
             [react-native.core :as rn]
-            [quo2.foundations.colors :as colors])
+            [quo2.foundations.colors :as colors]
+            [clojure.string :as string])
   (:require-macros status-im2.contexts.quo-preview.preview))
 
 (def container {:flex-direction   :row
@@ -83,19 +84,24 @@
         "False"]]]]))
 
 (defn customizer-text
-  [{:keys [label key state]}]
+  [{:keys [label key state limit suffix]}]
   (let [state* (reagent/cursor state [key])]
     [rn/view {:style container}
      [label-view state label]
      [rn/view {:style {:flex 0.6}}
-      [rn/text-input {:value          @state*
+      [rn/text-input (merge
-                      :show-cancel    false
+                      {:value          @state*
-                      :style          {:border-radius 4
+                       :show-cancel    false
-                                       :border-width  1
+                       :style          {:border-radius 4
-                                       :border-color  (colors/theme-colors colors/neutral-100 colors/white)}
+                                        :border-width  1
-                      :on-change-text #(do
+                                        :border-color  (colors/theme-colors colors/neutral-100 colors/white)}
-                                         (reset! state* %)
+                       :on-change-text #(do
-                                         (reagent/flush))}]]]))
+                                          (reset! state* (if (and suffix (> (count %) (count @state*)))
+                                                           (str (string/replace % suffix "") suffix)
+                                                           %))
+                                          (reagent/flush))}
+                      (when limit
+                        {:max-length limit}))]]]))
 
 (defn value-for-key
   [id v]