davewm / reagent-material-ui

Material UI component wrappers for reagent

Reagent Material UI

A reagent wrapper for Material UI components.

Thanks to the maintainers of reagent-material, which I basically copied and turned into a package. Thanks also to om-material-ui for providing the build process for the material ui javascript.

Usage

Just add [reagent-material-ui "0.2.5"] to your project.clj, then require the components like so:

(ns your-project.example
    (:require [reagent-material-ui.core :refer [AppBar Card]]))

You can then use the Material UI components as you would normal reagent components. See the Material UI docs for more info about the different components.

A simple example

The following assumes you've included the font icon css in your project based on the instructions here.

(ns my.project
  (:require [reagent-material-ui.core :as ui]))

;; some helpers
(def el reagent/as-element)
(defn icon [nme] [ui/FontIcon {:className "material-icons"} nme])
(defn color [nme] (aget ui/colors nme))

;; create a new theme based on the dark theme from Material UI
(defonce theme-defaults {:muiTheme (ui/getMuiTheme
                                    (-> ui/darkBaseTheme
                                        (js->clj :keywordize-keys true)
                                        (update :palette merge {:primary1Color (color "amber500")
                                                                :primary2Color (color "amber700")})
                                        clj->js))})

(defn simple-nav []
  (let [is-open? (atom false)
        close #(reset! is-open? false)]
    (fn []
      [:div
       [ui/AppBar {:title "yipgo" :onLeftIconButtonTouchTap #(reset! is-open? true)}]
       [ui/Drawer {:open @is-open? :docked false}
        [ui/List
         [ui/ListItem {:leftIcon (el [:i.material-icons "home"])
                       :on-click (fn []
                                   (accountant/navigate! "/")
                                   (close))}
          "Home"]
         [ui/Divider]
         (for [[doc details] @(rf/subscribe [:docs.list.by-name])]
           ^{:key doc} [ui/ListItem {:secondaryText "Something something"
                                     :rightIconButton (el [ui/IconMenu {:iconButtonElement (el [ui/IconButton {:touch true} [icon "more_vert"]])}
                                                           [ui/MenuItem "Delete"]])
                                     :onTouchTap (fn []
                                                   ;; some action or another, then close the menu
                                                   (close))}
                        doc])]
        [new-doc-modal close]]])))

(defn home-page []
  [ui/MuiThemeProvider theme-defaults
   [:div
    [simple-nav]
    [:div
     [:h2 "Welcome to a simple, example application."]]]])

reagent-material-ui's Issues

Something is missing

I just dropped this package on my project and tried to use tabs only to find:

material-ui.inc.js:925 Warning: Failed context type: The context `muiTheme` is marked as required in `Tabs`, but its value is `undefined`.
    in Tabs
    in div
    in configurator.core.main_panel

So, it looks like something is missing (at least, the documentation on how to get muiTheme). I cannot find anything related to CSS in this or the cljsjs package.

Minimal example usage?

Hi, I am trying to use the library but the lack of initial information makes it quite challenging.

Could you share a minimum example? Simple page with AppBar or Card?

At the moment I am stuck with:

react.inc.js:18472 Uncaught Error: Invariant Violation: AppBar.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

With the following cljs:

(ns haba-dq.core
  (:require
   [reagent.core :as r]
   [reagent-material-ui.core :as mui :refer [AppBar Card Slider]]))

;; enable cljs to print to the JS console of the browser
(enable-console-print!)

(defn haba-dq-app []
  [AppBar])


(defn ^:export main []
  (r/render [haba-dq-app]
            (js/document.getElementById "app")))


;; initialize the HTML page in unobtrusive way
(set! (.-onload js/window) main)

Mui not exported?

Hey there. I'm trying to consume your exposed namespace, but for some reason I'm unable to to so. Looking here:

(def MuiThemeProvider (-> js/MaterialUIStyles
                          (aget "MuiThemeProvider")
                          (reagent.core/adapt-react-class)))

I would expect MuiThemeProvider to be available if I were to (require [reagent-material-ui.core :as mui]). I just cannot seem to find it, however. I've been digging around this repo as well as https://github.com/cljsjs/packages/tree/master/material-ui trying to figure out who is pulling in what.

Perhaps the issue is related to a silly mistake I'm making elsewhere... It looks like material-ui has its own React (per that build dependency), so I make sure to add [reagent "0.6.0-alpha" :exclusions [cljsjs/react]]. However, this leads to issues when bootstrapping reagent: Asset failed - React... which does not make sense to me. I'm trying to figure out if this is a separate issue or a red herring. Any suggestions would be much appreciated.

Utterly Stumped

Hey man. So I'm trying to get this going in my project and I'm confused as to what's going on. Here's a quick run down:

I generated a new project using the luminus template:

$ lein new luminus myapp +cljs +postgres +sassc

I then included your jar in my project.clj

:dependencies
  ...[snipped for brevity]...
  [reagent-material-ui "0.2.0-SNAPSHOT"]]

In the /src/cljs/myapp/core.cljs I then added the reagent-material-ui requirement:

(ns myapp.core
  (:require [reagent.core :as r]
    ...[snipped for brevity]...
    [reagent-material-ui.core :as mui])

Finally, I modified the myapp.core/home-page function to simply try and load up the AppBar

(defn home-page []
  [mui/AppBar {:title "Golden Fart Nuggets Inc." :zDepth 0}])

I figured "hey, that should be an easy launch point" and then I can start buggering around with these sweet looking Material UI React components. However, when I fire up the app (doing a lein run from the terminal) I get the following in the browser console:

react.inc.js:18472 Uncaught Error: Invariant Violation: AppBar.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

It's been a while since I've hacked anything up because I've been travelling for a few months, but is there anything else I need to do that's not listed in the README? I've also tried brining in the material.js file via a script tag, though that didn't help at all either. I'm very confused - can you help point me in the right direction?

Thanks.

No AppCanvas

Hey man. I noticed that your macros.clj doesn't include AppCanvas. Is it deprecated? Just wondering why it was left behind; I still see lots of [old] examples that use it and am confused as to whether or not it's still required.

add the react-tap-event-plugin for the Tap error?

As mentioned in material ui here, I had problem with Tabs component. Can you suggest a workaround, (noob in cljs) how I could load it from nodejs/require ... and how to load it before render?

Dialog(modal) does not work on electron

I can't make the Dialog component to work on electron. What I'm missing?Do I need to configure electron?