diff --git a/apps/meal-time/project.json b/apps/meal-time/project.json index 229228cc..1cc78cc6 100644 --- a/apps/meal-time/project.json +++ b/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", diff --git a/apps/meal-time/src/app/app.component.ts b/apps/meal-time/src/app/app.component.ts index 79207b49..1b2dfa5d 100644 --- a/apps/meal-time/src/app/app.component.ts +++ b/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: '', + selector: 'meal-time-root', + template: '', }) -export class AppComponent {} +export class AppComponent implements OnInit { + constructor(private primengConfig: PrimeNGConfig) {} + + ngOnInit() { + this.primengConfig.ripple = true; + } +} diff --git a/apps/meal-time/src/app/app.module.ts b/apps/meal-time/src/app/app.module.ts index ab5cc573..d133b8cc 100644 --- a/apps/meal-time/src/app/app.module.ts +++ b/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, diff --git a/apps/meal-time/src/app/landing/landing.component.html b/apps/meal-time/src/app/landing/landing.component.html index bba89edd..876a261c 100644 --- a/apps/meal-time/src/app/landing/landing.component.html +++ b/apps/meal-time/src/app/landing/landing.component.html @@ -9,4 +9,6 @@

MealTime

(clicked)="openFeedbackLink()" value="Request a feature" > + + diff --git a/apps/meal-time/src/styles.scss b/apps/meal-time/src/styles.scss index 90d4ee00..8b957e39 100644 --- a/apps/meal-time/src/styles.scss +++ b/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"; \ No newline at end of file diff --git a/libs/mealtime-ui-components/src/index.ts b/libs/mealtime-ui-components/src/index.ts index 7a1afc34..4ace3dc9 100644 --- a/libs/mealtime-ui-components/src/index.ts +++ b/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'; diff --git a/libs/mealtime-ui-components/src/lib/mealtime-ui-components.module.ts b/libs/mealtime-ui-components/src/lib/mealtime-ui-components.module.ts index c3beb71c..5f633ab0 100644 --- a/libs/mealtime-ui-components/src/lib/mealtime-ui-components.module.ts +++ b/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 {} diff --git a/libs/mealtime-ui-components/src/lib/spinner/spinner.component.html b/libs/mealtime-ui-components/src/lib/spinner/spinner.component.html new file mode 100644 index 00000000..190926dd --- /dev/null +++ b/libs/mealtime-ui-components/src/lib/spinner/spinner.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/mealtime-ui-components/src/lib/spinner/spinner.component.spec.ts b/libs/mealtime-ui-components/src/lib/spinner/spinner.component.spec.ts new file mode 100644 index 00000000..4f9ccdd4 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SpinnerComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(SpinnerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/mealtime-ui-components/src/lib/spinner/spinner.component.stories.ts b/libs/mealtime-ui-components/src/lib/spinner/spinner.component.stories.ts new file mode 100644 index 00000000..3994e8c2 --- /dev/null +++ b/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; + +const Template: Story = (args: SpinnerComponent) => ({ + props: args, +}); + + +export const Primary = Template.bind({}); +Primary.args = { +} \ No newline at end of file diff --git a/libs/mealtime-ui-components/src/lib/spinner/spinner.component.ts b/libs/mealtime-ui-components/src/lib/spinner/spinner.component.ts new file mode 100644 index 00000000..61a4ab4c --- /dev/null +++ b/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 {} diff --git a/package.json b/package.json index 277765d2..1b07b6a0 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 8fa3643a..56ce09e5 100644 --- a/yarn.lock +++ b/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"