[AAE-11496] Publish aca-viewer and aca-preview (#2945)

* [AAE-11496] Publish aca-viewer and aca-preview

* fix tests

.github/workflows/test.yml

@@ -130,3 +130,21 @@ jobs:
           cache: 'npm'
       - run: npm ci
       - run: npm test aca-folder-rules -- --browsers=ChromeHeadless --watch=false $TEST_OPTS
+
+  test-aca-preview:
+    needs: [lint, build]
+    name: 'test: aca-preview'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
+
+      - name: node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14
+          cache: 'npm'
+      - run: npm ci
+      - run: npm test aca-preview -- --browsers=ChromeHeadless --watch=false $TEST_OPTS

angular.json

@@ -645,6 +645,92 @@
           }
         }
       }
+    },
+    "aca-viewer": {
+      "projectType": "library",
+      "root": "projects/aca-viewer",
+      "sourceRoot": "projects/aca-viewer/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/aca-viewer/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/aca-viewer/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/aca-viewer/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/aca-viewer/src/test.ts",
+            "tsConfig": "projects/aca-viewer/tsconfig.spec.json",
+            "karmaConfig": "projects/aca-viewer/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/aca-viewer/**/*.ts",
+              "projects/aca-viewer/**/*.html"
+            ],
+            "cache": true,
+            "cacheLocation": ".eslintcache",
+            "ignorePath": ".eslintignore"
+          }
+        }
+      }
+    },
+    "aca-preview": {
+      "projectType": "library",
+      "root": "projects/aca-preview",
+      "sourceRoot": "projects/aca-preview/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/aca-preview/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/aca-preview/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/aca-preview/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/aca-preview/src/test.ts",
+            "tsConfig": "projects/aca-preview/tsconfig.spec.json",
+            "karmaConfig": "projects/aca-preview/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/aca-preview/**/*.ts",
+              "projects/aca-preview/**/*.html"
+            ],
+            "cache": true,
+            "cacheLocation": ".eslintcache",
+            "ignorePath": ".eslintignore"
+          }
+        }
+      }
     }
   },
   "schematics": {

package.json

@@ -14,7 +14,7 @@
     "prebuild": "mkdir -p ./app/.tmp && cp ./app/src/app.config.json.tpl ./app/.tmp/app.config.json",
     "build": "ng build content-ce",
     "build.release": "npm run build -- --configuration=production,release",
-    "build-libs": "ng build aca-shared && ng build adf-office-services-ext && ng build aca-settings && ng build aca-about ",
+    "build-libs": "ng build aca-shared && ng build adf-office-services-ext && ng build aca-settings && ng build aca-about && ng build aca-viewer && ng build aca-preview",
     "test": "ng test",
     "test:ci": "ng test adf-office-services-ext && ng test content-ce --code-coverage",
     "lint": "NODE_OPTIONS=--max_old_space_size=4096 ng lint && npm run spellcheck && npm run e2e.typecheck",

projects/aca-content/src/lib/aca-content.module.ts

@@ -104,7 +104,7 @@ import { CommentsTabComponent } from './components/info-drawer/comments-tab/comm
 import { LibraryMetadataTabComponent } from './components/info-drawer/library-metadata-tab/library-metadata-tab.component';
 import { MetadataTabComponent } from './components/info-drawer/metadata-tab/metadata-tab.component';
 import { VersionsTabComponent } from './components/info-drawer/versions-tab/versions-tab.component';
-import { PreviewComponent } from './components/preview/preview.component';
+import { PreviewComponent } from '@alfresco/aca-preview';
 import { DocumentDisplayModeComponent } from './components/toolbar/document-display-mode/document-display-mode.component';
 import { ToggleEditOfflineComponent } from './components/toolbar/toggle-edit-offline/toggle-edit-offline.component';
 import { ToggleFavoriteLibraryComponent } from './components/toolbar/toggle-favorite-library/toggle-favorite-library.component';

projects/aca-content/src/lib/aca-content.routes.ts

@@ -67,7 +67,7 @@ export const CONTENT_ROUTES: ExtensionRoute[] = [
         children: [
           {
             path: '',
-            loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+            loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
           }
         ]
       }
@@ -123,7 +123,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
         // deprecated, backwards compatibility with ACA 1.8
         {
           path: 'preview/:nodeId',
-          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
           data: {
             navigateSource: 'personal-files'
           }
@@ -137,7 +137,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'personal-files'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         },
@@ -150,7 +150,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'personal-files'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         }
@@ -176,14 +176,14 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'personal-files'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         },
         // deprecated, backwards compatibility with ACA 1.8
         {
           path: 'preview/:nodeId',
-          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
           data: {
             navigateSource: 'personal-files'
           }
@@ -191,7 +191,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
         // deprecated, backwards compatibility with ACA 1.8
         {
           path: ':folderId/preview/:nodeId',
-          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
           data: {
             navigateSource: 'personal-files'
           }
@@ -205,7 +205,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'personal-files'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         }
@@ -238,7 +238,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
         // deprecated, backwards compatibility with ACA 1.8
         {
           path: 'preview/:nodeId',
-          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
           data: {
             navigateSource: 'libraries'
           }
@@ -252,9 +252,12 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'libraries'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
-          ]
+          ],
+          data: {
+            navigateSource: 'libraries'
+          }
         },
         {
           path: 'view/:nodeId/:versionId',
@@ -265,7 +268,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'libraries'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         }
@@ -309,7 +312,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'libraries'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         },
@@ -322,7 +325,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'libraries'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         }
@@ -347,7 +350,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
         // deprecated, backwards compatibility with ACA 1.8
         {
           path: 'preview/:nodeId',
-          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
           data: {
             navigateSource: 'favorites'
           }
@@ -361,7 +364,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'favorites'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         },
@@ -374,7 +377,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'favorites'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         }
@@ -398,7 +401,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
         // deprecated, backwards compatibility with ACA 1.8
         {
           path: 'preview/:nodeId',
-          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
           data: {
             navigateSource: 'recent-files'
           }
@@ -412,7 +415,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'recent-files'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         },
@@ -425,7 +428,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'recent-files'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         }
@@ -447,7 +450,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
         // deprecated, backwards compatibility with ACA 1.8
         {
           path: 'preview/:nodeId',
-          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
           data: {
             navigateSource: 'shared'
           }
@@ -461,7 +464,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'shared'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         },
@@ -474,7 +477,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'shared'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         }
@@ -499,7 +502,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
         // deprecated, backwards compatibility with ACA 1.8
         {
           path: 'preview/:nodeId',
-          loadChildren: () => import('./components/preview/preview.module').then((m) => m.PreviewModule),
+          loadChildren: () => import('@alfresco/aca-preview').then((m) => m.PreviewModule),
           data: {
             navigateSource: 'search'
           }
@@ -513,7 +516,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'search'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         },
@@ -526,7 +529,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'search'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         }
@@ -551,7 +554,7 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
               data: {
                 navigateSource: 'search'
               },
-              loadChildren: () => import('./components/viewer/viewer.module').then((m) => m.AppViewerModule)
+              loadChildren: () => import('@alfresco/aca-viewer').then((m) => m.AcaViewerModule)
             }
           ]
         }

projects/aca-preview/.eslintrc.json

@@ -0,0 +1,121 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "projects/aca-preview/tsconfig.lib.json",
+          "projects/aca-preview/tsconfig.spec.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "plugins": [
+        "eslint-plugin-rxjs",
+        "eslint-plugin-unicorn"
+      ],
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": [
+              "lib",
+              "aca",
+              "app",
+              "adf"
+            ],
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": [
+              "lib",
+              "aca",
+              "app",
+              "adf"
+            ],
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/no-host-metadata-property": "off",
+        "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "@typescript-eslint/member-delimiter-style": [
+          "off",
+          {
+            "multiline": {
+              "delimiter": "none",
+              "requireLast": true
+            },
+            "singleline": {
+              "delimiter": "semi",
+              "requireLast": false
+            }
+          }
+        ],
+        "@typescript-eslint/semi": [
+          "off",
+          null
+        ],
+        "@typescript-eslint/type-annotation-spacing": "off",
+        "arrow-parens": [
+          "off",
+          "always"
+        ],
+        "brace-style": [
+          "off",
+          "off"
+        ],
+        "eol-last": "off",
+        "id-blacklist": "off",
+        "id-match": "off",
+        "linebreak-style": "off",
+        "max-len": "off",
+        "new-parens": "off",
+        "newline-per-chained-call": "off",
+        "no-duplicate-imports": "error",
+        "no-extra-semi": "off",
+        "no-irregular-whitespace": "off",
+        "no-return-await": "error",
+        "no-underscore-dangle": "off",
+        "quote-props": "off",
+        "rxjs/no-create": "error",
+        "rxjs/no-subject-unsubscribe": "error",
+        "rxjs/no-subject-value": "error",
+        "rxjs/no-unsafe-takeuntil": "error",
+        "space-before-function-paren": "off",
+        "space-in-parens": [
+          "off",
+          "never"
+        ],
+        "unicorn/filename-case": "error"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {
+        "@angular-eslint/template/no-autofocus": "error",
+        "@angular-eslint/template/no-negated-async": "off",
+        "@angular-eslint/template/no-positive-tabindex": "error",
+        "@angular-eslint/template/eqeqeq": "error"
+      }
+    }
+  ]
+}

projects/aca-preview/README.md

@@ -0,0 +1,24 @@
+# AcaPreview
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project aca-preview` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project aca-preview`.
+> Note: Don't forget to add `--project aca-preview` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build aca-preview` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build aca-preview`, go to the dist folder `cd dist/aca-preview` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test aca-preview` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

projects/aca-preview/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/aca-settings'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: true,
+    restartOnFileChange: true
+  });
+};

projects/aca-preview/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/@alfresco/aca-preview",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/aca-preview/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@alfresco/aca-preview",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^14.1.0",
+    "@angular/core": "^14.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

projects/aca-preview/src/lib/components/preview.component.spec.ts

@@ -25,17 +25,78 @@
 
 import { Router, ActivatedRoute } from '@angular/router';
 import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
-import { UserPreferencesService, UploadService, NodesApiService } from '@alfresco/adf-core';
+import {
-import { ClosePreviewAction } from '@alfresco/aca-shared/store';
+  UserPreferencesService,
+  UploadService,
+  NodesApiService,
+  AlfrescoApiService,
+  AlfrescoApiServiceMock,
+  AuthenticationService,
+  DiscoveryApiService,
+  TranslationMock,
+  TranslationService,
+  PipeModule
+} from '@alfresco/adf-core';
+import { AppState, ClosePreviewAction } from '@alfresco/aca-shared/store';
 import { PreviewComponent } from './preview.component';
-import { of, throwError } from 'rxjs';
+import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
+import { ContentApiService, AppHookService, TranslateServiceMock, DocumentBasePageService } from '@alfresco/aca-shared';
+import { Store, StoreModule } from '@ngrx/store';
+import { Node, NodePaging, FavoritePaging, SharedLinkPaging, PersonEntry, ResultSetPaging, RepositoryInfo, NodeEntry } from '@alfresco/js-api';
+import { PreviewModule } from '../preview.module';
+import { TranslateService } from '@ngx-translate/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { EffectsModule } from '@ngrx/effects';
-import { NodeEffects } from '../../store/effects/node.effects';
+
-import { AppTestingModule } from '../../testing/app-testing.module';
+class DocumentBasePageServiceMock extends DocumentBasePageService {
-import { ContentApiService, AppHookService } from '@alfresco/aca-shared';
+  canUpdateNode(_node: NodeEntry): boolean {
-import { Store } from '@ngrx/store';
+    return true;
-import { Node, NodePaging, FavoritePaging, SharedLinkPaging, PersonEntry, ResultSetPaging } from '@alfresco/js-api';
+  }
-import { PreviewModule } from './preview.module';
+  canUploadContent(_node: Node): boolean {
+    return true;
+  }
+}
+
+export const INITIAL_APP_STATE: AppState = {
+  appName: 'Alfresco Content Application',
+  headerColor: '#ffffff',
+  headerTextColor: '#000000',
+  logoPath: 'assets/images/alfresco-logo-white.svg',
+  headerImagePath: 'assets/images/mastHead-bg-shapesPattern.svg',
+  customCssPath: '',
+  webFontPath: '',
+  sharedUrl: '',
+  user: {
+    isAdmin: null,
+    id: null,
+    firstName: '',
+    lastName: ''
+  },
+  selection: {
+    nodes: [],
+    libraries: [],
+    isEmpty: true,
+    count: 0
+  },
+  navigation: {
+    currentFolder: null
+  },
+  currentNodeVersion: null,
+  infoDrawerOpened: false,
+  infoDrawerPreview: false,
+  infoDrawerMetadataAspect: '',
+  showFacetFilter: true,
+  fileUploadingDialog: true,
+  documentDisplayMode: 'list',
+  showLoader: false,
+  repository: {
+    status: {
+      isQuickShareEnabled: true
+    }
+  } as any
+};
 
 describe('PreviewComponent', () => {
   let fixture: ComponentFixture<PreviewComponent>;
@@ -51,7 +112,49 @@ describe('PreviewComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [EffectsModule.forRoot([NodeEffects]), PreviewModule, AppTestingModule]
+      imports: [
+        PreviewModule,
+        NoopAnimationsModule,
+        HttpClientModule,
+        RouterTestingModule,
+        StoreModule.forRoot(
+          { app: (state) => state },
+          {
+            initialState: {
+              app: INITIAL_APP_STATE
+            },
+            runtimeChecks: {
+              strictStateImmutability: false,
+              strictActionImmutability: false
+            }
+          }
+        ),
+        EffectsModule.forRoot([]),
+        PipeModule
+      ],
+      providers: [
+        { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
+        { provide: TranslationService, useClass: TranslationMock },
+        { provide: TranslateService, useClass: TranslateServiceMock },
+        { provide: DocumentBasePageService, useVale: new DocumentBasePageServiceMock() },
+        {
+          provide: DiscoveryApiService,
+          useValue: {
+            ecmProductInfo$: new BehaviorSubject<RepositoryInfo | null>(null),
+            getEcmProductInfo: (): Observable<RepositoryInfo> => of(new RepositoryInfo({ version: '10.0.0' }))
+          }
+        },
+        {
+          provide: AuthenticationService,
+          useValue: {
+            isEcmLoggedIn: (): boolean => true,
+            getRedirect: (): string | null => null,
+            setRedirect() {},
+            isOauth: (): boolean => false,
+            isOAuthWithoutSilentLogin: (): boolean => false
+          }
+        }
+      ]
     });
 
     fixture = TestBed.createComponent(PreviewComponent);

projects/aca-preview/src/lib/components/preview.component.ts

@@ -30,8 +30,7 @@ import { debounceTime, map, takeUntil } from 'rxjs/operators';
 import { UserPreferencesService, ObjectUtils, UploadService, NodesApiService } from '@alfresco/adf-core';
 import { Store } from '@ngrx/store';
 import { AppStore, ClosePreviewAction, ViewerActionTypes, SetSelectedNodesAction } from '@alfresco/aca-shared/store';
-import { AppExtensionService, AppHookService, ContentApiService, PageComponent } from '@alfresco/aca-shared';
+import { PageComponent, AppExtensionService, AppHookService, ContentApiService, DocumentBasePageService } from '@alfresco/aca-shared';
-import { ContentManagementService } from '../../services/content-management.service';
 import { ContentActionRef, ViewerExtensionRef } from '@alfresco/adf-extensions';
 import { SearchRequest } from '@alfresco/js-api';
 import { from } from 'rxjs';
@@ -97,7 +96,7 @@ export class PreviewComponent extends PageComponent implements OnInit, OnDestroy
     private location: Location,
     store: Store<AppStore>,
     extensions: AppExtensionService,
-    content: ContentManagementService,
+    content: DocumentBasePageService,
     private appHookService: AppHookService
   ) {
     super(store, extensions, content);

projects/aca-preview/src/lib/preview.module.ts

@@ -28,11 +28,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { ContentDirectiveModule } from '@alfresco/adf-content-services';
-import { CoreExtensionsModule } from '../../extensions/core.extensions.module';
+import { SharedDirectivesModule, SharedToolbarModule, SharedInfoDrawerModule } from '@alfresco/aca-shared';
-import { DirectivesModule } from '../../directives/directives.module';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
-import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
+import { PreviewComponent } from './components/preview.component';
-import { PreviewComponent } from './preview.component';
-import { AppToolbarModule } from '../toolbar/toolbar.module';
 
 const routes: Routes = [
   {
@@ -50,11 +48,12 @@ const routes: Routes = [
     CommonModule,
     RouterModule.forChild(routes),
     CoreModule.forChild(),
+    ExtensionsModule,
     ContentDirectiveModule,
-    DirectivesModule,
+    SharedDirectivesModule,
-    AppInfoDrawerModule,
+    ContentDirectiveModule,
-    CoreExtensionsModule.forChild(),
+    SharedInfoDrawerModule,
-    AppToolbarModule
+    SharedToolbarModule
   ],
   declarations: [PreviewComponent],
   exports: [PreviewComponent]

projects/aca-preview/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of aca-preview
+ */
+
+export * from './lib/components/preview.component';
+export * from './lib/preview.module';

projects/aca-preview/src/test.ts

@@ -0,0 +1,25 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

projects/aca-preview/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

projects/aca-preview/tsconfig.lib.prod.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false,
+    "paths": {
+      "@alfresco/aca-shared": ["dist/@alfresco/aca-shared"],
+      "@alfresco/aca-shared/store": ["dist/@alfresco/aca-shared/store"],
+    }
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

projects/aca-preview/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

projects/aca-viewer/.eslintrc.json

@@ -0,0 +1,121 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "projects/aca-viewer/tsconfig.lib.json",
+          "projects/aca-viewer/tsconfig.spec.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "plugins": [
+        "eslint-plugin-rxjs",
+        "eslint-plugin-unicorn"
+      ],
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": [
+              "lib",
+              "aca",
+              "app",
+              "adf"
+            ],
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": [
+              "lib",
+              "aca",
+              "app",
+              "adf"
+            ],
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/no-host-metadata-property": "off",
+        "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "@typescript-eslint/member-delimiter-style": [
+          "off",
+          {
+            "multiline": {
+              "delimiter": "none",
+              "requireLast": true
+            },
+            "singleline": {
+              "delimiter": "semi",
+              "requireLast": false
+            }
+          }
+        ],
+        "@typescript-eslint/semi": [
+          "off",
+          null
+        ],
+        "@typescript-eslint/type-annotation-spacing": "off",
+        "arrow-parens": [
+          "off",
+          "always"
+        ],
+        "brace-style": [
+          "off",
+          "off"
+        ],
+        "eol-last": "off",
+        "id-blacklist": "off",
+        "id-match": "off",
+        "linebreak-style": "off",
+        "max-len": "off",
+        "new-parens": "off",
+        "newline-per-chained-call": "off",
+        "no-duplicate-imports": "error",
+        "no-extra-semi": "off",
+        "no-irregular-whitespace": "off",
+        "no-return-await": "error",
+        "no-underscore-dangle": "off",
+        "quote-props": "off",
+        "rxjs/no-create": "error",
+        "rxjs/no-subject-unsubscribe": "error",
+        "rxjs/no-subject-value": "error",
+        "rxjs/no-unsafe-takeuntil": "error",
+        "space-before-function-paren": "off",
+        "space-in-parens": [
+          "off",
+          "never"
+        ],
+        "unicorn/filename-case": "error"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {
+        "@angular-eslint/template/no-autofocus": "error",
+        "@angular-eslint/template/no-negated-async": "off",
+        "@angular-eslint/template/no-positive-tabindex": "error",
+        "@angular-eslint/template/eqeqeq": "error"
+      }
+    }
+  ]
+}

projects/aca-viewer/README.md

@@ -0,0 +1,24 @@
+# AcaViewer
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project aca-viewer` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project aca-viewer`.
+> Note: Don't forget to add `--project aca-viewer` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build aca-viewer` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build aca-viewer`, go to the dist folder `cd dist/aca-viewer` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test aca-viewer` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

projects/aca-viewer/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/aca-settings'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: true,
+    restartOnFileChange: true
+  });
+};

projects/aca-viewer/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/@alfresco/aca-viewer",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/aca-viewer/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@alfresco/aca-viewer",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^14.1.0",
+    "@angular/core": "^14.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

projects/aca-viewer/src/lib/components/viewer/viewer.component.ts

@@ -47,13 +47,13 @@ import { debounceTime, takeUntil } from 'rxjs/operators';
 import { Actions, ofType } from '@ngrx/effects';
 
 @Component({
-  selector: 'app-viewer',
+  selector: 'aca-viewer',
   templateUrl: './viewer.component.html',
   styleUrls: ['./viewer.component.scss'],
   encapsulation: ViewEncapsulation.None,
   host: { class: 'app-viewer' }
 })
-export class AppViewerComponent implements OnInit, OnDestroy {
+export class AcaViewerComponent implements OnInit, OnDestroy {
   _versionsApi: VersionsApi;
   get versionsApi(): VersionsApi {
     this._versionsApi = this._versionsApi ?? new VersionsApi(this.apiService.getInstance());

projects/aca-viewer/src/lib/viewer.module.ts

@@ -25,14 +25,12 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule, Routes } from '@angular/router';
 import { CoreModule } from '@alfresco/adf-core';
 import { ContentDirectiveModule } from '@alfresco/adf-content-services';
-import { DirectivesModule } from '../../directives/directives.module';
+import { SharedDirectivesModule, SharedInfoDrawerModule, SharedToolbarModule } from '@alfresco/aca-shared';
-import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
-import { CoreExtensionsModule } from '../../extensions/core.extensions.module';
+import { AcaViewerComponent } from './components/viewer/viewer.component';
-import { AppToolbarModule } from '../toolbar/toolbar.module';
+import { RouterModule, Routes } from '@angular/router';
-import { AppViewerComponent } from './viewer.component';
 
 const routes: Routes = [
   {
@@ -41,22 +39,22 @@ const routes: Routes = [
       title: 'APP.PREVIEW.TITLE',
       navigateMultiple: true
     },
-    component: AppViewerComponent
+    component: AcaViewerComponent
   }
 ];
 
 @NgModule({
   imports: [
     CommonModule,
-    RouterModule.forChild(routes),
     CoreModule.forChild(),
+    RouterModule.forChild(routes),
+    ExtensionsModule.forChild(),
     ContentDirectiveModule,
-    DirectivesModule,
+    SharedDirectivesModule,
-    AppInfoDrawerModule,
+    SharedInfoDrawerModule,
-    CoreExtensionsModule.forChild(),
+    SharedToolbarModule
-    AppToolbarModule
   ],
-  declarations: [AppViewerComponent],
+  declarations: [AcaViewerComponent],
-  exports: [AppViewerComponent]
+  exports: [AcaViewerComponent]
 })
-export class AppViewerModule {}
+export class AcaViewerModule {}

projects/aca-viewer/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of aca-viewer
+ */
+
+export * from './lib/components/viewer/viewer.component';
+export * from './lib/viewer.module';

projects/aca-viewer/src/test.ts

@@ -0,0 +1,25 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

projects/aca-viewer/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

projects/aca-viewer/tsconfig.lib.prod.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false,
+    "paths": {
+      "@alfresco/aca-shared": ["dist/@alfresco/aca-shared"],
+      "@alfresco/aca-shared/store": ["dist/@alfresco/aca-shared/store"],
+    }
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

projects/aca-viewer/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

scripts/ci/npm/publish-libs.sh

@@ -43,6 +43,8 @@ PROJECTS=(
     'adf-office-services-ext'
     'aca-settings'
     'aca-about'
+    'aca-preview'
+    'aca-viewer'
 );
 
 for PROJECT in "${PROJECTS[@]}"

tsconfig.adf.json

@@ -39,6 +39,8 @@
       "@alfresco/aca-settings": ["projects/aca-settings/src/public-api.ts"],
       "@alfresco/aca-folder-rules": ["projects/aca-folder-rules/src/public-api.ts"],
       "@alfresco/aca-content": ["projects/aca-content/src/public-api.ts"],
+      "@alfresco/aca-viewer": ["projects/aca-viewer/src/public-api.ts"],
+      "@alfresco/aca-preview": ["projects/aca-preview/src/public-api.ts"],
       "package.json": ["package.json"],
       "*": ["./node_modules/*"]
     }

tsconfig.json

@@ -27,12 +27,10 @@
       "@alfresco/aca-testing-shared": ["projects/aca-testing-shared"],
       "@alfresco/aca-about": ["projects/aca-about/src/public-api.ts"],
       "@alfresco/aca-settings": ["projects/aca-settings/src/public-api.ts"],
-      "@alfresco/aca-folder-rules": [
+      "@alfresco/aca-folder-rules": ["projects/aca-folder-rules/src/public-api.ts"],
-        "projects/aca-folder-rules/src/public-api.ts"
+      "@alfresco/aca-content": ["projects/aca-content/src/public-api.ts"],
-      ],
+      "@alfresco/aca-viewer": ["projects/aca-viewer/src/public-api.ts"],
-      "@alfresco/aca-content": [
+      "@alfresco/aca-preview": ["projects/aca-preview/src/public-api.ts"],
-        "projects/aca-content/src/public-api.ts"
-      ],
       "package.json": ["package.json"]
     }
   },