@channel.io/bezier-react 2.6.1 → 3.0.0

package/src/components/AlphaIconButton/IconButton.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
@@ -35,7 +35,8 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
       active,
       shape = 'rectangle',
       content,
-      loading,
+      loading = false,
+      disabled: disabledProp = false,
       className,
       ...rest
     },
@@ -43,6 +44,8 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
   ) {
     const Comp = as as typeof BaseButton
 
+    const disabled = loading || disabledProp
+
     return (
       <Comp
         ref={forwardedRef}
@@ -55,6 +58,7 @@ export const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(
           active && styles.active,
           className
         )}
+        disabled={disabled}
         {...rest}
       >
         <div

package/src/components/AlphaIconButton/IconButton.types.ts

@@ -27,7 +27,7 @@ type IconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'
 
 interface IconButtonOwnProps {
   /**
-   * If `loading` is true, spinner will be shown, replacing the content.
+   * If `loading` is true, spinner will be shown, replacing the content. Also, the button will be disabled.
    * @default false
    */
   loading?: boolean

package/src/components/AlphaLoader/Loader.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { render } from '~/src/utils/test'
 

package/src/components/AlphaLoader/Loader.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import classNames from 'classnames'
 

package/src/components/AlphaStatusBadge/AlphaStatusBadge.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 
 import { Center } from '~/src/components/Center'

package/src/components/AlphaStatusBadge/StatusBadge.figma.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import figma from '@figma/code-connect'
 
 import { StatusBadge as AlphaStatusBadge } from './StatusBadge'
@@ -12,7 +10,7 @@ figma.connect(
       size: figma.enum('size', {
         medium: 'm',
         large: 'l',
-      }),
+      } as const),
       online: figma.boolean('online'),
       doNotDisturb: figma.boolean('doNotDisturb'),
     },

package/src/components/AlphaStatusBadge/StatusBadge.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { type CSSProperties, forwardRef } from 'react'
+import { type CSSProperties, forwardRef } from 'react'
 
 import { MoonFilledIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'

package/src/components/AlphaToggleButton/ToggleButton.module.scss

@@ -29,7 +29,7 @@
   }
 
   &:where(.shape-rectangle) {
-    border-radius: var(--alpha-dimension-10);
+    border-radius: var(--alpha-radius-10);
   }
 
   &:where(.shape-capsule) {

package/src/components/AlphaToggleButton/ToggleButton.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
 import * as TogglePrimitive from '@radix-ui/react-toggle'

package/src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef, useMemo } from 'react'
+import { Children, forwardRef, isValidElement, useMemo } from 'react'
 
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
 import classNames from 'classnames'
@@ -58,8 +58,8 @@ export const ToggleButtonGroup = forwardRef<
     }
   }
 
-  const ToggleButtons = React.Children.map(children, (toggleButton) => {
-    if (!React.isValidElement<ToggleButtonProps>(toggleButton)) {
+  const ToggleButtons = Children.map(children, (toggleButton) => {
+    if (!isValidElement<ToggleButtonProps>(toggleButton)) {
       return null
     }
 

package/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx

@@ -1,4 +1,5 @@
-import React, { type CSSProperties, forwardRef, useState } from 'react'
+import type { CSSProperties } from 'react'
+import { Children, forwardRef, useState } from 'react'
 
 import * as ToggleGroup from '@radix-ui/react-toggle-group'
 import classNames from 'classnames'
@@ -106,7 +107,7 @@ export const ToggleEmojiButtonGroup = forwardRef<
   const resizedButtonSize = useToggleEmojiButtonSize({
     container,
     enabled: shouldResizeButton,
-    buttonCount: React.Children.count(children),
+    buttonCount: Children.count(children),
   })
 
   return (

package/src/components/AlphaTooltipPrimitive/AlphaTooltipPrimitive.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { type Meta, type StoryObj } from '@storybook/react'
 
 import {

package/src/components/AppProvider/AppProvider.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { cleanup, render } from '@testing-library/react'
 
 import { AppProvider } from './AppProvider'

package/src/components/AppProvider/AppProvider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 
 import { getWindow } from 'ssr-window'
 

package/src/components/AutoFocus/AutoFocus.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { render } from '~/src/utils/test'
 
 import { AutoFocus } from './AutoFocus'

package/src/components/AutoFocus/AutoFocus.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef, useState } from 'react'
+import { forwardRef, useState } from 'react'
 
 import { Slot } from '@radix-ui/react-slot'
 

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 
 import { Avatar } from './Avatar'

package/src/components/Avatar/Avatar.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { render } from '~/src/utils/test'
 
 import {

package/src/components/Avatar/Avatar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef, useMemo } from 'react'
+import { forwardRef, isValidElement, useMemo } from 'react'
 
 import classNames from 'classnames'
 
@@ -68,7 +68,7 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
   const StatusComponent = useMemo(() => {
     if (
       (isEmpty(children) && !status) ||
-      (children && !React.isValidElement(children))
+      (children && !isValidElement(children))
     ) {
       return null
     }

package/src/components/AvatarGroup/AvatarGroup.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 
 import { Avatar } from '~/src/components/Avatar'

package/src/components/AvatarGroup/AvatarGroup.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { render } from '~/src/utils/test'
 
 import { Avatar } from '~/src/components/Avatar'

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -1,6 +1,7 @@
-'use client' 
+'use client'
 
-import React, { forwardRef, useCallback, useMemo } from 'react'
+import { forwardRef, useCallback, useMemo } from 'react'
+import * as React from 'react'
 
 import { MoreIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'

package/src/components/Badge/Badge.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { AppleIcon } from '@channel.io/bezier-icons'
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 

package/src/components/Badge/Badge.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { render } from '~/src/utils/test'
 
 import { BADGE_TEST_ID, Badge } from './Badge'

package/src/components/Badge/Badge.tsx

@@ -1,6 +1,6 @@
-'use client' 
+'use client'
 
-import React, { forwardRef, memo } from 'react'
+import { forwardRef, memo } from 'react'
 
 import { isEmpty } from '~/src/utils/type'
 

package/src/components/Banner/Banner.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import {
   BlockIcon,
   CancelIcon,

package/src/components/Banner/Banner.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { AllIcon, InfoIcon } from '@channel.io/bezier-icons'
 import { fireEvent } from '@testing-library/react'
 

package/src/components/Banner/Banner.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'

package/src/components/Banner/Banner.types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { JSX, ReactNode } from 'react'
 
 import { type BezierIcon, type IconName } from '@channel.io/bezier-icons'
 

package/src/components/BaseButton/BaseButton.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { createRef } from 'react'
 
 import { render } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
@@ -26,7 +26,7 @@ describe('BaseButton', () => {
   })
 
   it('should forward ref to the button element', () => {
-    const ref = React.createRef<HTMLButtonElement>()
+    const ref = createRef<HTMLButtonElement>()
     render(<BaseButton ref={ref}>Test Button</BaseButton>)
     expect(ref.current).toBeInstanceOf(HTMLButtonElement)
   })

package/src/components/BaseButton/BaseButton.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import classNames from 'classnames'
 

package/src/components/BaseTagBadge/BaseTagBadge.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import classNames from 'classnames'
 

package/src/components/Box/Box.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 
 import { Box } from './Box'

package/src/components/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import {
   ArrowRightIcon,

package/src/components/Button/Button.tsx

@@ -1,6 +1,6 @@
-'use client' 
+'use client'
 
-import React, { forwardRef, useCallback } from 'react'
+import { forwardRef, useCallback } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
 import classNames from 'classnames'
@@ -94,8 +94,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       as = BaseButton,
       className,
       text,
-      disabled = false,
       loading = false,
+      disabled: disabledProp = false,
       active = false,
       size = 'm',
       styleVariant = 'primary',
@@ -109,6 +109,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ) {
     const Comp = as as typeof BaseButton
 
+    const disabled = loading || disabledProp
+
     const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
       (event) => {
         if (!disabled) {

package/src/components/Button/Button.types.ts

@@ -52,7 +52,7 @@ interface ButtonOwnProps {
   text?: string
 
   /**
-   * If `loading` is true, spinner will be shown, replacing the content.
+   * If `loading` is true, spinner will be shown, replacing the content. Also, the button will be disabled.
    * @default false
    */
   loading?: boolean

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import type { Meta, StoryFn, StoryObj } from '@storybook/react'
 
 import { Button } from '~/src/components/Button'

package/src/components/ButtonGroup/ButtonGroup.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { render } from '~/src/utils/test'
 
 import { Button } from '~/src/components/Button'
@@ -8,7 +6,7 @@ import { ButtonGroup } from './ButtonGroup'
 import type { ButtonGroupProps } from './ButtonGroup.types'
 
 describe('ButtonGroup', () => {
-  let props: ButtonGroupProps
+  const props: ButtonGroupProps = {}
 
   it('creates a button group with spacing', () => {
     const { getByRole } = render(

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { Stack } from '~/src/components/Stack'
 

package/src/components/Center/Center.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 
 import { Center } from './Center'

package/src/components/Center/Center.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { render } from '~/src/utils/test'
 
 import { Center } from './Center'

package/src/components/Center/Center.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import classNames from 'classnames'
 

package/src/components/CheckableAvatar/CheckableAvatar.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 
 import { CheckableAvatar } from './CheckableAvatar'

package/src/components/CheckableAvatar/CheckableAvatar.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { isInaccessible } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 

package/src/components/CheckableAvatar/CheckableAvatar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { CheckIcon } from '@channel.io/bezier-icons'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { type Meta, type StoryFn } from '@storybook/react'
 
 import { Checkbox } from './Checkbox'

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { isInaccessible } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'

package/src/components/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 'use client'
-
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
+import * as React from 'react'
 
 import { CheckBoldIcon, HyphenBoldIcon } from '@channel.io/bezier-icons'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'

package/src/components/ConfirmModal/ConfirmModal.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-restricted-imports */
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { type Meta, type StoryFn } from '@storybook/react'
 

package/src/components/ConfirmModal/ConfirmModal.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { isInaccessible } from '@testing-library/react'
 import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event'
 

package/src/components/ConfirmModal/ConfirmModal.tsx

@@ -1,6 +1,6 @@
 'use client'
-
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
+import * as React from 'react'
 
 import {
   Modal,

package/src/components/Divider/Divider.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { render } from '~/src/utils/test'
 
 import { DIVIDER_TEST_ID, Divider } from './Divider'

package/src/components/Divider/Divider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import * as SeparatorPrimitive from '@radix-ui/react-separator'
 import classNames from 'classnames'

package/src/components/Emoji/Emoji.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { render } from '~/src/utils/test'
 
 import { EMOJI_TEST_ID, Emoji } from './Emoji'

package/src/components/Emoji/Emoji.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { type CSSProperties, forwardRef } from 'react'
+import { type CSSProperties, forwardRef } from 'react'
 
 import classNames from 'classnames'
 

package/src/components/FeatureProvider/FeatureProvider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { useIsomorphicLayoutEffect } from '~/src/hooks/useIsomorphicLayoutEffect'
 import { createContext } from '~/src/utils/react'

package/src/components/FormControl/FormControl.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import type { Meta, StoryFn, StoryObj } from '@storybook/react'
 
 import { Checkbox } from '~/src/components/Checkbox'

package/src/components/FormControl/FormControl.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { isInaccessible } from '@testing-library/react'
 
 import { render } from '~/src/utils/test'

package/src/components/FormControl/FormControl.tsx

@@ -1,6 +1,6 @@
 'use client'
-
-import React, { forwardRef, useCallback, useMemo, useState } from 'react'
+import { forwardRef, useCallback, useMemo, useState } from 'react'
+import * as React from 'react'
 
 import classNames from 'classnames'
 

package/src/components/FormControl/__mocks__/forms.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { FormControl } from '~/src/components/FormControl'
 import { FormGroup } from '~/src/components/FormGroup'
 import {

package/src/components/FormControl/__snapshots__/FormControl.test.tsx.snap

@@ -45,7 +45,6 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
             class="TextFieldInput"
             id="field-:r3:"
             size="36"
-            value=""
           />
         </div>
       </div>
@@ -72,7 +71,6 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
             class="TextFieldInput"
             id="field-:r4:"
             size="36"
-            value=""
           />
         </div>
       </div>
@@ -134,7 +132,6 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
             class="TextFieldInput"
             id="field-:r6:"
             size="36"
-            value=""
           />
         </div>
       </div>
@@ -161,7 +158,6 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
             class="TextFieldInput"
             id="field-:r7:"
             size="36"
-            value=""
           />
         </div>
       </div>
@@ -202,7 +198,6 @@ exports[`FormControl > Snapshot > With single field 1`] = `
       class="TextFieldInput"
       id="form"
       size="36"
-      value=""
     />
   </div>
   <p
@@ -240,7 +235,6 @@ exports[`FormControl > Snapshot > With single field and left label position 1`]
       class="TextFieldInput"
       id="form"
       size="36"
-      value=""
     />
   </div>
   <p