Implement primeng and showcase usage with spinner (#555)

* Implement primeng and showcase usage with spinner

The spinner is created in the ui lib to simplify usage of components in main app.

* Address sonar code smell

* Fix budgets, maximum exceeded for initial
Increased budget.

apps/meal-time/project.json

@@ -22,7 +22,13 @@
  "stylePreprocessorOptions": {
  "includePaths": ["libs/mealtime-ui-components/src/lib/tokens"]
  },
- "styles": ["apps/meal-time/src/styles.scss"],
+ "styles": [
+ "apps/meal-time/src/styles.scss",
+ "node_modules/primeflex/primeflex.css",
+ "node_modules/primeicons/primeicons.css",
+ "node_modules/primeng/resources/themes/vela-green/theme.css",
+ "node_modules/primeng/resources/primeng.min.css"
+ ],
  "scripts": [],
  "serviceWorker": true,
  "ngswConfigPath": "apps/meal-time/ngsw-config.json"
@@ -32,8 +38,8 @@
  "budgets": [
  {
  "type": "initial",
- "maximumWarning": "500kb",
- "maximumError": "1mb"
+ "maximumWarning": "4mb",
+ "maximumError": "5mb"
  },
  {
  "type": "anyComponentStyle",

apps/meal-time/src/app/app.component.ts

@@ -1,7 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { PrimeNGConfig } from 'primeng/api';
 
 @Component({
- selector: 'meal-time-root',
- template: '<router-outlet></router-outlet>',
+ selector: 'meal-time-root',
+ template: '<router-outlet></router-outlet>',
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+ constructor(private primengConfig: PrimeNGConfig) {}
+
+ ngOnInit() {
+ this.primengConfig.ripple = true;
+ }
+}

apps/meal-time/src/app/app.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HomeModule } from './home/home.module';
 import { LandingModule } from './landing/landing.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { HttpClientModule } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
@@ -25,6 +26,7 @@ import { jwtInterceptorProvider } from './auth/services/jwt-interceptor';
  LandingModule,
  HomeModule,
  BrowserModule,
+ BrowserAnimationsModule,
  AuthModule,
  FormsModule,
  ReactiveFormsModule,

apps/meal-time/src/app/landing/landing.component.html

@@ -9,4 +9,6 @@ <h1 class="title">MealTime</h1>
  (clicked)="openFeedbackLink()"
  value="Request a feature"
  ></mt-button>
+
+ <mt-spinner></mt-spinner>
 </div>

apps/meal-time/src/styles.scss

@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+@import "primeflex/primeflex.css";

libs/mealtime-ui-components/src/index.ts

@@ -1,3 +1,5 @@
 export * from './lib/button/button.component';
 export * from './lib/field/field.component';
 export * from './lib/mealtime-ui-components.module';
+
+export * from './lib/spinner/spinner.component';

libs/mealtime-ui-components/src/lib/mealtime-ui-components.module.ts

@@ -4,10 +4,18 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ButtonComponent } from './button/button.component';
 import { FieldComponent } from './field/field.component';
+import { SpinnerComponent } from './spinner/spinner.component';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+
 
 @NgModule({
- imports: [CommonModule, FontAwesomeModule, ReactiveFormsModule],
- declarations: [ButtonComponent, FieldComponent],
- exports: [ButtonComponent, FieldComponent],
+ imports: [
+ CommonModule,
+ FontAwesomeModule,
+ ReactiveFormsModule,
+ ProgressSpinnerModule,
+ ],
+ declarations: [ButtonComponent, FieldComponent, SpinnerComponent],
+ exports: [ButtonComponent, FieldComponent, SpinnerComponent],
 })
 export class MealtimeUiComponentsModule {}

libs/mealtime-ui-components/src/lib/spinner/spinner.component.html

@@ -0,0 +1 @@
+<p-progressSpinner></p-progressSpinner>

libs/mealtime-ui-components/src/lib/spinner/spinner.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpinnerComponent } from './spinner.component';
+
+describe('SpinnerComponent', () => {
+ let component: SpinnerComponent;
+ let fixture: ComponentFixture<SpinnerComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [SpinnerComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(SpinnerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

libs/mealtime-ui-components/src/lib/spinner/spinner.component.stories.ts

@@ -0,0 +1,21 @@
+import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { SpinnerComponent } from './spinner.component';
+
+export default {
+ title: 'SpinnerComponent',
+ component: SpinnerComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [],
+ })
+ ],
+} as Meta<SpinnerComponent>;
+
+const Template: Story<SpinnerComponent> = (args: SpinnerComponent) => ({
+ props: args,
+});
+
+
+export const Primary = Template.bind({});
+Primary.args = {
+}

libs/mealtime-ui-components/src/lib/spinner/spinner.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'mt-spinner',
+ templateUrl: './spinner.component.html',
+})
+export class SpinnerComponent {}

package.json

@@ -75,6 +75,9 @@
  "class-validator": "^0.14.0",
  "dotenv": "^16.0.1",
  "dotenv-cli": "^6.0.0",
+ "primeflex": "^3.3.0",
+ "primeicons": "^6.0.1",
+ "primeng": "^15.2.0",
  "passport-jwt": "^4.0.1",
  "passport-local": "^1.0.0",
  "reflect-metadata": "^0.1.13",

yarn.lock

@@ -15053,6 +15053,23 @@ pretty-hrtime@^1.0.3:
  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
  integrity sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==
 
+primeflex@^3.3.0:
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/primeflex/-/primeflex-3.3.1.tgz#361dddf6eb5db50d733e4cddd4b6e376a3d7bd68"
+ integrity sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==
+
+primeicons@^6.0.1:
+ version "6.0.1"
+ resolved "https://registry.yarnpkg.com/primeicons/-/primeicons-6.0.1.tgz#431fa7c79825934eefd62087d8e1faa6a9e376ad"
+ integrity sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==
+
+primeng@^15.2.0:
+ version "15.4.1"
+ resolved "https://registry.yarnpkg.com/primeng/-/primeng-15.4.1.tgz#a2a3eae9b557ba43cdedd32e8ec71d018f543b4c"
+ integrity sha512-j2unOQZk6756l6SgkzcmlHF6JlawF0bIjKTgAPWwT+S5RYeWEjpCPg/ABV8TylwW7CTNQX2oCHbyqCAuhtr++w==
+ dependencies:
+ tslib "^2.3.0"
+
 prisma@^4.13.0:
  version "4.13.0"
  resolved "https://registry.yarnpkg.com/prisma/-/prisma-4.13.0.tgz#0b83f40acf50cd47d7463a135c4e9b275713e602"