Muirwik - a Material UI React wrapper written in Kotlin

Related tags

react kotlin material-ui
Overview

Muirwik

Welcome to Muirwik.

Muirwik gets it name from being a Material UI React wrapper written in Kotlin.

For more information, see the above links (particularly Material UI as its documentation will be important in terms of figuring out how this works.

Also see the Kotlin Wrappers page, as this project uses most of the wrappers there.

A couple of screenshots have been added to the wiki page.

IR-Compiler

At time of writing using the IR-Compiler with the Kotlin Wrappers, particularly the React Wrappers, has some issues (or at least requires some extra code to make things work properly).

These changes have been added to a new branch (IR-Compiler) and have now been merged into master. In other words, the master branch now works with the IR Compiler and with the Legacy compiler, so the IR branch is now no longer needed.

At time of writing, the IR compiler is still alpha and does not yet support incremental compilation. For this reason, during development, it is faster (in terms of edit/rebuild/view result cycle) to use the legacy compiler.

The version release to Maven Central will be built with js(BOTH). Projects using Muirwik should therefore be able to use js(LEGACY) or js(IR).

To Get Started

The starter App

A good place to get started is to look at the separate starter app project which is a minimal example to get you going. You don't even need to clone/use this repository at all, the starter app is all you need to use the components.

Adding Muirwik as a dependency

Add the Muirwik dependency to your own app as follows: (Note: in Kotlin 1.4.0 and earlier, the kotlin-styled version was 1.0.0 instead of that shown below)

repositories {
    ...
    mavenCentral()
}

dependencies {
    ...
    implementation("org.jetbrains", "kotlin-styled", "5.3.0-$kotlinJsVersion")
    implementation("com.ccfraser.muirwik:muirwik-components:0.7.1")
}

Compile Muirwik

If you want to get the source of Muirwik and compile locally, you can do the following.

Note that the muirwik-testapp is a good source of information on how to use the components.

Make sure you have java, git and the yarn package manager installed (and not the yarn that comes with cmdtest in Ubuntu :-)), then the following should work (possibly may also need npm installed):

git clone https://github.com/cfnz/muirwik.git
cd muirwik
./gradlew :muirwik-testapp:build
./gradlew :muirwik-testapp:run

In Windows, it is probably (but have not tried it) more like:

git clone https://github.com/cfnz/muirwik.git
cd muirwik
gradlew.bat :muirwik-testapp:build
gradlew.bat :muirwik-testapp:run

Note that I have not taken the time to make the demo app perfect. Some components could be laid out better. To see what is possible, see the Material UI demo.

Background

I started this off as a process to learn Kotlin. I wanted to do some web development and in the past used things like Vaadin and before that a small amount of facelets and jsf.

Watching David Ford's KotlinConf Videos got me started down the Kotlin javascript and React trail... I have learnt lots of things along the way (and still have much more to learn!).

By reading the above, you will note that I am no Kotlin, javascript (and by extension, node or webpack) expert... there has been lots of leanings along the way, and I no doubt have done things in not the most perfect way.

Switching from create-react-kotlin-app to using Gradle, yarn/npm and webpack directly also added to the learning curve but helped in the long run. This was inspired after watching Gaetan Zoritchak's talk.

However, what this is, is a working multi-module Kotlin DSL gradle build that wraps quite a large javascript material design library. It provides a working demo app (see screenshots) and starer app which is quite a good starting point for real applications... (at least I think so). Quite a few hours were spent just trying to make the basic development workflow work.

Todo

Well, lots really, but as mentioned, it is in a working state as it is...

Tests

There are none, zip, zero, naught. The Material UI framework has them, but other than the test app, which is for user based testing and experimentation, there is nothing else. I am not familiar with any javascript testing framework, so the only way I have tested thus far is with the demo app.

State Management

State management via Redux (or something) is something I have been meaning to look into. In the test app, most of state is in local vars rather than in State objects. I tried both, but saw no real benefit in the state objects rather than state vars. It didn't seem to help with hot module reloading either. It didn't seem to help with anything much. Perhaps, with Redux it might all be quite different... it would be nice if Hot Module Reloading worked with state (as seen in various React videos) and maybe it would with Redux, but I have not gone down that track yet.

Talking of HMR, I have it enabled in the development workflow... even without reloading of current state, it does reload the app better than without it.

Contributing

Feedback and contributions are welcome :-).

Issues
  • Contributions

    Contributions

    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

    opened by jvskriubakken 11
  • Not working on Kotlin 1.4.0

    Not working on Kotlin 1.4.0

    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

    opened by krzema12 10
  • Question regarding kotlin-material-ui

    Question regarding kotlin-material-ui

    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.

    opened by marvinbuff 5
  • Missing Expansion Panel

    Missing Expansion Panel

    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:

    • I wrote the component according to newest, v4 API (I don't know how much has the API changed comparing to the version muirwik is using),
    • I made all props variables for these components nullable because I think it's more secure (think of trying to get value of undefined prop: mExpansionPanel { attrs.expanded.doSomething() // Will fail }, using nullable props it won't compile) but it's inconsistent with rest of muirwik on the other side,
    • I omitted TransitionComponent and TransitionProps props of ExpansionPanel because I wasn't sure how to implement TransitionComponent (as far as I remember, other components in muirwik don't have these props too, so I think it's not a big problem)

    If you find that ok, I will be happy to create a PR.

    opened by karol-202 5
  • Upgrade failure

    Upgrade failure

    Trying to upgrade to kotlin 1.5.20 + latest wrappers, but getting this:

    romans-mbp-2.lan 01:53:58.030 > lonjechat_kotlin git:(master) ✗ ./gradlew browserDevelopmentRun
    
    > Configure project :app
    WARNING:: Using flatDir should be avoided because it doesn't support any meta-data formats.
    
    The following Kotlin source sets were configured but not added to any Kotlin compilation:
     * androidAndroidTestRelease
     * cio
     * cioNoWebRTC
     * direct
     * okhttp
     * okhttpTracing
    You can add a source set to a target's compilation by connecting it with the compilation's default source set using 'dependsOn'.
    See https://kotlinlang.org/docs/reference/building-mpp-with-gradle.html#connecting-source-sets
    
    > Task :kotlinNpmInstall
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > [email protected]" has unmet peer dependency "[email protected]>=16.8.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > [email protected]" has unmet peer dependency "[email protected]>=16".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > react-virtuoso > @virtuoso.dev/[email protected]" has unmet peer dependency "[email protected]>=16".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0 || ^17.0.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0 || ^17.0.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0 || ^17.0.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0 || ^17.0.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/core > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0 || ^17.0.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/core > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0 || ^17.0.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/core > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0 || ^17.0.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/core > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0 || ^17.0.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/core > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0 || ^17.0.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/core > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0 || ^17.0.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/core > [email protected]" has unmet peer dependency "[email protected]>=16.6.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > muirwik-muirwik-components-js-ir > @material-ui/core > [email protected]" has unmet peer dependency "[email protected]>=16.6.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > kotlin-wrappers-kotlin-styled-js-ir > [email protected]" has unmet peer dependency "[email protected]>= 16.8.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > kotlin-wrappers-kotlin-styled-js-ir > [email protected]" has unmet peer dependency "[email protected]>= 16.8.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > kotlin-wrappers-kotlin-styled-js-ir > [email protected]" has unmet peer dependency "[email protected]>= 16.8.0".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > kotlin-wrappers-kotlin-react-dom-js-ir > [email protected]" has unmet peer dependency "[email protected]".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > kotlin-wrappers-kotlin-react-redux-js-ir > [email protected]" has unmet peer dependency "[email protected]^16.8.3 || ^17".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > kotlin-wrappers-kotlin-react-router-dom-js-ir > [email protected]" has unmet peer dependency "[email protected]>=15".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > kotlin-wrappers-kotlin-react-router-dom-js-ir > react-router-dom > [email protected]" has unmet peer dependency "[email protected]>=15".
    warning "workspace-aggregator-b90bd596-d235-475d-b7b5-fa9c5fe058b2 > Lonje-reactJs > kotlin-wrappers-kotlin-react-router-dom-js-ir > react-router-dom > react-router > [email protected]" has unmet peer dependency "[email protected]^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0".
    
    > Task :reactJs:compileKotlinJs
    w: /Users/roman/work/lonjechat_kotlin/reactJs/src/main/kotlin/App.kt: (730, 21): Parameter 'index' is never used
    w: /Users/roman/work/lonjechat_kotlin/reactJs/src/main/kotlin/App.kt: (767, 25): Parameter 'index' is never used
    w: /Users/roman/work/lonjechat_kotlin/reactJs/src/main/kotlin/App.kt: (1198, 31): Parameter 'handler' is never used
    w: /Users/roman/work/lonjechat_kotlin/reactJs/src/main/kotlin/components/header/Header.kt: (82, 31): Parameter 'reason' is never used
    w: /Users/roman/work/lonjechat_kotlin/reactJs/src/main/kotlin/containers/DetailContainer.kt: (662, 11): Parameter 'dispatch' is never used, could be renamed to _
    w: /Users/roman/work/lonjechat_kotlin/reactJs/src/main/kotlin/containers/MasterContainer.kt: (255, 11): Parameter 'dispatch' is never used, could be renamed to _
    
    > Task :reactJs:compileDevelopmentExecutableKotlinJs FAILED
    e: java.lang.IllegalStateException: Symbol for public react/RBuilder.child|704725676889942833[0] is unbound
            at org.jetbrains.kotlin.ir.symbols.impl.IrBindablePublicSymbolBase.getOwner(IrPublicSymbolBase.kt:52)
            at org.jetbrains.kotlin.ir.symbols.impl.IrPublicSymbolBase.getDescriptor(IrPublicSymbolBase.kt:23)
            at org.jetbrains.kotlin.backend.common.serialization.KotlinIrLinker.findDeserializedDeclarationForSymbol(KotlinIrLinker.kt:117)
            at org.jetbrains.kotlin.backend.common.serialization.KotlinIrLinker.getDeclaration(KotlinIrLinker.kt:162)
            at org.jetbrains.kotlin.ir.util.ExternalDependenciesGeneratorKt.getDeclaration(ExternalDependenciesGenerator.kt:61)
            at org.jetbrains.kotlin.ir.util.ExternalDependenciesGenerator.generateUnboundSymbolsAsDependencies(ExternalDependenciesGenerator.kt:48)
            at org.jetbrains.kotlin.ir.backend.js.CompilerKt.compile(compiler.kt:80)
            at org.jetbrains.kotlin.ir.backend.js.CompilerKt.compile$default(compiler.kt:36)
            at org.jetbrains.kotlin.cli.js.K2JsIrCompiler.doExecute(K2JsIrCompiler.kt:256)
            at org.jetbrains.kotlin.cli.js.K2JSCompiler.doExecute(K2JSCompiler.java:182)
            at org.jetbrains.kotlin.cli.js.K2JSCompiler.doExecute(K2JSCompiler.java:75)
            at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:90)
            at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:44)
            at org.jetbrains.kotlin.cli.common.CLITool.exec(CLITool.kt:98)
            at org.jetbrains.kotlin.daemon.CompileServiceImpl.compile(CompileServiceImpl.kt:1575)
            at jdk.internal.reflect.GeneratedMethodAccessor101.invoke(Unknown Source)
            at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
            at java.base/java.lang.reflect.Method.invoke(Method.java:566)
            at java.rmi/sun.rmi.server.UnicastServerRef.dispatch(UnicastServerRef.java:359)
            at java.rmi/sun.rmi.transport.Transport$1.run(Transport.java:200)
            at java.rmi/sun.rmi.transport.Transport$1.run(Transport.java:197)
            at java.base/java.security.AccessController.doPrivileged(Native Method)
            at java.rmi/sun.rmi.transport.Transport.serviceCall(Transport.java:196)
            at java.rmi/sun.rmi.transport.tcp.TCPTransport.handleMessages(TCPTransport.java:562)
            at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run0(TCPTransport.java:796)
            at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.lambda$run$0(TCPTransport.java:677)
            at java.base/java.security.AccessController.doPrivileged(Native Method)
            at java.rmi/sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run(TCPTransport.java:676)
            at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
            at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
            at java.base/java.lang.Thread.run(Thread.java:834)
    
    
    FAILURE: Build failed with an exception.
    
    * What went wrong:
    Execution failed for task ':reactJs:compileDevelopmentExecutableKotlinJs'.
    > Internal compiler error. See log for more details
    
    * 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
    
    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
    
    BUILD FAILED in 14s
    12 actionable tasks: 7 executed, 5 up-to-date
    

    This reactJs in kotlin mpp, here is some partial configs:

    reactJs/build.gradle.kts
    
    plugins {
        kotlin("js")
    //    id("com.github.node-gradle.node") version "3.1.0"
    }
    group = "me.roman"
    version = "1.0-SNAPSHOT"
    kotlin {
        js {
            useCommonJs()
            binaries.executable()
            browser {
                webpackTask {
                    cssSupport.enabled = true
                }
                runTask {
                    cssSupport.enabled = true
                }
                testTask {
                    useKarma {
                        useChromeHeadless()
                        webpackConfig.cssSupport.enabled = true
                    }
                }
            }
        }
    }
    
    repositories {
        mavenCentral()
    }
    
    dependencies {
        implementation(npm("react-responsive", "8.2.0"))
        implementation(npm("react-virtuoso", "1.9.3"))
        implementation("com.ccfraser.muirwik:muirwik-components:0.8.0")
    
        implementation(project(":LonjeShared"))
        implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.215-kotlin-1.5.20")
        implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:17.0.2-pre.215-kotlin-1.5.20")
        implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:5.2.0-pre.215-kotlin-1.5.20")
        implementation("org.jetbrains.kotlin-wrappers:kotlin-react-redux:7.2.4-pre.215-kotlin-1.5.20")
        implementation("org.jetbrains.kotlin-wrappers:kotlin-styled:5.3.0-pre.215-kotlin-1.5.20")
    
        implementation("org.jetbrains.kotlinx:kotlinx-html-js:0.7.3")
        implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.5.1")
    }
    
    
    gradle.properties
    
    org.gradle.jvmargs=-Xmx4g -XX:MaxPermSize=2048m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
    android.useAndroidX=true
    android.enableJetifier=true
    kotlin.code.style=official
    kotlin.js.experimental.generateKotlinExternals=true
    kotlin.js.compiler=ir
    kotlin.mpp.stability.nowarn=true
    
    kotlinVersion = 1.5.20
    ktorVersion = 1.6.1
    

    just duplicating https://github.com/JetBrains/kotlin-wrappers/issues/517

    opened by theromis 5
  • Not building (on Windows?)

    Not building (on Windows?)

    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 "[email protected]^16.8.0".
    warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/[email protected]" has unmet peer dependency "[email protected]^16.8.0".
    warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/[email protected]" has unmet peer dependency "[email protected]^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[email protected]^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 "[email protected]^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 "[email protected]^16.8.0 || ^17.0.0".
    warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-testapp > [email protected]" has unmet peer dependency "[email protected]^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 "[email protected]^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 "[email protected]>= 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 "[email protected]>= 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 "[email protected]>= 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 "[email protected]^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 "[email protected]^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 "[email protected]>=16.6.0".
    warning "workspace-aggregator-012dc7a8-7d8d-44b9-8282-d15866267b28 > muirwik-muirwik-components > @material-ui/core > [email protected]" has unmet peer dependency "[email protected]>=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 "[email protected]^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 "[email protected]^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 "[email protected]^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 "[email protected]^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?

    opened by micheljung 4
  • Error: Can't resolve 'kotlin-css-js'

    Error: Can't resolve 'kotlin-css-js'

    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

    opened by IARI 4
  • localization support

    localization support

    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?

    opened by chipnesh 4
  • Add Alert Wrapper

    Add Alert Wrapper

    Hi, thanks for the awesome library. I know everything is still WIP, so I thought I would make some contributions while using it.

    I currently need to use the Alert component which does not yet have any wrapper. So I just created one.

    Let me know if you have any feedback or requested changes. Especially in regards to the dependency to material-ui/lab. Not sure if you don't want to depend on the experimental library or if you just didn't get to create wrappers for it yet.

    opened by marvinbuff 3
  • Change MinWidth of a mTab

    Change MinWidth of a mTab

    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 https://github.com/cfnz/muirwik/issues/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

    opened by blilleike 3
  • Error: Can't resolve '@material-ui/core/styles/createMuiTheme'

    Error: Can't resolve '@material-ui/core/styles/createMuiTheme'

    I have a project using muirwik that has started failing builds with the error: Error: Can't resolve '@material-ui/core/styles/createMuiTheme'
    The project has worked fine and no checges to the module on the weekend and i started another module for a website - but i rolled back to before i started deleted all build folders and still get the error? Just wondering if anyone has seen the error before? (edited)

    In build/js/packages/Cuer-remote/kotlin-dce-dev/muirwik-muirwik-components-js-legacy.js i can see the function there so im unsure why webpack wouldn't see it. i see: require('@material-ui/core/styles/createMuiTheme')

    and i can see the function in build/js/node_modules/@material-ui/core/es/styles/createTheme.js

    I am using

    implementation("com.ccfraser.muirwik:muirwik-components:0.8.0") {
        exclude(group = "org.jetbrains.kotlin-wrappers", module = "kotlin-styled")
        exclude(group = "org.jetbrains.kotlin-wrappers", module = "kotlin-react")
        exclude(group = "org.jetbrains.kotlin-wrappers", module = "kotlin-react-dom")
    }
    

    any help is appreciated - i am a bit stumped ...

    opened by sentinelweb 11
  • mAutoComplete: defaultValue props type

    mAutoComplete: defaultValue props type

    Hi, According material UI documentation I should be able to set an array as default value. The defaultValue type is now set to T, so when I'm using mAutoComplete with multiple = true I got an error:

    "Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).some is not a function"

      var filteredOptions = popupOpen ? filterOptions(options.filter(function (option) {
        if (filterSelectedOptions && (multiple ? value : [value]).some(function (value2) {
          return value2 !== null && getOptionSelected(option, value2);
        })) {
          return false;
        }
    
    opened by sbednarska 2
  • Add date picker support

    Add date picker support

    This is a feature request for https://next.material-ui.com/components/date-picker/

    Btw nice job with the lib, really enjoying it 👍

    opened by dosier 1
  • default Material-UI control Margin on FormControls

    default Material-UI control Margin on FormControls

    MFormControlMargin.none is default by Material-UI, not MFormControlMargin.normal see official docs

    opened by sirakuzovsky 3
  • Add box component

    Add box component

    https://material-ui.com/zh/components/box/

    opened by zxy-c 1
  • The component props should be any type

    The component props should be any type

    Such as component prop for button https://material-ui.com/zh/api/button-base/

    opened by zxy-c 4
  • Improve usage of icons

    Improve usage of icons

    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:

    1. For icons to work, one has to add this piece to the <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:
    • it's not included in the docs, and it's just another implicit dependency to add. It took me a while to find it, and I found it by looking at the test app (thanks for it!)
    • it makes another web call which in some circumstances may not be possible (running the app offline) or slow (slow Internet connection)
    1. Names of icons accepted by 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 :)

    opened by krzema12 6
  • Complete Drag and Drop Dialog introduced in Material-UI 3.7

    Complete Drag and Drop Dialog introduced in Material-UI 3.7

    Drag and drop dialog and example still to be completed.

    opened by cfnz 2
Releases(0.8.0)
  • 0.8.0(Jun 11, 2021)

    This version should be compatible with both the IR and LEGACY compiler.

    The Test App has been updated to avoid compatibility issues.

    The Maven Central release (0.8.0) has been released with js(BOTH).

    Source code(tar.gz)
    Source code(zip)
  • v0.6.8(Apr 4, 2021)

  • v0.6.5(Jan 28, 2021)

    Added the rating component, useTheme and useMediaQuery for functional components + a few other tweaks (thanks to #47, #48, #50, etc and @zxy-c for pushing things along :-)).

    Source code(tar.gz)
    Source code(zip)
  • v0.6.3(Nov 25, 2020)

    Moved to Kotlin 1.4.20 and later versions of the Kotlin wrappers, still on the LEGACY compiler.

    Note the move to the later react wrapper also moves to React 17.0.0 which does produce some unmet peer dependency warnings for Material UI, but everything seems to work fine.

    Source code(tar.gz)
    Source code(zip)
  • v0.6.2(Nov 18, 2020)

    Introduced a Lab Component (Alert) and added support for Localization to createMuiTheme.

    Note with the later a default param was removed from createMuiTheme. This has a potential to be a breaking change, but should not cause an issue in most (maybe all) cases as passing the old param as the new param should not have a detrimental affect.

    Also a few other smaller commits since last "release".

    Source code(tar.gz)
    Source code(zip)
  • v0.6.0(Aug 26, 2020)

    Moved to Kotlin 1.4 Moved to Material-UI 4.11.0 Added mSvgIcon Added mAccordion (replacement for mExpansionPanel) Properly implemented BackDrop Few other tweaks.

    Source code(tar.gz)
    Source code(zip)
Inspired by Heinrich Reimer Material Intro and developed with love from scratch

Android Material Intro Screen Material intro screen is inspired by Material Intro and developed with love from scratch. I decided to rewrite completel

Tango Agency 2.7k Jul 25, 2021
An implementation of tap targets from the Material Design guidelines for feature discovery.

TapTargetView An implementation of tap targets from Google's Material Design guidelines on feature discovery. Min SDK: 14 JavaDoc Installation TapTar

Keepsafe 5k Jul 28, 2021
Kotlin Wrapper Library of Material-UI

kotlin-material-ui Kotlin Wrapper Library of Material-UI Core: Lab: Installation repositories { jcenter() // or maven { url 'https://dl.bintra

Subroh Nishikori 73 Jul 29, 2021
Android 徽章控件

?? BGABadgeView-Android ?? English Document react-native-bga-badge-view demo中演示了: 微博底部tab显示最新微博条数 微博列表用户头像显示显示右下角vip徽章 微信消息界面用户新消息 微信消息界面订阅号新消息 使用v4包中

王浩 2.5k Jul 19, 2021
A library that provides an implementation of the banner widget from the Material design.

MaterialBanner A banner displays a prominent message and related optional actions. MaterialBanner is a library that provides an implementation of the

Sergey Ivanov 244 Jun 30, 2021
Kotlin/Native interop to libui: a portable GUI library

kotlin-libui Kotlin/Native bindings to the libui C library. libui is a C lightweight multi-platform UI library using native widgets on Linux (Gtk3), m

Mike Sinkovsky 533 Aug 3, 2021
A material Switch with icon animations and color transitions

Material Animated Switch A material Switch with icon animations and color transitions Sample video: Youtube Material Animated Switch video Sample app:

Adrián Lomas 1.2k Jul 22, 2021
Material Design tap target for Android. https://sjwall.github.io/MaterialTapTargetPrompt/

Material Tap Target Prompt A Tap Target implementation in Android based on Material Design Onboarding guidelines. For more information on tap targets

Sam Wall 1.4k Jul 24, 2021
A simple library to add Emoji support to your Android Application

Emoji A library to add Emoji support to your Android app. Emojis can be picked in a PopupWindow. In order to edit and display text with Emojis this li

Niklas Baudy 1.3k Aug 1, 2021
⚡️A highly customizable, powerful and easy-to-use alerting library for Android.

Flashbar A highly customizable, powerful and easy-to-use alerting library for Android. Specs This library allows you to show messages or alerts in you

Aritra Roy 1.7k Jul 17, 2021
Multiplatform UI DSL with screen management in common code for mobile (android & ios) Kotlin Multiplatform development

Mobile Kotlin widgets This is a Kotlin MultiPlatform library that provides declarative UI and application screens management in common code. You can i

IceRock Development 251 Jul 29, 2021
Thin multiplatform wrappers for graphics.

Kotlin Graphics Libraries Kotlin Multiplatform libraries for graphics. GLFW Vulkan OpenGL STB KGL uses LWJGL for the JVM target and the respective nat

Dominic Fischer 69 Jul 6, 2021
:balloon: A lightweight popup like tooltips, fully customizable with an arrow and animations.

Balloon ?? A lightweight popup like tooltips, fully customizable with arrow and animations. Including in your project Gradle Add below codes to your r

Jaewoong Eum 2k Aug 3, 2021
Android WebView wrapper based on chromium

ChromiumWebView Android WebView wrapper based on chromium Notice This is just a experimental project, don't use it in product. If you have problem whe

alex 496 Jul 25, 2021