arttuka / reagent-material-ui

Reagent wrapper for MUI (formerly Material UI) v5

reagent-material-ui

reagent-material-ui is a Reagent wrapper for MUI (formerly Material UI) v5.

The purpose of this library is to help ClojureScript/Reagent developers use a modern React UI library without the hassle that Reagent/React interop usually is. It is meant to be comprehensive and up to date.

Usage

If you aren't familiar with MUI or its documentation yet, that is the best place to start. Their examples are very good. and this library tries to follow the original ideas as well as possible. See the example project for a simple usage example.

To add MUI to an existing Reagent project, just add this library to your dependencies:

[arttuka/reagent-material-ui "5.11.12-0"]

Most of the library is in the form of regular Reagent components. Each component is contained in a namespace that mirrors MUI's modules. For example, @mui/material/IconButton becomes reagent-mui.material.icon-button/icon-button and @mui/icons-material/Menu becomes reagent-mui.icons.menu/menu.

Namespace reagent-mui.components contains a copy of each component from @mui/material for ease of use.

Namespace reagent-mui.colors contains all color definitions from @mui/material/colors. The colors are organized in a single namespace, so @mui/material/colors/red becomes reagent-mui.colors/red.

Namespace reagent-mui.styles contains helper functions and components from @mui/material/styles.

Namespace reagent-mui.jss-styles contains helper functions and components from @mui/styles.

Namespace reagent-mui.core contains all components from @mui/core.

MUI Lab

This library also includes components from MUI Lab.

Namespace reagent-mui.lab contains all components from @mui/lab.

MUI X Pro

This library also includes components from MUI X. Namespace reagent-mui.x contains those components.

MUI X components are only supported in projects with NPM dependencies. They can't be used in projects with CLJSJS sources.

Namespace reagent-mui.cljs-time-adapter contains an adapter that lets you use the date pickers with cljs-time (goog.date) date objects. reagent-mui.x.localization-provider accepts this adapter as its date-adapter property. The locale prop must be an instance of goog.i18n.DateTimeSymbols. The default locale is used if no locale prop is given. See the example project for a usage example.

If you want to use another date library, you can use adapters from @mui/x-date-pickers.

Using npm dependencies with Figwheel Main

To use npm dependencies with Figwheel Main, you need to exclude prebuilt JS files (React from CLJSJS and MUI from this library). To do so, add these exclusions to your dependency. See the example project for working configuration.

[arttuka/reagent-material-ui "5.11.12-0" :exclusions [arttuka/reagent-material-ui-js]]

MUI component names with shadow-cljs

The compiler used by shadow-cljs will remove local function names, causing most MUI component to show as Anonymous in React Devtools. If you want to keep the names, add :js-options {:anon-fn-naming-policy :unmapped} to your build in shadow-cljs.edn.

React 18

Reagent v1.2.0 has experimental support for React 18. This library works with Reagent 1.2.0 / React 18. See example project.

Common pitfalls in Reagent/React interop

• Some components want to have a React node as a prop. A Reagent component is not good enough and will just result in errors about invalid React nodes. reagent.core/as-element can turn a Reagent component into a React node.
• React hooks can't be used in most Reagent components. More information.
• Higher order React components can only deal with components that take all their parameters (including children) in a single map.
• MUI X DatePickers accept a renderInput prop. Rendering a Reagent element causes problems with cursor positioning. You should instead render a React element with react/createElement. See this issue.

For more information, check out Reagent's interop guide.

Development

Bug reports, pull requests and ideas for improvement are very welcome. No external services are needed for getting the library up and running.

Tests

Run tests on the command line with npm run test, or in the browser with npm run test:browser. The browser test runner will start at localhost:9500.

The build process also includes lein cljfmt.

Version numbers

The project follows MUI's version numbering.

• Current @mui/material version: 5.11.12
• Current @mui/icons-material version: 5.11.11
• Current @mui/lab version: 5.0.0-alpha.122
• Current @mui/x-date-pickers version: 6.0.0

License

This project is licensed under the Eclipse Public License 2.0.

Parts of example project are copyright (c) 2013-2017 Dan Holmsand and Reagent contributors, used under the terms of the MIT License. Material UI Icons are copyright (c) Material UI contributors, used under the terms of the MIT License.

reagent-material-ui's Issues

Icons should be in a single namespace

For the love of god, please add icons in a single namespace.

how to add third/fourth ... color to palette?

thanks.
(def theme-yellow-green
{:palette {:primary colors/yellow
:secondary colors/green}})

(def theme-blue-red
{:palette {:primary colors/blue
:secondary colors/red}})

want to

(def theme-color
{:palette {:primary colors/yellow
:secondary colors/green
:third colors/blue
:fourth colors/red}})

Switch could not be found

I used [reagent-mui.material.switch :refer [switch]]
And that is the message from compilation
The required namespace "reagent-mui.material.switch" is not available

other components as button, toggle-button... works correctly

material-ui-utils could not be found within the project or in these directories: node_modules

Donating to project

I am very thankful for this library, and I am interested in donating monthly to help sponsor this project or keep it going somehow. But I do not see any links for this.

Would you be open to accepting donations for this project?

Thank you

React does not recognize the `nodeRef` prop on a DOM element.

I ran into this problem and wasn't sure where to document the fix.

When using collapse , or anything that uses collapse (like step-content), you receive the error:

React does not recognize the `nodeRef` prop on a DOM element.

To remove the error, one must pass a custom component to collapse.

(def node-ref-fix
  (reagent.core/reactify-component
   (fn [props]
     [:div (dissoc props :nodeRef)
      (:children props)])))

(defn my-collapse []
 [collapse {:component node-ref-fix ...}
  ...])

For step-content you can pass node-ref-fix to :TransitionProps

[step-content {:TransitionProps {:component node-ref-fix}} ...]

I think this is a problem with reagent interop (not the library itself), so I am not sure if this library would like to handle this use case automatically. I see in

reagent-material-ui/src/core/reagent_material_ui/core/text_field.cljs

Line 18 in 633f330

(def ^:private input

that a similar issue is handled for text-field.

Date-range-picker

Hey, is there any option to create an example of how date-range-picker is used? At the moment I'm getting back only the error message:

npm error: Could not resolve dependency: peer react@"^16.8.4"

Just started using reagent-material-ui, and got the following npm errors.

❯ clj -M:shadow-cljs watch app

running: npm install --save --save-exact @material-ui/[email protected] @material-ui/[email protected] @material-ui/[email protected] [email protected] [email protected]
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
npm ERR!   node_modules/@material-ui/core
npm ERR!     @material-ui/core@"4.11.2" from the root project
npm ERR!     peer @material-ui/core@"^4.0.0" from @material-ui/[email protected]
npm ERR!     node_modules/@material-ui/pickers
npm ERR!       @material-ui/pickers@"3.2.10" from the root project
npm ERR!   1 more (react-dom)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.4" from @material-ui/[email protected]
npm ERR! node_modules/@material-ui/pickers
npm ERR!   @material-ui/pickers@"3.2.10" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

deps.edn:

{:deps {reagent/reagent {:mvn/version "1.0.0"}
        reagent-utils/reagent-utils {:mvn/version "0.3.3"}
        arttuka/reagent-material-ui {:mvn/version "4.11.2-0"}}

Running:

npm install --save --save-exact --legacy-peer-deps @material-ui/[email protected] @material-ui/[email protected] @material-ui/[email protected] [email protected] [email protected]

made the errors disappear. So maybe it's fixed.
Is there a cleaner troubleshooting-fu to solve the issue?

Bad transformation by `create-theme`

The create-theme takes theme objects as a Clojure map. It converts those to a JS object, then applies MUI createTheme function, and converts back to a Clojure map. In this final conversion it is transforming JS keys such as backgroundColor, to background-color, which is actually not supported by Emotion and raises errors at the browser console: "Using kebab-case for css properties in objects is not supported."

Adding autocomplete

Hi,

first of all thanks for this project, it's proven to be very useful.

Do you think there is a chance a component like Autocomplete can be added?

There are some problems with example after upgrading shadow-cljs

This might be not a problem of reagent-material-ui but I would like to report it here as a reference if you don't mind )

After updating shadow-cljs dependency (to the 2.15.1) in example's project.json file rendering stops working and spits a lot of exceptions to the console:

How can I use light colors?

I am sorry if I oversaw some part of the documentation, or should have more experience with Clojure/Clojurescript, I am a complete newbie.

Currently I am trying to define a custom color theme and to access color hues like "primary.light"

Defining the theme and acessing the "main" color works (using styles/create-theme)

`(def light-theme
{:palette {
:mode "light"
:primary {
:main "#5ee0c1"
:light "#c15ee0"
}
}
})

 [button
  {:variant "contained"
   :size "small"
   :href (rfe/href ::mail-list)
   :color "primary"
   }
  "Mail List"
  ]

`

But if I try to use the light variant it's not working and my DOM is empty.

Not working:
[button {:variant "contained" :size "small" :href (rfe/href ::mail-list) :color "primary.light" } "Mail List" ]
Any pointers or help would be appreciated.

Pure shadow-cljs / npm without CLJSJS?

This looks like an exciting project. But I don't understand what's up with the requirement for thheller/shadow-cljsjs and the wrapper in /example/src/shadow-cljs/example/main.cljs.

My project already includes react and react-dom via shadow-cljs / npm. Is the cljsjs stuff the only way to make it work?

Thanks!

`[date-time-picker]` totally crashes

For some reason I get a whole bunch of errors because certain modules from MUI fail to load. In particular Button and DateTimePicker. I can't tell if it's a shadow-cljs problem, a material-ui problem, or a problem with the library.
Using shadow cljs with the example project works fine on my machine.

Here is my project where I'm encountering the issue.
https://github.com/wildwestrom/accounting-app/tree/material-ui-next

@oxr463, could this be related to #21?

ES6 & release simple compile as shadow-cljs

Hi, I want to compile :es6 :simple to the example template at shadow-cljs.
My project is so set es6 & simple and I don't use webpack. What should I do?
Thanks

Defective behavior of `date-picker` when deleting

I am experiencing some unexpected cursor jumps when deleting a date-picker using the backspace key. This happens when date-picker is created with the property:

                 :render-input (react-component [props]
                                 [text-field props])

as in this example.

The cursor behaves correctly with the property:

       :renderInput (fn [params]
                      (r/as-element
                        [mui/text-field (js->clj params)]))

Why is this?

ModalManager breaks advanced compilation when required

reagent-mui.material.modal-manager breaks advanced compilation when required. And since it's required by reagent-mui.components, requiring this ns also breaks.

After compiling with figwheel.main using advanced optimizations and bundling with webpack, it throws a runtime error saying "Component must not be nil". I couldn't find the ModalManager component in the mui source code, and the doc link in reagent-mui.material.modal-manager gives a 404 so I guess they have removed it?

Link to repo with minimal project demonstrating bug:
https://github.com/2food/mui-modal-manager-bug/tree/master

Thank you

Just a quick thank you for this library, it really takes the pain out of Reagent/React interop, when using Material-UI

For interest, my work-in-progress hobby project making use of reagent-material-ui can be seen here:

Demo: https://wkok.github.io/re-frame-buy2let/demo
Source: https://wkok.github.io/re-frame-buy2let/

Keep up the good work!

Icons with multiple paths cause `unique "key" prop` error

Icons that have more than one path element cause the following error message:

Warning: Each child in a list should have a unique "key" prop.

I modified the example project to reproduce the error here: jhacksworth@f5a1ef9

and run it with shadow-cljs by:

1. Changing to the example directory
2. npm install
3. npm run watch

Screenshot:

The zoom-in icon has two path elements (two calls to the e macro) and causes the error message:

reagent-material-ui/src/icons/reagent_mui/icons/zoom_in.cljs

Line 8 in 8754c2e

(def zoom-in (create-svg-icon [(e "path" #js {"d" "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"}) (e "path" #js {"d" "M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"})]

The face icon, which only has one path element, does not cause an error message:

reagent-material-ui/src/icons/reagent_mui/icons/face.cljs

Line 8 in 8754c2e

(def face (create-svg-icon (e "path" #js {"d" "M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"})

It looks like 2044 out of 8875 icons have multiple paths in src/icons/reagent_mui/icons/

Thanks for creating this library, it's been a pleasure to use!

Support for DataGrid and DataGridPro, and other MUI X pro components

Is there support for pro components such as data-grid and date-range-picker in this library?