Skip to content

Commit

Permalink
Various:
Browse files Browse the repository at this point in the history
 - 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.
  • Loading branch information
Gregg8 committed Mar 10, 2015
1 parent 5784df8 commit e8ead1a
Show file tree
Hide file tree
Showing 43 changed files with 688 additions and 579 deletions.
15 changes: 11 additions & 4 deletions project.clj
Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,17 @@

;; ---------------------------------------------------------------------------------------

(defproject re-com "0.2.0"
(defproject re-com "0.2.1"
: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-2843" scope="provided"] ;; 2843 => 2913 => 2985
[org.clojure/clojurescript "0.0-3058" 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"]
[com.andrewmcveigh/cljs-time "0.3.2" scope="provided"]]
[com.andrewmcveigh/cljs-time "0.3.2" scope="provided"]
[secretary "1.2.1" scope="provided"]]

;:plugins [[lein-unpack-resources "0.1.1"]]
;
Expand All @@ -64,6 +65,7 @@
[lein-figwheel "0.2.3-SNAPSHOT"]
[lein-shell "0.4.0"]
[com.cemerick/clojurescript.test "0.3.3"]
[lein-s3-static-deploy "0.1.1-SNAPSHOT"]
[lein-ancient "0.6.2"]]}
:dev-run {:clean-targets ^{:protect false} ["run/resources/public/compiled_dev"]}
:prod-run {:clean-targets ^{:protect false} ["run/resources/public/compiled_prod"]}
Expand Down Expand Up @@ -91,7 +93,7 @@
{:id "prod"
:source-paths ["src"]
:compiler {:output-to "run/resources/public/compiled_prod/demo.js"
:source-map "run/resources/public/compiled_prod/demo.js.map"
;:source-map "run/resources/public/compiled_prod/demo.js.map"
:output-dir "run/resources/public/compiled_prod/demo"
:closure-defines {:goog.DEBUG false}
;:source-map-path "js/out" ;; https://github.com/clojure/clojurescript/wiki/Source-maps#web-server-integration
Expand All @@ -112,6 +114,11 @@
:server-port ~fig-port
:repl true}

:aws {:access-key ~(System/getenv "AWS_ACCESS_KEY_ID")
:secret-key ~(System/getenv "AWS_SECRET_ACCESS_KEY")
:s3-static-deploy {:bucket "re-demo"
:local-root "run/resources/public"}}

:aliases {;; *** DEMO ***

"run" ["with-profile" "+dev-run" "do"
Expand Down
3 changes: 0 additions & 3 deletions run/resources/public/index_dev.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,6 @@
font-size: 13px;
font-weight: 400;
}

</style>
<style>
.semibold {
font-weight: 500;
}
Expand Down
62 changes: 47 additions & 15 deletions run/resources/public/index_prod.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,60 @@
<link rel="stylesheet" href="resources/css/material-design-iconic-font.min.css">

<script src="compiled_prod/demo.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Roboto', sans-serif;
color: #212121
font-family: "Roboto", sans-serif;
color: #212121;
font-size: 13px;
font-weight: 400;
}
</style>
<style>
.small-caps {
.semibold {
font-weight: 500;
}
.uppercase {
text-transform: uppercase;
}
.all-small-caps {
font-variant: small-caps;
}

/*
http://www.google.com/design/spec/style/typography.html#typography-standard-styles
*/
.display112 {
font-size: 112px;
}
.display56 {
font-size: 56px;
}
.display45 {
font-size: 56px;
}
.display34 {
font-size: 34px;
}
.display24{
font-size: 24px;
}
.display20{
font-size: 20px;
}
.display15{
font-size: 15px;
}
.display15{
font-size: 14px;
}

.nav-item {
width: 150px;
line-height: 44px;
color: #333; // (if selected "#111" "#333");
border-top: 1px #f2f2f2 solid;
// border-right: (if selected "4px #e8e8e8 solid");
border-color: rgba(1, 1, 1, 0.1);
font-family: "Ubuntu";
font-weight: 300;
font-size: 16px;
padding-left: 30px;
line-height: 1.3em;
font-weight: 400;
font-size: 15px;
padding-left: 25px;
background-color: #fcfcfc; // (if (or(= @selected-tab-id (: id tab)) @mouse-over ?) "#f4f4f4" "#fcfcfc")
cursor: default
}
Expand Down
3 changes: 1 addition & 2 deletions src/re_com/input_time.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@
(:require-macros [re-com.core :refer [handler-fn]])
(:require
[reagent.core :as reagent]
[clojure.string :as cljstring]
[re-com.validate :refer [extract-arg-data validate-args css-style? html-attr? number-or-string?]]
[re-com.core :refer [label]]
[re-com.text :refer [label]]
[re-com.box :refer [h-box gap]]
[re-com.util :refer [pad-zero-number deref-or-value]]))

Expand Down
65 changes: 1 addition & 64 deletions src/re_com/core.cljs → src/re_com/misc.cljs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
(ns re-com.core
(ns re-com.misc
(:require-macros [re-com.core :refer [handler-fn]])
(:require [re-com.util :refer [deref-or-value px]]
[re-com.popover :refer [popover-tooltip]]
Expand All @@ -7,38 +7,6 @@
[reagent.core :as reagent]))


;; ------------------------------------------------------------------------------------
;; Component: label
;; ------------------------------------------------------------------------------------

(def label-args-desc
[{:name :label :required true :type "anything" :description "text to display. Can be anything as it will be converted to a string"}
{:name :on-click :required false :type "() -> nil" :validate-fn fn? :description "function to call when label is clicked"}
{:name :width :required false :type "string" :validate-fn string? :description "a CSS width"}
{:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"}
{:name :style :required false :type "css style map" :validate-fn css-style? :description "additional CSS styles"}
{: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"]}])

(def label-args (extract-arg-data label-args-desc))

(defn label
"Returns markup for a basic label"
[& {:keys [label on-click width class style attr]
:as args}]
{:pre [(validate-args label-args args "label")]}
[box
:width width
:align :start
:child [:span
(merge
{:class (str "rc-label " class)
:style (merge {:flex "none"} style)}
(when on-click
{:on-click (handler-fn (on-click))})
attr)
(str label)]])


;; ------------------------------------------------------------------------------------
;; Component: input-text
;; ------------------------------------------------------------------------------------
Expand Down Expand Up @@ -388,34 +356,3 @@
:margin "10px"}}
[:img {:src "resources/img/spinner.gif"
:style {:margin "auto"}}]]])


;; ------------------------------------------------------------------------------------
;; Component: title
;; ------------------------------------------------------------------------------------

;; TODO: Could add proper :h validation

(def title-args-desc
[{:name :label :required true :type "anything" :description "text to display. Can be anything as it will be converted to a string"}
{:name :h :required false :default :h3 :type "keyword" :validate-fn keyword? :description "something like :h3 or :h4"}
{:name :underline? :required false :default true :type "boolean" :description "determines whether an underline is placed under the title"}
{:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"}
{:name :style :required false :type "css style map" :validate-fn css-style? :description "CSS styles to add or override"}
{: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"]}])

(def title-args (extract-arg-data title-args-desc))

(defn title
"An underlined, left justified, Title. By default :h3"
[& {:keys [label h underline? class style attr]
:or {underline? true h :h3}
:as args}]
{:pre [(validate-args title-args args "title")]}
[v-box
:children [[h (merge {:class (str "rc-title " class)
:style (merge {:display "flex" :flex "none"}
style)}
attr)
label]
(when underline? [line :size "1px"])]])
3 changes: 2 additions & 1 deletion src/re_com/selection_list.cljs
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
(ns re-com.selection-list
(:require-macros [re-com.core :refer [handler-fn]])
(:require
[re-com.core :refer [label checkbox radio-button]]
[re-com.text :refer [label]]
[re-com.misc :refer [checkbox radio-button]]
[re-com.box :refer [box border h-box v-box]]
[re-com.validate :refer [extract-arg-data validate-args vector-of-maps? string-or-atom? set-or-atom?]]
[re-com.util :refer [fmap deref-or-value]]))
Expand Down
68 changes: 68 additions & 0 deletions src/re_com/text.cljs
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
(ns re-com.text
(:require-macros [re-com.core :refer [handler-fn]])
(:require [re-com.box :refer [v-box box line]]
[re-com.validate :refer [extract-arg-data validate-args css-style? html-attr?]]))


;; ------------------------------------------------------------------------------------
;; Component: label
;; ------------------------------------------------------------------------------------

(def label-args-desc
[{:name :label :required true :type "anything" :description "text to display. Can be anything as it will be converted to a string"}
{:name :on-click :required false :type "() -> nil" :validate-fn fn? :description "function to call when label is clicked"}
{:name :width :required false :type "string" :validate-fn string? :description "a CSS width"}
{:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"}
{:name :style :required false :type "css style map" :validate-fn css-style? :description "additional CSS styles"}
{: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"]}])

(def label-args (extract-arg-data label-args-desc))

(defn label
"Returns markup for a basic label"
[& {:keys [label on-click width class style attr]
:as args}]
{:pre [(validate-args label-args args "label")]}
[box
:width width
:align :start
:style {:display "inline-flex"}
:child [:span
(merge
{:class (str "rc-label " class)
:style (merge {:flex "none"} style)}
(when on-click
{:on-click (handler-fn (on-click))})
attr)
(str label)]])


;; ------------------------------------------------------------------------------------
;; Component: title
;; ------------------------------------------------------------------------------------

;; TODO: Could add proper :h validation

(def title-args-desc
[{:name :label :required true :type "anything" :description "text to display. Can be anything as it will be converted to a string"}
{:name :h :required false :default :h3 :type "keyword" :validate-fn keyword? :description "something like :h3 or :h4"}
{:name :underline? :required false :default true :type "boolean" :description "determines whether an underline is placed under the title"}
{:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"}
{:name :style :required false :type "css style map" :validate-fn css-style? :description "CSS styles to add or override"}
{: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"]}])

(def title-args (extract-arg-data title-args-desc))

(defn title
"An underlined, left justified, Title. By default :h3"
[& {:keys [label h underline? class style attr]
:or {underline? true h :h3}
:as args}]
{:pre [(validate-args title-args args "title")]}
[v-box
:children [[h (merge {:class (str "rc-title " class)
:style (merge {:display "flex" :flex "none"}
style)}
attr)
label]
(when underline? [line :size "1px"])]])
12 changes: 7 additions & 5 deletions src/re_demo/alert_box.cljs
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
(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]]
[re-demo.utils :refer [panel-title component-title args-table github-hyperlink]]
[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]))

Expand All @@ -18,18 +19,19 @@
:gap "10px"
:children [[panel-title [:span "[alert-box ... ]"
[github-hyperlink "Component Source" "src/re_com/alert.cljs"]
[github-hyperlink "Page Source" "src/re_demo/alert_box.cljs"]]]
[github-hyperlink "Page Source" "src/re_demo/alert_box.cljs"]
[status-text "Beta"]]]

[h-box
:gap "50px"
:children [[v-box
:gap "10px"
:width "450px"
:children [#_[component-title "Notes"]
#_[label :label "A component which renders a single alert-box."]
:children [[component-title "Notes"]
[label :label "A component which renders a single alert-box."]
[args-table alert-box-args-desc]]]
[v-box
:width "500px"
:width "600px"
:gap "10px"
:children [[component-title "Demo"]
(if @show-alert
Expand Down
9 changes: 5 additions & 4 deletions src/re_demo/alert_list.cljs
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
(ns re-demo.alert-list
(:require [re-com.util :refer [insert-nth remove-id-item]]
[re-com.core :refer [label title]]
[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]]
[re-demo.utils :refer [panel-title component-title args-table github-hyperlink]]
[re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]
[reagent.core :as reagent]))


Expand All @@ -28,7 +28,8 @@
:gap "10px"
:children [[panel-title [:span "[alert-list ... ]"
[github-hyperlink "Component Source" "src/re_com/alert.cljs"]
[github-hyperlink "Page Source" "src/re_demo/alert_list.cljs"]]]
[github-hyperlink "Page Source" "src/re_demo/alert_list.cljs"]
[status-text "Beta"]]]
[h-box
:gap "50px"
:children [[v-box
Expand All @@ -38,7 +39,7 @@
[label :label "Renders a dynamic list of alert-boxes vertically. New alerts are added at the top."]
[args-table alert-list-args-desc]]]
[v-box
:width "500px"
:width "600px"
:gap "10px"
:children [[component-title "Demo"]
[:p "To insert alerts at the top of the list, click "
Expand Down
5 changes: 3 additions & 2 deletions src/re_demo/border.cljs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
(ns re-demo.border
(:require [re-com.box :refer [h-box v-box gap border border-args-desc]]
[re-demo.utils :refer [panel-title component-title args-table github-hyperlink]]))
[re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text]]))


(defn panel
Expand All @@ -10,7 +10,8 @@
:gap "10px"
:children [[panel-title [:span "[border ... ]"
[github-hyperlink "Component Source" "src/re_com/box.cljs"]
[github-hyperlink "Page Source" "src/re_demo/border.cljs"]]]
[github-hyperlink "Page Source" "src/re_demo/border.cljs"]
[status-text "Beta"]]]

[h-box
:gap "50px"
Expand Down
Loading

0 comments on commit e8ead1a

Please sign in to comment.