fix stories attempt

apps/web/src/app/vault/components/vault-items/vault-items.stories.ts

@@ -2,7 +2,13 @@
 // @ts-strict-ignore
 import { importProvidersFrom } from "@angular/core";
 import { RouterModule } from "@angular/router";
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from "@storybook/angular";
+import {
+  applicationConfig,
+  componentWrapperDecorator,
+  Meta,
+  moduleMetadata,
+  StoryObj,
+} from "@storybook/angular";
 import { BehaviorSubject, of } from "rxjs";
 
 import {
@@ -29,6 +35,7 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
 import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service";
+import { LayoutComponent, positionFixedWrapperDecorator } from "@bitwarden/components";
 
 import { GroupView } from "../../../admin-console/organizations/core";
 import { PreloadedEnglishI18nModule } from "../../../core/tests";
@@ -48,8 +55,10 @@ export default {
   title: "Web/Vault/Items",
   component: VaultItemsComponent,
   decorators: [
+    positionFixedWrapperDecorator(),
+    componentWrapperDecorator((story) => `<bit-layout>${story}</bit-layout>`),
     moduleMetadata({
-      imports: [VaultItemsModule, RouterModule],
+      imports: [VaultItemsModule, RouterModule, LayoutComponent],
       providers: [
         {
           provide: EnvironmentService,

libs/components/src/index.ts

@@ -35,6 +35,7 @@ export * from "./search";
 export * from "./section";
 export * from "./select";
 export * from "./shared/compact-mode.service";
+export * from "./stories/storybook-decorators";
 export * from "./table";
 export * from "./tabs";
 export * from "./toast";

libs/components/src/layout/layout.component.html

@@ -1,3 +1,4 @@
+@let mainContentId = "main-content";
 <div class="tw-flex tw-w-full">
   <div class="tw-flex tw-w-full" cdkTrapFocus>
     <div
@@ -17,6 +18,7 @@
     </div>
     <ng-content select="bit-side-nav, [slot=side-nav]"></ng-content>
     <main
+      #main
       [id]="mainContentId"
       tabindex="-1"
       class="tw-overflow-auto tw-max-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6 md:tw-ml-0 tw-ml-16"

libs/components/src/layout/layout.component.ts

@@ -1,7 +1,7 @@
 import { A11yModule, CdkTrapFocus } from "@angular/cdk/a11y";
 import { PortalModule } from "@angular/cdk/portal";
 import { CommonModule } from "@angular/common";
-import { Component, inject } from "@angular/core";
+import { Component, ElementRef, inject, viewChild } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
 import { DrawerService } from "../drawer/drawer.service";
@@ -24,15 +24,12 @@ import { SharedModule } from "../shared";
   ],
 })
 export class LayoutComponent {
-  protected mainContentId = "main-content";
   protected sideNavService = inject(SideNavService);
   protected drawerPortal = inject(DrawerService).portal;
 
-  getMainContent() {
-    return document.getElementById(this.mainContentId)!;
-  }
+  mainContent = viewChild.required<ElementRef<HTMLElement>>("main");
 
   protected focusMainContent() {
-    this.getMainContent().focus();
+    this.mainContent().nativeElement.focus();
   }
 }

libs/components/src/layout/scroll-layout.directive.ts

@@ -10,26 +10,25 @@ import { LayoutComponent } from "./layout.component";
   providers: [{ provide: VIRTUAL_SCROLLABLE, useExisting: ScrollLayoutDirective }],
 })
 export class ScrollLayoutDirective extends CdkVirtualScrollable {
-  private mainEl: ElementRef<HTMLElement>;
-
   constructor(
-    layout: LayoutComponent,
+    private layout: LayoutComponent,
     scrollDispatcher: ScrollDispatcher,
     ngZone: NgZone,
     @Optional() dir: Directionality,
   ) {
-    const mainEl = new ElementRef(layout.getMainContent());
-    super(mainEl, scrollDispatcher, ngZone, dir);
-    this.mainEl = mainEl;
+    super(layout.mainContent(), scrollDispatcher, ngZone, dir);
   }
 
   override getElementRef(): ElementRef<HTMLElement> {
-    return this.mainEl;
+    return this.layout.mainContent();
   }
 
   override measureBoundingClientRectWithScrollOffset(
     from: "left" | "top" | "right" | "bottom",
   ): number {
-    return this.mainEl.nativeElement.getBoundingClientRect()[from] - this.measureScrollOffset(from);
+    return (
+      this.layout.mainContent().nativeElement.getBoundingClientRect()[from] -
+      this.measureScrollOffset(from)
+    );
   }
 }

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

@@ -12,7 +12,7 @@ import { KitchenSinkToggleList } from "./kitchen-sink-toggle-list.component";
   standalone: true,
   imports: [KitchenSinkSharedModule],
   template: `
-    <bit-dialog title="Dialog Title" dialogSize="small">
+    <bit-dialog title="Dialog Title" [dialogSize]="dialogRef.isDrawer ? 'large' : 'large'">
       <ng-container bitDialogContent>
         <p bitTypography="body1">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

libs/components/src/table/table.stories.ts

@@ -1,6 +1,13 @@
+import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
 import { countries } from "../form/countries";
+import { LayoutComponent } from "../layout";
+import { mockLayoutI18n } from "../layout/mocks";
+import { positionFixedWrapperDecorator } from "../stories/storybook-decorators";
+import { I18nMockService } from "../utils";
 
 import { TableDataSource } from "./table-data-source";
 import { TableModule } from "./table.module";
@@ -8,8 +15,17 @@ import { TableModule } from "./table.module";
 export default {
   title: "Component Library/Table",
   decorators: [
+    positionFixedWrapperDecorator(),
     moduleMetadata({
-      imports: [TableModule],
+      imports: [TableModule, LayoutComponent, RouterTestingModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService(mockLayoutI18n);
+          },
+        },
+      ],
     }),
   ],
   argTypes: {
@@ -116,18 +132,20 @@ export const Scrollable: Story = {
       trackBy: (index: number, item: any) => item.id,
     },
     template: `
-      <bit-table-scroll [dataSource]="dataSource" [rowSize]="43">
-        <ng-container header>
-          <th bitCell bitSortable="id" default>Id</th>
-          <th bitCell bitSortable="name">Name</th>
-          <th bitCell bitSortable="other" [fn]="sortFn">Other</th>
-        </ng-container>
-        <ng-template bitRowDef let-row>
-          <td bitCell>{{ row.id }}</td>
-          <td bitCell>{{ row.name }}</td>
-          <td bitCell>{{ row.other }}</td>
-        </ng-template>
-      </bit-table-scroll>
+      <bit-layout>
+        <bit-table-scroll [dataSource]="dataSource" [rowSize]="43">
+          <ng-container header>
+            <th bitCell bitSortable="id" default>Id</th>
+            <th bitCell bitSortable="name">Name</th>
+            <th bitCell bitSortable="other" [fn]="sortFn">Other</th>
+          </ng-container>
+          <ng-template bitRowDef let-row>
+            <td bitCell>{{ row.id }}</td>
+            <td bitCell>{{ row.name }}</td>
+            <td bitCell>{{ row.other }}</td>
+          </ng-template>
+        </bit-table-scroll>
+      </bit-layout>
     `,
   }),
 };
@@ -144,17 +162,19 @@ export const Filterable: Story = {
       sortFn: (a: any, b: any) => a.id - b.id,
     },
     template: `
-      <input type="search" placeholder="Search" (input)="dataSource.filter = $event.target.value" />
-      <bit-table-scroll [dataSource]="dataSource" [rowSize]="43">
-        <ng-container header>
-          <th bitCell bitSortable="name" default>Name</th>
-          <th bitCell bitSortable="value" width="120px">Value</th>
-        </ng-container>
-        <ng-template bitRowDef let-row>
-          <td bitCell>{{ row.name }}</td>
-          <td bitCell>{{ row.value }}</td>
-        </ng-template>
-      </bit-table-scroll>
+      <bit-layout>
+        <input type="search" placeholder="Search" (input)="dataSource.filter = $event.target.value" />
+        <bit-table-scroll [dataSource]="dataSource" [rowSize]="43">
+          <ng-container header>
+            <th bitCell bitSortable="name" default>Name</th>
+            <th bitCell bitSortable="value" width="120px">Value</th>
+          </ng-container>
+          <ng-template bitRowDef let-row>
+            <td bitCell>{{ row.name }}</td>
+            <td bitCell>{{ row.value }}</td>
+          </ng-template>
+        </bit-table-scroll>
+      </bit-layout>
     `,
   }),
 };