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"}
hickory {:mvn/version "0.7.1"}
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"]

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

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

@ -1,23 +1,11 @@
(ns fiddle.views.screens
(:require [re-frame.core :as re-frame]
[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]
[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 []
[react/view {:flex-direction :row}
[frame/frame
[intro/intro]]
[frame/frame
[intro/wizard]]
[frame/frame
[add-new/add-account]]])

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

@ -1,7 +1,11 @@
(ns fiddle.views.toolbar
(:require [status-im.ui.components.react :as react]
[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 []
[react/view
@ -12,14 +16,14 @@
:flex-wrap :wrap}
[react/view {:width 375}
[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}
[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}
[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}
[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}
[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}
[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.checkbox.view :as checkbox]
[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 ch (reagent/atom true))
@ -16,40 +18,44 @@
[react/view
[react/text {:style {:typography :main-medium}} "Main button"]
[react/view {:padding 40 :background-color :while :border-radius 20}
[button/button {:label "Label"}]
[button/button {:label "Label" :disabled? true}]]]
(snippets/code-snippet [button/button {:label "Label"}] true)
(snippets/code-snippet [button/button {:label "Label" :disabled? true}] true)]]
[react/view
[react/text {:style {:typography :main-medium}} "Secondary button"]
[react/view {:padding 40 :background-color :while :border-radius 20}
[button/button {:label "Label" :type :secondary}]
[button/button {:label "Label" :type :secondary :disabled? true}]]]
(snippets/code-snippet [button/button {:label "Label" :type :secondary}] true)
(snippets/code-snippet [button/button {:label "Label" :type :secondary :disabled? true}] true)]]
[react/view
[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
[button/button {:label "Label" :type :next}]
[button/button {:label "Label" :type :previous}]]
(snippets/code-snippet [button/button {:label "Label" :type :next}] true)
(snippets/code-snippet [button/button {:label "Label" :type :previous}] true)]
[react/view
[button/button {:label "Label" :type :next :disabled? true}]
[button/button {:label "Label2" :type :previous :disabled? true}]]]]
(snippets/code-snippet [button/button {:label "Label" :type :next :disabled? true}] true)
(snippets/code-snippet [button/button {:label "Label2" :type :previous :disabled? true}] true)]]]
[react/view
[react/text {:style {:typography :main-medium}} "Switch"]
[react/view {:padding 40 :background-color :while :border-radius 20}
[react/switch
{:track-color #js {:true colors/blue :false nil}
:value @sw
:on-value-change #(swap! sw not)
:disabled false}]
(snippets/code-snippet
[react/switch
{:track-color #js {:true colors/blue :false nil}
:value @sw
:on-value-change #(swap! sw not)
:disabled false}]
true)
[react/view {:height 20}]
[react/switch
{:track-color #js {:true colors/blue :false nil}
:value false
:disabled true}]]]
(snippets/code-snippet
[react/switch
{:track-color #js {:true colors/blue :false nil}
:value false
:disabled true}]
true)]]
[react/view
[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 {:margin 10}
[badge/badge "8"]]
(snippets/code-snippet [badge/badge "8"] true)]
[react/view {:margin 10}
[badge/badge "8" true]]
[react/view {:margin 10}
@ -59,14 +65,18 @@
[react/view
[react/text {:style {:typography :main-medium}} "Checkbox"]
[react/view {:padding 40 :background-color :while :border-radius 20}
[checkbox/checkbox
{:checked? @ch :on-value-change #(swap! ch not)}]
(snippets/code-snippet
[checkbox/checkbox
{:checked? @ch :on-value-change #(swap! ch not)}]
true)
[react/view {:height 20}]
[checkbox/checkbox
{:checked? @ch2 :on-value-change #(swap! ch2 not)}]]]
(snippets/code-snippet
[checkbox/checkbox
{:checked? @ch2 :on-value-change #(swap! ch2 not)}]
true)]]
[react/view
[react/text {:style {:typography :main-medium}} "Radio button"]
[react/view {:padding 40 :background-color :while :border-radius 20}
[radio/radio true]
(snippets/code-snippet [radio/radio true] true)
[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 image-class (get-web-class "Image"))
(def picker-obj nil)
(def animated-flat-list-class #())
(defn picker-class [] )
(defn picker-item-class [] )
@ -98,7 +99,7 @@
(defn prepare-text-props [props]
(-> props
(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)))
(defn prepare-nested-text-props [props]