From f3fcc335e0af7f72c33fd89df23992b2e6dd316e Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Thu, 6 Feb 2025 23:12:55 +0700
Subject: [PATCH] feat(storybook): create story for tags selector

---
 .../tags-selector.component.stories.ts        | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts

diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts
new file mode 100644
index 000000000..2757d5e75
--- /dev/null
+++ b/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts
@@ -0,0 +1,57 @@
+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: 'EMERGENCY_FUND',
+    name: 'Emergency Fund',
+    userId: '1'
+  },
+  {
+    id: 'RETIREMENT_FUND',
+    name: 'Retirement Fund',
+    userId: '2'
+  }
+];
+
+export const Default: Story = {
+  args: {
+    tags: [
+      {
+        id: 'EMERGENCY_FUND',
+        name: 'Emergency Fund',
+        userId: '1'
+      }
+    ],
+    tagsAvailable: OPTIONS
+  }
+};
+
+export const NoSelected: Story = {
+  args: {
+    tags: [],
+    tagsAvailable: OPTIONS
+  }
+};
+
+export const NoOptions: Story = {
+  args: {
+    tags: [],
+    tagsAvailable: []
+  }
+};