add account-selector component to sandbox (#13816)

refactor to accomodate changes in colors ns

squashing everything

amending it

addressing feedback

using quo2/text component instead of rn/text

addressing feedback

fix namespaces

lint fix and removing unused resources

addressing design feedback

make lint happy

some animation progress in peaking accounts

src/quo2/components/tabs/account_selector.cljs

@@ -0,0 +1,72 @@
+(ns quo2.components.tabs.account-selector
+  (:require
+   [quo.theme :as theme]
+   [quo.react-native :as rn]
+   [quo2.foundations.colors :as colors]
+   [quo2.components.markdown.text :as quo2]))
+
+(def themes
+  {:light {:default         {:bg            colors/neutral-10
+                             :account-text  colors/black
+                             :label-text    colors/neutral-50}
+           :transparent     {:bg            colors/neutral-80-opa-5
+                             :account-text  colors/black
+                             :label-text    colors/neutral-80-opa-40}}
+
+   :dark  {:default         {:bg            colors/neutral-80-opa-80
+                             :account-text  colors/white
+                             :label-text    colors/neutral-40}
+           :transparent     {:bg            colors/white-opa-5
+                             :account-text  colors/white
+                             :label-text    colors/neutral-40}}})
+
+(defn account-container-row [background-color]
+  {:padding-vertical  4
+   :flex-direction    :row
+   :align-items       :center
+   :background-color  background-color
+   :border-radius     12})
+
+(def account-emoji
+  {:height  16
+   :width   16})
+
+(def account-emoji-container
+  {:background-color  (colors/custom-color :purple 50)
+   :padding           8
+   :justify-content   :center
+   :align-items       :center
+   :border-radius     10
+   :margin-left       4
+   :margin-right      8})
+
+(defn get-color-by-type [type key]
+  (get-in themes [(theme/get-theme) type key]))
+
+(defn account-selector
+  "[account-selector opts]
+   opts
+   {:show-label?       true/false            ;; hide or show the label
+    :transparent?      true/false            ;; implement transparent background styles
+    :style             style                 ;; any other styling can be passed
+    :label-text        \"Label\"             ;; content to show where the label should be shown
+    :account-text      \"My Savings\"        ;; content in place of account name
+   }"
+  [{:keys [show-label? account-text account-emoji transparent? label-text style]}]
+  (let [background-color   (get-color-by-type (if transparent? :transparent :default) :bg)
+        account-text-color (get-color-by-type (if transparent? :transparent :default) :account-text)
+        label-text-color   (get-color-by-type (if transparent? :transparent :default) :label-text)]
+    [rn/view {:style style}
+     (when show-label? [quo2/text {:weight  :medium
+                                   :size    :paragraph-2
+                                   :style   {:color label-text-color
+                                             :margin-bottom 8}}
+                        label-text])
+     [rn/view {:style (account-container-row background-color)}
+      [rn/view {:style account-emoji-container}
+       [quo2/text account-emoji]]
+      [quo2/text {:weight :medium
+                  :size   :paragraph-1
+                  :style  {:color account-text-color}}
+       account-text]]]))
+

src/quo2/screens/main.cljs

@@ -34,6 +34,7 @@
             [quo2.screens.info.lowest-price :as lowest-price]
             [quo2.screens.avatars.channel-avatar :as channel-avatar]
             [quo2.screens.switcher.switcher-cards :as switcher-cards]
+            [quo2.screens.tabs.account-selector :as account-selector]
             [re-frame.core :as re-frame]))
 
 (def screens-categories
@@ -93,7 +94,10 @@
            :component segmented/preview-segmented}
           {:name      :tabs
            :insets    {:top false}
-           :component tabs/preview-tabs}]
+           :component tabs/preview-tabs}
+          {:name      :account-selector
+           :insets    {:top false}
+           :component account-selector/preview-this}]
    :tags [{:name      :context-tags
            :insets    {:top false}
            :component context-tags/preview-context-tags}

src/quo2/screens/tabs/account_selector.cljs

@@ -0,0 +1,69 @@
+(ns quo2.screens.tabs.account-selector
+  (:require [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [reagent.core :as reagent]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.tabs.account-selector :as quo2]))
+
+(def descriptor  [{:label "Show Label?:"
+                   :key   :show-label?
+                   :type  :boolean}
+                  {:label "Transparent Background?:"
+                   :key   :transparent?
+                   :type  :boolean}
+                  {:label "Account Text"
+                   :key   :account-text
+                   :type  :text}
+                  {:label "Label Text"
+                   :key   :label-text
+                   :type  :text}])
+
+;; keeping this unused data structure in the code for now
+;; will reference them when I introduce multiple account support
+;; and allow passing lists of accounts instead of just 1 account
+(def single-account
+  [{:account-text   "My Savings"
+    :account-emoji  "🍑"
+    :label-text     "Label"}])
+
+(def two-accounts
+  [{:account-text   "My Savings"
+    :account-emoji  "🍑"
+    :label-text     "Label"}
+   {:account-text   "My Current"
+    :account-emoji  "🍎"
+    :label-text     "Label 2"}])
+
+(def many-accounts
+  [{:account-text   "My Savings"
+    :account-emoji  "🍑"
+    :label-text     "Label"}
+   {:account-text   "My Current"
+    :account-emoji  "🍎"
+    :label-text     "Label 2"}
+   {:account-text   "My Reimbursment"
+    :account-emoji  "🍟"
+    :label-text     "Label 3"}])
+
+(defn cool-preview []
+  (let [state    (reagent/atom {:show-label?    true
+                                :transparent?   false
+                                :style          {:width :100%}
+                                :account-text   "My Savings"
+                                :account-emoji  "🍑"
+                                :label-text     "Label"})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [quo2/account-selector @state]]])))
+
+(defn preview-this []
+  [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}]])