cfnz / muirwik Goto Github PK

View Code? Open in Web Editor NEW

132.0 132.0 25.0 2.47 MB

Muirwik - a Material UI React wrapper written in Kotlin

License: Mozilla Public License 2.0

Kotlin 99.85% HTML 0.10% JavaScript 0.05%

kotlin material-ui react

muirwik's People

Contributors

Stargazers

Watchers

muirwik's Issues

support IR compiler

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.

Missed mBox component

Issues with dependencies

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

Move to jcentre

Once the bintray component gets approved/added to jcenter, modify the starter-app to use this.

immutable grid item element style

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
}

Add Autocomplete Component

The Autocomplete Component would be a useful addition:
https://material-ui.com/components/autocomplete/

Bintray seems to be dead

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/

Incompatibility with newer versions of kotlin wrappers

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: $receiver.child_2usv9w$ is not a function

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

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 "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?

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?

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 👍

Properly move to Material UI v3.9.1

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

Improvement for String.toHyphenCase() (Base.kt)

One-liner:

fun String.toHyphenCase() =
    split(Regex("(?=[A-Z])")).filter(String::isNotEmpty).joinToString("-", transform = String::toLowerCase)

Move to Material UI v3.4.0

Cannot change css of mAvatar

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

How to use it in react-kotlin project?

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.

Is js(LEGACY) still needed?

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)

also updated to the same libs i was using (but that could also be done with an exclude).
/muirwik-components/build.gradle.kts is here https://github.com/sentinelweb/cuer/blob/feature/130_make_shared_kmp_module_remote1/muirwik-components/build.gradle.kts

Obviously not a long term solution but it looks like the js-legacy thing is in flux at the moment

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 #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

Wrap the SwipeableDrawer component

While we have the Drawer component, it is not "swipeable". Need to wrap the SwipeableDrawer component.

Add box component

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

MSelect should extend from MInput

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.

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

Add current version to mvnrepository

@cfnz Please add current version to maven repository. Your library is cool!

'default' color of Typography no longer available

'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"].

Create Bintray Repo

Would be good to create a bintray and future jcenter repository and have the test app use that independently from the project.

Support for more experimental components (e.g. Timeline)

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.

Styles from styled don't apply

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.

ListItem not have autoFocus attribute

No autoFocus in mListItem

https://material-ui.com/ru/api/list-item/

Table cell size default value should be null

Table's size will allows TableCells to inherit size of the Table

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:

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)

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 :)

Move to Material UI v3.0.2

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.

default Material-UI control Margin on FormControls

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

Add Rating component

https://material-ui.com/components/rating/#rating

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.

mBackdrop not working (missing open prop)

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/

Complete Drag and Drop Dialog introduced in Material-UI 3.7

Drag and drop dialog and example still to be completed.

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.

Wrap Select component

Have not yet wrapped the select component (have been using TextField selects instead)

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

Move to Material UI 3.3.2

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.

Publish releases via GitHub

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.

The component props should be any type

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

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

Badge avatar doubled

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

cfnz / muirwik Goto Github PK

muirwik's People

Contributors

Stargazers

Watchers

Forkers

muirwik's Issues

Recommend Projects

Recommend Topics

Recommend Org