@oncehub/knowledgeowl-angular 0.0.0

package/angular.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": "47c16505-5eb3-4e8a-a186-dc68f7f3ea3b"
+  },
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "knowledgeowl-angular": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "library",
+      "prefix": "",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "src/tsconfig.lib.json",
+            "project": "src/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "test/test.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "test/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

package/deploy.sh

@@ -0,0 +1,19 @@
+#!/bin/sh
+set -e
+
+node package-deploy/npm-login.js $(cat "/etc/npm-cred/NPM_AUTH_TOKEN")
+npm whoami
+npm i
+chown root:root .
+npm run package
+filename="$(npm pack --dry-run | tail -n 1)"
+echo "$1"
+
+if [[ "$1" == "qa" ]] || [[ "$1" == "master" ]] || [[ "$1" == "staging" ]] || [[ "$1" == "staging-app2" ]]
+then
+  npm publish dist/knowledgeowl-angular/$filename --registry=https://registry.npmjs.org/
+else
+  npm publish --tag beta dist/knowledgeowl-angular/$filename --registry=https://registry.npmjs.org/
+fi
+
+echo "$filename package pushed to NPM successfully"

package/package-deploy/npm-login.js

@@ -0,0 +1,14 @@
+let fs = require('fs');
+let path = require('path');
+
+let token = '';
+
+process.argv.forEach(function(val, index, array) {
+  if (index == 2) token = val;
+});
+
+let registry = '//registry.npmjs.org/';
+
+var configPath = configPath ? configPath : path.join(__dirname, '../', '.npmrc');
+
+fs.writeFile(configPath, `${registry}:_authToken=${token}` + '\n', (err, message) => { if(err){ console.log(err , message)}});

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@oncehub/knowledgeowl-angular",
+  "description": "KnowledgeOwl widget integration for Angular",
+  "author": "https://github.com/scheduleonce/knowledgeowl-angular/graphs/contributors",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scheduleonce/knowledgeowl-angular.git"
+  },
+  "license": "MIT",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build --configuration production",
+    "test": "ng test",
+    "lint": "npm run test:lint",
+    "prettier": "prettier --list-different \"**/*.{ts,js,css,scss,md,html}\"",
+    "fix:prettier": "prettier --write \"**/*.{ts,js,css,scss,md,html}\"",
+    "npm-pack": "cd dist/knowledgeowl-angular && npm pack",
+    "package": "npm run build && cp README.md dist/knowledgeowl-angular/ && npm run npm-pack",
+    "publish": "cd dist/knowledgeowl-angular && npm publish --access public",
+    "test:lint": "ng lint knowledgeowl-angular",
+    "fix:lint": "ng lint knowledgeowl-angular --fix"
+  },
+  "dependencies": {
+    "tslib": "2.3.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "14.2.12",
+    "@angular-eslint/builder": "14.4.0",
+    "@angular-eslint/eslint-plugin": "14.4.0",
+    "@angular-eslint/eslint-plugin-template": "14.4.0",
+    "@angular-eslint/schematics": "14.4.0",
+    "@angular-eslint/template-parser": "14.4.0",
+    "@angular/cli": "14.2.12",
+    "@angular/common": "14.2.12",
+    "@angular/compiler": "14.2.12",
+    "@angular/compiler-cli": "14.2.12",
+    "@angular/core": "14.2.12",
+    "@angular/platform-browser": "14.2.12",
+    "@angular/platform-browser-dynamic": "14.2.12",
+    "@types/jasmine": "3.10.3",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "eslint": "^8.23.0",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-jsdoc": "37.9.1",
+    "eslint-plugin-prefer-arrow": "1.2.3",
+    "jasmine-core": "4.0.0",
+    "karma": "6.3.16",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage-istanbul-reporter": "3.0.3",
+    "karma-jasmine": "4.0.1",
+    "karma-jasmine-html-reporter": "1.7.0",
+    "karma-junit-reporter": "2.0.1",
+    "ng-packagr": "14.2.2",
+    "prettier": "2.5.1",
+    "puppeteer": "13.3.2",
+    "typescript": "4.8.4",
+    "zone.js": "0.11.4"
+  }
+}

package/src/README.md

@@ -0,0 +1,5 @@
+# KnowledgeOwl Angular
+
+The sources for this package are in the main [KnowledgeOwl Angular](https://github.com/scheduleonce/knowledgeowl-angular) repo. Please file issues and pull requests against that repo.
+
+License: MIT

package/src/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './knowledge-owl-widget/public-api';
+export * from './knowledge-owl-link/public-api';

package/src/lib/knowledge-owl-link/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/knowledge-owl-link/knowledge-owl-link-module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { KnowledgeOwlLink } from './knowledge-owl-link';
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [KnowledgeOwlLink],
+  declarations: [KnowledgeOwlLink],
+})
+export class KnowledgeOwlLinkModule {}

package/src/lib/knowledge-owl-link/knowledge-owl-link.spec.ts

@@ -0,0 +1,51 @@
+import { Component, Provider, Type } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { KnowledgeOwlLinkModule } from './index';
+import { getKnowledgeLinkArticleMissingError } from './knowledge-owl-widget-errors';
+
+@Component({
+  template: `<a knowledgeOwlLink>Test link</a>`,
+})
+class KnowledgeOwlLinkWithoutArticle {}
+
+@Component({
+  template: `
+    <a knowledgeOwlLink="https://knowledgeowl.article.com/help/test-article"
+      >Test link</a
+    >
+  `,
+})
+class KnowledgeOwlLinkWithValidInputs {}
+
+describe('KnowledgeOwl link with missing credentials', () => {
+  it('should throw error without knowledgeOwlLink', () => {
+    const fixture = createComponent(KnowledgeOwlLinkWithoutArticle, [
+      { provide: 'KOProjectURL', useValue: 'https://knowledgeowl.com' },
+    ]);
+    expect(() => fixture.detectChanges()).toThrowError(
+      getKnowledgeLinkArticleMissingError().message
+    );
+  });
+});
+
+describe('KnowledgeOwl link', () => {
+  it('should not throw error when given correct inputs', () => {
+    const fixture = createComponent(KnowledgeOwlLinkWithValidInputs, [
+      { provide: 'KOProjectURL', useValue: 'https://knowledgeowl.com' },
+    ]);
+    expect(() => fixture.detectChanges()).not.toThrowError();
+  });
+});
+
+const createComponent = <T>(
+  component: Type<T>,
+  providers: Provider[] = []
+): ComponentFixture<T> => {
+  TestBed.configureTestingModule({
+    imports: [KnowledgeOwlLinkModule],
+    declarations: [component],
+    providers,
+  }).compileComponents();
+
+  return TestBed.createComponent<T>(component);
+};

package/src/lib/knowledge-owl-link/knowledge-owl-link.ts

@@ -0,0 +1,97 @@
+import {
+  AfterContentInit,
+  ElementRef,
+  HostListener,
+  Inject,
+  Input,
+  Directive,
+} from '@angular/core';
+import { getKnowledgeLinkArticleMissingError } from './knowledge-owl-widget-errors';
+
+/**
+ * Knowledge Owl Link
+ */
+@Directive({
+  selector: `a[knowledgeOwlLink]`,
+  exportAs: 'knowledgeOwlLink',
+})
+export class KnowledgeOwlLink implements AfterContentInit {
+  @Input()
+  knowledgeOwlLink: string;
+
+  constructor(
+    protected elementRef: ElementRef,
+    @Inject('KOProjectURL') private projectURL: string
+  ) {}
+
+  getHostElement(): HTMLElement {
+    return this.elementRef.nativeElement;
+  }
+
+  ngAfterContentInit(): void {
+    this._validateLinkInputs();
+    this._initLink();
+  }
+
+  @HostListener('click', ['$event'])
+  openArticle(event: Event): void {
+    event.preventDefault();
+    // Convert the KO link into the widget link
+    let widgetHref;
+    if (this.knowledgeOwlLink.includes('#')) {
+      const widgetlink = this.knowledgeOwlLink.split('#');
+      const widgetlink1 =
+        widgetlink[0].replace('/help/', '/help/fetch-article/hash/') +
+        '?widget=true';
+      const widgetlink2 = '#' + widgetlink[1];
+      widgetHref = widgetlink1.concat(widgetlink2);
+    } else {
+      widgetHref =
+        this.knowledgeOwlLink.replace('/help/', '/help/fetch-article/hash/') +
+        '?widget=true';
+    }
+
+    if (window['__ko16']) {
+      // Wait until widget loads completely
+      window['__ko16'].openArticle(widgetHref);
+    }
+  }
+
+  /**
+   * Private methods
+   */
+
+  /**
+   * Initialize link
+   *
+   * @private
+   */
+  private _initLink() {
+    this.knowledgeOwlLink = `${this.projectURL}/help/${this.knowledgeOwlLink}`; // Updating article link to have complete URL
+    const nativeElement = this.getHostElement();
+    if (nativeElement.tagName === 'A') {
+      // Updating link for <a>
+      nativeElement.setAttribute('href', this.knowledgeOwlLink);
+    }
+  }
+
+  /**
+   * Validates all required inputs of knowledge-owl-link
+   *
+   * @private
+   */
+  private _validateLinkInputs() {
+    this._validateArticlePresence();
+  }
+
+  /**
+   * Validates presence of article URL for link
+   *
+   * @private
+   */
+  private _validateArticlePresence() {
+    if (!this.knowledgeOwlLink) {
+      throw getKnowledgeLinkArticleMissingError();
+    }
+  }
+}

package/src/lib/knowledge-owl-link/knowledge-owl-widget-errors.ts

@@ -0,0 +1,3 @@
+/** @docs-private */
+export const getKnowledgeLinkArticleMissingError = (): Error =>
+  Error('knowledge-owl-link requires article URL as input.');

package/src/lib/knowledge-owl-link/public-api.ts

@@ -0,0 +1,2 @@
+export * from './knowledge-owl-link';
+export * from './knowledge-owl-link-module';

package/src/lib/knowledge-owl-widget/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/lib/knowledge-owl-widget/knowledge-owl-widget-errors.ts

@@ -0,0 +1,6 @@
+/** @docs-private */
+export const getKnowledgeWidgetPoductKeyMissingError = (): Error =>
+  Error('knowledge-owl-widget requires product key as input.');
+
+export const getKnowledgeWidgetInvalidProductURLError = (): Error =>
+  Error('knowledge-owl-widget requires valid product URL as provider.');

package/src/lib/knowledge-owl-widget/knowledge-owl-widget-module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KnowledgeOwlWidget } from './knowledge-owl-widget';
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [KnowledgeOwlWidget],
+  declarations: [KnowledgeOwlWidget],
+  providers: [],
+})
+export class KnowledgeOwlWidgetModule {}

package/src/lib/knowledge-owl-widget/knowledge-owl-widget.spec.ts

@@ -0,0 +1,66 @@
+import { Component, Provider, Type } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { KnowledgeOwlWidgetModule } from './index';
+import {
+  getKnowledgeWidgetPoductKeyMissingError,
+  getKnowledgeWidgetInvalidProductURLError,
+} from './knowledge-owl-widget-errors';
+
+@Component({
+  template: `<knowledge-owl-widget></knowledge-owl-widget>`,
+})
+class KnowledgeOwlWidgetWithoutCredentials {}
+
+@Component({
+  template: `<knowledge-owl-widget></knowledge-owl-widget>`,
+})
+class KnowledgeOwlWidgetWithoutProjectKey {}
+
+@Component({
+  template: `
+    <knowledge-owl-widget [projectKey]="'testkey'"></knowledge-owl-widget>
+  `,
+})
+class KnowledgeOwlWidgetWithCredentials {}
+
+describe('KnowledgeOwl widget with missing credentials', () => {
+  it('should throw KnowledgeWidgetProductURLMissingError error', () => {
+    const fixture = createComponent(KnowledgeOwlWidgetWithoutCredentials, [
+      { provide: 'KOProjectURL', useValue: 'https://' },
+    ]);
+    expect(() => fixture.detectChanges()).toThrowError(
+      getKnowledgeWidgetInvalidProductURLError().message
+    );
+  });
+
+  it('should throw KnowledgeWidgetProductKeyMissingError error', () => {
+    const fixture = createComponent(KnowledgeOwlWidgetWithoutProjectKey, [
+      { provide: 'KOProjectURL', useValue: 'https://knowledgeowl.com' },
+    ]);
+    expect(() => fixture.detectChanges()).toThrowError(
+      getKnowledgeWidgetPoductKeyMissingError().message
+    );
+  });
+});
+
+describe('KnowledgeOwl widget', () => {
+  it('should not throw error when given correct inputs', () => {
+    const fixture = createComponent(KnowledgeOwlWidgetWithCredentials, [
+      { provide: 'KOProjectURL', useValue: 'https://knowledgeowl.com' },
+    ]);
+    expect(() => fixture.detectChanges()).not.toThrowError();
+  });
+});
+
+const createComponent = <T>(
+  component: Type<T>,
+  providers: Provider[] = []
+): ComponentFixture<T> => {
+  TestBed.configureTestingModule({
+    imports: [KnowledgeOwlWidgetModule],
+    declarations: [component],
+    providers,
+  }).compileComponents();
+
+  return TestBed.createComponent<T>(component);
+};

package/src/lib/knowledge-owl-widget/knowledge-owl-widget.ts

@@ -0,0 +1,162 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  getKnowledgeWidgetPoductKeyMissingError,
+  getKnowledgeWidgetInvalidProductURLError,
+} from './knowledge-owl-widget-errors';
+
+/** Regex to validate article URL is valid or not */
+const urlValidatorRegex =
+  /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
+
+@Component({
+  selector: 'knowledge-owl-widget',
+  template: '',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  exportAs: 'knowledgeOwlWidget',
+  providers: [],
+})
+export class KnowledgeOwlWidget implements OnInit, AfterContentInit {
+  /** Flag to check initial page location updated */
+  isPageLocationUpdated = false;
+
+  /** Product key to access KnowledgeOwl widget. */
+  @Input()
+  projectKey: string;
+
+  /** Current page location for widget context. */
+  private _pageLocation: string;
+  @Input() set pageLocation(value: string) {
+    this._pageLocation = value.trim();
+    this._updatePageLocation();
+  }
+
+  get pageLocation(): string {
+    return this._pageLocation;
+  }
+
+  constructor(@Inject('KOProjectURL') private projectURL: string) {}
+
+  ngOnInit(): void {
+    this._initWidget();
+    this._loadScript();
+  }
+
+  ngAfterContentInit(): void {
+    this._validateWidgetInputs();
+    this._initPageLocation();
+  }
+
+  /** Opens the widget. */
+  open(article = ''): void {
+    if (!window['__ko16']) {
+      return;
+    }
+    if (article) {
+      const widgetHref = `${this.projectURL}/help/fetch-article/hash/${article}`;
+      window['__ko16'].openArticle(widgetHref);
+    } else {
+      window['__ko16']._toggleOpen();
+    }
+  }
+
+  /**
+   * Validates the widget's inputs.
+   *
+   * @private
+   */
+  protected _validateWidgetInputs(): void {
+    this._validateProductURL();
+    this._validateProductKey();
+  }
+
+  /**
+   * Private methods
+   */
+
+  /**
+   * Throws an error if the productKey input is missing.
+   *
+   * @private
+   */
+  private _validateProductKey() {
+    if (!this.projectKey) {
+      throw getKnowledgeWidgetPoductKeyMissingError();
+    }
+  }
+
+  /**
+   * Throws an error if the productURL input is missing.
+   *
+   * @private
+   */
+  private _validateProductURL() {
+    if (!this.projectURL || !urlValidatorRegex.test(this.projectURL)) {
+      throw getKnowledgeWidgetInvalidProductURLError();
+    }
+  }
+
+  /**
+   * Initializes the widget.
+   *
+   * @private
+   */
+  private _initWidget() {
+    const ko16p = [];
+    ko16p.push(['_setProject', this.projectKey]);
+    window['_ko16_p'] = ko16p;
+  }
+
+  /**
+   * Loads script into page
+   *
+   * @private
+   */
+  private _loadScript() {
+    const ko = document.createElement('script');
+    ko.type = 'text/javascript';
+    ko.async = true;
+    ko.src = `${this.projectURL}/javascript/ko-index?__pc=${this.projectKey}`;
+    document.head.appendChild(ko);
+  }
+
+  /**
+   * Init page location first time
+   */
+  private _initPageLocation() {
+    const updatePageLocationInterval = setInterval(() => {
+      if (!this.pageLocation || this.isPageLocationUpdated) {
+        clearInterval(updatePageLocationInterval);
+      }
+      if (
+        !this.isPageLocationUpdated &&
+        window['__ko16'] &&
+        this.pageLocation
+      ) {
+        // Updating page location once
+        window['__ko16'].updatePageLoc(this.pageLocation);
+        this.isPageLocationUpdated = true;
+      }
+    });
+  }
+
+  /**
+   * Update page location on change
+   *
+   * @private
+   */
+  private _updatePageLocation() {
+    if (!window['__ko16'] || !this.pageLocation) {
+      return;
+    }
+    window['__ko16'].updatePageLoc(this.pageLocation);
+  }
+}

package/src/lib/knowledge-owl-widget/public-api.ts

@@ -0,0 +1,2 @@
+export * from './knowledge-owl-widget';
+export * from './knowledge-owl-widget-module';

package/src/lib/tsconfig.json

@@ -0,0 +1,10 @@
+// Configuration for IDEs only.
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "..",
+    "baseUrl": ".",
+    "paths": {}
+  },
+  "include": ["./**/*.ts"]
+}

package/src/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../dist/knowledgeowl-angular",
+  "lib": {
+    "entryFile": "public_api.ts"
+  }
+}