feature: setup devcards

- requires shims (marked and create-react-class) - and bhauman/devcards#156 - see https://shadow-cljs.github.io/docs/UsersGuide.html#cljsjs closes #6
athensresearch · Apr 28, 2020 · a2fcd63 · a2fcd63
1 parent 70948af
commit a2fcd63
Show file tree

Hide file tree

Showing 9 changed files with 1,964 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 /out/
-/resources/public/js/compiled/
+/resources/public/js/
 /target/
 /*-init.clj
 /*.log

diff --git a/package.json b/package.json
@@ -8,7 +8,9 @@
     "shadow-cljs": "2.8.83"
   },
   "dependencies": {
+    "create-react-class": "^15.6.3",
     "highlight.js": "9.15.10",
+    "marked": "^1.0.0",
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-highlight.js": "1.0.7"

diff --git a/project.clj b/project.clj
@@ -24,6 +24,7 @@
                  [day8.re-frame/async-flow-fx "0.1.0"]
                  [metosin/reitit "0.4.2"]
                  [instaparse "1.4.10"]
+                 [devcards "0.2.6"]
                  ]
 
   :plugins [
@@ -42,6 +43,8 @@
 
   :aliases {"dev"          ["with-profile" "dev" "do"
                             ["run" "-m" "shadow.cljs.devtools.cli" "watch" "app"]]
+            "devcards"     ["with-profile" "dev" "do"
+                            ["run" "-m" "shadow.cljs.devtools.cli" "watch" "devcards"]]
             "prod"         ["with-profile" "prod" "do"
                             ["run" "-m" "shadow.cljs.devtools.cli" "release" "app"]]
             "build-report" ["with-profile" "prod" "do"

diff --git a/resources/public/cards.html b/resources/public/cards.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Athens Cards</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="js/devcards/main.js"></script>
+  </body>
+</html>
diff --git a/shadow-cljs.edn b/shadow-cljs.edn
@@ -1,7 +1,5 @@
 {:lein   true
- :nrepl {:port 8777
-         ;:init-ns athens.core
-         }
+ :nrepl {:port 8777}
  :builds {:app {:target          :browser
                 :output-dir      "resources/public/js/compiled"
                 :asset-path      "/js/compiled"
@@ -13,9 +11,13 @@
                                                      day8.re-frame.tracing.trace-enabled? true}}}
                 :devtools        {:http-root    "resources/public"
                                   :http-port    3000
-                                  :repl-init-ns athens.core
-                                  ;; :repl-pprint true
-                                  }}
+                                  :repl-init-ns athens.core}}
+          :devcards         {:asset-path "js/devcards"
+                             :modules {:main {:init-fn athens.devcards/main}}
+                             :compiler-options {:devcards true}
+                             :output-dir "resources/public/js/devcards"
+                             :target :browser}
+
           :karma-test {:target :karma
                        :ns-regexp "-test$"
                        :output-to "target/karma-test.js"}}}
diff --git a/src/cljs/athens/devcards.cljs b/src/cljs/athens/devcards.cljs
@@ -0,0 +1,53 @@
+(ns athens.devcards
+  (:require
+    [cljsjs.react]
+    [cljsjs.react.dom]
+    [reagent.core :as r :include-macros true]
+    [devcards.core :as devcards :include-macros true :refer [defcard]]))
+
+(def bmi-data (r/atom {:height 180 :weight 80}))
+
+(defn calc-bmi [bmi-data]
+  (let [{:keys [height weight bmi] :as data} bmi-data
+        h (/ height 100)]
+    (if (nil? bmi)
+      (assoc data :bmi (/ weight (* h h)))
+      (assoc data :weight (* bmi h h)))))
+
+(defn slider [bmi-data param value min max]
+  [:input {:type "range" :value value :min min :max max
+           :style {:width "100%"}
+           :on-change (fn [e]
+                        (swap! bmi-data assoc param (.. e -target -value))
+                        (when (not= param :bmi)
+                          (swap! bmi-data assoc :bmi nil)))}])
+
+(defn bmi-component [bmi-data]
+  (let [{:keys [weight height bmi]} (calc-bmi @bmi-data)
+        [color diagnose] (cond
+                           (< bmi 18.5) ["orange" "underweight"]
+                           (< bmi 25) ["inherit" "normal"]
+                           (< bmi 30) ["orange" "overweight"]
+                           :else ["red" "obese"])]
+    [:div
+     [:h3 "BM calculator"]
+     [:div
+      "Height: " (int height) "cm"
+      [slider bmi-data :height height 100 220]]
+     [:div
+      "Weight: " (int weight) "kg"
+      [slider bmi-data :weight weight 30 150]]
+     [:div
+      "BMI: " (int bmi) " "
+      [:span {:style {:color color}} diagnose]
+      [slider bmi-data :bmi bmi 10 50]]]))
+
+(defcard bmi-calculator
+         "*Code taken from the Reagent readme.*"
+         (devcards/reagent bmi-component)
+         bmi-data
+         {:inspect-data true
+          :frame true
+          :history true})
+
+(defn ^:export main [] (devcards.core/start-devcard-ui!))
diff --git a/src/cljsjs/create_react_class.cljs b/src/cljsjs/create_react_class.cljs
@@ -0,0 +1,7 @@
+(ns cljsjs.create-react-class
+  (:require
+    ["react" :as react]
+    ["create-react-class" :as create-react-class]))
+
+(js/goog.object.set react "createClass" create-react-class)
+(js/goog.exportSymbol "createReactClass" create-react-class)
diff --git a/src/cljsjs/marked.cljs b/src/cljsjs/marked.cljs
@@ -0,0 +1,4 @@
+(ns cljsjs.marked
+  (:require ["marked" :as marked]))
+
+(js/goog.exportSymbol "marked" marked)