import { Component, Injectable, importProvidersFrom } from "@angular/core";
import { RouterModule } from "@angular/router";
import {
Meta,
Story,
moduleMetadata,
componentWrapperDecorator,
applicationConfig,
} from "@storybook/angular";
import { BehaviorSubject, combineLatest, map } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
import { StateService } from "@bitwarden/common/abstractions/state.service";
import {
AvatarModule,
BreadcrumbsModule,
ButtonModule,
IconButtonModule,
IconModule,
MenuModule,
NavigationModule,
TabsModule,
TypographyModule,
InputModule,
} from "@bitwarden/components";
import { PreloadedEnglishI18nModule } from "@bitwarden/web-vault/app/tests/preloaded-english-i18n.module";
import { HeaderComponent } from "./header.component";
@Injectable({
providedIn: "root",
})
class MockStateService {
activeAccount$ = new BehaviorSubject("1").asObservable();
accounts$ = new BehaviorSubject({ "1": { profile: { name: "Foo" } } }).asObservable();
}
class MockMessagingService implements MessagingService {
send(subscriber: string, arg?: any) {
alert(subscriber);
}
}
@Component({
selector: "product-switcher",
template: ``,
})
class MockProductSwitcher {}
@Component({
selector: "dynamic-avatar",
template: ``,
})
class MockDynamicAvatar {
protected name$ = combineLatest([
this.stateService.accounts$,
this.stateService.activeAccount$,
]).pipe(
map(
([accounts, activeAccount]) => accounts[activeAccount as keyof typeof accounts].profile.name
)
);
constructor(private stateService: MockStateService) {}
}
export default {
title: "Web/Header",
component: HeaderComponent,
decorators: [
componentWrapperDecorator(
(story) => `${story}
`
),
moduleMetadata({
imports: [
JslibModule,
RouterModule,
AvatarModule,
BreadcrumbsModule,
ButtonModule,
IconButtonModule,
IconModule,
InputModule,
MenuModule,
TabsModule,
TypographyModule,
NavigationModule,
],
declarations: [HeaderComponent, MockProductSwitcher, MockDynamicAvatar],
providers: [
{ provide: StateService, useClass: MockStateService },
{
provide: MessagingService,
useFactory: () => {
return new MockMessagingService();
},
},
],
}),
applicationConfig({
providers: [
importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
importProvidersFrom(PreloadedEnglishI18nModule),
],
}),
],
} as Meta;
export const KitchenSink: Story = (args) => ({
props: args,
template: `
Foo
Bar
Foo
Bar
`,
});
export const Basic: Story = (args) => ({
props: args,
template: `
`,
});
export const WithLongTitle: Story = (args) => ({
props: args,
template: `
`,
});
export const WithBreadcrumbs: Story = (args) => ({
props: args,
template: `
Foo
Bar
`,
});
export const WithSearch: Story = (args) => ({
props: args,
template: `
`,
});
export const WithSecondaryContent: Story = (args) => ({
props: args,
template: `
`,
});
export const WithTabs: Story = (args) => ({
props: args,
template: `
Foo
Bar
`,
});
export const WithCustomTitleComponent: Story = (args) => ({
props: args,
template: `
Bitwarden
`,
});