Adds devcards

Open `http://localhost:9500/cards.html` to get the devcards UI. Thanks to @bhauman and @dpsutton for sorting me out.
rgm · Oct 30, 2018 · c149aae · c149aae
1 parent a7ae568
commit c149aae
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 2 deletions.
diff --git a/.joker b/.joker
@@ -0,0 +1,4 @@
+{:known-macros [devcards.core/defcard-rg
+                devcards.core/defcard]
+ :ignored-unused-namespaces [reagent.core
+                             sample.core]}
diff --git a/README.md b/README.md
@@ -14,6 +14,8 @@ Running figwheel:
   - `make dev`
   - wait for repl to start
   -`(go)` will start nrepl and figwheel
+  - if figwheel doesn't open a browser page itself, head to http://localhost:9500
+    (or http://localhost:9500/cards.html for the devcards UI)
   - (alternate: just `clojure -A:figwheel` if you don't care about nrepl)
 
 (see https://figwheel.org/docs/vim.html for nrepl/piggieback tips)

diff --git a/TODO.taskp b/TODO.taskp
@@ -1,10 +1,10 @@
-- devcards
 - new cider nrepl
 - unit tests
 - property tests
 - ring et al.
 
 Archive:
+	- devcards @done(2018-10-29)
 	- figure out NREPL/piggieback with vim @done(2018-10-29)
 	- reframe @done(2018-09-12)
 	- adds more react, leaflet, vega @done(2018-09-17)

diff --git a/config/dev.cljs.edn b/config/dev.cljs.edn
@@ -1,7 +1,9 @@
-^{:css-dirs ["resources/public/css"]}
+^{:css-dirs ["resources/public/css"]
+  :extra-main-files {:devcards {:main sample.devcards-runner}}}
 {:main sample.core
  :closure-defines {"re_frame.trace.trace_enabled_QMARK_" true
                    goog.DEBUG true}
+ :devcards true ;; nb: defcard no-ops without this set
  :preloads [day8.re-frame-10x.preload
             devtools.preload]
  :infer-externs true

diff --git a/deps.edn b/deps.edn
@@ -8,6 +8,8 @@
         binaryage/devtools {:mvn/version "0.9.10"}
         cider/cider-nrepl {:mvn/version "0.18.0"}
         cider/piggieback {:mvn/version "0.3.9"}
+        devcards {:mvn/version "0.2.6"
+                  :exclusions [cljsjs/react cljsjs/react-dom]}
         com.bhauman/figwheel-main {:mvn/version "0.1.9"}
         com.bhauman/rebel-readline {:mvn/version "0.1.4"}
         com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}

diff --git a/resources/public/cards.html b/resources/public/cards.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>sample - devcards</title>
+    <link rel="stylesheet" href="css/semantic.css"/>
+    <link rel="stylesheet" href="css/leaflet.css"/>
+    <link rel="stylesheet" href="css/leaflet.draw.css"/>
+    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
+    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
+    <style id="_stylefy-constant-styles_"></style>
+    <style id="_stylefy-styles_"></style>
+  </head>
+  <body>
+    <script src="cljs-out/dev-main-devcards.js"></script>
+  </body>
+</html>
+
diff --git a/src/cljs/sample/core.cljs b/src/cljs/sample/core.cljs
@@ -2,6 +2,7 @@
   (:require
     [cljs.pprint :as pp]
     [cljs.spec.alpha :as s]
+    [devcards.core :refer [defcard-rg]]
     [expound.alpha :as expound]
     [re-frame.core :as re-frame]
     [reagent.core :as reagent]
@@ -52,6 +53,13 @@
   [check-spec]
   (fn [db [_ _]] (update db :click-count inc)))
 
+(defcard-rg another-button
+  "** some markdown documentation **"
+  (fn [data-atom owner]
+    [:> sui/Button "a button"])
+  {:some "initial data"}
+  {:inspect-data true})
+
 (defn layout-ui
   []
   (let [current-count (re-frame/subscribe [:subs/current-count-english])]

diff --git a/src/cljs/sample/devcards_runner.cljs b/src/cljs/sample/devcards_runner.cljs
@@ -0,0 +1,7 @@
+(ns sample.devcards-runner
+  (:require [sample.core]
+            [devcards.core]
+            [reagent.core]))
+
+(devcards.core/start-devcard-ui!)
+