Merge branch 'develop' into mute-for-specific-amount-of-time

Author: ibrkhalil

doc/new-guidelines.md

@@ -61,6 +61,57 @@ the source file. For a real example, see
    [rn/view (do-something)]])
 ```
 
+### Always add styles inside the `:style` key
+
+Although when compiling ReactNative for mobile some components are able work with 
+their styles in the top-level of the properties map, prefer to add them inside the
+`:style` key in order to separate styles from properties:
+
+```clojure
+;; bad
+[rn/button {:flex               1
+            :padding-vertical   10
+            :padding-horizontal 20
+            :on-press           #(js/alert "Hi!")
+            :title              "Button"}]
+
+;; good
+[rn/button {:style    {:flex               1
+                       :padding-vertical   10
+                       :padding-horizontal 20}
+            :on-press #(js/alert "Hi!")
+            :title    "Button"}]
+
+;; better 
+;; (define them in a style ns & place them inside `:style` key)
+[rn/button {:style    (style/button)
+            :on-press #(js/alert "Hi!")
+            :title    "Button"}
+ ]
+```
+
+### Always apply animated styles in the style file
+
+When implementing styles for reanimated views, we should always define
+them in the style file and apply animations with reanimated/apply-animations-to-style
+in the style definition.
+
+```clojure
+;; bad
+(defn circle
+  []
+  (let [opacity (reanimated/use-shared-value 1)]
+    [reanimated/view {:style (reanimated/apply-animations-to-style
+                              {:opacity opacity}
+                              style/circle-container)}]))
+
+;; good
+(defn circle
+  []
+  (let [opacity (reanimated/use-shared-value 1)]
+    [reanimated/view {:style (style/circle-container opacity)}]))
+```
+
 ### Don't use percents to define width/height
 
 In ReactNative, all layouts use the [flexbox

resources/images/ui2/[email protected]

@@ -45,7 +45,13 @@
    :devtools {:autobuild #shadow/env ["SHADOW_AUTOBUILD_ENABLED" :default true :as :bool]}
    :dev {:devtools {:after-load   status-im2.setup.hot-reload/reload
                     :build-notify status-im2.setup.hot-reload/build-notify
-                    :preloads     [re-frisk-remote.preload]}
+                    :preloads     [re-frisk-remote.preload
+                                   ;; In order to use component test helpers in
+                                   ;; the REPL we need to preload namespaces
+                                   ;; that are not normally required by
+                                   ;; production code, such as
+                                   ;; @testing-library/react-native.
+                                   test-helpers.component]}
          :closure-defines
          {status-im2.config/POKT_TOKEN      #shadow/env "POKT_TOKEN"
           status-im2.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}

resources/images/ui2/[email protected]

@@ -0,0 +1,47 @@
+import { useDerivedValue, withTiming, Easing } from 'react-native-reanimated';
+
+const slideAnimationDuration = 300;
+
+const easeOut = {
+  duration: slideAnimationDuration,
+  easing: Easing.bezier(0, 0, 0.58, 1),
+}
+
+// Derived Values
+export function dynamicProgressBarWidth(staticProgressBarWidth, progress) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      return staticProgressBarWidth * (progress.value || 0) / 100;
+    }
+  );
+}
+
+export function carouselLeftPosition(windowWidth, progress) {
+  return useDerivedValue(
+    function () {
+      'worklet'
+      const progressValue = progress.value;
+      switch (true) {
+      case (progressValue < 25):
+	return 0;
+      case (progressValue === 25):
+	return withTiming(-windowWidth, easeOut);
+      case (progressValue < 50):
+	return -windowWidth;
+      case (progressValue === 50):
+	return withTiming(-2 * windowWidth, easeOut);
+      case (progressValue < 75):
+	return -2 * windowWidth;
+      case (progressValue === 75):
+	return withTiming(-3 * windowWidth, easeOut);
+      case (progressValue < 100):
+	return -3 * windowWidth;
+      case (progressValue === 100):
+	return withTiming(-4 * windowWidth, easeOut);
+      default:
+	return 0;
+      }
+    });
+}
+

resources/images/ui2/[email protected]

@@ -293,7 +293,10 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     :createNativeWrapper      identity
     :default                  #js {}})
 
-(def react-native-redash #js {:clamp nil})
+(def react-native-redash
+  #js
+   {:clamp     nil
+    :withPause (fn [])})
 
 (def react-native-languages
   (clj->js {:default {:language            "en"
@@ -370,6 +373,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     "react-native-screens"                          (clj->js {})
     "react-native-reanimated"                       react-native-reanimated
     "react-native-redash/lib/module/v1"             react-native-redash
+    "react-native-redash"                           react-native-redash
     "react-native-fetch-polyfill"                   fetch
     "react-native-status-keycard"                   status-keycard
     "react-native-keychain"                         keychain
@@ -407,6 +411,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     "../src/js/worklets/bottom_sheet.js"            #js {}
     "../src/js/worklets/record_audio.js"            #js {}
     "../src/js/worklets/scroll_view.js"             #js {}
+    "../src/js/worklets/onboarding_carousel.js"     #js {}
     "../src/js/worklets/lightbox.js"                #js {}
     "./fleets.js"                                   default-fleets
     "@walletconnect/client"                         wallet-connect-client

resources/images/ui2/[email protected]

@@ -91,7 +91,7 @@
                           :color            (:text colors-by-status))]
     (if multiple-lines?
       (assoc base-props :text-align-vertical :top)
-      (assoc base-props :height (if small? 30 38)))))
+      (assoc base-props :height (if small? 30 38) :line-height nil))))
 
 (defn right-icon-touchable-area
   [small?]

resources/images/ui2/[email protected]

@@ -54,13 +54,13 @@
 (def ^:private custom-props
   "Custom properties that must be removed from properties map passed to InputText."
   [:type :blur? :override-theme :error? :right-icon :left-icon :disabled? :small? :button
-   :label :char-limit :on-char-limit-reach :icon-name :multiline?])
+   :label :char-limit :on-char-limit-reach :icon-name :multiline? :on-focus :on-blur])
 
 (defn- base-input
   [{:keys [on-change-text on-char-limit-reach]}]
   (let [status              (reagent/atom :default)
-        on-focus            #(reset! status :focus)
-        on-blur             #(reset! status :default)
+        internal-on-focus   #(reset! status :focus)
+        internal-on-blur    #(reset! status :default)
         multiple-lines?     (reagent/atom false)
         set-multiple-lines! #(let [height (oops/oget % "nativeEvent.contentSize.height")]
                                (if (> height 57)
@@ -74,7 +74,7 @@
                                 (when (>= amount-chars char-limit)
                                   (on-char-limit-reach amount-chars))))]
     (fn [{:keys [blur? override-theme error? right-icon left-icon disabled? small? button
-                 label char-limit multiline? clearable?]
+                 label char-limit multiline? clearable? on-focus on-blur]
           :as   props}]
       (let [status-kw        (cond
                                disabled? :disabled
@@ -102,8 +102,12 @@
                     :placeholder-text-color (:placeholder colors-by-status)
                     :cursor-color           (:cursor variant-colors)
                     :editable               (not disabled?)
-                    :on-focus               on-focus
-                    :on-blur                on-blur}
+                    :on-focus               (fn []
+                                              (when on-focus (on-focus))
+                                              (internal-on-focus))
+                    :on-blur                (fn []
+                                              (when on-blur (on-blur))
+                                              (internal-on-blur))}
              :always    (merge clean-props)
              multiline? (assoc :multiline              true
                                :on-content-size-change set-multiple-lines!)

resources/images/ui2/[email protected]

@@ -150,13 +150,15 @@
                   :justify-content :flex-end)}
    (let [last-icon-index (-> right-section-buttons count dec)]
      (map-indexed (fn [index
-                       {:keys [icon on-press type style icon-override-theme]
+                       {:keys [icon on-press type style icon-override-theme accessibility-label]
                         :or   {type :grey}}]
                     ^{:key index}
                     [rn/view
-                     {:style (assoc style
-                                    :margin-right
-                                    (if (= index last-icon-index) 0 8))}
+                     (cond-> {:style (assoc style
+                                            :margin-right
+                                            (if (= index last-icon-index) 0 8))}
+                       accessibility-label (assoc :accessibility-label accessibility-label
+                                                  :accessible          true))
                      [button/button
                       {:on-press       on-press
                        :icon           true

resources/images/ui2/[email protected]

@@ -16,7 +16,8 @@
    [text/text
     {:style  (style/tip-text completed?)
      :weight :regular
-     :size   :paragraph-2} text]
+     :size   :paragraph-2}
+    text]
    (when completed?
      [rn/view
       {:style               style/strike-through

resources/images/ui2/[email protected]

@@ -0,0 +1,29 @@
+(ns quo2.components.selectors.disclaimer.component-spec
+  (:require [quo2.components.selectors.disclaimer.view :as disclaimer]
+            [test-helpers.component :as h]))
+
+(h/describe "Disclaimer tests"
+  (h/test "Default render of toggle component"
+    (h/render [disclaimer/view {:on-change (h/mock-fn)} "test"])
+    (h/is-truthy (h/get-by-label-text :checkbox-off)))
+
+  (h/test "Renders its text"
+    (let [text "I accept this disclaimer"]
+      (h/render [disclaimer/view {} text])
+      (h/is-truthy (h/get-by-text text))))
+
+  (h/test "On change event gets fire after press"
+    (let [mock-fn (h/mock-fn)]
+      (h/render [disclaimer/view {:on-change mock-fn} "test"])
+      (h/fire-event :press (h/get-by-label-text :checkbox-off))
+      (h/was-called mock-fn)))
+
+  (h/describe "It's rendered according to its `checked?` property"
+    (h/test "checked? true"
+      (h/render [disclaimer/view {:checked? true} "test"])
+      (h/is-null (h/query-by-label-text :checkbox-off))
+      (h/is-truthy (h/query-by-label-text :checkbox-on)))
+    (h/test "checked? false"
+      (h/render [disclaimer/view {:checked? false} "test"])
+      (h/is-null (h/query-by-label-text :checkbox-on))
+      (h/is-truthy (h/query-by-label-text :checkbox-off)))))

resources/images/ui2/[email protected]

@@ -2,14 +2,16 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn container
-  []
-  {:flex-direction   :row
-   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40)
-   :padding          11
-   :align-self       :stretch
-   :border-radius    12
-   :border-width     1
-   :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-70)})
+  [blur?]
+  (let [dark-background (if blur? colors/white-opa-5 colors/neutral-80-opa-40)
+        dark-border     (if blur? colors/white-opa-10 colors/neutral-70)]
+    {:flex-direction   :row
+     :background-color (colors/theme-colors colors/neutral-5 dark-background)
+     :padding          11
+     :align-self       :stretch
+     :border-radius    12
+     :border-width     1
+     :border-color     (colors/theme-colors colors/neutral-20 dark-border)}))
 
 (def text
   {:margin-left 8})

resources/images/ui2/[email protected]

@@ -5,12 +5,13 @@
             [react-native.core :as rn]))
 
 (defn view
-  [{:keys [on-change accessibility-label container-style]} label]
+  [{:keys [checked? blur? on-change accessibility-label container-style]} label]
   [rn/view
-   {:style (merge container-style (style/container))}
+   {:style (merge container-style (style/container blur?))}
    [selectors/checkbox
     {:accessibility-label accessibility-label
-     :on-change           on-change}]
+     :on-change           on-change
+     :checked?            checked?}]
    [text/text
     {:size  :paragraph-2
      :style style/text}

resources/images/ui2/[email protected]

@@ -19,5 +19,6 @@
             [quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec]
             [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
             [quo2.components.selectors.--tests--.selectors-component-spec]
+            [quo2.components.selectors.disclaimer.component-spec]
             [quo2.components.selectors.filter.component-spec]
             [quo2.components.tags.--tests--.status-tags-component-spec]))

resources/images/ui2/[email protected]

@@ -127,6 +127,7 @@
 
 ;;Solid
 (def black "#000000")
+(def onboarding-header-black "#000716")
 
 ;;;;Primary
 

resources/images/ui2/[email protected]

@@ -9,6 +9,7 @@
                              withDelay
                              withSpring
                              withRepeat
+                             withSequence
                              withDecay
                              Easing
                              Keyframe
@@ -17,8 +18,8 @@
                              SlideOutUp
                              LinearTransition)]
             [reagent.core :as reagent]
+            ["react-native-redash" :refer (withPause)]
             [react-native.flat-list :as rn-flat-list]
-            [utils.collection]
             [utils.worklets.core :as worklets.core]))
 
 (def ^:const default-duration 300)
@@ -59,6 +60,8 @@
 (def with-decay withDecay)
 (def key-frame Keyframe)
 (def with-repeat withRepeat)
+(def with-sequence withSequence)
+(def with-pause withPause)
 (def cancel-animation cancelAnimation)
 
 ;; Easings

shadow-cljs.edn

@@ -126,6 +126,11 @@
   (when (string? s)
     (string/replace s m r)))
 
+(defn safe-nth
+  [coll index]
+  (when (number? index)
+    (nth coll index)))
+
 (defn svg?
   [some-string]
   (string/ends-with? some-string ".svg"))

src/js/worklets/onboarding_carousel.js

@@ -7,7 +7,7 @@
             [status-im.ui.screens.multiaccounts.key-storage.views :as key-storage]
             [status-im.ui.screens.multiaccounts.recover.views :as recover.views]
             [status-im2.common.bottom-sheet.view :as bottom-sheet]
-            [status-im2.contexts.chat.messages.pin.list.view :as pin.list]
+            [status-im2.contexts.chat.menus.pinned-messages.view :as pinned-messages-menu]
             [react-native.core :as rn]))
 
 (defn bottom-sheet
@@ -50,7 +50,8 @@
           (merge key-storage/migrate-account-password)
 
           (= view :pinned-messages-list)
-          (merge {:content pin.list/pinned-messages-list}))]
+          (merge {:content                   pinned-messages-menu/pinned-messages
+                  :bottom-safe-area-spacing? false}))]
     [:f>
      (fn []
        (rn/use-effect (fn []