From 98152fee54b5960f9e7d74899c2bbde51ac78f3d Mon Sep 17 00:00:00 2001 From: Oscar Hinton Date: Fri, 17 Jun 2022 16:23:04 +0200 Subject: [PATCH] Add storybook to web (#2926) --- .storybook/main.js | 8 +++ .../app/components/premium-badge.stories.ts | 61 +++++++++++++++++++ apps/web/tsconfig.json | 3 +- libs/components/src/badge/badge.stories.ts | 2 +- libs/components/src/banner/banner.stories.ts | 2 +- libs/components/src/button/button.stories.ts | 2 +- .../components/src/callout/callout.stories.ts | 2 +- .../src/form-field/error-summary.stories.ts | 2 +- .../src/form-field/form-field.stories.ts | 2 +- libs/components/src/index.ts | 1 + libs/components/src/menu/menu.stories.ts | 2 +- tsconfig.json | 3 +- 12 files changed, 81 insertions(+), 9 deletions(-) create mode 100644 apps/web/src/app/components/premium-badge.stories.ts diff --git a/.storybook/main.js b/.storybook/main.js index 02b7f1aa59..e2e893f1af 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,7 +1,11 @@ +const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin"); + module.exports = { stories: [ "../libs/components/src/**/*.stories.mdx", "../libs/components/src/**/*.stories.@(js|jsx|ts|tsx)", + "../apps/web/src/**/*.stories.mdx", + "../apps/web/src/**/*.stories.@(js|jsx|ts|tsx)", ], addons: [ "@storybook/addon-links", @@ -13,4 +17,8 @@ module.exports = { core: { builder: "webpack5", }, + webpackFinal: async (config, { configType }) => { + config.resolve.plugins = [new TsconfigPathsPlugin()]; + return config; + }, }; diff --git a/apps/web/src/app/components/premium-badge.stories.ts b/apps/web/src/app/components/premium-badge.stories.ts new file mode 100644 index 0000000000..fda398c839 --- /dev/null +++ b/apps/web/src/app/components/premium-badge.stories.ts @@ -0,0 +1,61 @@ +import { Meta, moduleMetadata, Story } from "@storybook/angular"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; +import { MessagingService } from "@bitwarden/common/abstractions/messaging.service"; +import { StateService } from "@bitwarden/common/abstractions/state.service"; +import { StorageOptions } from "@bitwarden/common/models/domain/storageOptions"; +import { BadgeModule, I18nMockService } from "@bitwarden/components"; + +import { PremiumBadgeComponent } from "./premium-badge.component"; + +class MockMessagingService implements MessagingService { + send(subscriber: string, arg?: any) { + alert("Clicked on badge"); + } +} + +class MockedStateService implements Partial { + async getCanAccessPremium(options?: StorageOptions) { + return false; + } +} + +export default { + title: "Web/Premium Badge", + component: PremiumBadgeComponent, + decorators: [ + moduleMetadata({ + imports: [JslibModule, BadgeModule], + providers: [ + { + provide: I18nService, + useFactory: () => { + return new I18nMockService({ + premium: "Premium", + }); + }, + }, + { + provide: MessagingService, + useFactory: () => { + return new MockMessagingService(); + }, + }, + { + provide: StateService, + useFactory: () => { + return new MockedStateService(); + }, + }, + ], + }), + ], +} as Meta; + +const Template: Story = (args: PremiumBadgeComponent) => ({ + props: args, +}); + +export const Primary = Template.bind({}); +Primary.args = {}; diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json index 3fdb5bcf0d..116be36c24 100644 --- a/apps/web/tsconfig.json +++ b/apps/web/tsconfig.json @@ -22,6 +22,7 @@ "src/connectors/*.ts", "src/models/*.ts", "src/services/*.ts", - "src/abstractions/*.ts" + "src/abstractions/*.ts", + "src/**/*.stories.ts" ] } diff --git a/libs/components/src/badge/badge.stories.ts b/libs/components/src/badge/badge.stories.ts index e36b2cd776..6688a7a092 100644 --- a/libs/components/src/badge/badge.stories.ts +++ b/libs/components/src/badge/badge.stories.ts @@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/angular"; import { BadgeDirective } from "./badge.directive"; export default { - title: "Jslib/Badge", + title: "Component Library/Badge", component: BadgeDirective, args: { badgeType: "primary", diff --git a/libs/components/src/banner/banner.stories.ts b/libs/components/src/banner/banner.stories.ts index 88594df3f1..871b069a7a 100644 --- a/libs/components/src/banner/banner.stories.ts +++ b/libs/components/src/banner/banner.stories.ts @@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/angular"; import { BannerComponent } from "./banner.component"; export default { - title: "Jslib/Banner", + title: "Component Library/Banner", component: BannerComponent, args: { bannerType: "warning", diff --git a/libs/components/src/button/button.stories.ts b/libs/components/src/button/button.stories.ts index fe4e23eede..35a7dbfe82 100644 --- a/libs/components/src/button/button.stories.ts +++ b/libs/components/src/button/button.stories.ts @@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/angular"; import { ButtonDirective } from "./button.directive"; export default { - title: "Jslib/Button", + title: "Component Library/Button", component: ButtonDirective, args: { buttonType: "primary", diff --git a/libs/components/src/callout/callout.stories.ts b/libs/components/src/callout/callout.stories.ts index f9a1568556..c558c8fa7f 100644 --- a/libs/components/src/callout/callout.stories.ts +++ b/libs/components/src/callout/callout.stories.ts @@ -7,7 +7,7 @@ import { I18nMockService } from "../utils/i18n-mock.service"; import { CalloutComponent } from "./callout.component"; export default { - title: "Jslib/Callout", + title: "Component Library/Callout", component: CalloutComponent, decorators: [ moduleMetadata({ diff --git a/libs/components/src/form-field/error-summary.stories.ts b/libs/components/src/form-field/error-summary.stories.ts index a3dca8c997..7d551780f0 100644 --- a/libs/components/src/form-field/error-summary.stories.ts +++ b/libs/components/src/form-field/error-summary.stories.ts @@ -11,7 +11,7 @@ import { BitFormFieldComponent } from "./form-field.component"; import { FormFieldModule } from "./form-field.module"; export default { - title: "Jslib/Form Error Summary", + title: "Component Library/Form/Error Summary", component: BitFormFieldComponent, decorators: [ moduleMetadata({ diff --git a/libs/components/src/form-field/form-field.stories.ts b/libs/components/src/form-field/form-field.stories.ts index c2c1694d15..fb9a848866 100644 --- a/libs/components/src/form-field/form-field.stories.ts +++ b/libs/components/src/form-field/form-field.stories.ts @@ -19,7 +19,7 @@ import { BitFormFieldComponent } from "./form-field.component"; import { FormFieldModule } from "./form-field.module"; export default { - title: "Jslib/Form Field", + title: "Component Library/Form/Field", component: BitFormFieldComponent, decorators: [ moduleMetadata({ diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts index 9a15e43815..a83b561355 100644 --- a/libs/components/src/index.ts +++ b/libs/components/src/index.ts @@ -4,3 +4,4 @@ export * from "./button"; export * from "./callout"; export * from "./form-field"; export * from "./menu"; +export * from "./utils/i18n-mock.service"; diff --git a/libs/components/src/menu/menu.stories.ts b/libs/components/src/menu/menu.stories.ts index fa3c6e69cd..517dae2ae2 100644 --- a/libs/components/src/menu/menu.stories.ts +++ b/libs/components/src/menu/menu.stories.ts @@ -9,7 +9,7 @@ import { MenuTriggerForDirective } from "./menu-trigger-for.directive"; import { MenuComponent } from "./menu.component"; export default { - title: "Jslib/Menu", + title: "Component Library/Menu", component: MenuTriggerForDirective, decorators: [ moduleMetadata({ diff --git a/tsconfig.json b/tsconfig.json index 3bf1e15ebc..158581cb3a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,7 +18,8 @@ "@bitwarden/common/*": ["./libs/common/src/*"], "@bitwarden/angular/*": ["./libs/angular/src/*"], "@bitwarden/electron/*": ["./libs/electron/src/*"], - "@bitwarden/node/*": ["./libs/node/src/*"] + "@bitwarden/node/*": ["./libs/node/src/*"], + "@bitwarden/components": ["./libs/components/src"] }, "plugins": [ {