add InternalMetaobjectField component

Author: kjbrum

packages/ui-extensions-react/src/surfaces/admin/components.ts

@@ -83,3 +83,5 @@ export {URLField} from './components/URLField/URLField';
 export type {URLFieldProps} from './components/URLField/URLField';
 export {InternalLocationList} from './components/InternalLocationList/InternalLocationList';
 export type {InternalLocationListProps} from './components/InternalLocationList/InternalLocationList';
+export {InternalMetaobjectField} from './components/InternalMetaobjectField/InternalMetaobjectField';
+export type {InternalMetaobjectFieldProps} from './components/InternalMetaobjectField/InternalMetaobjectField';

packages/ui-extensions-react/src/surfaces/admin/components/InternalMetaobjectField/InternalMetaobjectField.ts

@@ -0,0 +1,7 @@
+import {InternalMetaobjectField as BaseInternalMetaobjectField} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const InternalMetaobjectField = createRemoteReactComponent(
+  BaseInternalMetaobjectField,
+);
+export type {InternalMetaobjectFieldProps} from '@shopify/ui-extensions/admin';

packages/ui-extensions/src/surfaces/admin/components.ts

@@ -87,3 +87,5 @@ export {URLField} from './components/URLField/URLField';
 export type {URLFieldProps} from './components/URLField/URLField';
 export {InternalLocationList} from './components/InternalLocationList/InternalLocationList';
 export type {InternalLocationListProps} from './components/InternalLocationList/InternalLocationList';
+export {InternalMetaobjectField} from './components/InternalMetaobjectField/InternalMetaobjectField';
+export type {InternalMetaobjectFieldProps} from './components/InternalMetaobjectField/InternalMetaobjectField';

packages/ui-extensions/src/surfaces/admin/components/InternalMetaobjectField/InternalMetaobjectField.ts

@@ -0,0 +1,23 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface InternalMetaobjectFieldProps {
+  /**
+   * The id of the metaobject.
+   */
+  id: string;
+
+  /**
+   * The definition type of the metaobject.
+   */
+  definitionType: string;
+
+  /**
+   * The key of the metaobject field.
+   */
+  fieldKey: string;
+}
+
+export const InternalMetaobjectField = createRemoteComponent<
+  'InternalMetaobjectField',
+  InternalMetaobjectFieldProps
+>('InternalMetaobjectField');

packages/ui-extensions/src/surfaces/admin/extension-targets.ts

@@ -47,6 +47,10 @@ type OrderRoutingComponents = AnyComponentBuilder<
   Pick<Components, 'InternalLocationList'>
 >;
 
+type CustomDataComponents = AnyComponentBuilder<
+  Pick<Components, 'InternalMetaobjectField'>
+>;
+
 /**
  * See the [list of available components](/docs/api/admin-extensions/components).
  */
@@ -56,6 +60,7 @@ type AllComponents = AnyComponentBuilder<
     | 'CustomerSegmentTemplate'
     | 'InternalCustomerSegmentTemplate'
     | 'InternalLocationList'
+    | 'InternalMetaobjectField'
   >
 >;
 
@@ -181,7 +186,7 @@ export interface ExtensionTargets {
    */
   'admin.metaobject-details.block.render': RenderExtension<
     BlockExtensionApi<'admin.metaobject-details.block.render'>,
-    AllComponents
+    AllComponents | CustomDataComponents
   >;
 
   /**
@@ -292,7 +297,7 @@ export interface ExtensionTargets {
    */
   'admin.metaobject-details.action.render': RenderExtension<
     ActionExtensionApi<'admin.metaobject-details.action.render'>,
-    AllComponents
+    AllComponents | CustomDataComponents
   >;
 
   /**