Skip to content

Commit e8ead1a

Browse files
Gregg8Gregg8
committed
Various:
 - BREAKING CHANGE: Updated version to 2.0.1 - BREAKING CHANGE: Renamed re-com.core to re-com.misc and updated all components. - BREAKING CHANGE: Moved label and title to re-com.text.cljs and updated many components. - POTENTIAL BREAKING CHANGE: Modified the label component to be an inline element (like a [:span]) rather than a block level element (like a [:div]). Main implication is that it plays well within other [labels] and [:span]s. - Upgraded ClojureScript to 0.0-3058. - Made sure all demo tabs have a "Notes" section. - Added "Status: Beta" to all component demo pages. - Major re-org of tabs demo to be more consistent with the others. - Brought tour demo up to scratch with the other ones. - Copied index_dev.html visual changes to index_prod.html. - Update GitHub hyperlinks to point to master branch for prod version and develop branch for dev version. - [STILL IN PROGRESS] Now supports Secretary routes and goog history functionality. - Added lein-s3-static-deploy to allow syncing prod version of demo with an AWS bucket.
1 parent 5784df8 commit e8ead1a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+688
-579
lines changed

‎project.clj

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,17 @@
3232

3333
;; ---------------------------------------------------------------------------------------
3434

35-
(defproject re-com "0.2.0"
35+
(defproject re-com "0.2.1"
3636
:description "Reusable UI components for Reagent"
3737
:url "https://github.com/Day8/re-com.git"
3838

3939
:dependencies [[org.clojure/clojure "1.6.0"]
40-
[org.clojure/clojurescript "0.0-2843" scope="provided"] ;; 2843 => 2913 => 2985
40+
[org.clojure/clojurescript "0.0-3058" scope="provided"]
4141
;[stabilized/clojurescript "1.0.0" scope="provided"] ;; TODO: Eventually switch to this one (when it works)
4242
[org.clojure/core.async "0.1.346.0-17112a-alpha" scope="provided"]
4343
[reagent "0.5.0-alpha3" scope="provided"]
44-
[com.andrewmcveigh/cljs-time "0.3.2" scope="provided"]]
44+
[com.andrewmcveigh/cljs-time "0.3.2" scope="provided"]
45+
[secretary "1.2.1" scope="provided"]]
4546

4647
;:plugins [[lein-unpack-resources "0.1.1"]]
4748
;
@@ -64,6 +65,7 @@
6465
[lein-figwheel "0.2.3-SNAPSHOT"]
6566
[lein-shell "0.4.0"]
6667
[com.cemerick/clojurescript.test "0.3.3"]
68+
[lein-s3-static-deploy "0.1.1-SNAPSHOT"]
6769
[lein-ancient "0.6.2"]]}
6870
:dev-run {:clean-targets ^{:protect false} ["run/resources/public/compiled_dev"]}
6971
:prod-run {:clean-targets ^{:protect false} ["run/resources/public/compiled_prod"]}
@@ -91,7 +93,7 @@
9193
{:id "prod"
9294
:source-paths ["src"]
9395
:compiler {:output-to "run/resources/public/compiled_prod/demo.js"
94-
:source-map "run/resources/public/compiled_prod/demo.js.map"
96+
;:source-map "run/resources/public/compiled_prod/demo.js.map"
9597
:output-dir "run/resources/public/compiled_prod/demo"
9698
:closure-defines {:goog.DEBUG false}
9799
;:source-map-path "js/out" ;; https://github.com/clojure/clojurescript/wiki/Source-maps#web-server-integration
@@ -112,6 +114,11 @@
112114
:server-port ~fig-port
113115
:repl true}
114116

117+
:aws {:access-key ~(System/getenv "AWS_ACCESS_KEY_ID")
118+
:secret-key ~(System/getenv "AWS_SECRET_ACCESS_KEY")
119+
:s3-static-deploy {:bucket "re-demo"
120+
:local-root "run/resources/public"}}
121+
115122
:aliases {;; *** DEMO ***
116123

117124
"run" ["with-profile" "+dev-run" "do"

‎run/resources/public/index_dev.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,6 @@
2020
font-size: 13px;
2121
font-weight: 400;
2222
}
23-
24-
</style>
25-
<style>
2623
.semibold {
2724
font-weight: 500;
2825
}

‎run/resources/public/index_prod.html

Lines changed: 47 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,60 @@
1010
<link rel="stylesheet" href="resources/css/material-design-iconic-font.min.css">
1111

1212
<script src="compiled_prod/demo.js" type="text/javascript"></script>
13-
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
13+
14+
<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet" type="text/css">
15+
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'>
1416
<style>
1517
body {
16-
font-family: 'Roboto', sans-serif;
17-
color: #212121
18+
font-family: "Roboto", sans-serif;
19+
color: #212121;
20+
font-size: 13px;
21+
font-weight: 400;
1822
}
19-
</style>
20-
<style>
21-
.small-caps {
23+
.semibold {
24+
font-weight: 500;
25+
}
26+
.uppercase {
27+
text-transform: uppercase;
28+
}
29+
.all-small-caps {
2230
font-variant: small-caps;
2331
}
32+
33+
/*
34+
http://www.google.com/design/spec/style/typography.html#typography-standard-styles
35+
*/
36+
.display112 {
37+
font-size: 112px;
38+
}
39+
.display56 {
40+
font-size: 56px;
41+
}
42+
.display45 {
43+
font-size: 56px;
44+
}
45+
.display34 {
46+
font-size: 34px;
47+
}
48+
.display24{
49+
font-size: 24px;
50+
}
51+
.display20{
52+
font-size: 20px;
53+
}
54+
.display15{
55+
font-size: 15px;
56+
}
57+
.display15{
58+
font-size: 14px;
59+
}
60+
2461
.nav-item {
2562
width: 150px;
26-
line-height: 44px;
27-
color: #333; // (if selected "#111" "#333");
28-
border-top: 1px #f2f2f2 solid;
29-
// border-right: (if selected "4px #e8e8e8 solid");
30-
border-color: rgba(1, 1, 1, 0.1);
31-
font-family: "Ubuntu";
32-
font-weight: 300;
33-
font-size: 16px;
34-
padding-left: 30px;
63+
line-height: 1.3em;
64+
font-weight: 400;
65+
font-size: 15px;
66+
padding-left: 25px;
3567
background-color: #fcfcfc; // (if (or(= @selected-tab-id (: id tab)) @mouse-over ?) "#f4f4f4" "#fcfcfc")
3668
cursor: default
3769
}

‎src/re_com/input_time.cljs

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
(:require-macros [re-com.core :refer [handler-fn]])
33
(:require
44
[reagent.core :as reagent]
5-
[clojure.string :as cljstring]
65
[re-com.validate :refer [extract-arg-data validate-args css-style? html-attr? number-or-string?]]
7-
[re-com.core :refer [label]]
6+
[re-com.text :refer [label]]
87
[re-com.box :refer [h-box gap]]
98
[re-com.util :refer [pad-zero-number deref-or-value]]))
109

‎src/re_com/core.cljs renamed to ‎src/re_com/misc.cljs

Lines changed: 1 addition & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
(ns re-com.core
1+
(ns re-com.misc
22
(:require-macros [re-com.core :refer [handler-fn]])
33
(:require [re-com.util :refer [deref-or-value px]]
44
[re-com.popover :refer [popover-tooltip]]
@@ -7,38 +7,6 @@
77
[reagent.core :as reagent]))
88

99

10-
;; ------------------------------------------------------------------------------------
11-
;; Component: label
12-
;; ------------------------------------------------------------------------------------
13-
14-
(def label-args-desc
15-
[{:name :label :required true :type "anything" :description "text to display. Can be anything as it will be converted to a string"}
16-
{:name :on-click :required false :type "() -> nil" :validate-fn fn? :description "function to call when label is clicked"}
17-
{:name :width :required false :type "string" :validate-fn string? :description "a CSS width"}
18-
{:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"}
19-
{:name :style :required false :type "css style map" :validate-fn css-style? :description "additional CSS styles"}
20-
{:name :attr :required false :type "html attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}])
21-
22-
(def label-args (extract-arg-data label-args-desc))
23-
24-
(defn label
25-
"Returns markup for a basic label"
26-
[& {:keys [label on-click width class style attr]
27-
:as args}]
28-
{:pre [(validate-args label-args args "label")]}
29-
[box
30-
:width width
31-
:align :start
32-
:child [:span
33-
(merge
34-
{:class (str "rc-label " class)
35-
:style (merge {:flex "none"} style)}
36-
(when on-click
37-
{:on-click (handler-fn (on-click))})
38-
attr)
39-
(str label)]])
40-
41-
4210
;; ------------------------------------------------------------------------------------
4311
;; Component: input-text
4412
;; ------------------------------------------------------------------------------------
@@ -388,34 +356,3 @@
388356
:margin "10px"}}
389357
[:img {:src "resources/img/spinner.gif"
390358
:style {:margin "auto"}}]]])
391-
392-
393-
;; ------------------------------------------------------------------------------------
394-
;; Component: title
395-
;; ------------------------------------------------------------------------------------
396-
397-
;; TODO: Could add proper :h validation
398-
399-
(def title-args-desc
400-
[{:name :label :required true :type "anything" :description "text to display. Can be anything as it will be converted to a string"}
401-
{:name :h :required false :default :h3 :type "keyword" :validate-fn keyword? :description "something like :h3 or :h4"}
402-
{:name :underline? :required false :default true :type "boolean" :description "determines whether an underline is placed under the title"}
403-
{:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"}
404-
{:name :style :required false :type "css style map" :validate-fn css-style? :description "CSS styles to add or override"}
405-
{:name :attr :required false :type "html attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}])
406-
407-
(def title-args (extract-arg-data title-args-desc))
408-
409-
(defn title
410-
"An underlined, left justified, Title. By default :h3"
411-
[& {:keys [label h underline? class style attr]
412-
:or {underline? true h :h3}
413-
:as args}]
414-
{:pre [(validate-args title-args args "title")]}
415-
[v-box
416-
:children [[h (merge {:class (str "rc-title " class)
417-
:style (merge {:display "flex" :flex "none"}
418-
style)}
419-
attr)
420-
label]
421-
(when underline? [line :size "1px"])]])

‎src/re_com/selection_list.cljs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
(ns re-com.selection-list
22
(:require-macros [re-com.core :refer [handler-fn]])
33
(:require
4-
[re-com.core :refer [label checkbox radio-button]]
4+
[re-com.text :refer [label]]
5+
[re-com.misc :refer [checkbox radio-button]]
56
[re-com.box :refer [box border h-box v-box]]
67
[re-com.validate :refer [extract-arg-data validate-args vector-of-maps? string-or-atom? set-or-atom?]]
78
[re-com.util :refer [fmap deref-or-value]]))

‎src/re_com/text.cljs

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
(ns re-com.text
2+
(:require-macros [re-com.core :refer [handler-fn]])
3+
(:require [re-com.box :refer [v-box box line]]
4+
[re-com.validate :refer [extract-arg-data validate-args css-style? html-attr?]]))
5+
6+
7+
;; ------------------------------------------------------------------------------------
8+
;; Component: label
9+
;; ------------------------------------------------------------------------------------
10+
11+
(def label-args-desc
12+
[{:name :label :required true :type "anything" :description "text to display. Can be anything as it will be converted to a string"}
13+
{:name :on-click :required false :type "() -> nil" :validate-fn fn? :description "function to call when label is clicked"}
14+
{:name :width :required false :type "string" :validate-fn string? :description "a CSS width"}
15+
{:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"}
16+
{:name :style :required false :type "css style map" :validate-fn css-style? :description "additional CSS styles"}
17+
{:name :attr :required false :type "html attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}])
18+
19+
(def label-args (extract-arg-data label-args-desc))
20+
21+
(defn label
22+
"Returns markup for a basic label"
23+
[& {:keys [label on-click width class style attr]
24+
:as args}]
25+
{:pre [(validate-args label-args args "label")]}
26+
[box
27+
:width width
28+
:align :start
29+
:style {:display "inline-flex"}
30+
:child [:span
31+
(merge
32+
{:class (str "rc-label " class)
33+
:style (merge {:flex "none"} style)}
34+
(when on-click
35+
{:on-click (handler-fn (on-click))})
36+
attr)
37+
(str label)]])
38+
39+
40+
;; ------------------------------------------------------------------------------------
41+
;; Component: title
42+
;; ------------------------------------------------------------------------------------
43+
44+
;; TODO: Could add proper :h validation
45+
46+
(def title-args-desc
47+
[{:name :label :required true :type "anything" :description "text to display. Can be anything as it will be converted to a string"}
48+
{:name :h :required false :default :h3 :type "keyword" :validate-fn keyword? :description "something like :h3 or :h4"}
49+
{:name :underline? :required false :default true :type "boolean" :description "determines whether an underline is placed under the title"}
50+
{:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"}
51+
{:name :style :required false :type "css style map" :validate-fn css-style? :description "CSS styles to add or override"}
52+
{:name :attr :required false :type "html attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]}])
53+
54+
(def title-args (extract-arg-data title-args-desc))
55+
56+
(defn title
57+
"An underlined, left justified, Title. By default :h3"
58+
[& {:keys [label h underline? class style attr]
59+
:or {underline? true h :h3}
60+
:as args}]
61+
{:pre [(validate-args title-args args "title")]}
62+
[v-box
63+
:children [[h (merge {:class (str "rc-title " class)
64+
:style (merge {:display "flex" :flex "none"}
65+
style)}
66+
attr)
67+
label]
68+
(when underline? [line :size "1px"])]])

‎src/re_demo/alert_box.cljs

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
(ns re-demo.alert-box
22
(:require-macros [re-com.core :refer [defn-meta add-meta]])
33
(:require [re-com.box :refer [h-box v-box box line gap]]
4+
[re-com.text :refer [label]]
45
[re-com.alert :refer [alert-box alert-box-args-desc
56
alert-list alert-list-args-desc]]
6-
[re-demo.utils :refer [panel-title component-title args-table github-hyperlink]]
7+
[re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]
78
[reagent.debug :refer-macros [dbg prn println log dev? warn warn-unless]]
89
[reagent.core :as reagent]))
910

@@ -18,18 +19,19 @@
1819
:gap "10px"
1920
:children [[panel-title [:span "[alert-box ... ]"
2021
[github-hyperlink "Component Source" "src/re_com/alert.cljs"]
21-
[github-hyperlink "Page Source" "src/re_demo/alert_box.cljs"]]]
22+
[github-hyperlink "Page Source" "src/re_demo/alert_box.cljs"]
23+
[status-text "Beta"]]]
2224

2325
[h-box
2426
:gap "50px"
2527
:children [[v-box
2628
:gap "10px"
2729
:width "450px"
28-
:children [#_[component-title "Notes"]
29-
#_[label :label "A component which renders a single alert-box."]
30+
:children [[component-title "Notes"]
31+
[label :label "A component which renders a single alert-box."]
3032
[args-table alert-box-args-desc]]]
3133
[v-box
32-
:width "500px"
34+
:width "600px"
3335
:gap "10px"
3436
:children [[component-title "Demo"]
3537
(if @show-alert

‎src/re_demo/alert_list.cljs

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
(ns re-demo.alert-list
22
(:require [re-com.util :refer [insert-nth remove-id-item]]
3-
[re-com.core :refer [label title]]
3+
[re-com.text :refer [label title]]
44
[re-com.buttons :refer [button]]
55
[re-com.box :refer [h-box v-box box line gap]]
66
[re-com.alert :refer [alert-box alert-list alert-box-args-desc alert-list-args-desc]]
7-
[re-demo.utils :refer [panel-title component-title args-table github-hyperlink]]
7+
[re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]
88
[reagent.core :as reagent]))
99

1010

@@ -28,7 +28,8 @@
2828
:gap "10px"
2929
:children [[panel-title [:span "[alert-list ... ]"
3030
[github-hyperlink "Component Source" "src/re_com/alert.cljs"]
31-
[github-hyperlink "Page Source" "src/re_demo/alert_list.cljs"]]]
31+
[github-hyperlink "Page Source" "src/re_demo/alert_list.cljs"]
32+
[status-text "Beta"]]]
3233
[h-box
3334
:gap "50px"
3435
:children [[v-box
@@ -38,7 +39,7 @@
3839
[label :label "Renders a dynamic list of alert-boxes vertically. New alerts are added at the top."]
3940
[args-table alert-list-args-desc]]]
4041
[v-box
41-
:width "500px"
42+
:width "600px"
4243
:gap "10px"
4344
:children [[component-title "Demo"]
4445
[:p "To insert alerts at the top of the list, click "

‎src/re_demo/border.cljs

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
(ns re-demo.border
22
(:require [re-com.box :refer [h-box v-box gap border border-args-desc]]
3-
[re-demo.utils :refer [panel-title component-title args-table github-hyperlink]]))
3+
[re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]))
44

55

66
(defn panel
@@ -10,7 +10,8 @@
1010
:gap "10px"
1111
:children [[panel-title [:span "[border ... ]"
1212
[github-hyperlink "Component Source" "src/re_com/box.cljs"]
13-
[github-hyperlink "Page Source" "src/re_demo/border.cljs"]]]
13+
[github-hyperlink "Page Source" "src/re_demo/border.cljs"]
14+
[status-text "Beta"]]]
1415

1516
[h-box
1617
:gap "50px"

0 commit comments

Comments
 (0)