react-native-tinyui 0.5.0 → 1.1.0

package/src/TipKit/index.ts

@@ -0,0 +1,47 @@
+import { assertComponentEnabled, getNativeTinyui } from '../utils';
+import type { TipInvalidationReason, TipKitConfiguration } from './types';
+import { validateTipId } from './validation';
+import { Popover } from './Popover';
+
+export const TipKit = {
+  Popover,
+  /** Configure TipKit once before mounting tips. Repeating the same options is safe. */
+  async configure({
+    displayFrequency = 'daily',
+  }: TipKitConfiguration = {}): Promise<void> {
+    assertComponentEnabled('TipKit');
+    if (
+      !['immediate', 'hourly', 'daily', 'weekly', 'monthly'].includes(
+        displayFrequency
+      )
+    ) {
+      throw new Error(
+        '[TinyUI] TipKit.configure received an invalid displayFrequency.'
+      );
+    }
+    await getNativeTinyui().configureTips(displayFrequency);
+  },
+
+  /** Persistently invalidate a tip, including when its view is not mounted. */
+  async invalidate(
+    tipId: string,
+    reason: TipInvalidationReason = 'actionPerformed'
+  ): Promise<void> {
+    assertComponentEnabled('TipKit');
+    validateTipId(tipId);
+    if (reason !== 'actionPerformed' && reason !== 'tipClosed') {
+      throw new Error('[TinyUI] TipKit.invalidate received an invalid reason.');
+    }
+    await getNativeTinyui().invalidateTip(tipId, reason);
+  },
+};
+
+export type {
+  TipAction,
+  TipDisplayFrequency,
+  TipError,
+  TipInvalidationReason,
+  TipKitConfiguration,
+  TipPopoverProps,
+  TipStatus,
+} from './types';

package/src/TipKit/types.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+export type TipDisplayFrequency =
+  'immediate' | 'hourly' | 'daily' | 'weekly' | 'monthly';
+
+export interface TipKitConfiguration {
+  /** App-wide interval between new tips. Defaults to `daily`. */
+  displayFrequency?: TipDisplayFrequency;
+}
+
+export type TipInvalidationReason = 'actionPerformed' | 'tipClosed';
+
+export type TipStatus =
+  | { status: 'pending' | 'available' }
+  | {
+      status: 'invalidated';
+      reason:
+        | TipInvalidationReason
+        | 'displayCountExceeded'
+        | 'displayDurationExceeded'
+        | 'unknown';
+    };
+
+export interface TipAction {
+  id: string;
+  title: string;
+}
+
+export interface TipError {
+  code: string;
+  message: string;
+}
+
+export interface TipPopoverProps extends Omit<ViewProps, 'children'> {
+  /** Anchor content. Its existing touch handlers are preserved. */
+  children: ReactNode;
+  /** Stable identity used by TipKit to persist this tip's history. */
+  tipId: string;
+  title: string;
+  message?: string;
+  systemImage?: string;
+  actions?: readonly TipAction[];
+  /** Allows presentation when TipKit is also eligible. Defaults to true. */
+  enabled?: boolean;
+  /** Omit to leave the number of presentations unlimited. */
+  maxDisplayCount?: number;
+  ignoresDisplayFrequency?: boolean;
+  /** Preferred arrow edge on the bubble; UIKit may adapt to available space. */
+  arrowEdge?: 'top' | 'bottom' | 'leading' | 'trailing' | 'auto';
+  /** TipKit eligibility, independent of whether the bubble is on screen. */
+  onStatusChange?: (status: TipStatus) => void;
+  onVisibleChange?: (visible: boolean) => void;
+  /** Actions do not automatically invalidate the tip. */
+  onActionPress?: (action: TipAction) => void;
+  onError?: (error: TipError) => void;
+}

package/src/TipKit/validation.ts

@@ -0,0 +1,39 @@
+import type { TipPopoverProps } from './types';
+
+export function validateTipId(tipId: string): void {
+  if (typeof tipId !== 'string' || tipId.trim().length === 0) {
+    throw new Error('[TinyUI] TipKit tipId must be a nonempty string.');
+  }
+}
+
+export function validateTip(props: TipPopoverProps): void {
+  validateTipId(props.tipId);
+  if (typeof props.title !== 'string' || props.title.trim().length === 0) {
+    throw new Error('[TinyUI] TipKit.Popover title must be a nonempty string.');
+  }
+  if (
+    props.maxDisplayCount !== undefined &&
+    (!Number.isInteger(props.maxDisplayCount) ||
+      props.maxDisplayCount < 1 ||
+      props.maxDisplayCount > 2147483647)
+  ) {
+    throw new Error(
+      '[TinyUI] TipKit.Popover maxDisplayCount must be a positive 32-bit integer.'
+    );
+  }
+  const ids = new Set<string>();
+  for (const action of props.actions ?? []) {
+    if (
+      typeof action.id !== 'string' ||
+      action.id.trim().length === 0 ||
+      typeof action.title !== 'string' ||
+      action.title.trim().length === 0 ||
+      ids.has(action.id)
+    ) {
+      throw new Error(
+        '[TinyUI] TipKit.Popover actions need unique nonempty ids and nonempty titles.'
+      );
+    }
+    ids.add(action.id);
+  }
+}

package/src/index.tsx

@@ -1,14 +1,45 @@
 export { Menu } from './Menu';
+export { TipKit } from './TipKit';
+export type {
+  TipAction,
+  TipDisplayFrequency,
+  TipError,
+  TipInvalidationReason,
+  TipPopoverProps,
+  TipKitConfiguration,
+  TipStatus,
+} from './TipKit';
 export type {
   MenuActionOption,
+  MenuActionPressEvent,
+  MenuActionPressEventData,
   MenuDividerOption,
   MenuItemState,
   MenuOption,
   MenuProps,
+  MenuRef,
   MenuSectionOption,
   MenuSubmenuOption,
 } from './Menu';
 
+export { Stepper } from './Stepper';
+export type { StepperProps } from './Stepper';
+
+export { ConcentricView } from './ConcentricView';
+export type { ConcentricViewProps } from './ConcentricView';
+
+export { SFSymbol } from './SFSymbol';
+export type {
+  SFSymbolContentTransition,
+  SFSymbolEffect,
+  SFSymbolEffectOptions,
+  SFSymbolProps,
+  SFSymbolRenderingMode,
+  SFSymbolScale,
+  SFSymbolTextStyle,
+  SFSymbolWeight,
+} from './SFSymbol';
+
 export { Popover, PopoverClose } from './Popover';
 export type {
   PopoverArrowEdge,

package/src/utils/getNativeTinyui.ts

@@ -1,6 +1,13 @@
 import NativeTinyui, { type Spec } from '../NativeTinyui';
 
-export type TinyuiComponent = 'Menu' | 'Popover' | 'LiquidGlassText';
+export type TinyuiComponent =
+  | 'Menu'
+  | 'Popover'
+  | 'LiquidGlassText'
+  | 'Stepper'
+  | 'ConcentricView'
+  | 'SFSymbol'
+  | 'TipKit';
 
 let nativeTinyui: Spec | null | undefined;
 let enabledComponents: ReadonlySet<string> | undefined;

package/ios/Core/TinyuiHostingHelpers.swift

@@ -1,74 +0,0 @@
-import SwiftUI
-import UIKit
-
-/**
- * Identifiable wrapper used to render React Native views (UIView) inside
- * SwiftUI. Modeled after react-native-pager-view's bridge.
- */
-struct IdentifiablePlatformView: Identifiable, Equatable {
-  let id = UUID()
-  let view: UIView
-
-  init(_ view: UIView) {
-    self.view = view
-  }
-}
-
-/**
- * Renders a UIView inside SwiftUI. Uses UIViewControllerRepresentable so the
- * hosted React view keeps a valid view-controller hierarchy.
- */
-struct RepresentableView: UIViewControllerRepresentable {
-  var view: UIView
-
-  func makeUIViewController(context: Context) -> PlatformChildViewController {
-    let viewController = PlatformChildViewController()
-    viewController.wrappedView = view
-    return viewController
-  }
-
-  func updateUIViewController(
-    _ uiViewController: PlatformChildViewController,
-    context: Context
-  ) {
-    if uiViewController.wrappedView !== view {
-      uiViewController.wrappedView = view
-    }
-  }
-}
-
-class PlatformChildViewController: UIViewController {
-  var wrappedView: UIView? {
-    didSet {
-      guard oldValue !== wrappedView else { return }
-      oldValue?.removeFromSuperview()
-      if isViewLoaded {
-        mountWrappedView()
-      }
-    }
-  }
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    view.backgroundColor = .clear
-    mountWrappedView()
-  }
-
-  private func mountWrappedView() {
-    guard let wrappedView else { return }
-    view.addSubview(wrappedView)
-    wrappedView.translatesAutoresizingMaskIntoConstraints = false
-    wrappedView.pinEdges(to: view)
-  }
-}
-
-extension UIView {
-  func pinEdges(to other: UIView) {
-    NSLayoutConstraint.activate([
-      leadingAnchor.constraint(equalTo: other.leadingAnchor),
-      trailingAnchor.constraint(equalTo: other.trailingAnchor),
-      topAnchor.constraint(equalTo: other.topAnchor),
-      bottomAnchor.constraint(equalTo: other.bottomAnchor),
-    ])
-  }
-}

package/ios/Menu/TinyuiMenuViewSwift.swift

@@ -1,326 +0,0 @@
-import React
-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: Any] = [:]
-  @Published var title: 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 configuration object.
- *
- * 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 {
-    if props.title.isEmpty {
-      elementsContent
-    } else {
-      Section {
-        elementsContent
-      } header: {
-        Text(props.title)
-      }
-    }
-  }
-
-  @ViewBuilder
-  private var elementsContent: some View {
-    ForEach(buildElements(from: props.menuConfig)) { element in
-      element.buildView(delegate: delegate)
-    }
-  }
-
-  /// Converts the menu config into a list of SwiftUI element builders.
-  private func buildElements(from config: [String: Any]) -> [TinyuiMenuElement] {
-    guard let items = config["items"] as? [[String: Any]] else {
-      return []
-    }
-    return items.map { TinyuiMenuElement(dictionary: $0) }
-  }
-}
-
-/**
- * Lightweight representation of a single UIMenu element read from the 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
-      let id = dictionary["id"] as? String ?? ""
-      let state = dictionary["state"] as? String ?? "off"
-
-      // `on`/`off` use SwiftUI's native `Toggle` support inside `Menu`,
-      // which renders the system checkmark. `mixed` has no native SwiftUI
-      // equivalent, so it falls back to the minus indicator.
-      if state == "on" || state == "off" {
-        let isOn = Binding<Bool>(
-          get: { state == "on" },
-          set: { _ in delegate?.onItemPress(id: id) }
-        )
-        return AnyView(
-          Toggle(isOn: isOn) {
-            TinyuiMenuLabel(
-              dictionary: dictionary,
-              destructive: destructive,
-              showsState: false
-            )
-          }
-          .disabled(dictionary["disabled"] as? Bool ?? false)
-        )
-      }
-
-      return AnyView(
-        Button(role: destructive ? .destructive : nil) {
-          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
-
-  @ViewBuilder
-  var body: some View {
-    // Menu controls interpret the first text as the title and the second as
-    // the subtitle. When an icon is present, `Label` replaces the first Text,
-    // matching SwiftUI's native menu-item representation.
-    if hasIcon {
-      Label {
-        title
-      } icon: {
-        menuIcon
-      }
-    } else {
-      title
-    }
-
-    if let subtitle {
-      Text(subtitle)
-    }
-
-    if showsState {
-      stateIndicator
-    }
-  }
-
-  private var subtitle: String? {
-    (dictionary["subtitle"] as? String).flatMap {
-      $0.isEmpty ? nil : $0
-    }
-  }
-
-  private var hasIcon: Bool {
-    if let icon = dictionary["icon"] as? String, !icon.isEmpty {
-      return UIImage(named: icon) != nil
-    }
-    return !(dictionary["systemImage"] as? String ?? "").isEmpty
-  }
-
-  private var stateIndicator: some View {
-    // Only `mixed` reaches here; `on`/`off` are handled natively by `Toggle`.
-    // UIKit's menu system renders "mixed" state with a minus/dash mark.
-    if dictionary["state"] as? String == "mixed" {
-      return AnyView(
-        Image(systemName: "minus")
-          .font(.system(size: 13, weight: .semibold))
-      )
-    }
-    return AnyView(EmptyView())
-  }
-
-  private var title: Text {
-    let text = Text(dictionary["title"] as? String ?? "")
-
-    if destructive {
-      return text.foregroundColor(.red)
-    } else if let color = TinyuiMenuColor.uiColor(from: dictionary["titleColor"]) {
-      return text.foregroundColor(Color(uiColor: color))
-    } else {
-      return 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? {
-    value.flatMap(RCTConvert.uiColor)
-  }
-}
-
-@objc public protocol TinyuiMenuViewDelegate {
-  func onItemPress(id: String)
-  func onPrimaryAction()
-}

package/ios/Popover/TinyuiPopoverViewSwift.swift

@@ -1,88 +0,0 @@
-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)
-}