[BEEEP] [PM-10132] Upgrade storybook to v8 (#10288)

Upgrade storybook to version v8 which is a major upgrade. Storybook provides an
upgrade wizard which did most of the work.

- Ran npx storybook upgrade.
- Manually updated `remark-gfm` since the newer mdx requires v 4.
- Migrated all old stories still using `Story` to `StoryObj`.

libs/components/src/banner/banner.stories.ts

@@ -48,7 +48,7 @@ export const Premium: Story = {
   args: {
     bannerType: "premium",
   },
-  render: (args: BannerComponent) => ({
+  render: (args) => ({
     props: args,
     template: `
       <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)" [showClose]=showClose>
@@ -93,7 +93,7 @@ export const HideClose: Story = {
 
 export const Stacked: Story = {
   args: {},
-  render: (args: BannerComponent) => ({
+  render: (args) => ({
     props: args,
     template: `
       <bit-banner bannerType="premium" (onClose)="onClose($event)">

libs/components/src/chip-select/chip-select.stories.ts

@@ -1,6 +1,6 @@
 import { FormsModule } from "@angular/forms";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { getAllByRole, userEvent } from "@storybook/testing-library";
+import { getAllByRole, userEvent } from "@storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -40,7 +40,7 @@ export const Default: Story = {
       ...args,
     },
     template: /* html */ `
-      <bit-chip-select 
+      <bit-chip-select
         placeholderText="Folder"
         placeholderIcon="bwi-folder"
         [options]="options"
@@ -138,7 +138,7 @@ export const Disabled: Story = {
       ...args,
     },
     template: /* html */ `
-      <bit-chip-select 
+      <bit-chip-select
         placeholderText="Folder"
         placeholderIcon="bwi-folder"
         [options]="options"

libs/components/src/layout/layout.stories.ts

@@ -1,6 +1,6 @@
 import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { userEvent } from "@storybook/testing-library";
+import { userEvent } from "@storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/navigation/nav-item.stories.ts

@@ -69,8 +69,7 @@ export const WithoutIcon: Story = {
 };
 
 export const WithoutRoute: Story = {
-  render: (args: NavItemComponent) => ({
-    props: args,
+  render: () => ({
     template: `
         <bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
       `,
@@ -78,7 +77,7 @@ export const WithoutRoute: Story = {
 };
 
 export const WithChildButtons: Story = {
-  render: (args: NavItemComponent) => ({
+  render: (args) => ({
     props: args,
     template: `
       <bit-nav-item text="Hello World" [route]="['']" icon="bwi-collection">
@@ -104,7 +103,7 @@ export const WithChildButtons: Story = {
 };
 
 export const MultipleItemsWithDivider: Story = {
-  render: (args: NavItemComponent) => ({
+  render: (args) => ({
     props: args,
     template: `
       <bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
@@ -117,7 +116,7 @@ export const MultipleItemsWithDivider: Story = {
 };
 
 export const ForceActiveStyles: Story = {
-  render: (args: NavItemComponent) => ({
+  render: (args) => ({
     props: args,
     template: `
       <bit-nav-item text="First Nav" icon="bwi-collection"></bit-nav-item>

libs/components/src/stories/icons.mdx

@@ -1,5 +1,3 @@
-{/* Iconography.stories.mdx */}
-
 import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Documentation/Icons" />

libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts

@@ -8,13 +8,7 @@ import {
   componentWrapperDecorator,
   moduleMetadata,
 } from "@storybook/angular";
-import {
-  userEvent,
-  getAllByRole,
-  getByRole,
-  getByLabelText,
-  fireEvent,
-} from "@storybook/testing-library";
+import { userEvent, getAllByRole, getByRole, getByLabelText, fireEvent } from "@storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -126,14 +120,14 @@ export const MenuOpen: Story = {
 
 export const DefaultDialogOpen: Story = {
   ...Default,
-  play: (context) => {
+  play: async (context) => {
     const canvas = context.canvasElement;
     const dialogButton = getByRole(canvas, "button", {
       name: "Open Dialog",
     });
 
     // workaround for userEvent not firing in FF https://github.com/testing-library/user-event/issues/1075
-    fireEvent.click(dialogButton);
+    await fireEvent.click(dialogButton);
   },
 };
 
@@ -151,14 +145,14 @@ export const PopoverOpen: Story = {
 
 export const SimpleDialogOpen: Story = {
   ...Default,
-  play: (context) => {
+  play: async (context) => {
     const canvas = context.canvasElement;
     const submitButton = getByRole(canvas, "button", {
       name: "Submit",
     });
 
     // workaround for userEvent not firing in FF https://github.com/testing-library/user-event/issues/1075
-    fireEvent.click(submitButton);
+    await fireEvent.click(submitButton);
   },
 };
 

libs/components/src/tabs/tabs.stories.ts

@@ -103,7 +103,7 @@ export const ContentTabs: Story = {
 };
 
 export const NavigationTabs: Story = {
-  render: (args: TabGroupComponent) => ({
+  render: (args) => ({
     props: args,
     template: `
       <bit-tab-nav-bar label="Main">
@@ -126,7 +126,7 @@ export const NavigationTabs: Story = {
 };
 
 export const PreserveContentTabs: Story = {
-  render: (args: any) => ({
+  render: (args) => ({
     props: args,
     template: `
       <bit-tab-group label="Preserve Content Tabs" [preserveContent]="true" class="tw-text-main">
@@ -147,7 +147,7 @@ export const PreserveContentTabs: Story = {
 };
 
 export const KeyboardNavigation: Story = {
-  render: (args: any) => ({
+  render: (args) => ({
     props: args,
     template: `
       <bit-tab-group label="Keyboard Navigation Tabs" class="tw-text-main">