feat(user-onboarding): base code for user-onboarding lib (#203)

* base code for user-onboarding lib * Delete test.ts * update * update 11/05 * added functionality of tour-service * update * removed code smells * update * update * update * Update package.json * update * Update tour-store-service.service.ts * feat (usr-onboarding): base code for the library * feat(user-onboarding): base code for user-onboarding library add the default commands for the user incase the user doest not regiter the commands * fix(user-onboarding): update package json fix the dependency issue * fix(user-onboarding): magic number error fix fix the magic number error in sonar cloud * fix(user-onboarding): code smells fix fix some other code smells * fix(user-onboarding): fix the security error fix the session ID error regarding weak cryptography * fix(user-onboarding): change the filter function change the filter function for removing the extra steps not needed when the tour is run again * fix(user-onboarding): code smell fix fix some code smells * fix (user-onboarding): code smell fix fix some code smells * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): code smell fix fixed some code smell in the code * fix(user-onboarding): code smell fix fixed some code smells in the code * feat(user-onboarding): Session ID functionality added the session ID functionality in the tour to resume from the last viewed step * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): fix the step navigating issue added the removed steps array for keeping a track of the removed steps so that those can also be traverses if the tour is resumed from a specific step * fix(user-onboarding): code smell fix fixed some codesmells in the code * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): linting issues fix fixed some linting issues in the code specified in the PR * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): add README added README for the client * fix(user-onboarding): README fix fixed the readme in the client * fix(user-onboarding): lerna bootstrap fix fix the lerna bootstarp issue * fix(user-onboarding): lerna bootstrap fix fixed the issues listed by lerna bootstrap * fix(user-onboarding): fix linting issues fixed some linting issues specified by the lerna lint * fix(user-onboarding): fix for codesmells fixed codesmells in the code * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): linting issues fix fixed the linting issues specified by the lerna lint * fix(user-onboarding): linting issues fix fixed some linting issues raised by the lerna lint * fix(user-onboarding): lerna bootstrap error fix fixed the lerna bootstrap issue * fix(user-onboarding): lerna bootstrap error fix fixed lerna bootstrap error * fix(user-onboarding): lerna test fix added test.ts file * fix(user-onboarding): lerna test fix fixed the freezing issue of lerna test * fix(user-onboarding): lerna test fix fixed the issues specified by lerna test * fix(user-onboarding): lerna test fix and code smells fixed lerna test issues and code smells * fix(user-onboarding): issue fix fixed issues in lerna test * fix(user-onboarding): map codesmell fix fixed the map codesmell * fix(user-onboarding): lerna bootstrap fix fixed lerna boot strap error * base code for user-onboarding lib * Delete test.ts * update * update 11/05 * added functionality of tour-service * update * removed code smells * update * update * update * Update package.json * update * Update tour-store-service.service.ts * feat (usr-onboarding): base code for the library * feat(user-onboarding): base code for user-onboarding library add the default commands for the user incase the user doest not regiter the commands * fix(user-onboarding): update package json fix the dependency issue * fix(user-onboarding): magic number error fix fix the magic number error in sonar cloud * fix(user-onboarding): code smells fix fix some other code smells * fix(user-onboarding): fix the security error fix the session ID error regarding weak cryptography * fix(user-onboarding): change the filter function change the filter function for removing the extra steps not needed when the tour is run again * fix(user-onboarding): code smell fix fix some code smells * fix (user-onboarding): code smell fix fix some code smells * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): code smell fix fixed some code smell in the code * fix(user-onboarding): code smell fix fixed some code smells in the code * feat(user-onboarding): Session ID functionality added the session ID functionality in the tour to resume from the last viewed step * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): fix the step navigating issue added the removed steps array for keeping a track of the removed steps so that those can also be traverses if the tour is resumed from a specific step * fix(user-onboarding): code smell fix fixed some codesmells in the code * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): linting issues fix fixed some linting issues in the code specified in the PR * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): add README added README for the client * fix(user-onboarding): README fix fixed the readme in the client * fix(user-onboarding): lerna bootstrap fix fix the lerna bootstarp issue * fix(user-onboarding): lerna bootstrap fix fixed the issues listed by lerna bootstrap * fix(user-onboarding): fix linting issues fixed some linting issues specified by the lerna lint * fix(user-onboarding): fix for codesmells fixed codesmells in the code * fix(user-onboarding): code smell fix fixed some code smells in the code * fix(user-onboarding): linting issues fix fixed the linting issues specified by the lerna lint * fix(user-onboarding): linting issues fix fixed some linting issues raised by the lerna lint * fix(user-onboarding): lerna bootstrap error fix fixed the lerna bootstrap issue * fix(user-onboarding): lerna bootstrap error fix fixed lerna bootstrap error * fix(user-onboarding): lerna test fix added test.ts file * fix(user-onboarding): lerna test fix and code smells fixed lerna test issues and code smells * fix(user-onboarding): lerna test fix fixed the issues specified by lerna test * fix(user-onboarding): issue fix fixed issues in lerna test * fix(user-onboarding): map codesmell fix fixed the map codesmell * fix(user-onboarding): lerna bootstrap fix fixed lerna boot strap error * fix(user-onboarding): lerna test fix lerna test fix * fix(user-onboarding): lerna bootstrap fix fixed lerna error * fix(user-onboarding): lerna test issue fix fixed lerna test issues * fix(audit-service): typo error fix in package.json fixed a typo error in package.json in audit service Co-authored-by: akshatdubeysf <77672713+akshatdubeysf@users.noreply.github.com>
sourcefuse · Jun 9, 2021 · 8d4d19b · 8d4d19b
1 parent 02858bc
commit 8d4d19b
Show file tree

Hide file tree

Showing 42 changed files with 23,861 additions and 162 deletions.
diff --git a/packages/user-onboarding/.editorconfig b/packages/user-onboarding/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/packages/user-onboarding/.gitignore b/packages/user-onboarding/.gitignore
@@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/packages/user-onboarding/README.md b/packages/user-onboarding/README.md
@@ -0,0 +1,229 @@
+# user-onboarding-client
+
+
+## Overview
+
+Microservice for providing a smooth user onboarding experience with the help of step by step application specific tours.
+
+
+### Installation
+
+First step is to clone the user-onboarding folder inside the packages folder.
+Then navigate inside the user-onboarding folder and run
+```bash
+ng build
+```
+This will create a dist folder
+then navigate inside the dist folder and then to user-onboarding-lib and run
+
+```bash
+npm pack
+```
+This will create a Tar Package which can be installed by running the npm install command and instead of package name give
+npm install path-of-tar/name-of-tar.tgz
+
+## Implementation
+
+Create a new Application using Angular Cli and import the @sourceloop/user-onboarding-client and ngx-webstorage-service in "app.component.ts"
+
+```typescript
+    import {TourServiceService, TourStoreServiceService} from '@sourceloop/user-onboarding-client';
+    import { LOCAL_STORAGE, StorageService } from "ngx-webstorage-service";
+```
+
+
+Two Services are provided (TourService and TourStoreService)
+
+TourStoreService provides with the functions - :
+
+ A function to a session ID used to log the user session with the tour created.
+ ```typescript
+    sessionID = this.tourStoreService.getSessionId();
+ ```
+ Functions to register the created custom commands and different interfaces for the implementation.
+ ```typescript
+import { Observable, of } from 'rxjs';
+import {
+  LoadStateCommand,
+  SaveStateCommand,
+  LoadStateParameters,
+  SaveStateParameters,
+  TourState,
+  SaveTourCommand,
+  LoadTourCommand,
+  SaveTourParameters,
+  LoadTourParameters,
+  Tour,
+} from '@sourceloop/user-onboarding-client';
+import { StorageService } from 'ngx-webstorage-service';
+
+export class SaveTCommandCustom implements SaveTourCommand {
+  constructor(private readonly storage: StorageService) {}
+  public parameters: SaveTourParameters;
+  execute(): Observable<Tour> {
+    const newTour: Tour = {
+      tourId: this.parameters.tourId,
+      tourSteps: this.parameters.tourSteps,
+      styleSheet: this.parameters.styleSheet,
+    };
+    this.storage.set(this.parameters.tourId, newTour);
+    return of(newTour);
+  }
+}
+
+export class LoadTCommandCustom implements LoadTourCommand {
+  constructor(private readonly storage: StorageService) {}
+  public parameters: LoadTourParameters;
+  execute(): Observable<Tour> {
+    const existingTour = this.storage.get(this.parameters.tourId);
+    return of(existingTour);
+  }
+}
+
+export class SaveSCommandCustom implements SaveStateCommand {
+  constructor(private readonly storage: StorageService) {}
+  public parameters: SaveStateParameters;
+  execute(): Observable<TourState> {
+    const newTourState = this.parameters.state;
+    this.storage.set(newTourState.sessionId, newTourState);
+    return of(newTourState);
+  }
+}
+export class LoadSCommandCustom implements LoadStateCommand {
+  constructor(private readonly storage: StorageService) {}
+  public parameters: LoadStateParameters;
+  execute(): Observable<TourState> {
+    const currentState = this.storage.get(this.parameters.sessionId);
+    return of(currentState);
+  }
+}
+ ```
+
+ Next step is to create an array of TourSteps using the TourStep interface provided.
+ These Steps will be added in the tour.
+
+ ```typescript
+ sampleTour : TourStep[] = [{
+    title: 'sampleStep 1',
+    id: 'example-step-1',
+    text: 'This step is attached to the bottom of THE BAND element.',
+    attachTo: {
+      element: '.elem1',
+      on: 'bottom',
+      type: 'string'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: 'prevAction',
+      },
+      {
+        text: 'Next',
+        action: 'nextAction',
+      }
+    ]
+  },
+  {
+    title: 'sampleStep 2',
+    id: 'example-step-2',
+    text: 'This step is attached to the bottom of contact element.',
+    attachTo: {
+      element: '.elem2',
+      on: 'bottom',
+      type: 'string'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: 'prevAction',
+      },
+      {
+        text: 'Next',
+        action: 'nextAction',
+      }
+    ]
+  },
+  {
+    title: 'sampleStep 3',
+    id: 'example-step-3',
+    text: 'This step is attached to the bottom of TOUR DATES element.',
+    attachTo: {
+      element: '.elem3',
+      on: 'bottom',
+      type: 'string'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: 'prevAction',
+      },
+      {
+        text: 'Next',
+        action: 'nextAction',
+      }
+    ]
+  },
+  {
+    title: 'sampleStep 4',
+    id: 'example-step-4',
+    text: 'This step is attached to the bottom of TICKET MODAL element.',
+    attachTo: {
+      element: '.elem4',
+      on: 'bottom',
+      type: 'string'
+    },
+    buttons: [
+      {
+        text: 'Back',
+        action: 'prevAction',
+      },
+      {
+        text: 'Next',
+        action: 'nextAction',
+      }
+    ]
+  }
+];
+```
+ By default commands are also provided incase a user doesn't specify the custom commands to be used.
+
+ After the commands have been registered, register the functions as well, that will be used for the tour actions eg. next, prev etc.
+
+ Use of ReplaySubject is recommended.
+
+
+
+ ```typescript
+    let tourSubject = new ReplaySubject<Tour>();
+    this.tourStoreService
+      .loadTour({ tourId: this.tourID })
+      .subscribe((existingTour) => {
+        if (!existingTour) {
+          this.tourStoreService
+            .saveTour({
+              tourId: this.tourID,
+              tourSteps: this.sampleTour,
+              styleSheet: '',
+            })
+            .subscribe((newTour) => {
+              tourSubject.next(newTour);
+            });
+        } else {
+          tourSubject.next(existingTour);
+        }
+      });
+
+    tourSubject.subscribe((tour) => {
+      this.tourStoreService.registerFnRef('nextAction', function () {
+        this.next();
+      });
+    });
+    tourSubject.subscribe((tour) => {
+      this.tourStoreService.registerFnRef('prevAction', function () {
+        this.back();
+      });
+
+      this.tourService.run(tour.tourId);
+    }); 
+ ```
+ in the above code the TourService provides with the run function which starts the tour.
diff --git a/packages/user-onboarding/angular.json b/packages/user-onboarding/angular.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "userOnboardingLib": {
+      "projectType": "library",
+      "root": "projects/user-onboarding-lib",
+      "sourceRoot": "projects/user-onboarding-lib/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "styles": [
+            "./node_modules/shepherd.js/dist/css/shepherd.css"
+          ],
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "projects/user-onboarding-lib/tsconfig.lib.json",
+            "project": "projects/user-onboarding-lib/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/user-onboarding-lib/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/user-onboarding-lib/src/test.ts",
+            "tsConfig": "projects/user-onboarding-lib/tsconfig.spec.json",
+            "karmaConfig": "projects/user-onboarding-lib/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/user-onboarding-lib/tsconfig.lib.json",
+              "projects/user-onboarding-lib/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "userOnboardingLib"
+}