fix(story):image should be displayed on login page

Author: yeshamavani

projects/arc-lib/.storybook/main.ts

@@ -7,7 +7,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
   ],
-  
+  staticDirs: ['../src/lib/assets'],
   framework: {
     name: '@storybook/angular',
     options: {},
@@ -17,6 +17,3 @@ const config: StorybookConfig = {
   },
 };
 export default config;
-
-
-

projects/arc-lib/documentation.json

@@ -11,11 +11,9 @@ import {ThemeModule} from '@project-lib/theme/theme.module';
 import {AuthRoutingModule} from './auth-routing.module';
 import {AuthComponent} from './auth.component';
 import {LoginComponent} from './login/login.component';
-import { HomePageComponent } from './home-page/home-page.component';
-import { LoginPageComponent } from './login-page/login-page.component';
 
 @NgModule({
-  declarations: [LoginComponent, AuthComponent, HomePageComponent, LoginPageComponent],
+  declarations: [LoginComponent, AuthComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     CommonModule,

projects/arc-lib/src/lib/components/auth/auth.module.ts

@@ -1,7 +1,7 @@
 <nb-card class="h-100">
   <nb-card-body>
     <div class="align-center logo">
-      <img width="20%" src= "{{image}}" alt="logo" draggable="false"
+      <img width="20%" [src]= "imageUrl" [alt]="altText" draggable="false"
         height="126px" width="120px" />
 
       <!-- src="baseHref + 'images/auth/angular.png'"  -->

projects/arc-lib/src/lib/components/auth/login/login.component.html

@@ -4,10 +4,8 @@ import {ActivatedRoute} from '@angular/router';
 import {AuthService} from '@project-lib/core/auth';
 import {RouteComponentBaseDirective} from '@project-lib/core/route-component-base';
 
-// import { APP_BASE_HREF } from '@angular/common';
-
 @Component({
-  selector: 'login',
+  selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss'],
 })
@@ -16,14 +14,11 @@ export class LoginComponent extends RouteComponentBaseDirective {
     override readonly route: ActivatedRoute,
     override readonly location: Location,
     private readonly authService: AuthService,
-  //   @Inject(APP_BASE_HREF)
-  //   private baseHref: string
   ) {
     super(route, location);
   }
- image="../../../assets/images/auth/angular.png"
-//  ""
-//  projects/arc-lib/src/lib/assets/images/auth/angular.png
+  imageUrl = '../../../assets/images/auth/angular.png';
+  altText = 'logo';
   loginViaGoogle() {
     this.authService.loginViaGoogle();
   }

projects/arc-lib/src/lib/components/auth/login/login.component.ts

@@ -1,47 +1,79 @@
-import { moduleMetadata } from '@storybook/angular';
-
-import { AuthService } from '@project-lib/core/auth';
-import { LoginComponent } from '@project-lib/components/index';
-import { ActivatedRoute } from '@angular/router';
-import { ThemeModule } from '@project-lib/theme/theme.module';
-import { NbThemeModule } from '@nebular/theme';
-
-
-export default {
-    title: 'Components/Login',
-    component: LoginComponent,
-    decorators: [
-      moduleMetadata({
-     imports:[ThemeModule,
-        NbThemeModule.forRoot()],
-        providers: [
-          {
-            provide: ActivatedRoute,
-            useValue: {
-              /* Mock ActivatedRoute data here if needed */
-            },
+import {Meta, StoryObj, moduleMetadata} from '@storybook/angular';
+import {AuthService} from '@project-lib/core/auth';
+import {LoginComponent} from '@project-lib/components/index';
+import {ActivatedRoute} from '@angular/router';
+import {ThemeModule} from '@project-lib/theme/theme.module';
+import {NbThemeModule} from '@nebular/theme';
+
+const meta = {
+  title: 'Components/Login',
+  component: LoginComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ThemeModule, NbThemeModule.forRoot()],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            /* Mock ActivatedRoute data here if needed */
           },
-          {
-            provide: Location,
-            useValue: {
-              /* Mock Location methods here if needed */
-            },
+        },
+        {
+          provide: Location,
+          useValue: {
+            /* Mock Location methods here if needed */
           },
-          {
-            provide: AuthService,
-            useValue: {
-              /* Mock AuthService methods here if needed */
-            },
+        },
+        {
+          provide: AuthService,
+          useValue: {
+            /* Mock AuthService methods here if needed */
           },
-        ],
-      }),
-    ],
-  };
-
-  const Template = (args: LoginComponent) => ({
-    component: LoginComponent,
-    props: args,
-  });
-  
-  export const Default = Template.bind({});
-  Default.args = {};
+        },
+      ],
+    }),
+  ],
+} as Meta;
+export default meta;
+
+// // const Template: Story<LoginComponent> = (args: LoginComponent) => ({
+// //   component: LoginComponent,
+// //   props: args,
+// //   // template: `<app-login [image]="${image}"></app-login>`,
+// // });
+
+// // export const Default = Template.bind({});
+// // Default.args = {
+// //   image: '../../lib/assets/images/auth/angular.png',
+// //   //image: '../assets/angular.png',
+// // };
+
+// const meta: Meta<LoginComponent> = {
+//   component: LoginComponent,
+// };
+
+// export default meta;
+// type Story = StoryObj<typeof meta>;
+
+// // Assume image.png is located in the "public" directory.
+// export const WithAnImage: Story = {
+//   render: () => ({
+//     props: {
+//       src: '/images/auth/angular.png',
+//       alt: 'my image',
+//     },
+//   }),
+// };
+
+/// from official docs
+type Story = StoryObj<typeof meta>;
+
+//append the path of image relative to the staticdir in main.ts
+export const WithAnImage: Story = {
+  render: () => ({
+    props: {
+      imageUrl: '/images/auth/angular.png',
+      altText: 'my image',
+    },
+  }),
+};