cfnz / muirwik Goto Github PK
View Code? Open in Web Editor NEWMuirwik - a Material UI React wrapper written in Kotlin
License: Mozilla Public License 2.0
Muirwik - a Material UI React wrapper written in Kotlin
License: Mozilla Public License 2.0
Muirwik currently wraps Material UI v3.0.1. V3.0.2 has recently been released.
Upgrade to this version adding properties to components as required.
I've noticed that there is no binding for the ExpansionPanel component (along with ExpansionPanelDetails, etc.) in muirwik.
I needed to use it, so i implemented it in my fork, however I'm not sure if I should create PR, because:
mExpansionPanel { attrs.expanded.doSomething() // Will fail }
,If you find that ok, I will be happy to create a PR.
MFormControlMargin.none is default by Material-UI, not MFormControlMargin.normal
see official docs
@cfnz Please add current version to maven repository. Your library is cool!
I get no compile-time errors, but a runtime one in the browser console:
TypeError: e.child_2usv9w$ is not a function
cr Base.kt:50
vc Icon.kt:40
gt kotlin-wrappers-kotlin-react-jsLegacy.js:250
sr Base.kt:22
mg.mExpansionPanel_2s8yu5$/< ExpansionPanel.kt:35
cr Base.kt:49
mExpansionPanel_2s8yu5$ ExpansionPanel.kt:30
gt Player.kt:124
sr Base.kt:22
fg.mPaper_1l6flt$/< Paper.kt:41
cr Base.kt:49
mPaper_1l6flt$ Paper.kt:35
render_ss14n$ Player.kt:70
render kotlin-wrappers-kotlin-react-jsLegacy.js:220
j kotlin-wrappers-kotlin-react-jsLegacy.js:140
render kotlin-wrappers-kotlin-react-jsLegacy.js:225
React 12
render_2955dm$ kotlin-wrappers-kotlin-react-dom-jsLegacy.js:145
Lt main.kt:8
<anonymous> web.js:53
<anonymous> web.js:53
Webpack 7
react-dom.production.min.js:209:194
Uncaught TypeError: e.child_2usv9w$ is not a function
cr Base.kt:50
vc Icon.kt:40
gt kotlin-wrappers-kotlin-react-jsLegacy.js:250
sr Base.kt:22
mg.mExpansionPanel_2s8yu5$/< ExpansionPanel.kt:35
cr Base.kt:49
mExpansionPanel_2s8yu5$ ExpansionPanel.kt:30
gt Player.kt:124
sr Base.kt:22
fg.mPaper_1l6flt$/< Paper.kt:41
cr Base.kt:49
mPaper_1l6flt$ Paper.kt:35
render_ss14n$ Player.kt:70
render kotlin-wrappers-kotlin-react-jsLegacy.js:220
j kotlin-wrappers-kotlin-react-jsLegacy.js:140
render kotlin-wrappers-kotlin-react-jsLegacy.js:225
React 12
render_2955dm$ kotlin-wrappers-kotlin-react-dom-jsLegacy.js:145
Lt main.kt:8
<anonymous> web.js:53
<anonymous> web.js:53
Webpack 7
Base.kt:50:27
See my working branch: https://github.com/krzema12/fsynth/commits/1.4.0 (just bumping Kotlin to 1.4.0 and React wrappers to pre.112 is truly meaningful there and enough to reproduce).
I compared if Kotlin JS and Kotlin-React work fine if there's no Muirwik (using my custom Material UI wrappers), and they do. See https://github.com/krzema12/fsynth/commits/1.4.0-without-muirwik
I tried to track down what's the problem, but I failed. Source maps don't load in my browser which is also weird. I only managed to find out that not using Muirwik makes the app work fine on 1.4.0.
Could you check it out?
Thanks,
Piotr
Are there any plans for localization support?
I wanted to pass a locale to the createMuiTheme
function but it doesn't have args parameter.
Maybe there is a workaround to do this?
The Autocomplete Component would be a useful addition:
https://material-ui.com/components/autocomplete/
I'm in the middle of replacing my custom Material UI typings/wrappers in my pet project (https://github.com/krzema12/fsynth), and noticed several problems with using icons:
<head>
section of their HTML: <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
. Without it, icons are replaced with their names cropped to the button's size. This approach is problematic because:mIcon
and mIconButton
are just strings. It's not clear what naming convention is used (it's e.g. play_arrow
, not PlayArrow
as presented on Material UI website). It's also prone to typos.I recommend making the usage of icons more type-safe and self-contained. Adding implementation(npm("@material-ui/icons", "4.9.1"))
may still be needed, but at least we can get rid of including the font. There's an alternative way of using icons, without fonts: as regular components. See e.g. https://github.com/krzema12/fsynth/blob/master/web/src/main/kotlin/it/krzeminski/fsynth/typings/materialui/icons/PlayArrowIcon.kt.
I'm keen to prepare some pull request in my spare time. If you have any thoughts on this, let's discuss it :)
Hi! I try to customize padding on mGridItem, but I can't. Think, there is no way doing this from Kotlin code, cause default MuiGrid style's has a major priority and code like this change nothing
mGridItem {
css{paddingRight = 0.spacingUnits}
attrs.xs = MGridSize.cells7
}
Hi,
are you generally open to wrapping more components from the Lab? I see that e.g. Alert is in muirwik.
In particular, I'm interested in https://material-ui.com/components/timeline/. I can send a PR that adds support for it, I just wanted to ensure it's OK with you :) In theory experimental components can have less stable APIs.
Hello,
I have a react kotlin project with npm for dependencies and build.
Normally, i install dependencies like this
npm i @jetbrains/kotlin-styled
npm run gen-idea-libs
However, i have not set up gradle and don't know how to do it.
How can i add this great library? Any help is appreciated.
Table's size will allows TableCells to inherit size of the Table
is this released somewhere? if so how to import it as a gradle dependency?
Muirwik currently wraps Material UI V3.0.2. Material UI is moving rapidly with the latest release at time of writing being 3.1.1.
Upgrade to this version (or later if a new version is released before this issue is finished) adding properties to components as required.
Recent commits have bumped versions from 3.4.0 to 3.9.1 but have not added any new fields and fixed any depreciation warnings.
Need to properly move to 3.9.1
Hi cfnz! I find no other way to contact you than creating an issue on your muirwik project. I might be able to help you in making this Kotlin wrapper for Material UI. I'm currently using Javascript (create-react-app) and Material-UI at work, but are looking for opportunities to possibly convert to using Kotlin. I've from before create frontend apps with Kotlin from ground up. But I believe that the be able to succeed with Kotlin JS, there is a need for wrappers the most useful UI libraries, like Material UI, Highcharts, Mapbox, etc.
How is going with mapping mui to Kotlin? Any challenges?
Is muirwik deployed as a NPM dependency?
Regards,
Jørund
While we have the Drawer component, it is not "swipeable". Need to wrap the SwipeableDrawer component.
It seems that the lib is not working with kotlinJS IR compiler.
here an example: https://github.com/christian-draeger/fullstack-kotlin-mpp-with-bootiful-react/blob/ir-compiler/frontend/build.gradle.kts#L28
without using muirwik everything works as expected.
> Task :frontend:compileKotlinJs FAILED
e: /Users/christiandrager/github/fullstack-kotlin-mpp-with-bootiful-react/frontend/src/main/kotlin/components/ComponentWithMaterialUi.kt: (3, 8): Unresolved reference: com
e: /Users/christiandrager/github/fullstack-kotlin-mpp-with-bootiful-react/frontend/src/main/kotlin/components/ComponentWithMaterialUi.kt: (4, 8): Unresolved reference: com
e: /Users/christiandrager/github/fullstack-kotlin-mpp-with-bootiful-react/frontend/src/main/kotlin/components/ComponentWithMaterialUi.kt: (5, 8): Unresolved reference: com
e: /Users/christiandrager/github/fullstack-kotlin-mpp-with-bootiful-react/frontend/src/main/kotlin/components/ComponentWithMaterialUi.kt: (14, 9): Unresolved reference: mButton
e: /Users/christiandrager/github/fullstack-kotlin-mpp-with-bootiful-react/frontend/src/main/kotlin/components/ComponentWithMaterialUi.kt: (14, 58): Unresolved reference: MButtonVariant
e: /Users/christiandrager/github/fullstack-kotlin-mpp-with-bootiful-react/frontend/src/main/kotlin/components/ComponentWithMaterialUi.kt: (14, 92): Unresolved reference: MColor
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':frontend:compileKotlinJs'.
KotlinJS plugin also supports the compiling to both, IR compiler backend and default compiler backend.
see --> https://kotlinlang.org/docs/reference/js-ir-compiler.html#authoring-libraries-for-the-ir-compiler-with-backwards-compatibility
the IR compiler with Kotlin/JS, enables aggressive optimizations, such as generated code size (through dead code elimination), and JavaScript and TypeScript ecosystem interoperability, etc...
since the IR will be the default in the future anyway (as far as i know) it should make sense for muirwik to support it.
if this could be released with kotlin react 16.13.1-pre.124-kotlin-1.4.10 this would be great
also having the kotlin-react wrapper as a provided dependency would make a lot of sense. thereby the would not be bound to a specific kotlin-react wrapper version anymore instead it would rely on dependencies that should be provided at runtime.
I included the following in the gradle dependencies of my kotlin.js react project:
implementation("com.ccfraser.muirwik:muirwik-components:0.4.1")
implementation(npm("@material-ui/core"))
So far - not using anything - the project runs and the page loads
As soon as I try to use a material ui component somewhere inside my app - for example like this:
mTextField("User")
The app isn't rendered anymore (not even the errorboundary wrapping the whole app catches anything) and I get this error:
ERROR in D:/github/logoleon-backend/build/js/packages_imported/muirwik-components/0.4.1/muirwik-components.js
Module not found: Error: Can't resolve 'kotlin-css-js' in 'D:\github\logoleon-backend\build\js\packages_imported\muirwik-components\0.4.1'
@ D:/github/logoleon-backend/build/js/packages_imported/muirwik-components/0.4.1/muirwik-components.js 14636:558-582
@ ./kotlin/logoleon-backend-logoleon-manager.js
@ multi ./kotlin/logoleon-backend-logoleon-manager.js
I tried adding Muirwik the way it is done in the starter. I got my app to compile but I always had the same error TypeError:
After a little bit of digging around I found out that this was caused by the createStyled function inside muirwik-muirwik-components.js. The child_2usv9w$ refers to a prototype field inside kotlin-react which changes depending on the wrapper version.
kotlin-react:16.13.1-pre.104-kotlin-1.3.72 - has the name child_2usv9w
kotlin-react:16.13.1-pre.105-kotlin-1.3.72 - has the name child_52psg1$
This name discrepancy causes Muirwik to fail at runtime.
I think it is worth mentioning this compatibility issue in the README, along with the needed dependency setup needed to get Muirwik working and maybe a link to the starter project. If you want I can create a pull request with these suggestions
Hello,
When I write the following:
mAvatar(src = state.avatarPath, alt = "Reptile", className = "blabla") {
css {
margin(2.spacingUnits)
width = 60.px
height = 60.px
}
}
The react component gets a default generated className without relation to my css configuration:
{
"alt": "User Avatar",
"src": "/images/alex.jpg",
"className": "MuiAvatar-img-1238"
}
Any idea what is going on?
Regards,
Alex
Have not yet wrapped the select component (have been using TextField selects instead)
Such as component prop for button
https://material-ui.com/zh/api/button-base/
Muirwik currently wraps Material UI V3.1.2. Material UI latest release is 3.3.2.
Upgrade to this version (or later if a new version is released before this issue is finished) adding properties to components as required.
After updating kotlin from 1.3.62 to 1.3.72 I've got a compilation error (and some other weird stuff).
Anyways, it seems that at least toolbarJsCssToPartialCss
is using JsObject that has disappeared from the package.
Looks like it might be as this looks recent - #35
i am having issue with the LEGACY flag enabled have just updated all
ver_kotlin_react=17.0.2-pre.208-kotlin-1.5.10
ver_kotlin_styled=5.3.0-pre.208-kotlin-1.5.10
ver_kotlin=1.5.10
implementation("org.jetbrains.kotlin-wrappers:kotlin-react:$ver_kotlin_react")
implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:$ver_kotlin_react")
implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:$ver_kotlin_styled")
as i was getting :
Module not found: Error: Can't resolve 'kotlin-wrappers-kotlin-extensions-js-legacy' in '/Users/***/repos/personal/cuer/cuer/build/js/packages/Cuer-remote/kotlin-dce-dev'
Module not found: Error: Can't resolve 'kotlin-wrappers-kotlin-styled-js-legacy' in '/Users/***/repos/personal/cuer/cuer/build/js/packages/Cuer-remote/kotlin-dce-dev'
Module not found: Error: Can't resolve 'kotlin-wrappers-kotlin-react-js-legacy' in '/Users/***/repos/personal/cuer/cuer/build/js/packages/Cuer-remote/kotlin-dce-dev'
Looking in the webpack packages directory there were no js files for those legacy modules
So i copied muirwik-components
to my project and just removed the LEGACY in js(LEGACY)
/muirwik-components/build.gradle.kts
is here https://github.com/sentinelweb/cuer/blob/feature/130_make_shared_kmp_module_remote1/muirwik-components/build.gradle.ktsObviously not a long term solution but it looks like the js-legacy thing is in flux at the moment
I am not sure if it is appropriate to ask this question over an issue. But I was wondering whether you are aware that there exists a second kotlin material UI wrapper which does fundamentally the same as this one. Of course, there are differences in maturity, popularity, and specific implementation.
I think it would be very helpful if the Readme would have some information about the alternative and what the advantages and disadvantages are. As it stands now, I am unsure which one to use and it seems a lot of the effort developing a good material UI wrapper is duplicated. Might be worth it to investigate. If you want I can compile a small list of differences I experienced when working with either. Let me know what you think on the topic.
It would be cool if you could add releases on GitHub. Thanks to this, the watchers will be notified about new versions.
See e.g. https://github.com/Kotlin/kotlinx.serialization/releases
It's also visible on the first page of the repo as a small window on the right.
kotlin version: 1.3.70-eap-42
plugin: kotlin("js")
and kotlin("multiplatform")
trying to use this library, so i added it
api("com.ccfraser.muirwik:muirwik-components:0.2.2")
on compile i was seeing webpack had issues like
ERROR in /home/nikky/dev/pentagame/build/js/packages_imported/muirwik-components/0.2.2/muirwik-components.js
Module not found: Error: Can't resolve '@material-ui/core/styles/jssPreset' in '/home/nikky/dev/pentagame/build/js/packages_imported/muirwik-components/0.2.2'
so i also added
api(npm("@material-ui/core", "^4.4.2"))
matched the version used by muirwik
this reduced it to 3 errors
ERROR in /home/nikky/dev/pentagame/build/js/packages_imported/muirwik-components/0.2.2/muirwik-components.js
Module not found: Error: Can't resolve '@material-ui/core/styles/createGenerateClassName' in '/home/nikky/dev/pentagame/build/js/packages_imported/muirwik-components/0.2.2'
@ /home/nikky/dev/pentagame/build/js/packages_imported/muirwik-components/0.2.2/muirwik-components.js 11274:2896-2955
@ ./kotlin/penta-frontend.js
@ multi ./kotlin/penta-frontend.js
ERROR in /home/nikky/dev/pentagame/build/js/packages_imported/muirwik-components/0.2.2/muirwik-components.js
Module not found: Error: Can't resolve '@material-ui/core/styles/jssPreset' in '/home/nikky/dev/pentagame/build/js/packages_imported/muirwik-components/0.2.2'
@ /home/nikky/dev/pentagame/build/js/packages_imported/muirwik-components/0.2.2/muirwik-components.js 11274:2957-3002
@ ./kotlin/penta-frontend.js
@ multi ./kotlin/penta-frontend.js
ERROR in /home/nikky/dev/pentagame/build/js/packages_imported/muirwik-components/0.2.2/muirwik-components.js
Module not found: Error: Can't resolve 'react-jss/lib/JssProvider' in '/home/nikky/dev/pentagame/build/js/packages_imported/muirwik-components/0.2.2'
@ /home/nikky/dev/pentagame/build/js/packages_imported/muirwik-components/0.2.2/muirwik-components.js 11274:3020-3056
@ ./kotlin/penta-frontend.js
@ multi ./kotlin/penta-frontend.js
those i am seemingly unable to get rid of even with adding dependencies on react-jss
In Material-UI Select extends from Input however, the mapping MSelectProps
doesn't extend from MInputProps
. This means that options like disableUnderline
is not available.
The workaround for this is to define it like this:
attrs.asDynamic().disableUnderline = true
Not ideal as it reduces discoverability.
An easy fix would be to have MSelectProps
extend from MInputProps
This could be affecting other Form elements but I haven't tested them.
This is a feature request for https://next.material-ui.com/components/date-picker/
Btw nice job with the lib, really enjoying it 👍
Drag and drop dialog and example still to be completed.
Hi there! My build pipelines died:
* What went wrong:
Could not determine the dependencies of task ':packageJson'.
> Could not resolve all dependencies for configuration ':npm'.
> Could not resolve com.ccfraser.muirwik:muirwik-components:0.4.1.
Required by:
project :
> Could not resolve com.ccfraser.muirwik:muirwik-components:0.4.1.
> Could not get resource 'https://dl.bintray.com/cfraser/muirwik/com/ccfraser/muirwik/muirwik-components/0.4.1/muirwik-components-0.4.1.pom'.
> Could not GET 'https://dl.bintray.com/cfraser/muirwik/com/ccfraser/muirwik/muirwik-components/0.4.1/muirwik-components-0.4.1.pom'. Received status code 403 from server: Forbidden
AFAIK everything must be moved to maven.
https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/
trying to follow theme examples, one on nice features is "flat" toolbar, unfortunately can't find binding for it.
'default' color of Typography component has been replaced with 'initial' in this commit
Using 'default' generates following warning:
Warning: Failed prop type: Invalid prop 'color' of value 'default' supplied to 'ForwardRef(Typography)', expected one of ["initial","inherit","primary","secondary","textPrimary","textSecondary","error"].
I do not understand why some styles are respected and some are not.
e.g. th width of a mTab component
mTab(label = "Recommended", value = ListItemOption.Best) { css {
minWidth = 20.px
width = 20.px
} }
does not render any different then the other tabs (and way to wide)
I searched the solved issues and tried #23
But did not help.
Setting the width of the mTabs works fine, but now tabs must be scrollable so that all fit on the screen.
Please give me some advice how or where to adapt this styles
Once the bintray component gets approved/added to jcenter, modify the starter-app to use this.
One-liner:
fun String.toHyphenCase() =
split(Regex("(?=[A-Z])")).filter(String::isNotEmpty).joinToString("-", transform = String::toLowerCase)
I'm trying to use the mBackdrop component, but get this error:
react_devtools_backend.js:2273 Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(Backdrop)`, but its value is `undefined`
The open property seems to be required here: https://material-ui.com/api/backdrop/
The code below:
mButton("Click me!", MColor.primary, MButtonVariant.contained) {
css {
margin = "25px"
}
}
compiles to:
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained sc-AxirZ dcxuZU MuiButton-containedPrimary" tabindex="0" type="button" _css="margin: 25px;">
<span class="MuiButton-label">Click me!</span>
<span class="MuiTouchRipple-root"></span>
</button>
Class .MuiButtonBase-root overrides class .dcxuZU, which contains margin 25px
What do I do wrong? I think class .dcxuZU should be at the begging of button's class attribute.
Would be good to create a bintray and future jcenter repository and have the test app use that independently from the project.
I just cloned the project and ran gradlew build
:
21:48:05: Executing task 'build'...
> Task :assemble UP-TO-DATE
> Task :check UP-TO-DATE
> Task :build UP-TO-DATE
> Task :muirwik-components:processResources NO-SOURCE
> Task :muirwik-components:browserDistributeResources NO-SOURCE
> Task :kotlinNodeJsSetup SKIPPED
> Task :muirwik-components:packageJson
> Task :muirwik-components:testPackageJson
> Task :muirwik-testapp:packageJson
> Task :muirwik-testapp:testPackageJson
> Task :rootPackageJson
> Task :kotlinNpmInstall
warning workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components-test > mocha > [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
warning workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components-test > karma > socket.io > [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
warning workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components-test > mocha > chokidar > [email protected]: "Please update to latest v2.3 or v2.2"
warning workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > webpack > watchpack > watchpack-chokidar2 > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components-test > karma > socket.io > engine.io > [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
warning workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components-test > karma > socket.io > socket.io-parser > [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
warning workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > webpack > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > webpack > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/[email protected]" has unmet peer dependency "react@^16.8.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/[email protected]" has unmet peer dependency "react-dom@^16.8.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-testapp > [email protected]" has unmet peer dependency "react@^15.0.0 || ^16.0.0 || ^17.0.0 ".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-testapp > [email protected]" has unmet peer dependency "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0 ".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > kotlin-wrappers-kotlin-react-dom-jsLegacy > [email protected]" has unmet peer dependency "[email protected]".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > kotlin-wrappers-kotlin-styled-jsLegacy > [email protected]" has unmet peer dependency "react@>= 16.8.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > kotlin-wrappers-kotlin-styled-jsLegacy > [email protected]" has unmet peer dependency "react-dom@>= 16.8.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > kotlin-wrappers-kotlin-styled-jsLegacy > [email protected]" has unmet peer dependency "react-is@>= 16.8.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/lab > @material-ui/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/lab > @material-ui/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/core > [email protected]" has unmet peer dependency "react@>=16.6.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/core > [email protected]" has unmet peer dependency "react-dom@>=16.6.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/core > @material-ui/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/core > @material-ui/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/core > @material-ui/[email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0".
warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/core > @material-ui/[email protected]" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0".
> Task :muirwik-components:generateExternalsIntegrated
> Task :muirwik-components:compileKotlinJs
> Task :muirwik-components:processDceKotlinJs
> Task :muirwik-components:browserProductionWebpack
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles/StylesProvider' not found
Module '@material-ui/styles/jssPreset' not found
> Task :muirwik-components:browserProductionWebpack FAILED
Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.7.1/userguide/command_line_interface.html#sec:command_line_warnings
10 actionable tasks: 10 executed
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':muirwik-components:browserProductionWebpack'.
> Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles' not found
Module '@material-ui/styles/StylesProvider' not found
Module '@material-ui/styles/jssPreset' not found
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 40s
21:48:45: Task execution finished 'build'.
What am I missing?
Truing to implement Badge avatar from tutorial https://material-ui.com/components/avatars/ (bottom one With badge
)
implemented this code:
mListItem(onClick = { handleShowMenuClick(it) }) {
attrs {
alignItems = MListItemAlignItems.flexStart
}
mBadge(
badgeContent = mAvatar {
css {
width = 22.px
height = 22.px
border = "2px solid #fff"
}
attrs {
alt = props.user.name
src = props.user.thumbnail
}
}
) {
mAvatar {
attrs {
alt = props.user.name
src = props.user.thumbnail
}
}
}
mListItemText (
primary = props.user.name,
secondary = props.user.location
)
}
Can somebody see what I'm doing wrong?
also I can't find ability set for mBadge
:
overlap="circle"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
The RepositoryHandler.jcenter() method has been deprecated. This is scheduled to be removed in Gradle 8.0. JFrog announced JCenter's shutdown in February 2021. Use mavenCentral() instead. Consult the upgrading guide for further information: https://docs.gradle.org/7.0.2/userguide/upgrading_version_6.html#jcenter_deprecation
No autoFocus in mListItem
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.