Add storybook to web (#2926)

.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;
+  },
 };

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<StateService> {
+  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<PremiumBadgeComponent> = (args: PremiumBadgeComponent) => ({
+  props: args,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {};

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"
   ]
 }

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",

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",

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",

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({

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({

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({

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";

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({

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": [
       {