{"id":13537194,"url":"https://github.com/cfnz/muirwik","last_synced_at":"2025-04-02T04:30:25.583Z","repository":{"id":46341221,"uuid":"138970545","full_name":"cfnz/muirwik","owner":"cfnz","description":"Muirwik - a Material UI React wrapper written in Kotlin","archived":false,"fork":false,"pushed_at":"2022-01-21T20:22:24.000Z","size":2530,"stargazers_count":131,"open_issues_count":3,"forks_count":25,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-18T03:43:18.052Z","etag":null,"topics":["kotlin","material-ui","react"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cfnz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-28T05:31:32.000Z","updated_at":"2025-01-19T15:41:38.000Z","dependencies_parsed_at":"2022-08-12T12:50:45.865Z","dependency_job_id":null,"html_url":"https://github.com/cfnz/muirwik","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cfnz%2Fmuirwik","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cfnz%2Fmuirwik/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cfnz%2Fmuirwik/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cfnz%2Fmuirwik/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cfnz","download_url":"https://codeload.github.com/cfnz/muirwik/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246756738,"owners_count":20828755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["kotlin","material-ui","react"],"created_at":"2024-08-01T09:00:56.155Z","updated_at":"2025-04-02T04:30:23.936Z","avatar_url":"https://github.com/cfnz.png","language":"Kotlin","funding_links":[],"categories":["Libraries"],"sub_categories":["GUI"],"readme":"# Muirwik\n\nWelcome to Muirwik - but note that Muirwik is probably going to be retired (see below). \n\nMuirwik gets it name from being a [Material UI](https://material-ui.com/) [React](https://reactjs.org/) wrapper written \nin [Kotlin](https://kotlinlang.org/).\n\nFor more information, see the above links (particularly [Material UI](https://material-ui.com/) as its documentation \nwill be important in terms of figuring out how this works.\n\nAlso see the [Kotlin Wrappers](https://github.com/JetBrains/kotlin-wrappers) page, as this project uses most of the\nwrappers there.\n\nA couple of [screenshots](https://github.com/cfnz/muirwik/wiki) have been added to the wiki page.\n\nThere are two versions of Muirwik, one for Material UI 4 and one for Material UI (or MUI) 5.\nThe branch for Material UI 4 is named MaterialUI-4 and will be Muirwik version 0.9.x and lower.\nVersion 5 was in a separate branch, but has now been merged into master and will be Muirwik \nversion 0.10.x and beyond.\n\nSee notes below on MUI version 5, but also see the next note about Muirwik retirement.\n\n## NOTE: Muirwik Probable Retirement\nI have learnt lots related to Kotlin, JS, Material UI, now MUI, and the Kotlin react \nwrappers over the last couple of years. The Kotlin wrappers and the Material UI project have been updating fast, and \nI have not kept fully up-to-date.\n\nThe [latest change](https://github.com/JetBrains/kotlin-wrappers/blob/d0ef539948e49f297720fd5f8d1bb848ceb62c5d/CHANGELOG.md)\nspells the future. Any code written using attrs (likely all of Muirwik apps) will need to be modified or use the legacy\nversion of the wrappers. This seems like a good place to pause and choose the best way forward.\n\nThere now is a better supported and faster developed version of a MUI wrapper which is now part\nof the kotlin wrapper project itself. \n\nAnyone new (or old) to Muirwik should check out [kotlin-mui](https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-mui).\n\nKotlin-mui started off quite type unsafe, for example, lots of props were strings rather than enums,\nand it didn't immediately appeal. However, just over a week or so ago (at time of writing), props now appear to be moving\nto typed versions, not all yet, but things seem to be developing quite fast. Muirwik tried to be quite type safe,\nintroducing new types if required and using function parameters to enforce required props. The kotlin-mui wrappers \nare more strictly aligned to the MUI project JS (since they are an automated build from the JS source, that makes sense).\nHowever, unlike the JS IDE support, you don't get prompted for required props, for example, in Kotlin code. So it still has \nits pros and cons.\n\nHowever, because of the speed of development and support, I am probably going to head that way myself, and\nput in any major new effort over there rather than what would seem a rather futile effort of updating Muirwik to the\nnow non legacy version of the Kotlin wrappers. This is particularly because if we want to use the non legacy version, \nit would mean lots of code changes in existing apps... so may as well change it to the new kotlin-mui\nwrappers at the same time.\n\nMuirwik version 0.10.1 has been migrated to the latest legacy kotlin wrapper at time of writing but I don't see it migrating\nto the new non-legacy version unless someone wants to take that on (which given the kotlin-mui wrapper project mentioned, \nwould seem unlikely).\n\n\n## Material UI (or MUI) Version 5 Notes\nVersion 5 of MUI has some breaking changes.\n\nVersion 0.10.x of MUIRWIK has lots of breaking changes.\n\nA brief summary is as follows:\n* The move to Material UI version 5 (or MUI 5 as it is called now) created some breaking changes.\n* Since there was already breaking changes, I took the opportunity to tidy things up resulting in more breaking changes.\n* The \"m\" prefix convention on components has gone. For example mCard is now card\n* The \"M\" prefix on Props and Enums has also gone, so MButtonColor is now ButtonColor\n* Some components that were in sub-packages have been moved out to the main components package for consistency\n* The parameter Convention has changed. The old MUIRWIK had very large function param lists with lots of defaults.\nThis made it a bit hard in the IDE to see what was going on. It also made more work when creating the wrappers.\nVersion 0.5 has gone to a much more limited set of params, with only required props and those props which are almost\nalways used. Other props are accessible by attrs.*\n* Props are more type safe. By using property delegates as well getter and setters it is possible to type\nthe Props and have them converted to the proper types when set. The old version relied on the function\nparameters to do the conversion in the wrapping function. Now all Props should have the correct type.\n\nThis will cause some pain if upgrading from the old version. Some depreciated functions remain to help ease the conversion.\n\nSome thought was put into should the component names be capitalized like they are in JSX and Compose, however \nthe decision was made to stick to lowercase letters for function names. This is more a Kotlin coding convention. In Compose,\nthe composables are annotated and the IDE is then happy with the naming convention. In normal functions, the IDE\n(with default settings) complains about functions starting with an uppercase character. Another reason is all the \nreference applications seen seems to use lowercase names for function components. All the RBuilder functions seem\nto start with lowercase characters. So we have gone for lowercase function names by convention.\n\nMuirwik tries to be a more typesafe Kotlin wrapper to MUI rather than a straight copy of the JSX components of MUI.\n\n## IR-Compiler\nAt time of writing using the IR-Compiler with the [Kotlin Wrappers](https://github.com/JetBrains/kotlin-wrappers), \nparticularly the  React Wrappers, has some [issues](https://kotlinlang.slack.com/archives/C0B8L3U69/p1585318146030900) \n(or at least requires some extra code to make things work properly).\n\nThese changes were added to the IR-Compiler branch, and have now been merged into master. \nIn 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.\n\nAt time of writing, the IR compiler is still alpha and does not yet support incremental compilation. \nFor this reason, during development, it is faster (in terms of edit/rebuild/view result cycle) to\nuse the legacy compiler. \n\nThe version release to Maven Central will be built with js(BOTH). Projects using Muirwik should therefore be\nable to use js(LEGACY) or js(IR).\n\n\n## To Get Started\n\n### The starter App\nA good place to get started is to look at the separate [starter app project](https://github.com/cfnz/muirwik-starterapp) which is a minimal\nexample 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.\n\n### Adding Muirwik as a dependency\nAdd the Muirwik dependency to your own app as follows:\n(Note: in Kotlin 1.4.0 and earlier, the kotlin-styled version was 1.0.0 instead of that shown below)\n```\nrepositories {\n    ...\n    mavenCentral()\n}\n\ndependencies {\n    ...\n    implementation(\"org.jetbrains\", \"kotlin-styled\", \"5.3.3-$kotlinJsVersion\")\n    implementation(\"com.ccfraser.muirwik:muirwik-components:0.10.1\")\n}\n```\n\n### Compile Muirwik\nIf you want to get the source of Muirwik and compile locally, you can do the following.\n\nNote that the muirwik-testapp is a good source of information on how to use the components.\n\nMake sure you have java, git and the yarn package manager installed (and not the yarn that comes with cmdtest in Ubuntu :-)), \nthen the following should work (possibly may also need npm installed):\n\n    git clone https://github.com/cfnz/muirwik.git\n    cd muirwik\n    ./gradlew :muirwik-testapp:build\n    ./gradlew :muirwik-testapp:run\n\nIn Windows, it is probably (but have not tried it) more like:\n\n    git clone https://github.com/cfnz/muirwik.git\n    cd muirwik\n    gradlew.bat :muirwik-testapp:build\n    gradlew.bat :muirwik-testapp:run\n\nNote that I have not taken the time to make the demo app perfect. Some components could be\nlaid out better. To see what is possible, see the [Material UI](https://material-ui.com/) demo.\n\n\n## Background\nI started this off as a process to learn Kotlin. I wanted to do some web development and\nin the past used things like Vaadin and before that a small amount of facelets and jsf. \n\nWatching [David Ford's KotlinConf Videos](https://www.youtube.com/watch?v=FDOECr-sT6U) got me started down the Kotlin \njavascript and React trail... I have learnt lots of things along the way (and still have much more to learn!).\n\nBy reading the above, you will note that I am no Kotlin, javascript (and by extension, node or webpack) expert... there\nhas been lots of leanings along the way, and I no doubt have done things in not the most perfect way.\n\nSwitching from create-react-kotlin-app to using Gradle, yarn/npm and webpack directly also added to the learning\ncurve but helped in the long run. This was inspired after watching [Gaetan Zoritchak's talk](https://www.youtube.com/watch?v=1Pu0TYJJ2Tw). \n\nHowever, what this is, is a working multi-module Kotlin DSL gradle build that wraps quite a large javascript material \ndesign library. It provides a working demo app (see [screenshots](https://github.com/cfnz/muirwik/issues/1)) and starter\napp which is quite a good starting point for real applications... (at least I think so). Quite a few hours were spent \njust trying to make the basic development workflow work.\n\n## Todo\nNot much unless you want to move to the new non-legacy version of the kotlin react wrappers... (as mentioned above)\n\n### Tests\nThere are none, zip, zero, naught. The Material UI framework has them, but other than the test app, which is for user\nbased testing and experimentation, there is nothing else. I am not familiar with any javascript testing framework, so \nthe only way I have tested thus far is with the demo app.\n\n### State Management\nState management via Redux (or something) is something I have been meaning to look into. In the test app, most of the\nstate is in local vars rather than in State objects. I tried both, but saw no real benefit in the state objects rather \nthan state vars. It didn't seem to help with hot module reloading either. It didn't seem to help with anything much. \nPerhaps, with Redux it might all be quite different... it would be nice if Hot Module Reloading worked with state (as \nseen in various React videos) and maybe it would with Redux, but I have not gone down that track yet.\n\nTalking of HMR, I have it enabled in the development workflow... even without reloading of current state, it does\nreload the app better than without it. \n\n## Contributing\nFeedback and contributions are welcome :-). \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcfnz%2Fmuirwik","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcfnz%2Fmuirwik","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcfnz%2Fmuirwik/lists"}