@channel.io/bezier-react 2.0.2 → 2.0.3

package/src/components/AlphaAvatar/__snapshots__/Avatar.test.tsx.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar > Snapshot 1`] = `
+<div
+  aria-label="Name"
+  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);"
+/>
+`;
+
+exports[`Avatar > renders border style 1`] = `
+<div
+  aria-label="Name"
+  class="SmoothCornersBox AvatarImage bordered"
+  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: 2px; --b-smooth-corners-box-shadow-color: var(--bg-white-high); --b-smooth-corners-box-padding: 4px; --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);"
+/>
+`;
+
+exports[`Avatar > should have right -2px, bottom -2px style on StatusWrapper 1`] = `
+<div
+  class="StatusWrapper"
+  data-testid="bezier-status-wrapper"
+>
+  <div
+    class="Status size-m"
+    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+  />
+</div>
+`;
+
+exports[`Avatar > should have right 2px, bottom 2px style on StatusWrapper when show border 1`] = `
+<div
+  class="StatusWrapper"
+  data-testid="bezier-status-wrapper"
+>
+  <div
+    class="Status size-m"
+    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+  />
+</div>
+`;
+
+exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when size grater then 72 1`] = `
+<div
+  class="StatusWrapper"
+  data-testid="bezier-status-wrapper"
+>
+  <div
+    class="Status size-m"
+    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+  />
+</div>
+`;
+
+exports[`Avatar > should have right 4px, bottom 4px style on StatusWrapper when size grater then 90 1`] = `
+<div
+  class="StatusWrapper"
+  data-testid="bezier-status-wrapper"
+>
+  <div
+    class="Status size-l"
+    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+  />
+</div>
+`;
+
+exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when size grater then 72 and show border 1`] = `
+<div
+  class="StatusWrapper"
+  data-testid="bezier-status-wrapper"
+>
+  <div
+    class="Status size-m"
+    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+  />
+</div>
+`;
+
+exports[`Avatar > should have right 8px, bottom 8px style on StatusWrapper when size grater then 90 and show border 1`] = `
+<div
+  class="StatusWrapper"
+  data-testid="bezier-status-wrapper"
+>
+  <div
+    class="Status size-l"
+    style="--b-status-bg-color: var(--bgtxt-green-normal);"
+  />
+</div>
+`;

package/src/components/AlphaAvatar/assets/default-avatar.svg

@@ -0,0 +1,11 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="60" height="60" fill="#cfccfb"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41 23C41 29.0744 36.0744 34 30 34C23.9256 34 19 29.0744 19 23C19 16.9256 23.9256 12 30 12C36.0744 12 41 16.9256 41 23ZM30 37C16.1929 37 5 48.1929 5 62V90H55V62C55 48.1929 43.8071 37 30 37Z" fill="white" fill-opacity="0.4"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="60" height="60" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/AlphaAvatar/index.ts

@@ -0,0 +1,8 @@
+export {
+  Avatar as AlphaAvatar,
+  useAvatarRadiusToken as useAlphaAvatarRadiusToken,
+} from './Avatar'
+export type {
+  AvatarProps as AlphaAvatarProps,
+  AvatarSize as AlphaAvatarSize,
+} from './Avatar.types'

package/src/components/AlphaAvatar/useProgressiveImage.test.ts

@@ -0,0 +1,96 @@
+import { type RenderHookResult, waitFor } from '@testing-library/react'
+
+import { renderHook } from '~/src/utils/test'
+
+import useProgressiveImage from './useProgressiveImage'
+
+const DELAY = 300
+const TIME_OUT = DELAY + 1000
+const IMAGE_URL_1 = 'image-url-1'
+const IMAGE_URL_2 = 'image-url-2'
+const IMAGE_URL_3 = 'image-url-3'
+const FALLBACK_URL = 'fallback-url'
+
+describe('useProgressiveImage ', () => {
+  let rendered: RenderHookResult<
+    string,
+    { imageUrl: string; fallbackUrl: string }
+  >
+  const originalGlobalImage = window.Image
+
+  beforeAll(() => {
+    ;(window.Image as any) = class MockImage {
+      onload = () => {}
+      src = ''
+      constructor() {
+        setTimeout(() => {
+          this.onload()
+        }, DELAY)
+        return this
+      }
+    }
+  })
+
+  afterAll(() => {
+    window.Image = originalGlobalImage
+  })
+
+  beforeEach(() => {
+    rendered = renderHook(
+      ({ imageUrl, fallbackUrl }) => useProgressiveImage(imageUrl, fallbackUrl),
+      {
+        initialProps: {
+          imageUrl: IMAGE_URL_1,
+          fallbackUrl: FALLBACK_URL,
+        },
+      }
+    )
+  })
+
+  it('should return fallback url at first', () => {
+    const { result } = rendered
+
+    expect(result.current).toStrictEqual(FALLBACK_URL)
+  })
+
+  it('should return image url after it loads', async () => {
+    const { result } = rendered
+
+    await waitFor(() => expect(result.current).toStrictEqual(IMAGE_URL_1), {
+      timeout: TIME_OUT,
+    })
+  })
+
+  it('should update image url when hook is rendered with different url', async () => {
+    const { result, rerender } = rendered
+
+    rerender({
+      imageUrl: IMAGE_URL_2,
+      fallbackUrl: FALLBACK_URL,
+    })
+
+    await waitFor(() => expect(result.current).toStrictEqual(IMAGE_URL_2), {
+      timeout: TIME_OUT,
+    })
+  })
+
+  it('should loads image url immediately when rerendered', async () => {
+    const { rerender, result } = rendered
+
+    rerender({
+      imageUrl: IMAGE_URL_3,
+      fallbackUrl: FALLBACK_URL,
+    })
+
+    await waitFor(() => expect(result.current).toStrictEqual(IMAGE_URL_3), {
+      timeout: TIME_OUT,
+    })
+
+    rerender({
+      imageUrl: IMAGE_URL_3,
+      fallbackUrl: FALLBACK_URL,
+    })
+
+    expect(result.current).toStrictEqual(IMAGE_URL_3)
+  })
+})

package/src/components/AlphaAvatar/useProgressiveImage.ts

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+
+interface CachedImage {
+  src: string
+  isLoaded: boolean
+}
+
+const imageCache = new Map<string, CachedImage>()
+
+function getCachedImage(src: string) {
+  const cachedImage = imageCache.get(src)
+  if (!cachedImage) {
+    return null
+  }
+  return cachedImage
+}
+
+export default function useProgressiveImage(src: string, defaultSrc: string) {
+  const [source, setSource] = useState<CachedImage | null>(() =>
+    getCachedImage(src)
+  )
+
+  useEffect(
+    function updateSource() {
+      if (source?.src === src) {
+        return undefined
+      }
+
+      const cachedImage = getCachedImage(src)
+
+      if (cachedImage?.isLoaded) {
+        setSource(cachedImage)
+        return undefined
+      }
+
+      const image = new Image()
+      image.src = src
+      image.onload = loadImage(true)
+      image.onerror = loadImage(false)
+
+      function loadImage(isLoaded: boolean) {
+        return () => {
+          const loadedImage = {
+            src,
+            isLoaded,
+          }
+          setSource(loadedImage)
+          imageCache.set(src, loadedImage)
+        }
+      }
+    },
+    [src, source]
+  )
+
+  if (!source || !source.isLoaded) {
+    return defaultSrc
+  }
+
+  return source.src
+}

package/src/components/AlphaAvatarGroup/AlphaAvatarGroup.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
+
+import { AlphaAvatar } from '~/src/components/AlphaAvatar'
+
+import { AvatarGroup } from './AvatarGroup'
+import { type AvatarGroupProps } from './AvatarGroup.types'
+import MOCK_AVATAR_LIST from './__mocks__/avatarList'
+
+const meta: Meta<typeof AvatarGroup> = {
+  component: AvatarGroup,
+  argTypes: {
+    max: {
+      control: {
+        type: 'range',
+        min: 1,
+        max: MOCK_AVATAR_LIST.length,
+        step: 1,
+      },
+    },
+    spacing: {
+      control: {
+        type: 'range',
+        min: -50,
+        max: 50,
+        step: 1,
+      },
+    },
+  },
+}
+export default meta
+
+const Template: StoryFn<AvatarGroupProps> = (args) => (
+  <AvatarGroup {...args}>
+    {MOCK_AVATAR_LIST.map(({ id, avatarUrl, name }) => (
+      <AlphaAvatar
+        key={id}
+        avatarUrl={avatarUrl}
+        name={name}
+      />
+    ))}
+  </AvatarGroup>
+)
+
+export const Primary: StoryObj<AvatarGroupProps> = {
+  render: Template,
+
+  args: {
+    max: 5,
+    ellipsisType: 'icon',
+    size: '30',
+    spacing: 4,
+  },
+}

package/src/components/AlphaAvatarGroup/AvatarGroup.module.scss

@@ -0,0 +1,53 @@
+@import '../AlphaAvatar/Avatar.module';
+
+.AvatarGroup {
+  --b-avatar-group-spacing: 0;
+  --b-avatar-group-size: 0;
+
+  position: relative;
+  z-index: var(--z-index-base);
+  display: flex;
+
+  @each $size in $avatar-sizes {
+    &:where(.size-#{$size}) {
+      --b-avatar-group-size: #{$size}px;
+    }
+  }
+
+  & > * + * {
+    margin-left: var(--b-avatar-group-spacing);
+  }
+}
+
+.AvatarEllipsisIconWrapper {
+  position: relative;
+}
+
+.AvatarEllipsisIcon {
+  position: absolute;
+  z-index: var(--z-index-floating);
+  top: 0;
+  right: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  outline: none;
+}
+
+.AvatarEllipsisCountWrapper {
+  --b-avatar-group-ellipsis-ml: 0;
+
+  margin-left: var(--b-avatar-group-ellipsis-ml);
+}
+
+.AvatarEllipsisCount {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--b-avatar-group-size);
+}

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

@@ -0,0 +1,93 @@
+import React from 'react'
+
+import { render } from '~/src/utils/test'
+
+import { Avatar } from '~/src/components/Avatar'
+
+import { AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID, AvatarGroup } from './AvatarGroup'
+import { type AvatarGroupProps } from './AvatarGroup.types'
+import MOCK_AVATAR_LIST from './__mocks__/avatarList'
+
+describe('AvatarGroup', () => {
+  let props: AvatarGroupProps
+  const mockFallbackUrl = 'https://www.google.com'
+
+  beforeEach(() => {
+    props = {
+      max: MOCK_AVATAR_LIST.length - 1,
+      spacing: 4,
+      ellipsisType: 'icon',
+    }
+  })
+
+  afterAll(() => {
+    jest.restoreAllMocks()
+  })
+
+  const renderComponent = (otherProps?: AvatarGroupProps) =>
+    render(
+      <AvatarGroup
+        {...props}
+        {...otherProps}
+      >
+        {MOCK_AVATAR_LIST.map(({ id, avatarUrl, name }) => (
+          <Avatar
+            key={id}
+            avatarUrl={avatarUrl}
+            fallbackUrl={mockFallbackUrl}
+            name={name}
+          />
+        ))}
+      </AvatarGroup>
+    )
+
+  describe('Ellipsis type - Icon', () => {
+    beforeEach(() => {
+      props.ellipsisType = 'icon'
+    })
+
+    it('Snapshot', () => {
+      const { getByRole } = renderComponent()
+      const rendered = getByRole('group')
+      expect(rendered).toMatchSnapshot()
+    })
+
+    it('should render ellipsis icon when avatar count is more than max', () => {
+      const { getByTestId } = renderComponent()
+      const rendered = getByTestId(AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID)
+      expect(rendered).toBeInTheDocument()
+    })
+
+    it('should not render ellipsis icon when avatar count is less than max', () => {
+      props.max = MOCK_AVATAR_LIST.length
+      const { queryByTestId } = renderComponent()
+      const rendered = queryByTestId(AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID)
+      expect(rendered).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Ellipsis type - Count', () => {
+    beforeEach(() => {
+      props.ellipsisType = 'count'
+    })
+
+    it('Snapshot', () => {
+      const { getByRole } = renderComponent()
+      const rendered = getByRole('group')
+      expect(rendered).toMatchSnapshot()
+    })
+
+    it('should render ellipsis count when avatar count is more than max', () => {
+      const { getByText } = renderComponent()
+      const rendered = getByText('+1')
+      expect(rendered).toBeInTheDocument()
+    })
+
+    it('should not render ellipsis count when avatar count is less than max', () => {
+      props.max = MOCK_AVATAR_LIST.length
+      const { queryByText } = renderComponent()
+      const rendered = queryByText('+1')
+      expect(rendered).not.toBeInTheDocument()
+    })
+  })
+})

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>
+    )
+  }
+)