react-native-platform-components 0.0.2

package/package.json

@@ -0,0 +1,178 @@
+{
+  "name": "react-native-platform-components",
+  "version": "0.0.2",
+  "description": "A cross-platform toolkit of native UI components for React Native.",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "shared",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-platform-components-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "release": "release-it --only-version",
+    "test": "jest"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BearPeak-Technology-Group/react-native-platform-components.git"
+  },
+  "author": "Andrew Tosh <andrew.tosh@jarxconcepts.com> (https://github.com/ajtosh77)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/BearPeak-Technology-Group/react-native-platform-components/issues"
+  },
+  "homepage": "https://github.com/BearPeak-Technology-Group/react-native-platform-components#readme",
+  "publishConfig": {
+    "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": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "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",
+    "release-it": "^19.1.0",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "PlatformComponentsViewSpec",
+    "type": "components",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.platformcomponents"
+    },
+    "ios": {
+      "componentProvider": {
+        "PCSelectionMenu": "PCSelectionMenu",
+        "PCDatePicker": "PCDatePicker"
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true,
+      "skipChecks": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "kotlin-objc",
+    "type": "fabric-view",
+    "tools": [
+      "eslint",
+      "lefthook",
+      "release-it",
+      "jest"
+    ],
+    "version": "0.55.1"
+  }
+}

package/shared/PCDatePickerComponentDescriptors-custom.h

@@ -0,0 +1,52 @@
+#pragma once
+
+#include "PCDatePickerShadowNode-custom.h"
+
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/mounting/ShadowView.h>
+#include <react/renderer/core/ShadowNode.h>
+#include <react/renderer/core/ShadowNodeTraits.h>
+#include <react/renderer/core/ShadowNodeFragment.h>
+#include <react/renderer/core/ShadowNodeFamily.h>
+#include <react/renderer/components/view/YogaLayoutableShadowNode.h>
+
+namespace facebook::react
+{
+
+    class MeasuringPCDatePickerComponentDescriptor final
+        : public ConcreteComponentDescriptor<MeasuringPCDatePickerShadowNode>
+    {
+    public:
+        using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+        void adopt(ShadowNode &shadowNode) const override
+        {
+            auto &pickerShadowNode =
+                static_cast<MeasuringPCDatePickerShadowNode &>(shadowNode);
+            auto &layoutableShadowNode =
+                static_cast<YogaLayoutableShadowNode &>(pickerShadowNode);
+
+            auto state =
+                std::static_pointer_cast<
+                    const MeasuringPCDatePickerShadowNode::ConcreteState
+                >(shadowNode.getState());
+
+            if (state)
+            {
+                auto stateData = state->getData();
+                auto frameSize = stateData.frameSize;
+
+                if (frameSize.width >= 0 && frameSize.height >= 0)
+                {
+                    layoutableShadowNode.setSize(Size{
+                        frameSize.width,
+                        frameSize.height,
+                    });
+                }
+            }
+
+            ConcreteComponentDescriptor::adopt(shadowNode);
+        }
+    };
+
+} // namespace facebook::react

package/shared/PCDatePickerShadowNode-custom.cpp

@@ -0,0 +1 @@
+#include "PCDatePickerShadowNode-custom.h"

package/shared/PCDatePickerShadowNode-custom.h

@@ -0,0 +1,27 @@
+#pragma once
+
+#include <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
+#include <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
+#include <react/renderer/components/PlatformComponentsViewSpec/Props.h>
+
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/ConcreteState.h>
+#include <react/renderer/core/ShadowNodeTraits.h>
+#include <react/renderer/mounting/ShadowView.h>
+
+#include "PCDatePickerState-custom.h"
+
+namespace facebook::react
+{
+    class MeasuringPCDatePickerShadowNode final
+        : public ConcreteViewShadowNode<
+              PCDatePickerComponentName,
+              PCDatePickerProps,
+              PCDatePickerEventEmitter,
+              PCDatePickerStateFrameSize>
+    {
+    public:
+        using ConcreteViewShadowNode::ConcreteViewShadowNode;
+    };
+
+} // namespace facebook::react

package/shared/PCDatePickerState-custom.h

@@ -0,0 +1,13 @@
+#pragma once
+
+#include <react/renderer/core/LayoutPrimitives.h>
+
+namespace facebook::react {
+
+struct PCDatePickerStateFrameSize final {
+  using Shared = std::shared_ptr<const PCDatePickerStateFrameSize>;
+
+  Size frameSize{}; // {width, height} in points
+};
+
+} // namespace facebook::react

package/shared/PCSelectionMenuComponentDescriptors-custom.h

@@ -0,0 +1,25 @@
+#pragma once
+
+#include "PCSelectionMenuShadowNode-custom.h"
+
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/mounting/ShadowView.h>
+#include <react/renderer/core/ShadowNode.h>
+#include <react/renderer/core/ShadowNodeTraits.h>
+#include <react/renderer/core/ShadowNodeFragment.h>
+#include <react/renderer/core/ShadowNodeFamily.h>
+#include <react/renderer/components/view/YogaLayoutableShadowNode.h>
+
+namespace facebook::react
+{
+using MeasuringPCSelectionMenuComponentDescriptor = ConcreteComponentDescriptor<MeasuringPCSelectionMenuShadowNode>;
+
+/*
+    class MeasuringPCDatePickerComponentDescriptor final
+        : public ConcreteComponentDescriptor<MeasuringPCSelectionMenuShadowNode>
+    {
+    public:
+        using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+    };*/
+
+} // namespace facebook::react

package/shared/PCSelectionMenuShadowNode-custom.cpp

@@ -0,0 +1,36 @@
+#include <react/renderer/core/LayoutConstraints.h>
+#include "PCSelectionMenuShadowNode-Custom.h"
+
+#include <algorithm>
+
+namespace facebook::react {
+
+  Size MeasuringPCSelectionMenuShadowNode::measureContent(
+      const LayoutContext&,
+      const LayoutConstraints& layoutConstraints) const {
+
+    const Float kHuge = static_cast<Float>(1.0e9);
+
+    const Float maxW = layoutConstraints.maximumSize.width;
+    const Float measuredW = (maxW > 0 && maxW < kHuge) ? maxW : 0;
+
+    const auto& props = *std::static_pointer_cast<const PCSelectionMenuProps>(getProps());
+    const bool inlineMode = props.anchorMode == "inline";
+
+    Float measuredH = 0;
+
+    if (inlineMode) {
+      measuredH = static_cast<Float>(kMinRowHeight); // 44
+    } else {
+      measuredH = 0;
+    }
+
+    // Respect layout constraints (min/max) coming from JS styles
+    measuredH = std::max<Float>(measuredH, layoutConstraints.minimumSize.height);
+    measuredH = std::min<Float>(measuredH, layoutConstraints.maximumSize.height);
+
+    Size result{measuredW, measuredH};
+    return layoutConstraints.clamp(result);
+  }
+
+} // namespace facebook::react

package/shared/PCSelectionMenuShadowNode-custom.h

@@ -0,0 +1,46 @@
+#pragma once
+
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+
+#import <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/Props.h>
+
+namespace facebook::react {
+
+extern const char PCSelectionMenuComponentName[];
+
+/**
+ * ShadowNode for SelectionMenu.
+ *
+ * Key behavior:
+ * - Provides a non-zero default measured height (minRowHeight) so the view
+ *   remains tappable when JS does not specify an explicit height.
+ */
+class MeasuringPCSelectionMenuShadowNode final : public ConcreteViewShadowNode<
+                                          PCSelectionMenuComponentName,
+                                          PCSelectionMenuProps,
+                                          PCSelectionMenuEventEmitter,
+                                          PCSelectionMenuState> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  static constexpr float kMinRowHeight = 44.0f;
+                                            
+  static ShadowNodeTraits BaseTraits() {
+    auto traits = ConcreteViewShadowNode::BaseTraits();
+    traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
+    traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode);
+    return traits;
+  }
+
+  /**
+   * Called by Yoga when it needs the intrinsic size of the component.
+   * We ensure a sensible minimum height so the view doesn't measure to 0.
+   */
+  Size measureContent(
+      const LayoutContext& layoutContext,
+      const LayoutConstraints& layoutConstraints) const override;
+};
+
+} // namespace facebook::react

package/src/DatePicker.tsx

@@ -0,0 +1,146 @@
+// DatePicker.tsx
+import React, { useCallback, useMemo } from 'react';
+import type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import NativeDatePicker, {
+  type DateChangeEvent,
+  type NativeProps as NativeDatePickerProps,
+  type IOSProps as NativeIOSProps,
+  type AndroidProps as NativeAndroidProps,
+  type DatePickerPresentation,
+  type DatePickerMode,
+  type IOSRoundsToMinuteInterval,
+  type IOSDatePickerStyle,
+} from './DatePickerNativeComponent';
+
+import type { AndroidMaterialMode, Visible } from './sharedTypes';
+
+export type DatePickerProps = {
+  style?: StyleProp<ViewStyle>;
+
+  /** Controlled value. Use `null` for "no date selected". */
+  date: Date | null;
+
+  /** Optional bounds. Use `null` for "unbounded". */
+  minDate?: Date | null;
+  maxDate?: Date | null;
+
+  locale?: string;
+  timeZoneName?: string;
+  mode?: DatePickerMode;
+  presentation?: DatePickerPresentation;
+
+  /**
+   * Modal only. If presentation !== "modal", ignored.
+   * Wrapper ergonomics: boolean.
+   */
+  visible?: boolean;
+
+  onConfirm?: (dateTime: Date) => void;
+  onClosed?: () => void;
+
+  ios?: {
+    preferredStyle?: IOSDatePickerStyle;
+    countDownDurationSeconds?: NativeIOSProps['countDownDurationSeconds'];
+    minuteInterval?: NativeIOSProps['minuteInterval'];
+    roundsToMinuteInterval?: IOSRoundsToMinuteInterval;
+  };
+
+  android?: {
+    firstDayOfWeek?: NativeAndroidProps['firstDayOfWeek'];
+    material?: AndroidMaterialMode;
+    dialogTitle?: NativeAndroidProps['dialogTitle'];
+    positiveButtonTitle?: NativeAndroidProps['positiveButtonTitle'];
+    negativeButtonTitle?: NativeAndroidProps['negativeButtonTitle'];
+  };
+};
+
+function dateToMsOrMinusOne(d: Date | null | undefined): number {
+  return d ? d.getTime() : -1;
+}
+
+function normalizeVisible(
+  presentation: NativeDatePickerProps['presentation'] | undefined,
+  visible: boolean | undefined
+): Visible | undefined {
+  // Only meaningful in modal presentation. Keep undefined for inline to avoid noise.
+  if (presentation !== 'modal') return undefined;
+  return visible ? 'open' : 'closed';
+}
+
+export function DatePicker(props: DatePickerProps): React.ReactElement {
+  const {
+    style,
+    date,
+    minDate,
+    maxDate,
+    locale,
+    timeZoneName,
+    mode,
+    presentation = 'modal',
+    visible,
+    onConfirm,
+    onClosed,
+    ios,
+    android,
+  } = props;
+
+  const handleConfirm = useCallback(
+    (e: NativeSyntheticEvent<DateChangeEvent>) => {
+      onConfirm?.(new Date(e.nativeEvent.timestampMs));
+    },
+    [onConfirm]
+  );
+
+  const handleClosed = useCallback(() => {
+    onClosed?.();
+  }, [onClosed]);
+
+  const styles = useMemo(() => createStyles(), []);
+
+  const nativeProps: NativeDatePickerProps = {
+    style: [styles.picker, style] as any,
+
+    mode,
+    locale,
+    timeZoneName,
+
+    presentation,
+    visible: normalizeVisible(presentation, visible) as any,
+
+    dateMs: dateToMsOrMinusOne(date) as any,
+    minDateMs: dateToMsOrMinusOne(minDate ?? null) as any,
+    maxDateMs: dateToMsOrMinusOne(maxDate ?? null) as any,
+
+    onConfirm: onConfirm ? handleConfirm : undefined,
+    onClosed: onClosed ? handleClosed : undefined,
+
+    ios: ios
+      ? {
+          preferredStyle: ios.preferredStyle,
+          countDownDurationSeconds: ios.countDownDurationSeconds,
+          minuteInterval: ios.minuteInterval,
+          roundsToMinuteInterval: ios.roundsToMinuteInterval,
+        }
+      : undefined,
+
+    android: android
+      ? {
+          firstDayOfWeek: android.firstDayOfWeek,
+          material: android.material as any,
+          dialogTitle: android.dialogTitle,
+          positiveButtonTitle: android.positiveButtonTitle,
+          negativeButtonTitle: android.negativeButtonTitle,
+        }
+      : undefined,
+  };
+
+  return <NativeDatePicker {...nativeProps} />;
+}
+
+function createStyles() {
+  return StyleSheet.create({
+    picker: {},
+  });
+}

package/src/DatePickerNativeComponent.ts

@@ -0,0 +1,68 @@
+// DatePickerNativeComponent.ts
+import type { CodegenTypes, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+export type TimestampMs = CodegenTypes.Double;
+
+export type DateChangeEvent = {
+  timestampMs: CodegenTypes.Double;
+};
+
+export type DatePickerMode = 'date' | 'time' | 'dateAndTime' | 'countDownTimer';
+export type DatePickerPresentation = 'modal' | 'embedded';
+
+export type IOSDatePickerStyle = 'automatic' | 'compact' | 'inline' | 'wheels';
+export type IOSRoundsToMinuteInterval = 'inherit' | 'round' | 'noRound';
+
+export type IOSProps = {
+  preferredStyle?: string; // IOSDatePickerStyle
+  countDownDurationSeconds?: CodegenTypes.Double;
+  minuteInterval?: CodegenTypes.Int32;
+  roundsToMinuteInterval?: string; // IOSRoundsToMinuteInterval
+};
+
+export type AndroidProps = {
+  firstDayOfWeek?: CodegenTypes.Int32;
+  material?: string; // AndroidMaterialMode
+  dialogTitle?: string;
+  positiveButtonTitle?: string;
+  negativeButtonTitle?: string;
+};
+
+export type WebProps = Readonly<{}>;
+export type WindowsProps = Readonly<{}>;
+export type MacOSProps = Readonly<{}>;
+
+/**
+ * Sentinel convention:
+ * - `-1` means "no value / unbounded / unset".
+ */
+export type CommonProps = {
+  mode?: string; // DatePickerMode
+
+  dateMs?: CodegenTypes.WithDefault<TimestampMs, -1>;
+  minDateMs?: CodegenTypes.WithDefault<TimestampMs, -1>;
+  maxDateMs?: CodegenTypes.WithDefault<TimestampMs, -1>;
+
+  locale?: string;
+  timeZoneName?: string;
+
+  /**
+   * Only used when presentation === "modal".
+   * Defaults should be applied in JS wrapper (recommended).
+   */
+  visible?: string; // Visible
+
+  /** Defaults should be applied in JS wrapper (recommended). */
+  presentation?: string; // DatePickerPresentation
+};
+
+export interface NativeProps extends ViewProps, CommonProps {
+  ios?: IOSProps;
+  android?: AndroidProps;
+
+  onConfirm?: CodegenTypes.BubblingEventHandler<DateChangeEvent>;
+  onClosed?: CodegenTypes.BubblingEventHandler<Readonly<{}>>;
+}
+
+export default codegenNativeComponent<NativeProps>('PCDatePicker');