cleanup quo2 2, remove status-im usage (#14308)

status-im · Nov 10, 2022 · 3c1c8a1 · 3c1c8a1
1 parent 3925de5
commit 3c1c8a1
Show file tree

Hide file tree

Showing 86 changed files with 567 additions and 372 deletions.
diff --git a/src/quo2/components/avatars/account_avatar.cljs b/src/quo2/components/avatars/account_avatar.cljs
@@ -1,11 +1,11 @@
 (ns quo2.components.avatars.account-avatar
   (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
-            [status-im.ui.components.icons.icons :as icons]
+            [quo2.components.icon :as icons]
             [quo2.theme :as theme]))
 
 (def icon-color-value
-  {:dark (get-in colors/customization [:dark :purple])
+  {:dark  (get-in colors/customization [:dark :purple])
    :light (get-in colors/customization [:light :purple])})
 
 (defn get-border-radius [size]
@@ -28,18 +28,17 @@
   [{:keys [size icon]
     :or   {size 80
            icon :main-icons/placeholder}}]
-  (let [icon-color           (if (theme/dark?)
-                               (:dark icon-color-value)
-                               (:light icon-color-value))
+  (let [icon-color (if (theme/dark?)
+                     (:dark icon-color-value)
+                     (:light icon-color-value))
         avatar-border-radius (get-border-radius size)
-        inner-icon-size      (get-inner-icon-sizes size)]
+        inner-icon-size (get-inner-icon-sizes size)]
     [rn/view {:style {:width            size
                       :background-color icon-color
                       :height           size
                       :border-radius    avatar-border-radius
                       :justify-content  :center
                       :align-items      :center}}
      [icons/icon icon
-      {:no-color        true
-       :container-style {:width  inner-icon-size
-                         :height inner-icon-size}}]]))
+      {:no-color true
+       :size     inner-icon-size}]]))
diff --git a/src/quo2/components/avatars/icon_avatar.cljs b/src/quo2/components/avatars/icon_avatar.cljs
@@ -1,29 +1,28 @@
 (ns quo2.components.avatars.icon-avatar
   (:require [react-native.core :as rn]
             [quo2.foundations.colors :as colors]
-            [status-im.ui.components.icons.icons :as icons]))
+            [quo2.components.icon :as icons]))
 
 (def sizes
-  {:big 48
+  {:big    48
    :medium 32
-   :small 20})
+   :small  20})
 
 (defn icon-avatar
   [{:keys [size icon color opacity]
     :or   {opacity 20}}]
   (let [component-size (size sizes)
-        circle-color   (colors/custom-color color 50 opacity)
-        icon-color     (colors/custom-color-by-theme color 50 60)
-        icon-size      (case size
-                         :big    20
-                         :medium 16
-                         :small  12)]
+        circle-color (colors/custom-color color 50 opacity)
+        icon-color (colors/custom-color-by-theme color 50 60)
+        icon-size (case size
+                    :big 20
+                    :medium 16
+                    :small 12)]
     [rn/view {:style {:width            component-size
                       :height           component-size
                       :border-radius    component-size
                       :background-color circle-color
                       :justify-content  :center
                       :align-items      :center}}
-     [icons/icon icon {:container-style {:width  icon-size
-                                         :height icon-size}
-                       :color           icon-color}]]))
+     [icons/icon icon {:size  icon-size
+                       :color icon-color}]]))
diff --git a/src/quo2/components/avatars/user_avatar.cljs b/src/quo2/components/avatars/user_avatar.cljs
@@ -1,11 +1,11 @@
 (ns quo2.components.avatars.user-avatar
   (:require [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icons]
-            [clojure.string :refer [upper-case split blank?]]
             [quo2.theme :refer [dark?]]
-            [status-im.ui.components.fast-image :as fast-image]))
+            [clojure.string :refer [upper-case split blank?]]))
 
 (def sizes {:big {:outer 80
                   :inner 72

diff --git a/src/quo2/components/buttons/dynamic_button.cljs b/src/quo2/components/buttons/dynamic_button.cljs
@@ -1,7 +1,6 @@
 (ns quo2.components.buttons.dynamic-button
   (:require [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im.i18n.i18n :as i18n]
             [quo2.components.icon :as icon]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]))
@@ -60,7 +59,7 @@
     :customization-color customize jump-to and mention button color}"
   [_]
   (let [pressed? (reagent/atom false)]
-    (fn [{:keys [type on-press count customization-color style]}]
+    (fn [{:keys [type label on-press count customization-color style]}]
       [rn/touchable-without-feedback
        {:on-press-in         #(reset! pressed? true)
         :on-press-out        #(reset! pressed? false)
@@ -93,8 +92,8 @@
                                                 :notification-up   0
                                                 :search-with-label 8)}}
            (case type
-             :jump-to                                       (i18n/label :t/jump-to)
-             :search-with-label                             (i18n/label :t/back)
+             :jump-to                                       label
+             :search-with-label                             label
              (:mention :notification-down :notification-up) (str count))])
         (when (#{:jump-to :notification-down :notification-up} type)
           [icon-view type])]])))
diff --git a/src/quo2/components/code/snippet.cljs b/src/quo2/components/code/snippet.cljs
@@ -1,6 +1,5 @@
 (ns quo2.components.code.snippet
   (:require ["react-native" :as react-native]
-            ["react-syntax-highlighter" :default Highlighter]
             [cljs-bean.core :as bean]
             [clojure.string :as str]
             [oops.core :as oops]
@@ -10,7 +9,9 @@
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]
-            [status-im.ui.components.react :as react]))
+            [react-native.linear-gradient :as linear-gradient]
+            [react-native.masked-view :as masked-view]
+            [react-native.syntax-highlighter :as highlighter]))
 
 ;; Example themes:
 ;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
@@ -91,12 +92,12 @@
             max-text-height       (some-> max-lines (* font-scale 18)) ;; 18 is font's line height.
             truncated?            (and max-text-height (< max-text-height @text-height))
             maybe-mask-wrapper    (if truncated?
-                                    [react/masked-view
+                                    [masked-view/masked-view
                                      {:mask-element
                                       (reagent/as-element
-                                       [react/linear-gradient {:colors ["black" "transparent"]
-                                                               :locations [0.75 1]
-                                                               :style {:flex 1}}])}]
+                                       [linear-gradient/linear-gradient {:colors    ["black" "transparent"]
+                                                                         :locations [0.75 1]
+                                                                         :style     {:flex 1}}])}]
                                     [:<>])]
 
         [rn/view {:style {:overflow         :hidden
@@ -140,15 +141,15 @@
                                 :on-copy-press on-copy-press}])))
 
 (defn snippet [{:keys [language max-lines on-copy-press]} children]
-  [:> Highlighter {:language          language
-                   :renderer          (wrap-renderer-fn
-                                       native-renderer {:max-lines max-lines
-                                                        :on-copy-press #(when on-copy-press
-                                                                          (on-copy-press children))})
-                   ;; Default props to adapt Highlighter for react-native.
-                   :CodeTag           react-native/View
-                   :PreTag            react-native/View
-                   :show-line-numbers false
-                   :style             #js {}
-                   :custom-style      #js {:backgroundColor nil}}
+  [highlighter/highlighter {:language          language
+                            :renderer          (wrap-renderer-fn
+                                                native-renderer {:max-lines max-lines
+                                                                 :on-copy-press #(when on-copy-press
+                                                                                   (on-copy-press children))})
+                            ;; Default props to adapt Highlighter for react-native.
+                            :CodeTag           react-native/View
+                            :PreTag            react-native/View
+                            :show-line-numbers false
+                            :style             #js {}
+                            :custom-style      #js {:backgroundColor nil}}
    children])
diff --git a/src/quo2/components/community/community_card_view.cljs b/src/quo2/components/community/community_card_view.cljs
@@ -6,6 +6,7 @@
    [status-im.ui.screens.communities.styles :as styles]
    [status-im.ui.screens.communities.icon :as communities.icon]))
 
+;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
 (defn community-card-view-item
   [{:keys [name description locked
            status tokens cover tags featured] :as community} on-press]

diff --git a/src/quo2/components/community/community_list_view.cljs b/src/quo2/components/community/community_list_view.cljs
@@ -12,6 +12,7 @@
    [status-im.ui.screens.communities.community :as community]
    [status-im.ui.screens.communities.icon :as communities.icon]))
 
+;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
 (defn communities-list-view-item [{:keys [id name locked? status notifications
                                           tokens background-color] :as community}]
   [react/view {:style (merge (styles/community-card 16)

diff --git a/src/quo2/components/community/community_view.cljs b/src/quo2/components/community/community_view.cljs
@@ -10,6 +10,7 @@
    [status-im.i18n.i18n :as i18n]
    [status-im.ui.screens.communities.styles :as styles]))
 
+;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
 (defn format-members [count]
   (if (> count 1000000)
     (str (money/with-precision (/ count 1000000) 1) (i18n/label :t/M))

diff --git a/src/quo2/components/community/discover_card.cljs b/src/quo2/components/community/discover_card.cljs
@@ -4,6 +4,8 @@
             [status-im.ui.screens.communities.styles :as styles]
             [status-im.ui.components.react :as react]))
 
+;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
+
 ;; Discover card placeholders images.
 ;; TODO replaced when real data is available
 (def images
@@ -91,5 +93,4 @@
                                  :height        (if (= id 1) 8 26)
                                  :border-radius 6
                                  :first-image   "" ; TODO replace with real data
-                                 :last-image    ""}]) ; TODO replace with real data
-      ]]))
+                                 :last-image    ""}])]])) ; TODO replace with real data
diff --git a/src/quo2/components/dividers/divider_label.cljs b/src/quo2/components/dividers/divider_label.cljs
@@ -1,8 +1,8 @@
 (ns quo2.components.dividers.divider-label
   (:require [react-native.core :as rn]
             [quo2.components.markdown.text :as markdown.text]
-            [status-im.ui.components.icons.icons :as icons]
-            [quo2.foundations.colors :as colors]))
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as icons]))
 
 (def chevron-icon-container-width 20)
 
@@ -42,8 +42,7 @@
        [icons/icon
         :main-icons/chevron-down
         {:color  text-and-icon-color
-         :width  chevron-icon-container-width
-         :height chevron-icon-container-height}])
+         :size  chevron-icon-container-width}])
      (when (pos? counter-value)
        [rn/view {:style {:border-radius 6
                          :height 16

diff --git a/src/quo2/components/drawers/action_drawers.cljs b/src/quo2/components/drawers/action_drawers.cljs
@@ -1,6 +1,5 @@
 (ns quo2.components.drawers.action-drawers
-  (:require  [status-im.ui.components.react :as react]
-             [react-native.core :as rn]
+  (:require  [react-native.core :as rn]
              [quo2.components.markdown.text :as text]
              [quo2.components.icon :as icon]
              [quo2.foundations.colors :as colors]))
@@ -17,20 +16,20 @@
                       danger?
                       on-press]}]
   [rn/touchable-opacity {:on-press on-press}
-   [react/view {:style
-                {:height            (if sub-label 56 47)
-                 :margin-horizontal 20
-                 :flex-direction    :row}}
-    [react/view {:style
-                 {:height        20
-                  :margin-top    :auto
-                  :margin-bottom :auto
-                  :margin-right  12
-                  :width         20}}
+   [rn/view {:style
+             {:height            (if sub-label 56 47)
+              :margin-horizontal 20
+              :flex-direction    :row}}
+    [rn/view {:style
+              {:height        20
+               :margin-top    :auto
+               :margin-bottom :auto
+               :margin-right  12
+               :width         20}}
      [icon/icon icon
       {:color (get-icon-color danger?)
        :size 20}]]
-    [react/view
+    [rn/view
      {:style
       {:flex            1
        :justify-content :center}}
@@ -48,11 +47,11 @@
                  (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
         sub-label])]
     (when right-icon
-      [react/view {:style
-                   {:height        20
-                    :margin-top    :auto
-                    :margin-bottom :auto
-                    :width 20}}
+      [rn/view {:style
+                {:height        20
+                 :margin-top    :auto
+                 :margin-bottom :auto
+                 :width 20}}
        [icon/icon right-icon
         {:color (get-icon-color danger?)
          :size 20}]])]])

diff --git a/src/quo2/components/icon.cljs b/src/quo2/components/icon.cljs
@@ -1,8 +1,8 @@
 (ns quo2.components.icon
   (:require
-   [quo2.components.icons.icons :as icons]
-   [status-im.ui.components.react :as react]
    [clojure.string :as string]
+   [react-native.core :as rn]
+   [quo2.components.icons.icons :as icons]
    [quo2.foundations.colors :as colors]))
 
 (defn memo-icon-fn
@@ -12,7 +12,7 @@
                :or   {accessibility-label :icon}}]
    (let [size (or size 20)]
      ^{:key icon-name}
-     [react/image
+     [rn/image
       {:style
        (merge {:width  size
                :height size}

diff --git a/src/quo2/components/list_items/preview_list.cljs b/src/quo2/components/list_items/preview_list.cljs
@@ -1,10 +1,9 @@
 (ns quo2.components.list-items.preview-list
   (:require [react-native.core :as rn]
             [react-native.hole-view :as hole-view]
-            [status-im.i18n.i18n :as i18n]
+            [react-native.fast-image :as fast-image]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as quo2.icons]
-            [status-im.ui.components.fast-image :as fast-image]
             [quo2.components.avatars.user-avatar :as user-avatar]
             [quo2.components.markdown.text :as quo2.text]))
 
@@ -57,7 +56,7 @@
     transparent-color
     (colors/theme-colors light-color dark-color override-theme)))
 
-(defn overflow-label [label size transparent? border-radius margin-left override-theme]
+(defn overflow-label [label size transparent? border-radius margin-left override-theme more-than-99-label]
   [rn/view {:style {:width            size
                     :height           size
                     :margin-left      margin-left
@@ -90,7 +89,7 @@
       ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
       (if (< label 100)
         (str "+" label)
-        (i18n/label :counter-99-plus))])])
+        more-than-99-label)])])
 
 (defn border-type [type]
   (case type
@@ -106,7 +105,7 @@
     :transparent?  overflow-label transparent?}
    items           preview list items (only 4 items is required for preview)
   "
-  [{:keys [type size list-size transparent? override-theme]} items]
+  [{:keys [type size list-size transparent? override-theme more-than-99-label]} items]
   (let [items-arr     (into [] items)
         list-size     (or list-size (count items))
         margin-left   (get-in params [size :margin-left])
@@ -121,4 +120,4 @@
        [list-item index type size (get items-arr index) list-size
         margin-left hole-size hole-radius hole-x hole-y border-radius])
      (when (> list-size 4)
-       [overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme])]))
+       [overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme more-than-99-label])]))