[HIMA-111] UI library

- Added folder libs to root of project where our libraries will be
- Moved search-input and card components to UI library
- Updated FE to use new UI library

angular.json

@@ -4,32 +4,32 @@
   "newProjectRoot": "apps",
   "projects": {
     "cat-service": {
-      "root": "projects/cat-service",
-      "sourceRoot": "projects/cat-service/src",
+      "root": "libs/cat-service",
+      "sourceRoot": "libs/cat-service/src",
       "projectType": "library",
       "prefix": "lib",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
           "options": {
-            "tsConfig": "projects/cat-service/tsconfig.lib.json",
-            "project": "projects/cat-service/ng-package.json"
+            "tsConfig": "libs/cat-service/tsconfig.lib.json",
+            "project": "libs/cat-service/ng-package.json"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/cat-service/src/test.ts",
-            "tsConfig": "projects/cat-service/tsconfig.spec.json",
-            "karmaConfig": "projects/cat-service/karma.conf.js"
+            "main": "libs/cat-service/src/test.ts",
+            "tsConfig": "libs/cat-service/tsconfig.spec.json",
+            "karmaConfig": "libs/cat-service/karma.conf.js"
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "projects/cat-service/tsconfig.lib.json",
-              "projects/cat-service/tsconfig.spec.json"
+              "libs/cat-service/tsconfig.lib.json",
+              "libs/cat-service/tsconfig.spec.json"
             ],
             "exclude": ["**/node_modules/**"]
           }
@@ -37,32 +37,65 @@
       }
     },
     "feed-service": {
-      "root": "projects/feed-service",
-      "sourceRoot": "projects/feed-service/src",
+      "root": "libs/feed-service",
+      "sourceRoot": "libs/feed-service/src",
       "projectType": "library",
       "prefix": "lib",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
           "options": {
-            "tsConfig": "projects/feed-service/tsconfig.lib.json",
-            "project": "projects/feed-service/ng-package.json"
+            "tsConfig": "libs/feed-service/tsconfig.lib.json",
+            "project": "libs/feed-service/ng-package.json"
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/feed-service/src/test.ts",
-            "tsConfig": "projects/feed-service/tsconfig.spec.json",
-            "karmaConfig": "projects/feed-service/karma.conf.js"
+            "main": "libs/feed-service/src/test.ts",
+            "tsConfig": "libs/feed-service/tsconfig.spec.json",
+            "karmaConfig": "libs/feed-service/karma.conf.js"
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "projects/feed-service/tsconfig.lib.json",
-              "projects/feed-service/tsconfig.spec.json"
+              "libs/feed-service/tsconfig.lib.json",
+              "libs/feed-service/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "ui": {
+      "root": "libs/ui",
+      "sourceRoot": "libs/ui",
+      "projectType": "library",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "libs/ui/tsconfig.lib.json",
+            "project": "libs/ui/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "libs/ui/src/test.ts",
+            "tsConfig": "libs/ui/tsconfig.spec.json",
+            "karmaConfig": "libs/ui/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/ui/tsconfig.lib.json",
+              "libs/ui/tsconfig.spec.json"
             ],
             "exclude": ["**/node_modules/**"]
           }

apps/sales/src/app/app.module.ts

@@ -39,6 +39,7 @@ import { NotifierState } from './core/store/state/notifier.state';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 
+
 const states = [
   FeedState,
   ProcessState,
@@ -78,7 +79,6 @@ export function _feedServiceEndpointProviderFactory(conf: ConfigService) {
     BrowserAnimationsModule,
     AppRoutingModule,
     ComponentsModule,
-    SharedModule,
     HttpClientModule,
     NgxsModule.forRoot(states, { developmentMode: !environment.production }),
     NgxsReduxDevtoolsPluginModule.forRoot(),

apps/sales/src/app/modules/article-search/article-search.module.ts

@@ -9,6 +9,7 @@ import { ArticleSearchComponent } from './article-search.component';
 import { FilterComponent } from './components/filter/filter.component';
 import { FilterItemComponent } from './components/filter-item/filter-item.component';
 import { SelectedFilterItemComponent } from './components/selected-filter-item/selected-filter-item.component';
+import { CardModule, SearchInputModule } from '@libs/ui';
 
 @NgModule({
   declarations: [
@@ -23,6 +24,13 @@ import { SelectedFilterItemComponent } from './components/selected-filter-item/s
     FilterComponent,
     SelectedFilterItemComponent
   ],
-  imports: [CommonModule, FormsModule, SharedModule, BarcodeSearchModule]
+  imports: [
+    CommonModule,
+    FormsModule,
+    SharedModule,
+    BarcodeSearchModule,
+    CardModule,
+    SearchInputModule
+  ]
 })
 export class ArticleSearchModule {}

apps/sales/src/app/modules/article-search/components/text-search/text-search.component.ts

@@ -1,4 +1,4 @@
-import { SearchComponent } from './../../../../shared/components/search-input/search-input.component';
+import { SearchInputComponent } from '@libs/ui';
 import { Observable } from 'rxjs';
 import { Breadcrumb } from 'apps/sales/src/app/core/models/breadcrumb.model';
 import { Filter } from 'apps/sales/src/app/core/models/filter.model';
@@ -68,7 +68,7 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
   @Input()
   searchParams = '';
 
-  @ViewChild('searchInput') searchInput: SearchComponent;
+  @ViewChild('searchInput') searchInput: SearchInputComponent;
 
   constructor(
     private store: Store,

apps/sales/src/app/modules/barcode-search/barcode-search.module.ts

@@ -10,6 +10,7 @@ import { BarcodeScannerScanditComponent } from './components/barcode-scanner-sca
 import { BarcodeScannerComponent } from './components/barcode-scanner/barcode-scanner.component';
 import { CameraErrorHandler } from './camera-error.handler';
 import { RecommendationsdModule } from '../recommendations/recommendations.module';
+import { CardModule } from '@libs/ui';
 
 const licenseKey =
   // tslint:disable-next-line: max-line-length
@@ -22,7 +23,8 @@ const engineLocation = 'assets/vendor/scandit/';
     CommonModule,
     ScanditSdkModule.forRoot(licenseKey, engineLocation),
     SharedModule,
-    RecommendationsdModule
+    RecommendationsdModule,
+    CardModule
   ],
   exports: [BarcodeSearchComponent],
   declarations: [

apps/sales/src/app/modules/cart/cart-module.ts

@@ -7,6 +7,7 @@ import { CartReviewComponent } from './components/cart-review/cart-review.compon
 import { PayMethodComponent } from './components/pay-method/pay-method.component';
 import { CartConfirmationComponent } from './components/cart-confirmation/cart-confirmation.component';
 import { RouterModule } from '@angular/router';
+import { CardModule } from '@libs/ui';
 
 @NgModule({
   declarations: [
@@ -20,7 +21,8 @@ import { RouterModule } from '@angular/router';
     FormsModule,
     ReactiveFormsModule,
     SharedModule,
-    RouterModule
+    RouterModule,
+    CardModule
   ]
 })
 export class CartModule {}

apps/sales/src/app/modules/components.module.ts

@@ -1,4 +1,4 @@
-import { CardComponent } from './../shared/components/card/card.component';
+// import { CardComponent } from './../shared/components/card/card.component';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { AppRoutingModule } from 'apps/sales/src/app/app-routing.module';
 import { HeaderComponent } from 'apps/sales/src/app/components/header/header.component';
@@ -40,7 +40,7 @@ import { RecommendationsdModule } from './recommendations/recommendations.module
     ProductCardComponent,
     ProductDetailsComponent,
     CheckoutComponent,
-    ProductCardLoadingComponent
+    ProductCardLoadingComponent,
   ],
   imports: [
     CommonModule,
@@ -56,7 +56,7 @@ import { RecommendationsdModule } from './recommendations/recommendations.module
     CustomerSearchModule,
     CartModule,
     ProcessModule,
-    RecommendationsdModule
+    RecommendationsdModule,
   ],
   exports: [
     HeaderComponent,
@@ -66,7 +66,7 @@ import { RecommendationsdModule } from './recommendations/recommendations.module
     MenuComponent,
     BreadcrumbsComponent,
     InfiniteScrollModule,
-    ProcessModule
+    ProcessModule,
   ]
 })
 export class ComponentsModule {}

apps/sales/src/app/modules/customer-search/components/search-customer-card/search-customer-card.component.ts

@@ -1,4 +1,4 @@
-import { SearchComponent } from './../../../../shared/components/search-input/search-input.component';
+import { SearchInputComponent } from '@libs/ui';
 import {
   Component,
   OnInit,
@@ -42,7 +42,7 @@ export class SearchCustomerCardComponent implements OnInit, AfterViewInit {
   searchError = '';
 
   @Input() searchParams = '';
-  @ViewChild('searchInput') searchInput: SearchComponent;
+  @ViewChild('searchInput') searchInput: SearchInputComponent;
 
   constructor(private store: Store, private router: Router) {}
 

apps/sales/src/app/modules/customer-search/customer-search.module.ts

@@ -13,6 +13,7 @@ import { SearchCustomerResultComponent } from './components/search-customer-resu
 import { EditBillingAddressComponent } from './pages/edit-billing-address/edit-billing-address.component';
 import { NewsletterSignupModule } from '../newsletter-signup/newsletter-signup.module';
 import { RouterModule } from '@angular/router';
+import { CardModule, SearchInputModule } from '@libs/ui';
 
 @NgModule({
   declarations: [
@@ -39,7 +40,9 @@ import { RouterModule } from '@angular/router';
     RouterModule,
     ReactiveFormsModule,
     SharedModule,
-    NewsletterSignupModule
+    NewsletterSignupModule,
+    CardModule,
+    SearchInputModule
   ]
 })
 export class CustomerSearchModule {}

apps/sales/src/app/modules/debug/debug.module.ts

@@ -9,6 +9,7 @@ import { NewsletterDebugComponent } from './newsletter-debug/newsletter-debug.co
 import { NewsletterSignupModule } from '../newsletter-signup/newsletter-signup.module';
 import { RecommendationDebugComponent } from './recommendations-animation/recommendations-animation.component';
 import { LoadingAnimationComponent } from './loading-animation/loading-animation.component';
+import { CardModule } from '@libs/ui';
 
 const routes: Routes = [
   {
@@ -36,7 +37,8 @@ const routes: Routes = [
     SharedModule,
     RouterModule.forChild(routes),
     NewsletterSignupModule,
-    CustomerSearchModule
+    CustomerSearchModule,
+    CardModule
   ],
   exports: [],
   declarations: [

apps/sales/src/app/shared/components/card/card.component.scss

@@ -1,12 +0,0 @@
-@import '../../../../assets/scss/variables';
-
-:host {
-  display: block;
-  position: relative;
-  background-color: white;
-  margin-top: 5px;
-  -moz-box-shadow: 0 0 3px $hima-content-shadow-color;
-  -webkit-box-shadow: 0 0 3px $hima-content-shadow-color;
-  box-shadow: 0 0 3px $hima-content-shadow-color;
-  border-radius: 4px;
-}

apps/sales/src/app/shared/shared.module.ts

@@ -1,17 +1,13 @@
 import { FormsModule } from '@angular/forms';
-import { CardComponent } from './components/card/card.component';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { LoadingComponent } from './components/loading/loading.component';
 import { ModalComponent } from './components/modal/modal.component';
-import { SearchComponent } from './components/search-input/search-input.component';
 import { BackArrowComponent } from './components/back-arrow/back-arrow.component';
 
 const components = [
-  CardComponent,
   LoadingComponent,
   ModalComponent,
-  SearchComponent,
   BackArrowComponent
 ];
 @NgModule({