From 5d0dd9327125162f6c890c6db4281f9d34bfb29c Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Sat, 24 Feb 2024 11:38:32 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20separate=20select?=
 =?UTF-8?q?=20value=20to=20be=20a=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Select/SelectValue/SelectValue.theme.ts   | 30 ++++++++++
 .../shared/Select/SelectValue/SelectValue.tsx | 60 +++++++++++++++++++
 .../shared/Select/SelectValue/index.ts        |  1 +
 3 files changed, 91 insertions(+)
 create mode 100644 packages/frontend/src/components/shared/Select/SelectValue/SelectValue.theme.ts
 create mode 100644 packages/frontend/src/components/shared/Select/SelectValue/SelectValue.tsx
 create mode 100644 packages/frontend/src/components/shared/Select/SelectValue/index.ts

diff --git a/packages/frontend/src/components/shared/Select/SelectValue/SelectValue.theme.ts b/packages/frontend/src/components/shared/Select/SelectValue/SelectValue.theme.ts
new file mode 100644
index 00000000..7c3ca4f2
--- /dev/null
+++ b/packages/frontend/src/components/shared/Select/SelectValue/SelectValue.theme.ts
@@ -0,0 +1,30 @@
+import { tv, VariantProps } from 'tailwind-variants';
+
+export const selectValueTheme = tv({
+  slots: {
+    wrapper: [
+      'flex',
+      'items-center',
+      'gap-1',
+      'pl-2',
+      'pr-2',
+      'rounded-md',
+      'text-elements-mid-em',
+      'bg-base-bg-emphasized',
+      'hover:bg-base-bg-emphasized/80',
+    ],
+    icon: ['h-3.5', 'w-3.5'],
+  },
+  variants: {
+    size: {
+      sm: {
+        wrapper: ['pl-1', 'pr-0.5', 'gap-0.5'],
+      },
+      md: {
+        wrapper: ['pl-2', 'pr-1', 'gap-1'],
+      },
+    },
+  },
+});
+
+export type SelectValueTheme = VariantProps<typeof selectValueTheme>;
diff --git a/packages/frontend/src/components/shared/Select/SelectValue/SelectValue.tsx b/packages/frontend/src/components/shared/Select/SelectValue/SelectValue.tsx
new file mode 100644
index 00000000..b1068db1
--- /dev/null
+++ b/packages/frontend/src/components/shared/Select/SelectValue/SelectValue.tsx
@@ -0,0 +1,60 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import {
+  Overwrite,
+  UseMultipleSelectionGetSelectedItemReturnValue,
+} from 'downshift';
+import { SelectValueTheme, selectValueTheme } from './SelectValue.theme';
+import { OmitCommon } from 'types/common';
+import { SelectOption } from 'components/shared/Select';
+import { Button } from 'components/shared/Button';
+import { CrossIcon } from 'components/shared/CustomIcon';
+
+type MergedComponentPropsWithoutRef = OmitCommon<
+  ComponentPropsWithoutRef<'span'>,
+  Omit<
+    Overwrite<UseMultipleSelectionGetSelectedItemReturnValue, SelectOption[]>,
+    'index' | 'selectedItem'
+  >
+>;
+
+export interface SelectValueProps
+  extends MergedComponentPropsWithoutRef,
+    SelectValueTheme {
+  /**
+   * The option of the select value
+   */
+  option: SelectOption;
+  /**
+   * The function to call when the delete button is clicked
+   * @param item
+   * @returns none;
+   */
+  onDelete?: (item: SelectOption) => void;
+}
+
+/**
+ * The SelectValue component is used to display the selected value of a select component
+ */
+export const SelectValue = ({
+  className,
+  size,
+  option,
+  onDelete,
+  ...props
+}: SelectValueProps) => {
+  const theme = selectValueTheme();
+
+  return (
+    <span {...props} className={theme.wrapper({ className, size })}>
+      {option.label}
+      <Button
+        onClick={() => onDelete?.(option)}
+        iconOnly
+        variant="unstyled"
+        size="xs"
+      >
+        <CrossIcon className={theme.icon()} />
+      </Button>
+    </span>
+  );
+};
diff --git a/packages/frontend/src/components/shared/Select/SelectValue/index.ts b/packages/frontend/src/components/shared/Select/SelectValue/index.ts
new file mode 100644
index 00000000..247ce0d3
--- /dev/null
+++ b/packages/frontend/src/components/shared/Select/SelectValue/index.ts
@@ -0,0 +1 @@
+export * from './SelectValue';