@devtron-labs/devtron-fe-common-lib 0.0.58-beta-3 → 0.0.58-beta-5

package/src/Pages/GlobalConfigurations/BuildInfra/utils.tsx

@@ -0,0 +1,490 @@
+import { FormEvent, useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+import { showError, useAsync } from '../../../Common'
+import { getBuildInfraProfileByName, createBuildInfraProfile, updateBuildInfraProfile } from './services'
+import {
+    BuildInfraConfigTypes,
+    BuildInfraInheritActions,
+    BuildInfraMetaConfigTypes,
+    BuildInfraProfileData,
+    HandleProfileInputChangeType,
+    ProfileInputErrorType,
+    UseBuildInfraFormProps,
+    UseBuildInfraFormResponseType,
+    ValidateRequestLimitResponseType,
+    ValidateRequestLimitType,
+} from './types'
+import {
+    BUILD_INFRA_INPUT_CONSTRAINTS,
+    BUILD_INFRA_TEXT,
+    DEFAULT_PROFILE_NAME,
+    PROFILE_INPUT_ERROR_FIELDS,
+    REQUIRED_INPUT_FIELDS,
+} from './constants'
+import {
+    validateDescription,
+    validateName,
+    validateRequiredPositiveNumber,
+    getCommonSelectStyle,
+} from '../../../Shared'
+
+export const validateRequestLimit = ({
+    request,
+    limit,
+    unitsMap,
+}: ValidateRequestLimitType): ValidateRequestLimitResponseType => {
+    // Request <= Limit
+    // Request and Limit should be numbers can be decimals
+    // Request and Limit should be positive numbers
+    // Request and Limit should be less than Number.MAX_SAFE_INTEGER
+    // Request and Limit should can have at most BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES
+    // Both request and limit should be there
+    const requestNumber = Number(request.value)
+    const limitNumber = Number(limit.value)
+    const requestUnit = Number(unitsMap[request.unit].conversionFactor)
+    const limitUnit = Number(unitsMap[limit.unit].conversionFactor)
+
+    const requestLimitValidationResponse: ValidateRequestLimitResponseType = {
+        request: {
+            isValid: true,
+        },
+        limit: {
+            isValid: true,
+        },
+    }
+
+    const isRequestValidNumber = validateRequiredPositiveNumber(request.value).isValid
+    const isLimitValidNumber = validateRequiredPositiveNumber(limit.value).isValid
+
+    if (!isRequestValidNumber) {
+        requestLimitValidationResponse.request = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.NEGATIVE_REQUEST,
+            isValid: false,
+        }
+    }
+
+    if (!isLimitValidNumber) {
+        requestLimitValidationResponse.limit = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.NEGATIVE_LIMIT,
+            isValid: false,
+        }
+    }
+
+    if (!isRequestValidNumber || !isLimitValidNumber) {
+        return requestLimitValidationResponse
+    }
+
+    const isSafeRequestNumber = requestNumber * requestUnit < Number.MAX_SAFE_INTEGER
+    const isSafeLimitNumber = limitNumber * limitUnit < Number.MAX_SAFE_INTEGER
+
+    if (!isSafeRequestNumber) {
+        requestLimitValidationResponse.request = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_TOO_BIG,
+            isValid: false,
+        }
+
+        return requestLimitValidationResponse
+    }
+
+    if (!isSafeLimitNumber) {
+        requestLimitValidationResponse.limit = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.LIMIT_TOO_BIG,
+            isValid: false,
+        }
+
+        return requestLimitValidationResponse
+    }
+
+    // only two decimal places are allowed
+    const requestDecimalPlaces = String(request.value).split('.')[1]?.length ?? 0
+    const limitDecimalPlaces = String(limit.value).split('.')[1]?.length ?? 0
+
+    if (requestDecimalPlaces > BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES) {
+        requestLimitValidationResponse.request = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_DECIMAL_PLACES,
+            isValid: false,
+        }
+
+        return requestLimitValidationResponse
+    }
+    if (limitDecimalPlaces > BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES) {
+        requestLimitValidationResponse.limit = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.LIMIT_DECIMAL_PLACES,
+            isValid: false,
+        }
+
+        return requestLimitValidationResponse
+    }
+
+    if (requestNumber * requestUnit > limitNumber * limitUnit) {
+        requestLimitValidationResponse.request = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_LESS_THAN_LIMIT,
+            isValid: false,
+        }
+    }
+
+    return requestLimitValidationResponse
+}
+
+const getInitialProfileInputErrors = (fromCreateView: boolean): ProfileInputErrorType => {
+    if (fromCreateView) {
+        const initialProfileInputErrors = { ...PROFILE_INPUT_ERROR_FIELDS }
+        REQUIRED_INPUT_FIELDS.forEach((field) => {
+            initialProfileInputErrors[field] = ''
+        })
+        return initialProfileInputErrors
+    }
+
+    return {
+        ...PROFILE_INPUT_ERROR_FIELDS,
+    }
+}
+
+export const useBuildInfraForm = ({
+    name,
+    editProfile,
+    handleSuccessRedirection,
+}: UseBuildInfraFormProps): UseBuildInfraFormResponseType => {
+    const fromCreateView = !name
+
+    const [isLoading, profileResponse, responseError, reloadRequest] = useAsync(
+        () =>
+            getBuildInfraProfileByName({
+                name: name ?? DEFAULT_PROFILE_NAME,
+                fromCreateView,
+            }),
+        [name],
+    )
+    // If configuration is existing and is active then use it else use default from profileResponse
+    const [profileInput, setProfileInput] = useState<BuildInfraProfileData>(null)
+    const [profileInputErrors, setProfileInputErrors] = useState<ProfileInputErrorType>({
+        ...PROFILE_INPUT_ERROR_FIELDS,
+    })
+    const [loadingActionRequest, setLoadingActionRequest] = useState<boolean>(false)
+
+    useEffect(() => {
+        if (!isLoading && profileResponse?.configurationUnits && profileResponse?.profile) {
+            setProfileInput({
+                ...profileResponse.profile,
+            })
+
+            setProfileInputErrors(getInitialProfileInputErrors(fromCreateView))
+        }
+    }, [profileResponse, isLoading])
+
+    // NOTE: Currently sending and receiving values as string, but will parse it to number for payload
+    const handleProfileInputChange = ({ action, data }: HandleProfileInputChangeType) => {
+        const currentInput = { ...profileInput }
+        const currentInputErrors = { ...profileInputErrors }
+        const lastSavedConfiguration = profileResponse.profile.configurations
+        const currentConfiguration = currentInput.configurations
+        const { value, unit } = data ?? { value: null, unit: null }
+
+        switch (action) {
+            case BuildInfraMetaConfigTypes.DESCRIPTION:
+                currentInput.description = value
+                currentInputErrors.description = validateDescription(value).message
+                break
+
+            case BuildInfraMetaConfigTypes.NAME:
+                currentInput.name = value
+                currentInputErrors.name = validateName(value).message
+                break
+
+            case BuildInfraConfigTypes.CPU_LIMIT: {
+                currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT],
+                    value,
+                    unit,
+                }
+                const { request, limit } = validateRequestLimit({
+                    request: {
+                        value: currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST].value,
+                        unit: currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST].unit,
+                    },
+                    limit: {
+                        value,
+                        unit,
+                    },
+                    unitsMap: profileResponse.configurationUnits[BuildInfraConfigTypes.CPU_LIMIT],
+                })
+                currentInputErrors[BuildInfraConfigTypes.CPU_LIMIT] = limit.message
+                currentInputErrors[BuildInfraConfigTypes.CPU_REQUEST] = request.message
+                break
+            }
+            case BuildInfraConfigTypes.CPU_REQUEST: {
+                currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST],
+                    value,
+                    unit,
+                }
+                const { request, limit } = validateRequestLimit({
+                    request: {
+                        value,
+                        unit,
+                    },
+                    limit: {
+                        value: currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT].value,
+                        unit: currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT].unit,
+                    },
+                    unitsMap: profileResponse.configurationUnits[BuildInfraConfigTypes.CPU_LIMIT],
+                })
+                currentInputErrors[BuildInfraConfigTypes.CPU_LIMIT] = limit.message
+                currentInputErrors[BuildInfraConfigTypes.CPU_REQUEST] = request.message
+                break
+            }
+
+            case BuildInfraConfigTypes.MEMORY_LIMIT: {
+                currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT],
+                    value,
+                    unit,
+                }
+                const { request, limit } = validateRequestLimit({
+                    request: {
+                        value: currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].value,
+                        unit: currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].unit,
+                    },
+                    limit: {
+                        value,
+                        unit,
+                    },
+                    unitsMap: profileResponse.configurationUnits[BuildInfraConfigTypes.MEMORY_LIMIT],
+                })
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_LIMIT] = limit.message
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_REQUEST] = request.message
+                break
+            }
+
+            case BuildInfraConfigTypes.MEMORY_REQUEST: {
+                currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST],
+                    value,
+                    unit,
+                }
+                const { request, limit } = validateRequestLimit({
+                    request: {
+                        value,
+                        unit,
+                    },
+                    limit: {
+                        value: currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT].value,
+                        unit: currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT].unit,
+                    },
+                    unitsMap: profileResponse.configurationUnits[BuildInfraConfigTypes.MEMORY_LIMIT],
+                })
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_LIMIT] = limit.message
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_REQUEST] = request.message
+                break
+            }
+
+            case BuildInfraConfigTypes.BUILD_TIMEOUT: {
+                currentConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT],
+                    value,
+                    unit,
+                }
+
+                currentInputErrors[BuildInfraConfigTypes.BUILD_TIMEOUT] = validateRequiredPositiveNumber(value).message
+                break
+            }
+
+            case BuildInfraInheritActions.ACTIVATE_CPU:
+                currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT] = {
+                    ...lastSavedConfiguration[BuildInfraConfigTypes.CPU_LIMIT],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.CPU_LIMIT].value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.CPU_LIMIT].unit,
+                    active: true,
+                }
+                currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST] = {
+                    ...lastSavedConfiguration[BuildInfraConfigTypes.CPU_REQUEST],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.CPU_REQUEST].value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.CPU_REQUEST].unit,
+                    active: true,
+                }
+
+                currentInputErrors[BuildInfraConfigTypes.CPU_LIMIT] = null
+                currentInputErrors[BuildInfraConfigTypes.CPU_REQUEST] = null
+                break
+
+            case BuildInfraInheritActions.ACTIVATE_MEMORY:
+                currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT] = {
+                    ...lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT].value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT].unit,
+                    active: true,
+                }
+                currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST] = {
+                    ...lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].unit,
+                    active: true,
+                }
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_LIMIT] = null
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_REQUEST] = null
+                break
+
+            case BuildInfraInheritActions.ACTIVATE_BUILD_TIMEOUT:
+                currentConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT] = {
+                    ...lastSavedConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT].value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT].unit,
+                    active: true,
+                }
+                currentInputErrors[BuildInfraConfigTypes.BUILD_TIMEOUT] = null
+                break
+
+            case BuildInfraInheritActions.DE_ACTIVATE_BUILD_TIMEOUT:
+                // Reverting the value and unit to defaultValues
+                currentConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT].defaultValue.value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT].defaultValue.unit,
+                    active: false,
+                }
+                currentInputErrors[BuildInfraConfigTypes.BUILD_TIMEOUT] = null
+                break
+
+            case BuildInfraInheritActions.DE_ACTIVATE_CPU:
+                currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.CPU_LIMIT],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.CPU_LIMIT].defaultValue.value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.CPU_LIMIT].defaultValue.unit,
+                    active: false,
+                }
+                currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.CPU_REQUEST],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.CPU_REQUEST].defaultValue.value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.CPU_REQUEST].defaultValue.unit,
+                    active: false,
+                }
+                currentInputErrors[BuildInfraConfigTypes.CPU_LIMIT] = null
+                currentInputErrors[BuildInfraConfigTypes.CPU_REQUEST] = null
+                break
+
+            case BuildInfraInheritActions.DE_ACTIVATE_MEMORY:
+                currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT].defaultValue.value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_LIMIT].defaultValue.unit,
+                    active: false,
+                }
+                currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST] = {
+                    ...currentConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST],
+                    value: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].defaultValue.value,
+                    unit: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].defaultValue.unit,
+                    active: false,
+                }
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_LIMIT] = null
+                currentInputErrors[BuildInfraConfigTypes.MEMORY_REQUEST] = null
+                break
+
+            default:
+                throw new Error(BUILD_INFRA_TEXT.getInvalidActionMessage(action))
+        }
+
+        setProfileInput(currentInput)
+        setProfileInputErrors(currentInputErrors)
+    }
+
+    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        setLoadingActionRequest(true)
+        try {
+            if (editProfile) {
+                await updateBuildInfraProfile({ name, profileInput })
+            } else {
+                await createBuildInfraProfile({ profileInput })
+            }
+            setLoadingActionRequest(false)
+            toast.success(BUILD_INFRA_TEXT.getSubmitSuccessMessage(profileInput.name, editProfile))
+
+            if (handleSuccessRedirection) {
+                handleSuccessRedirection()
+            } else {
+                reloadRequest()
+            }
+        } catch (err) {
+            showError(err)
+            setLoadingActionRequest(false)
+        }
+    }
+
+    return {
+        isLoading,
+        profileResponse,
+        responseError,
+        reloadRequest,
+        profileInput,
+        profileInputErrors,
+        handleProfileInputChange,
+        loadingActionRequest,
+        handleSubmit,
+    }
+}
+
+const getOptionBackgroundColor = (isFocused: boolean, isSelected: boolean): string => {
+    if (isSelected) {
+        return 'var(--B100)'
+    }
+
+    if (isFocused) {
+        return 'var(--N50)'
+    }
+    return 'var(--white)'
+}
+
+export const unitSelectorStyles = () =>
+    getCommonSelectStyle({
+        control: (base, state) => ({
+            ...base,
+            borderRadius: 0,
+            backgroundColor: 'var(--N0)',
+            border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)',
+            alignItems: 'center',
+            cursor: 'pointer',
+            borderTopRightRadius: '4px',
+            borderBottomRightRadius: '4px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            outline: 'none',
+            boxShadow: 'none',
+            '&:hover': {
+                border: '1px solid var(--N400)',
+            },
+        }),
+        indicatorContainer: (base) => ({
+            ...base,
+            padding: '0px',
+        }),
+        dropdownIndicator: (base, state) => ({
+            ...base,
+            color: 'var(--N600)',
+            transition: 'all .2s ease',
+            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+        }),
+        option: (base, state) => ({
+            ...base,
+            padding: '4px 12px',
+            backgroundColor: getOptionBackgroundColor(state.isFocused, state.isSelected),
+            color: 'var(--N900)',
+            cursor: 'pointer',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            height: '36px',
+        }),
+        valueContainer: (base) => ({
+            ...base,
+            color: 'var(--N900)',
+            fontSize: '13px',
+            fontWeight: '400',
+            lineHeight: '20px',
+        }),
+        menuList: (base) => ({
+            ...base,
+            maxHeight: '164px',
+            height: '100%',
+        }),
+    })

package/src/Pages/GlobalConfigurations/index.ts

@@ -0,0 +1 @@
+export * from './BuildInfra'

package/src/Pages/index.ts

@@ -0,0 +1 @@
+export * from './GlobalConfigurations'

package/src/Shared/Components/APIResponseHandler/APIResponseHandler.tsx

@@ -0,0 +1,39 @@
+import { ErrorScreenNotAuthorized, GenericEmptyState, Progressing, Reload } from '../../../Common'
+import { APIResponseHandlerProps } from './types'
+
+const APIResponseHandler = ({
+    isLoading,
+    progressingProps,
+    error,
+    notAuthorized,
+    notFoundText,
+    reloadProps,
+    children,
+}: APIResponseHandlerProps) => {
+    // keeping it above loading since, not expected to send a call if not authorized
+    if (notAuthorized) {
+        return <ErrorScreenNotAuthorized />
+    }
+
+    if (isLoading) {
+        return <Progressing {...progressingProps} />
+    }
+
+    if (error) {
+        if (error?.code === 404) {
+            return (
+                <GenericEmptyState
+                    title={notFoundText?.title ?? 'Data not found'}
+                    subTitle={notFoundText?.subTitle ?? 'The data you are looking for does not exist'}
+                />
+            )
+        }
+        return <Reload {...reloadProps} />
+    }
+
+    // Had to add this since while using it is throwing ts error
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{children}</>
+}
+
+export default APIResponseHandler

package/src/Shared/Components/APIResponseHandler/index.ts

@@ -0,0 +1,2 @@
+export { default as APIResponseHandler } from './APIResponseHandler'
+export * from './types'

package/src/Shared/Components/APIResponseHandler/types.tsx

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react'
+import { ProgressingProps, ReloadType, ServerErrors } from '../../../Common'
+
+export interface EmptyPageTextType {
+    title?: string
+    subTitle?: string
+}
+
+export interface APIResponseHandlerProps {
+    /**
+     * If true, would show Progressing component
+     */
+    isLoading?: boolean
+    /**
+     * If loading is true, would load send these props to Progressing component
+     */
+    progressingProps?: ProgressingProps
+    /**
+     * If true and isLoading is false would show default Reload component
+     * In case error code is 404 show default 404 page using GenericEmptyState
+     */
+    error?: ServerErrors
+    /**
+     * Page text for 404 page
+     */
+    notFoundText?: EmptyPageTextType
+    /**
+     * If true would show Not Authorized page
+     */
+    notAuthorized?: boolean
+    /**
+     * If given, on Error, would load these props
+     */
+    reloadProps?: ReloadType
+    /**
+     * If no Error and no Loading, would load this component
+     */
+    children: ReactNode
+}

package/src/Shared/Components/ReactSelect/index.ts

@@ -0,0 +1 @@
+export * from './utils'

package/src/Shared/Components/ReactSelect/utils.tsx

@@ -0,0 +1,97 @@
+import Tippy from '@tippyjs/react'
+import { components } from 'react-select'
+import { stopPropagation } from '../../../Common'
+
+export const getCommonSelectStyle = (styleOverrides = {}) => ({
+    menuList: (base) => ({
+        ...base,
+        paddingTop: 0,
+        paddingBottom: 0,
+    }),
+    control: (base, state) => ({
+        ...base,
+        minHeight: '32px',
+        boxShadow: 'none',
+        backgroundColor: 'var(--N50)',
+        border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)',
+        cursor: 'pointer',
+    }),
+    option: (base, state) => ({
+        ...base,
+        color: 'var(--N900)',
+        backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+        padding: '10px 12px',
+    }),
+    dropdownIndicator: (base, state) => ({
+        ...base,
+        color: 'var(--N400)',
+        padding: '0 8px',
+        transition: 'all .2s ease',
+        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+    }),
+    valueContainer: (base) => ({
+        ...base,
+        padding: '0 8px',
+        fontWeight: '400',
+    }),
+    loadingMessage: (base) => ({
+        ...base,
+        color: 'var(--N600)',
+    }),
+    noOptionsMessage: (base) => ({
+        ...base,
+        color: 'var(--N600)',
+    }),
+    ...styleOverrides,
+})
+
+const getCustomOptionBackgroundColor = (isSelected: boolean, isFocused: boolean) => {
+    if (isSelected) {
+        return 'var(--B100)'
+    }
+
+    if (isFocused) {
+        return 'var(--N50)'
+    }
+
+    return 'var(--white)'
+}
+
+export const getCustomOptionSelectionStyle =
+    (styleOverrides = {}) =>
+    (base, state) => ({
+        ...base,
+        backgroundColor: getCustomOptionBackgroundColor(state.isSelected, state.isFocused),
+        color: state.isSelected ? 'var(--B500)' : 'var(--N900)',
+        textOverflow: 'ellipsis',
+        fontWeight: '500',
+        overflow: 'hidden',
+        textAlign: 'left',
+        whiteSpace: 'nowrap',
+        cursor: 'pointer',
+        fontSize: '13px',
+        ...styleOverrides,
+    })
+
+export const SelectOption = (props: any) => {
+    const { selectProps, data, showTippy, style, placement, tippyContent, tippyClass } = props
+    selectProps.styles.option = getCustomOptionSelectionStyle(style)
+    const getOption = () => (
+        <div onClick={stopPropagation}>
+            <components.Option {...props} />
+        </div>
+    )
+
+    return showTippy ? (
+        <Tippy
+            className={tippyClass || 'default-white'}
+            arrow={false}
+            placement={placement || 'right'}
+            content={tippyContent || data.label}
+        >
+            {getOption()}
+        </Tippy>
+    ) : (
+        getOption()
+    )
+}

package/src/Shared/Components/index.ts

@@ -0,0 +1,2 @@
+export * from './APIResponseHandler'
+export * from './ReactSelect'

package/src/Shared/index.ts

@@ -0,0 +1,2 @@
+export * from './Components'
+export * from './validations'