@channel.io/bezier-react 2.0.2 → 2.0.4

package/src/components/AlphaAvatarGroup/AvatarGroup.tsx

@@ -0,0 +1,229 @@
+import React, { forwardRef, useCallback, useMemo } from 'react'
+
+import { MoreIcon } from '@channel.io/bezier-icons'
+import classNames from 'classnames'
+
+import { isLastIndex } from '~/src/utils/array'
+import { createContext } from '~/src/utils/react'
+import { px } from '~/src/utils/style'
+
+import {
+  type AlphaAvatarProps,
+  type AlphaAvatarSize,
+  useAlphaAvatarRadiusToken,
+} from '~/src/components/AlphaAvatar'
+import { Icon } from '~/src/components/Icon'
+import { SmoothCornersBox } from '~/src/components/SmoothCornersBox'
+import { Text } from '~/src/components/Text'
+
+import {
+  type AvatarGroupContextValue,
+  type AvatarGroupProps,
+} from './AvatarGroup.types'
+
+import styles from './AvatarGroup.module.scss'
+
+const [AvatarGroupContextProvider, useAvatarGroupContext] = createContext<
+  AvatarGroupContextValue | undefined
+>(undefined)
+
+export { useAvatarGroupContext }
+
+const MAX_AVATAR_LIST_COUNT = 99
+const AVATAR_GROUP_DEFAULT_SPACING = 4
+export const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID =
+  'bezier-avatar-group-ellipsis-icon'
+
+function getRestAvatarListCountText(count: number, max: number) {
+  const restCount = count - max
+  return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`
+}
+
+// TODO: Not specified
+function getProperIconSize(size: AlphaAvatarSize) {
+  return (
+    {
+      16: 'xxs',
+      20: 'xxs',
+      24: 'xs',
+      30: 's',
+      36: 'm',
+      42: 'm',
+      48: 'l',
+      72: 'l',
+      90: 'l',
+      120: 'l',
+    } as const
+  )[size]
+}
+
+// TODO: Not specified
+function getProperTypoSize(size: AlphaAvatarSize) {
+  return (
+    {
+      16: '12',
+      20: '12',
+      24: '13',
+      30: '15',
+      36: '16',
+      42: '18',
+      48: '24',
+      72: '24',
+      90: '24',
+      120: '24',
+    } as const
+  )[size]
+}
+
+/**
+ * `AvatarGroup` is a component for grouping `Avatar` components
+ * @example
+ *
+ * ```tsx
+ * <AvatarGroup
+ *  max={2}
+ *  size="24"
+ *  spacing={4}
+ *  ellipsisType="icon"
+ * >
+ *    <Avatar />
+ *    <Avatar />
+ *    <Avatar />
+ * </AvatarGroup>
+ * ```
+ */
+export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
+  function AvatarGroup(
+    {
+      max = 5,
+      size = '24',
+      spacing = AVATAR_GROUP_DEFAULT_SPACING,
+      ellipsisType = 'icon',
+      style,
+      className,
+      children,
+      ...rest
+    },
+    forwardedRef
+  ) {
+    const AVATAR_BORDER_RADIUS = useAlphaAvatarRadiusToken()
+    const avatarListCount = React.Children.count(children)
+
+    const renderAvatarElement = useCallback(
+      (avatar: React.ReactElement<AlphaAvatarProps>) => {
+        const key =
+          avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`
+        const shouldShowBorder = max > 1 && avatarListCount > 1 && spacing < 0
+        const showBorder = avatar.props.showBorder || shouldShowBorder
+        return React.cloneElement(avatar, { key, showBorder })
+      },
+      [avatarListCount, max, spacing]
+    )
+
+    const AvatarListComponent = useMemo(() => {
+      return React.Children.toArray(children)
+        .slice(0, max)
+        .map((avatar, index, arr) => {
+          if (!React.isValidElement<AlphaAvatarProps>(avatar)) {
+            return null
+          }
+
+          const AvatarElement = renderAvatarElement(avatar)
+
+          if (!isLastIndex(arr, index) || avatarListCount <= max) {
+            return AvatarElement
+          }
+
+          if (ellipsisType === 'icon') {
+            return (
+              <div
+                key="ellipsis"
+                className={styles.AvatarEllipsisIconWrapper}
+                data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}
+              >
+                <SmoothCornersBox
+                  borderRadius={AVATAR_BORDER_RADIUS}
+                  backgroundColor="bgtxt-absolute-black-lightest"
+                  className={styles.AvatarEllipsisIcon}
+                >
+                  <Icon
+                    source={MoreIcon}
+                    size={getProperIconSize(size)}
+                    color="bgtxt-absolute-white-dark"
+                  />
+                </SmoothCornersBox>
+                {AvatarElement}
+              </div>
+            )
+          }
+
+          if (ellipsisType === 'count') {
+            return (
+              <React.Fragment key="ellipsis">
+                {AvatarElement}
+                <div
+                  style={
+                    {
+                      '--b-avatar-group-ellipsis-ml': px(
+                        Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)
+                      ),
+                    } as React.CSSProperties
+                  }
+                  className={classNames(styles.AvatarEllipsisCountWrapper)}
+                >
+                  <Text
+                    typo={getProperTypoSize(size)}
+                    color="txt-black-dark"
+                    className={styles.AvatarEllipsisCount}
+                  >
+                    {getRestAvatarListCountText(avatarListCount, max)}
+                  </Text>
+                </div>
+              </React.Fragment>
+            )
+          }
+
+          return null
+        })
+    }, [
+      avatarListCount,
+      max,
+      children,
+      renderAvatarElement,
+      ellipsisType,
+      AVATAR_BORDER_RADIUS,
+      size,
+      spacing,
+    ])
+
+    return (
+      <AvatarGroupContextProvider
+        value={useMemo(
+          () => ({
+            size,
+          }),
+          [size]
+        )}
+      >
+        <div
+          role="group"
+          ref={forwardedRef}
+          className={classNames(
+            styles.AvatarGroup,
+            styles[`size-${size}`],
+            className
+          )}
+          style={
+            {
+              '--b-avatar-group-spacing': px(spacing),
+              ...style,
+            } as React.CSSProperties
+          }
+          {...rest}
+        >
+          {AvatarListComponent}
+        </div>
+      </AvatarGroupContextProvider>
+    )
+  }
+)

package/src/components/AlphaAvatarGroup/AvatarGroup.types.ts

@@ -0,0 +1,43 @@
+import type {
+  BezierComponentProps,
+  ChildrenProps,
+  SizeProps,
+} from '~/src/types/props'
+
+import {
+  type AlphaAvatarProps,
+  type AlphaAvatarSize,
+} from '~/src/components/AlphaAvatar'
+
+type AvatarGroupEllipsisType = 'icon' | 'count'
+
+interface AvatarGroupOwnProps {
+  /**
+   * Maximum number of avatars to display.
+   * If the number of avatars exceeds this number, ellipsis will be displayed.
+   * @default 5
+   */
+  max: number
+
+  /**
+   * Spacing between the avatars.
+   * Spacing could be negative, which will make the avatars overlap each other.
+   * @default 4
+   */
+  spacing?: number
+
+  /**
+   * Controls how the ellipsis is displayed.
+   * @default 'icon'
+   */
+  ellipsisType?: AvatarGroupEllipsisType
+}
+
+export interface AvatarGroupContextValue
+  extends Pick<AlphaAvatarProps, 'size'> {}
+
+export interface AvatarGroupProps
+  extends BezierComponentProps<'div'>,
+    ChildrenProps,
+    SizeProps<AlphaAvatarSize>,
+    AvatarGroupOwnProps {}

package/src/components/AlphaAvatarGroup/__mocks__/avatarList.ts

@@ -0,0 +1,39 @@
+const MOCK_AVATAR_LIST = [
+  {
+    id: 1,
+    avatarUrl: 'https://bit.ly/code-beast',
+    name: 'Christian Nwamba',
+  },
+  {
+    id: 2,
+    avatarUrl: 'https://bit.ly/tioluwani-kolawole',
+    name: 'Kola Tioluwani',
+  },
+  {
+    id: 3,
+    avatarUrl: 'https://bit.ly/kent-c-dodds',
+    name: 'Kent Dodds',
+  },
+  {
+    id: 4,
+    avatarUrl: 'https://bit.ly/ryan-florence',
+    name: 'Ryan Florence',
+  },
+  {
+    id: 5,
+    avatarUrl: 'https://bit.ly/dan-abramov',
+    name: 'Dan Abrahmov',
+  },
+  {
+    id: 6,
+    avatarUrl: 'https://bit.ly/prosper-baba',
+    name: 'Prosper Otemuyiwa',
+  },
+  {
+    id: 7,
+    avatarUrl: 'https://bit.ly/sage-adebayo',
+    name: 'Segun Adebayo',
+  },
+]
+
+export default MOCK_AVATAR_LIST

package/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap

@@ -0,0 +1,215 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
+<div
+  class="AvatarGroup size-24"
+  role="group"
+  style="--b-avatar-group-spacing: 4px;"
+>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Christian Nwamba"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Kola Tioluwani"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Kent Dodds"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Ryan Florence"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Dan Abrahmov"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Prosper Otemuyiwa"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="AvatarEllipsisCountWrapper"
+    style="--b-avatar-group-ellipsis-ml: 4px;"
+  >
+    <span
+      class="Text typo-13 margin AvatarEllipsisCount"
+      data-testid="bezier-text"
+      style="--b-text-color: var(--txt-black-dark);"
+    >
+      +1
+    </span>
+  </div>
+</div>
+`;
+
+exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
+<div
+  class="AvatarGroup size-24"
+  role="group"
+  style="--b-avatar-group-spacing: 4px;"
+>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Christian Nwamba"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Kola Tioluwani"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Kent Dodds"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Ryan Florence"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="Avatar size-24"
+    data-disabled="false"
+    data-testid="bezier-avatar-wrapper"
+  >
+    <div
+      aria-label="Dan Abrahmov"
+      class="SmoothCornersBox AvatarImage"
+      data-state="disabled"
+      data-testid="bezier-avatar"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+    />
+  </div>
+  <div
+    class="AvatarEllipsisIconWrapper"
+    data-testid="bezier-avatar-group-ellipsis-icon"
+  >
+    <div
+      class="SmoothCornersBox AvatarEllipsisIcon"
+      data-state="disabled"
+      style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bgtxt-absolute-black-lightest);"
+    >
+      <svg
+        class="Icon margin"
+        data-testid="bezier-icon"
+        fill="none"
+        height="16"
+        style="--b-icon-color: var(--bgtxt-absolute-white-dark);"
+        viewBox="0 0 24 24"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M2.5 12a2.257 2.257 0 0 0 2.25 2.25A2.257 2.257 0 0 0 7 12a2.257 2.257 0 0 0-2.25-2.25A2.257 2.257 0 0 0 2.5 12m9.5 2.25A2.257 2.257 0 0 1 9.75 12 2.257 2.257 0 0 1 12 9.75 2.257 2.257 0 0 1 14.25 12 2.257 2.257 0 0 1 12 14.25m7.25 0A2.257 2.257 0 0 1 17 12a2.257 2.257 0 0 1 2.25-2.25A2.257 2.257 0 0 1 21.5 12a2.257 2.257 0 0 1-2.25 2.25"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+    <div
+      class="Avatar size-24"
+      data-disabled="false"
+      data-testid="bezier-avatar-wrapper"
+    >
+      <div
+        aria-label="Prosper Otemuyiwa"
+        class="SmoothCornersBox AvatarImage"
+        data-state="disabled"
+        data-testid="bezier-avatar"
+        style="--b-smooth-corners-box-border-radius: 42%; --b-smooth-corners-box-shadow-blur-radius: 0px; --b-smooth-corners-box-shadow-spread-radius: 0px; --b-smooth-corners-box-padding: 0px; --b-smooth-corners-box-margin: 0px; --b-smooth-corners-box-background-color: var(--bg-white-normal); --b-smooth-corners-box-background-image: url(https://www.google.com);"
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/AlphaAvatarGroup/index.ts

@@ -0,0 +1,2 @@
+export { AvatarGroup as AlphaAvatarGroup } from './AvatarGroup'
+export { type AvatarGroupProps as AlphaAvatarGroupProps } from './AvatarGroup.types'

package/src/components/AlphaButton/AlphaButton.stories.tsx

@@ -0,0 +1,29 @@
+import { ArrowRightIcon, PlusIcon } from '@channel.io/bezier-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import {
+  AlphaButton,
+  type AlphaButtonProps,
+} from '~/src/components/AlphaButton'
+
+const meta: Meta<typeof AlphaButton> = {
+  component: AlphaButton,
+  argTypes: {
+    onClick: { action: 'onClick' },
+  },
+}
+export default meta
+
+export const Playground: StoryObj<AlphaButtonProps> = {
+  args: {
+    text: 'Invite',
+    disabled: false,
+    active: false,
+    loading: false,
+    prefixIcon: PlusIcon,
+    suffixIcon: ArrowRightIcon,
+    size: 'm',
+    variant: 'primary',
+    color: 'blue',
+  },
+}