commit bc47be1f94409bf2f905f3fd50118860cf846684 Author: gered Date: Thu Jun 16 13:34:47 2016 -0400 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..278bb6d --- /dev/null +++ b/.gitignore @@ -0,0 +1,17 @@ +.DS_Store +/target +/classes +/checkouts +pom.xml +pom.xml.asc +*.jar +*.class +/.lein-* +/.nrepl-port +.settings/ +.project +.classpath +.idea/ +*.iml +*.ipr +*.iws diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..0781dfc --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 Gered King + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..e7b96c1 --- /dev/null +++ b/README.md @@ -0,0 +1,55 @@ +# webtools.reagent + +Various helper functions and other things specifically for use in +ClojureScript/Reagent applications. + +Includes ready to use Reagent component adapter definitions for React +components from the following libraries: + +* [React-Bootstrap][1] +* [React-Bootstrap-DateTimePicker][2] +* [React-Select][3] + +[1]: https://react-bootstrap.github.io/ +[2]: https://github.com/quri/react-bootstrap-datetimepicker +[3]: https://github.com/JedWatson/react-select + +> Please note that this library is mainly intended for my own personal +> use and as such some functionality may be overly opinionated. + +## Leiningen + +```clojure +[gered/webtools.reagent "0.1"] +``` + +## React/Bootstrap Library Components CSS + +The React/Bootstrap components provided by the libraries used by +webtools.reagent each have their own associated CSS stylesheet which +will need to be included in your application if you use these +components. + +#### React-Bootstrap + +Just the standard [Bootstrap CSS stylesheet][4] (plus optional theme): + +[4]: http://getbootstrap.com/getting-started/#download-cdn + + https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css + https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css + +#### React-Bootstrap-DateTimePicker + + https://npmcdn.com/react-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css + +#### React-Select + + https://npmcdn.com/react-select/dist/react-select.min.css + + +## License + +Copyright © 2016 Gered King + +Distributed under the the MIT License. See LICENSE for more details. diff --git a/project.clj b/project.clj new file mode 100644 index 0000000..71b4d7a --- /dev/null +++ b/project.clj @@ -0,0 +1,22 @@ +(defproject gered/webtools.reagent "0.1" + :description "Various helper functions and other things specifically for use in ClojureScript/Reagent applications." + :url "https://github.com/gered/webtools.reagent" + :license {:name "MIT License" + :url "http://opensource.org/licenses/MIT"} + + :dependencies [[cljsjs/bootstrap "3.3.6-0"] + [cljsjs/react-bootstrap "0.29.2-0"] + [cljsjs/react-bootstrap-datetimepicker "0.0.22-0" :exclusions [org.webjars.bower/jquery]] + [cljsjs/react-select "1.0.0-beta13-0"] + [hiccup "1.0.5"]] + + :plugins [[lein-cljsbuild "1.1.3"]] + + :profiles {:provided + {:dependencies [[org.clojure/clojure "1.8.0"] + [org.clojure/clojurescript "1.8.51"] + [reagent "0.6.0-alpha2"]]}} + + :cljsbuild {:builds + {:main + {:source-paths ["src"]}}}) diff --git a/src/webtools/reagent/bootstrap.cljs b/src/webtools/reagent/bootstrap.cljs new file mode 100644 index 0000000..0172051 --- /dev/null +++ b/src/webtools/reagent/bootstrap.cljs @@ -0,0 +1,133 @@ +(ns webtools.reagent.bootstrap + (:require + [reagent.core :as r] + cljsjs.react-bootstrap + cljsjs.react-bootstrap-datetimepicker + cljsjs.react-select)) + +;;; +;;; REACT-BOOTSTRAP ELEMENTS +;;; + +(def Button (r/adapt-react-class js/ReactBootstrap.Button)) +(def ButtonGroup (r/adapt-react-class js/ReactBootstrap.ButtonGroup)) +(def ButtonToolbar (r/adapt-react-class js/ReactBootstrap.ButtonToolbar)) +(def DropdownButton (r/adapt-react-class js/ReactBootstrap.DropdownButton)) +(def SplitButton (r/adapt-react-class js/ReactBootstrap.SplitButton)) +(def MenuItem (r/adapt-react-class js/ReactBootstrap.MenuItem)) + +(def Modal (r/adapt-react-class js/ReactBootstrap.Modal)) +(def Modal.Dialog (r/adapt-react-class js/ReactBootstrap.Modal.Dialog)) +(def Modal.Header (r/adapt-react-class js/ReactBootstrap.Modal.Header)) +(def Modal.Title (r/adapt-react-class js/ReactBootstrap.Modal.Title)) +(def Modal.Body (r/adapt-react-class js/ReactBootstrap.Modal.Body)) +(def Modal.Footer (r/adapt-react-class js/ReactBootstrap.Modal.Footer)) + +(def OverlayTrigger (r/adapt-react-class js/ReactBootstrap.OverlayTrigger)) +(def Popover (r/adapt-react-class js/ReactBootstrap.Popover)) +(def Tooltip (r/adapt-react-class js/ReactBootstrap.Tooltip)) + +(def Nav (r/adapt-react-class js/ReactBootstrap.Nav)) +(def NavItem (r/adapt-react-class js/ReactBootstrap.NavItem)) +(def NavDropdown (r/adapt-react-class js/ReactBootstrap.NavDropdown)) + +(def Navbar (r/adapt-react-class js/ReactBootstrap.Navbar)) +(def Navbar.Header (r/adapt-react-class js/ReactBootstrap.Navbar.Header)) +(def Navbar.Brand (r/adapt-react-class js/ReactBootstrap.Navbar.Brand)) +(def Navbar.Toggle (r/adapt-react-class js/ReactBootstrap.Navbar.Toggle)) +(def Navbar.Collapse (r/adapt-react-class js/ReactBootstrap.Navbar.Collapse)) +(def Navbar.Form (r/adapt-react-class js/ReactBootstrap.Navbar.Form)) +(def Navbar.Text (r/adapt-react-class js/ReactBootstrap.Navbar.Text)) + +(def Breadcrumb (r/adapt-react-class js/ReactBootstrap.Breadcrumb)) +(def Breadcrumb.Item (r/adapt-react-class js/ReactBootstrap.Breadcrumb.Item)) + +(def Tabs (r/adapt-react-class js/ReactBootstrap.Tabs)) +(def Tab (r/adapt-react-class js/ReactBootstrap.Tab)) +(def Tab.Container (r/adapt-react-class js/ReactBootstrap.Tab.Container)) +(def Tab.Pane (r/adapt-react-class js/ReactBootstrap.Tab.Pane)) + +(def Pagination (r/adapt-react-class js/ReactBootstrap.Pagination)) +(def Pager (r/adapt-react-class js/ReactBootstrap.Pager)) +(def PageItem (r/adapt-react-class js/ReactBootstrap.PageItem)) + +(def Grid (r/adapt-react-class js/ReactBootstrap.Grid)) +(def Row (r/adapt-react-class js/ReactBootstrap.Row)) +(def Col (r/adapt-react-class js/ReactBootstrap.Col)) + +(def Jumbotron (r/adapt-react-class js/ReactBootstrap.Jumbotron)) + +(def PageHeader (r/adapt-react-class js/ReactBootstrap.PageHeader)) + +(def ListGroup (r/adapt-react-class js/ReactBootstrap.ListGroup)) +(def ListGroupItem (r/adapt-react-class js/ReactBootstrap.ListGroupItem)) + +(def Table (r/adapt-react-class js/ReactBootstrap.Table)) + +(def Panel (r/adapt-react-class js/ReactBootstrap.Panel)) +(def PanelGroup (r/adapt-react-class js/ReactBootstrap.PanelGroup)) +(def Accordion (r/adapt-react-class js/ReactBootstrap.Accordion)) + +(def Well (r/adapt-react-class js/ReactBootstrap.Well)) + +(def Form (r/adapt-react-class js/ReactBootstrap.Form)) +(def FormGroup (r/adapt-react-class js/ReactBootstrap.FormGroup)) +(def FormControl (r/adapt-react-class js/ReactBootstrap.FormControl)) +(def FormControl.Feedback (r/adapt-react-class js/ReactBootstrap.FormControl.Feedback)) +(def FormControl.Static (r/adapt-react-class js/ReactBootstrap.FormControl.Static)) +(def ControlLabel (r/adapt-react-class js/ReactBootstrap.ControlLabel)) +(def HelpBlock (r/adapt-react-class js/ReactBootstrap.HelpBlock)) +(def Checkbox (r/adapt-react-class js/ReactBootstrap.Checkbox)) +(def Radio (r/adapt-react-class js/ReactBootstrap.Radio)) +(def InputGroup (r/adapt-react-class js/ReactBootstrap.InputGroup)) +(def InputGroup.Addon (r/adapt-react-class js/ReactBootstrap.InputGroup.Addon)) +(def InputGroup.Button (r/adapt-react-class js/ReactBootstrap.InputGroup.Button)) + +(def Image (r/adapt-react-class js/ReactBootstrap.Image)) +(def Thumbnail (r/adapt-react-class js/ReactBootstrap.Thumbnail)) + +(def ResponsiveEmbed (r/adapt-react-class js/ReactBootstrap.ResponsiveEmbed)) + +(def Carousel (r/adapt-react-class js/ReactBootstrap.Carousel)) +(def Carousel.Item (r/adapt-react-class js/ReactBootstrap.Carousel.Item)) +(def Carousel.Caption (r/adapt-react-class js/ReactBootstrap.Carousel.Caption)) + +(def Media (r/adapt-react-class js/ReactBootstrap.Media)) +(def Media.Body (r/adapt-react-class js/ReactBootstrap.Media.Body)) +(def Media.Left (r/adapt-react-class js/ReactBootstrap.Media.Left)) +(def Media.Right (r/adapt-react-class js/ReactBootstrap.Media.Right)) +(def Media.Heading (r/adapt-react-class js/ReactBootstrap.Media.Heading)) +(def Media.List (r/adapt-react-class js/ReactBootstrap.Media.List)) +(def Media.ListItem (r/adapt-react-class js/ReactBootstrap.Media.ListItem)) + +(def Glyphicon (r/adapt-react-class js/ReactBootstrap.Glyphicon)) + +(def Label (r/adapt-react-class js/ReactBootstrap.Label)) + +(def Badge (r/adapt-react-class js/ReactBootstrap.Badge)) + +(def Alert (r/adapt-react-class js/ReactBootstrap.Alert)) + +(def ProgressBar (r/adapt-react-class js/ReactBootstrap.ProgressBar)) + +(def Collapse (r/adapt-react-class js/ReactBootstrap.Collapse)) +(def Fade (r/adapt-react-class js/ReactBootstrap.Fade)) + +(def Clearfix (r/adapt-react-class js/ReactBootstrap.Clearfix)) + + + +;;; +;;; REACT-BOOTSTRAP-DATETIMEPICKER ELEMENTS +;;; + +(def DateTimeField (r/adapt-react-class js/ReactBootstrapDatetimepicker)) + + + +;;; +;;; REACT-SELECT ELEMENTS +;;; + +(def Select (r/adapt-react-class js/Select)) +(def Select.Async (r/adapt-react-class js/Select.Async)) diff --git a/src/webtools/reagent/page.clj b/src/webtools/reagent/page.clj new file mode 100644 index 0000000..1436874 --- /dev/null +++ b/src/webtools/reagent/page.clj @@ -0,0 +1,19 @@ +(ns webtools.reagent.page + (:require + [hiccup.page :refer [include-css]])) + +(defn include-bootstrap-metatags + [] + (list + [:meta {:charset "utf-8"}] + [:meta {:http-equiv "X-UA-Compatible" :content "IE=edge"}] + [:meta {:name "viewport" :content "width=device-width, initial-scale=1"}])) + +(defn include-bootstrap-css + [& [use-bootstrap-theme?]] + (->> ["https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" + (if use-bootstrap-theme? "https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css") + "https://npmcdn.com/react-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" + "https://npmcdn.com/react-select/dist/react-select.min.css"] + (remove nil?) + (apply include-css)))