Permalink
Browse files

Very basic setup of Devcards

  • Loading branch information...
jraines committed Nov 4, 2015
1 parent 5319157 commit 77abe9a72b556b86890bd1a8160694a011625d4a
Showing with 41 additions and 2 deletions.
  1. +7 −1 README.md
  2. +10 −1 project.clj
  3. +11 −0 resources/public/cards.html
  4. +12 −0 src/simoutfit/cards.cljs
  5. +1 −0 src/simoutfit/core.cljs
View
@@ -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.
+
+
View
@@ -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"
@@ -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>
View
@@ -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"}))
View
@@ -33,6 +33,7 @@
"Unknown")]
(dom/div nil (str msg ": " desc " -- " sender)))))
+(def hello (om/factory HelloWorld))
(defn transit-post [url]
(fn [edn cb]

0 comments on commit 77abe9a

Please sign in to comment.