refactor: migrate the types to types file

Author: eshankvaish

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -1,5 +1,5 @@
-import ReactSelect, { ControlProps, MenuProps, Props as ReactSelectProps } from 'react-select'
-import { ReactElement, ReactNode, useCallback, useMemo } from 'react'
+import ReactSelect, { ControlProps, MenuProps } from 'react-select'
+import { useCallback, useMemo } from 'react'
 import { ReactComponent as ErrorIcon } from '@Icons/ic-warning.svg'
 import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled.svg'
 import { getCommonSelectStyle } from './utils'
@@ -11,36 +11,7 @@ import {
     SelectPickerMenu,
     SelectPickerOption,
 } from './common'
-import { SelectPickerOptionType } from './type'
-
-type SelectProps = ReactSelectProps<SelectPickerOptionType>
-
-export interface SelectPickerProps
-    extends Pick<
-            SelectProps,
-            | 'options'
-            | 'value'
-            | 'isMulti'
-            | 'onChange'
-            | 'isSearchable'
-            | 'isClearable'
-            | 'isLoading'
-            | 'placeholder'
-            | 'hideSelectedOptions'
-            | 'controlShouldRenderValue'
-            | 'backspaceRemovesValue'
-            | 'closeMenuOnSelect'
-            | 'isDisabled'
-            | 'isLoading'
-            | 'required'
-        >,
-        Required<Pick<SelectProps, 'classNamePrefix' | 'inputId'>> {
-    icon?: ReactElement
-    error?: ReactNode
-    renderMenuListFooter?: () => ReactNode
-    helperText?: ReactNode
-    label?: ReactNode
-}
+import { SelectPickerOptionType, SelectPickerProps } from './type'
 
 const SelectPicker = ({
     error,

src/Shared/Components/SelectPicker/common.tsx

@@ -9,8 +9,7 @@ import {
 import { Progressing } from '@Common/Progressing'
 import { ReactComponent as ICChevronDown } from '@Icons/ic-chevron-down.svg'
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
-import { SelectPickerProps } from './SelectPicker.component'
-import { SelectPickerOptionType } from './type'
+import { SelectPickerOptionType, SelectPickerProps } from './type'
 
 export const SelectPickerDropdownIndicator = (props: DropdownIndicatorProps) => {
     const { isDisabled } = props

src/Shared/Components/SelectPicker/type.ts

@@ -1,8 +1,39 @@
 import { OptionType } from '@Common/Types'
 import { ReactElement, ReactNode } from 'react'
+import { Props as ReactSelectProps } from 'react-select'
 
+// TODO Eshank: Add customization using generics
 export interface SelectPickerOptionType extends OptionType<number | string, ReactNode> {
     description?: string
     startIcon?: ReactElement
     endIcon?: ReactElement
 }
+
+type SelectProps = ReactSelectProps<SelectPickerOptionType>
+
+export interface SelectPickerProps
+    extends Pick<
+            SelectProps,
+            | 'options'
+            | 'value'
+            | 'isMulti'
+            | 'onChange'
+            | 'isSearchable'
+            | 'isClearable'
+            | 'isLoading'
+            | 'placeholder'
+            | 'hideSelectedOptions'
+            | 'controlShouldRenderValue'
+            | 'backspaceRemovesValue'
+            | 'closeMenuOnSelect'
+            | 'isDisabled'
+            | 'isLoading'
+            | 'required'
+        >,
+        Required<Pick<SelectProps, 'classNamePrefix' | 'inputId'>> {
+    icon?: ReactElement
+    error?: ReactNode
+    renderMenuListFooter?: () => ReactNode
+    helperText?: ReactNode
+    label?: ReactNode
+}