Add Box widget schema for redwood layout

redwood-layout-composeui/src/commonMain/kotlin/app/cash/redwood/layout/composeui/ComposeUiRedwoodLayoutWidgetFactory.kt

@@ -16,13 +16,18 @@
 package app.cash.redwood.layout.composeui
 
 import androidx.compose.runtime.Composable
+import app.cash.redwood.layout.widget.Box
 import app.cash.redwood.layout.widget.Column
 import app.cash.redwood.layout.widget.RedwoodLayoutWidgetFactory
 import app.cash.redwood.layout.widget.Row
 import app.cash.redwood.layout.widget.Spacer
 import app.cash.redwood.yoga.FlexDirection
 
 public class ComposeUiRedwoodLayoutWidgetFactory : RedwoodLayoutWidgetFactory<@Composable () -> Unit> {
+  override fun Box(): Box<() -> Unit> {
+    TODO("Not yet implemented")
+  }
+
   override fun Column(): Column<@Composable () -> Unit> = ComposeUiFlexContainer(FlexDirection.Column)
   override fun Row(): Row<@Composable () -> Unit> = ComposeUiFlexContainer(FlexDirection.Row)
   override fun Spacer(): Spacer<@Composable () -> Unit> = ComposeUiSpacer()

redwood-layout-dom/src/commonMain/kotlin/app/cash/redwood/layout/dom/HTMLElementRedwoodLayoutWidgetFactory.kt

@@ -20,6 +20,7 @@ import app.cash.redwood.layout.api.Constraint
 import app.cash.redwood.layout.api.CrossAxisAlignment
 import app.cash.redwood.layout.api.MainAxisAlignment
 import app.cash.redwood.layout.api.Overflow
+import app.cash.redwood.layout.widget.Box
 import app.cash.redwood.layout.widget.Column
 import app.cash.redwood.layout.widget.FlexContainer
 import app.cash.redwood.layout.widget.RedwoodLayoutWidgetFactory
@@ -35,6 +36,10 @@ import org.w3c.dom.HTMLElement
 public class HTMLElementRedwoodLayoutWidgetFactory(
   private val document: Document,
 ) : RedwoodLayoutWidgetFactory<HTMLElement> {
+  override fun Box(): Box<HTMLElement> {
+    TODO("Not yet implemented")
+  }
+
   override fun Column(): Column<HTMLElement> =
     HTMLFlexContainer(
       value = document.createElement("div") as HTMLDivElement,

redwood-layout-schema/redwood-api.xml

@@ -21,6 +21,18 @@
     <property tag="1" name="width" type="app.cash.redwood.ui.Dp"/>
     <property tag="2" name="height" type="app.cash.redwood.ui.Dp"/>
   </widget>
+  <widget tag="4" type="app.cash.redwood.layout.Box">
+    <property tag="1" name="width" type="app.cash.redwood.layout.api.Constraint"/>
+    <property tag="2" name="minWidth" type="app.cash.redwood.ui.Dp"/>
+    <property tag="3" name="maxWidth" type="app.cash.redwood.ui.Dp"/>
+    <property tag="4" name="height" type="app.cash.redwood.layout.api.Constraint"/>
+    <property tag="5" name="minHeight" type="app.cash.redwood.ui.Dp"/>
+    <property tag="6" name="maxHeight" type="app.cash.redwood.ui.Dp"/>
+    <property tag="7" name="margin" type="app.cash.redwood.ui.Margin"/>
+    <property tag="8" name="horizontalAlignment" type="app.cash.redwood.layout.api.CrossAxisAlignment"/>
+    <property tag="9" name="verticalAlignment" type="app.cash.redwood.layout.api.CrossAxisAlignment"/>
+    <children tag="1" name="children"/>
+  </widget>
   <modifier tag="1" type="app.cash.redwood.layout.Grow">
     <property name="value" type="kotlin.Double"/>
   </modifier>

redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/modifiers.kt

@@ -46,47 +46,47 @@ public data class Shrink(
 /**
  * Add additional space around the item.
  */
-@Modifier(3, RowScope::class, ColumnScope::class)
+@Modifier(3, RowScope::class, ColumnScope::class, BoxScope::class)
 public data class Margin(
   val margin: app.cash.redwood.ui.Margin,
 )
 
 /**
  * Set the alignment for an item along the horizontal axis.
  */
-@Modifier(4, ColumnScope::class)
+@Modifier(4, ColumnScope::class, BoxScope::class)
 public data class HorizontalAlignment(
   val alignment: CrossAxisAlignment,
 )
 
 /**
  * Set the alignment for an item along the vertical axis.
  */
-@Modifier(5, RowScope::class)
+@Modifier(5, RowScope::class, BoxScope::class)
 public data class VerticalAlignment(
   val alignment: CrossAxisAlignment,
 )
 
 /**
  * Set a required width for an item.
  */
-@Modifier(6, RowScope::class, ColumnScope::class)
+@Modifier(6, RowScope::class, ColumnScope::class, BoxScope::class)
 public data class Width(
   val width: Dp,
 )
 
 /**
  * Set a required height for an item.
  */
-@Modifier(7, RowScope::class, ColumnScope::class)
+@Modifier(7, RowScope::class, ColumnScope::class, BoxScope::class)
 public data class Height(
   val height: Dp,
 )
 
 /**
  * Set a required width and height for an item.
  */
-@Modifier(8, RowScope::class, ColumnScope::class)
+@Modifier(8, RowScope::class, ColumnScope::class, BoxScope::class)
 public data class Size(
   val width: Dp,
   val height: Dp,

redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/schema.kt

@@ -19,17 +19,23 @@ import app.cash.redwood.schema.Schema
 
 @Schema(
   [
-    Row::class,
+    // Widgets
+    Box::class,
     Column::class,
+    Row::class,
     Spacer::class,
+    // Next tag: 5
+
+    // Modifiers
     Grow::class,
-    Shrink::class,
-    Margin::class,
+    Height::class,
     HorizontalAlignment::class,
+    Margin::class,
+    Shrink::class,
+    Size::class,
     VerticalAlignment::class,
     Width::class,
-    Height::class,
-    Size::class,
+    // Next tag: 9
   ],
 )
 public interface RedwoodLayout

redwood-layout-schema/src/main/kotlin/app/cash/redwood/layout/widgets.kt

@@ -169,3 +169,77 @@ public data class Spacer(
   @Default("Dp(0.0)")
   val height: Dp,
 )
+
+/**
+ * Lays out widgets along the z-axis in a column.
+ *
+ * Minimum and maximum heights do not include margins.
+ */
+@Widget(4)
+public data class Box(
+  /**
+   * Sets whether the box's width will match its widest child ([Constraint.Wrap]) or match the width
+   * of its parent ([Constraint.Fill]).
+   */
+  @Property(1)
+  @Default("Constraint.Wrap")
+  val width: Constraint,
+
+  @Property(2)
+  @Default("Dp(0.0)")
+  val minWidth: Dp,
+
+  @Property(3)
+  @Default("Dp(Double.MAX_VALUE)")
+  val maxWidth: Dp,
+
+  /**
+   * Sets whether the box's height will match its tallest child ([Constraint.Wrap]) or match the
+   * height of its parent ([Constraint.Fill]).
+   */
+  @Property(4)
+  @Default("Constraint.Wrap")
+  val height: Constraint,
+
+  @Property(5)
+  @Default("Dp(0.0)")
+  val minHeight: Dp,
+
+  @Property(6)
+  @Default("Dp(Double.MAX_VALUE)")
+  val maxHeight: Dp,
+
+  /**
+   * Applies margin (space) around the box.
+   *
+   * This can also be applied to an individual widget using `Modifier.margin`.
+   */
+  @Property(7)
+  @Default("Margin.Zero")
+  val margin: Margin,
+
+  /**
+   * Sets the default horizontal alignment for widgets in this Box.
+   *
+   * This can also be applied to an individual widget using `Modifier.horizontalAlignment`.
+   */
+  @Property(8)
+  @Default("CrossAxisAlignment.Start")
+  val horizontalAlignment: CrossAxisAlignment,
+
+  /**
+   * Sets the default vertical alignment for widgets in this Box.
+   *
+   * This can also be applied to an individual widget using `Modifier.horizontalAlignment`.
+   */
+  @Property(9)
+  @Default("CrossAxisAlignment.Start")
+  val verticalAlignment: CrossAxisAlignment,
+
+  /**
+   * A slot to add widgets in.
+   */
+  @Children(1) val children: BoxScope.() -> Unit,
+)
+
+public object BoxScope

redwood-layout-uiview/src/commonMain/kotlin/app/cash/redwood/layout/uiview/UIViewRedwoodLayoutWidgetFactory.kt

@@ -15,6 +15,7 @@
  */
 package app.cash.redwood.layout.uiview
 
+import app.cash.redwood.layout.widget.Box
 import app.cash.redwood.layout.widget.Column
 import app.cash.redwood.layout.widget.RedwoodLayoutWidgetFactory
 import app.cash.redwood.layout.widget.Row
@@ -24,6 +25,9 @@ import platform.UIKit.UIView
 
 @ObjCName("UIViewRedwoodLayoutWidgetFactory", exact = true)
 public class UIViewRedwoodLayoutWidgetFactory : RedwoodLayoutWidgetFactory<UIView> {
+  override fun Box(): Box<UIView> {
+    TODO("Not yet implemented")
+  }
   override fun Column(): Column<UIView> = UIViewFlexContainer(FlexDirection.Column)
   override fun Row(): Row<UIView> = UIViewFlexContainer(FlexDirection.Row)
   override fun Spacer(): Spacer<UIView> = UIViewSpacer()

redwood-layout-view/src/main/kotlin/app/cash/redwood/layout/view/ViewRedwoodLayoutWidgetFactory.kt

@@ -17,6 +17,7 @@ package app.cash.redwood.layout.view
 
 import android.content.Context
 import android.view.View
+import app.cash.redwood.layout.widget.Box
 import app.cash.redwood.layout.widget.Column
 import app.cash.redwood.layout.widget.RedwoodLayoutWidgetFactory
 import app.cash.redwood.layout.widget.Row
@@ -26,6 +27,10 @@ import app.cash.redwood.yoga.FlexDirection
 public class ViewRedwoodLayoutWidgetFactory(
   private val context: Context,
 ) : RedwoodLayoutWidgetFactory<View> {
+  override fun Box(): Box<View> {
+    TODO("Not yet implemented")
+  }
+
   override fun Column(): Column<View> = ViewFlexContainer(context, FlexDirection.Column)
   override fun Row(): Row<View> = ViewFlexContainer(context, FlexDirection.Row)
   override fun Spacer(): Spacer<View> = ViewSpacer(context)

redwood-protocol-widget/src/commonTest/kotlin/app/cash/redwood/protocol/widget/EmptyRedwoodLayoutWidgetFactory.kt

@@ -15,9 +15,11 @@
  */
 package app.cash.redwood.protocol.widget
 
+import app.cash.redwood.layout.widget.Box
 import app.cash.redwood.layout.widget.RedwoodLayoutWidgetFactory
 
 class EmptyRedwoodLayoutWidgetFactory : RedwoodLayoutWidgetFactory<Nothing> {
+  override fun Box() = TODO()
   override fun Column() = TODO()
   override fun Row() = TODO()
   override fun Spacer() = TODO()