npm - @channel.io/bezier-react - Versions diffs - 2.6.2 → 3.0.0 - Mend

@channel.io/bezier-react 2.6.2 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (825) hide show

package/src/components/AlphaFloatingIconButton/FloatingIconButton.figma.tsx CHANGED Viewed

@@ -1,5 +1,3 @@
-import React from 'react'
 import figma from '@figma/code-connect'
 import { FloatingIconButton as AlphaFloatingIconButton } from './FloatingIconButton'
@@ -15,11 +13,11 @@ figma.connect(
         'medium (default)': 'm',
         large: 'l',
         xlarge: 'xl',
-      }),
+      } as const),
       variant: figma.enum('variant', {
         primary: 'primary',
         secondary: 'secondary',
-      }),
+      } as const),
       color: figma.enum('color', {
         blue: 'blue',
         cobalt: 'cobalt',
@@ -30,7 +28,7 @@ figma.connect(
         purple: 'purple',
         darkGrey: 'dark-grey',
         lightGrey: 'light-grey',
-      }),
+      } as const),
       /**
        * TODO: Add Code Connect for Icon component
        * @see {@link https://github.com/figma/code-connect/blob/main/cli/scripts/README.md}

package/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss CHANGED Viewed

@@ -1,6 +1,6 @@
 @use '../../styles/mixins/dimension';
-@import '../Icon/Icon.module';
+@use '../Icon/Icon.module';
 $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
@@ -167,7 +167,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     align-items: center;
     justify-content: center;
-    @each $size, $value in $size-map {
+    @each $size, $value in Icon.$size-map {
       &:where(.size-#{$size}) {
         & :is(.Loader) {
           @include dimension.square(#{$value}px);

package/src/components/AlphaFloatingIconButton/FloatingIconButton.tsx CHANGED Viewed

@@ -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/AlphaIconButton/IconButton.figma.tsx CHANGED Viewed

@@ -1,5 +1,3 @@
-import React from 'react'
 import figma from '@figma/code-connect'
 import { IconButton as AlphaIconButton } from './IconButton'
@@ -15,12 +13,12 @@ figma.connect(
         'medium (default)': 'm',
         large: 'l',
         xlarge: 'xl',
-      }),
+      } as const),
       variant: figma.enum('variant', {
         primary: 'primary',
         secondary: 'secondary',
         tertiary: 'tertiary',
-      }),
+      } as const),
       color: figma.enum('color', {
         blue: 'blue',
         cobalt: 'cobalt',
@@ -32,11 +30,11 @@ figma.connect(
         darkGrey: 'dark-grey',
         lightGrey: 'light-grey',
         'white (absolute)': 'white-absolute',
-      }),
+      } as const),
       shape: figma.enum('shape', {
         circle: 'circle',
         rectangle: 'rectangle',
-      }),
+      } as const),
       /**
        * TODO: Add Code Connect for Icon component
        * @see {@link https://github.com/figma/code-connect/blob/main/cli/scripts/README.md}

package/src/components/AlphaIconButton/IconButton.module.scss CHANGED Viewed

@@ -1,6 +1,6 @@
 @use '../../styles/mixins/dimension';
-@import '../Icon/Icon.module';
+@use '../Icon/Icon.module';
 $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
@@ -271,7 +271,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     align-items: center;
     justify-content: center;
-    @each $size, $value in $size-map {
+    @each $size, $value in Icon.$size-map {
       &:where(.size-#{$size}) {
         & :is(.Loader) {
           @include dimension.square(#{$value}px);

package/src/components/AlphaIconButton/IconButton.tsx CHANGED Viewed

@@ -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/AlphaLoader/Loader.test.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/src/components/AutoFocus/AutoFocus.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/src/components/Avatar/Avatar.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/src/components/Button/Button.tsx CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/src/components/Center/Center.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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