react-native-tinyui 0.1.1

package/ios/Menu/TinyuiMenuViewSwift.swift

@@ -0,0 +1,368 @@
+import SwiftUI
+import UIKit
+
+/**
+ * Observable props shared between the Objective-C++ component view and the
+ * SwiftUI `Menu` implementation. Mirror of `TinyuiMenuProps` in codegen.
+ */
+class TinyuiMenuProps: ObservableObject {
+  @Published var menuConfig: String = "{}"
+  @Published var disabled: Bool = false
+  @Published var hasPrimaryAction: Bool = false
+  @Published var triggerView: UIView?
+}
+
+/**
+ * SwiftUI `Menu` backed by UIKit's UIMenu, matching expo-ui's MenuView.
+ *
+ * The React Native trigger (a UIView) is embedded as the menu label through
+ * `RepresentableView`, so the tap target remains the native RN subtree while
+ * the menu content is built natively from the JSON config.
+ *
+ * Named distinctly from the Fabric component view `TinyuiMenuView`.
+ */
+struct TinyuiMenuSwiftUIView: View {
+  @ObservedObject var props: TinyuiMenuProps
+  weak var delegate: TinyuiMenuViewDelegate?
+
+  var body: some View {
+    Group {
+      if let triggerView = props.triggerView {
+        if props.hasPrimaryAction {
+          Menu {
+            menuContent
+          } label: {
+            RepresentableView(view: triggerView)
+          } primaryAction: {
+            delegate?.onPrimaryAction()
+          }
+          .disabled(props.disabled)
+        } else {
+          Menu {
+            menuContent
+          } label: {
+            RepresentableView(view: triggerView)
+          }
+          .disabled(props.disabled)
+        }
+      } else {
+        // No trigger mounted yet; render an empty view until the RN child
+        // is attached to the provider.
+        Color.clear
+      }
+    }
+  }
+
+  @ViewBuilder
+  private var menuContent: some View {
+    ForEach(buildElements(from: props.menuConfig)) { element in
+      element.buildView(delegate: delegate)
+    }
+  }
+
+  /// Parses the JSON menu config into a list of SwiftUI element builders.
+  private func buildElements(from json: String) -> [TinyuiMenuElement] {
+    guard
+      let data = json.data(using: .utf8),
+      let root = try? JSONSerialization.jsonObject(with: data) as? [String: Any],
+      let items = root["items"] as? [[String: Any]]
+    else {
+      return []
+    }
+    return items.map { TinyuiMenuElement(dictionary: $0) }
+  }
+}
+
+/**
+ * Lightweight representation of a single UIMenu element parsed from the JSON
+ * config. Used to build SwiftUI menu content without resolving all elements
+ * eagerly. Returns `AnyView` to avoid recursive opaque return type errors.
+ */
+struct TinyuiMenuElement: Identifiable {
+  let id = UUID()
+  private let dictionary: [String: Any]
+
+  init(dictionary: [String: Any]) {
+    self.dictionary = dictionary
+  }
+
+  func buildView(
+    delegate: TinyuiMenuViewDelegate?,
+    inheritedDestructive: Bool = false
+  ) -> AnyView {
+    if dictionary["hidden"] as? Bool ?? false {
+      return AnyView(EmptyView())
+    }
+
+    switch dictionary["type"] as? String {
+    case "action":
+      let destructive = inheritedDestructive || (dictionary["destructive"] as? Bool ?? false)
+      let keepOpen = dictionary["keepOpen"] as? Bool ?? false
+      return AnyView(
+        Button(role: destructive ? .destructive : nil) {
+          if let id = dictionary["id"] as? String {
+            delegate?.onItemPress(id: id)
+          }
+        } label: {
+          TinyuiMenuLabel(
+            dictionary: dictionary,
+            destructive: destructive,
+            showsState: true
+          )
+        }
+        .disabled(dictionary["disabled"] as? Bool ?? false)
+        .menuActionDismissBehavior(keepOpen ? .disabled : .automatic)
+      )
+
+    case "submenu":
+      let children = (dictionary["children"] as? [[String: Any]] ?? [])
+        .map { TinyuiMenuElement(dictionary: $0) }
+      let destructive = inheritedDestructive || (dictionary["destructive"] as? Bool ?? false)
+      let disabled = dictionary["disabled"] as? Bool ?? false
+
+      if dictionary["displayInline"] as? Bool ?? false {
+        return AnyView(
+          Section {
+            ForEach(children) { child in
+              child.buildView(
+                delegate: delegate,
+                inheritedDestructive: destructive
+              )
+            }
+          } header: {
+            TinyuiMenuLabel(
+              dictionary: dictionary,
+              destructive: destructive,
+              showsState: false
+            )
+          }
+          .disabled(disabled)
+        )
+      }
+
+      return AnyView(
+        Menu {
+          ForEach(children) { child in
+            child.buildView(
+              delegate: delegate,
+              inheritedDestructive: destructive
+            )
+          }
+        } label: {
+          TinyuiMenuLabel(
+            dictionary: dictionary,
+            destructive: destructive,
+            showsState: false
+          )
+        }
+        .disabled(disabled)
+      )
+
+    case "section":
+      let children = (dictionary["children"] as? [[String: Any]] ?? [])
+        .map { TinyuiMenuElement(dictionary: $0) }
+      return AnyView(
+        Section {
+          ForEach(children) { child in
+            child.buildView(
+              delegate: delegate,
+              inheritedDestructive: inheritedDestructive
+            )
+          }
+        } header: {
+          if let title = dictionary["title"] as? String, !title.isEmpty {
+            Text(title)
+          }
+        }
+      )
+
+    case "separator":
+      return AnyView(Divider())
+
+    default:
+      return AnyView(EmptyView())
+    }
+  }
+}
+
+/** Label content shared by actions and submenus. */
+private struct TinyuiMenuLabel: View {
+  let dictionary: [String: Any]
+  let destructive: Bool
+  let showsState: Bool
+
+  var body: some View {
+    HStack {
+      menuIcon
+
+      VStack(alignment: .leading, spacing: 1) {
+        title
+
+        if let subtitle = dictionary["subtitle"] as? String,
+           !subtitle.isEmpty {
+          Text(subtitle)
+            .font(.caption)
+            .foregroundStyle(.secondary)
+        }
+      }
+
+      if showsState {
+        switch dictionary["state"] as? String {
+        case "on":
+          Image(systemName: "checkmark")
+        case "mixed":
+          Image(systemName: "minus")
+        default:
+          EmptyView()
+        }
+      }
+    }
+  }
+
+  @ViewBuilder
+  private var title: some View {
+    let text = Text(dictionary["title"] as? String ?? "")
+    if let color = TinyuiMenuColor.uiColor(from: dictionary["titleColor"]) {
+      text.foregroundStyle(Color(uiColor: color))
+    } else if destructive {
+      text.foregroundStyle(Color.red)
+    } else {
+      text
+    }
+  }
+
+  @ViewBuilder
+  private var menuIcon: some View {
+    let iconColor = TinyuiMenuColor.uiColor(from: dictionary["iconColor"])
+
+    if let icon = dictionary["icon"] as? String, !icon.isEmpty {
+      if let image = UIImage(named: icon) {
+        if let iconColor {
+          Image(
+            uiImage: image.withTintColor(
+              iconColor,
+              renderingMode: .alwaysOriginal
+            )
+          )
+        } else {
+          Image(uiImage: image.withRenderingMode(.alwaysTemplate))
+        }
+      }
+    } else if let systemImage = dictionary["systemImage"] as? String,
+              !systemImage.isEmpty {
+      if let iconColor {
+        Image(systemName: systemImage)
+          .foregroundStyle(Color(uiColor: iconColor))
+      } else {
+        Image(systemName: systemImage)
+      }
+    }
+  }
+}
+
+/** Converts React Native's processed ColorValue JSON into a dynamic UIColor. */
+private enum TinyuiMenuColor {
+  static func uiColor(from value: Any?) -> UIColor? {
+    if let number = value as? NSNumber {
+      let argb = number.uint32Value
+      return UIColor(
+        red: CGFloat((argb >> 16) & 0xff) / 255,
+        green: CGFloat((argb >> 8) & 0xff) / 255,
+        blue: CGFloat(argb & 0xff) / 255,
+        alpha: CGFloat((argb >> 24) & 0xff) / 255
+      )
+    }
+
+    guard let object = value as? [String: Any] else {
+      return nil
+    }
+
+    if let semanticNames = object["semantic"] as? [String] {
+      for name in semanticNames {
+        if let color = semanticColor(named: name) {
+          return color
+        }
+      }
+    }
+
+    if let dynamic = object["dynamic"] as? [String: Any] {
+      return UIColor { traits in
+        let highContrast = traits.accessibilityContrast == .high
+        let dark = traits.userInterfaceStyle == .dark
+        let preferredKey: String
+
+        switch (dark, highContrast) {
+        case (true, true):
+          preferredKey = "highContrastDark"
+        case (false, true):
+          preferredKey = "highContrastLight"
+        case (true, false):
+          preferredKey = "dark"
+        case (false, false):
+          preferredKey = "light"
+        }
+
+        return uiColor(from: dynamic[preferredKey])
+          ?? uiColor(from: dynamic[dark ? "dark" : "light"])
+          ?? UIColor.clear
+      }
+    }
+
+    return nil
+  }
+
+  private static func semanticColor(named name: String) -> UIColor? {
+    if let color = UIColor(named: name) {
+      return color
+    }
+
+    let normalizedName = name.hasSuffix("Color")
+      ? String(name.dropLast("Color".count))
+      : name
+
+    switch normalizedName {
+    case "label": return .label
+    case "secondaryLabel": return .secondaryLabel
+    case "tertiaryLabel": return .tertiaryLabel
+    case "quaternaryLabel": return .quaternaryLabel
+    case "placeholderText": return .placeholderText
+    case "separator": return .separator
+    case "opaqueSeparator": return .opaqueSeparator
+    case "link": return .link
+    case "systemBackground": return .systemBackground
+    case "secondarySystemBackground": return .secondarySystemBackground
+    case "tertiarySystemBackground": return .tertiarySystemBackground
+    case "systemGroupedBackground": return .systemGroupedBackground
+    case "secondarySystemGroupedBackground": return .secondarySystemGroupedBackground
+    case "tertiarySystemGroupedBackground": return .tertiarySystemGroupedBackground
+    case "systemFill": return .systemFill
+    case "secondarySystemFill": return .secondarySystemFill
+    case "tertiarySystemFill": return .tertiarySystemFill
+    case "quaternarySystemFill": return .quaternarySystemFill
+    case "systemRed": return .systemRed
+    case "systemOrange": return .systemOrange
+    case "systemYellow": return .systemYellow
+    case "systemGreen": return .systemGreen
+    case "systemMint": return .systemMint
+    case "systemTeal": return .systemTeal
+    case "systemCyan": return .systemCyan
+    case "systemBlue": return .systemBlue
+    case "systemIndigo": return .systemIndigo
+    case "systemPurple": return .systemPurple
+    case "systemPink": return .systemPink
+    case "systemBrown": return .systemBrown
+    case "systemGray": return .systemGray
+    case "systemGray2": return .systemGray2
+    case "systemGray3": return .systemGray3
+    case "systemGray4": return .systemGray4
+    case "systemGray5": return .systemGray5
+    case "systemGray6": return .systemGray6
+    default: return nil
+    }
+  }
+}
+
+@objc public protocol TinyuiMenuViewDelegate {
+  func onItemPress(id: String)
+  func onPrimaryAction()
+}

package/ios/Popover/TinyuiPopoverProvider.swift

@@ -0,0 +1,111 @@
+import SwiftUI
+import UIKit
+
+/**
+ * UIKit bridge between the Fabric `TinyuiPopoverView` component and the
+ * SwiftUI `TinyuiPopoverSwiftUIView`. Hosts the SwiftUI view through a
+ * `UIHostingController`, mirroring react-native-pager-view's bridge.
+ */
+@objc public class TinyuiPopoverProvider: UIView {
+  private weak var delegate: TinyuiPopoverViewDelegate?
+  private var hostingController: UIHostingController<TinyuiPopoverSwiftUIView>?
+  private var props = TinyuiPopoverProps()
+
+  /// Presenting view controller, resolved by the component view from its
+  /// React view controller hierarchy.
+  @objc public weak var parentViewController: UIViewController? {
+    didSet {
+      if window != nil {
+        setupView()
+      }
+    }
+  }
+
+  @objc public var triggerView: UIView? {
+    didSet {
+      props.triggerView = triggerView
+    }
+  }
+
+  @objc public var contentView: UIView? {
+    didSet {
+      props.contentView = contentView
+    }
+  }
+
+  @objc public var isPresented: Bool = false {
+    didSet {
+      props.isPresented = isPresented
+    }
+  }
+
+  @objc public var attachmentAnchor: String = "center" {
+    didSet {
+      props.attachmentAnchor = attachmentAnchor
+    }
+  }
+
+  @objc public var arrowEdge: String = "none" {
+    didSet {
+      props.arrowEdge = arrowEdge
+    }
+  }
+
+  @objc public convenience init(delegate: TinyuiPopoverViewDelegate) {
+    self.init()
+    self.delegate = delegate
+  }
+
+  override public func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window != nil {
+      setupView()
+    }
+  }
+
+  override public func layoutSubviews() {
+    super.layoutSubviews()
+    if window != nil {
+      setupView()
+    }
+  }
+
+  private func setupView() {
+    if hostingController != nil {
+      syncParentViewController()
+      return
+    }
+
+    guard let parentViewController else {
+      return
+    }
+
+    let hostingController = UIHostingController(
+      rootView: TinyuiPopoverSwiftUIView(props: props, delegate: delegate)
+    )
+    self.hostingController = hostingController
+
+    parentViewController.addChild(hostingController)
+    hostingController.view.backgroundColor = .clear
+    addSubview(hostingController.view)
+    hostingController.view.translatesAutoresizingMaskIntoConstraints = false
+    hostingController.view.pinEdges(to: self)
+    hostingController.didMove(toParent: parentViewController)
+  }
+
+  /// Keeps the hosting controller attached to the current view controller.
+  private func syncParentViewController(to parentViewController: UIViewController? = nil) {
+    guard
+      let hostingController,
+      let parentViewController = parentViewController ?? self.parentViewController,
+      hostingController.parent !== parentViewController
+    else {
+      return
+    }
+
+    hostingController.willMove(toParent: nil)
+    hostingController.removeFromParent()
+    parentViewController.addChild(hostingController)
+    hostingController.didMove(toParent: parentViewController)
+  }
+}

package/ios/Popover/TinyuiPopoverView.h

@@ -0,0 +1,14 @@
+#if TINYUI_FEATURE_POPOVER
+
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface TinyuiPopoverView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif // TINYUI_FEATURE_POPOVER
+

package/ios/Popover/TinyuiPopoverView.mm

@@ -0,0 +1,124 @@
+#if TINYUI_FEATURE_POPOVER
+
+#import "TinyuiPopoverView.h"
+
+#import <React/RCTConversions.h>
+#import <React/UIView+React.h>
+
+#import <react/renderer/components/TinyuiSpec/ComponentDescriptors.h>
+#import <react/renderer/components/TinyuiSpec/EventEmitters.h>
+#import <react/renderer/components/TinyuiSpec/Props.h>
+#import <react/renderer/components/TinyuiSpec/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+#if __has_include("Tinyui-Swift.h")
+#import "Tinyui-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+@interface TinyuiPopoverView () <RCTTinyuiPopoverViewViewProtocol, TinyuiPopoverViewDelegate>
+@end
+
+@implementation TinyuiPopoverView {
+  TinyuiPopoverProvider *_popoverProvider;
+  UIView *_triggerView;
+  UIView<RCTComponentViewProtocol> *_contentComponentView;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<TinyuiPopoverViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const TinyuiPopoverViewProps>();
+    _props = defaultProps;
+
+    _popoverProvider = [[TinyuiPopoverProvider alloc] initWithDelegate:self];
+    self.contentView = _popoverProvider;
+  }
+  return self;
+}
+
+- (void)didMoveToWindow
+{
+  [super didMoveToWindow];
+  if (self.window != nil) {
+    _popoverProvider.parentViewController = [self reactViewController];
+  }
+}
+
+#pragma mark - React lifecycle
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
+                          index:(NSInteger)index
+{
+  if (_triggerView == nil) {
+    // First child is the trigger, used as the popover's anchor.
+    _triggerView = childComponentView;
+    _popoverProvider.triggerView = childComponentView;
+    [_popoverProvider addSubview:childComponentView];
+    return;
+  }
+
+  // Second child is the popover content, presented inside the popover.
+  NSAssert(_contentComponentView == nil, @"TinyuiPopoverView accepts one content child.");
+  _contentComponentView = childComponentView;
+  _popoverProvider.contentView = childComponentView;
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
+                            index:(NSInteger)index
+{
+  [childComponentView removeFromSuperview];
+  if (_triggerView == childComponentView) {
+    _triggerView = nil;
+    _popoverProvider.triggerView = nil;
+  } else if (_contentComponentView == childComponentView) {
+    _contentComponentView = nil;
+    _popoverProvider.contentView = nil;
+  }
+}
+
+#pragma mark - Props
+
+- (void)updateProps:(Props::Shared const &)props
+           oldProps:(Props::Shared const &)oldProps
+{
+  const auto &newPopoverProps = *std::static_pointer_cast<TinyuiPopoverViewProps const>(props);
+
+  _popoverProvider.isPresented = newPopoverProps.isPresented;
+  _popoverProvider.attachmentAnchor = RCTNSStringFromString(newPopoverProps.attachmentAnchor);
+  _popoverProvider.arrowEdge = RCTNSStringFromString(newPopoverProps.arrowEdge);
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+#pragma mark - TinyuiPopoverViewDelegate
+
+- (void)onIsPresentedChangeWithIsPresented:(BOOL)isPresented
+{
+  if (_eventEmitter == nullptr) {
+    return;
+  }
+  std::static_pointer_cast<const TinyuiPopoverViewEventEmitter>(_eventEmitter)
+      ->onIsPresentedChange(TinyuiPopoverViewEventEmitter::OnIsPresentedChange{
+          .isPresented = static_cast<bool>(isPresented)});
+}
+
+- (void)prepareForRecycle
+{
+  _triggerView = nil;
+  _contentComponentView = nil;
+  _popoverProvider.triggerView = nil;
+  _popoverProvider.contentView = nil;
+  [super prepareForRecycle];
+}
+
+@end
+
+#endif // TINYUI_FEATURE_POPOVER

package/ios/Popover/TinyuiPopoverViewSwift.swift

@@ -0,0 +1,88 @@
+import SwiftUI
+import UIKit
+
+/**
+ * Observable props shared between the Objective-C++ component view and the
+ * SwiftUI `Popover` implementation. Mirror of `TinyuiPopoverProps` in codegen.
+ */
+class TinyuiPopoverProps: ObservableObject {
+  @Published var isPresented: Bool = false
+  @Published var attachmentAnchor: String = "center"
+  @Published var arrowEdge: String = "none"
+  @Published var triggerView: UIView?
+  @Published var contentView: UIView?
+}
+
+/**
+ * SwiftUI `popover` backed by UIPopoverPresentationController, matching
+ * expo-ui's PopoverView. The RN trigger is embedded as the anchor view and the
+ * RN content view is presented inside the popover.
+ *
+ * Named distinctly from the Fabric component view `TinyuiPopoverView`.
+ */
+struct TinyuiPopoverSwiftUIView: View {
+  @ObservedObject var props: TinyuiPopoverProps
+  weak var delegate: TinyuiPopoverViewDelegate?
+
+  @State private var isPresented: Bool = false
+
+  var body: some View {
+    if let triggerView = props.triggerView {
+      RepresentableView(view: triggerView)
+        .popover(
+          isPresented: $isPresented,
+          attachmentAnchor: attachmentAnchorValue,
+          arrowEdge: arrowEdgeValue
+        ) {
+          if #available(iOS 16.4, *) {
+            popoverContent
+              .presentationCompactAdaptation(.popover)
+          } else {
+            popoverContent
+          }
+        }
+        .onChange(of: isPresented) { newValue in
+          delegate?.onIsPresentedChange(isPresented: newValue)
+        }
+        .onChange(of: props.isPresented) { newValue in
+          isPresented = newValue
+        }
+        .onAppear {
+          isPresented = props.isPresented
+        }
+    } else {
+      Color.clear
+    }
+  }
+
+  private var attachmentAnchorValue: PopoverAttachmentAnchor {
+    switch props.attachmentAnchor {
+    case "top": return .point(.top)
+    case "bottom": return .point(.bottom)
+    case "leading": return .point(.leading)
+    case "trailing": return .point(.trailing)
+    default: return .point(.center)
+    }
+  }
+
+  private var arrowEdgeValue: Edge? {
+    switch props.arrowEdge {
+    case "top": return .top
+    case "bottom": return .bottom
+    case "leading": return .leading
+    case "trailing": return .trailing
+    default: return nil
+    }
+  }
+
+  @ViewBuilder
+  private var popoverContent: some View {
+    if let contentView = props.contentView {
+      RepresentableView(view: contentView)
+    }
+  }
+}
+
+@objc public protocol TinyuiPopoverViewDelegate {
+  func onIsPresentedChange(isPresented: Bool)
+}