fix(fabric): fix Fabric component & TM specs for new architecture (#877)

* Rename component codegen spec have required "NativeComponent" suffix

* Component codegen should be interface only

* Reference renamed codegen spec

* Fixup TM JS to not include imported type defs

* Use buck compatible Plugins header import

ios/fabric/RNDateTimePickerComponentView.mm

@@ -10,7 +10,7 @@
 #import <react/renderer/components/RNDateTimePickerCGen/Props.h>
 #import <react/renderer/components/RNDateTimePickerCGen/RCTComponentViewHelpers.h>
 
-#import "RCTFabricComponentsPlugins.h"
+#import <React/RCTFabricComponentsPlugins.h>
 #import "RNDateTimePicker.h"
 
 using namespace facebook::react;

src/picker.ios.js

@@ -7,6 +7,6 @@
  * @format
  * @flow strict-local
  */
-import RNDateTimePicker from './specs/NativeComponentDateTimePicker';
+import RNDateTimePicker from './specs/DateTimePickerNativeComponent';
 
 export default RNDateTimePicker;

src/specs/NativeComponentDateTimePicker.js → src/specs/DateTimePickerNativeComponent.js

@@ -18,26 +18,27 @@ type DateTimePickerEvent = $ReadOnly<{|
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
-  onChange?: ?BubblingEventHandler<DateTimePickerEvent>,
-  onPickerDismiss?: ?BubblingEventHandler<null>,
-  maximumDate?: ?Double,
-  minimumDate?: ?Double,
+  accentColor?: ?ColorValue,
   date?: ?Double,
+  displayIOS?: WithDefault<
+    'default' | 'spinner' | 'compact' | 'inline',
+    'default',
+  >,
   locale?: ?string,
+  maximumDate?: ?Double,
+  minimumDate?: ?Double,
   minuteInterval?: ?Int32,
   mode?: WithDefault<'date' | 'time' | 'datetime' | 'countdown', 'date'>,
-  timeZoneOffsetInMinutes?: ?Double,
-  timeZoneName?: ?string,
+  onChange?: ?BubblingEventHandler<DateTimePickerEvent>,
+  onPickerDismiss?: ?BubblingEventHandler<null>,
   textColor?: ?ColorValue,
-  accentColor?: ?ColorValue,
   themeVariant?: WithDefault<'dark' | 'light' | 'unspecified', 'unspecified'>,
-  displayIOS?: WithDefault<
-    'default' | 'spinner' | 'compact' | 'inline',
-    'default',
-  >,
+  timeZoneName?: ?string,
+  timeZoneOffsetInMinutes?: ?Double,
   enabled?: WithDefault<boolean, true>,
 |}>;
 
 export default (codegenNativeComponent<NativeProps>('RNDateTimePicker', {
   excludedPlatforms: ['android'],
+  interfaceOnly: true,
 }): HostComponent<NativeProps>);

src/specs/NativeModuleDatePicker.js

@@ -2,14 +2,27 @@
 
 import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport';
 import {TurboModuleRegistry} from 'react-native';
-import type {DateTimePickerResult} from '../types';
 
-type OpenParams = $ReadOnly<{|
-  // TODO does codegen handle object type?
-|}>;
+export type DatePickerOpenParams = $ReadOnly<{
+  dialogButtons?: $ReadOnly<{string: string}>,
+  display?: string,
+  maximumDate?: number,
+  minimumDate?: number,
+  testID?: string,
+  timeZoneName?: number,
+  timeZoneOffsetInMinutes?: number,
+}>;
+
+type DateSetAction = 'dateSetAction' | 'dismissedAction';
+type DatePickerResult = $ReadOnly<{
+  action: DateSetAction,
+  timestamp: number,
+  utcOffset: number,
+}>;
+
 export interface Spec extends TurboModule {
-  dismiss(): Promise<boolean>;
-  open(params: OpenParams): Promise<DateTimePickerResult>;
+  +dismiss: () => Promise<boolean>;
+  +open: (params: DatePickerOpenParams) => Promise<DatePickerResult>;
 }
 
 export default (TurboModuleRegistry.getEnforcing<Spec>('RNCDatePicker'): ?Spec);

src/specs/NativeModuleTimePicker.js

@@ -2,15 +2,25 @@
 
 import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport';
 import {TurboModuleRegistry} from 'react-native';
-import type {DateTimePickerResult} from '../types';
 
-type OpenParams = $ReadOnly<{|
-  // TODO does codegen handle object type?
-|}>;
+export type TimePickerOpenParams = $ReadOnly<{
+  dialogButtons?: $ReadOnly<{string: string}>,
+  display?: string,
+  is24Hour?: boolean,
+  minuteInterval?: number,
+  timeZoneOffsetInMinutes?: number,
+}>;
+
+type TimeSetAction = 'timeSetAction' | 'dismissedAction';
+type TimePickerResult = $ReadOnly<{
+  action: TimeSetAction,
+  timestamp: number,
+  utcOffset: number,
+}>;
 
 export interface Spec extends TurboModule {
-  dismiss(): Promise<boolean>;
-  open(params: OpenParams): Promise<DateTimePickerResult>;
+  +dismiss: () => Promise<boolean>;
+  +open: (params: TimePickerOpenParams) => Promise<TimePickerResult>;
 }
 
 export default (TurboModuleRegistry.getEnforcing<Spec>('RNCTimePicker'): ?Spec);