update example

clj-commons · Jan 11, 2018 · 45069bd · 45069bd
1 parent 660693d
commit 45069bd
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 117 deletions.
diff --git a/example/resources/public/index.html b/example/resources/public/index.html
@@ -5,9 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
-    <div id="rum-app"></div>
-    <div id="reagent-app"></div>
-    <div id="om-app"></div>
     <div id="app"></div>
     <script src="js/compiled/example.js"></script>
   </body>

diff --git a/example/src/example/core.cljs b/example/src/example/core.cljs
@@ -1,121 +1,118 @@
 (ns example.core
   (:require [rum.core :as rum]
-            [reagent.core :as r]
-            [om.dom :as dom]
-            [om.next :as om :refer [defui]]
             [goog.dom :as gdom]
-            [cljss.core :as css :refer [defstyles defkeyframes font-face inject-global]]
-            [cljss.reagent :as rss :include-macros true]
-            [cljss.rum :as rumss :include-macros true]
-            [cljss.om :as omss :include-macros true]))
-
-(def font-size 16)
+            [cljss.core :as css :refer [inject-global]]
+            [cljss.rum :refer-macros [defstyled]]))
 
 (inject-global
   {:body {:margin 0
-          :font (str "normal " font-size "px sans-serif")
-          :color "#242424"}
-   "#app label" {:color "red"}})
-
-(def font-name "Example Font")
-(def font-url "examplefont")
-
-(font-face {:font-family   font-name
-            :src           [{:url    (str font-url ".woff")
-                             :format "woff"}]})
-
-(defkeyframes bounce [bounce-height]
-  {[:from 20 53 80 :to] {:transform "translate3d(0,0,0)"}
-   [40 43]              {:transform (str "translate3d(0,-" bounce-height "px,0)")}
-   70                   {:transform (str "translate3d(0,-" (/ bounce-height 2) "px,0)")}
-   90                   {:transform (str "translate3d(0,-" (/ bounce-height 4) "px,0)")}})
-
-(defstyles wrapper [v-padding]
-  {:padding-top v-padding
-   :padding-bottom v-padding
+          :font "normal 16px sans-serif"
+          :color "#242424"}})
+
+(def btn-bg-colors
+  {:primary "#0052CC"
+   :default "rgba(9, 30, 66, 0.04)"
+   :warning "#FFAB00"
+   :error "#DE350B"})
+
+(def btn-bg-hover-colors
+  {:primary "#0065ff"
+   :default "rgba(9, 30, 66, 0.08)"
+   :warning "#ffc400"
+   :error "#FF5630"})
+
+(def btn-text-colors
+  {:default "#505F79"
+   :primary "#fff"
+   :warning "#172B4D"
+   :error "#fff"})
+
+(defstyled Button :button
+  {:background-color (with-meta btn-bg-colors :kind)
+   :border-radius "3px"
+   :border-width 0
+   :box-sizing "border-box"
+   :max-width "100%"
+   :color (with-meta btn-text-colors :kind)
+   :padding "0 8px"
+   :font-size "inherit"
    :text-align "center"
-   :font "normal 18px Example Font, sans-serif"
-   ::css/media {[:only :screen :and [:max-width "460px"]]
-                {:margin-top (str (* font-size 4) "px")}}})
-
-(def color (r/atom "#856dcf"))
-
-;;; Rum
-(rumss/defstyled RumH1 :h1
-  {:font-size "48px"
-   :color :color
-   :margin-top :v-margin
-   :margin-bottom :v-margin
-   :active? {:font-size "14px"}})
-
-(rum/defcs RumTitle <
-  rum/reactive
-  (rum/local 30 ::state)
-  [{state ::state}]
-  [:div {:class (wrapper "8px")
-         :style {:animation (str (bounce @state) " 1s ease infinite")}
-         :css {:border-bottom (str "1px solid " @color)}
-         :on-click #(swap! state (partial * 2))}
-   (RumH1 {:v-margin "8px"
-           :color (rum/react color)
-           :active? false}
-          "Clojure Style Sheets for Rum")])
-
-;; Reagent
-(rss/defstyled ReagentH1 :h1
-  {:font-size "48px"
-   :color :color
-   :margin-top :v-margin
-   :margin-bottom :v-margin})
-
-(defn ReagentTitle []
-  [:div {:class (wrapper "8px")}
-   [ReagentH1 {:v-margin "8px" :color @color}
-    "Clojure Style Sheets for Reagent"]])
-
-
-;; Om
-(omss/defstyled OmH1 :h1
-  {:font-size "48px"
-   :color :color
-   :margin-top :v-margin
-   :margin-bottom :v-margin})
-
-(defui OmTitle
-  Object
-  (render [this]
-    (dom/div #js {:className (wrapper "8px")}
-      (OmH1 {:v-margin "8px"
-             :color @color}
-            "Clojure Style Sheets for Om"))))
-
-
-
-(rss/defstyled InputField :div
-  {:display "flex"
-   :flex-direction "column"
-   :justify-content "center"
-   :align-items "center"})
-
-(rss/defstyled InputLabel :label
-  {:font "normal 14px sans-serif"})
-
-(rss/defstyled Input :input
-  {:border-radius "2px"
-   :border "1px solid #ccc"
-   :padding (with-meta #(str %1 " " %2) [:padding-v :padding-h])})
-
-(defn App []
-  [InputField
-   [InputLabel "text color"]
-   [Input {:onChange #(reset! color (.. % -target -value))
-           :padding-v "4px"
-           :padding-h "8px"}]])
-
-(defn mount []
-  (rum/mount (RumTitle) (gdom/getElement "rum-app"))
-  (r/render [ReagentTitle] (gdom/getElement "reagent-app"))
-  (om/add-root! (om/reconciler {:state color}) OmTitle (gdom/getElement "om-app"))
-  (r/render [App] (gdom/getElement "app")))
-
-(mount)
+   :vertical-align "middle"
+   :white-space "nowrap"
+   :width "auto"
+   :height "2.2857142857142856em"
+   :line-height "2.2857142857142856em"
+   :transition "background-color 100ms ease-out"
+   :&:hover {:cursor "pointer"
+             :background-color (with-meta btn-bg-hover-colors :kind)}})
+
+(defstyled -Table :div
+  {:display "table"})
+
+(defstyled -TableRow :div
+  {:display "table-row"})
+
+(defstyled -TableCell :div
+  {:display "table-cell"
+   :padding "4px"})
+
+(rum/defc Table [rows]
+  (-Table {}
+    (for [cells rows]
+      (-TableRow {}
+        (for [cell cells]
+          (-TableCell {} cell))))))
+
+(def flex-alignment
+  {:vertical "column"
+   :horizontal "row"})
+
+(defstyled Header :header
+  {:padding "16px"
+   :display "flex"
+   :flex-direction (with-meta flex-alignment :alignment)
+   :align-items :align-content
+   :justify-content :align-content})
+
+(defstyled Logo :img
+  {:width "155px"
+   :height "68px"})
+
+(defstyled H2 :h2
+  {:font-size "18px"
+   :color "#242424"
+   :font-weight 400})
+
+(defstyled H3 :h2
+  {:font-size "16px"
+   :color "#242424"
+   :font-weight 400})
+
+(defstyled -DemoBlock :div
+  {:padding "8px"
+   :border-radius "5px"
+   :border "2px solid #eee"})
+
+(rum/defc DemoBlock [{:keys [title]} child]
+  [:div {:css {:margin "0 0 32px"}}
+   (H3 {} "Buttons")
+   (-DemoBlock {} child)])
+
+(rum/defc ButtonsDemo []
+  (DemoBlock {:title "Buttons"}
+    (Table
+      [[(Button {:kind :default} "Default")]
+       [(Button {:kind :primary} "Primary")]
+       [(Button {:kind :warning} "Warning")]
+       [(Button {:kind :error} "Error")]])))
+
+(rum/defc app []
+  [:div {:css {:padding "32px"
+               :max-width "640px"
+               :margin "0 auto"}}
+   (Header {:align-content "center" :alignment :vertical}
+     (Logo {:src "https://roman01la.github.io/cljss/logo.png"})
+     (H2 {} "Clojure Style Sheets"))
+   (ButtonsDemo)])
+
+(rum/mount (app) (gdom/getElement "app"))