import { CommonModule } from "@angular/common";
import { Component, importProvidersFrom } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import {
AvatarModule,
ButtonModule,
I18nMockService,
IconButtonModule,
} from "@bitwarden/components";
import { PopupFooterComponent } from "./popup-footer.component";
import { PopupHeaderComponent } from "./popup-header.component";
import { PopupPageComponent } from "./popup-page.component";
import { PopupTabNavigationComponent } from "./popup-tab-navigation.component";
@Component({
selector: "extension-container",
template: `
`,
standalone: true,
})
class ExtensionContainerComponent {}
@Component({
selector: "vault-placeholder",
template: `
vault item
vault item
vault item
vault item
vault item
vault item
vault item
vault item
vault item
vault item
vault item
vault item
vault item last item
`,
standalone: true,
})
class VaultComponent {}
@Component({
selector: "generator-placeholder",
template: ` generator stuff here
`,
standalone: true,
})
class GeneratorComponent {}
@Component({
selector: "send-placeholder",
template: ` send some stuff
`,
standalone: true,
})
class SendComponent {}
@Component({
selector: "settings-placeholder",
template: ` change your settings
`,
standalone: true,
})
class SettingsComponent {}
@Component({
selector: "mock-add-button",
template: `
`,
standalone: true,
imports: [ButtonModule],
})
class MockAddButtonComponent {}
@Component({
selector: "mock-popout-button",
template: `
`,
standalone: true,
imports: [IconButtonModule],
})
class MockPopoutButtonComponent {}
@Component({
selector: "mock-current-account",
template: `
`,
standalone: true,
imports: [AvatarModule],
})
class MockCurrentAccountComponent {}
@Component({
selector: "mock-vault-page",
template: `
`,
standalone: true,
imports: [
PopupPageComponent,
PopupHeaderComponent,
MockAddButtonComponent,
MockPopoutButtonComponent,
MockCurrentAccountComponent,
VaultComponent,
],
})
class MockVaultPageComponent {}
@Component({
selector: "mock-vault-page-popped",
template: `
`,
standalone: true,
imports: [
PopupPageComponent,
PopupHeaderComponent,
MockAddButtonComponent,
MockPopoutButtonComponent,
MockCurrentAccountComponent,
VaultComponent,
],
})
class MockVaultPagePoppedComponent {}
@Component({
selector: "mock-generator-page",
template: `
`,
standalone: true,
imports: [
PopupPageComponent,
PopupHeaderComponent,
MockAddButtonComponent,
MockPopoutButtonComponent,
MockCurrentAccountComponent,
GeneratorComponent,
],
})
class MockGeneratorPageComponent {}
@Component({
selector: "mock-send-page",
template: `
`,
standalone: true,
imports: [
PopupPageComponent,
PopupHeaderComponent,
MockAddButtonComponent,
MockPopoutButtonComponent,
MockCurrentAccountComponent,
SendComponent,
],
})
class MockSendPageComponent {}
@Component({
selector: "mock-settings-page",
template: `
`,
standalone: true,
imports: [
PopupPageComponent,
PopupHeaderComponent,
MockAddButtonComponent,
MockPopoutButtonComponent,
MockCurrentAccountComponent,
SettingsComponent,
],
})
class MockSettingsPageComponent {}
@Component({
selector: "mock-vault-subpage",
template: `
`,
standalone: true,
imports: [
PopupPageComponent,
PopupHeaderComponent,
PopupFooterComponent,
ButtonModule,
MockAddButtonComponent,
MockPopoutButtonComponent,
MockCurrentAccountComponent,
VaultComponent,
],
})
class MockVaultSubpageComponent {}
export default {
title: "Browser/Popup Layout",
component: PopupPageComponent,
decorators: [
moduleMetadata({
imports: [
PopupTabNavigationComponent,
CommonModule,
RouterModule,
ExtensionContainerComponent,
MockVaultSubpageComponent,
MockVaultPageComponent,
MockSendPageComponent,
MockGeneratorPageComponent,
MockSettingsPageComponent,
MockVaultPagePoppedComponent,
],
providers: [
{
provide: I18nService,
useFactory: () => {
return new I18nMockService({
back: "Back",
});
},
},
],
}),
applicationConfig({
providers: [
importProvidersFrom(
RouterModule.forRoot(
[
{ path: "", redirectTo: "vault", pathMatch: "full" },
{ path: "vault", component: MockVaultPageComponent },
{ path: "generator", component: MockGeneratorPageComponent },
{ path: "send", component: MockSendPageComponent },
{ path: "settings", component: MockSettingsPageComponent },
// in case you are coming from a story that also uses the router
{ path: "**", redirectTo: "vault" },
],
{ useHash: true },
),
),
],
}),
],
} as Meta;
type Story = StoryObj;
export const PopupTabNavigation: Story = {
render: (args) => ({
props: args,
template: /* HTML */ `
`,
}),
};
export const PopupPage: Story = {
render: (args) => ({
props: args,
template: /* HTML */ `
`,
}),
};
export const PopupPageWithFooter: Story = {
render: (args) => ({
props: args,
template: /* HTML */ `
`,
}),
};
export const PoppedOut: Story = {
render: (args) => ({
props: args,
template: /* HTML */ `
`,
}),
};