Add toDynamic conversion for ValueUnit and ColorStop (facebook#54039)

Summary:
Pull Request resolved: facebook#54039

Adding toDynamic conversion to `ColorStop` and `ValueUnit` structs which are being used by the linear and radial gradient data structures.

Changelog: [Internal]

Reviewed By: christophpurrer

Differential Revision: D83788006

fbshipit-source-id: 1ec0300ac4f17b65b6896d4d2c131eb05a059a22

Author: Nick Lefever

packages/react-native/ReactCommon/react/renderer/graphics/ColorStop.h

@@ -17,6 +17,15 @@ struct ColorStop {
   bool operator==(const ColorStop& other) const = default;
   SharedColor color;
   ValueUnit position;
+
+#ifdef RN_SERIALIZABLE_STATE
+  folly::dynamic toDynamic() const {
+    folly::dynamic result = folly::dynamic::object();
+    result["color"] = *color;
+    result["position"] = position.toDynamic();
+    return result;
+  }
+#endif
 };
 
 struct ProcessedColorStop {

packages/react-native/ReactCommon/react/renderer/graphics/ValueUnit.h

@@ -7,6 +7,10 @@
 
 #pragma once
 
+#ifdef RN_SERIALIZABLE_STATE
+#include <folly/dynamic.h>
+#endif
+
 namespace facebook::react {
 
 enum class UnitType {
@@ -44,5 +48,18 @@ struct ValueUnit {
   constexpr operator bool() const {
     return unit != UnitType::Undefined;
   }
+
+#ifdef RN_SERIALIZABLE_STATE
+  folly::dynamic toDynamic() const {
+    switch (unit) {
+      case UnitType::Undefined:
+        return nullptr;
+      case UnitType::Point:
+        return value;
+      case UnitType::Percent:
+        return std::format("{}%", value);
+    }
+  }
+#endif
 };
 } // namespace facebook::react