refactor(admin-ui): Initial setup of library version of admin ui

packages/admin-ui/.gitignore

@@ -4,6 +4,7 @@
 /dist
 /tmp
 /out-tsc
+/library
 
 # dependencies
 /node_modules

packages/admin-ui/angular.json

@@ -231,6 +231,26 @@
           }
         }
       }
+    },
+    "vendure-admin-lib": {
+      "projectType": "library",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "vdr",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "lib/tsconfig.lib.json",
+            "project": "lib/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "lib/tsconfig.lib.prod.json"
+            }
+          }
+        }
+      }
     }
   },
   "defaultProject": "vendure-admin",

packages/admin-ui/lib/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../library",
+  "lib": {
+    "entryFile": "../src/public-api.ts",
+    "styleIncludePaths": ["../src/styles"]
+  }
+}

packages/admin-ui/lib/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "my-lib",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^9.0.3",
+    "@angular/core": "^9.0.3",
+    "tslib": "^1.10.0"
+  }
+}

packages/admin-ui/lib/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

packages/admin-ui/lib/tsconfig.lib.prod.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}

packages/admin-ui/package.json

@@ -18,13 +18,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@angular-devkit/build-angular": "~0.900.3",
     "@angular/animations": "^9.0.2",
     "@angular/cdk": "^9.0.1",
-    "@angular/cli": "^9.0.3",
     "@angular/common": "^9.0.2",
-    "@angular/compiler": "^9.0.2",
-    "@angular/compiler-cli": "^9.0.2",
     "@angular/core": "^9.0.2",
     "@angular/forms": "^9.0.2",
     "@angular/language-service": "^9.0.2",
@@ -72,6 +68,11 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
+    "@angular/cli": "^9.0.3",
+    "@angular/compiler": "^9.0.2",
+    "@angular/compiler-cli": "^9.0.2",
+    "@angular-devkit/build-angular": "~0.900.3",
+    "@angular-devkit/build-ng-packagr": "~0.900.4",
     "@biesbjerg/ngx-translate-extract": "^4.2.0",
     "@types/jasmine": "~3.3.16",
     "@types/jasminewd2": "~2.0.6",
@@ -89,6 +90,7 @@
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.2",
     "karma-mocha-reporter": "^2.2.5",
+    "ng-packagr": "^9.0.0",
     "protractor": "~5.4.2",
     "puppeteer": "^1.19.0",
     "rimraf": "^3.0.0",

packages/admin-ui/src/app/shared/components/datetime-picker/datetime-picker.service.ts

@@ -1,21 +1,23 @@
 import { Injectable } from '@angular/core';
-import * as dayjs from 'dayjs';
+import * as _dayjs from 'dayjs';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { dayOfWeekIndex } from './constants';
 import { CalendarView, DayCell, DayOfWeek } from './types';
 
+const dayjs = _dayjs;
+
 @Injectable()
 export class DatetimePickerService {
     calendarView$: Observable<CalendarView>;
     selected$: Observable<Date | null>;
     viewing$: Observable<Date>;
-    private selectedDatetime$ = new BehaviorSubject<dayjs.Dayjs | null>(null);
-    private viewingDatetime$ = new BehaviorSubject<dayjs.Dayjs>(dayjs());
+    private selectedDatetime$ = new BehaviorSubject<_dayjs.Dayjs | null>(null);
+    private viewingDatetime$ = new BehaviorSubject<_dayjs.Dayjs>(dayjs());
     private weekStartDayIndex: number;
-    private min: dayjs.Dayjs | null = null;
-    private max: dayjs.Dayjs | null = null;
+    private min: _dayjs.Dayjs | null = null;
+    private max: _dayjs.Dayjs | null = null;
     private jumping = false;
 
     constructor() {
@@ -43,9 +45,9 @@ export class DatetimePickerService {
         }
     }
 
-    selectDatetime(date: Date | string | dayjs.Dayjs | null) {
-        let viewingValue: dayjs.Dayjs;
-        let selectedValue: dayjs.Dayjs | null = null;
+    selectDatetime(date: Date | string | _dayjs.Dayjs | null) {
+        let viewingValue: _dayjs.Dayjs;
+        let selectedValue: _dayjs.Dayjs | null = null;
         if (date == null) {
             viewingValue = dayjs();
         } else {
@@ -134,7 +136,7 @@ export class DatetimePickerService {
         this.viewingDatetime$.next(current.year(year));
     }
 
-    private generateCalendarView(viewing: dayjs.Dayjs, selected: dayjs.Dayjs | null): CalendarView {
+    private generateCalendarView(viewing: _dayjs.Dayjs, selected: _dayjs.Dayjs | null): CalendarView {
         if (!viewing.isValid() || (selected && !selected.isValid())) {
             return [];
         }
@@ -219,7 +221,7 @@ export class DatetimePickerService {
         return calendarView;
     }
 
-    private isInBounds(date: dayjs.Dayjs): boolean {
+    private isInBounds(date: _dayjs.Dayjs): boolean {
         if (this.min && this.min.isAfter(date)) {
             return false;
         }

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

@@ -15,11 +15,69 @@ 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 { AssetFileInputComponent } from './components/asset-file-input/asset-file-input.component';
+import { AssetGalleryComponent } from './components/asset-gallery/asset-gallery.component';
+import { AssetPickerDialogComponent } from './components/asset-picker-dialog/asset-picker-dialog.component';
+import { AssetPreviewDialogComponent } from './components/asset-preview-dialog/asset-preview-dialog.component';
+import { AssetPreviewComponent } from './components/asset-preview/asset-preview.component';
+import { ChannelAssignmentControlComponent } from './components/channel-assignment-control/channel-assignment-control.component';
+import { ChannelBadgeComponent } from './components/channel-badge/channel-badge.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 { DatetimePickerComponent } from './components/datetime-picker/datetime-picker.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 { EntityInfoComponent } from './components/entity-info/entity-info.component';
+import { ExtensionHostComponent } from './components/extension-host/extension-host.component';
+import { FacetValueChipComponent } from './components/facet-value-chip/facet-value-chip.component';
+import { FacetValueSelectorComponent } from './components/facet-value-selector/facet-value-selector.component';
+import { FocalPointControlComponent } from './components/focal-point-control/focal-point-control.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 { ExternalImageDialogComponent } from './components/rich-text-editor/external-image-dialog/external-image-dialog.component';
+import { LinkDialogComponent } from './components/rich-text-editor/link-dialog/link-dialog.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 { DisabledDirective } from './directives/disabled.directive';
+import { IfDefaultChannelActiveDirective } from './directives/if-default-channel-active.directive';
+import { IfMultichannelDirective } from './directives/if-multichannel.directive';
+import { IfPermissionsDirective } from './directives/if-permissions.directive';
+import { AssetPreviewPipe } from './pipes/asset-preview.pipe';
+import { ChannelLabelPipe } from './pipes/channel-label.pipe';
+import { CurrencyNamePipe } from './pipes/currency-name.pipe';
+import { CustomFieldLabelPipe } from './pipes/custom-field-label.pipe';
+import { FileSizePipe } from './pipes/file-size.pipe';
 import { HasPermissionPipe } from './pipes/has-permission.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 {
+/*import {
     AffixedInputComponent,
     AssetFileInputComponent,
     AssetGalleryComponent,
@@ -78,7 +136,7 @@ import {
     StringToColorPipe,
     TableRowActionComponent,
     TitleInputComponent,
-} from './shared-declarations';
+} from './shared-declarations';*/
 
 const IMPORTS = [
     ClarityModule,

packages/admin-ui/src/index.ts

@@ -1,19 +0,0 @@
-// 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 './app/core/providers/job-queue/job-queue.service';
-export { LocalStorageService } from './app/core/providers/local-storage/local-storage.service';
-export { NotificationService } from './app/core/providers/notification/notification.service';
-export { DataModule } from './app/data/data.module';
-export { DataService } from './app/data/providers/data.service';
-export { ServerConfigService } from './app/data/server-config';
-export * from './app/shared/providers/modal/modal.service';
-export { SharedModule } from './app/shared/shared.module';
-export { NavBuilderService } from './app/core/providers/nav-builder/nav-builder.service';
-export { BaseListComponent } from './app/common/base-list.component';
-export { BaseDetailComponent } from './app/common/base-detail.component';
-export { BaseEntityResolver } from './app/common/base-entity-resolver';
-export * from './app/core/providers/nav-builder/nav-builder-types';
-export * from './app/core/providers/custom-field-component/custom-field-component.service';
-export * from './app/shared/shared-declarations';
-export * from './app/shared/providers/routing/can-deactivate-detail-guard';

packages/admin-ui/src/public-api.ts

@@ -0,0 +1,122 @@
+// 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 * from './app/core/providers/job-queue/job-queue.service';
+export { LocalStorageService } from './app/core/providers/local-storage/local-storage.service';
+export { OverlayHostComponent } from './app/core/components/overlay-host/overlay-host.component';
+export { CoreModule } from './app/core/core.module';
+export { SharedModule } from './app/shared/shared.module';
+export {
+    ActionBarComponent,
+    ActionBarLeftComponent,
+    ActionBarRightComponent,
+} from './app/shared/components/action-bar/action-bar.component';
+export { ActionBarItemsComponent } from './app/shared/components/action-bar-items/action-bar-items.component';
+
+export { AffixedInputComponent } from './app/shared/components/affixed-input/affixed-input.component';
+export { AssetFileInputComponent } from './app/shared/components/asset-file-input/asset-file-input.component';
+export { AssetGalleryComponent } from './app/shared/components/asset-gallery/asset-gallery.component';
+export {
+    AssetPickerDialogComponent,
+} from './app/shared/components/asset-picker-dialog/asset-picker-dialog.component';
+export {
+    AssetPreviewDialogComponent,
+} from './app/shared/components/asset-preview-dialog/asset-preview-dialog.component';
+export { AssetPreviewComponent } from './app/shared/components/asset-preview/asset-preview.component';
+export { AssetPreviewPipe } from './app/shared/pipes/asset-preview.pipe';
+export {
+    PercentageSuffixInputComponent,
+} from './app/shared/components/affixed-input/percentage-suffix-input.component';
+export {
+    ChannelAssignmentControlComponent,
+} from './app/shared/components/channel-assignment-control/channel-assignment-control.component';
+export { ChannelBadgeComponent } from './app/shared/components/channel-badge/channel-badge.component';
+export { ChannelLabelPipe } from './app/shared/pipes/channel-label.pipe';
+export { ChipComponent } from './app/shared/components/chip/chip.component';
+export {
+    ConfigurableInputComponent,
+} from './app/shared/components/configurable-input/configurable-input.component';
+export { CurrencyInputComponent } from './app/shared/components/currency-input/currency-input.component';
+export {
+    CustomFieldControlComponent,
+} from './app/shared/components/custom-field-control/custom-field-control.component';
+export { CustomFieldLabelPipe } from './app/shared/pipes/custom-field-label.pipe';
+export { CustomerLabelComponent } from './app/shared/components/customer-label/customer-label.component';
+export { DataTableColumnComponent } from './app/shared/components/data-table/data-table-column.component';
+export { DataTableComponent } from './app/shared/components/data-table/data-table.component';
+export { DropdownItemDirective } from './app/shared/components/dropdown/dropdown-item.directive';
+export { DropdownMenuComponent } from './app/shared/components/dropdown/dropdown-menu.component';
+export { DropdownTriggerDirective } from './app/shared/components/dropdown/dropdown-trigger.directive';
+export { DropdownComponent } from './app/shared/components/dropdown/dropdown.component';
+export { FacetValueChipComponent } from './app/shared/components/facet-value-chip/facet-value-chip.component';
+export {
+    FacetValueSelectorComponent,
+} from './app/shared/components/facet-value-selector/facet-value-selector.component';
+export {
+    FocalPointControlComponent,
+} from './app/shared/components/focal-point-control/focal-point-control.component';
+export { FormFieldControlDirective } from './app/shared/components/form-field/form-field-control.directive';
+export { FormFieldComponent } from './app/shared/components/form-field/form-field.component';
+export { FormItemComponent } from './app/shared/components/form-item/form-item.component';
+export {
+    FormattedAddressComponent,
+} from './app/shared/components/formatted-address/formatted-address.component';
+export { IfDefaultChannelActiveDirective } from './app/shared/directives/if-default-channel-active.directive';
+export { IfMultichannelDirective } from './app/shared/directives/if-multichannel.directive';
+export { IfPermissionsDirective } from './app/shared/directives/if-permissions.directive';
+export { DisabledDirective } from './app/shared/directives/disabled.directive';
+export {
+    ItemsPerPageControlsComponent,
+} from './app/shared/components/items-per-page-controls/items-per-page-controls.component';
+export { LabeledDataComponent } from './app/shared/components/labeled-data/labeled-data.component';
+export {
+    LanguageSelectorComponent,
+} from './app/shared/components/language-selector/language-selector.component';
+export { DialogButtonsDirective } from './app/shared/components/modal-dialog/dialog-buttons.directive';
+export {
+    DialogComponentOutletComponent,
+} from './app/shared/components/modal-dialog/dialog-component-outlet.component';
+export { DialogTitleDirective } from './app/shared/components/modal-dialog/dialog-title.directive';
+export { ExtensionHostComponent } from './app/shared/components/extension-host/extension-host.component';
+export * from './app/shared/components/extension-host/extension-host-config';
+export { ModalDialogComponent } from './app/shared/components/modal-dialog/modal-dialog.component';
+export { ObjectTreeComponent } from './app/shared/components/object-tree/object-tree.component';
+export {
+    OrderStateLabelComponent,
+} from './app/shared/components/order-state-label/order-state-label.component';
+export {
+    PaginationControlsComponent,
+} from './app/shared/components/pagination-controls/pagination-controls.component';
+export { RichTextEditorComponent } from './app/shared/components/rich-text-editor/rich-text-editor.component';
+export {
+    ExternalImageDialogComponent,
+} from './app/shared/components/rich-text-editor/external-image-dialog/external-image-dialog.component';
+export {
+    LinkDialogComponent,
+} from './app/shared/components/rich-text-editor/link-dialog/link-dialog.component';
+export { SelectToggleComponent } from './app/shared/components/select-toggle/select-toggle.component';
+export { SimpleDialogComponent } from './app/shared/components/simple-dialog/simple-dialog.component';
+export { TableRowActionComponent } from './app/shared/components/table-row-action/table-row-action.component';
+export { TitleInputComponent } from './app/shared/components/title-input/title-input.component';
+export { EntityInfoComponent } from './app/shared/components/entity-info/entity-info.component';
+export { DatetimePickerComponent } from './app/shared/components/datetime-picker/datetime-picker.component';
+export { CurrencyNamePipe } from './app/shared/pipes/currency-name.pipe';
+export { FileSizePipe } from './app/shared/pipes/file-size.pipe';
+export { SentenceCasePipe } from './app/shared/pipes/sentence-case.pipe';
+export { SortPipe } from './app/shared/pipes/sort.pipe';
+export { StringToColorPipe } from './app/shared/pipes/string-to-color.pipe';
+export { HasPermissionPipe } from './app/shared/pipes/has-permission.pipe';
+
+// export { NotificationService } from './app/core/providers/notification/notification.service';
+// export { DataModule } from './app/data/data.module';
+// export { DataService } from './app/data/providers/data.service';
+// export { ServerConfigService } from './app/data/server-config';
+// export * from './app/shared/providers/modal/modal.service';
+// export { NavBuilderService } from './app/core/providers/nav-builder/nav-builder.service';
+// export { BaseListComponent } from './app/common/base-list.component';
+// export { BaseDetailComponent } from './app/common/base-detail.component';
+// export { BaseEntityResolver } from './app/common/base-entity-resolver';
+// export * from './app/core/providers/nav-builder/nav-builder-types';
+// export * from './app/core/providers/custom-field-component/custom-field-component.service';
+// export * from './app/shared/shared-declarations';
+// export * from './app/shared/providers/routing/can-deactivate-detail-guard';

packages/admin-ui/src/tsconfig.app.json

@@ -6,7 +6,7 @@
   "files": [
     "main.ts",
     "polyfills.ts",
-    "index.ts"
+    "public-api.ts"
   ],
   "include": [
     "src/**/*.d.ts"