{"id":15041013,"url":"https://github.com/mpetuska/kmdc","last_synced_at":"2025-04-07T11:08:24.016Z","repository":{"id":39133135,"uuid":"430798310","full_name":"mpetuska/kmdc","owner":"mpetuska","description":"Kompose wrappers for material-components-web","archived":false,"fork":false,"pushed_at":"2024-09-09T16:45:23.000Z","size":5940,"stargazers_count":123,"open_issues_count":5,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-31T09:06:51.497Z","etag":null,"topics":["kotlin","kotlin-js","kotlin-js-wrappers","multiplatform-compose"],"latest_commit_sha":null,"homepage":"https://kmdc.petuska.dev","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mpetuska.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-11-22T17:12:43.000Z","updated_at":"2025-03-10T08:41:20.000Z","dependencies_parsed_at":"2024-09-25T01:42:37.440Z","dependency_job_id":null,"html_url":"https://github.com/mpetuska/kmdc","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":"mpetuska/template-kmp-library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpetuska%2Fkmdc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpetuska%2Fkmdc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpetuska%2Fkmdc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mpetuska%2Fkmdc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mpetuska","download_url":"https://codeload.github.com/mpetuska/kmdc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640464,"owners_count":20971557,"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","kotlin-js","kotlin-js-wrappers","multiplatform-compose"],"created_at":"2024-09-24T20:45:24.226Z","updated_at":"2025-04-07T11:08:23.999Z","avatar_url":"https://github.com/mpetuska.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Slack chat](https://img.shields.io/badge/kotlinlang-%23kmdc-green?logo=slack\u0026style=flat-square)](https://kotlinlang.slack.com/archives/CNR7ARJGJ)\n[![Dokka docs](https://img.shields.io/badge/docs-dokka-orange?style=flat-square)](http://mpetuska.github.io/kmdc)\n[![Version maven-central](https://img.shields.io/maven-central/v/dev.petuska/kmdc?logo=apache-maven\u0026style=flat-square)](https://mvnrepository.com/artifact/dev.petuska/kmdc/latest)\n[![Version maven-snapshot](https://img.shields.io/maven-metadata/v?metadataUrl=https%3A%2F%2Fs01.oss.sonatype.org%2Fcontent%2Frepositories%2Fsnapshots%2Fdev%2Fpetuska%2Fkmdc%2Fmaven-metadata.xml\u0026logo=apache-maven\u0026label=maven-snapshot\u0026style=flat-square)](https://s01.oss.sonatype.org/content/repositories/snapshots/dev/petuska/kmdc/)\n\n# Kompose Material Design Components (KMDC)\n\n\u003e The library is currently very experimental with no API stability guarantees. Breaking changes are being introduced\n\u003e each release.\n\nA set of Kotlin wrappers\nover [material-components-web@14.0.0][material-components-web]\nlibrary providing Jetbrains Compose DSL for building beautiful WEB UIs. The API surface is identical to JS version,\nexcept for few places where slight adjustments are made to make it more fluid for compose.\n\n## Setup\n\nKMDC wraps each MDC module 1:1 and as such allows you to pick and choose which exact components you'd like to use. This\nis recommended approach as it helps in reducing bundle size. However, for the lazy ones out there, a \"shortcut\" module\nis also available, which brings in all KMDC modules as transitive dependencies under a single dependency.\n\nEither approach can be installed by declaring relevant dependencies in your `jsMain` sourceSet.\n\nAdditionally, you need to enable SCSS support.\n\n```kotlin\nplugins {\n    kotlin(\"multiplatform\")\n    id(\"org.jetbrains.compose\")\n}\nkotlin {\n    js {\n        browser {\n            commonWebpackConfig {\n                cssSupport { enabled.set(true) }\n                scssSupport { enabled.set(true) }\n            }\n        }\n    }\n    sourceSets {\n        named(\"jsMain\") {\n            dependencies {\n                // Be lazy and use the shortcut\n                implementation(\"dev.petuska:kmdc:_\")\n                implementation(\"dev.petuska:kmdcx:_\")\n\n                // Do some work and see dem gains\n                implementation(\"dev.petuska:kmdc-button:_\")\n                implementation(\"dev.petuska:kmdc-radio:_\")\n                implementation(\"dev.petuska:kmdcx-icons:_\")\n            }\n        }\n    }\n}\n```\n\n### Usage\n\nMost of the API maps closely to MDC JS API, making all examples there semi-valid. KMDC components follow a specific\nnaming convention to make its components more discoverable as well. The convention\nis `MDC[UpperCamelCaseMDCComponentName]` (e.g. `MDCTopAppBar`) for the top-level component\nand `UpperCamelCaseLogicalName` for all subcomponents. Most of the components also follow the same argument order\nschema:\n\n1. `...requiredMdcOptions` - MDC-specific options with no default values\n2. `...optionalMdcOptions` - MDC-specific options with default values\n3.`attrs: (AttrsBuilder\u003cout HTMLElement\u003e.() -\u003e Unit)? = null` - compose attributes builder for the underlying HTML element\n4.`content: (ComposableBuilder\u003cout HTMLElement\u003e.() -\u003e Unit)? = null` - compose inner content builder for the underlying HTML element\n\nHere's a quick peek how these things come together (more showcases can be found in\nthe [sandbox](./sandbox/src/jsMain/showcases))\n\n```kotlin\n@Composable\nfun Showcase() {\n    var checked by remember { mutableStateOf(false) } // Declaring controlled state\n\n    MDCFormField { // Using implicit `content` argument to wrap MDCCheckbox inside MDCFormField UI as recommended by the MDC docs\n        MDCCheckbox(\n            checked = checked,\n            label = \"Yes/No\",\n            attrs = { // Overriding underlying HTMLInput element attributes\n                onInput { checked = !checked }\n            }\n        ) // MDCCheckbox doesn't allow for additional inner content\n    }\n}\n```\n\n### Progress\n\nHere's a tracker list of currently completed [material-components-web] modules:\n\n- [ ] kmdc-animation (SASS)\n- [ ] kmdc-auto-init (won't wrap)\n- [x] kmdc-banner\n- [ ] kmdc-base (won't wrap)\n- [x] kmdc-button\n- [x] kmdc-card\n- [x] kmdc-checkbox\n- [x] kmdc-chips\n- [x] kmdc-circular-progress\n- [x] kmdc-data-table\n- [ ] kmdc-density (won't wrap)\n- [x] kmdc-dialog\n- [ ] kmdc-dom (won't wrap)\n- [x] kmdc-drawer\n- [x] kmdc-elevation\n- [x] kmdc-fab\n- [ ] kmdc-feature-targeting (won't wrap)\n- [x] kmdc-floating-label\n- [x] kmdc-form-field\n- [x] kmdc-icon-button\n- [x] kmdc-image-list\n- [x] kmdc-layout-grid\n- [x] kmdc-line-ripple\n- [x] kmdc-linear-progress\n- [x] kmdc-list\n- [x] kmdc-menu-surface\n- [x] kmdc-menu\n- [x] kmdc-notched-outline\n- [ ] kmdc-progress-indicator (won't wrap)\n- [x] kmdc-radio\n- [x] kmdc-ripple\n- [ ] kmdc-rtl (SASS)\n- [x] kmdc-segmented-button\n- [x] kmdc-select\n- [ ] kmdc-shape (SASS)\n- [x] kmdc-slider\n- [x] kmdc-snackbar\n- [x] kmdc-switch\n- [x] kmdc-tab-bar\n- [x] kmdc-tab-indicator\n- [x] kmdc-tab-scroller\n- [x] kmdc-tab\n- [x] kmdc-textfield\n- [ ] kmdc-theme (SASS)\n- [ ] kmdc-tokens (won't wrap)\n- [x] kmdc-tooltip\n- [x] kmdc-top-app-bar\n- [x] kmdc-touch-target\n- [x] kmdc-typography\n\nOther libraries and extensions:\n\n- [x] kmdc-icons\n\n### Module Structure\n\nKMDC project modules can be categorised into three groups:\n\n* Core MDC wrappers - grouped under [./kmdc](./kmdc) meta-module\n* Extensions of core wrappers or relevant non-kmdc wrappers - grouped under [./kmdcx](./kmdcx) meta-module\n\n### Developer Setup\n\n* Install JDK 11+\n* Run `./gradlew assemble` to build js binaries\n* Use `./sandbox/` to render components in browser (needs to be linked separately in IDEA)\n    * `./gradlew jsBrowserRun -t` to start development server\n    * Visit [http://localhost:3000](http://localhost:3000) to see your content\n    * If you're adding a new component, render it by creating [Showcases](./sandbox/src/jsMain/showcases/MDCButton.kt)\n      file for it\n    * Thanks to gradle continuous mode, any change in kmdc modules will trigger automatic refresh of sandbox and the\n      browser. It takes a few seconds after you save your changes, so be patient.\n\n\u003e Further details can be found\n\u003e in [Contributing Guidelines](./docs/CONTRIBUTING.md#what-should-i-know-before-i-get-started)\n\n## Contributing\n\nAll contributions are welcome. Have a look for\na [good first issue](https://github.com/mpetuska/kmdc/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)\nin the issue tracker, or open your own issue if you have some ideas. If you want to chat, either start\na [discussion](https://github.com/mpetuska/kmdc/discussions) or ping me\non [slack](https://kotlinlang.slack.com/team/UL1A5BA2X).\n\u003e Further details can be found in [Contributing Guidelines](./docs/CONTRIBUTING.md)\n\nThanks to all the people who contributed to kmdc so far!\n\n\u003ca href=\"https://github.com/mpetuska/kmdc/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=mpetuska/kmdc\" /\u003e\n\u003c/a\u003e\n\n[material-components-web]: https://github.com/material-components/material-components-web/tree/v14.0.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpetuska%2Fkmdc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmpetuska%2Fkmdc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmpetuska%2Fkmdc/lists"}