refactor(admin-ui): Co-locate ui extension code

packages/admin-ui/src/lib/core/src/core.module.ts

@@ -28,7 +28,7 @@ import { InjectableTranslateMessageFormatCompiler } from './providers/i18n/custo
 import { I18nService } from './providers/i18n/i18n.service';
 import { LocalStorageService } from './providers/local-storage/local-storage.service';
 import { NotificationService } from './providers/notification/notification.service';
-import { registerDefaultFormInputs } from './shared/dynamic-form-inputs/register-dynamic-input-components';
+import { registerDefaultFormInputs } from './shared/dynamic-form-inputs/default-form-inputs';
 import { SharedModule } from './shared/shared.module';
 
 @NgModule({

packages/admin-ui/src/lib/core/src/extension/add-action-bar-item.ts

@@ -0,0 +1,39 @@
+import { APP_INITIALIZER, Provider } from '@angular/core';
+import { ActionBarItem } from '../providers/nav-builder/nav-builder-types';
+import { NavBuilderService } from '../providers/nav-builder/nav-builder.service';
+
+/**
+ * @description
+ * Adds a button to the ActionBar at the top right of each list or detail view. The locationId can
+ * be determined by inspecting the DOM and finding the <vdr-action-bar> element and its
+ * `data-location-id` attribute.
+ *
+ * This should be used in the NgModule `providers` array of your ui extension module.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   providers: [
+ *     addActionBarItem({
+ *      id: 'print-invoice'
+ *      label: 'Print Invoice',
+ *      locationId: 'order-detail',
+ *      routerLink: ['/extensions/invoicing'],
+ *     }),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ```
+ * @docsCategory action-bar
+ */
+export function addActionBarItem(config: ActionBarItem): Provider {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (navBuilderService: NavBuilderService) => () => {
+            navBuilderService.addActionBarItem(config);
+        },
+        deps: [NavBuilderService],
+    };
+}

packages/admin-ui/src/lib/core/src/extension/add-nav-menu-item.ts

@@ -0,0 +1,81 @@
+import { APP_INITIALIZER, Provider } from '@angular/core';
+import { NavMenuItem, NavMenuSection } from '../providers/nav-builder/nav-builder-types';
+import { NavBuilderService } from '../providers/nav-builder/nav-builder.service';
+
+/**
+ * @description
+ * Add a section to the main nav menu. Providing the `before` argument will
+ * move the section before any existing section with the specified id. If
+ * omitted (or if the id is not found) the section will be appended to the
+ * existing set of sections.
+ * This should be used in the NgModule `providers` array of your ui extension module.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   providers: [
+ *     addNavMenuSection({
+ *       id: 'reports',
+ *       label: 'Reports',
+ *       items: [{
+ *           // ...
+ *       }],
+ *     },
+ *     'settings'),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ```
+ * @docsCategory nav-menu
+ */
+export function addNavMenuSection(config: NavMenuSection, before?: string): Provider {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (navBuilderService: NavBuilderService) => () => {
+            navBuilderService.addNavMenuSection(config, before);
+        },
+        deps: [NavBuilderService],
+    };
+}
+
+/**
+ * @description
+ * Add a menu item to an existing section specified by `sectionId`. The id of the section
+ * can be found by inspecting the DOM and finding the `data-section-id` attribute.
+ * Providing the `before` argument will move the item before any existing item with the specified id.
+ * If omitted (or if the name is not found) the item will be appended to the
+ * end of the section.
+ *
+ * This should be used in the NgModule `providers` array of your ui extension module.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   providers: [
+ *     addNavMenuItem({
+ *       id: 'reviews',
+ *       label: 'Product Reviews',
+ *       routerLink: ['/extensions/reviews'],
+ *       icon: 'star',
+ *     },
+ *     'marketing'),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ``
+ *
+ * @docsCategory nav-menu
+ */
+export function addNavMenuItem(config: NavMenuItem, sectionId: string, before?: string): Provider {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (navBuilderService: NavBuilderService) => () => {
+            navBuilderService.addNavMenuItem(config, sectionId, before);
+        },
+        deps: [NavBuilderService],
+    };
+}

packages/admin-ui/src/lib/core/src/providers/bulk-action-registry/register-bulk-action.ts → packages/admin-ui/src/lib/core/src/extension/register-bulk-action.ts

@@ -1,7 +1,7 @@
 import { APP_INITIALIZER, FactoryProvider } from '@angular/core';
 
-import { BulkActionRegistryService } from './bulk-action-registry.service';
-import { BulkAction } from './bulk-action-types';
+import { BulkActionRegistryService } from '../providers/bulk-action-registry/bulk-action-registry.service';
+import { BulkAction } from '../providers/bulk-action-registry/bulk-action-types';
 
 /**
  * @description

packages/admin-ui/src/lib/core/src/extension/register-custom-detail-component.ts

@@ -0,0 +1,21 @@
+import { APP_INITIALIZER, Provider } from '@angular/core';
+import { CustomDetailComponentConfig } from '../providers/custom-detail-component/custom-detail-component-types';
+import { CustomDetailComponentService } from '../providers/custom-detail-component/custom-detail-component.service';
+
+/**
+ * @description
+ * Registers a {@link CustomDetailComponent} to be placed in a given location. This allows you
+ * to embed any type of custom Angular component in the entity detail pages of the Admin UI.
+ *
+ * @docsCategory custom-detail-components
+ */
+export function registerCustomDetailComponent(config: CustomDetailComponentConfig): Provider {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (customDetailComponentService: CustomDetailComponentService) => () => {
+            customDetailComponentService.registerCustomDetailComponent(config);
+        },
+        deps: [CustomDetailComponentService],
+    };
+}

packages/admin-ui/src/lib/core/src/providers/dashboard-widget/register-dashboard-widget.ts → packages/admin-ui/src/lib/core/src/extension/register-dashboard-widget.ts

@@ -1,12 +1,17 @@
 import { APP_INITIALIZER, FactoryProvider } from '@angular/core';
 
-import { DashboardWidgetConfig, WidgetLayoutDefinition } from './dashboard-widget-types';
-import { DashboardWidgetService } from './dashboard-widget.service';
+import {
+    DashboardWidgetConfig,
+    WidgetLayoutDefinition,
+} from '../providers/dashboard-widget/dashboard-widget-types';
+import { DashboardWidgetService } from '../providers/dashboard-widget/dashboard-widget.service';
 
 /**
  * @description
  * Registers a dashboard widget. Once registered, the widget can be set as part of the default
  * (using {@link setDashboardWidgetLayout}).
+ *
+ * @docsCategory dashboard-widgets
  */
 export function registerDashboardWidget(id: string, config: DashboardWidgetConfig): FactoryProvider {
     return {
@@ -22,6 +27,8 @@ export function registerDashboardWidget(id: string, config: DashboardWidgetConfi
 /**
  * @description
  * Sets the default widget layout for the Admin UI dashboard.
+ *
+ * @docsCategory dashboard-widgets
  */
 export function setDashboardWidgetLayout(layoutDef: WidgetLayoutDefinition): FactoryProvider {
     return {

packages/admin-ui/src/lib/core/src/extension/register-form-input-component.ts

@@ -0,0 +1,61 @@
+import { APP_INITIALIZER, FactoryProvider, Type } from '@angular/core';
+import { FormInputComponent } from '../common/component-registry-types';
+import { ComponentRegistryService } from '../providers/component-registry/component-registry.service';
+
+/**
+ * @description
+ * Registers a custom FormInputComponent which can be used to control the argument inputs
+ * of a {@link ConfigurableOperationDef} (e.g. CollectionFilter, ShippingMethod etc) or for
+ * a custom field.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   declarations: [MyCustomFieldControl],
+ *   providers: [
+ *       registerFormInputComponent('my-custom-input', MyCustomFieldControl),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ```
+ *
+ * This input component can then be used in a custom field:
+ *
+ * @example
+ * ```TypeScript
+ * const config = {
+ *   // ...
+ *   customFields: {
+ *     ProductVariant: [
+ *       {
+ *         name: 'rrp',
+ *         type: 'int',
+ *         ui: { component: 'my-custom-input' },
+ *       },
+ *     ]
+ *   }
+ * }
+ * ```
+ *
+ * or with an argument of a {@link ConfigurableOperationDef}:
+ *
+ * @example
+ * ```TypeScript
+ * args: {
+ *   rrp: { type: 'int', ui: { component: 'my-custom-input' } },
+ * }
+ * ```
+ *
+ * @docsCategory custom-input-components
+ */
+export function registerFormInputComponent(id: string, component: Type<FormInputComponent>): FactoryProvider {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (registry: ComponentRegistryService) => () => {
+            registry.registerInputComponent(id, component);
+        },
+        deps: [ComponentRegistryService],
+    };
+}

packages/admin-ui/src/lib/core/src/extension/register-history-entry-component.ts

@@ -0,0 +1,22 @@
+import { APP_INITIALIZER, Provider } from '@angular/core';
+import { HistoryEntryConfig } from '../providers/custom-history-entry-component/history-entry-component-types';
+import { HistoryEntryComponentService } from '../providers/custom-history-entry-component/history-entry-component.service';
+
+/**
+ * @description
+ * Registers a {@link HistoryEntryComponent} for displaying history entries in the Order/Customer
+ * history timeline.
+ *
+ * @since 1.9.0
+ * @docsCategory custom-history-entry-components
+ */
+export function registerHistoryEntryComponent(config: HistoryEntryConfig): Provider {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (customHistoryEntryComponentService: HistoryEntryComponentService) => () => {
+            customHistoryEntryComponentService.registerComponent(config);
+        },
+        deps: [HistoryEntryComponentService],
+    };
+}

packages/admin-ui/src/lib/core/src/providers/custom-detail-component/custom-detail-component.service.ts

@@ -1,25 +1,7 @@
-import { APP_INITIALIZER, Injectable, Provider } from '@angular/core';
+import { Injectable } from '@angular/core';
 
 import { CustomDetailComponentConfig } from './custom-detail-component-types';
 
-/**
- * @description
- * Registers a {@link CustomDetailComponent} to be placed in a given location. This allows you
- * to embed any type of custom Angular component in the entity detail pages of the Admin UI.
- *
- * @docsCategory custom-detail-components
- */
-export function registerCustomDetailComponent(config: CustomDetailComponentConfig): Provider {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (customDetailComponentService: CustomDetailComponentService) => () => {
-            customDetailComponentService.registerCustomDetailComponent(config);
-        },
-        deps: [CustomDetailComponentService],
-    };
-}
-
 @Injectable({
     providedIn: 'root',
 })

packages/admin-ui/src/lib/core/src/providers/custom-history-entry-component/history-entry-component.service.ts

@@ -1,26 +1,7 @@
-import { APP_INITIALIZER, Injectable, Provider, Type } from '@angular/core';
+import { Injectable, Type } from '@angular/core';
 
 import { HistoryEntryComponent, HistoryEntryConfig } from './history-entry-component-types';
 
-/**
- * @description
- * Registers a {@link HistoryEntryComponent} for displaying history entries in the Order/Customer
- * history timeline.
- *
- * @since 1.9.0
- * @docsCategory custom-history-entry-components
- */
-export function registerHistoryEntryComponent(config: HistoryEntryConfig): Provider {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (customHistoryEntryComponentService: HistoryEntryComponentService) => () => {
-            customHistoryEntryComponentService.registerComponent(config);
-        },
-        deps: [HistoryEntryComponentService],
-    };
-}
-
 @Injectable({
     providedIn: 'root',
 })

packages/admin-ui/src/lib/core/src/providers/dashboard-widget/dashboard-widget-types.ts

@@ -2,11 +2,18 @@ import { Type } from '@angular/core';
 
 export type DashboardWidgetWidth = 3 | 4 | 6 | 8 | 12;
 
+/**
+ * @description
+ * A configuration object for a dashboard widget.
+ *
+ * @docsCategory dashboard-widgets
+ */
 export interface DashboardWidgetConfig {
     /**
+     * @description
      * Used to specify the widget component. Supports both eager- and lazy-loading.
      * @example
-     * ```TypeScript
+     * ```ts
      * // eager-loading
      * loadComponent: () => MyWidgetComponent,
      *
@@ -16,22 +23,31 @@ export interface DashboardWidgetConfig {
      */
     loadComponent: () => Promise<Type<any>> | Type<any>;
     /**
+     * @description
      * The title of the widget. Can be a translation token as it will get passed
      * through the `translate` pipe.
      */
     title?: string;
     /**
+     * @description
      * The supported widths of the widget, in terms of a Bootstrap-style 12-column grid.
      * If omitted, then it is assumed the widget supports all widths.
      */
     supportedWidths?: DashboardWidgetWidth[];
     /**
+     * @description
      * If set, the widget will only be displayed if the current user has all the
      * specified permissions.
      */
     requiresPermissions?: string[];
 }
 
+/**
+ * @description
+ * A configuration object for the default dashboard widget layout.
+ *
+ * @docsCategory dashboard-widgets
+ */
 export type WidgetLayoutDefinition = Array<{ id: string; width: DashboardWidgetWidth }>;
 export type WidgetLayout = Array<
     Array<{ id: string; config: DashboardWidgetConfig; width: DashboardWidgetWidth }>

packages/admin-ui/src/lib/core/src/providers/nav-builder/nav-builder.service.ts

@@ -1,4 +1,4 @@
-import { APP_INITIALIZER, Injectable, Provider } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { BehaviorSubject, combineLatest, Observable, of } from 'rxjs';
@@ -14,120 +14,6 @@ import {
     RouterLinkDefinition,
 } from './nav-builder-types';
 
-/**
- * @description
- * Add a section to the main nav menu. Providing the `before` argument will
- * move the section before any existing section with the specified id. If
- * omitted (or if the id is not found) the section will be appended to the
- * existing set of sections.
- * This should be used in the NgModule `providers` array of your ui extension module.
- *
- * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   providers: [
- *     addNavMenuSection({
- *       id: 'reports',
- *       label: 'Reports',
- *       items: [{
- *           // ...
- *       }],
- *     },
- *     'settings'),
- *   ],
- * })
- * export class MyUiExtensionModule {}
- * ```
- * @docsCategory nav-menu
- */
-export function addNavMenuSection(config: NavMenuSection, before?: string): Provider {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (navBuilderService: NavBuilderService) => () => {
-            navBuilderService.addNavMenuSection(config, before);
-        },
-        deps: [NavBuilderService],
-    };
-}
-
-/**
- * @description
- * Add a menu item to an existing section specified by `sectionId`. The id of the section
- * can be found by inspecting the DOM and finding the `data-section-id` attribute.
- * Providing the `before` argument will move the item before any existing item with the specified id.
- * If omitted (or if the name is not found) the item will be appended to the
- * end of the section.
- *
- * This should be used in the NgModule `providers` array of your ui extension module.
- *
- * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   providers: [
- *     addNavMenuItem({
- *       id: 'reviews',
- *       label: 'Product Reviews',
- *       routerLink: ['/extensions/reviews'],
- *       icon: 'star',
- *     },
- *     'marketing'),
- *   ],
- * })
- * export class MyUiExtensionModule {}
- * ``
- *
- * @docsCategory nav-menu
- */
-export function addNavMenuItem(config: NavMenuItem, sectionId: string, before?: string): Provider {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (navBuilderService: NavBuilderService) => () => {
-            navBuilderService.addNavMenuItem(config, sectionId, before);
-        },
-        deps: [NavBuilderService],
-    };
-}
-
-/**
- * @description
- * Adds a button to the ActionBar at the top right of each list or detail view. The locationId can
- * be determined by inspecting the DOM and finding the <vdr-action-bar> element and its
- * `data-location-id` attribute.
- *
- * This should be used in the NgModule `providers` array of your ui extension module.
- *
- * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   providers: [
- *     addActionBarItem({
- *      id: 'print-invoice'
- *      label: 'Print Invoice',
- *      locationId: 'order-detail',
- *      routerLink: ['/extensions/invoicing'],
- *     }),
- *   ],
- * })
- * export class MyUiExtensionModule {}
- * ```
- * @docsCategory action-bar
- */
-export function addActionBarItem(config: ActionBarItem): Provider {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (navBuilderService: NavBuilderService) => () => {
-            navBuilderService.addActionBarItem(config);
-        },
-        deps: [NavBuilderService],
-    };
-}
-
 /**
  * This service is used to define the contents of configurable menus in the application.
  */

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -84,7 +84,7 @@ export * from './providers/auth/auth.service';
 export * from './providers/breadcrumb/breadcrumb.service';
 export * from './providers/bulk-action-registry/bulk-action-registry.service';
 export * from './providers/bulk-action-registry/bulk-action-types';
-export * from './providers/bulk-action-registry/register-bulk-action';
+export * from './extension/register-bulk-action';
 export * from './providers/channel/channel.service';
 export * from './providers/component-registry/component-registry.service';
 export * from './providers/custom-detail-component/custom-detail-component-types';
@@ -94,7 +94,7 @@ export * from './providers/custom-history-entry-component/history-entry-componen
 export * from './providers/custom-history-entry-component/history-entry-component.service';
 export * from './providers/dashboard-widget/dashboard-widget-types';
 export * from './providers/dashboard-widget/dashboard-widget.service';
-export * from './providers/dashboard-widget/register-dashboard-widget';
+export * from './extension/register-dashboard-widget';
 export * from './providers/data-table/data-table-filter-collection';
 export * from './providers/data-table/data-table-filter';
 export * from './providers/data-table/data-table-sort-collection';
@@ -259,7 +259,7 @@ export * from './shared/dynamic-form-inputs/number-form-input/number-form-input.
 export * from './shared/dynamic-form-inputs/password-form-input/password-form-input.component';
 export * from './shared/dynamic-form-inputs/product-multi-selector-form-input/product-multi-selector-form-input.component';
 export * from './shared/dynamic-form-inputs/product-selector-form-input/product-selector-form-input.component';
-export * from './shared/dynamic-form-inputs/register-dynamic-input-components';
+export * from './shared/dynamic-form-inputs/default-form-inputs';
 export * from './shared/dynamic-form-inputs/relation-form-input/asset/relation-asset-input.component';
 export * from './shared/dynamic-form-inputs/relation-form-input/customer/relation-customer-input.component';
 export * from './shared/dynamic-form-inputs/relation-form-input/generic/relation-generic-input.component';
@@ -293,3 +293,9 @@ export * from './shared/pipes/time-ago.pipe';
 export * from './shared/providers/routing/can-deactivate-detail-guard';
 export * from './shared/shared.module';
 export * from './validators/unicode-pattern.validator';
+export { registerCustomDetailComponent } from './extension/register-custom-detail-component';
+export { registerHistoryEntryComponent } from './extension/register-history-entry-component';
+export { addNavMenuItem } from './extension/add-nav-menu-item';
+export { addNavMenuSection } from './extension/add-nav-menu-item';
+export { addActionBarItem } from './extension/add-action-bar-item';
+export { registerFormInputComponent } from './extension/register-form-input-component';

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/register-dynamic-input-components.ts → packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/default-form-inputs.ts

@@ -1,12 +1,5 @@
-import { APP_INITIALIZER, FactoryProvider, Provider, Type } from '@angular/core';
-
-import { FormInputComponent } from '../../common/component-registry-types';
-import { ComponentRegistryService } from '../../providers/component-registry/component-registry.service';
-import {
-    CustomFieldComponentService,
-    CustomFieldControl,
-    CustomFieldEntityName,
-} from '../../providers/custom-field-component/custom-field-component.service';
+import { FactoryProvider } from '@angular/core';
+import { registerFormInputComponent } from '../../extension/register-form-input-component';
 
 import { BooleanFormInputComponent } from './boolean-form-input/boolean-form-input.component';
 import { HtmlEditorFormInputComponent } from './code-editor-form-input/html-editor-form-input.component';
@@ -46,64 +39,6 @@ export const defaultFormInputs = [
     CombinationModeFormInputComponent,
 ];
 
-/**
- * @description
- * Registers a custom FormInputComponent which can be used to control the argument inputs
- * of a {@link ConfigurableOperationDef} (e.g. CollectionFilter, ShippingMethod etc) or for
- * a custom field.
- *
- * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   declarations: [MyCustomFieldControl],
- *   providers: [
- *       registerFormInputComponent('my-custom-input', MyCustomFieldControl),
- *   ],
- * })
- * export class MyUiExtensionModule {}
- * ```
- *
- * This input component can then be used in a custom field:
- *
- * @example
- * ```TypeScript
- * const config = {
- *   // ...
- *   customFields: {
- *     ProductVariant: [
- *       {
- *         name: 'rrp',
- *         type: 'int',
- *         ui: { component: 'my-custom-input' },
- *       },
- *     ]
- *   }
- * }
- * ```
- *
- * or with an argument of a {@link ConfigurableOperationDef}:
- *
- * @example
- * ```TypeScript
- * args: {
- *   rrp: { type: 'int', ui: { component: 'my-custom-input' } },
- * }
- * ```
- *
- * @docsCategory custom-input-components
- */
-export function registerFormInputComponent(id: string, component: Type<FormInputComponent>): FactoryProvider {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (registry: ComponentRegistryService) => () => {
-            registry.registerInputComponent(id, component);
-        },
-        deps: [ComponentRegistryService],
-    };
-}
-
 /**
  * Registers the default form input components.
  */

packages/admin-ui/src/lib/react/src/components/react-custom-detail.component.ts

@@ -3,7 +3,7 @@ import { FormGroup, UntypedFormGroup } from '@angular/forms';
 import { CustomDetailComponent } from '@vendure/admin-ui/core';
 import { ElementType } from 'react';
 import { Observable } from 'rxjs';
-import { ReactComponentHostDirective } from '../react-component-host.directive';
+import { ReactComponentHostDirective } from '../directives/react-component-host.directive';
 
 export const REACT_CUSTOM_DETAIL_COMPONENT_OPTIONS = new InjectionToken<{
     component: ElementType;

packages/admin-ui/src/lib/react/src/components/react-form-input.component.ts

@@ -2,7 +2,7 @@ import { Component, inject, InjectionToken, OnInit, ViewEncapsulation } from '@a
 import { FormControl } from '@angular/forms';
 import { CustomField, FormInputComponent } from '@vendure/admin-ui/core';
 import { ElementType } from 'react';
-import { ReactComponentHostDirective } from '../react-component-host.directive';
+import { ReactComponentHostDirective } from '../directives/react-component-host.directive';
 import { ReactFormInputOptions } from '../types';
 
 export const REACT_INPUT_COMPONENT_OPTIONS = new InjectionToken<{

packages/admin-ui/src/lib/react/src/components/react-route.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject, InjectionToken, ViewEncapsulation } from '@angular/core';
 import { ROUTE_COMPONENT_OPTIONS, RouteComponent, SharedModule } from '@vendure/admin-ui/core';
-import { ReactComponentHostDirective } from '../react-component-host.directive';
+import { ReactComponentHostDirective } from '../directives/react-component-host.directive';
 import { ReactRouteComponentOptions } from '../types';
 
 export const REACT_ROUTE_COMPONENT_OPTIONS = new InjectionToken<ReactRouteComponentOptions>(

packages/admin-ui/src/lib/react/src/react-component-host.directive.ts → packages/admin-ui/src/lib/react/src/directives/react-component-host.directive.ts

@@ -2,7 +2,7 @@ import { Directive, ElementRef, Injector, Input, Optional } from '@angular/core'
 import { PageMetadataService } from '@vendure/admin-ui/core';
 import { ComponentProps, createContext, createElement, ElementType } from 'react';
 import { createRoot, Root } from 'react-dom/client';
-import { HostedReactComponentContext } from './types';
+import { HostedReactComponentContext } from '../types';
 
 export const HostedComponentContext = createContext<HostedReactComponentContext | null>(null);
 

packages/admin-ui/src/lib/react/src/public_api.ts

@@ -2,14 +2,15 @@
 export * from './components/react-custom-detail.component';
 export * from './components/react-form-input.component';
 export * from './components/react-route.component';
-export * from './hooks/use-detail-component-data';
-export * from './hooks/use-form-control';
-export * from './hooks/use-injector';
-export * from './hooks/use-page-metadata';
-export * from './hooks/use-query';
-export * from './providers';
-export * from './react-component-host.directive';
+export * from './react-hooks/use-detail-component-data';
+export * from './react-hooks/use-form-control';
+export * from './react-hooks/use-injector';
+export * from './react-hooks/use-page-metadata';
+export * from './react-hooks/use-query';
+export * from './register-react-custom-detail-component';
+export * from './directives/react-component-host.directive';
 export * from './react-components/Card';
 export * from './react-components/Link';
 export * from './register-react-route-component';
 export * from './types';
+export { registerReactFormInputComponent } from './register-react-form-input-component';

packages/admin-ui/src/lib/react/src/react-components/Link.tsx

@@ -1,6 +1,6 @@
 import { Router } from '@angular/router';
 import React, { PropsWithChildren } from 'react';
-import { useInjector } from '../hooks/use-injector';
+import { useInjector } from '../react-hooks/use-injector';
 
 /**
  * @description

packages/admin-ui/src/lib/react/src/hooks/use-detail-component-data.ts → packages/admin-ui/src/lib/react/src/react-hooks/use-detail-component-data.ts

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 import { ReactCustomDetailComponentContext } from '../components/react-custom-detail.component';
-import { HostedComponentContext } from '../react-component-host.directive';
+import { HostedComponentContext } from '../directives/react-component-host.directive';
 import { HostedReactComponentContext } from '../types';
 
 /**

packages/admin-ui/src/lib/react/src/hooks/use-form-control.ts → packages/admin-ui/src/lib/react/src/react-hooks/use-form-control.ts

@@ -1,6 +1,6 @@
 import { CustomFieldType } from '@vendure/common/lib/shared-types';
 import { useContext, useEffect, useState } from 'react';
-import { HostedComponentContext } from '../react-component-host.directive';
+import { HostedComponentContext } from '../directives/react-component-host.directive';
 import { HostedReactComponentContext, ReactFormInputOptions } from '../types';
 
 /**

packages/admin-ui/src/lib/react/src/hooks/use-injector.ts → packages/admin-ui/src/lib/react/src/react-hooks/use-injector.ts

@@ -1,6 +1,6 @@
 import { ProviderToken } from '@angular/core';
 import { useContext } from 'react';
-import { HostedComponentContext } from '../react-component-host.directive';
+import { HostedComponentContext } from '../directives/react-component-host.directive';
 
 /**
  * @description

packages/admin-ui/src/lib/react/src/hooks/use-page-metadata.ts → packages/admin-ui/src/lib/react/src/react-hooks/use-page-metadata.ts

@@ -1,6 +1,6 @@
 import { BreadcrumbValue } from '@vendure/admin-ui/core';
 import { useContext } from 'react';
-import { HostedComponentContext } from '../react-component-host.directive';
+import { HostedComponentContext } from '../directives/react-component-host.directive';
 import { HostedReactComponentContext, ReactRouteComponentOptions } from '../types';
 
 /**

packages/admin-ui/src/lib/react/src/hooks/use-query.ts → packages/admin-ui/src/lib/react/src/react-hooks/use-query.ts

@@ -4,7 +4,7 @@ import { DocumentNode } from 'graphql/index';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { firstValueFrom, Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
-import { HostedComponentContext } from '../react-component-host.directive';
+import { HostedComponentContext } from '../directives/react-component-host.directive';
 
 /**
  * @description

packages/admin-ui/src/lib/react/src/providers.ts → packages/admin-ui/src/lib/react/src/register-react-custom-detail-component.ts

@@ -1,42 +1,10 @@
-import { APP_INITIALIZER, FactoryProvider } from '@angular/core';
-import {
-    ComponentRegistryService,
-    CustomDetailComponentLocationId,
-    CustomDetailComponentService,
-} from '@vendure/admin-ui/core';
+import { APP_INITIALIZER } from '@angular/core';
+import { CustomDetailComponentLocationId, CustomDetailComponentService } from '@vendure/admin-ui/core';
 import { ElementType } from 'react';
 import {
     REACT_CUSTOM_DETAIL_COMPONENT_OPTIONS,
     ReactCustomDetailComponent,
 } from './components/react-custom-detail.component';
-import {
-    REACT_INPUT_COMPONENT_OPTIONS,
-    ReactFormInputComponent,
-} from './components/react-form-input.component';
-
-/**
- * @description
- * Registers a React component to be used as a {@link FormInputComponent}.
- *
- * @docsCategory react-extensions
- */
-export function registerReactFormInputComponent(id: string, component: ElementType): FactoryProvider {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (registry: ComponentRegistryService) => () => {
-            registry.registerInputComponent(id, ReactFormInputComponent, [
-                {
-                    provide: REACT_INPUT_COMPONENT_OPTIONS,
-                    useValue: {
-                        component,
-                    },
-                },
-            ]);
-        },
-        deps: [ComponentRegistryService],
-    };
-}
 
 /**
  * @description

packages/admin-ui/src/lib/react/src/register-react-form-input-component.ts

@@ -0,0 +1,31 @@
+import { APP_INITIALIZER, FactoryProvider } from '@angular/core';
+import { ComponentRegistryService } from '@vendure/admin-ui/core';
+import { ElementType } from 'react';
+import {
+    REACT_INPUT_COMPONENT_OPTIONS,
+    ReactFormInputComponent,
+} from './components/react-form-input.component';
+
+/**
+ * @description
+ * Registers a React component to be used as a {@link FormInputComponent}.
+ *
+ * @docsCategory react-extensions
+ */
+export function registerReactFormInputComponent(id: string, component: ElementType): FactoryProvider {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (registry: ComponentRegistryService) => () => {
+            registry.registerInputComponent(id, ReactFormInputComponent, [
+                {
+                    provide: REACT_INPUT_COMPONENT_OPTIONS,
+                    useValue: {
+                        component,
+                    },
+                },
+            ]);
+        },
+        deps: [ComponentRegistryService],
+    };
+}