From 1f4e6c1987eec5d22d3fe19587a18486e794ac89 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Sun, 18 Dec 2022 23:16:20 +0000
Subject: [PATCH] Migrates V2 Select to new ui/components (#5400)

* v2 select to components folder + docs

* Fix type errors

* fix type checks

* Fix imports

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/storybook/styles/storybook-styles.css    |   4 +
 packages/ui/components/form/index.ts          |   1 +
 .../form/select/Select.tsx                    |  20 ++-
 .../form/select/components.tsx                |   2 +-
 packages/ui/components/form/select/index.ts   |   1 +
 .../components/form/select/select.stories.mdx | 115 ++++++++++++++++++
 packages/ui/components/index.ts               |   3 +
 packages/ui/form/TimezoneSelect.tsx           |   2 +-
 packages/ui/index.tsx                         |   8 +-
 packages/ui/v2/core/TimezoneSelect.tsx        |   2 +-
 .../ui/v2/core/form/MultiSelectCheckboxes.tsx |   2 +-
 packages/ui/v2/core/form/index.ts             |   1 -
 packages/ui/v2/core/form/select/index.ts      |   4 -
 packages/ui/v2/core/index.ts                  |  12 +-
 .../event-types/MultiDropdownSelect.tsx       |   3 +-
 15 files changed, 150 insertions(+), 30 deletions(-)
 rename packages/ui/{v2/core => components}/form/select/Select.tsx (92%)
 rename packages/ui/{v2/core => components}/form/select/components.tsx (99%)
 create mode 100644 packages/ui/components/form/select/index.ts
 create mode 100644 packages/ui/components/form/select/select.stories.mdx
 delete mode 100644 packages/ui/v2/core/form/select/index.ts

diff --git a/apps/storybook/styles/storybook-styles.css b/apps/storybook/styles/storybook-styles.css
index cddd25836c..d141252654 100644
--- a/apps/storybook/styles/storybook-styles.css
+++ b/apps/storybook/styles/storybook-styles.css
@@ -189,3 +189,7 @@
     padding: 24px !important;
   }
 }
+
+.docs-story {
+  padding: 24px !important;
+}
diff --git a/packages/ui/components/form/index.ts b/packages/ui/components/form/index.ts
index af12055775..e71f30c864 100644
--- a/packages/ui/components/form/index.ts
+++ b/packages/ui/components/form/index.ts
@@ -16,3 +16,4 @@ export {
   InputFieldWithSelect,
 } from "./inputs/Input";
 export { Label } from "./inputs/Label";
+export { Select, SelectField, SelectWithValidation, getReactSelectProps } from "./select";
diff --git a/packages/ui/v2/core/form/select/Select.tsx b/packages/ui/components/form/select/Select.tsx
similarity index 92%
rename from packages/ui/v2/core/form/select/Select.tsx
rename to packages/ui/components/form/select/Select.tsx
index 11b9a2fdca..cf3397aa79 100644
--- a/packages/ui/v2/core/form/select/Select.tsx
+++ b/packages/ui/components/form/select/Select.tsx
@@ -12,7 +12,7 @@ import ReactSelect, {
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Label } from "../../../../components/form/inputs/Label";
+import { Label } from "../inputs/Label";
 import {
   ControlComponent,
   InputComponent,
@@ -58,7 +58,7 @@ export const getReactSelectProps = <
   },
 });
 
-const Select = <
+export const Select = <
   Option,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>
@@ -93,6 +93,20 @@ const Select = <
   );
 };
 
+type IconLeadingProps = {
+  icon: React.ReactNode;
+  children?: React.ReactNode;
+} & React.ComponentProps<typeof reactSelectComponents.Control>;
+
+export const IconLeading = ({ icon, children, ...props }: IconLeadingProps) => {
+  return (
+    <reactSelectComponents.Control {...props}>
+      {icon}
+      {children}
+    </reactSelectComponents.Control>
+  );
+};
+
 export const SelectField = function SelectField<
   Option,
   IsMulti extends boolean = false,
@@ -194,5 +208,3 @@ export function SelectWithValidation<
     </div>
   );
 }
-
-export default Select;
diff --git a/packages/ui/v2/core/form/select/components.tsx b/packages/ui/components/form/select/components.tsx
similarity index 99%
rename from packages/ui/v2/core/form/select/components.tsx
rename to packages/ui/components/form/select/components.tsx
index ac7a003235..12b63cf2ad 100644
--- a/packages/ui/v2/core/form/select/components.tsx
+++ b/packages/ui/components/form/select/components.tsx
@@ -13,7 +13,7 @@ import {
 
 import { classNames } from "@calcom/lib";
 
-import { Icon } from "../../../..";
+import { Icon } from "../../../Icon";
 
 export const InputComponent = <
   Option,
diff --git a/packages/ui/components/form/select/index.ts b/packages/ui/components/form/select/index.ts
new file mode 100644
index 0000000000..5ac3f2514a
--- /dev/null
+++ b/packages/ui/components/form/select/index.ts
@@ -0,0 +1 @@
+export { SelectWithValidation, SelectField, getReactSelectProps, Select } from "./Select";
diff --git a/packages/ui/components/form/select/select.stories.mdx b/packages/ui/components/form/select/select.stories.mdx
new file mode 100644
index 0000000000..ce138e20f4
--- /dev/null
+++ b/packages/ui/components/form/select/select.stories.mdx
@@ -0,0 +1,115 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Examples, Example, Note, Title,CustomArgsTable, VariantRow,VariantsTable} from '@calcom/storybook/components'
+import { Icon } from "@calcom/ui/Icon";
+
+import {SelectField} from "./Select"
+
+<Meta title="UI/Form/Select Field" component={SelectField} />
+
+<Title title="Select" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
+
+## Definition
+Dropdown fields allow users to input existing options that is preset by the deisgner/ developer. It can be just one choice per field, or they might be multiple choices depends on the circumstances.
+
+## Structure
+<CustomArgsTable of={SelectField} />
+
+
+
+export const options = [
+    { value: 0, label: "Option One" },
+    { value: 1, label: "Option Two" },
+];
+
+
+## Examples
+
+<Examples title=" Single Selected / Unselected" footnote={
+  <ul>
+    <li>The difference between the types are when they are filled.  </li>
+  </ul>
+}>
+  <Example title="Single Select [Unselected]">
+    <SelectField
+      label={"Single Select"}
+      options={options}
+    />
+  </Example>
+    <Example title="Single Select [Selected]">
+    <SelectField
+      label={"Single Select"}
+      options={options}
+      defaultValue={options[0]}
+    />
+  </Example>
+  <Example title="Multi Select [Unselected]">
+    <SelectField
+      label={"Multi Select"}
+      options={options}
+      isMulti={true}
+    />
+  </Example>
+  <Example title="Multi Select [Selected]">
+    <SelectField
+      label={"Multi Select"}
+      options={options}
+      isMulti={true}
+      defaultValue={options[0]}
+    />
+  </Example>
+</Examples>
+
+<Examples title="Variants">
+  <Example title="Default">
+    <SelectField
+      label={"Default Select"}
+      options={options}/>
+  </Example>
+  <Example title="Icon Left">
+    WIP
+    {/* <SelectField options={options} components={{ Control }}/> */}
+  </Example>
+</Examples>
+
+
+## Variant Caviats (WIP) - To be updated
+Using Icons is a bit of a strange one cause you can't simpily pass in an icon as a prop. You have to pass in a component. To the select field.
+
+```js
+// Bad: Inline declaration will cause remounting issues
+const BadSelect = props => (
+  <Select {...props} components={{
+    Control: ({ children, ...rest }) => (
+      <components.Control {...rest}>
+        👎 {children}
+      </components.Control>
+    )}}
+  />
+)
+
+// Good: Custom component declared outside of the Select scope
+const Control = <IconLeading icon={Icon.FiPlus}/>
+
+const GoodSelect = props => <Select {...props} components={{ Control }} />
+
+```
+
+<Examples title="States ">
+  <Example title="Default">
+    <SelectField options={options} label={"Default Select"}/>
+  </Example>
+  {/* <Example title="Hover">
+    <SelectField options={options} className="sb-pseudo--hover"/>
+  </Example>
+  <Example title="Focus">
+    <SelectField options={options} className="sb-pseudo--focus"/>
+  </Example> */}
+</Examples>
+
+
+## Select Story
+<Canvas>
+  <Story name="Default">
+      <SelectField options={options} label={"Default Select"}/>
+  </Story>
+</Canvas>
diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts
index 0784a69a7a..d79b8dbbc0 100644
--- a/packages/ui/components/index.ts
+++ b/packages/ui/components/index.ts
@@ -23,6 +23,9 @@ export {
   TextAreaField,
   TextField,
   InputFieldWithSelect,
+  Select,
+  SelectField,
+  SelectWithValidation,
 } from "./form";
 export { TopBanner } from "./top-banner";
 export type { TopBannerProps } from "./top-banner";
diff --git a/packages/ui/form/TimezoneSelect.tsx b/packages/ui/form/TimezoneSelect.tsx
index c13deb23e3..40d17d66eb 100644
--- a/packages/ui/form/TimezoneSelect.tsx
+++ b/packages/ui/form/TimezoneSelect.tsx
@@ -7,7 +7,7 @@ import BaseSelect, {
   Props as SelectProps,
 } from "react-timezone-select";
 
-import { InputComponent } from "../v2/core/form/select/components";
+import { InputComponent } from "../components/form/select/components";
 
 function TimezoneSelect({ className, ...props }: SelectProps) {
   // @TODO: remove borderRadius and haveRoundedClassName logic from theme so we use only new style
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index dcd715be96..cbc4a76c69 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -24,6 +24,9 @@ export {
   TextAreaField,
   TextField,
   TopBanner,
+  Select,
+  SelectField,
+  SelectWithValidation,
 } from "./components";
 export type { AvatarProps, BadgeProps, ButtonBaseProps, ButtonProps, TopBannerProps } from "./components";
 export { default as CheckboxField } from "./components/form/checkbox/Checkbox";
@@ -43,9 +46,6 @@ export {
   CustomInputItem,
   EmptyScreen,
   HorizontalTabs,
-  Select,
-  SelectField,
-  SelectWithValidation,
   SettingsToggle,
   showToast,
   SkeletonAvatar,
@@ -58,7 +58,7 @@ export {
   TipBanner,
 } from "./v2";
 export type { AlertProps } from "./v2";
-export { getReactSelectProps, Segment, SegmentOption } from "./v2/core";
+export { Segment, SegmentOption } from "./v2/core";
 export { default as AllApps } from "./v2/core/apps/AllApps";
 export { default as AppCard } from "./v2/core/apps/AppCard";
 export { default as AppStoreCategories } from "./v2/core/apps/Categories";
diff --git a/packages/ui/v2/core/TimezoneSelect.tsx b/packages/ui/v2/core/TimezoneSelect.tsx
index 9cdf77a97b..6d98804c78 100644
--- a/packages/ui/v2/core/TimezoneSelect.tsx
+++ b/packages/ui/v2/core/TimezoneSelect.tsx
@@ -6,7 +6,7 @@ import BaseSelect, {
   Props as SelectProps,
 } from "react-timezone-select";
 
-import { getReactSelectProps } from "../..";
+import { getReactSelectProps } from "../../components/form";
 
 function TimezoneSelect({ className, components, ...props }: SelectProps) {
   const reactSelectProps = useMemo(() => {
diff --git a/packages/ui/v2/core/form/MultiSelectCheckboxes.tsx b/packages/ui/v2/core/form/MultiSelectCheckboxes.tsx
index 87da95ef38..9b71f47397 100644
--- a/packages/ui/v2/core/form/MultiSelectCheckboxes.tsx
+++ b/packages/ui/v2/core/form/MultiSelectCheckboxes.tsx
@@ -5,7 +5,7 @@ import { Props } from "react-select";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import Select from "./select";
+import { Select } from "../../../components/form/select";
 
 export type Option = {
   value: string;
diff --git a/packages/ui/v2/core/form/index.ts b/packages/ui/v2/core/form/index.ts
index 81bdd04ac4..bc5dd19320 100644
--- a/packages/ui/v2/core/form/index.ts
+++ b/packages/ui/v2/core/form/index.ts
@@ -7,6 +7,5 @@ export {
 } from "./radio-area";
 export { default as Checkbox } from "../../../components/form/checkbox/Checkbox";
 export { default as DatePicker } from "./DatePicker";
-export { default as Select, SelectWithValidation, SelectField, getReactSelectProps } from "./select";
 
 export { default as FormStep } from "./FormStep";
diff --git a/packages/ui/v2/core/form/select/index.ts b/packages/ui/v2/core/form/select/index.ts
deleted file mode 100644
index 083890bac7..0000000000
--- a/packages/ui/v2/core/form/select/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import Select from "./Select";
-
-export default Select;
-export { SelectWithValidation, SelectField, getReactSelectProps } from "./Select";
diff --git a/packages/ui/v2/core/index.ts b/packages/ui/v2/core/index.ts
index 3b6cf54392..06c1fc4379 100644
--- a/packages/ui/v2/core/index.ts
+++ b/packages/ui/v2/core/index.ts
@@ -23,17 +23,7 @@ export {
   DropdownMenuTriggerItem,
 } from "./Dropdown";
 export { default as EmptyScreen } from "./EmptyScreen";
-export {
-  Checkbox,
-  DatePicker,
-  FormStep,
-  getReactSelectProps,
-  Radio,
-  RadioGroup,
-  Select,
-  SelectField,
-  SelectWithValidation,
-} from "./form";
+export { Checkbox, DatePicker, FormStep, Radio, RadioGroup } from "./form";
 export { default as LinkIconButton } from "./LinkIconButton";
 export { List, ListItem } from "./List";
 export type { ListItemProps } from "./List";
diff --git a/packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx b/packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx
index 23026e8a38..a2f79cd176 100644
--- a/packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx
+++ b/packages/ui/v2/modules/event-types/MultiDropdownSelect.tsx
@@ -1,7 +1,6 @@
 import { components, GroupBase, Props, ValueContainerProps } from "react-select";
 
-import { Select } from "../..";
-import { Icon } from "../../..";
+import { Icon, Select } from "../../..";
 
 const LimitedChipsContainer = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({
   children,