0.1.0 Module Review (#130)

* button * card * checkbox, radio, form-field * chips * circular-progress * data-table * icons * icons usage * icons showcase * ripple * typography * dialog * drawer * elevation * fab * floating-label * floating-label * icon-button * image-list * line-ripple * linear-progress * notched-outline * touch-target * tab-bar * switch * snackbar * menu * select * slider * segmented-button * text-field * menu-surface * tooltip * top-app-bar * list * layout-grid * README
mpetuska · May 27, 2022 · 1a6d1f8 · 1a6d1f8
1 parent a9de40b
commit 1a6d1f8
Show file tree

Hide file tree

Showing 183 changed files with 4,738 additions and 3,858 deletions.
diff --git a/README.md b/README.md
@@ -21,8 +21,7 @@ is also available, which brings in all KMDC modules as transitive dependencies u
 Either approach can be installed by declaring relevant dependencies in your `jsMain` sourceSet.
 
 Additionally, you need to enable SCSS support. This is done by adding required npm dev dependencies to your sourceSet
-and then
-enabling them via [`webpack.config.d/scss.js`](gradle/webpack.config.d/scss.js) file.
+and then enabling them via [`webpack.config.d/scss.js`](gradle/webpack.config.d/scss.js) file.
 
 ```kotlin
 plugins {
@@ -58,8 +57,8 @@ kotlin {
 Most of the API maps closely to MDC JS API, making all examples there semi-valid. KMDC components follow a specific
 naming convention to make its components more discoverable as well. The convention
 is `MDC[UpperCamelCaseMDCComponentName]` (e.g. `MDCTopAppBar`) for the top-level component
-and `UpperCamelCaseLogicalName` for all subcomponents.
-Most of the components also follow the same argument order schema:
+and `UpperCamelCaseLogicalName` for all subcomponents. Most of the components also follow the same argument order
+schema:
 
 1. `...requiredMdcOptions` - MDC-specific options with no default values
 2. `...optionalMdcOptions` - MDC-specific options with default values
@@ -93,59 +92,59 @@ fun Showcase() {
 
 Here's a tracker list of currently completed [material-components-web] modules:
 
-- [ ] mdc-animation (SASS)
-- [x] mdc-auto-init (won't wrap)
-- [x] mdc-banner
-- [x] mdc-base (won't wrap)
-- [x] mdc-button
-- [x] mdc-card
-- [x] mdc-checkbox
-- [x] mdc-chips
-- [x] mdc-circular-progress
-- [x] mdc-data-table
-- [x] mdc-density (won't wrap)
-- [x] mdc-dialog
-- [x] mdc-dom (won't wrap)
-- [x] mdc-drawer
-- [x] mdc-elevation
-- [x] mdc-fab
-- [x] mdc-feature-targeting (won't wrap)
-- [x] mdc-floating-label
-- [x] mdc-form-field
-- [x] mdc-icon-button
-- [x] mdc-image-list
-- [x] mdc-layout-grid
-- [x] mdc-line-ripple
-- [x] mdc-linear-progress
-- [x] mdc-list
-- [x] mdc-menu-surface
-- [x] mdc-menu
-- [ ] mdc-notched-outline
-- [x] mdc-progress-indicator (won't wrap)
-- [x] mdc-radio
-- [x] mdc-ripple
-- [ ] mdc-rtl (SASS)
-- [x] mdc-segmented-button
-- [x] mdc-select
-- [ ] mdc-shape (SASS)
-- [x] mdc-slider
-- [x] mdc-snackbar
-- [x] mdc-switch
-- [x] mdc-tab-bar
-- [x] mdc-tab-indicator
-- [x] mdc-tab-scroller
-- [x] mdc-tab
-- [x] mdc-textfield
-- [ ] mdc-theme (SASS)
-- [x] mdc-tokens (won't wrap)
-- [x] mdc-tooltip
-- [x] mdc-top-app-bar
-- [x] mdc-touch-target
-- [x] mdc-typography
+- [ ] kmdc-animation (SASS)
+- [ ] kmdc-auto-init (won't wrap)
+- [x] kmdc-banner
+- [ ] kmdc-base (won't wrap)
+- [x] kmdc-button
+- [x] kmdc-card
+- [x] kmdc-checkbox
+- [x] kmdc-chips
+- [x] kmdc-circular-progress
+- [x] kmdc-data-table
+- [ ] kmdc-density (won't wrap)
+- [x] kmdc-dialog
+- [ ] kmdc-dom (won't wrap)
+- [x] kmdc-drawer
+- [x] kmdc-elevation
+- [x] kmdc-fab
+- [ ] kmdc-feature-targeting (won't wrap)
+- [x] kmdc-floating-label
+- [x] kmdc-form-field
+- [x] kmdc-icon-button
+- [x] kmdc-image-list
+- [x] kmdc-layout-grid
+- [x] kmdc-line-ripple
+- [x] kmdc-linear-progress
+- [x] kmdc-list
+- [x] kmdc-menu-surface
+- [x] kmdc-menu
+- [x] kmdc-notched-outline
+- [ ] kmdc-progress-indicator (won't wrap)
+- [x] kmdc-radio
+- [x] kmdc-ripple
+- [ ] kmdc-rtl (SASS)
+- [x] kmdc-segmented-button
+- [x] kmdc-select
+- [ ] kmdc-shape (SASS)
+- [x] kmdc-slider
+- [x] kmdc-snackbar
+- [x] kmdc-switch
+- [x] kmdc-tab-bar
+- [x] kmdc-tab-indicator
+- [x] kmdc-tab-scroller
+- [x] kmdc-tab
+- [x] kmdc-textfield
+- [ ] kmdc-theme (SASS)
+- [ ] kmdc-tokens (won't wrap)
+- [x] kmdc-tooltip
+- [x] kmdc-top-app-bar
+- [x] kmdc-touch-target
+- [x] kmdc-typography
 
 Other libraries and extensions:
 
-- [x] material-icons
+- [x] kmdc-icons
 
 ### Module Structure
 

diff --git a/build-conventions/src/main/kotlin/convention.kmdc.gradle.kts b/build-conventions/src/main/kotlin/convention.kmdc.gradle.kts
@@ -28,7 +28,7 @@ afterEvaluate {
   extensions.configure(KotlinMultiplatformExtension::class.java) {
     sourceSets.jsMain.configure {
       dependencies {
-        api(kmdc("base"))
+        if (project.name != "kmdc-base") api(kmdc("base"))
         api(npm(kmdc.module.get(), kmdc.version.get()))
       }
     }

diff --git a/katalog/katalog-runtime/src/jsMain/kotlin/domain/Katalog.kt b/katalog/katalog-runtime/src/jsMain/kotlin/domain/Katalog.kt
@@ -1,20 +1,23 @@
 package dev.petuska.katalog.runtime.domain
 
-import dev.petuska.katalog.runtime.theme.*
+import dev.petuska.katalog.runtime.theme.KatalogTheme
 
 public data class Katalog internal constructor(
   val id: String,
   val title: String,
   val subtitle: String?,
   val contentRootUrl: String?,
+  val debug: Boolean,
   val showcases: List<Showcase>,
-  public val theme: KatalogTheme,
+  val theme: KatalogTheme,
 ) {
+  @Suppress("LongParameterList")
   public class Builder(
     public var id: String = "katalog",
     public var title: String = "Katalog",
     public var subtitle: String? = null,
     public var contentRootUrl: String? = null,
+    public var debug: Boolean = false,
     public var theme: KatalogTheme = KatalogTheme(),
     public var showcases: MutableList<Showcase>
   ) {
@@ -23,6 +26,7 @@ public data class Katalog internal constructor(
       title = title,
       subtitle = subtitle,
       contentRootUrl = contentRootUrl,
+      debug = debug,
       theme = theme,
       showcases = showcases,
     )

diff --git a/katalog/katalog-runtime/src/jsMain/kotlin/ui/ShowcaseBox.kt b/katalog/katalog-runtime/src/jsMain/kotlin/ui/ShowcaseBox.kt
@@ -23,8 +23,9 @@ private object ShowcaseBoxStyle : StyleSheet() {
 
 @Composable
 internal fun ShowcaseBox(showcase: Showcase) = with(showcase) {
+  val debug = katalog.debug
   LaunchedEffect(showcase) {
-    console.asDynamic().clear(); Unit
+    if (!debug) console.asDynamic().clear()
   }
   val contentRootUrl = katalog.contentRootUrl
   val location = contentRootUrl?.let {

diff --git a/kmdc/kmdc-banner/src/jsMain/kotlin/Actions.kt b/kmdc/kmdc-banner/src/jsMain/kotlin/Actions.kt
@@ -15,7 +15,7 @@ public interface MDCBannerActionsScope : ElementScope<HTMLDivElement>
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
-@MDCDsl
+@MDCContentDsl
 @Composable
 public fun MDCBannerScope.Actions(
   attrs: MDCAttrsRaw<HTMLDivElement>? = null,
@@ -35,18 +35,20 @@ public interface MDCBannerActionScope : ElementScope<HTMLButtonElement>
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
-@MDCDsl
+@MDCContentDsl
 @Composable
 private fun MDCBannerActionsScope.Action(
   primary: Boolean,
   type: MDCButtonType,
   icon: MDCButtonIconType,
+  touch: Boolean,
   attrs: MDCAttrsRaw<HTMLButtonElement>?,
   content: MDCContent<MDCButtonScope<HTMLButtonElement>>?,
 ) {
   MDCButton(
     type = type,
     icon = icon,
+    touch = touch,
     attrs = {
       classes("mdc-banner__${if (primary) "primary" else "secondary"}-action")
       type(ButtonType.Button)
@@ -59,59 +61,63 @@ private fun MDCBannerActionsScope.Action(
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
-@MDCDsl
+@MDCContentDsl
 @Composable
 public fun MDCBannerActionsScope.PrimaryAction(
   type: MDCButtonType = MDCButtonType.Text,
   icon: MDCButtonIconType = MDCButtonIconType.None,
+  touch: Boolean = false,
   attrs: MDCAttrsRaw<HTMLButtonElement>? = null,
   content: MDCContent<MDCButtonScope<HTMLButtonElement>>? = null,
 ) {
-  Action(true, type, icon, attrs, content)
+  Action(primary = true, type = type, icon = icon, touch = touch, attrs = attrs, content = content)
 }
 
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
-@MDCDsl
+@MDCContentDsl
 @Composable
 public fun MDCBannerActionsScope.PrimaryAction(
   text: String,
   type: MDCButtonType = MDCButtonType.Text,
   icon: MDCButtonIconType = MDCButtonIconType.None,
+  touch: Boolean = false,
   attrs: MDCAttrsRaw<HTMLButtonElement>? = null,
 ) {
-  Action(true, type, icon, attrs) {
+  Action(primary = true, type = type, icon = icon, touch = touch, attrs = attrs) {
     Label(text)
   }
 }
 
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
-@MDCDsl
+@MDCContentDsl
 @Composable
 public fun MDCBannerActionsScope.SecondaryAction(
   type: MDCButtonType = MDCButtonType.Text,
   icon: MDCButtonIconType = MDCButtonIconType.None,
+  touch: Boolean = false,
   attrs: MDCAttrsRaw<HTMLButtonElement>? = null,
   content: MDCContent<MDCButtonScope<HTMLButtonElement>>? = null,
 ) {
-  Action(false, type, icon, attrs, content)
+  Action(primary = false, type = type, icon = icon, touch = touch, attrs = attrs, content = content)
 }
 
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
-@MDCDsl
+@MDCContentDsl
 @Composable
 public fun MDCBannerActionsScope.SecondaryAction(
   text: String,
   type: MDCButtonType = MDCButtonType.Text,
   icon: MDCButtonIconType = MDCButtonIconType.None,
+  touch: Boolean = false,
   attrs: MDCAttrsRaw<HTMLButtonElement>? = null,
 ) {
-  Action(false, type, icon, attrs) {
+  Action(primary = false, type = type, icon = icon, touch = touch, attrs = attrs) {
     Label(text)
   }
 }
diff --git a/kmdc/kmdc-banner/src/jsMain/kotlin/Content.kt b/kmdc/kmdc-banner/src/jsMain/kotlin/Content.kt
@@ -11,7 +11,7 @@ public interface MDCBannerContentScope : ElementScope<HTMLDivElement>
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
-@MDCDsl
+@MDCContentDsl
 @Composable
 public fun MDCBannerScope.Content(
   attrs: MDCAttrsRaw<HTMLDivElement>? = null,
@@ -29,7 +29,7 @@ public fun MDCBannerScope.Content(
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
-@MDCDsl
+@MDCContentDsl
 @Composable
 public fun MDCBannerContentScope.Text(
   attrs: MDCAttrsRaw<HTMLDivElement>? = null,
@@ -47,7 +47,7 @@ public fun MDCBannerContentScope.Text(
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
-@MDCDsl
+@MDCContentDsl
 @Composable
 public fun MDCBannerContentScope.Text(
   text: String,
@@ -61,7 +61,7 @@ public interface MDCBannerGraphicScope : ElementScope<HTMLDivElement>
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
-@MDCDsl
+@MDCContentDsl
 @Composable
 public fun MDCBannerContentScope.Graphic(
   attrs: MDCAttrsRaw<HTMLDivElement>? = null,
@@ -81,7 +81,7 @@ public fun MDCBannerContentScope.Graphic(
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
-@MDCDsl
+@MDCContentDsl
 @Composable
 public fun MDCBannerGraphicScope.Icon(
   attrs: MDCAttrsRaw<HTMLElement>? = null,

diff --git a/kmdc/kmdc-banner/src/jsMain/kotlin/MDCBanner.kt b/kmdc/kmdc-banner/src/jsMain/kotlin/MDCBanner.kt
@@ -1,10 +1,11 @@
 package dev.petuska.kmdc.banner
 
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
 import dev.petuska.kmdc.core.*
-import org.jetbrains.compose.web.attributes.*
-import org.jetbrains.compose.web.dom.*
-import org.w3c.dom.*
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.Div
+import org.jetbrains.compose.web.dom.ElementScope
+import org.w3c.dom.HTMLDivElement
 
 @JsModule("@material/banner/styles.scss")
 private external val Style: dynamic
@@ -15,7 +16,7 @@ public interface MDCBannerScope : ElementScope<HTMLDivElement>
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
-@MDCDsl
+@MDCContentDsl
 @Composable
 public fun MDCBanner(
   open: Boolean,
@@ -34,7 +35,7 @@ public fun MDCBanner(
     applyAttrs(attrs)
   }) {
     MDCProvider(::MDCBanner) {
-      MDCSideEffectNew<MDCBanner>(open, centered, mobileStacked) {
+      MDCSideEffectNew(open, centered, mobileStacked) {
         if (open) open() else close(CloseReason.UNSPECIFIED)
       }
       if (fixed) {

diff --git a/kmdc/kmdc-banner/src/jsMain/kotlin/events.kt → .../kmdc-banner/src/jsMain/kotlin/_events.kt b/kmdc/kmdc-banner/src/jsMain/kotlin/events.kt → .../kmdc-banner/src/jsMain/kotlin/_events.kt
@@ -1,6 +1,13 @@
 package dev.petuska.kmdc.banner
 
-import dev.petuska.kmdc.core.*
+import dev.petuska.kmdc.core.MDCAttrsDsl
+import dev.petuska.kmdc.core.MDCEventListener
+import dev.petuska.kmdc.core.addMdcEventListener
+import kotlin.js.Json
+
+public external interface MDCBannerCloseEventDetail {
+  public val reason: CloseReason
+}
 
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
@@ -22,14 +29,14 @@ public fun MDCBannerAttrsScope.onClosed(listener: MDCEventListener<MDCBannerClos
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
 @MDCAttrsDsl
-public fun MDCBannerAttrsScope.onOpening(listener: MDCEventListener<MDCBannerCloseEventDetail>) {
+public fun MDCBannerAttrsScope.onOpening(listener: MDCEventListener<Json>) {
   addMdcEventListener("MDCBanner:opening", listener)
 }
 
 /**
  * [JS API](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-banner)
  */
 @MDCAttrsDsl
-public fun MDCBannerAttrsScope.onOpened(listener: MDCEventListener<MDCBannerCloseEventDetail>) {
+public fun MDCBannerAttrsScope.onOpened(listener: MDCEventListener<Json>) {
   addMdcEventListener("MDCBanner:opened", listener)
 }