@channel.io/bezier-react 2.3.2 → 2.4.0

package/src/components/AlphaToggleButton/ToggleButton.tsx

@@ -1,10 +1,11 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
 import * as TogglePrimitive from '@radix-ui/react-toggle'
 import classNames from 'classnames'
 
-import { AlphaLoader } from '~/src/components/AlphaLoader'
 import { useToggleButtonContext } from '~/src/components/AlphaToggleButton/ToggleButtonContext'
 import { BaseButton } from '~/src/components/BaseButton'
 import { Icon, type IconSize } from '~/src/components/Icon'
@@ -43,7 +44,6 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
       shape: shapeProps,
       size = 'm',
       className,
-      loading,
       onSelectedChange,
       ...rest
     },
@@ -70,12 +70,7 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
             className
           )}
         >
-          <div
-            className={classNames(
-              styles.ButtonContent,
-              loading && styles.loading
-            )}
-          >
+          <div className={classNames(styles.ButtonContent)}>
             <SideContent
               size={ICON_SIZE}
               content={prefixContent}
@@ -96,22 +91,6 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
               content={suffixContent}
             />
           </div>
-
-          {loading && (
-            <div
-              className={classNames(
-                styles.ButtonLoader,
-                // NOTE: Loader size is the same as icon size
-                styles[`size-${ICON_SIZE}`]
-              )}
-            >
-              <AlphaLoader
-                size="s"
-                className={styles.Loader}
-                variant="secondary"
-              />
-            </div>
-          )}
         </Comp>
       </TogglePrimitive.Root>
     )

package/src/components/AlphaToggleButton/ToggleButton.types.ts

@@ -17,12 +17,6 @@ interface ToggleButtonOwnProps {
    */
   text: string
 
-  /**
-   * If `loading` is true, spinner will be shown, replacing the content.
-   * @default false
-   */
-  loading?: boolean
-
   /**
    * Props that shows whether the button is selected.
    * @default false

package/src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useMemo } from 'react'
 
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'

package/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import type { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import { Center } from '~/src/components/Center'
+
+import {
+  ToggleEmojiButtonGroup,
+  ToggleEmojiButtonSource,
+} from './ToggleEmojiButtonGroup'
+import type {
+  ToggleEmojiButtonGroupProps,
+  ToggleEmojiButtonSourceProps,
+} from './ToggleEmojiButtonGroup.types'
+
+const meta: Meta<typeof ToggleEmojiButtonGroup> = {
+  component: ToggleEmojiButtonGroup,
+}
+export default meta
+
+type ToggleButtonCompositionType = ToggleEmojiButtonGroupProps &
+  Pick<ToggleEmojiButtonSourceProps, 'variant'>
+
+const Template: StoryFn<ToggleButtonCompositionType> = ({
+  fillDirection,
+  variant,
+}) => {
+  return (
+    <Center
+      width="25vw"
+      height="15vh"
+      backgroundColor="bg-lounge"
+    >
+      <ToggleEmojiButtonGroup
+        defaultValue="blush"
+        fillDirection={fillDirection}
+      >
+        <ToggleEmojiButtonSource
+          variant={variant}
+          value="blush"
+          name="blush"
+        />
+        <ToggleEmojiButtonSource
+          variant={variant}
+          value="grinning"
+          name="grinning"
+        />
+      </ToggleEmojiButtonGroup>
+    </Center>
+  )
+}
+
+export const Primary = {
+  render: Template,
+
+  args: {
+    fillDirection: 'horizontal',
+    variant: 'primary',
+  },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/fPXP9zfjZU9NyARnhTWL6o/Input?node-id=425-281&t=ktusTVyr8cD3cTlt-1',
+    },
+  },
+} satisfies StoryObj<ToggleButtonCompositionType>

package/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss

@@ -0,0 +1,76 @@
+@use '../../styles/mixins/dimension';
+
+.ToggleEmojiButtonGroup {
+  display: flex;
+  gap: var(--b-toggle-emoji-button-group-gap);
+  align-items: center;
+  justify-content: center;
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  &:where(.fillDirection-horizontal) {
+    width: 100%;
+
+    & :where(.ToggleEmojiButtonSource) {
+      flex-grow: 1;
+    }
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  &:where(.fillDirection-all) {
+    width: 100%;
+    height: 100%;
+
+    & :is(.ToggleEmojiButtonSource) {
+      max-width: 160px;
+      max-height: 160px;
+    }
+  }
+}
+
+.ToggleEmojiButtonSource {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 12px;
+
+  border-radius: var(--radius-12);
+
+  &:where(.size-m) {
+    @include dimension.square(var(--b-toggle-emoji-button-size));
+  }
+
+  &:where(.variant-primary) {
+    background-color: var(--alpha-color-bg-grey-lightest);
+    box-shadow: var(--alpha-shadow-input-default);
+
+    &:where(&:hover) {
+      background-color: var(--alpha-color-bg-grey-lighter);
+    }
+
+    &:where([data-state='on']) {
+      background-color: var(--alpha-color-bg-blue-lightest);
+      box-shadow: 0 0 0 1px var(--alpha-color-primary-bg-normal) inset;
+    }
+  }
+
+  &:where(.variant-secondary) {
+    background-color: var(--alpha-color-bg-black-lightest);
+
+    &:where(&:hover) {
+      background-color: var(--alpha-color-bg-black-lighter);
+    }
+
+    &:where([data-state='on']) {
+      background-color: var(--alpha-color-primary-bg-lighter);
+    }
+  }
+
+  & :where(.ButtonContent) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx

@@ -0,0 +1,141 @@
+import React, { type CSSProperties, forwardRef, useState } from 'react'
+
+import * as ToggleGroup from '@radix-ui/react-toggle-group'
+import classNames from 'classnames'
+
+import useMergeRefs from '~/src/hooks/useMergeRefs'
+import { cssDimension } from '~/src/utils/style'
+
+import {
+  EMOJI_BUTTON_GROUP_GAP,
+  EMOJI_BUTTON_SIZE,
+  useToggleEmojiButtonSize,
+} from '~/src/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize'
+import { BaseButton } from '~/src/components/BaseButton'
+import { Emoji } from '~/src/components/Emoji'
+
+import {
+  type ToggleEmojiButtonGroupProps,
+  type ToggleEmojiButtonSourceProps,
+} from './ToggleEmojiButtonGroup.types'
+
+import styles from './ToggleEmojiButtonGroup.module.scss'
+
+const EMOJI_SIZE = 30
+
+/**
+ * Toggle Button that contains `Emoji` component with size fixed to 30.
+ * It should be used with `ToggleEmojiButtonGroup` component.
+ * @example
+ * ```tsx
+ * <ToggleEmojiButtonSource
+ *   content={
+ *     <Emoji
+ *       imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/a.png"
+ *       name="A"
+ *    />
+ *   }
+ * />
+ * ```
+ */
+export const ToggleEmojiButtonSource = forwardRef<
+  HTMLButtonElement,
+  ToggleEmojiButtonSourceProps
+>(function ToggleEmojiButtonSource(
+  { name, variant, className, selected, size = 'm', value, onResize, ...rest },
+  forwardedRef
+) {
+  return (
+    <ToggleGroup.Item
+      value={value}
+      asChild
+    >
+      <BaseButton
+        ref={forwardedRef}
+        className={classNames(
+          styles.ToggleEmojiButtonSource,
+          styles[`size-${size}`],
+          styles[`variant-${variant}`],
+          className
+        )}
+        {...rest}
+      >
+        <div className={classNames(styles.ButtonContent)}>
+          <Emoji
+            name={name}
+            size={`${EMOJI_SIZE}`}
+          />
+        </div>
+      </BaseButton>
+    </ToggleGroup.Item>
+  )
+})
+
+/**
+ * Component for grouping `ToggleEmojiButtonSource`.
+ * @example
+ * ```tsx
+ * <ToggleEmojiButtonGroup
+ *   fillDirection="horizontal"
+ * >
+ *   <ToggleEmojiButtonSource content={<Emoji />} />
+ *   <ToggleEmojiButtonSource content={<Emoji />} />
+ * </ToggleEmojiButtonGroup>
+ * ```
+ */
+export const ToggleEmojiButtonGroup = forwardRef<
+  HTMLDivElement,
+  ToggleEmojiButtonGroupProps
+>(function ToggleEmojiButtonGroup(
+  {
+    fillDirection,
+    value,
+    className,
+    defaultValue,
+    children,
+    style,
+    dir = 'ltr',
+    onValueChange,
+    ...rest
+  },
+  forwardedRef
+) {
+  const [container, setContainer] = useState<null | HTMLDivElement>(null)
+  const mergedRefs = useMergeRefs(setContainer, forwardedRef)
+  const shouldResizeButton = fillDirection === 'all'
+  const resizedButtonSize = useToggleEmojiButtonSize({
+    container,
+    enabled: shouldResizeButton,
+    buttonCount: React.Children.count(children),
+  })
+
+  return (
+    <ToggleGroup.Root
+      type="single"
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+      value={value}
+      ref={mergedRefs}
+      style={
+        {
+          '--b-toggle-emoji-button-emoji-size': cssDimension(EMOJI_SIZE),
+          '--b-toggle-emoji-button-size': cssDimension(
+            shouldResizeButton ? resizedButtonSize : EMOJI_BUTTON_SIZE
+          ),
+          '--b-toggle-emoji-button-group-gap': cssDimension(
+            EMOJI_BUTTON_GROUP_GAP
+          ),
+          ...style,
+        } as CSSProperties
+      }
+      className={classNames(
+        styles.ToggleEmojiButtonGroup,
+        fillDirection && styles[`fillDirection-${fillDirection}`],
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </ToggleGroup.Root>
+  )
+})

package/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.types.ts

@@ -0,0 +1,62 @@
+import { type BezierComponentProps, type SizeProps } from '~/src/types/props'
+
+interface ToggleEmojiButtonSourceOwnProps {
+  /**
+   * Types of visual styles for button.
+   * @default 'primary'
+   */
+  variant: 'primary' | 'secondary'
+  /**
+   * Props that shows whether the button is selected.
+   * @default false
+   */
+  selected?: boolean
+  /**
+   * Name of emoji in the button.
+   */
+  name: string
+  /**
+   * Controlled value of the button.
+   */
+  value: string
+}
+
+interface ToggleEmojiButtonGroupOwnProps {
+  /**
+   * Growing direction of button.
+   * @default undefined
+   */
+  fillDirection?: 'horizontal' | 'all'
+  /**
+   * Controlled value of the button item to select.
+   * should be used with `onValueChange`.
+   */
+  value?: string
+  /**
+   * The value of the button to show as selected when initially rendered.
+   * Use when you do not need to control the state of the items.
+   */
+  defaultValue?: string
+  /**
+   *
+   * @default 'ltr'
+   * The reading direction of the toggle group.
+   */
+  dir?: 'ltr' | 'rtl'
+  /**
+   * Event handler called when the value changes.
+   */
+  onValueChange?: (value: string) => void
+}
+
+export interface ToggleEmojiButtonGroupProps
+  extends Omit<BezierComponentProps<'div'>, 'dir' | 'defaultValue'>,
+    ToggleEmojiButtonGroupOwnProps {}
+
+export interface ToggleEmojiButtonSourceProps
+  extends Omit<
+      BezierComponentProps<'button'>,
+      keyof ToggleEmojiButtonSourceOwnProps
+    >,
+    SizeProps<'m'>,
+    ToggleEmojiButtonSourceOwnProps {}

package/src/components/AlphaToggleEmojiButtonGroup/index.ts

@@ -0,0 +1,9 @@
+export type {
+  ToggleEmojiButtonGroupProps as AlphaToggleEmojiButtonGroupProps,
+  ToggleEmojiButtonSourceProps as AlphaToggleEmojiButtonSourceProps,
+} from './ToggleEmojiButtonGroup.types'
+
+export {
+  ToggleEmojiButtonGroup as AlphaToggleEmojiButtonGroup,
+  ToggleEmojiButtonSource as AlphaToggleEmojiButtonSource,
+} from './ToggleEmojiButtonGroup'

package/src/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize.ts

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useState } from 'react'
+
+export const EMOJI_BUTTON_GROUP_GAP = 6
+export const EMOJI_BUTTON_SIZE = 54
+
+interface UseToggleEmojiButtonSizeProps {
+  container: HTMLDivElement | null
+  enabled: boolean
+  buttonCount: number
+}
+
+export function useToggleEmojiButtonSize({
+  container,
+  enabled,
+  buttonCount,
+}: UseToggleEmojiButtonSizeProps) {
+  const [buttonSize, setButtonSize] = useState(EMOJI_BUTTON_SIZE)
+
+  const adjustButtonSize = useCallback(() => {
+    if (!container || !enabled) {
+      return
+    }
+
+    const containerWidth = container.clientWidth
+    const containerHeight = container.clientHeight
+    const size = Math.max(
+      Math.min(
+        (containerWidth - EMOJI_BUTTON_GROUP_GAP * (buttonCount - 1)) /
+          buttonCount,
+        containerHeight - EMOJI_BUTTON_GROUP_GAP
+      ),
+      EMOJI_BUTTON_SIZE
+    )
+
+    setButtonSize(size)
+  }, [buttonCount, container, enabled])
+
+  useEffect(
+    function setResizeObserver() {
+      let resizeObserver: ResizeObserver | null = null
+
+      if (enabled && container) {
+        resizeObserver = new ResizeObserver(() => {
+          adjustButtonSize()
+        })
+
+        resizeObserver.observe(container)
+        container.addEventListener('resize', adjustButtonSize)
+      }
+
+      return () => {
+        if (container) {
+          resizeObserver?.unobserve(container)
+          container?.removeEventListener('resize', adjustButtonSize)
+        }
+      }
+    },
+    [adjustButtonSize, container, enabled]
+  )
+
+  return buttonSize
+}

package/src/components/AlphaTooltipPrimitive/TooltipPrimitive.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   Tooltip,
   TooltipArrow,

package/src/components/AppProvider/AppProvider.tsx

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

package/src/components/AutoFocus/AutoFocus.tsx

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

package/src/components/Avatar/Avatar.tsx

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

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -1,3 +1,5 @@
+'use client' 
+
 import React, { forwardRef, useCallback, useMemo } from 'react'
 
 import { MoreIcon } from '@channel.io/bezier-icons'

package/src/components/Badge/Badge.tsx

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

package/src/components/Banner/Banner.tsx

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

package/src/components/BaseButton/BaseButton.tsx

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

package/src/components/BaseTagBadge/BaseTagBadge.tsx

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

package/src/components/Box/Box.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { createElement, forwardRef } from 'react'
 
 import classNames from 'classnames'

package/src/components/Button/Button.tsx

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

package/src/components/ButtonGroup/ButtonGroup.tsx

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

package/src/components/Center/Center.tsx

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

package/src/components/CheckableAvatar/CheckableAvatar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { CheckIcon } from '@channel.io/bezier-icons'

package/src/components/Checkbox/Checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { CheckBoldIcon, HyphenBoldIcon } from '@channel.io/bezier-icons'

package/src/components/ConfirmModal/ConfirmModal.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import {

package/src/components/Divider/Divider.tsx

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

package/src/components/Emoji/Emoji.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { type CSSProperties, forwardRef } from 'react'
 
 import classNames from 'classnames'
@@ -12,7 +14,7 @@ import styles from './Emoji.module.scss'
 export const EMOJI_TEST_ID = 'bezier-emoji'
 
 const getEmojiUrl = (name: EmojiProps['name'], size: '160' | '80' | '44') => {
-  return `https://cf${isDev() ? '.exp' : ''}.channel.io/asset/emoji/images/${size}/${name}.png`
+  return `https://cf${isDev() ? '.exp' : ''}.channel.io/asset/emoji/images/${size}/${encodeURIComponent(name)}.png`
 }
 
 /**

package/src/components/FeatureProvider/FeatureProvider.tsx

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

package/src/components/FormControl/FormControl.tsx

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

package/src/components/FormGroup/FormGroup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import useMergeRefs from '~/src/hooks/useMergeRefs'

package/src/components/FormHelperText/FormHelperText.tsx

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

package/src/components/FormLabel/FormLabel.tsx

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

package/src/components/Help/Help.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef } from 'react'
 
 import { HelpFilledIcon } from '@channel.io/bezier-icons'