Very basic setup of Devcards

jraines · Nov 4, 2015 · 77abe9a · 77abe9a
1 parent 5319157
commit 77abe9a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -114,6 +114,12 @@ I also added `ring-reload` so I didn't have to restart the server on each change
 
 ##Devcards
 
-Devcards is a tool that allows for interactive development of UI components in isolations. You can view them at different states at the same time, compare different edge cases (long text, blank values, etc) without constantly having to replicate that in your main app.  It has a host of other capabilities as well, but we'll just cover the basic setup.
+[Devcards](https://github.com/bhauman/devcards) is a tool that allows for interactive development of UI components in isolations. You can view them at different states at the same time, compare different edge cases (long text, blank values, etc) without constantly having to replicate that in your main app.  It has a host of other capabilities as well.
+
+It has great documentation, so I'll refer you there, and to this commit that got me set up in the most basic way.  Note that to get real benefits, you'll need to do some setup and/or mocking of your Om parsers, reconciler, and possibly server so you can test your components in all their states.
+
+The one thing I missed, due to a lack of understanding about Leiningen & cljsbuild, was that I needed to do `lein figwheel devcards` to start it up, rather than `lein figwheel`, which uses your `:dev` build profile.
+
+
 
 
diff --git a/project.clj b/project.clj
@@ -15,6 +15,7 @@
                  [com.cognitect/transit-clj "0.8.285"]
                  [com.cognitect/transit-cljs "0.8.225"]
                  [figwheel "0.5.0-SNAPSHOT"]
+                 [devcards "0.2.0-8"]
                  [figwheel-sidecar "0.5.0-SNAPSHOT"]
                  [org.clojure/core.async "0.1.346.0-17112a-alpha"]]
 
@@ -46,7 +47,15 @@
               :compiler {:output-to "resources/public/js/compiled/simoutfit.js"
                          :main simoutfit.core
                          :optimizations :advanced
-                         :pretty-print false}}]}
+                         :pretty-print false}}
+             {:id "devcards"
+              :source-paths ["src"]
+              :figwheel { :devcards true } ;; <- note this
+              :compiler { :main    simoutfit.cards
+                         :asset-path "js/compiled/devcards_out"
+                         :output-to  "resources/public/js/compiled/simoutfit_devcards.js"
+                         :output-dir "resources/public/js/compiled/devcards_out"
+                         :source-map-timestamp true }}]}
 
   :figwheel {
              ;; :http-server-root "public" ;; default and assumes "resources" 

diff --git a/resources/public/cards.html b/resources/public/cards.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta charset="UTF-8">
+    <link href="/css/example.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <script src="/js/compiled/simoutfit_devcards.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/src/simoutfit/cards.cljs b/src/simoutfit/cards.cljs
@@ -0,0 +1,12 @@
+(ns simoutfit.cards
+  (:require
+   [goog.dom :as gdom]
+   [om.next :as om :refer-macros [defui]]
+   [simoutfit.core :as so :refer [hello]]
+   [om.dom :as dom])
+  (:require-macros
+   [devcards.core :refer [defcard]]))
+
+(defcard simple-component
+  "Test"
+  (hello {:message "Hello" :description "This is a basic component" :sender "Jeremy"}))
diff --git a/src/simoutfit/core.cljs b/src/simoutfit/core.cljs
@@ -33,6 +33,7 @@
                          "Unknown")]
             (dom/div nil (str msg ": " desc " -- " sender)))))
 
+(def hello (om/factory HelloWorld))
 
 (defn transit-post [url]
   (fn [edn cb]