Various:

 - BREAKING CHANGE: Updated version to 0.2.2
 - BREAKING CHANGE: Now all component functions should be accessed from re-com.core.
 - Dropped back to CLJS 2843

project.clj

@@ -32,12 +32,12 @@
 
 ;; ---------------------------------------------------------------------------------------
 
-(defproject re-com "0.2.1"
+(defproject re-com "0.2.2"
  :description "Reusable UI components for Reagent"
  :url "https://github.com/Day8/re-com.git"
 
  :dependencies [[org.clojure/clojure "1.6.0"]
- [org.clojure/clojurescript "0.0-3058" scope="provided"]
+ [org.clojure/clojurescript "0.0-2843" scope="provided"]
  ;[stabilized/clojurescript "1.0.0" scope="provided"] ;; TODO: Eventually switch to this one (when it works)
  [org.clojure/core.async "0.1.346.0-17112a-alpha" scope="provided"]
  [reagent "0.5.0-alpha3" scope="provided"]

src/re_com/core.cljs

@@ -0,0 +1,78 @@
+(ns re-com.core
+ (:require [re-com.alert :as alert]
+ [re-com.box :as box]
+ [re-com.buttons :as buttons]
+ [re-com.datepicker :as datepicker]
+ [re-com.dropdown :as dropdown]
+ [re-com.input-time :as input-time]
+ [re-com.layout :as layout]
+ [re-com.misc :as misc]
+ [re-com.modal-panel :as modal-panel]
+ [re-com.popover :as popover]
+ [re-com.selection-list :as selection-list]
+ [re-com.tabs :as tabs]
+ [re-com.text :as text]
+ [re-com.tour :as tour]))
+
+;; -----------------------------------------------------------------------------
+;; re-com public API (see also re-com.util)
+;; -----------------------------------------------------------------------------
+
+(def alert-box alert/alert-box)
+(def alert-list alert/alert-list)
+
+(def h-box box/h-box)
+(def v-box box/v-box)
+(def box box/box)
+(def line box/line)
+(def gap box/gap)
+(def scroller box/scroller)
+(def border box/border)
+
+(def button buttons/button)
+(def md-circle-icon-button buttons/md-circle-icon-button)
+(def md-icon-button buttons/md-icon-button)
+(def info-button buttons/info-button)
+(def row-button buttons/row-button)
+(def hyperlink buttons/hyperlink)
+(def hyperlink-href buttons/hyperlink-href)
+
+(def datepicker datepicker/datepicker)
+(def datepicker-dropdown datepicker/datepicker-dropdown)
+
+(def single-dropdown dropdown/single-dropdown)
+
+(def input-time input-time/input-time)
+
+(def h-layout layout/h-layout)
+(def v-layout layout/v-layout)
+
+(def input-text misc/input-text)
+(def input-textarea misc/input-textarea)
+(def checkbox misc/checkbox)
+(def radio-button misc/radio-button)
+(def slider misc/slider)
+(def progress-bar misc/progress-bar)
+(def spinner misc/spinner)
+
+(def modal-panel modal-panel/modal-panel)
+
+(def popover-content-wrapper popover/popover-content-wrapper)
+(def popover-anchor-wrapper popover/popover-anchor-wrapper)
+(def popover-border popover/popover-border)
+(def popover-tooltip popover/popover-tooltip)
+
+(def selection-list selection-list/selection-list)
+
+(def horizontal-tabs tabs/horizontal-tabs)
+(def horizontal-bar-tabs tabs/horizontal-bar-tabs)
+(def vertical-bar-tabs tabs/vertical-bar-tabs)
+(def horizontal-pill-tabs tabs/horizontal-pill-tabs)
+(def vertical-pill-tabs tabs/vertical-pill-tabs)
+
+(def label text/label)
+(def title text/title)
+
+(def make-tour tour/make-tour)
+(def start-tour tour/start-tour)
+(def make-tour-nav tour/make-tour-nav)

src/re_com/dropdown.cljs

@@ -35,7 +35,7 @@
  (flatten (interleave group-headers groups))))
 
 
-(defn filter-choices
+(defn- filter-choices
  "Filter a list of choices based on a filter string using plain string searches (case insensitive). Less powerful
  than regex's but no confusion with reserved characters"
  [choices filter-text]
@@ -49,7 +49,7 @@
  (filter filter-fn choices)))
 
 
-(defn filter-choices-regex
+(defn- filter-choices-regex
  "Filter a list of choices based on a filter string using regex's (case insensitive). More powerful but can cause
  confusion for users entering reserved characters such as [ ] * + . ( ) etc."
  [choices filter-text]

src/re_com/popover.cljs

@@ -106,7 +106,7 @@
 
 (def backdrop-args (extract-arg-data backdrop-args-desc))
 
-(defn backdrop
+(defn- backdrop
  "Renders a backdrop dive which fills the entire page and responds to clicks on it. Can also specify how tranparent it should be"
  [& {:keys [opacity on-click] :as args}]
  {:pre [(validate-args backdrop-args args "backdrop")]}
@@ -233,7 +233,7 @@
 
 (def popover-title-args (extract-arg-data popover-title-args-desc))
 
-(defn popover-title
+(defn- popover-title
  "Renders a title at the top of a popover with an optional close button on the far right"
  [& {:keys [title showing? close-button? close-callback]
  :as args}]

src/re_com/tour.cljs

@@ -8,9 +8,6 @@
 ;; Component: tour
 ;;
 ;; Strings together
-;;
-;; Notes/todo:
-;; - TBA
 ;;--------------------------------------------------------------------------------------------------
 
 (defn make-tour

src/re_demo/alert_box.cljs

@@ -1,9 +1,9 @@
 (ns re-demo.alert-box
- (:require-macros [re-com.core :refer [defn-meta add-meta]])
- (:require [re-com.box :refer [h-box v-box box line gap]]
- [re-com.text :refer [label]]
- [re-com.alert :refer [alert-box alert-box-args-desc
-  alert-list alert-list-args-desc]]
+ ;(:require-macros [re-com.core :refer [defn-meta add-meta]])
+ (:require [re-com.core :refer [h-box v-box box line gap label alert-box alert-list] :refer-macros [defn-meta add-meta]]
+ [re-com.alert :refer [alert-box-args-desc alert-list-args-desc]]
+ ;[re-com.box :refer [h-box v-box box line gap]]
+ ;[re-com.text :refer [label]]
  [re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]
  [reagent.debug :refer-macros [dbg prn println log dev? warn warn-unless]]
  [reagent.core :as reagent]))

src/re_demo/alert_list.cljs

@@ -1,9 +1,10 @@
 (ns re-demo.alert-list
- (:require [re-com.util :refer [insert-nth remove-id-item]]
- [re-com.text :refer [label title]]
- [re-com.buttons :refer [button]]
- [re-com.box :refer [h-box v-box box line gap]]
- [re-com.alert :refer [alert-box alert-list alert-box-args-desc alert-list-args-desc]]
+ (:require [re-com.core :refer [h-box v-box box line gap label title button alert-box alert-list]]
+ [re-com.alert :refer [alert-box-args-desc alert-list-args-desc]]
+ [re-com.util :refer [insert-nth remove-id-item]]
+ ;[re-com.text :refer [label title]]
+ ;[re-com.buttons :refer [button]]
+ ;[re-com.box :refer [h-box v-box box line gap]]
  [re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]
  [reagent.core :as reagent]))
 

src/re_demo/border.cljs

@@ -1,5 +1,6 @@
 (ns re-demo.border
- (:require [re-com.box :refer [h-box v-box gap border border-args-desc]]
+ (:require [re-com.core :refer [h-box v-box gap border]]
+ [re-com.box :refer [border-args-desc]]
  [re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]))
 
 

src/re_demo/box.cljs

@@ -1,6 +1,7 @@
 (ns re-demo.box
- (:require [re-com.box :refer [h-box v-box box box-args-desc gap]]
- [re-com.buttons :refer [hyperlink-href]]
+ (:require [re-com.core :refer [h-box v-box box gap hyperlink-href]]
+ [re-com.box :refer [box-args-desc]]
+ ;[re-com.buttons :refer [hyperlink-href]]
  [re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]))
 
 

src/re_demo/button.cljs

@@ -1,9 +1,9 @@
 (ns re-demo.button
- (:require-macros [re-com.core :refer [handler-fn]])
- (:require [re-com.text  :refer [label]]
- [re-com.misc :refer [spinner]]
- [re-com.buttons :refer [button button-args-desc]]
- [re-com.box :refer [h-box v-box box gap line]]
+ (:require [re-com.core  :refer [h-box v-box box gap line button label spinner]]
+  [re-com.buttons :refer [button-args-desc]]
+ ;[re-com.text :refer [label]]
+ ;[re-com.misc  :refer [spinner]]
+ ;[re-com.buttons :refer [button button-args-desc]]
  [re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]
  [reagent.core :as reagent]))
 

src/re_demo/checkbox.cljs

@@ -1,7 +1,8 @@
 (ns re-demo.checkbox
- (:require [re-com.text :refer [label]]
- [re-com.misc :refer [checkbox checkbox-args-desc]]
- [re-com.box :refer [h-box v-box box gap line]]
+ (:require [re-com.core :refer [h-box v-box box gap line checkbox label]]
+ [re-com.misc :refer [checkbox-args-desc]]
+ ;[re-com.text :refer [label]]
+ ;[re-com.box :refer [h-box v-box box gap line]]
  [re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]
  [reagent.core :as reagent]))
 
@@ -64,7 +65,8 @@
  :model always-false]
 
  [h-box
- :gap "10px"
+ :gap "10px"
+ :height "20px"
  :children [[checkbox
  :label "tick me "
  :model ticked?
@@ -73,13 +75,13 @@
  (when @ticked? [label :label " is ticked"])]]
 
  [h-box
- :gap "1px"
+ :gap  "1px"
  :children [[checkbox :model all-for-one? :on-change #(reset! all-for-one? %)]
  [checkbox :model all-for-one? :on-change #(reset! all-for-one? %)]
  [checkbox :model all-for-one? :on-change #(reset! all-for-one? %) :label "all for one, and one for all. "]]]
 
  [h-box
- :gap "15px"
+ :gap  "15px"
  :children [[checkbox
  :label "tick this one, to \"disable\""
  :model disabled?
@@ -93,7 +95,7 @@
  :on-change #(reset! something1? %)]]]
 
  [h-box
- :gap "1px"
+ :gap  "1px"
  :children [[checkbox
  :model something2?
  :on-change #(reset! something2? %)]

src/re_demo/core.cljs

@@ -1,14 +1,13 @@
 (ns re-demo.core
- (:require-macros [re-com.core :refer [handler-fn]]
- [cljs.core.async.macros :refer [go]]
+ (:require-macros [cljs.core.async.macros :refer [go]]
  [secretary.core :refer [defroute]])
  (:require [goog.events :as events]
  [reagent.core :as reagent]
  [alandipert.storage-atom :refer [local-storage]]
  [secretary.core :as secretary]
  [re-demo.utils :refer [panel-title re-com-title]]
  [re-com.util :as util]
- [re-com.box  :refer [h-box v-box box gap line scroller border]]
+ [re-com.core :refer [h-box v-box box gap line scroller border] :refer-macros [handler-fn]]
  [re-demo.welcome :as welcome]
  [re-demo.radio-button :as radio-button]
  [re-demo.checkbox :as checkbox]
@@ -223,11 +222,28 @@
  :children [[re-com-title]]])
 
 
-(def selected-tab-id (reagent/atom (:id (first tabs-definition)))) ;; TODO: Avoid this global?
+(def id-store (local-storage (atom nil) ::id-store))
+
+(def selected-tab-id (reagent/atom (if (or (nil? @id-store) (nil? (util/item-for-id @id-store tabs-definition)))
+ (:id (first tabs-definition))
+ @id-store))) ;; id of the selected tab
+
+;; -- Routes and History ------------------------------------------------------
+
+(defroute "/" [] (do (println "defroute - root") (reset! selected-tab-id :welcome)))
+(defroute "/:tab" [tab query-params] (do (println "defroute - tab: '" tab "', query-params:" query-params) (reset! selected-tab-id (keyword tab))))
+(defroute "*" [] (do (println "defroute - UNKNOWN ROUTE")))
+
+(def history (History.))
+(events/listen history EventType/NAVIGATE (fn [e] (secretary/dispatch! (.-token e))))
+(.setEnabled history true)
+
+
+
 
 (defn main
  []
- (let [id-store (local-storage (atom nil) ::id-store) ;; TODO: Want to get local-storage working with secretary!
+ (let [;id-store (local-storage (atom nil) ::id-store) ;; TODO: Want to get local-storage working with secretary!
  ;selected-tab-id (reagent/atom (if (or (nil? @id-store) (nil? (util/item-for-id @id-store tabs-definition)))
  ; (:id (first tabs-definition))
  ; @id-store)) ;; id of the selected tab
@@ -265,17 +281,6 @@
  :child [(:panel (util/item-for-id @selected-tab-id tabs-definition))]]]]]))) ;; the tab panel to show, for the selected tab
 
 
-;; -- Routes and History ------------------------------------------------------
-
-(defroute "/" [] (do (println "defroute - root") (reset! selected-tab-id :welcome)))
-(defroute "/:tab" [tab query-params] (do (println "defroute - tab: '" tab "', query-params:" query-params) (reset! selected-tab-id (keyword tab))))
-(defroute "*" [] (do (println "defroute - UNKNOWN ROUTE")))
-
-(def history (History.))
-(events/listen history EventType/NAVIGATE (fn [e] (secretary/dispatch! (.-token e))))
-(.setEnabled history true)
-
-
 (defn ^:export mount-demo
  []
  (reagent/render [main] (util/get-element-by-id "app"))

src/re_demo/datepicker.cljs

@@ -1,15 +1,16 @@
 (ns re-demo.datepicker
- (:require
- [reagent.core :as r]
- [cljs-time.core :refer [now days minus]]
- [cljs-time.format :refer [formatter unparse]]
- [re-com.text :refer [label title]]
- [re-com.misc :refer [checkbox]]
- [re-com.datepicker :refer [datepicker datepicker-dropdown iso8601->date datepicker-args-desc]]
- [re-com.box :refer [h-box v-box gap]]
- [re-com.dropdown :refer [single-dropdown]]
- [re-com.util :refer [golden-ratio-a golden-ratio-b]]
- [re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]))
+ (:require [reagent.core :as reagent]
+ [cljs-time.core :refer [now days minus]]
+ [cljs-time.format :refer [formatter unparse]]
+ ;[re-com.text :refer [label title]]
+ ;[re-com.misc :refer [checkbox]]
+ ;[re-com.datepicker :refer [datepicker datepicker-dropdown iso8601->date datepicker-args-desc]]
+ ;[re-com.box :refer [h-box v-box gap]]
+ ;[re-com.dropdown :refer [single-dropdown]]
+ [re-com.core :refer [h-box v-box gap single-dropdown datepicker datepicker-dropdown checkbox label title]]
+ [re-com.datepicker :refer [iso8601->date datepicker-args-desc]]
+ [re-com.util :refer [golden-ratio-a golden-ratio-b]]
+ [re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]))
 
 
 (defn- toggle-inclusion!
@@ -78,12 +79,12 @@
 
 (defn- show-variant
  [variation]
- (let [model1 (r/atom (minus (now) (days 3)))
- model2 (r/atom (iso8601->date "20140914"))
- disabled? (r/atom false)
- show-today? (r/atom true)
- show-weeks? (r/atom false)
- enabled-days (r/atom (-> days-map keys set))
+ (let [model1 (reagent/atom (minus (now) (days 3)))
+ model2 (reagent/atom (iso8601->date "20140914"))
+ disabled? (reagent/atom false)
+ show-today? (reagent/atom true)
+ show-weeks? (reagent/atom false)
+ enabled-days (reagent/atom (-> days-map keys set))
  label-style {:font-style "italic" :font-size "smaller" :color "#777"}]
  (case variation
  :inline [(fn
@@ -163,7 +164,7 @@
 
 (defn panel2
  []
- (let [selected-variation (r/atom :inline)]
+ (let [selected-variation (reagent/atom :inline)]
  (fn []
  [v-box
  :size "auto"

src/re_demo/dropdowns.cljs

@@ -1,9 +1,11 @@
 (ns re-demo.dropdowns
- (:require [re-com.util :refer [item-for-id]]
- [re-com.text :refer [label title]]
- [re-com.misc :refer [input-text checkbox]]
- [re-com.box :refer [h-box v-box box gap]]
- [re-com.dropdown :refer [single-dropdown filter-choices-by-keyword single-dropdown-args-desc]]
+ (:require [re-com.core :refer [h-box v-box box gap single-dropdown input-text checkbox label title]]
+ [re-com.dropdown :refer [filter-choices-by-keyword single-dropdown-args-desc]]
+ [re-com.util :refer [item-for-id]]
+ ;[re-com.text :refer [label title]]
+ ;[re-com.misc :refer [input-text checkbox]]
+ ;[re-com.box :refer [h-box v-box box gap]]
+ ;[re-com.dropdown :refer [single-dropdown filter-choices-by-keyword single-dropdown-args-desc]]
  [re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]
  [reagent.core :as reagent]))
 

src/re_demo/gap.cljs

@@ -1,5 +1,6 @@
 (ns re-demo.gap
- (:require [re-com.box :refer [h-box v-box gap gap-args-desc]]
+ (:require [re-com.core :refer [h-box v-box gap]]
+ [re-com.box :refer [gap-args-desc]]
  [re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]))