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

@@ -189,3 +189,7 @@
     padding: 24px !important;
   }
 }
+
+.docs-story {
+  padding: 24px !important;
+}

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";

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;

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,

packages/ui/components/form/select/index.ts

@@ -0,0 +1 @@
+export { SelectWithValidation, SelectField, getReactSelectProps, Select } from "./Select";

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>

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";

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

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";

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(() => {

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;

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";

packages/ui/v2/core/form/select/index.ts

@@ -1,4 +0,0 @@
-import Select from "./Select";
-
-export default Select;
-export { SelectWithValidation, SelectField, getReactSelectProps } from "./Select";

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";

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,