Feature/set up Storybook stories for tags selector component (#4289)

* feat(storybook): create story for tags selector

* Update changelog

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added a new static portfolio analysis rule: _Regional Market Cluster Risk_ (Europe)
 - Added a link to _Duck.ai_ to the _Copy AI prompt to clipboard_ action on the analysis page (experimental)
 - Extracted the tags selector to a reusable component used in the create or update activity dialog and holding detail dialog
+- Added stories for the tags selector component
 
 ### Changed
 

libs/ui/src/lib/logo/logo.component.stories.ts

@@ -25,7 +25,7 @@ export const Large: Story = {
   }
 };
 
-export const NoLabel: Story = {
+export const WithoutLabel: Story = {
   args: {
     showLabel: false
   }

libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts

@@ -0,0 +1,62 @@
+import { CommonModule } from '@angular/common';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { GfTagsSelectorComponent } from './tags-selector.component';
+
+export default {
+  title: 'Tags Selector',
+  component: GfTagsSelectorComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, NoopAnimationsModule]
+    })
+  ]
+} as Meta<GfTagsSelectorComponent>;
+
+type Story = StoryObj<GfTagsSelectorComponent>;
+
+const OPTIONS = [
+  {
+    id: '3ef7e6d9-4598-4eb2-b0e8-00e61cfc0ea6',
+    name: 'Gambling',
+    userId: 'c6a71541-d0e3-4e22-ae83-b5e5611b6695'
+  },
+  {
+    id: 'EMERGENCY_FUND',
+    name: 'Emergency Fund',
+    userId: null
+  },
+  {
+    id: 'RETIREMENT_FUND',
+    name: 'Retirement Fund',
+    userId: null
+  }
+];
+
+export const Default: Story = {
+  args: {
+    tags: [
+      {
+        id: 'EMERGENCY_FUND',
+        name: 'Emergency Fund',
+        userId: null
+      }
+    ],
+    tagsAvailable: OPTIONS
+  }
+};
+
+export const WithoutValue: Story = {
+  args: {
+    tags: [],
+    tagsAvailable: OPTIONS
+  }
+};
+
+export const WithoutOptions: Story = {
+  args: {
+    tags: [],
+    tagsAvailable: []
+  }
+};