refactor(typeutils): add noop and migration arrow function () => {}

Author: annie1229

packages/bezier-react/src/components/Avatars/Avatar/Avatar.tsx

@@ -5,6 +5,7 @@ import React, { forwardRef, useMemo } from 'react'
 import { backgroundImageVariable } from 'Foundation'
 import {
   isEmpty,
+  noop,
 } from 'Utils/typeUtils'
 import { Status, StatusSize } from 'Components/Status'
 // eslint-disable-next-line no-restricted-imports
@@ -26,9 +27,9 @@ export const Avatar = forwardRef(function Avatar({
   disabled = false,
   showBorder = false,
   status,
-  onClick = () => {},
-  onMouseEnter = () => {},
-  onMouseLeave = () => {},
+  onClick = noop,
+  onMouseEnter = noop,
+  onMouseLeave = noop,
   className,
   wrapperClassName,
   interpolation,

packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.tsx

@@ -4,6 +4,7 @@ import React, { forwardRef, useCallback, useMemo } from 'react'
 /* Internal dependencies */
 import { Typography } from 'Foundation'
 import { isLastIndex } from 'Utils/arrayUtils'
+import { noop } from 'Utils/typeUtils'
 import { Icon, IconSize, MoreIcon } from 'Components/Icon'
 import { AvatarProps, AvatarSize } from 'Components/Avatars/Avatar'
 import { AVATAR_GROUP_DEFAULT_SPACING } from 'Components/Avatars/AvatarStyle'
@@ -66,8 +67,8 @@ export const AvatarGroup = forwardRef(function AvatarGroup({
   size = AvatarSize.Size24,
   spacing = AVATAR_GROUP_DEFAULT_SPACING,
   ellipsisType = AvatarGroupEllipsisType.Icon,
-  onMouseEnterEllipsis = () => {},
-  onMouseLeaveEllipsis = () => {},
+  onMouseEnterEllipsis = noop,
+  onMouseLeaveEllipsis = noop,
   ellipsisInterpolation,
   style,
   className,

packages/bezier-react/src/components/Banner/Banner.stories.tsx

@@ -5,6 +5,7 @@ import type { Meta, Story } from '@storybook/react'
 
 /* Internal dependencies */
 import { getTitle, getObjectFromEnum } from 'Utils/storyUtils'
+import { noop } from 'Utils/typeUtils'
 import {
   StackItem,
   VStack,
@@ -63,7 +64,7 @@ Playground.args = {
   icon: 'lightbulb',
   content: 'Information here.',
   actionIcon: 'cancel-small',
-  onClickAction: () => {},
+  onClickAction: noop,
 }
 
 export const Overview: Story<{}> = () => (

packages/bezier-react/src/components/Button/Button.tsx

@@ -8,6 +8,7 @@ import {
 } from 'Utils/arrayUtils'
 import {
   isArray,
+  noop,
 } from 'Utils/typeUtils'
 import { LegacyIcon, IconSize, isIconName } from 'Components/Icon'
 import { Spinner, SpinnerSize } from 'Components/Spinner'
@@ -109,10 +110,10 @@ export const Button = forwardRef(function Button(
     colorVariant = ButtonColorVariant.Blue,
     leftContent,
     rightContent,
-    onClick = () => {},
-    onMouseEnter = () => {},
-    onMouseLeave = () => {},
-    onBlur = () => {},
+    onClick = noop,
+    onMouseEnter = noop,
+    onMouseLeave = noop,
+    onBlur = noop,
     ...rest
   }: ButtonProps,
   forwardedRef: React.Ref<HTMLElement>,

packages/bezier-react/src/components/Emoji/Emoji.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, forwardRef } from 'react'
 
 /* Internal dependencies */
 import { backgroundImageVariable } from 'Foundation'
+import { noop } from 'Utils/typeUtils'
 import type EmojiProps from './Emoji.types'
 import { EmojiSize } from './Emoji.types'
 import { Icon } from './Emoji.styled'
@@ -19,7 +20,7 @@ function Emoji(
     interpolation,
     size = EmojiSize.Size24,
     testId = EMOJI_TEST_ID,
-    onClick = () => {},
+    onClick = noop,
   }: EmojiProps,
   forwardedRef: React.Ref<HTMLDivElement>,
 ) {

packages/bezier-react/src/components/Forms/Checkbox/Checkbox.test.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 /* Internal dependencies */
 import { Themes } from 'Foundation'
 import { render } from 'Utils/testUtils'
+import { noop } from 'Utils/typeUtils'
 import DisabledOpacity from 'Constants/DisabledOpacity'
 import Checkbox, { CHECKBOX_TEST_ID, CHECKBOX_CHECKER_TEST_ID } from './Checkbox'
 import CheckboxProps from './Checkbox.types'
@@ -17,7 +18,7 @@ describe('Checkbox test >', () => {
       contentClassName: undefined,
       disabled: false,
       checked: CheckType.False,
-      onClick: () => {},
+      onClick: noop,
     }
   })
 

packages/bezier-react/src/components/Forms/Checkbox/Checkbox.tsx

@@ -5,6 +5,7 @@ import React, { Ref, forwardRef, useMemo } from 'react'
 import {
   isBoolean,
   isEmpty,
+  noop,
 } from 'Utils/typeUtils'
 import { IconSize, IconProps, CheckBoldIcon, HyphenBoldIcon } from 'Components/Icon'
 import useFormFieldProps from 'Components/Forms/useFormFieldProps'
@@ -29,7 +30,7 @@ function Checkbox(
     contentClassName,
     checked = false,
     children,
-    onClick = () => {},
+    onClick = noop,
     ...rest
   }: CheckboxProps,
   forwardedRef: Ref<any>,
@@ -71,7 +72,7 @@ function Checkbox(
     <Styled.Wrapper
       ref={forwardedRef}
       disabled={disabled}
-      onClick={disabled ? () => {} : onClick}
+      onClick={disabled ? noop : onClick}
       data-testid={testId}
       {...ownProps}
     >

packages/bezier-react/src/components/Forms/Inputs/Select/Select.tsx

@@ -14,6 +14,7 @@ import React, {
 import { Typography } from 'Foundation'
 import {
   isEmpty,
+  noop,
 } from 'Utils/typeUtils'
 import { LegacyIcon, Icon, IconSize, isIconName, ChevronUpIcon, ChevronDownIcon } from 'Components/Icon'
 import { OverlayPosition } from 'Components/Overlay'
@@ -56,8 +57,8 @@ function Select({
   dropdownMarginY = DEFAULT_DROPDOWN_MARGIN_Y,
   dropdownZIndex = DEFAULT_DROPDOWN_Z_INDEX,
   dropdownPosition = OverlayPosition.BottomLeft,
-  onClickTrigger = () => {},
-  onHideDropdown = () => {},
+  onClickTrigger = noop,
+  onHideDropdown = noop,
   children,
   ...rest
 }: SelectProps,

packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.tsx

@@ -7,6 +7,7 @@ import { useResizeDetector } from 'react-resize-detector'
 import useMergeRefs from 'Hooks/useMergeRefs'
 import {
   isNumber,
+  noop,
 } from 'Utils/typeUtils'
 import {
   range,
@@ -53,7 +54,7 @@ function SegmentedControl(
     size = SegmentedControlSize.M,
     /* OptionItemHost props */
     selectedOptionIndex = 0,
-    onChangeOption = () => {},
+    onChangeOption = noop,
     /* HTMLAttribute props */
     children,
     ...rest
@@ -116,7 +117,7 @@ function SegmentedControl(
         width: optionItemWidth,
         left: optionItemLeft(index),
       }}
-      onClick={() => (disabled ? () => {} : handleClickOptionItem(index))}
+      onClick={() => (disabled ? noop : handleClickOptionItem(index))}
     >
       <Text
         typo={SIZE_TO_OPTION_TYPOGRAPHY[size]}

packages/bezier-react/src/components/Forms/Slider/Slider.tsx

@@ -8,6 +8,7 @@ import React, {
 import * as SliderPrimitive from '@radix-ui/react-slider'
 
 /* Internal dependencies */
+import { noop } from 'Utils/typeUtils'
 import SliderProps from './Slider.types'
 import * as Styled from './Slider.styled'
 
@@ -18,8 +19,8 @@ export const Slider = forwardRef(function Slider(
   {
     width = 36,
     guide,
-    onThumbPointerDown = () => {},
-    onThumbPointerUp = () => {},
+    onThumbPointerDown = noop,
+    onThumbPointerUp = noop,
     defaultValue = [5],
     value,
     disabled = false,