From 9aa8872425ef68cf4097b1b97a0d0d0add6cb6fa Mon Sep 17 00:00:00 2001
From: Andrey Okonetchnikov <andrey@okonet.dev>
Date: Fri, 1 Jul 2022 11:30:27 +0200
Subject: [PATCH] feat(Select): Better API

---
 .../components/select.stories.tsx             | 20 +++++++++++
 .../design-system/components/select.tsx       | 36 +++++++++++++------
 2 files changed, 46 insertions(+), 10 deletions(-)
 create mode 100644 app/shared/design-system/components/select.stories.tsx

diff --git a/app/shared/design-system/components/select.stories.tsx b/app/shared/design-system/components/select.stories.tsx
new file mode 100644
index 0000000000..00793bb33b
--- /dev/null
+++ b/app/shared/design-system/components/select.stories.tsx
@@ -0,0 +1,20 @@
+import { action } from "@storybook/addon-actions";
+import { ComponentStory } from "@storybook/react";
+import { Select } from "~/shared/design-system";
+
+export default {
+  component: Select,
+};
+
+const values = ["Apple", "Banana", "Orange", "Pear", "Grape"];
+
+export const Default: ComponentStory<typeof Select> = (args) => (
+  <Select {...args} />
+);
+
+Default.args = {
+  name: "fruit",
+  onChange: action("onChange"),
+  value: "Apple",
+  options: values,
+};
diff --git a/app/shared/design-system/components/select.tsx b/app/shared/design-system/components/select.tsx
index d64593ca0c..058dfbb19e 100644
--- a/app/shared/design-system/components/select.tsx
+++ b/app/shared/design-system/components/select.tsx
@@ -59,16 +59,32 @@ const StyledCaretSortIcon = styled(CaretSortIcon, {
   marginLeft: -16,
 });
 
-type SelectProps = React.ComponentProps<typeof StyledSelect> & { css?: CSS };
+export type Option = { value: string; label: string };
+
+export type SelectProps<T> = React.ComponentProps<typeof StyledSelect> & {
+  options: T[];
+  value?: T;
+  onChange?: (value: T) => void;
+  css?: CSS;
+};
+
+export const Select = React.forwardRef(function SelectBase<T extends Option>(
+  { css, options, ...props }: SelectProps<T>,
+  forwardedRef: FocusableRef<HTMLElement>
+) {
+  return (
+    <SelectWrapper css={css}>
+      <StyledSelect ref={forwardedRef} {...props}>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </StyledSelect>
+      <StyledCaretSortIcon />
+    </SelectWrapper>
+  );
+});
 
-export const Select = React.forwardRef<
-  React.ElementRef<typeof StyledSelect>,
-  SelectProps
->(({ css, ...props }, forwardedRef) => (
-  <SelectWrapper css={css}>
-    <StyledSelect ref={forwardedRef} {...props} />
-    <StyledCaretSortIcon />
-  </SelectWrapper>
-));
 Select.displayName = "Select";
 Select.toString = () => `.${SelectWrapper.className}`;