status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fiddle code snippets 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2019-11-30 14:06:40 +01:00
parent 5a408f1613
commit 5142383354
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
7 changed files with 224 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
fiddle/deps.edn
View File

@ -10,7 +10,8 @@
com.taoensso/encore {:mvn/version "2.94.0"} com.taoensso/encore {:mvn/version "2.94.0"}
hickory {:mvn/version "0.7.1"} hickory {:mvn/version "0.7.1"}
com.cognitect/transit-cljs {:mvn/version "0.8.248"} com.cognitect/transit-cljs {:mvn/version "0.8.248"}
status-im/pluto {:mvn/version "iteration-4-9"}} status-im/pluto {:mvn/version "iteration-4-9"}
cljs-bean {:mvn/version "1.3.0"}}
:paths ["src" "../src" "resources" "target" "../resources"] :paths ["src" "../src" "resources" "target" "../resources"]

16
fiddle/src/fiddle/snippets.clj Normal file
View File

@ -0,0 +1,16 @@
(ns fiddle.snippets)
(defmacro code-snippet [code & [white?]]
(let [show? (gensym 'show)]
`[(fn []
(let [~show? (reagent/atom false)]
(fn []
[react/view
(when @~show?
[react/text {:style {:font-family "monospace" :background-color :black :color "#44d058"
:max-width 400 }}
(with-out-str (cljs.pprint/pprint '~code))])
[react/view {:align-items :flex-end :background-color (when-not ~white? colors/gray-lighter)}
[react/touchable-highlight {:on-press #(swap! ~show? not)}
[react/text {:style {:font-size 14 :color :blue :padding 3}} (if @~show? "Hide" "Code")]]]
~code])))]))

290
fiddle/src/fiddle/views/list_items.cljs
View File

@ -3,7 +3,11 @@
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.list-item.views :as list-item] [status-im.ui.components.list-item.views :as list-item]
[fiddle.frame :as frame] [fiddle.frame :as frame]
[status-im.ui.components.badge :as badge])) [status-im.ui.components.badge :as badge]
cljs.pprint
[reagent.core :as reagent]
[status-im.ui.components.button :as button])
(:require-macros [fiddle.snippets :as snippets]))
(defn item [name content] (defn item [name content]
[react/view [react/view
@ -20,7 +24,7 @@
:flex-wrap :wrap} :flex-wrap :wrap}
[react/view {:width 375} [react/view {:width 375}
[react/view {:background-color :white} [react/view {:background-color :white}
[list-item/list-item {:type :section-header :title "Header title"}]]]]) (snippets/code-snippet [list-item/list-item {:type :section-header :title "Header title"}])]]])
(defn list-items [] (defn list-items []
[react/view [react/view
@ -31,158 +35,180 @@
:flex-wrap :wrap} :flex-wrap :wrap}
[react/view {:margin-right 10} [react/view {:margin-right 10}
[item "Default with Image" [item "Default with Image"
[list-item/list-item (snippets/code-snippet
{:title "George" [list-item/list-item
:on-press #() {:title "George"
:icon [react/view :on-press #()
{:width 40 :icon [react/view
:height 40 {:width 40
:border-radius 20 :height 40
:background-color colors/green}]}]] :border-radius 20
:background-color colors/green}]}])]
[item "Default with Image, icon" [item "Default with Image, icon"
[list-item/list-item (snippets/code-snippet
{:title "George" [list-item/list-item
:on-press #() {:title "George"
:icon [react/view :on-press #()
{:width 40 :icon [react/view
:height 40 {:width 40
:border-radius 20 :height 40
:background-color colors/green}] :border-radius 20
:accessories [:main-icons/more]}]] :background-color colors/green}]
:accessories [:main-icons/more]}])]
[item "With radio button (TODO!)" [item "With radio button (TODO!)"
[list-item/list-item (snippets/code-snippet
{:title "George" [list-item/list-item
:on-press #() {:title "George"
:icon [react/view :on-press #()
{:width 40 :icon [react/view
:height 40 {:width 40
:border-radius 20 :height 40
:background-color colors/green}]}]]] :border-radius 20
:background-color colors/green}]}])]]
[react/view {:margin-right 10} [react/view {:margin-right 10}
[item "Default wIth icon in circle" [item "Default wIth icon in circle"
[list-item/list-item (snippets/code-snippet
{:title "Clear History" [list-item/list-item
:theme :action {:title "Clear History"
:icon :main-icons/close :theme :action
:on-press #()}]] :icon :main-icons/close
:on-press #()}])]
[item "Default wIth icon in circle, chevron" [item "Default wIth icon in circle, chevron"
[list-item/list-item (snippets/code-snippet
{:title "Get a ENS username?" [list-item/list-item
:icon :main-icons/address {:title "Get a ENS username?"
:on-press #() :icon :main-icons/address
:accessories [:chevron]}]] :on-press #()
:accessories [:chevron]}])]
[item "Default wIth icon in circle, chevron and accessory" [item "Default wIth icon in circle, chevron and accessory"
[list-item/list-item (snippets/code-snippet
{:title "Contacts" [list-item/list-item
:icon :main-icons/in-contacts {:title "Contacts"
:on-press #() :icon :main-icons/in-contacts
:accessories [[react/text {:style {:color colors/gray}} "4"] :on-press #()
:chevron]}]] :accessories [[react/text {:style {:color colors/gray}} "4"]
:chevron]}])]
[item "Default wIth icon in circle, chevron and badge" [item "Default wIth icon in circle, chevron and badge"
[list-item/list-item (snippets/code-snippet
{:title "Privacy and Security" [list-item/list-item
:icon :main-icons/profile {:title "Privacy and Security"
:on-press #() :icon :main-icons/profile
:accessories [[badge/badge "333"] :chevron]}]] :on-press #()
:accessories [[badge/badge "333"] :chevron]}])]
[item "Default wIth icon in circle, switch" [item "Default wIth icon in circle, switch"
[list-item/list-item (snippets/code-snippet
{:title "Notifications" [list-item/list-item
:icon :main-icons/notification {:title "Notifications"
:on-press #() :icon :main-icons/notification
:accessories :on-press #()
[[react/switch {}]]}]] :accessories
[[react/switch {}]]}])]
[item "Default wIth icon in circle, red" [item "Default wIth icon in circle, red"
[list-item/list-item (snippets/code-snippet
{:title "Delete and Leave" [list-item/list-item
:theme :action-red {:title "Delete and Leave"
:icon :main-icons/delete :theme :action-red
:on-press #()}]]] :icon :main-icons/delete
:on-press #()}])]]
[react/view {:margin-right 10} [react/view {:margin-right 10}
[item "Two lines with icon in circle, chevron" [item "Two lines with icon in circle, chevron"
[list-item/list-item (snippets/code-snippet
{:title "alex.stateofus.eth" [list-item/list-item
:subtitle "ENS name" {:title "alex.stateofus.eth"
:icon :main-icons/address :subtitle "ENS name"
:accessories [:chevron] :icon :main-icons/address
:on-press #()}]] :accessories [:chevron]
:on-press #()}])]
[item "Two lines with icon in circle" [item "Two lines with icon in circle"
[list-item/list-item (snippets/code-snippet
{:title "alex.stateofus.eth" [list-item/list-item
:subtitle "ENS name" {:title "alex.stateofus.eth"
:icon :main-icons/address :subtitle "ENS name"
:on-press #()}]] :icon :main-icons/address
:on-press #()}])]
[item "Two lines with icon in circle, blue title" [item "Two lines with icon in circle, blue title"
[list-item/list-item (snippets/code-snippet
{:title "Add or Create a Profile" [list-item/list-item
:subtitle "Requires signout" {:title "Add or Create a Profile"
:theme :action :subtitle "Requires signout"
:icon :main-icons/address :theme :action
:on-press #()}]] :icon :main-icons/address
:on-press #()}])]
[item "Two lines with dapp icon,title and subtitle" [item "Two lines with dapp icon,title and subtitle"
[list-item/list-item (snippets/code-snippet
{:title "CryptoKitties" [list-item/list-item
:subtitle "https://cryptokitties.co" {:title "CryptoKitties"
:icon [react/view {:width 40 :subtitle "https://cryptokitties.co"
:height 40 :icon [react/view {:width 40
:border-radius 20 :height 40
:background-color colors/green}] :border-radius 20
:on-press #()}]]] :background-color colors/green}]
:on-press #()}])]]
[react/view {:margin-right 10} [react/view {:margin-right 10}
[item "Default Small" [item "Default Small"
[list-item/list-item (snippets/code-snippet
{:title "Everybody" [list-item/list-item
:type :small {:title "Everybody"
:on-press #()}]] :type :small
:on-press #()}])]
[item "Default Small button" [item "Default Small button"
[list-item/list-item (snippets/code-snippet
{:title "Change Passcode" [list-item/list-item
:type :small {:title "Change Passcode"
:theme :action :type :small
:on-press #()}]] :theme :action
:on-press #()}])]
[item "Default Small red button" [item "Default Small red button"
[list-item/list-item (snippets/code-snippet
{:title "Delete all Contacts" [list-item/list-item
:type :small {:title "Delete all Contacts"
:theme :action-red :type :small
:on-press #()}]] :theme :action-red
:on-press #()}])]
[item "Default Small with chevron" [item "Default Small with chevron"
[list-item/list-item (snippets/code-snippet
{:title "Recovery Phrase" [list-item/list-item
:type :small {:title "Recovery Phrase"
:on-press #() :type :small
:accessories [:chevron]}]] :on-press #()
:accessories [:chevron]}])]
[item "Default Small with chevron and accessory" [item "Default Small with chevron and accessory"
[list-item/list-item (snippets/code-snippet
{:title "Main Currency" [list-item/list-item
:type :small {:title "Main Currency"
:on-press #() :type :small
:accessories [[react/text {:style {:color colors/gray}} "USD"] :on-press #()
:chevron]}]] :accessories [[react/text {:style {:color colors/gray}} "USD"]
:chevron]}])]
[item "Default Small with chevron, badge" [item "Default Small with chevron, badge"
[list-item/list-item (snippets/code-snippet
{:title "Recovery Phrase" [list-item/list-item
:type :small {:title "Recovery Phrase"
:on-press #() :type :small
:accessories [[badge/badge "2"] :chevron]}]]] :on-press #()
:accessories [[badge/badge "2"] :chevron]}])]]
[react/view {:margin-right 10} [react/view {:margin-right 10}
[item "Long title" [item "Long title"
[list-item/list-item (snippets/code-snippet
{:title "loooooooooong loooooooooooooong looooooong title" [list-item/list-item
:subtitle "ENS name" {:title "loooooooooong loooooooooooooong looooooong title"
:icon :main-icons/address :subtitle "ENS name"
:accessories [:chevron] :icon :main-icons/address
:on-press #()}]] :accessories [:chevron]
:on-press #()}])]
[item "Long subtitle" [item "Long subtitle"
[list-item/list-item (snippets/code-snippet
{:title "alex.stateofus.eth" [list-item/list-item
:subtitle "loooooooooooooooong loooooong looooooong subtitle" {:title "alex.stateofus.eth"
:icon :main-icons/address :subtitle "loooooooooooooooong loooooong looooooong subtitle"
:accessories [:chevron] :icon :main-icons/address
:on-press #()}]] :accessories [:chevron]
:on-press #()}])]
[item "Title-prefix + long title" [item "Title-prefix + long title"
[list-item/list-item (snippets/code-snippet
{:title-prefix "From" [list-item/list-item
:title-prefix-width 45 {:title-prefix "From"
:title "title-prefix and loooooong title really loooonglooo00oooong" :title-prefix-width 45
:type :small :title "title-prefix and loooooong title really loooonglooo00oooong"
:on-press #()}]]]]) :type :small
:on-press #()}])]]])

12
fiddle/src/fiddle/views/screens.cljs
View File

@ -1,23 +1,11 @@
(ns fiddle.views.screens (ns fiddle.views.screens
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.screens.intro.views :as intro]
[status-im.ui.screens.wallet.add-new.views :as add-new] [status-im.ui.screens.wallet.add-new.views :as add-new]
[fiddle.frame :as frame])) [fiddle.frame :as frame]))
;;:generate-key
;;:choose-key
;;:select-key-storage
;;:create-code
;;:confirm-code
;;:enable-fingerprint
(re-frame/reg-sub :intro-wizard (fn [_] {:step :generate-key :generating-keys? false}))
(defn screens [] (defn screens []
[react/view {:flex-direction :row} [react/view {:flex-direction :row}
[frame/frame
[intro/intro]]
[frame/frame
[intro/wizard]]
[frame/frame [frame/frame
[add-new/add-account]]]) [add-new/add-account]]])

18
fiddle/src/fiddle/views/toolbar.cljs
View File

@ -1,7 +1,11 @@
(ns fiddle.views.toolbar (ns fiddle.views.toolbar
(:require [status-im.ui.components.react :as react] (:require [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar :as toolbar-comp] [status-im.ui.components.toolbar :as toolbar-comp]
[status-im.ui.components.colors :as colors])) [status-im.ui.components.colors :as colors]
cljs.pprint
[reagent.core :as reagent]
[status-im.ui.components.button :as button])
(:require-macros [fiddle.snippets :as snippets]))
(defn toolbar [] (defn toolbar []
[react/view [react/view
@ -12,14 +16,14 @@
:flex-wrap :wrap} :flex-wrap :wrap}
[react/view {:width 375} [react/view {:width 375}
[react/view {:background-color :white :margin 10} [react/view {:background-color :white :margin 10}
[toolbar-comp/toolbar {:center {:type :secondary :label "Label"}}]] (snippets/code-snippet [toolbar-comp/toolbar {:center {:type :secondary :label "Label"}}])]
[react/view {:background-color :white :margin 10} [react/view {:background-color :white :margin 10}
[toolbar-comp/toolbar {:left {:type :previous :label "Label"} :right {:type :next :label "Label"}}]] (snippets/code-snippet [toolbar-comp/toolbar {:left {:type :previous :label "Label"} :right {:type :next :label "Label"}}])]
[react/view {:background-color :white :margin 10} [react/view {:background-color :white :margin 10}
[toolbar-comp/toolbar {:left {:type :secondary :label "Label"} :right {:label "Label"}}]] (snippets/code-snippet [toolbar-comp/toolbar {:left {:type :secondary :label "Label"} :right {:label "Label"}}])]
[react/view {:background-color :white :margin 10} [react/view {:background-color :white :margin 10}
[toolbar-comp/toolbar {:left {:type :previous :label "Label"}}]] (snippets/code-snippet [toolbar-comp/toolbar {:left {:type :previous :label "Label"}}])]
[react/view {:background-color :white :margin 10} [react/view {:background-color :white :margin 10}
[toolbar-comp/toolbar {:right {:type :next :label "Label"}}]] (snippets/code-snippet [toolbar-comp/toolbar {:right {:type :next :label "Label"}}])]
[react/view {:background-color :white :margin 10} [react/view {:background-color :white :margin 10}
[toolbar-comp/toolbar {:center {:label "Label"}}]]]]) (snippets/code-snippet [toolbar-comp/toolbar {:center {:label "Label"}}])]]])

60
fiddle/src/fiddle/views/ui.cljs
View File

@ -5,7 +5,9 @@
[status-im.ui.components.badge :as badge] [status-im.ui.components.badge :as badge]
[status-im.ui.components.checkbox.view :as checkbox] [status-im.ui.components.checkbox.view :as checkbox]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.ui.components.radio :as radio])) [status-im.ui.components.radio :as radio]
cljs.pprint)
(:require-macros [fiddle.snippets :as snippets]))
(def sw (reagent/atom true)) (def sw (reagent/atom true))
(def ch (reagent/atom true)) (def ch (reagent/atom true))
@ -16,40 +18,44 @@
[react/view [react/view
[react/text {:style {:typography :main-medium}} "Main button"] [react/text {:style {:typography :main-medium}} "Main button"]
[react/view {:padding 40 :background-color :while :border-radius 20} [react/view {:padding 40 :background-color :while :border-radius 20}
[button/button {:label "Label"}] (snippets/code-snippet [button/button {:label "Label"}] true)
[button/button {:label "Label" :disabled? true}]]] (snippets/code-snippet [button/button {:label "Label" :disabled? true}] true)]]
[react/view [react/view
[react/text {:style {:typography :main-medium}} "Secondary button"] [react/text {:style {:typography :main-medium}} "Secondary button"]
[react/view {:padding 40 :background-color :while :border-radius 20} [react/view {:padding 40 :background-color :while :border-radius 20}
[button/button {:label "Label" :type :secondary}] (snippets/code-snippet [button/button {:label "Label" :type :secondary}] true)
[button/button {:label "Label" :type :secondary :disabled? true}]]] (snippets/code-snippet [button/button {:label "Label" :type :secondary :disabled? true}] true)]]
[react/view [react/view
[react/text {:style {:typography :main-medium}} "Next and previous buttons"] [react/text {:style {:typography :main-medium}} "Next and previous buttons"]
[react/view {:padding 40 :background-color :while :border-radius 20 :flex-direction :row} [react/view {:padding 40 :background-color :while :border-radius 20 :flex-direction :row}
[react/view [react/view
[button/button {:label "Label" :type :next}] (snippets/code-snippet [button/button {:label "Label" :type :next}] true)
[button/button {:label "Label" :type :previous}]] (snippets/code-snippet [button/button {:label "Label" :type :previous}] true)]
[react/view [react/view
[button/button {:label "Label" :type :next :disabled? true}] (snippets/code-snippet [button/button {:label "Label" :type :next :disabled? true}] true)
[button/button {:label "Label2" :type :previous :disabled? true}]]]] (snippets/code-snippet [button/button {:label "Label2" :type :previous :disabled? true}] true)]]]
[react/view [react/view
[react/text {:style {:typography :main-medium}} "Switch"] [react/text {:style {:typography :main-medium}} "Switch"]
[react/view {:padding 40 :background-color :while :border-radius 20} [react/view {:padding 40 :background-color :while :border-radius 20}
[react/switch (snippets/code-snippet
{:track-color #js {:true colors/blue :false nil} [react/switch
:value @sw {:track-color #js {:true colors/blue :false nil}
:on-value-change #(swap! sw not) :value @sw
:disabled false}] :on-value-change #(swap! sw not)
:disabled false}]
true)
[react/view {:height 20}] [react/view {:height 20}]
[react/switch (snippets/code-snippet
{:track-color #js {:true colors/blue :false nil} [react/switch
:value false {:track-color #js {:true colors/blue :false nil}
:disabled true}]]] :value false
:disabled true}]
true)]]
[react/view [react/view
[react/text {:style {:typography :main-medium}} "Badge"] [react/text {:style {:typography :main-medium}} "Badge"]
[react/view {:padding 40 :background-color :while :border-radius 20 :flex-direction :row :flex-wrap :wrap} [react/view {:padding 40 :background-color :while :border-radius 20 :flex-direction :row :flex-wrap :wrap}
[react/view {:margin 10} [react/view {:margin 10}
[badge/badge "8"]] (snippets/code-snippet [badge/badge "8"] true)]
[react/view {:margin 10} [react/view {:margin 10}
[badge/badge "8" true]] [badge/badge "8" true]]
[react/view {:margin 10} [react/view {:margin 10}
@ -59,14 +65,18 @@
[react/view [react/view
[react/text {:style {:typography :main-medium}} "Checkbox"] [react/text {:style {:typography :main-medium}} "Checkbox"]
[react/view {:padding 40 :background-color :while :border-radius 20} [react/view {:padding 40 :background-color :while :border-radius 20}
[checkbox/checkbox (snippets/code-snippet
{:checked? @ch :on-value-change #(swap! ch not)}] [checkbox/checkbox
{:checked? @ch :on-value-change #(swap! ch not)}]
true)
[react/view {:height 20}] [react/view {:height 20}]
[checkbox/checkbox (snippets/code-snippet
{:checked? @ch2 :on-value-change #(swap! ch2 not)}]]] [checkbox/checkbox
{:checked? @ch2 :on-value-change #(swap! ch2 not)}]
true)]]
[react/view [react/view
[react/text {:style {:typography :main-medium}} "Radio button"] [react/text {:style {:typography :main-medium}} "Radio button"]
[react/view {:padding 40 :background-color :while :border-radius 20} [react/view {:padding 40 :background-color :while :border-radius 20}
[radio/radio true] (snippets/code-snippet [radio/radio true] true)
[react/view {:height 20}] [react/view {:height 20}]
[radio/radio false]]]]) (snippets/code-snippet [radio/radio false] true)]]])

3
fiddle/src/status_im/ui/components/react.cljs
View File

@ -51,6 +51,7 @@
(def text-input-class (get-web-class "TextInput")) (def text-input-class (get-web-class "TextInput"))
(def image-class (get-web-class "Image")) (def image-class (get-web-class "Image"))
(def picker-obj nil) (def picker-obj nil)
(def animated-flat-list-class #())
(defn picker-class [] ) (defn picker-class [] )
(defn picker-item-class [] ) (defn picker-item-class [] )
@ -98,7 +99,7 @@
(defn prepare-text-props [props] (defn prepare-text-props [props]
(-> props (-> props
(update :style typography/get-style) (update :style typography/get-style)
(update :style assoc :font-family "Inter") (update-in [:style :font-family] #(or % "Inter"))
(assoc :max-font-size-multiplier max-font-size-multiplier))) (assoc :max-font-size-multiplier max-font-size-multiplier)))
(defn prepare-nested-text-props [props] (defn prepare-nested-text-props [props]