Add surface component

Author: matt-ramotar

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

@@ -28,6 +28,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/surface/Surface.kt

@@ -0,0 +1,45 @@
+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
+
+@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)
+        }
+    }
+}

componentbox/src/androidMain/kotlin/com/dropbox/componentbox/util/shape.kt

@@ -0,0 +1,15 @@
+package com.dropbox.componentbox.util
+
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.dropbox.componentbox.foundation.Shape
+
+fun Shape?.translate(size: Dp = 0.dp) = when (this) {
+    Shape.RectangleShape -> RectangleShape
+    Shape.RoundedCornerShape -> RoundedCornerShape(size)
+    Shape.CircleShape -> CircleShape
+    null -> RoundedCornerShape(size)
+}

componentbox/src/androidMain/kotlin/com/dropbox/componentbox/util/translate.kt

@@ -2,6 +2,7 @@ package com.dropbox.componentbox.util
 
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 
 @Composable

componentbox/src/commonMain/kotlin/com/dropbox/componentbox/foundation/BorderStroke.kt

@@ -0,0 +1,9 @@
+package com.dropbox.componentbox.foundation
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class BorderStroke(
+    val width: Int,
+    val color: Color
+)

componentbox/src/commonMain/kotlin/com/dropbox/componentbox/foundation/Component.kt

@@ -85,5 +85,17 @@ sealed class Component {
         var contentScale: ContentScale? = null,
         var color: String? = null
     ) : Component()
+
+    @Serializable
+    data class Surface(
+        val id: String,
+        var modifier: Modifier? = null,
+        var shape: Shape? = null,
+        var color: Color? = null,
+        var contentColor: Color? = null,
+        var borderStroke: BorderStroke? = null,
+        var elevation: Int? = null,
+        var components: MutableList<Component>? = null,
+    ) : Component()
 }
 

componentbox/src/commonMain/kotlin/com/dropbox/componentbox/foundation/ComponentType.kt

@@ -15,4 +15,5 @@ enum class ComponentType {
     Table,
     Text,
     Vector,
+    Surface
 }

componentbox/src/commonMain/kotlin/com/dropbox/componentbox/foundation/Shape.kt

@@ -0,0 +1,10 @@
+package com.dropbox.componentbox.foundation
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+enum class Shape {
+    RectangleShape,
+    RoundedCornerShape,
+    CircleShape
+}

componentbox/src/commonMain/kotlin/com/dropbox/componentbox/foundation/color.kt

@@ -1,5 +1,8 @@
 package com.dropbox.componentbox.foundation
 
+import kotlinx.serialization.Serializable
+
+@Serializable
 data class Color(
     val title: String,
     val light: Long,

desktop/src/jvmMain/kotlin/com/dropbox/componentbox/store/reducers/component/helpers/buildComponent.kt

@@ -17,5 +17,6 @@ internal fun ComponentType.build(id: String): Component {
         ComponentType.Table -> Component.Column(id, isLazy = true, isTable = true, modifier = Modifier())
         ComponentType.Text -> Component.Text(id, modifier = Modifier())
         ComponentType.Vector -> Component.Vector(id, modifier = Modifier())
+        ComponentType.Surface -> Component.Surface(id, modifier = Modifier())
     }
 }