react-native-platform-components 0.3.1 → 0.4.0

package/README.md

@@ -1,43 +1,22 @@
 # react-native-platform-components
 
-> 🚧 In development — not ready for public use.
-
 High-quality **native UI components for React Native**, implemented with platform-first APIs and exposed through clean, typed JavaScript interfaces.
 
-This library focuses on **true native behavior**, not JavaScript re-implementations — starting with:
+This library focuses on **true native behavior**, not JavaScript re-implementations — providing:
 
-- **SelectionMenu** – native selection menus (Material on Android, system menus on iOS, web fallback)
-- **DatePicker** – native date & time pickers with modal and inline presentations
+- **SelectionMenu** – native selection menus (Material on Android, system menus on iOS)
+- **DatePicker** – native date & time pickers with modal and embedded presentations
 
 The goal is to provide components that:
 
 - Feel **100% native** on each platform
-- Support modern platform design systems (Material 2 / Material 3 on Android, system pickers on iOS)
+- Support modern platform design systems (Material 3 on Android, system pickers on iOS)
 - Offer **headless** and **inline** modes for maximum layout control
 - Integrate cleanly with **React Native Codegen / Fabric**
-- Degrade gracefully on **Web**
-
----
-
-## 🎥 Demos
-
-### SelectionMenu
-Native Material / system selection menus with headless and inline modes.
-
-📹 **Demo video:**  
-👉 *(add SelectionMenu demo link here)*
 
 ---
 
-### DatePicker
-Native date & time pickers using platform system UI.
-
-📹 **Demo video:**  
-👉 *(add DatePicker demo link here)*
-
----
-
-## 📦 Installation
+## Installation
 
 ```sh
 npm install react-native-platform-components
@@ -53,22 +32,17 @@ pod install
 ```
 
 - Minimum iOS version: **iOS 13+**
-- Uses `UIDatePicker` and system selection menus
+- Uses `UIDatePicker` and SwiftUI Menu
 
 ### Android
 
-- Uses native Android Views
-- Supports **Material 2** and **Material 3**
+- Uses native Android Views with Material Design
+- Supports **Material 3** styling
 - No additional setup required beyond autolinking
 
-### Web
-
-- **SelectionMenu** is supported with a web-appropriate fallback
-- **DatePicker** currently targets native platforms only
-
 ---
 
-## 🚀 Quick Start
+## Quick Start
 
 ### SelectionMenu (Headless)
 
@@ -104,6 +78,33 @@ export function Example() {
 }
 ```
 
+### SelectionMenu (Inline)
+
+```tsx
+import { SelectionMenu } from 'react-native-platform-components';
+
+const options = [
+  { label: 'Apple', data: 'apple' },
+  { label: 'Banana', data: 'banana' },
+  { label: 'Orange', data: 'orange' },
+];
+
+export function Example() {
+  const [value, setValue] = React.useState<string | null>(null);
+
+  return (
+    <SelectionMenu
+      options={options}
+      selected={value}
+      inlineMode
+      placeholder="Select fruit"
+      onSelect={(data) => setValue(data)}
+      android={{ material: 'm3' }}
+    />
+  );
+}
+```
+
 ---
 
 ### DatePicker (Modal)
@@ -134,45 +135,51 @@ export function Example() {
 }
 ```
 
----
-
-## 🧩 Components
-
-## SelectionMenu
+### DatePicker (Embedded)
 
-Native selection menu with **inline** and **headless** modes.
+```tsx
+import { DatePicker } from 'react-native-platform-components';
 
-### Props
+export function Example() {
+  const [date, setDate] = React.useState<Date | null>(new Date());
 
-```ts
-type SelectionMenuProps = {
-  style?: StyleProp<ViewStyle>;
+  return (
+    <DatePicker
+      date={date}
+      presentation="embedded"
+      mode="dateAndTime"
+      onConfirm={(d) => setDate(d)}
+    />
+  );
+}
+```
 
-  options: readonly {
-    label: string;
-    data: string;
-  }[];
+---
 
-  selected: string | null;
+## Components
 
-  disabled?: boolean;
-  placeholder?: string;
+## SelectionMenu
 
-  inlineMode?: boolean;
-  visible?: boolean;
+Native selection menu with **inline** and **headless** modes.
 
-  presentation?: 'auto' | 'popover' | 'sheet';
+### Props
 
-  onSelect?: (data: string, label: string, index: number) => void;
-  onRequestClose?: () => void;
+| Prop | Type | Description |
+|------|------|-------------|
+| `options` | `{ label: string; data: string }[]` | Array of options to display |
+| `selected` | `string \| null` | Currently selected option's `data` value |
+| `disabled` | `boolean` | Disables the menu |
+| `placeholder` | `string` | Placeholder text when no selection |
+| `inlineMode` | `boolean` | If true, renders native inline picker UI |
+| `visible` | `boolean` | Controls headless mode menu visibility |
+| `onSelect` | `(data, label, index) => void` | Called when user selects an option |
+| `onRequestClose` | `() => void` | Called when menu is dismissed without selection |
+| `android.material` | `'system' \| 'm3'` | Material Design style preference |
 
-  ios?: {};
+### Modes
 
-  android?: {
-    material?: 'auto' | 'm2' | 'm3';
-  };
-};
-```
+- **Headless mode** (default): Menu visibility controlled by `visible` prop. Use for custom trigger UI.
+- **Inline mode** (`inlineMode={true}`): Native picker UI rendered inline. Menu managed internally.
 
 ---
 
@@ -182,54 +189,54 @@ Native date & time picker using **platform system pickers**.
 
 ### Props
 
-```ts
-type DatePickerProps = {
-  style?: StyleProp<ViewStyle>;
-
-  date: Date | null;
-
-  minDate?: Date | null;
-  maxDate?: Date | null;
-
-  locale?: string;
-  timeZoneName?: string;
-
-  mode?: 'date' | 'time' | 'dateAndTime' | 'countDownTimer';
-  presentation?: 'modal' | 'inline';
-
-  visible?: boolean;
-
-  onConfirm?: (dateTime: Date) => void;
-  onClosed?: () => void;
-
-  ios?: {
-    preferredStyle?: 'automatic' | 'wheels' | 'inline' | 'compact';
-    countDownDurationSeconds?: number;
-    minuteInterval?: number;
-    roundsToMinuteInterval?: boolean;
-  };
-
-  android?: {
-    firstDayOfWeek?: number;
-    material?: 'auto' | 'm2' | 'm3';
-    dialogTitle?: string;
-    positiveButtonTitle?: string;
-    negativeButtonTitle?: string;
-  };
-};
-```
+| Prop | Type | Description |
+|------|------|-------------|
+| `date` | `Date \| null` | Controlled date value |
+| `minDate` | `Date \| null` | Minimum selectable date |
+| `maxDate` | `Date \| null` | Maximum selectable date |
+| `locale` | `string` | Locale identifier (e.g., `'en-US'`) |
+| `timeZoneName` | `string` | Time zone identifier |
+| `mode` | `'date' \| 'time' \| 'dateAndTime' \| 'countDownTimer'` | Picker mode |
+| `presentation` | `'modal' \| 'embedded'` | Presentation style |
+| `visible` | `boolean` | Controls modal visibility (modal mode only) |
+| `onConfirm` | `(date: Date) => void` | Called when user confirms selection |
+| `onClosed` | `() => void` | Called when modal is dismissed |
+
+### iOS Props (`ios`)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `preferredStyle` | `'automatic' \| 'compact' \| 'inline' \| 'wheels'` | iOS date picker style |
+| `countDownDurationSeconds` | `number` | Duration for countdown timer mode |
+| `minuteInterval` | `number` | Minute interval (1-30) |
+| `roundsToMinuteInterval` | `'inherit' \| 'round' \| 'noRound'` | Rounding behavior |
+
+### Android Props (`android`)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `firstDayOfWeek` | `number` | First day of week (1-7, Sunday=1) |
+| `material` | `'system' \| 'm3'` | Material Design style |
+| `dialogTitle` | `string` | Custom dialog title |
+| `positiveButtonTitle` | `string` | Custom confirm button text |
+| `negativeButtonTitle` | `string` | Custom cancel button text |
 
 ---
 
-## 🧠 Design Philosophy
+## Design Philosophy
 
 - **Native first** — no JS re-implementation of pickers
 - **Headless-friendly** — works with any custom UI
-- **Codegen-safe** — string unions & sentinel values
+- **Codegen-safe** — string unions & sentinel values for type safety
 - **Predictable behavior** — no surprise re-renders or layout hacks
+- **Platform conventions** — respects native UX patterns
 
 ---
 
-## 📄 License
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
 
 MIT

package/android/src/main/java/com/platformcomponents/PCConstants.kt

@@ -0,0 +1,17 @@
+package com.platformcomponents
+
+/**
+ * Centralized sizing constants for Platform Components Android implementations.
+ * These values control touch targets, default dimensions, and fallback sizes.
+ */
+object PCConstants {
+    // MARK: - Touch Targets
+
+    /** Minimum touch target height in dp (Material Design 3 recommends 48dp, we use 56dp for text fields) */
+    const val MIN_TOUCH_TARGET_HEIGHT_DP = 56f
+
+    // MARK: - Fallback Dimensions
+
+    /** Fallback width in dp when constraint width is unavailable */
+    const val FALLBACK_WIDTH_DP = 320f
+}

package/android/src/main/java/com/platformcomponents/PCDatePickerView.kt

@@ -5,6 +5,7 @@ import android.content.Context
 import android.content.ContextWrapper
 import android.content.DialogInterface
 import android.os.Build
+import android.util.Log
 import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
@@ -27,6 +28,10 @@ import kotlin.math.min
 
 class PCDatePickerView(context: Context) : FrameLayout(context) {
 
+  companion object {
+    private const val TAG = "PCDatePicker"
+  }
+
   // --- Public props (set by manager) ---
   private var mode: String = "date" // "date" | "time" | "dateAndTime"
   private var presentation: String = "modal" // "inline" | "modal" | "popover" | "sheet" | "auto" (we treat non-inline as modal-ish)
@@ -80,6 +85,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context) {
       "date", "time", "dateAndTime" -> value
       else -> "date"
     }
+    Log.d(TAG, "applyMode mode=$mode")
     rebuildUI()
   }
 
@@ -94,6 +100,7 @@ class PCDatePickerView(context: Context) : FrameLayout(context) {
       "open", "closed" -> value
       else -> "closed"
     }
+    Log.d(TAG, "applyVisible visible=$visible isInline=${isInline()}")
     if (isInline()) return
 
     if (visible == "open") presentIfNeeded() else dismissIfNeeded()
@@ -313,12 +320,13 @@ class PCDatePickerView(context: Context) : FrameLayout(context) {
   private fun presentIfNeeded() {
     if (showingModal) return
     val act = findFragmentActivity() ?: run {
-      // If we cannot present, treat as cancel
+      Log.w(TAG, "presentIfNeeded: no FragmentActivity found")
       onCancel?.invoke()
       showingModal = false
       return
     }
 
+    Log.d(TAG, "presentIfNeeded mode=$mode material=$androidMaterialMode")
     showingModal = true
 
     when (mode) {
@@ -641,9 +649,8 @@ class PCDatePickerView(context: Context) : FrameLayout(context) {
   // -----------------------------
 
   private fun onCancelOrClose() {
+    Log.d(TAG, "onCancelOrClose")
     showingModal = false
-    // JS typically sets visible="closed" in response to onCancel/onConfirm,
-    // but we defensively mark ourselves closed.
   }
 
   private fun clamp(valueMs: Long): Long {

package/android/src/main/java/com/platformcomponents/PCSelectionMenuView.kt

@@ -59,7 +59,7 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context) {
   }
 
   private val minInlineHeightPx: Int by lazy {
-    (56f * resources.displayMetrics.density).toInt() // M3 default touch target
+    (PCConstants.MIN_TOUCH_TARGET_HEIGHT_DP * resources.displayMetrics.density).toInt()
   }
 
   // Headless needs a non-zero anchor rect for dropdown

package/ios/PCConstants.swift

@@ -0,0 +1,34 @@
+import UIKit
+
+/// Centralized sizing constants for Platform Components iOS implementations.
+/// These values control touch targets, popover sizes, and fallback dimensions.
+enum PCConstants {
+    // MARK: - Touch Targets
+
+    /// Minimum touch target height (Apple HIG recommends 44pt)
+    static let minTouchTargetHeight: CGFloat = 44
+
+    // MARK: - Popover Sizing
+
+    /// Default popover width for selection menus
+    static let popoverWidth: CGFloat = 250
+
+    /// Maximum popover height before scrolling
+    static let popoverMaxHeight: CGFloat = 400
+
+    /// Row height in selection menu popover
+    static let popoverRowHeight: CGFloat = 44
+
+    /// Vertical padding in selection menu popover (top + bottom)
+    static let popoverVerticalPadding: CGFloat = 16
+
+    // MARK: - Fallback Dimensions
+
+    /// Fallback width when constraint width is unavailable
+    static let fallbackWidth: CGFloat = 320
+
+    // MARK: - Timing
+
+    /// Delay before presenting headless menu (allows layout to settle)
+    static let headlessPresentationDelay: TimeInterval = 0.1
+}

package/ios/PCDatePickerView.swift

@@ -1,5 +1,8 @@
+import os.log
 import UIKit
 
+private let logger = Logger(subsystem: "com.platformcomponents", category: "DatePicker")
+
 @objcMembers
 public final class PCDatePickerView: UIControl,
     UIPopoverPresentationControllerDelegate,
@@ -131,7 +134,7 @@ public final class PCDatePickerView: UIControl,
         picker.setNeedsLayout()
         picker.layoutIfNeeded()
         let fitted = picker.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
-        return CGSize(width: UIView.noIntrinsicMetric, height: max(44, fitted.height))
+        return CGSize(width: UIView.noIntrinsicMetric, height: max(PCConstants.minTouchTargetHeight, fitted.height))
     }
 
     /// ✅ Called by your measuring pipeline.
@@ -144,13 +147,13 @@ public final class PCDatePickerView: UIControl,
 
         let width =
             (constrainedSize.width.isFinite && constrainedSize.width > 1)
-            ? constrainedSize.width : 320
+            ? constrainedSize.width : PCConstants.fallbackWidth
         let fitted = picker.systemLayoutSizeFitting(
             CGSize(width: width, height: UIView.layoutFittingCompressedSize.height),
             withHorizontalFittingPriority: .required,
             verticalFittingPriority: .fittingSizeLevel
         )
-        return CGSize(width: constrainedSize.width, height: max(44, fitted.height))
+        return CGSize(width: constrainedSize.width, height: max(PCConstants.minTouchTargetHeight, fitted.height))
     }
 
     /// Separate sizing for popover content.
@@ -204,7 +207,11 @@ public final class PCDatePickerView: UIControl,
 
     private func presentIfNeeded() {
         guard modalVC == nil else { return }
-        guard let top = topViewController() else { return }
+        guard let top = topViewController() else {
+            logger.warning("presentIfNeeded: no view controller found")
+            return
+        }
+        logger.debug("presentIfNeeded: presenting modal picker")
 
         // Prevent “settle” events right as we present.
         suppressNextChangesBriefly()
@@ -239,6 +246,7 @@ public final class PCDatePickerView: UIControl,
 
     private func dismissIfNeeded(emitCancel: Bool) {
         guard let vc = modalVC else { return }
+        logger.debug("dismissIfNeeded: dismissing modal, emitCancel=\(emitCancel)")
         modalVC = nil
         vc.dismiss(animated: true) { [weak self] in
             guard let self else { return }

package/ios/PCSelectionMenu.swift

@@ -1,6 +1,9 @@
+import os.log
 import SwiftUI
 import UIKit
 
+private let logger = Logger(subsystem: "com.platformcomponents", category: "SelectionMenu")
+
 // MARK: - Option model (bridged from ObjC++ as dictionaries)
 
 struct PCSelectionMenuOption {
@@ -259,24 +262,31 @@ public final class PCSelectionMenuView: UIControl {
         let opts = parsedOptions
         guard !opts.isEmpty else { return }
 
-        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+        logger.debug("presentHeadlessMenuIfNeeded: scheduling presentation with \(opts.count) options")
+        DispatchQueue.main.asyncAfter(deadline: .now() + PCConstants.headlessPresentationDelay) {
             let menuVC = PCMenuViewController(
                 options: opts,
                 onSelect: { [weak self] idx in
                     guard let self else { return }
                     let opt = opts[idx]
+                    logger.debug("headless menu selected: index=\(idx), data=\(opt.data)")
                     self.selectedData = opt.data
                     self.onSelect?(idx, opt.label, opt.data)
                 },
                 onCancel: { [weak self] in
+                    logger.debug("headless menu cancelled")
                     self?.onRequestClose?()
                 }
             )
 
             menuVC.modalPresentationStyle = .popover
+            let popoverHeight = min(
+                CGFloat(opts.count) * PCConstants.popoverRowHeight + PCConstants.popoverVerticalPadding,
+                PCConstants.popoverMaxHeight
+            )
             menuVC.preferredContentSize = CGSize(
-                width: 250,
-                height: min(CGFloat(opts.count) * 44 + 16, 400)  // Account for top/bottom padding
+                width: PCConstants.popoverWidth,
+                height: popoverHeight
             )
 
             if let popover = menuVC.popoverPresentationController {
@@ -290,19 +300,18 @@ public final class PCSelectionMenuView: UIControl {
         }
     }
 
-    // MARK: - sizing
+    // MARK: - Sizing
 
     public override func sizeThatFits(_ size: CGSize) -> CGSize {
         if anchorMode != "inline" { return CGSize(width: size.width, height: 1) }
 
-        let minH: CGFloat = 44
         guard let host = hostingController else {
-            return CGSize(width: size.width, height: minH)
+            return CGSize(width: size.width, height: PCConstants.minTouchTargetHeight)
         }
 
-        let w = (size.width > 1) ? size.width : 320
+        let w = (size.width > 1) ? size.width : PCConstants.fallbackWidth
         let fitted = host.sizeThatFits(in: CGSize(width: w, height: .greatestFiniteMagnitude))
-        return CGSize(width: size.width, height: max(minH, fitted.height))
+        return CGSize(width: size.width, height: max(PCConstants.minTouchTargetHeight, fitted.height))
     }
 
     public override var intrinsicContentSize: CGSize {
@@ -310,7 +319,9 @@ public final class PCSelectionMenuView: UIControl {
             return CGSize(width: UIView.noIntrinsicMetric, height: 1)
         }
         let h = max(
-            44, sizeThatFits(CGSize(width: bounds.width, height: .greatestFiniteMagnitude)).height)
+            PCConstants.minTouchTargetHeight,
+            sizeThatFits(CGSize(width: bounds.width, height: .greatestFiniteMagnitude)).height
+        )
         return CGSize(width: UIView.noIntrinsicMetric, height: h)
     }
 }
@@ -348,10 +359,11 @@ private class PCMenuViewController: UIViewController, UITableViewDelegate, UITab
         tableView.dataSource = self
         tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
         tableView.backgroundColor = .clear
-        tableView.separatorStyle = .none  // Remove dividers to match inline
+        tableView.separatorStyle = .none
         tableView.isScrollEnabled = true
-        tableView.rowHeight = 44
-        tableView.contentInset = UIEdgeInsets(top: 8, left: 0, bottom: 8, right: 0)  // Add top/bottom padding
+        tableView.rowHeight = PCConstants.popoverRowHeight
+        let verticalPad = PCConstants.popoverVerticalPadding / 2
+        tableView.contentInset = UIEdgeInsets(top: verticalPad, left: 0, bottom: verticalPad, right: 0)
         tableView.translatesAutoresizingMaskIntoConstraints = false
 
         blurView.contentView.addSubview(tableView)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-platform-components",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "A cross-platform toolkit of native UI components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -63,32 +63,32 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/compat": "^1.3.2",
-    "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.35.0",
-    "@react-native-community/cli": "20.0.1",
-    "@react-native/babel-preset": "0.81.1",
-    "@react-native/eslint-config": "^0.81.1",
-    "@release-it/conventional-changelog": "^10.0.1",
-    "@types/jest": "^29.5.14",
-    "@types/react": "^19.1.0",
+    "@commitlint/config-conventional": "^20.3.1",
+    "@eslint/compat": "^2.0.1",
+    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/js": "^9.39.2",
+    "@react-native-community/cli": "20.1.0",
+    "@react-native/babel-preset": "0.83.1",
+    "@react-native/eslint-config": "^0.83.1",
+    "@release-it/conventional-changelog": "^10.0.4",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.9",
     "@types/react-test-renderer": "^19.1.0",
-    "commitlint": "^19.8.1",
-    "del-cli": "^6.0.0",
-    "eslint": "^9.35.0",
+    "commitlint": "^20.3.1",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "jest": "^29.7.0",
-    "lefthook": "^2.0.3",
-    "prettier": "^2.8.8",
-    "react": "19.1.0",
-    "react-native": "0.81.1",
-    "react-native-builder-bob": "^0.40.16",
-    "react-test-renderer": "19.1.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "jest": "^30.2.0",
+    "lefthook": "^2.0.15",
+    "prettier": "^3.8.1",
+    "react": "19.2.3",
+    "react-native": "0.83.1",
+    "react-native-builder-bob": "^0.40.17",
+    "react-test-renderer": "19.2.3",
     "release-it": "^19.2.4",
-    "turbo": "^2.5.6",
-    "typescript": "^5.9.2"
+    "turbo": "^2.7.5",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "*",
@@ -145,10 +145,16 @@
   "release-it": {
     "git": {
       "commitMessage": "chore: release ${version}",
-      "tagName": "v${version}"
+      "tagName": "v${version}",
+      "requireCleanWorkingDir": false
     },
     "npm": {
-      "publish": false
+      "publish": true,
+      "skipChecks": true,
+      "publishArgs": [
+        "--access",
+        "public"
+      ]
     },
     "github": {
       "release": true