From 514238335468ddacba072fe4e5cf85d3aedf50a0 Mon Sep 17 00:00:00 2001 From: Andrey Shovkoplyas Date: Sat, 30 Nov 2019 14:06:40 +0100 Subject: [PATCH] fiddle code snippets Signed-off-by: Andrey Shovkoplyas --- fiddle/deps.edn | 3 +- fiddle/src/fiddle/snippets.clj | 16 + fiddle/src/fiddle/views/list_items.cljs | 290 ++++++++++-------- fiddle/src/fiddle/views/screens.cljs | 12 - fiddle/src/fiddle/views/toolbar.cljs | 18 +- fiddle/src/fiddle/views/ui.cljs | 60 ++-- fiddle/src/status_im/ui/components/react.cljs | 3 +- 7 files changed, 224 insertions(+), 178 deletions(-) create mode 100644 fiddle/src/fiddle/snippets.clj diff --git a/fiddle/deps.edn b/fiddle/deps.edn index 11e73e9c2e..94846a42aa 100644 --- a/fiddle/deps.edn +++ b/fiddle/deps.edn @@ -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"] diff --git a/fiddle/src/fiddle/snippets.clj b/fiddle/src/fiddle/snippets.clj new file mode 100644 index 0000000000..4e57dd1546 --- /dev/null +++ b/fiddle/src/fiddle/snippets.clj @@ -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])))])) \ No newline at end of file diff --git a/fiddle/src/fiddle/views/list_items.cljs b/fiddle/src/fiddle/views/list_items.cljs index 133ca0a7a7..14fc6efb4b 100644 --- a/fiddle/src/fiddle/views/list_items.cljs +++ b/fiddle/src/fiddle/views/list_items.cljs @@ -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 #()}])]]]) diff --git a/fiddle/src/fiddle/views/screens.cljs b/fiddle/src/fiddle/views/screens.cljs index ec420648ff..34d0adcf6d 100644 --- a/fiddle/src/fiddle/views/screens.cljs +++ b/fiddle/src/fiddle/views/screens.cljs @@ -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]]]) diff --git a/fiddle/src/fiddle/views/toolbar.cljs b/fiddle/src/fiddle/views/toolbar.cljs index da6d575e29..7eb93d2c63 100644 --- a/fiddle/src/fiddle/views/toolbar.cljs +++ b/fiddle/src/fiddle/views/toolbar.cljs @@ -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"}}]]]]) \ No newline at end of file + (snippets/code-snippet [toolbar-comp/toolbar {:center {:label "Label"}}])]]]) \ No newline at end of file diff --git a/fiddle/src/fiddle/views/ui.cljs b/fiddle/src/fiddle/views/ui.cljs index cd5a524dad..570e972535 100644 --- a/fiddle/src/fiddle/views/ui.cljs +++ b/fiddle/src/fiddle/views/ui.cljs @@ -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]]]]) \ No newline at end of file + (snippets/code-snippet [radio/radio false] true)]]]) \ No newline at end of file diff --git a/fiddle/src/status_im/ui/components/react.cljs b/fiddle/src/status_im/ui/components/react.cljs index 70a34ca772..00a65e2a7c 100644 --- a/fiddle/src/status_im/ui/components/react.cljs +++ b/fiddle/src/status_im/ui/components/react.cljs @@ -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]