Merge pull request #24 from dropbox/surface

Add surface component

Author: matt-ramotar

componentbox/build.gradle.kts

@@ -49,6 +49,8 @@ kotlin {
             dependencies {
                 api(compose.material)
                 api(compose.ui)
+                api(compose.foundation)
+                implementation(Deps.Compose.coilCompose)
             }
         }
 

componentbox/src/androidMain/kotlin/com/dropbox/componentbox/foundation/Themer.kt

@@ -21,5 +21,5 @@ actual abstract class Themer {
     abstract fun getColorResId(name: String?): Int?
 
     @Composable
-    abstract fun getTextStyle(name: String?): TextStyle
+    abstract fun getTextStyle(name: String?): TextStyle?
 }

componentbox/src/androidMain/kotlin/com/dropbox/componentbox/material/box/Inflate.kt

@@ -7,6 +7,11 @@ import com.dropbox.componentbox.foundation.Context
 import com.dropbox.componentbox.material.Inflate
 import com.dropbox.componentbox.util.build
 
+// This module targets JS
+// Until material and foundation are supported on JS
+// Changes to this file should be duplicated in jvmMain
+// TODO(https://github.com/dropbox/componentbox/issues/25)
+
 @Composable
 fun Component.Box.Inflate(context: Context?) {
     Box(modifier = modifier.build()) {

componentbox/src/androidMain/kotlin/com/dropbox/componentbox/material/button/Contained.kt

@@ -9,6 +9,11 @@ import com.dropbox.componentbox.foundation.Context
 import com.dropbox.componentbox.material.Inflate
 import com.dropbox.componentbox.util.build
 
+// This module targets JS
+// Until material and foundation are supported on JS
+// Changes to this file should be duplicated in jvmMain
+// TODO(https://github.com/dropbox/componentbox/issues/25)
+
 @Composable
 fun Component.Button.Contained(context: Context? = null) {
     Button(

componentbox/src/androidMain/kotlin/com/dropbox/componentbox/material/button/Inflate.kt

@@ -4,11 +4,16 @@ import androidx.compose.runtime.Composable
 import com.dropbox.componentbox.foundation.ButtonVariant
 import com.dropbox.componentbox.foundation.Component
 import com.dropbox.componentbox.foundation.Context
-import com.dropbox.componentbox.util.buttonVariant
+import com.dropbox.componentbox.util.translate
+
+// This module targets JS
+// Until material and foundation are supported on JS
+// Changes to this file should be duplicated in jvmMain
+// TODO(https://github.com/dropbox/componentbox/issues/25)
 
 @Composable
 fun Component.Button.Inflate(context: Context?) {
-    when (this.variant.buttonVariant()) {
+    when (this.variant.translate<ButtonVariant>()) {
         ButtonVariant.Contained -> Contained(context)
         ButtonVariant.Text -> TODO()
         ButtonVariant.Outlined -> TODO()

componentbox/src/androidMain/kotlin/com/dropbox/componentbox/material/column/Inflate.kt

@@ -14,6 +14,11 @@ import com.dropbox.componentbox.util.build
 import com.dropbox.componentbox.util.horizontal
 import com.dropbox.componentbox.util.vertical
 
+// This module targets JS
+// Until material and foundation are supported on JS
+// Changes to this file should be duplicated in jvmMain
+// TODO(https://github.com/dropbox/componentbox/issues/25)
+
 @Composable
 fun Component.Column.Inflate(context: Context?) {
     when (this.isLazy) {

componentbox/src/androidMain/kotlin/com/dropbox/componentbox/material/drawable/Inflate.kt

@@ -11,6 +11,11 @@ import com.dropbox.componentbox.foundation.Context
 import com.dropbox.componentbox.util.build
 import com.dropbox.componentbox.util.translate
 
+// This module targets JS
+// Until material and foundation are supported on JS
+// Changes to this file should be duplicated in jvmMain
+// TODO(https://github.com/dropbox/componentbox/issues/25)
+
 @Composable
 fun Component.Drawable.Inflate(context: Context?) {
     @DrawableRes

componentbox/src/androidMain/kotlin/com/dropbox/componentbox/material/inflate.kt

@@ -17,6 +17,11 @@ import com.dropbox.componentbox.material.text.Inflate
 import com.dropbox.componentbox.util.horizontal
 import com.dropbox.componentbox.util.vertical
 
+// This module targets JS
+// Until material and foundation are supported on JS
+// Changes to this file should be duplicated in jvmMain
+// TODO(https://github.com/dropbox/componentbox/issues/25)
+
 @Composable
 actual fun Component.Inflate(context: Context?) {
     when (this) {
@@ -28,6 +33,7 @@ actual fun Component.Inflate(context: Context?) {
         is Component.Switch -> TODO()
         is Component.Text -> Inflate(context)
         is Component.Vector -> TODO()
+        is Component.Surface -> Inflate(context)
     }
 }
 

componentbox/src/androidMain/kotlin/com/dropbox/componentbox/material/row/Inflate.kt

@@ -14,6 +14,11 @@ import com.dropbox.componentbox.util.build
 import com.dropbox.componentbox.util.horizontal
 import com.dropbox.componentbox.util.vertical
 
+// This module targets JS
+// Until material and foundation are supported on JS
+// Changes to this file should be duplicated in jvmMain
+// TODO(https://github.com/dropbox/componentbox/issues/25)
+
 @Composable
 fun Component.Row.Inflate(context: Context?) {
     when (this.isLazy) {

componentbox/src/androidMain/kotlin/com/dropbox/componentbox/material/surface/Surface.kt

@@ -0,0 +1,50 @@
+package com.dropbox.componentbox.material.surface
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.dropbox.componentbox.foundation.Component
+import com.dropbox.componentbox.foundation.Context
+import com.dropbox.componentbox.material.Inflate
+import com.dropbox.componentbox.util.build
+import com.dropbox.componentbox.util.translate
+
+// This module targets JS
+// Until material and foundation are supported on JS
+// Changes to this file should be duplicated in jvmMain
+// TODO(https://github.com/dropbox/componentbox/issues/25)
+
+@Composable
+fun Component.Surface.Inflate(context: Context?) {
+    val isDark = isSystemInDarkTheme() || !MaterialTheme.colors.isLight
+
+    val color = if (this.color?.dark != null && this.color?.light != null) {
+        if (isDark) Color(this.color!!.dark) else Color(this.color!!.light)
+    } else {
+        MaterialTheme.colors.surface
+    }
+
+    val contentColor = if (this.contentColor?.dark != null && this.contentColor?.light != null) {
+        if (isDark) Color(this.contentColor!!.dark) else Color(this.contentColor!!.light)
+    } else {
+        MaterialTheme.colors.onSurface
+    }
+
+    val shape = this.shape.translate()
+    val elevation = this.elevation?.dp ?: 0.dp
+
+    Surface(
+        modifier = modifier.build(),
+        shape = shape,
+        color = color,
+        contentColor = contentColor,
+        elevation = elevation
+    ) {
+        components?.forEach { component ->
+            component.Inflate(context)
+        }
+    }
+}