[PM-2276] Upgrade Storybook to v7 (#5258)

.storybook/main.js

@@ -1,33 +0,0 @@
-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)",
-    "../bitwarden_license/bit-web/src/**/*.stories.mdx",
-    "../bitwarden_license/bit-web/src/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-a11y",
-    "storybook-addon-designs",
-  ],
-  framework: "@storybook/angular",
-  core: {
-    builder: "webpack5",
-    disableTelemetry: true,
-  },
-  env: (config) => ({
-    ...config,
-    FLAGS: JSON.stringify({
-      secretsManager: true,
-    }),
-  }),
-  webpackFinal: async (config, { configType }) => {
-    config.resolve.plugins = [new TsconfigPathsPlugin()];
-    return config;
-  },
-};

.storybook/main.ts

@@ -0,0 +1,53 @@
+import { StorybookConfig } from "@storybook/angular";
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
+import remarkGfm from "remark-gfm";
+
+const config: StorybookConfig = {
+  stories: [
+    "../libs/components/src/**/*.mdx",
+    "../libs/components/src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../apps/web/src/**/*.mdx",
+    "../apps/web/src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../bitwarden_license/bit-web/src/**/*.mdx",
+    "../bitwarden_license/bit-web/src/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-a11y",
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  framework: {
+    name: "@storybook/angular",
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  env: (config) => ({
+    ...config,
+    FLAGS: JSON.stringify({
+      secretsManager: true,
+    }),
+  }),
+  webpackFinal: async (config, { configType }) => {
+    if (config.resolve) {
+      config.resolve.plugins = [new TsconfigPathsPlugin()] as any;
+    }
+    return config;
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;

.storybook/preview.js

@@ -1,38 +0,0 @@
-import { setCompodocJson } from "@storybook/addon-docs/angular";
-import { componentWrapperDecorator, addDecorator } from "@storybook/angular";
-
-import docJson from "../documentation.json";
-setCompodocJson(docJson);
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  options: {
-    storySort: {
-      order: ["Documentation", ["Introduction", "Colors", "Icons"], "Component Library"],
-    },
-  },
-  docs: { inlineStories: true },
-};
-
-// ng-template is used to scope any template reference variables and isolate the previews
-const decorator = componentWrapperDecorator(
-  (story) => `
-<ng-template #lightPreview>
-  <div class="theme_light tw-px-5 tw-py-10 tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff]">${story}</div>
-</ng-template>
-<ng-template #darkPreview>
-  <div class="theme_dark tw-mt-5 tw-px-5 tw-py-10 tw-bg-[#1f242e]">${story}</div>
-</ng-template>
-
-<ng-container *ngTemplateOutlet="lightPreview"></ng-container>
-<ng-container *ngTemplateOutlet="darkPreview"></ng-container>
-`
-);
-
-addDecorator(decorator);

.storybook/preview.tsx

@@ -0,0 +1,39 @@
+import { setCompodocJson } from "@storybook/addon-docs/angular";
+import { componentWrapperDecorator } from "@storybook/angular";
+import type { Preview } from "@storybook/angular";
+
+import docJson from "../documentation.json";
+setCompodocJson(docJson);
+
+const decorator = componentWrapperDecorator(
+  (story) => `
+  <ng-template #lightPreview>
+    <div class="theme_light tw-px-5 tw-py-10 tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff]">${story}</div>
+  </ng-template>
+  <ng-template #darkPreview>
+    <div class="theme_dark tw-mt-5 tw-px-5 tw-py-10 tw-bg-[#1f242e]">${story}</div>
+  </ng-template>
+  <ng-container *ngTemplateOutlet="lightPreview"></ng-container>
+  <ng-container *ngTemplateOutlet="darkPreview"></ng-container>`
+);
+
+const preview: Preview = {
+  decorators: [decorator],
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    options: {
+      storySort: {
+        order: ["Documentation", ["Introduction", "Colors", "Icons"], "Component Library"],
+      },
+    },
+    docs: { source: { type: "dynamic", excludeDecorators: true } },
+  },
+};
+
+export default preview;

.storybook/tsconfig.json

@@ -7,6 +7,7 @@
   "exclude": ["../src/test.setup.ts", "../apps/src/**/*.spec.ts", "../libs/**/*.spec.ts"],
   "files": [
     "./typings.d.ts",
+    "./preview.tsx",
     "../libs/components/src/main.ts",
     "../libs/components/src/polyfills.ts"
   ]