From d76db4fb96a1c650baab06972395ceec8e48faf8 Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Tue, 14 May 2024 16:39:29 -0400
Subject: [PATCH] [12/n][Storybook] Select argTypes and typed variants

---
 .../src/components/shared/Select/index.ts     |   1 +
 .../src/stories/Components/Select.stories.tsx | 178 +++++++++++++-----
 2 files changed, 130 insertions(+), 49 deletions(-)

diff --git a/packages/frontend/src/components/shared/Select/index.ts b/packages/frontend/src/components/shared/Select/index.ts
index 7669724a..6540c2f0 100644
--- a/packages/frontend/src/components/shared/Select/index.ts
+++ b/packages/frontend/src/components/shared/Select/index.ts
@@ -1,2 +1,3 @@
 export * from './Select';
 export * from './SelectItem';
+export * from './Select.theme';
diff --git a/packages/frontend/src/stories/Components/Select.stories.tsx b/packages/frontend/src/stories/Components/Select.stories.tsx
index 488f6717..ff41209f 100644
--- a/packages/frontend/src/stories/Components/Select.stories.tsx
+++ b/packages/frontend/src/stories/Components/Select.stories.tsx
@@ -1,6 +1,21 @@
 import { StoryObj, Meta } from '@storybook/react';
+import { PlusIcon } from 'components/shared/CustomIcon';
 
-import { Select } from 'components/shared/Select';
+import { Select, SelectOption, SelectTheme } from 'components/shared/Select';
+
+const selectOrientation: SelectTheme['orientation'][] = [
+  'horizontal',
+  'vertical',
+];
+const selectVariants: SelectTheme['variant'][] = ['default', 'danger'];
+const selectSizes: SelectTheme['size'][] = ['sm', 'md'];
+const selectError: SelectTheme['error'][] = [true, false];
+const selectIsOpen: SelectTheme['isOpen'][] = [true, false];
+const selectOptions: SelectOption[] = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3' },
+];
 
 const meta: Meta<typeof Select> = {
   title: 'Components/Select',
@@ -17,13 +32,13 @@ const meta: Meta<typeof Select> = {
       control: 'text',
     },
     multiple: {
-      control: 'boolean',
+      type: 'boolean',
     },
     searchable: {
-      control: 'boolean',
+      type: 'boolean',
     },
     clearable: {
-      control: 'boolean',
+      type: 'boolean',
     },
     leftIcon: {
       control: 'text',
@@ -35,7 +50,7 @@ const meta: Meta<typeof Select> = {
       control: 'text',
     },
     hideValues: {
-      control: 'boolean',
+      type: 'boolean',
     },
     value: {
       control: 'object',
@@ -46,6 +61,29 @@ const meta: Meta<typeof Select> = {
     onChange: {
       action: 'change',
     },
+    orientation: {
+      control: 'radio',
+      options: selectOrientation,
+    },
+    placeholder: {
+      control: 'text',
+    },
+    variant: {
+      control: 'select',
+      options: selectVariants,
+    },
+    size: {
+      control: 'select',
+      options: selectSizes,
+    },
+    error: {
+      control: 'radio',
+      options: selectError,
+    },
+    isOpen: {
+      control: 'radio',
+      options: selectIsOpen,
+    },
   },
 };
 
@@ -54,52 +92,94 @@ export default meta;
 type Story = StoryObj<typeof Select>;
 
 export const Default: Story = {
-  render: ({
-    options,
-    label,
-    description,
-    multiple,
-    searchable,
-    clearable,
-    leftIcon,
-    rightIcon,
-    helperText,
-    hideValues,
-    value,
-    onClear,
-    onChange,
-  }) => (
-    <Select
-      options={options}
-      label={label}
-      description={description}
-      multiple={multiple}
-      searchable={searchable}
-      clearable={clearable}
-      leftIcon={leftIcon}
-      rightIcon={rightIcon}
-      helperText={helperText}
-      hideValues={hideValues}
-      value={value}
-      onClear={onClear}
-      onChange={onChange}
-    />
-  ),
   args: {
-    options: [
-      { label: 'Option 1', value: 'option1' },
-      { label: 'Option 2', value: 'option2' },
-      { label: 'Option 3', value: 'option3' },
-    ],
+    options: selectOptions,
     label: 'Select',
     description: 'Select an option',
-    multiple: false,
-    searchable: false,
-    clearable: false,
-    leftIcon: '',
-    rightIcon: '',
-    helperText: '',
-    hideValues: false,
-    value: { label: 'Option 1', value: 'option1' },
+  },
+};
+
+export const Multiple: Story = {
+  args: {
+    ...Default.args,
+    multiple: true,
+  },
+};
+
+export const Searchable: Story = {
+  args: {
+    ...Default.args,
+    searchable: true,
+  },
+};
+
+export const Clearable: Story = {
+  args: {
+    ...Default.args,
+    clearable: true,
+  },
+};
+
+export const LeftIcon: Story = {
+  args: {
+    ...Default.args,
+    leftIcon: <PlusIcon />,
+  },
+};
+
+export const RightIcon: Story = {
+  args: {
+    ...Default.args,
+    rightIcon: <PlusIcon />,
+  },
+};
+
+export const HelperText: Story = {
+  args: {
+    ...Default.args,
+    helperText: 'Helper text',
+  },
+};
+
+export const HideValues: Story = {
+  args: {
+    ...Default.args,
+    hideValues: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    ...Default.args,
+    error: true,
+  },
+};
+
+export const IsOpen: Story = {
+  args: {
+    ...Default.args,
+    isOpen: true,
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    ...Default.args,
+    value: selectOptions[0],
+  },
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    ...Default.args,
+    placeholder: 'Select an option',
+  },
+};
+
+// TODO: fix Select danger variant
+export const WithVariantDanger: Story = {
+  args: {
+    ...Default.args,
+    variant: 'danger',
   },
 };