CSS Grid 1/9: Grid style types and public API (facebook#55665)

Summary:

X-link: facebook/yoga#1879

Add the foundational data types, enums, style properties, and C API for
expressing CSS Grid layouts in Yoga.

Includes:
- Grid style types (GridLine.h, GridTrack.h, GridTrackType.h)
- Updated enums (Display::Grid, Align::Start/End, Justify::Auto/Stretch/Start/End)
- Grid event (LayoutPassReason::kGridLayout)
- Style property accessors and member variables
- Public C API (YGGridTrackList.h/cpp, YGNodeStyle grid setters/getters)
- Layout helpers updated for new enum values (Align.h, AbsoluteLayout.cpp,
  CalculateLayout.cpp/h partial)
- Node.h: relativePosition made public
- Website playground grid property support
- React Native mirror of all C++ changes

Differential Revision: D93946262

Author: NickGerleman

packages/react-native/React/Views/RCTLayout.m

@@ -114,10 +114,10 @@ UIUserInterfaceLayoutDirection RCTUIKitLayoutDirectionFromYogaLayoutDirection(YG
 YGDisplay RCTYogaDisplayTypeFromReactDisplayType(RCTDisplayType displayType)
 {
   switch (displayType) {
-    case RCTDisplayTypeNone:
-      return YGDisplayNone;
     case RCTDisplayTypeFlex:
       return YGDisplayFlex;
+    case RCTDisplayTypeNone:
+      return YGDisplayNone;
     case RCTDisplayTypeInline:
       RCTAssert(NO, @"RCTDisplayTypeInline cannot be converted to YGDisplay value.");
       return YGDisplayNone;
@@ -128,11 +128,10 @@ RCTDisplayType RCTReactDisplayTypeFromYogaDisplayType(YGDisplay displayType)
 {
   switch (displayType) {
     case YGDisplayFlex:
+    case YGDisplayContents:
+    case YGDisplayGrid:
       return RCTDisplayTypeFlex;
     case YGDisplayNone:
       return RCTDisplayTypeNone;
-    case YGDisplayContents:
-      RCTAssert(NO, @"YGDisplayContents cannot be converted to RCTDisplayType value.");
-      return RCTDisplayTypeNone;
   }
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaAlign.java

@@ -18,7 +18,9 @@ public enum YogaAlign {
   BASELINE(5),
   SPACE_BETWEEN(6),
   SPACE_AROUND(7),
-  SPACE_EVENLY(8);
+  SPACE_EVENLY(8),
+  START(9),
+  END(10);
 
   private final int mIntValue;
 
@@ -41,6 +43,8 @@ public static YogaAlign fromInt(int value) {
       case 6: return SPACE_BETWEEN;
       case 7: return SPACE_AROUND;
       case 8: return SPACE_EVENLY;
+      case 9: return START;
+      case 10: return END;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }

packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaDisplay.java

@@ -12,7 +12,8 @@
 public enum YogaDisplay {
   FLEX(0),
   NONE(1),
-  CONTENTS(2);
+  CONTENTS(2),
+  GRID(3);
 
   private final int mIntValue;
 
@@ -29,6 +30,7 @@ public static YogaDisplay fromInt(int value) {
       case 0: return FLEX;
       case 1: return NONE;
       case 2: return CONTENTS;
+      case 3: return GRID;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }

packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaGridTrackType.java

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @generated by enums.py
+
+package com.facebook.yoga;
+
+public enum YogaGridTrackType {
+  AUTO(0),
+  POINTS(1),
+  PERCENT(2),
+  FR(3),
+  MINMAX(4);
+
+  private final int mIntValue;
+
+  YogaGridTrackType(int intValue) {
+    mIntValue = intValue;
+  }
+
+  public int intValue() {
+    return mIntValue;
+  }
+
+  public static YogaGridTrackType fromInt(int value) {
+    switch (value) {
+      case 0: return AUTO;
+      case 1: return POINTS;
+      case 2: return PERCENT;
+      case 3: return FR;
+      case 4: return MINMAX;
+      default: throw new IllegalArgumentException("Unknown enum value: " + value);
+    }
+  }
+}

packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaJustify.java

@@ -10,12 +10,16 @@
 package com.facebook.yoga;
 
 public enum YogaJustify {
-  FLEX_START(0),
-  CENTER(1),
-  FLEX_END(2),
-  SPACE_BETWEEN(3),
-  SPACE_AROUND(4),
-  SPACE_EVENLY(5);
+  AUTO(0),
+  FLEX_START(1),
+  CENTER(2),
+  FLEX_END(3),
+  SPACE_BETWEEN(4),
+  SPACE_AROUND(5),
+  SPACE_EVENLY(6),
+  STRETCH(7),
+  START(8),
+  END(9);
 
   private final int mIntValue;
 
@@ -29,12 +33,16 @@ public int intValue() {
 
   public static YogaJustify fromInt(int value) {
     switch (value) {
-      case 0: return FLEX_START;
-      case 1: return CENTER;
-      case 2: return FLEX_END;
-      case 3: return SPACE_BETWEEN;
-      case 4: return SPACE_AROUND;
-      case 5: return SPACE_EVENLY;
+      case 0: return AUTO;
+      case 1: return FLEX_START;
+      case 2: return CENTER;
+      case 3: return FLEX_END;
+      case 4: return SPACE_BETWEEN;
+      case 5: return SPACE_AROUND;
+      case 6: return SPACE_EVENLY;
+      case 7: return STRETCH;
+      case 8: return START;
+      case 9: return END;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }

packages/react-native/ReactCommon/react/renderer/components/view/conversions.h

@@ -129,6 +129,8 @@ inline DisplayType displayTypeFromYGDisplay(YGDisplay display)
       return DisplayType::Contents;
     case YGDisplayFlex:
       return DisplayType::Flex;
+    case YGDisplayGrid:
+      return DisplayType::Grid;
   }
 }
 

packages/react-native/ReactCommon/react/renderer/core/LayoutPrimitives.h

@@ -20,6 +20,7 @@ enum class DisplayType {
   None = 0,
   Flex = 1,
   Contents = 2,
+  Grid = 3,
 };
 
 enum class PositionType {

packages/react-native/ReactCommon/react/renderer/core/conversions.h

@@ -44,6 +44,8 @@ inline int toInt(const DisplayType &displayType)
       return 1;
     case DisplayType::Contents:
       return 2;
+    case DisplayType::Grid:
+      return 3;
   }
 }
 
@@ -56,6 +58,8 @@ inline std::string toString(const DisplayType &displayType)
       return "flex";
     case DisplayType::Contents:
       return "contents";
+    case DisplayType::Grid:
+      return "grid";
   }
 }
 

packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp

@@ -29,6 +29,10 @@ const char* YGAlignToString(const YGAlign value) {
       return "space-around";
     case YGAlignSpaceEvenly:
       return "space-evenly";
+    case YGAlignStart:
+      return "start";
+    case YGAlignEnd:
+      return "end";
   }
   return "unknown";
 }
@@ -73,6 +77,8 @@ const char* YGDisplayToString(const YGDisplay value) {
       return "none";
     case YGDisplayContents:
       return "contents";
+    case YGDisplayGrid:
+      return "grid";
   }
   return "unknown";
 }
@@ -141,6 +147,22 @@ const char* YGFlexDirectionToString(const YGFlexDirection value) {
   return "unknown";
 }
 
+const char* YGGridTrackTypeToString(const YGGridTrackType value) {
+  switch (value) {
+    case YGGridTrackTypeAuto:
+      return "auto";
+    case YGGridTrackTypePoints:
+      return "points";
+    case YGGridTrackTypePercent:
+      return "percent";
+    case YGGridTrackTypeFr:
+      return "fr";
+    case YGGridTrackTypeMinmax:
+      return "minmax";
+  }
+  return "unknown";
+}
+
 const char* YGGutterToString(const YGGutter value) {
   switch (value) {
     case YGGutterColumn:
@@ -155,6 +177,8 @@ const char* YGGutterToString(const YGGutter value) {
 
 const char* YGJustifyToString(const YGJustify value) {
   switch (value) {
+    case YGJustifyAuto:
+      return "auto";
     case YGJustifyFlexStart:
       return "flex-start";
     case YGJustifyCenter:
@@ -167,6 +191,12 @@ const char* YGJustifyToString(const YGJustify value) {
       return "space-around";
     case YGJustifySpaceEvenly:
       return "space-evenly";
+    case YGJustifyStretch:
+      return "stretch";
+    case YGJustifyStart:
+      return "start";
+    case YGJustifyEnd:
+      return "end";
   }
   return "unknown";
 }

packages/react-native/ReactCommon/yoga/yoga/YGEnums.h

@@ -22,7 +22,9 @@ YG_ENUM_DECL(
     YGAlignBaseline,
     YGAlignSpaceBetween,
     YGAlignSpaceAround,
-    YGAlignSpaceEvenly)
+    YGAlignSpaceEvenly,
+    YGAlignStart,
+    YGAlignEnd)
 
 YG_ENUM_DECL(
     YGBoxSizing,
@@ -44,7 +46,8 @@ YG_ENUM_DECL(
     YGDisplay,
     YGDisplayFlex,
     YGDisplayNone,
-    YGDisplayContents)
+    YGDisplayContents,
+    YGDisplayGrid)
 
 YG_ENUM_DECL(
     YGEdge,
@@ -79,6 +82,14 @@ YG_ENUM_DECL(
     YGFlexDirectionRow,
     YGFlexDirectionRowReverse)
 
+YG_ENUM_DECL(
+    YGGridTrackType,
+    YGGridTrackTypeAuto,
+    YGGridTrackTypePoints,
+    YGGridTrackTypePercent,
+    YGGridTrackTypeFr,
+    YGGridTrackTypeMinmax)
+
 YG_ENUM_DECL(
     YGGutter,
     YGGutterColumn,
@@ -87,12 +98,16 @@ YG_ENUM_DECL(
 
 YG_ENUM_DECL(
     YGJustify,
+    YGJustifyAuto,
     YGJustifyFlexStart,
     YGJustifyCenter,
     YGJustifyFlexEnd,
     YGJustifySpaceBetween,
     YGJustifySpaceAround,
-    YGJustifySpaceEvenly)
+    YGJustifySpaceEvenly,
+    YGJustifyStretch,
+    YGJustifyStart,
+    YGJustifyEnd)
 
 YG_ENUM_DECL(
     YGLogLevel,