feat(admin-ui): Expose public API at @vendure/admin-ui/devkit

packages/admin-ui-plugin/src/plugin.ts

@@ -1,4 +1,4 @@
-import { compileUiExtensions } from '@vendure/admin-ui/src/compile-ui-extensions';
+import { compileUiExtensions } from '@vendure/admin-ui/devkit/compile';
 import { DEFAULT_AUTH_TOKEN_HEADER_KEY } from '@vendure/common/lib/shared-constants';
 import { AdminUiConfig, AdminUiExtension, Type } from '@vendure/common/lib/shared-types';
 import {

packages/admin-ui/src/compile-ui-extensions.ts → packages/admin-ui/devkit/compile.ts

@@ -3,7 +3,7 @@ import { exec, spawn } from 'child_process';
 import * as fs from 'fs-extra';
 import * as path from 'path';
 
-const EXTENSIONS_DIR = path.join(__dirname, 'app/extensions');
+const EXTENSIONS_DIR = path.join(__dirname, '../src/app/extensions');
 const EXTENSIONS_MODULES_DIR = 'modules';
 
 const originalExtensionsModuleFile = path.join(EXTENSIONS_DIR, 'extensions.module.ts');

packages/admin-ui/devkit/index.ts

@@ -0,0 +1,12 @@
+// This is the "public API" of the admin-ui package, used by plugins which want to define
+// extensions to the admin UI and need to import components (services, modules etc) from the admin-ui.
+
+export { JobQueueService } from '../src/app/core/providers/job-queue/job-queue.service';
+export { LocalStorageService } from '../src/app/core/providers/local-storage/local-storage.service';
+export { NotificationService } from '../src/app/core/providers/notification/notification.service';
+export { DataModule } from '../src/app/data/data.module';
+export { DataService } from '../src/app/data/providers/data.service';
+export { ServerConfigService } from '../src/app/data/server-config';
+export { ModalService } from '../src/app/shared/providers/modal/modal.service';
+export { SharedModule } from '../src/app/shared/shared.module';
+export * from '../src/app/shared/shared-declarations';

packages/admin-ui/src/app/shared/shared-declarations.ts

@@ -0,0 +1,50 @@
+export {
+    ActionBarComponent,
+    ActionBarLeftComponent,
+    ActionBarRightComponent,
+} from './components/action-bar/action-bar.component';
+export { AffixedInputComponent } from './components/affixed-input/affixed-input.component';
+export { PercentageSuffixInputComponent } from './components/affixed-input/percentage-suffix-input.component';
+export { ChipComponent } from './components/chip/chip.component';
+export { ConfigurableInputComponent } from './components/configurable-input/configurable-input.component';
+export { CurrencyInputComponent } from './components/currency-input/currency-input.component';
+export {
+    CustomFieldControlComponent,
+} from './components/custom-field-control/custom-field-control.component';
+export { CustomerLabelComponent } from './components/customer-label/customer-label.component';
+export { DataTableColumnComponent } from './components/data-table/data-table-column.component';
+export { DataTableComponent } from './components/data-table/data-table.component';
+export { DropdownItemDirective } from './components/dropdown/dropdown-item.directive';
+export { DropdownMenuComponent } from './components/dropdown/dropdown-menu.component';
+export { DropdownTriggerDirective } from './components/dropdown/dropdown-trigger.directive';
+export { DropdownComponent } from './components/dropdown/dropdown.component';
+export { FacetValueChipComponent } from './components/facet-value-chip/facet-value-chip.component';
+export {
+    FacetValueSelectorComponent,
+} from './components/facet-value-selector/facet-value-selector.component';
+export { FormFieldControlDirective } from './components/form-field/form-field-control.directive';
+export { FormFieldComponent } from './components/form-field/form-field.component';
+export { FormItemComponent } from './components/form-item/form-item.component';
+export { FormattedAddressComponent } from './components/formatted-address/formatted-address.component';
+export {
+    ItemsPerPageControlsComponent,
+} from './components/items-per-page-controls/items-per-page-controls.component';
+export { LabeledDataComponent } from './components/labeled-data/labeled-data.component';
+export { LanguageSelectorComponent } from './components/language-selector/language-selector.component';
+export { DialogButtonsDirective } from './components/modal-dialog/dialog-buttons.directive';
+export { DialogComponentOutletComponent } from './components/modal-dialog/dialog-component-outlet.component';
+export { DialogTitleDirective } from './components/modal-dialog/dialog-title.directive';
+export { ModalDialogComponent } from './components/modal-dialog/modal-dialog.component';
+export { ObjectTreeComponent } from './components/object-tree/object-tree.component';
+export { OrderStateLabelComponent } from './components/order-state-label/order-state-label.component';
+export { PaginationControlsComponent } from './components/pagination-controls/pagination-controls.component';
+export { RichTextEditorComponent } from './components/rich-text-editor/rich-text-editor.component';
+export { SelectToggleComponent } from './components/select-toggle/select-toggle.component';
+export { SimpleDialogComponent } from './components/simple-dialog/simple-dialog.component';
+export { TableRowActionComponent } from './components/table-row-action/table-row-action.component';
+export { TitleInputComponent } from './components/title-input/title-input.component';
+export { CurrencyNamePipe } from './pipes/currency-name.pipe';
+export { FileSizePipe } from './pipes/file-size.pipe';
+export { SentenceCasePipe } from './pipes/sentence-case.pipe';
+export { SortPipe } from './pipes/sort.pipe';
+export { StringToColorPipe } from './pipes/string-to-color.pipe';

packages/admin-ui/src/app/shared/shared.module.ts

@@ -13,47 +13,47 @@ import {
     ActionBarLeftComponent,
     ActionBarRightComponent,
 } from './components/action-bar/action-bar.component';
-import { AffixedInputComponent } from './components/affixed-input/affixed-input.component';
-import { PercentageSuffixInputComponent } from './components/affixed-input/percentage-suffix-input.component';
-import { ChipComponent } from './components/chip/chip.component';
-import { ConfigurableInputComponent } from './components/configurable-input/configurable-input.component';
-import { CurrencyInputComponent } from './components/currency-input/currency-input.component';
-import { CustomFieldControlComponent } from './components/custom-field-control/custom-field-control.component';
-import { CustomerLabelComponent } from './components/customer-label/customer-label.component';
-import { DataTableColumnComponent } from './components/data-table/data-table-column.component';
-import { DataTableComponent } from './components/data-table/data-table.component';
-import { DropdownItemDirective } from './components/dropdown/dropdown-item.directive';
-import { DropdownMenuComponent } from './components/dropdown/dropdown-menu.component';
-import { DropdownTriggerDirective } from './components/dropdown/dropdown-trigger.directive';
-import { DropdownComponent } from './components/dropdown/dropdown.component';
-import { FacetValueChipComponent } from './components/facet-value-chip/facet-value-chip.component';
-import { FacetValueSelectorComponent } from './components/facet-value-selector/facet-value-selector.component';
-import { FormFieldControlDirective } from './components/form-field/form-field-control.directive';
-import { FormFieldComponent } from './components/form-field/form-field.component';
-import { FormItemComponent } from './components/form-item/form-item.component';
-import { FormattedAddressComponent } from './components/formatted-address/formatted-address.component';
-import { ItemsPerPageControlsComponent } from './components/items-per-page-controls/items-per-page-controls.component';
-import { LabeledDataComponent } from './components/labeled-data/labeled-data.component';
-import { LanguageSelectorComponent } from './components/language-selector/language-selector.component';
-import { DialogButtonsDirective } from './components/modal-dialog/dialog-buttons.directive';
-import { DialogComponentOutletComponent } from './components/modal-dialog/dialog-component-outlet.component';
-import { DialogTitleDirective } from './components/modal-dialog/dialog-title.directive';
-import { ModalDialogComponent } from './components/modal-dialog/modal-dialog.component';
-import { ObjectTreeComponent } from './components/object-tree/object-tree.component';
-import { OrderStateLabelComponent } from './components/order-state-label/order-state-label.component';
-import { PaginationControlsComponent } from './components/pagination-controls/pagination-controls.component';
-import { RichTextEditorComponent } from './components/rich-text-editor/rich-text-editor.component';
-import { SelectToggleComponent } from './components/select-toggle/select-toggle.component';
-import { SimpleDialogComponent } from './components/simple-dialog/simple-dialog.component';
-import { TableRowActionComponent } from './components/table-row-action/table-row-action.component';
-import { TitleInputComponent } from './components/title-input/title-input.component';
-import { CurrencyNamePipe } from './pipes/currency-name.pipe';
-import { FileSizePipe } from './pipes/file-size.pipe';
-import { SentenceCasePipe } from './pipes/sentence-case.pipe';
-import { SortPipe } from './pipes/sort.pipe';
-import { StringToColorPipe } from './pipes/string-to-color.pipe';
 import { ModalService } from './providers/modal/modal.service';
 import { CanDeactivateDetailGuard } from './providers/routing/can-deactivate-detail-guard';
+import { AffixedInputComponent } from './shared-declarations';
+import { PercentageSuffixInputComponent } from './shared-declarations';
+import { ChipComponent } from './shared-declarations';
+import { ConfigurableInputComponent } from './shared-declarations';
+import { CurrencyInputComponent } from './shared-declarations';
+import { CustomFieldControlComponent } from './shared-declarations';
+import { CustomerLabelComponent } from './shared-declarations';
+import { DataTableColumnComponent } from './shared-declarations';
+import { DataTableComponent } from './shared-declarations';
+import { DropdownItemDirective } from './shared-declarations';
+import { DropdownMenuComponent } from './shared-declarations';
+import { DropdownTriggerDirective } from './shared-declarations';
+import { DropdownComponent } from './shared-declarations';
+import { FacetValueChipComponent } from './shared-declarations';
+import { FacetValueSelectorComponent } from './shared-declarations';
+import { FormFieldControlDirective } from './shared-declarations';
+import { FormFieldComponent } from './shared-declarations';
+import { FormItemComponent } from './shared-declarations';
+import { FormattedAddressComponent } from './shared-declarations';
+import { ItemsPerPageControlsComponent } from './shared-declarations';
+import { LabeledDataComponent } from './shared-declarations';
+import { LanguageSelectorComponent } from './shared-declarations';
+import { DialogButtonsDirective } from './shared-declarations';
+import { DialogComponentOutletComponent } from './shared-declarations';
+import { DialogTitleDirective } from './shared-declarations';
+import { ModalDialogComponent } from './shared-declarations';
+import { ObjectTreeComponent } from './shared-declarations';
+import { OrderStateLabelComponent } from './shared-declarations';
+import { PaginationControlsComponent } from './shared-declarations';
+import { RichTextEditorComponent } from './shared-declarations';
+import { SelectToggleComponent } from './shared-declarations';
+import { SimpleDialogComponent } from './shared-declarations';
+import { TableRowActionComponent } from './shared-declarations';
+import { TitleInputComponent } from './shared-declarations';
+import { CurrencyNamePipe } from './shared-declarations';
+import { FileSizePipe } from './shared-declarations';
+import { SentenceCasePipe } from './shared-declarations';
+import { SortPipe } from './shared-declarations';
+import { StringToColorPipe } from './shared-declarations';
 
 const IMPORTS = [
     ClarityModule,

packages/admin-ui/src/index.ts

@@ -1 +0,0 @@
-export * from './compile-ui-extensions';

packages/admin-ui/tsconfig.json

@@ -24,7 +24,8 @@
       "esnext.asynciterable"
     ],
     "paths": {
-      "shared/*": ["../common/lib/*"]
+      "shared/*": ["../common/lib/*"],
+      "@vendure/admin-ui/*": ["./*"]
     }
   }
 }

packages/dev-server/ui-plugin/module/ui-plugin.module.ts

@@ -1,16 +1,31 @@
 import { Component, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { ModalService, SharedModule } from '@vendure/admin-ui/devkit';
 
 @Component({
     selector: 'plugin-test-component',
     template: `
         <p>Test component works!!</p>
+        <button class="btn btn-primary" (click)="handleClick()">Click me!</button>
     `,
 })
-export class TestComponent {}
+export class TestComponent {
+    constructor(private modalService: ModalService) {}
+
+    handleClick() {
+        this.modalService
+            .dialog({
+                title: 'Did it work?',
+                buttons: [{ label: 'Yes!!!!', returnValue: true, type: 'primary' }],
+                // tslint:disable-next-line:no-console
+            })
+            .subscribe(val => console.log(val));
+    }
+}
 
 @NgModule({
     imports: [
+        SharedModule,
         RouterModule.forChild([
             {
                 path: 'test',