Remove and re-implement lodash-es

.changeset/small-suns-yawn.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Remove and re-implement lodash-es

packages/bezier-react/package.json

@@ -82,7 +82,6 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^25.2.3",
-    "@types/lodash-es": "^4.17.4",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@types/styled-components": "^5.1.5",
@@ -124,7 +123,6 @@
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^1.0.1",
     "@radix-ui/react-toolbar": "^1.0.1",
-    "lodash-es": "^4.17.15",
     "react-resize-detector": "^7.1.1",
     "react-textarea-autosize": "^8.3.4",
     "ssr-window": "^3.0.0",

packages/bezier-react/scripts/icon-index-template.js

@@ -1,17 +1,24 @@
-const _ = require('lodash')
 const path = require('path')
 
+const kebabCase = (value) => value
+  .trim()
+  .replace(/([a-z])([A-Z])/g, '$1-$2')
+  .replace(/([a-z])([0-9])/g, '$1-$2')
+  .replace(/([0-9])([A-Z])/g, '$1-$2')
+  .replace(/([0-9])([a-z])/g, '$1-$2')
+  .replace(/[\s_]+/g, '-')
+  .toLowerCase()
+
 function defaultIndexTemplate(filePaths) {
   const importEntries = []
   const mappedFies = []
   const exportEntries = []
 
   filePaths.forEach(filePath => {
     const basename = path.basename(filePath, path.extname(filePath))
-
     const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename
     importEntries.push(`import ${exportName} from './${basename}'`)
-    mappedFies.push(`  '${_.kebabCase(basename)}': ${exportName},`)
+    mappedFies.push(`  '${kebabCase(basename)}': ${exportName},`)
     exportEntries.push(`  ${exportName} as ${exportName}Icon,`)
   })
 

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

@@ -6,14 +6,15 @@ import { Story, Meta } from '@storybook/react'
 /* Internal dependencies */
 import { styled } from 'Foundation'
 import { getTitle } from 'Utils/storyUtils'
+import { isNaN } from 'Utils/typeUtils'
 import { StatusType } from 'Components/Status'
 import { Avatar } from './Avatar'
 import AvatarProps, { AvatarSize } from './Avatar.types'
 
 const MOCK_AVATAR_URL = 'https://cf.channel.io/thumb/200x200/pub-file/1/606d87d059a6093594c0/ch-symbol-filled-smiley-bg.png'
 
 const avatarSizeList = Object.keys(AvatarSize)
-  .filter(value => Number.isNaN(Number(value)) === true)
+  .filter(value => isNaN(Number(value)) === true)
   .map(key => AvatarSize[key])
 
 const statusTypeList = Object.keys(StatusType)

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

@@ -1,9 +1,12 @@
 /* External dependencies */
 import React, { forwardRef, useMemo } from 'react'
-import { noop, isEmpty } from 'lodash-es'
 
 /* Internal denpendencies */
 import { backgroundImageVariable } from 'Foundation'
+import {
+  isEmpty,
+} from 'Utils/typeUtils'
+import { noop } from 'Utils/functionUtils'
 import { Status, StatusSize } from 'Components/Status'
 // eslint-disable-next-line no-restricted-imports
 import defaultAvatarUrl from '../assets/defaultAvatar.svg'

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

@@ -5,13 +5,14 @@ import { Story, Meta } from '@storybook/react'
 
 /* Internal dependencies */
 import { getTitle } from 'Utils/storyUtils'
+import { isNaN } from 'Utils/typeUtils'
 import { Avatar, AvatarSize } from 'Components/Avatars/Avatar'
 import MOCK_AVATAR_LIST from './__mocks__/avatarList'
 import { AvatarGroupEllipsisType, AvatarGroupProps } from './AvatarGroup.types'
 import { AvatarGroup } from './AvatarGroup'
 
 const avatarSizeList = Object.keys(AvatarSize)
-  .filter(value => Number.isNaN(Number(value)) === true)
+  .filter(value => isNaN(Number(value)) === true)
   .map(key => AvatarSize[key])
 
 export default {

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

@@ -1,10 +1,10 @@
 /* External dependencies */
 import React, { forwardRef, useCallback, useMemo } from 'react'
-import { noop } from 'lodash-es'
 
 /* Internal dependencies */
 import { Typography } from 'Foundation'
 import { isLastIndex } from 'Utils/arrayUtils'
+import { noop } from 'Utils/functionUtils'
 import { Icon, IconSize, MoreIcon } from 'Components/Icon'
 import { AvatarProps, AvatarSize } from 'Components/Avatars/Avatar'
 import { AVATAR_GROUP_DEFAULT_SPACING } from 'Components/Avatars/AvatarStyle'

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

@@ -4,14 +4,14 @@ import {
   type Meta,
   type Story,
 } from '@storybook/react'
-import {
-  range,
-} from 'lodash-es'
 import base from 'paths.macro'
 
 /* Internal dependencies */
 import { styled } from 'Foundation'
 import { getTitle } from 'Utils/storyUtils'
+import {
+  range,
+} from 'Utils/numberUtils'
 import {
   Avatar,
   AvatarSize,

packages/bezier-react/src/components/Avatars/CheckableAvatar/CheckableAvatar.stories.tsx

@@ -6,6 +6,7 @@ import { Story, Meta } from '@storybook/react'
 /* Internal dependencies */
 import { styled } from 'Foundation'
 import { getTitle } from 'Utils/storyUtils'
+import { isNaN } from 'Utils/typeUtils'
 import { Avatar, AvatarSize } from 'Components/Avatars/Avatar'
 import { CheckableAvatar } from './CheckableAvatar'
 import CheckableAvatarProps from './CheckableAvatar.types'
@@ -51,7 +52,7 @@ const MOCK_AVATAR_LIST = [
 ]
 
 const avatarSizeList = Object.keys(AvatarSize)
-  .filter(value => Number.isNaN(Number(value)) === true)
+  .filter(value => isNaN(Number(value)) === true)
   .map(key => AvatarSize[key])
 
 export default {

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

@@ -2,10 +2,10 @@
 import React from 'react'
 import base from 'paths.macro'
 import type { Meta, Story } from '@storybook/react'
-import { noop } from 'lodash-es'
 
 /* Internal dependencies */
 import { getTitle, getObjectFromEnum } from 'Utils/storyUtils'
+import { noop } from 'Utils/functionUtils'
 import {
   StackItem,
   VStack,

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

@@ -1,12 +1,12 @@
 /* External dependencies */
 import React, { forwardRef } from 'react'
-import {
-  isNil,
-  isString,
-} from 'lodash-es'
 
 /* Internal dependencies */
 import { Typography } from 'Foundation'
+import {
+  isNil,
+  isString,
+} from 'Utils/typeUtils'
 import { Text } from 'Components/Text'
 import { IconSize } from 'Components/Icon'
 import { StackItem } from 'Components/Stack'

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

@@ -7,9 +7,6 @@ import {
   Meta,
   Story,
 } from '@storybook/react'
-import {
-  entries,
-} from 'lodash-es'
 
 /* Internal dependencies */
 import {
@@ -570,7 +567,7 @@ VariantsColor.storyName = 'Color variants'
 
 export const VariantsStyle: Story<{}> = () => (
   <VStack spacing={16} align="start">
-    { entries(ButtonStyleVariant)
+    { Object.entries(ButtonStyleVariant)
       .map(([key, styleVariant]) => (
         <StackItem key={styleVariant}>
           <HStack spacing={24} align="center">
@@ -596,7 +593,7 @@ VariantsStyle.storyName = 'Style variants'
 
 export const VariantsSize: Story<{}> = () => (
   <VStack spacing={16} align="start">
-    { entries(ButtonSize)
+    { Object.entries(ButtonSize)
       .map(([key, size]) => (
         <StackItem key={key}>
           <HStack spacing={24} align="center">

packages/bezier-react/src/components/Button/Button.styled.ts

@@ -1,10 +1,10 @@
-/* External dependencies */
-import { isEmpty, includes } from 'lodash-es'
-
 /* Internal dependencies */
 import { styled, css, SemanticNames } from 'Foundation'
 import DisabledOpacity from 'Constants/DisabledOpacity'
 import { gap } from 'Utils/styleUtils'
+import {
+  isEmpty,
+} from 'Utils/typeUtils'
 import { Text } from 'Components/Text'
 import ButtonProps, { ButtonSize, ButtonStyleVariant, ButtonColorVariant } from './Button.types'
 
@@ -96,7 +96,7 @@ function getPaddingCSSFromSizeAndContents({
     `
   }
 
-  const paddingVariant = includes([ButtonStyleVariant.Floating, ButtonStyleVariant.FloatingAlt], styleVariant)
+  const paddingVariant = [ButtonStyleVariant.Floating, ButtonStyleVariant.FloatingAlt].includes(styleVariant)
     ? 'floating'
     : 'default'
 

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

@@ -1,9 +1,15 @@
 /* External dependencies */
 import React, { forwardRef, useCallback, useMemo, useState } from 'react'
-import { flattenDeep, fromPairs, isArray, noop, values } from 'lodash-es'
 
 /* Internal dependencies */
 import { Typography, SemanticNames } from 'Foundation'
+import {
+  flattenDeep,
+} from 'Utils/arrayUtils'
+import {
+  isArray,
+} from 'Utils/typeUtils'
+import { noop } from 'Utils/functionUtils'
 import { LegacyIcon, IconSize, isIconName } from 'Components/Icon'
 import { Spinner, SpinnerSize } from 'Components/Spinner'
 import ButtonProps, {
@@ -42,7 +48,7 @@ function combinations(
 }
 
 const OVERRIDED_TEXT_DEFAULT_COLORS: { [key in VariantTuple]?: SemanticNames } = {
-  ...fromPairs(
+  ...Object.fromEntries(
     combinations(
       ButtonColorVariant.Monochrome,
       [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary],
@@ -53,35 +59,35 @@ const OVERRIDED_TEXT_DEFAULT_COLORS: { [key in VariantTuple]?: SemanticNames } =
 }
 
 const OVERRIDED_ICON_AND_SPINNER_DEFAULT_COLORS: { [key in VariantTuple]?: SemanticNames } = {
-  ...fromPairs(
+  ...Object.fromEntries(
     combinations(
       ButtonColorVariant.Monochrome,
       [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary],
       [ButtonSize.XL, ButtonSize.L, ButtonSize.M],
     )
       .map((key) => [key, 'txt-black-darker']),
   ),
-  ...fromPairs(
+  ...Object.fromEntries(
     combinations(
       ButtonColorVariant.Monochrome,
       [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary],
       [ButtonSize.S, ButtonSize.XS],
     )
       .map((key) => [key, 'txt-black-dark']),
   ),
-  ...fromPairs(
+  ...Object.fromEntries(
     combinations(
       ButtonColorVariant.MonochromeLight,
       [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary, ButtonStyleVariant.Floating],
-      values(ButtonSize),
+      Object.values(ButtonSize),
     )
       .map((key) => [key, 'txt-black-dark']),
   ),
-  ...fromPairs(
+  ...Object.fromEntries(
     combinations(
       ButtonColorVariant.MonochromeDark,
       [ButtonStyleVariant.Secondary, ButtonStyleVariant.Tertiary, ButtonStyleVariant.Floating],
-      values(ButtonSize),
+      Object.values(ButtonSize),
     )
       .map((key) => [key, 'txt-black-darker']),
   ),

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

@@ -1,9 +1,9 @@
 /* External dependencies */
 import React, { useMemo, forwardRef } from 'react'
-import { noop } from 'lodash-es'
 
 /* Internal dependencies */
 import { backgroundImageVariable } from 'Foundation'
+import { noop } from 'Utils/functionUtils'
 import type EmojiProps from './Emoji.types'
 import { EmojiSize } from './Emoji.types'
 import { Icon } from './Emoji.styled'

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

@@ -1,10 +1,10 @@
 /* External dependencies */
 import React from 'react'
-import { noop } from 'lodash-es'
 
 /* Internal dependencies */
 import { Themes } from 'Foundation'
 import { render } from 'Utils/testUtils'
+import { noop } from 'Utils/functionUtils'
 import DisabledOpacity from 'Constants/DisabledOpacity'
 import Checkbox, { CHECKBOX_TEST_ID, CHECKBOX_CHECKER_TEST_ID } from './Checkbox'
 import CheckboxProps from './Checkbox.types'

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

@@ -1,8 +1,12 @@
 /* External dependencies */
 import React, { Ref, forwardRef, useMemo } from 'react'
-import { values, isBoolean, isEmpty, includes, noop } from 'lodash-es'
 
 /* Internal dependencies */
+import {
+  isBoolean,
+  isEmpty,
+} from 'Utils/typeUtils'
+import { noop } from 'Utils/functionUtils'
 import { IconSize, IconProps, CheckBoldIcon, HyphenBoldIcon } from 'Components/Icon'
 import useFormFieldProps from 'Components/Forms/useFormFieldProps'
 import type CheckboxProps from './Checkbox.types'
@@ -12,7 +16,7 @@ import * as Styled from './Checkbox.styled'
 export const CHECKBOX_TEST_ID = 'bezier-react-checkbox'
 export const CHECKBOX_CHECKER_TEST_ID = 'bezier-react-checkbox-checker'
 
-const checkTypeValues = values(CheckType)
+const checkTypeValues = Object.values(CheckType)
 
 const checkIconCommonProps: Pick<IconProps, 'size' | 'color'> = {
   size: IconSize.XS,
@@ -38,7 +42,7 @@ function Checkbox(
 
   const checkStatus = useMemo(() => {
     if (isBoolean(checked)) { return (checked) ? CheckType.True : CheckType.False }
-    if (includes(checkTypeValues, checked)) { return checked }
+    if (checkTypeValues.includes(checked)) { return checked }
     return CheckType.False
   }, [checked])
 

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

@@ -1,10 +1,12 @@
 /* External dependencies */
 import React, { useState, useCallback, useMemo } from 'react'
-import { isNil } from 'lodash-es'
 
 /* Internal dependencies */
 import { Typography } from 'Foundation'
 import useId from 'Hooks/useId'
+import {
+  isNil,
+} from 'Utils/typeUtils'
 import { omitBezierComponentProps, pickBezierComponentProps } from 'Utils/propsUtils'
 // eslint-disable-next-line no-restricted-imports
 import FormFieldSize from '../FormFieldSize'

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

@@ -1,9 +1,11 @@
 /* External dependencies */
 import React, { forwardRef, useEffect, useMemo } from 'react'
-import { isEmpty } from 'lodash-es'
 
 /* Internal dependencies */
 import { Typography } from 'Foundation'
+import {
+  isEmpty,
+} from 'Utils/typeUtils'
 import useFormControlContext from 'Components/Forms/useFormControlContext'
 import type { BaseHelperTextProps, FormHelperTextProps, FormErrorMessageProps } from './FormHelperText.types'
 import * as Styled from './FormHelperText.styled'