storybook(ui): UI Documented in Storybook

* added a Page Not Found component for wildcard routes

README.md

@@ -73,10 +73,11 @@
 This is an implementation of a Filmpire App using [The TMDB API](https://developer.themoviedb.org/docs) using:
 
 - Nx Workspace
-- Angular v15
+- Angular v16
 - Angular Material
 - NgRx
 - Tailwind CSS
+- Storybook
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 

apps/filmpire/src/app/app.routes.ts

@@ -3,6 +3,7 @@ import { AccountComponent } from './account/account.component';
 import { MediaInfoComponent } from './media-info/media-info.component';
 import { MediaListComponent } from './media-list/media-list.component';
 import { PersonInfoComponent } from './person-info/person-info.component';
+import { PageNotFoundComponent } from 'libs/ui/src/lib/page-not-found/page-not-found.component';
 
 export const appRoutes: Route[] = [
   {
@@ -30,5 +31,5 @@ export const appRoutes: Route[] = [
     component: AccountComponent,
   },
   { path: '', redirectTo: 'category/movie/popular', pathMatch: 'full' },
-  // { path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page
+  { path: '**', component: PageNotFoundComponent }, // Wildcard route for a 404 page
 ];

libs/ui/.storybook/main.js

@@ -1,6 +1,6 @@
 module.exports = {
   stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials'],
+  addons: ['@storybook/addon-interactions', '@storybook/addon-essentials'],
   staticDirs: [{ from: '../src/assets', to: '/assets' }],
 
   framework: {

libs/ui/.storybook/preview.js

@@ -1,12 +1,12 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { applicationConfig } from '@storybook/angular';
 
 export const decorators = [
   applicationConfig({
-    imports: [ReactiveFormsModule, RouterModule, HttpClientTestingModule],
-    providers: [provideAnimations()],
+    imports: [ReactiveFormsModule, RouterModule],
+    providers: [provideAnimations(), provideHttpClient()],
   }),
 ];

libs/ui/src/lib/autocomplete-results/autocomplete-results.component.spec.ts

@@ -1,13 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AutocompleteResultsComponent } from './autocomplete-results.component';
+import { MaterialModule } from '@ng-filmpire/material';
 
 describe('AutocompleteResultsComponent', () => {
   let component: AutocompleteResultsComponent;
   let fixture: ComponentFixture<AutocompleteResultsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [MaterialModule],
       declarations: [AutocompleteResultsComponent],
     }).compileComponents();
 

libs/ui/src/lib/autocomplete-results/autocomplete-results.component.stories.ts

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { AutocompleteResultsComponent } from './autocomplete-results.component';
+
+const meta: Meta<AutocompleteResultsComponent> = {
+  component: AutocompleteResultsComponent,
+  title: 'AutocompleteResultsComponent',
+};
+export default meta;
+type Story = StoryObj<AutocompleteResultsComponent>;
+
+export const Movie: Story = {
+  args: {
+    result: {
+      adult: false,
+      backdrop_path: '/rLb2cwF3Pazuxaj0sRXQ037tGI1.jpg',
+      id: 872585,
+      title: 'Oppenheimer',
+      original_language: 'en',
+      original_title: 'Oppenheimer',
+      overview:
+        'The story of J. Robert Oppenheimer’s role in the development of the atomic bomb during World War II.',
+      poster_path: '/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg',
+      media_type: 'movie',
+      genre_ids: [18, 36],
+      popularity: 704.491,
+      release_date: new Date('2023-07-19'),
+      video: false,
+      vote_average: 8.241,
+      vote_count: 4124,
+    },
+  },
+};
+
+export const TvShow: Story = {
+  args: {
+    result: {
+      adult: false,
+      backdrop_path: '/foGkPxpw9h8zln81j63mix5B7m8.jpg',
+      id: 71912,
+      name: 'The Witcher',
+      original_language: 'en',
+      original_name: 'The Witcher',
+      overview:
+        'Geralt of Rivia, a mutated monster-hunter for hire, journeys toward his destiny in a turbulent world where people often prove more wicked than beasts.',
+      poster_path: '/cZ0d3rtvXPVvuiX22sP79K3Hmjz.jpg',
+      media_type: 'tv',
+      genre_ids: [18, 10759, 10765],
+      popularity: 274.113,
+      first_air_date: new Date('2019-12-20'),
+      vote_average: 8.122,
+      vote_count: 5240,
+      origin_country: ['US'],
+    },
+  },
+};
+
+export const Person: Story = {
+  args: {
+    result: {
+      adult: false,
+      id: 73968,
+      name: 'Henry Cavill',
+      original_name: 'Henry Cavill',
+      media_type: 'person',
+      popularity: 59.828,
+      gender: 2,
+      known_for_department: 'Acting',
+      profile_path: '/iWdKjMry5Pt7vmxU7bmOQsIUyHa.jpg',
+      known_for: [
+        {
+          adult: false,
+          backdrop_path: '/69EFgWWPFWbRNHmQgYdSnyJ94Ge.jpg',
+          id: 49521,
+          title: 'Man of Steel',
+          original_language: 'en',
+          original_title: 'Man of Steel',
+          overview:
+            'A young boy learns that he has extraordinary powers and is not of this earth. As a young man, he journeys to discover where he came from and what he was sent here to do. But the hero in him must emerge if he is to save the world from annihilation and become the symbol of hope for all mankind.',
+          poster_path: '/dksTL9NXc3GqPBRHYHcy1aIwjS.jpg',
+          media_type: 'movie',
+          genre_ids: [28, 12, 878],
+          popularity: 48.081,
+          release_date: new Date('2013-06-12'),
+          video: false,
+          vote_average: 6.616,
+          vote_count: 14391,
+        },
+        {
+          adult: false,
+          backdrop_path: '/5fX1oSGuYdKgwWmUTAN5MNSQGzr.jpg',
+          id: 209112,
+          title: 'Batman v Superman: Dawn of Justice',
+          original_language: 'en',
+          original_title: 'Batman v Superman: Dawn of Justice',
+          overview:
+            'Fearing the actions of a god-like Super Hero left unchecked, Gotham City’s own formidable, forceful vigilante takes on Metropolis’s most revered, modern-day savior, while the world wrestles with what sort of hero it really needs. And with Batman and Superman at war with one another, a new threat quickly arises, putting mankind in greater danger than it’s ever known before.',
+          poster_path: '/5UsK3grJvtQrtzEgqNlDljJW96w.jpg',
+          media_type: 'movie',
+          genre_ids: [28, 12, 14],
+          popularity: 77.355,
+          release_date: new Date('2016-03-23'),
+          video: false,
+          vote_average: 5.955,
+          vote_count: 17163,
+        },
+        {
+          adult: false,
+          backdrop_path: '/2nyaeISu2xIxIgZYNpX4UayY8PN.jpg',
+          id: 141052,
+          title: 'Justice League',
+          original_language: 'en',
+          original_title: 'Justice League',
+          overview:
+            "Fuelled by his restored faith in humanity and inspired by Superman's selfless act, Bruce Wayne and Diana Prince assemble a team of metahumans consisting of Barry Allen, Arthur Curry and Victor Stone to face the catastrophic threat of Steppenwolf and the Parademons who are on the hunt for three Mother Boxes on Earth.",
+          poster_path: '/eifGNCSDuxJeS1loAXil5bIGgvC.jpg',
+          media_type: 'movie',
+          genre_ids: [28, 12, 878],
+          popularity: 64.035,
+          release_date: new Date('2017-11-15'),
+          video: false,
+          vote_average: 6.095,
+          vote_count: 12316,
+        },
+      ],
+    },
+  },
+};

libs/ui/src/lib/featured-media-slider/featured-media-slider.component.html

@@ -57,12 +57,9 @@ <h5 class="text-xl font-medium text-white">
       <button
         mat-mini-fab
         class="play-slides bg-blue-500 dark:bg-red-600"
+        aria-label="Play Carousel"
         (click)="togglePlayPause()"
       >
-        <!-- <span
-          class="far"
-          [class]="(isPlaying$ | async) ? 'fa-pause-circle' : 'fa-play-circle'"
-        ></span> -->
         <mat-icon>{{ (isPlaying$ | async) ? 'pause' : 'play_arrow' }}</mat-icon>
       </button>
     </div>

libs/ui/src/lib/media-card-item/media-card-item.component.html

@@ -25,7 +25,7 @@
       <mat-card-content
         class="mat-card-content flex flex-col flex-nowrap items-center justify-center"
       >
-        <p class="mt-4 flex w-full justify-between self-start px-4">
+        <div class="mt-4 flex w-full justify-between self-start px-4">
           <span class="text-gray-500">{{
             (isMovie(media) ? media.release_date : media.first_air_date)
               | date : 'yyyy'
@@ -34,10 +34,10 @@
             class="mr-2 rounded bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-300"
             >{{ (isMovie(media) ? 'movie' : 'tv') | uppercase }}</span
           >
-        </p>
+        </div>
         <h5
           #mediaTitle
-          class="mb-0 mt-3 w-56 overflow-hidden text-ellipsis whitespace-nowrap text-center text-xl font-medium"
+          class="mb-0 mt-3 w-56 overflow-hidden text-ellipsis whitespace-nowrap px-4 text-center text-xl font-medium"
           [matTooltip]="isMovie(media) ? media.title : media.name"
           [matTooltipDisabled]="
             mediaTitle.scrollWidth <= mediaTitle.clientWidth

libs/ui/src/lib/media-card-item/media-card-item.component.stories.ts

@@ -48,7 +48,7 @@ export const TV = {
   },
 };
 
-export const image_loading = {
+export const ImageLoading = {
   args: {
     media: {
       name: 'Loki',
@@ -62,7 +62,7 @@ export const image_loading = {
   },
 };
 
-export const fallback_image = {
+export const FallbackImage = {
   args: {
     media: {
       name: 'Loki',

libs/ui/src/lib/media-videos-dialog/media-videos-dialog.component.ts

@@ -28,7 +28,7 @@ export class MediaVideosDialogComponent implements OnInit {
   mapVideoToDictionary(videos: Video[]): Record<string, Video[]> {
     const videoDictionary: Record<string, Video[]> = {};
 
-    for (const video of videos) {
+    videos.map((video) => {
       if (!videoDictionary[video.type]) {
         // If the type doesn't exist as a key, create an empty array for it
         videoDictionary[video.type] = [];
@@ -38,7 +38,7 @@ export class MediaVideosDialogComponent implements OnInit {
 
       // Push the video into the corresponding type array
       videoDictionary[video.type].push(video);
-    }
+    });
 
     return videoDictionary;
   }

libs/ui/src/lib/page-not-found/page-not-found.component.html

@@ -0,0 +1,11 @@
+<section class="flex h-screen items-center justify-center dark:text-gray-300">
+  <div class="text-center">
+    <h1 class="mb-4 text-4xl font-bold">Oops! Page Not Found</h1>
+    <p class="mb-8 text-lg">
+      The page you are looking for might be in another scene.
+    </p>
+    <a routerLink="/" class="text-blue-500 hover:underline dark:text-red-600"
+      >Go back to Homepage</a
+    >
+  </div>
+</section>

libs/ui/src/lib/page-not-found/page-not-found.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PageNotFoundComponent]
+    });
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/ui/src/lib/page-not-found/page-not-found.component.stories.ts

@@ -0,0 +1,19 @@
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { PageNotFoundComponent } from './page-not-found.component';
+import { MaterialModule } from '@ng-filmpire/material';
+
+const meta: Meta<PageNotFoundComponent> = {
+  component: PageNotFoundComponent,
+  title: 'PageNotFoundComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [MaterialModule],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<PageNotFoundComponent>;
+
+export const Primary: Story = {
+  args: {},
+};

libs/ui/src/lib/page-not-found/page-not-found.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ng-filmpire-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.scss']
+})
+export class PageNotFoundComponent {
+
+}

libs/ui/src/lib/ui.module.ts

@@ -10,6 +10,7 @@ import { MediaVideosDialogComponent } from './media-videos-dialog/media-videos-d
 import { NavbarComponent } from './navbar/navbar.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { AutocompleteResultsComponent } from './autocomplete-results/autocomplete-results.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 @NgModule({
   imports: [
     CommonModule,
@@ -26,13 +27,15 @@ import { AutocompleteResultsComponent } from './autocomplete-results/autocomplet
     MediaCardItemComponent,
     MediaVideosDialogComponent,
     AutocompleteResultsComponent,
+    PageNotFoundComponent,
   ],
   exports: [
     NavbarComponent,
     SidebarComponent,
     MediaCardItemComponent,
     FeaturedMediaSliderComponent,
     MediaVideosDialogComponent,
+    PageNotFoundComponent,
   ],
 })
 export class UiModule {}