docs(changeset): Fix props binding of the Box component

Author: cometkim

.changeset/sour-dots-study.md

@@ -0,0 +1,5 @@
+---
+"rescript-ink": minor
+---
+
+Fix props binding of the Box component

packages/ink/src/Ink_Components_Box.res

@@ -9,6 +9,7 @@ let makeProps = (
   ~flexBasis: option<flexBasis>=?,
   ~flexDirection: option<flexDirection>=?,
   ~alignItems: option<alignItems>=?,
+  ~alignSelf: option<alignSelf>=?,
   ~justifyContent: option<justifyContent>=?,
   ~width: option<size>=?,
   ~minWidth: option<[#length(length)]>=?,
@@ -39,8 +40,14 @@ let makeProps = (
     | None => Some(#flex)
     | display => display
     },
-    "flexGrow": flexGrow,
-    "flexShrink": flexShrink,
+    "flexGrow": switch flexGrow {
+    | None => Some(0)
+    | flexGrow => flexGrow
+    },
+    "flexShrink": switch flexShrink {
+    | None => Some(1)
+    | flexShrink => flexShrink
+    },
     "flexBasis": switch flexBasis {
     | Some(#length(len)) => Some(string_of_int(len))
     | Some(#percent(pct)) => Some(Js.Float.toString(pct) ++ "%")
@@ -54,11 +61,27 @@ let makeProps = (
     },
     "flexDirection": flexDirection,
     "alignItems": alignItems,
+    "alignSelf": switch alignSelf {
+    | None => Some(#auto)
+    | alignSelf => alignSelf
+    },
     "justifyContent": justifyContent,
-    "width": width,
-    "minWidth": minWidth,
-    "height": height,
-    "minHeight": minHeight,
+    "width": switch width {
+    | Some(width) => Some(width->Size.unwrap)
+    | None => None
+    },
+    "minWidth": switch minWidth {
+    | Some(minWidth) => Some(minWidth->Size.unwrap)
+    | None => None
+    },
+    "height": switch height {
+    | Some(height) => Some(height->Size.unwrap)
+    | None => None
+    },
+    "minHeight": switch minHeight {
+    | Some(minHeight) => Some(minHeight->Size.unwrap)
+    | None => None
+    },
     "margin": margin,
     "marginX": marginX,
     "marginY": marginY,

packages/ink/src/Ink_Style.res

@@ -1,11 +1,23 @@
+type any
+external unwrap: 'a => any = "%identity"
+
 type length = int
 
 type percent = float
 
-type size = [
-  | #length(length)
-  | #percent(percent)
-]
+module Size = {
+  type t = [
+    | #length(length)
+    | #percent(percent)
+  ]
+
+  let unwrap = t => switch t {
+  | #length(length) => length->unwrap
+  | #percent(percent) => percent->unwrap
+  }
+}
+
+type size = Size.t
 
 type textWrap = [
   | #wrap
@@ -127,13 +139,8 @@ type borderStyle = [
   | #arrow
 ]
 
-type width = [
-  | #auto
-  | #percent(percent)
-  | #length(length)
-]
-
 type flexBasis = [
+  | #auto
   | content
-  | width
+  | size
 ]