fix storybook story

src/interface/package.json

@@ -87,6 +87,7 @@
     "@types/jasmine": "~4.0.0",
     "@types/leaflet": "^1.9.0",
     "@types/leaflet-draw": "^1.0.4",
+    "@types/leaflet.vectorgrid": "^1.3.5",
     "@types/shpjs": "^3.4.2",
     "@typescript-eslint/eslint-plugin": "7.2.0",
     "@typescript-eslint/parser": "7.2.0",

src/interface/src/styleguide/notes-sidebar/notes-sidebar.component.ts

@@ -35,14 +35,14 @@ export class NotesSidebarComponent implements OnInit {
     private snackbar: MatSnackBar
   ) {}
   @Input() showHeader = false;
+  @Input() notes: Note[] = [];
   @Input() notesModel!: NotesModelName;
   @Input() objectId!: number;
   @Input() noNotesTitleText = 'No Notes Yet';
   @Input() noNotesDetailText =
     'Start adding notes to help your team learn more about this section.';
 
   @Output() handleNoteResponse = new EventEmitter<boolean>();
-  notes: Note[] = [];
   note = '';
 
   ngOnInit() {
@@ -63,6 +63,8 @@ export class NotesSidebarComponent implements OnInit {
 
   saving = false;
 
+  // TODO: decouple the notesService from this component?
+
   openDeleteNoteDialog(note: Note) {
     const dialogRef = this.dialog.open(DeleteNoteDialogComponent, {});
     dialogRef

src/interface/src/styleguide/notes-sidebar/notes-sidebar.stories.ts

@@ -0,0 +1,106 @@
+import {
+  Meta,
+  StoryObj,
+  moduleMetadata,
+  argsToTemplate,
+} from '@storybook/angular';
+import { NotesSidebarComponent } from './notes-sidebar.component';
+import {
+  MatDialogModule,
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+} from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { HttpClientModule } from '@angular/common/http'; // Add this import
+import { BaseNotesService, ProjectAreaNotesService } from '@services';
+
+const meta: Meta<NotesSidebarComponent> = {
+  title: 'Components/Notes Sidebar',
+  component: NotesSidebarComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        HttpClientModule,
+        MatDialogModule,
+        BrowserAnimationsModule,
+        MatProgressSpinnerModule,
+        NotesSidebarComponent,
+        MatSnackBarModule,
+      ],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: MatDialogRef, useValue: {} },
+        { provide: BaseNotesService, useValue: ProjectAreaNotesService },
+      ],
+    }),
+  ],
+  render: ({ ...args }) => ({
+    props: args,
+    template: `<div style="width:300px;border:1px black solid;"><sg-notes-sidebar ${argsToTemplate(args)}>
+          </sg-notes-sidebar></div>`,
+  }),
+};
+
+export default meta;
+
+const exampleNotes = [
+  {
+    id: 1,
+    user_id: 10,
+    user_name: 'Larry Larrington',
+    content: 'Here is some content',
+    created_at: '2024-01-01',
+    can_delete: true,
+  },
+  {
+    id: 2,
+    user_id: 11,
+    user_name: 'Someone Else',
+    content: 'Here is some content',
+    created_at: '2024-02-01',
+    can_delete: false,
+  },
+
+  {
+    id: 3,
+    user_id: 10,
+    user_name: 'Larry Larrington',
+    content:
+      'Here is some additional content.' +
+      ' Here is some additional content. Here is some additional content. ' +
+      'Here is some additional content. Here is some additional content. ' +
+      'Here is some additional content. ',
+    created_at: '2024-05-01',
+    can_delete: true,
+  },
+];
+
+type Story = StoryObj<NotesSidebarComponent>;
+
+export const Default: Story = {
+  args: {
+    showHeader: false,
+    notesModel: 'planning_area',
+    objectId: 1,
+    notes: exampleNotes,
+    noNotesTitleText: 'No Notes Yet',
+    noNotesDetailText:
+      'Start adding notes to help your team learn more about this section.',
+  },
+};
+
+export const NoNotes: Story = {
+  args: {
+    showHeader: false,
+    notesModel: 'planning_area',
+    objectId: 1,
+    notes: [],
+    noNotesTitleText: 'No Notes Yet',
+    noNotesDetailText:
+      'Start adding notes to help your team learn more about this section.',
+  },
+};