BREAKING CHANGE: change property naming

fix all lingint issues and change property names to follow convension.
ahmed-habbachi · Feb 18, 2023 · f1d1681 · f1d1681
1 parent 5362f21
commit f1d1681
Show file tree

Hide file tree

Showing 25 changed files with 117 additions and 122 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -26,7 +26,7 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - run: npm ci
     - run: npm run build:lib
-    # - run: npm run lint
+    - run: npm run lint
     - run: npm run test:ci
 
   build-and-deploy:

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 Credits:
 > This library is heavily inspired and a re-write of [Angular2-Notifications](https://github.com/flauc/angular2-notifications), started with some tweaks that a client needed and ends up changing a lot of principals of the original project.
 
-![GitHub Workflow Status](https://img.shields.io/github/workflow/status/Ahmed-Habbachi/notification-center/Build%20and%20Deploy)
+![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/ahmed-habbachi/notification-center/node.js.yml)
 [![NPM Version](https://img.shields.io/npm/v/b2p-notification-center.svg)](https://www.npmjs.com/package/b2p-notification-center)
 [![NPM Downloads](https://img.shields.io/npm/dt/b2p-notification-center.svg)](https://www.npmjs.com/package/b2p-notification-center)
 

diff --git a/angular.json b/angular.json
@@ -12,7 +12,7 @@
       },
       "root": "projects/notification-center-demo",
       "sourceRoot": "projects/notification-center-demo/src",
-      "prefix": "app",
+      "prefix": "b2p",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "notification-center-demo",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve notification-center-demo",

diff --git a/projects/b2p-notification-center/.eslintrc.json b/projects/b2p-notification-center/.eslintrc.json
@@ -25,7 +25,7 @@
           "error",
           {
             "type": "element",
-            "prefix": "app",
+            "prefix": "b2p",
             "style": "kebab-case"
           }
         ],

diff --git a/projects/b2p-notification-center/README.md b/projects/b2p-notification-center/README.md
@@ -4,7 +4,7 @@
 Credits:
 > This library is heavily inspired and a re-write of [Angular2-Notifications](https://github.com/flauc/angular2-notifications), started with some tweaks that a client needed and ends up changing a lot of principals of the original project.
 
-![GitHub Workflow Status](https://img.shields.io/github/workflow/status/Ahmed-Habbachi/notification-center/Build%20and%20Deploy)
+![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/ahmed-habbachi/notification-center/node.js.yml)
 [![NPM Version](https://img.shields.io/npm/v/b2p-notification-center.svg)](https://www.npmjs.com/package/b2p-notification-center)
 [![NPM Downloads](https://img.shields.io/npm/dt/b2p-notification-center.svg)](https://www.npmjs.com/package/b2p-notification-center)
 

diff --git a/projects/b2p-notification-center/package.json b/projects/b2p-notification-center/package.json
@@ -1,6 +1,6 @@
 {
   "name": "b2p-notification-center",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Angular component to show/hide (manage) notification",
   "homepage": "https://github.com/Ahmed-Habbachi/notification-center",
   "bugs": {

diff --git a/...ification-center/src/lib/components/base-notification/base-notification.component.spec.ts b/...ification-center/src/lib/components/base-notification/base-notification.component.spec.ts
@@ -17,10 +17,10 @@ describe('BaseNotificationComponent', () => {
   const defaultNotification: Notification = {
     id: '0',
     title: 'Test title',
-    type: NotificationType.Success,
+    type: NotificationType.success,
     content: 'Test Content',
     maxLength: 0,
-    animate: NotificationAnimationType.FromTop,
+    animate: NotificationAnimationType.fromTop,
     createdOn: new Date(),
     destroyedOn: new Date()
   };

diff --git a/...p-notification-center/src/lib/components/base-notification/base-notification.component.ts b/...p-notification-center/src/lib/components/base-notification/base-notification.component.ts
@@ -104,7 +104,7 @@ export class BaseNotificationComponent implements OnInit, OnDestroy {
     this.initNotificationContent(this.item.title, 'title');
     this.initNotificationContent(this.item.content, 'content');
 
-    if (this.item.type === NotificationType.Success) {
+    if (this.item.type === NotificationType.success) {
       const timeout = 5000;
       setTimeout(() => {
         this.remove();

diff --git a/projects/b2p-notification-center/src/lib/components/button/button.component.ts b/projects/b2p-notification-center/src/lib/components/button/button.component.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import {Component, Input, OnDestroy, OnInit} from '@angular/core';
 import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 import {BehaviorSubject, Subject, Subscription} from 'rxjs';
@@ -71,17 +72,6 @@ export class B2PButtonComponent implements OnInit, OnDestroy {
   @Input() config: UiButtonConfig;
   @Input() badged: boolean | number;
 
-  public get isActive(): boolean {
-    return this.active;
-  }
-
-  @Input()
-  public set isActive(value: boolean) {
-    if (value !== this.active) {
-      this.toggleStatus({propagate: false});
-    }
-  }
-
   active = false;
 
   currentIconStyle: string;
@@ -91,17 +81,22 @@ export class B2PButtonComponent implements OnInit, OnDestroy {
 
   activeSubscription: Subscription;
 
-  // CONSTRUCTOR ////////////////////////////////////////////////////////////////////////////////////////////////////
-
   constructor(private domSanitizer: DomSanitizer) {}
 
-  // GETTER / SETTER ////////////////////////////////////////////////////////////////////////////////////////////////
-
   get isToggleButton(): boolean {
     return this.config.buttonVariant === UI_BUTTON_VARIANTS.TOGGLE;
   }
 
-  // PUBLIC FUNCTIONS ///////////////////////////////////////////////////////////////////////////////////////////////
+  public get isActive(): boolean {
+    return this.active;
+  }
+
+  @Input()
+  public set isActive(value: boolean) {
+    if (value !== this.active) {
+      this.toggleStatus({propagate: false});
+    }
+  }
 
   ngOnInit(): void {
     this.config.buttonVariant = this.config.buttonVariant || UI_BUTTON_VARIANTS.SIMPLE;

diff --git a/...fication-center/src/lib/components/notification-center/notification-center.component.html b/...fication-center/src/lib/components/notification-center/notification-center.component.html
@@ -1,8 +1,8 @@
 <div *ngIf="notifications.length > 0" class="vg-base-notification-wrapper" [ngClass]="position">
 	<div class="notification-center_buttons">
-    <b2p-button *ngIf="hasTouchedNotifications(notificationType.Error)" [config]="errorButtonConfig" class="notification-center_button" [isActive]="!hasMinimizedNotifications(notificationType.Error)" (click)="onToggleNotification(notificationType.Error)" ></b2p-button>
-    <b2p-button *ngIf="hasTouchedNotifications(notificationType.Warning)" [config]="warningButtonConfig" class="notification-center_button" [isActive]="!hasMinimizedNotifications(notificationType.Warning)" (click)="onToggleNotification(notificationType.Warning)" ></b2p-button>
-    <b2p-button *ngIf="hasTouchedNotifications(notificationType.Info)" [config]="infoButtonConfig" class="notification-center_button" [isActive]="!hasMinimizedNotifications(notificationType.Info)" (click)="onToggleNotification(notificationType.Info)"></b2p-button>
+    <b2p-button *ngIf="hasTouchedNotifications(notificationType.error)" [config]="errorButtonConfig" class="notification-center_button" [isActive]="!hasMinimizedNotifications(notificationType.error)" (click)="onToggleNotification(notificationType.error)" ></b2p-button>
+    <b2p-button *ngIf="hasTouchedNotifications(notificationType.warning)" [config]="warningButtonConfig" class="notification-center_button" [isActive]="!hasMinimizedNotifications(notificationType.warning)" (click)="onToggleNotification(notificationType.warning)" ></b2p-button>
+    <b2p-button *ngIf="hasTouchedNotifications(notificationType.info)" [config]="infoButtonConfig" class="notification-center_button" [isActive]="!hasMinimizedNotifications(notificationType.info)" (click)="onToggleNotification(notificationType.info)"></b2p-button>
 	</div>
 	<div *ngIf="getNotificationToShow().length !== 0" class="notification-wrapper">
 		<span *ngIf="getMinimizeButtonColor() !== 'success'" class="minimize" (click)="onMinimize()">

diff --git a/...ation-center/src/lib/components/notification-center/notification-center.component.spec.ts b/...ation-center/src/lib/components/notification-center/notification-center.component.spec.ts
@@ -15,10 +15,10 @@ describe('NotificationCenterComponent', () => {
   const defaultNotification: Notification = {
     id: '0',
     title: 'Test title',
-    type: NotificationType.Info,
+    type: NotificationType.info,
     content: 'Test Content',
     maxLength: 0,
-    animate: NotificationAnimationType.FromTop,
+    animate: NotificationAnimationType.fromTop,
     createdOn: new Date(),
     destroyedOn: new Date()
   };
@@ -60,41 +60,41 @@ describe('NotificationCenterComponent', () => {
     defaultNotification.isTouched = true;
     component.add(defaultNotification);
     fixture.detectChanges();
-    expect(component.hasTouchedNotifications(NotificationType.Info)).toBeTruthy();
+    expect(component.hasTouchedNotifications(NotificationType.info)).toBeTruthy();
   });
 
   it('should have minimized notification', () => {
     component.add(defaultNotification);
     fixture.detectChanges();
     component.onMinimize();
     fixture.detectChanges();
-    expect(component.hasMinimizedNotifications(NotificationType.Info)).toBeTruthy();
+    expect(component.hasMinimizedNotifications(NotificationType.info)).toBeTruthy();
   });
 
   it('should have minimize icon colored with info color', () => {
     component.add(defaultNotification);
     component.add({
       id: '0',
       title: 'Test title',
-      type: NotificationType.Info,
+      type: NotificationType.info,
       content: 'Test Content'
     });
     fixture.detectChanges();
-    expect(component.getMinimizeButtonColor()).toBe(Color.INFO);
+    expect(component.getMinimizeButtonColor()).toBe(Color.info);
   });
 
   it('should have minimize icon colored with black color', () => {
     component.add(defaultNotification);
     component.add({
       id: '0',
       title: 'Test title',
-      type: NotificationType.Warning,
+      type: NotificationType.warning,
       content: 'Test Content'
     });
     component.add({
       id: '0',
       title: 'Test title',
-      type: NotificationType.Error,
+      type: NotificationType.error,
       content: 'Test Content'
     });
     fixture.detectChanges();
@@ -106,26 +106,26 @@ describe('NotificationCenterComponent', () => {
     component.add({
       id: '0',
       title: 'Test title',
-      type: NotificationType.Warning,
+      type: NotificationType.warning,
       content: 'Test Content',
       isMinimized: true,
       isTouched: true
     });
     component.add({
       id: '0',
       title: 'Test title',
-      type: NotificationType.Error,
+      type: NotificationType.error,
       content: 'Test Content',
       isMinimized: true,
       isTouched: true
     });
     fixture.detectChanges();
     component.onMinimize();
     fixture.detectChanges();
-    component.onToggleNotification(NotificationType.Info);
+    component.onToggleNotification(NotificationType.info);
 
     for (const notification of component.getNotificationToShow()) {
-      expect(notification.type).toBe(NotificationType.Info);
+      expect(notification.type).toBe(NotificationType.info);
       expect(notification.isMinimized).toBeFalsy();
     }
   });

diff --git a/...tification-center/src/lib/components/notification-center/notification-center.component.ts b/...tification-center/src/lib/components/notification-center/notification-center.component.ts
@@ -30,19 +30,9 @@ import {UiButtonConfig, UI_BUTTON_ICON_STYLE, UI_BUTTON_STYLES, UI_BUTTON_THEMES
 })
 export class NotificationCenterComponent implements OnInit, OnDestroy {
 
-  @Input() set options(opt: NotificationOptions) {
-    this.usingComponentOptions = true;
-    this.attachChanges(opt);
-  }
-
   @Output() create = new EventEmitter();
   @Output() destroy = new EventEmitter();
 
-  private listener: Subscription;
-  private lastOnBottom = true;
-  private maxStack = 8;
-  private usingComponentOptions = false;
-
   // errorIcons = this.domSanitizer.bypassSecurityTrustHtml(DEFAULT_ICONS.error);
   // warningIcons = this.domSanitizer.bypassSecurityTrustHtml(DEFAULT_ICONS.warning);
   // infoIcons = this.domSanitizer.bypassSecurityTrustHtml(DEFAULT_ICONS.info);
@@ -51,41 +41,51 @@ export class NotificationCenterComponent implements OnInit, OnDestroy {
   notifications: Array<Notification> = [];
   position: Position = ['bottom', 'right'];
   maxLength = 0;
-  animate: NotificationAnimationType = NotificationAnimationType.FromRight;
+  animate: NotificationAnimationType = NotificationAnimationType.fromRight;
 
   errorButtonConfig: UiButtonConfig = {
     buttonVariant: UI_BUTTON_VARIANTS.TOGGLE,
     buttonStyle: UI_BUTTON_STYLES.SOLID,
-    buttonTheme: Color.DANGER,
+    buttonTheme: Color.danger,
     iconSVG: getIcon('error', '#ffffff'),
-    iconSVGActive: getIcon('error', this.getColorInHex(Color.DANGER)),
+    iconSVGActive: getIcon('error', this.getColorInHex(Color.danger)),
     iconStyle: UI_BUTTON_ICON_STYLE.REGULAR,
   };
 
   warningButtonConfig: UiButtonConfig = {
     buttonVariant: UI_BUTTON_VARIANTS.TOGGLE,
     buttonStyle: UI_BUTTON_STYLES.SOLID,
-    buttonTheme: Color.WARNING,
+    buttonTheme: Color.warning,
     iconSVG: getIcon('warning', '#ffffff'),
-    iconSVGActive: getIcon('warning', this.getColorInHex(Color.WARNING)),
+    iconSVGActive: getIcon('warning', this.getColorInHex(Color.warning)),
     iconStyle: UI_BUTTON_ICON_STYLE.REGULAR,
   };
 
   infoButtonConfig: UiButtonConfig = {
     buttonVariant: UI_BUTTON_VARIANTS.TOGGLE,
     buttonStyle: UI_BUTTON_STYLES.SOLID,
-    buttonTheme: Color.INFO,
+    buttonTheme: Color.info,
     iconSVG: getIcon('info', '#ffffff'),
-    iconSVGActive: getIcon('info', this.getColorInHex(Color.INFO)),
+    iconSVGActive: getIcon('info', this.getColorInHex(Color.info)),
     iconStyle: UI_BUTTON_ICON_STYLE.REGULAR,
   };
 
+  private listener: Subscription;
+  private lastOnBottom = true;
+  private maxStack = 8;
+  private usingComponentOptions = false;
+
   constructor(
     private service: NotificationCenterService,
     private domSanitizer: DomSanitizer,
     private cd: ChangeDetectorRef
   ) {}
 
+  @Input() set options(opt: NotificationOptions) {
+    this.usingComponentOptions = true;
+    this.attachChanges(opt);
+  }
+
   ngOnInit(): void {
     if (!this.usingComponentOptions) {
       this.attachChanges(
@@ -224,7 +224,7 @@ export class NotificationCenterComponent implements OnInit, OnDestroy {
 
   onMinimize(): void {
     this.notifications.forEach(notif => {
-      if (notif.type !== NotificationType.Success) {
+      if (notif.type !== NotificationType.success) {
         notif.isMinimized = true;
         notif.isTouched = true;
       }
@@ -268,46 +268,46 @@ export class NotificationCenterComponent implements OnInit, OnDestroy {
   getMinimizeButtonColor(): Color {
     const showntypes: Array<NotificationType> = this.getShownTypes();
     if (showntypes.length === 2) {
-      const indexSucess: number = showntypes.indexOf(NotificationType.Success);
+      const indexSucess: number = showntypes.indexOf(NotificationType.success);
       if (indexSucess > -1) {
         showntypes.splice(indexSucess, 1);
       }
     }
 
     if (showntypes.length === 1) {
-      if (showntypes[0] === NotificationType.Success) {
-        return Color.SUCCESS;
-      } else if (showntypes[0] === NotificationType.Info) {
-        return Color.INFO;
-      } else if (showntypes[0] === NotificationType.Warning) {
-        return Color.WARNING;
-      } else if (showntypes[0] === NotificationType.Error) {
-        return Color.DANGER;
+      if (showntypes[0] === NotificationType.success) {
+        return Color.success;
+      } else if (showntypes[0] === NotificationType.info) {
+        return Color.info;
+      } else if (showntypes[0] === NotificationType.warning) {
+        return Color.warning;
+      } else if (showntypes[0] === NotificationType.error) {
+        return Color.danger;
       }
     }
 
-    return Color.BLACK;
+    return Color.black;
   }
 
   getMinimizeIcon(): SafeHtml {
-    let upIconColor: string = Color.BLACK;
+    let upIconColor: string = Color.black;
     const showntypes: Array<NotificationType> = this.getShownTypes();
     if (showntypes.length === 2) {
-      const indexSucess: number = showntypes.indexOf(NotificationType.Success);
+      const indexSucess: number = showntypes.indexOf(NotificationType.success);
       if (indexSucess > -1) {
         showntypes.splice(indexSucess, 1);
       }
     }
 
     if (showntypes.length === 1) {
-      if (showntypes[0] === NotificationType.Success) {
-        upIconColor = Color.SUCCESS;
-      } else if (showntypes[0] === NotificationType.Info) {
-        upIconColor = Color.INFO;
-      } else if (showntypes[0] === NotificationType.Warning) {
-        upIconColor = Color.WARNING;
-      } else if (showntypes[0] === NotificationType.Error) {
-        upIconColor = Color.DANGER;
+      if (showntypes[0] === NotificationType.success) {
+        upIconColor = Color.success;
+      } else if (showntypes[0] === NotificationType.info) {
+        upIconColor = Color.info;
+      } else if (showntypes[0] === NotificationType.warning) {
+        upIconColor = Color.warning;
+      } else if (showntypes[0] === NotificationType.error) {
+        upIconColor = Color.danger;
       }
     }
     return this.domSanitizer.bypassSecurityTrustHtml(getIcon('up', this.getColorInHex(upIconColor)));