@channel.io/bezier-react 4.0.0-next.3 → 4.0.0-next.4

package/src/v3/Icon/Icon.stories.tsx

@@ -0,0 +1,173 @@
+import { ChannelBtnFilledIcon, icons } from '@channel.io/bezier-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import { type BetaSemanticColor } from '~/src/types/beta-tokens'
+import { HStack } from '~/src/v3/HStack'
+import { Text } from '~/src/v3/Text'
+import { VStack } from '~/src/v3/VStack'
+
+import { Icon } from './Icon'
+import { type IconProps, type IconSize } from './Icon.types'
+
+const SIZES: IconSize[] = ['10', '12', '16', '20', '24', '36', '44']
+
+const COLORS: BetaSemanticColor[] = [
+  'icon-neutral',
+  'icon-neutral-heavier',
+  'icon-accent-blue',
+  'icon-accent-cobalt',
+  'icon-accent-teal',
+  'icon-accent-green',
+  'icon-accent-olive',
+  'icon-accent-yellow',
+  'icon-accent-orange',
+  'icon-accent-red',
+  'icon-accent-pink',
+  'icon-accent-purple',
+  'icon-accent-navy',
+]
+
+const meta: Meta<typeof Icon> = {
+  title: 'V3 components/Icon',
+  component: Icon,
+  args: {
+    source: 'channel-btn-filled' as unknown as IconProps['source'],
+    size: '24',
+    color: 'icon-neutral',
+  },
+  argTypes: {
+    source: {
+      control: 'select',
+      options: Object.keys(icons),
+      mapping: icons,
+    },
+    size: {
+      control: 'select',
+      options: SIZES,
+      table: {
+        defaultValue: { summary: '"24"' },
+      },
+    },
+    // `color` accepts any beta semantic color token (`V3ColorProps`), so it is
+    // left as a free-text control rather than a restricted option list.
+    color: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: '"icon-neutral"' },
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Icon>
+
+/**
+ * Adjust `source` / `size` / `color` with the controls panel.
+ */
+export const Primary: Story = {}
+
+/**
+ * Each size (based on the `icon-neutral` color).
+ */
+export const Sizes: Story = {
+  tags: ['!autodocs'],
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <VStack spacing={12}>
+      {SIZES.map((size) => (
+        <HStack
+          key={size}
+          align="center"
+          spacing={24}
+        >
+          <Text
+            typo="12"
+            color="text-neutral"
+            style={{ width: 32 }}
+          >
+            {size}
+          </Text>
+          <Icon
+            source={ChannelBtnFilledIcon}
+            size={size}
+            color="icon-neutral"
+          />
+        </HStack>
+      ))}
+    </VStack>
+  ),
+}
+
+/**
+ * Each color (based on the `l` size).
+ */
+export const Colors: Story = {
+  tags: ['!autodocs'],
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <VStack spacing={12}>
+      {COLORS.map((color) => (
+        <HStack
+          key={color}
+          align="center"
+          spacing={24}
+        >
+          <Text
+            typo="12"
+            color="text-neutral"
+            style={{ width: 160 }}
+          >
+            {color}
+          </Text>
+          <Icon
+            source={ChannelBtnFilledIcon}
+            size="36"
+            color={color}
+          />
+        </HStack>
+      ))}
+    </VStack>
+  ),
+}
+
+/**
+ * Every icon available in `@channel.io/bezier-icons`.
+ */
+export const AllIcons: Story = {
+  tags: ['!autodocs'],
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <HStack
+      wrap
+      spacing={8}
+    >
+      {Object.entries(icons).map(([name, source]) => (
+        <VStack
+          key={name}
+          display="inline-flex"
+          align="center"
+          justify="center"
+          wrap
+          spacing={12}
+          width={120}
+          height={120}
+        >
+          <Icon
+            source={source}
+            size="24"
+          />
+          <Text
+            typo="12"
+            color="text-neutral"
+            align="center"
+            style={{ wordBreak: 'break-word' }}
+          >
+            {name}
+          </Text>
+        </VStack>
+      ))}
+    </HStack>
+  ),
+}

package/src/v3/Icon/Icon.test.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+
+import { AllIcon } from '@channel.io/bezier-icons'
+
+import { colorTokenCssVar } from '~/src/utils/style'
+import { render } from '~/src/utils/test'
+
+import { Icon } from './Icon'
+import { type IconProps } from './Icon.types'
+
+import styles from './Icon.module.scss'
+
+describe('Icon', () => {
+  const renderIcon = (props?: Partial<IconProps>) =>
+    render(
+      <Icon
+        source={AllIcon}
+        {...props}
+      />
+    )
+
+  it('should render with default style', () => {
+    const { container } = renderIcon()
+    const rendered = container.querySelector('svg')
+
+    expect(rendered).toHaveClass(styles.Icon)
+    expect(rendered).toHaveClass(styles['size-24'])
+    expect(rendered).toHaveStyle(
+      `--b-v3-icon-color: ${colorTokenCssVar('icon-neutral')}`
+    )
+  })
+
+  it('should forward ref', () => {
+    const ref = React.createRef<SVGSVGElement>()
+
+    render(
+      <Icon
+        ref={ref}
+        source={AllIcon}
+      />
+    )
+
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('should receive color, size, margin, style, and class name', () => {
+    const { container } = renderIcon({
+      color: 'icon-neutral-heavier',
+      size: '44',
+      marginTop: 10,
+      style: { display: 'block' },
+      className: 'test-class',
+    })
+    const rendered = container.querySelector('svg')
+
+    expect(rendered).toHaveClass(styles['size-44'])
+    expect(rendered).toHaveClass('test-class')
+    expect(rendered).toHaveStyle(
+      `--b-v3-icon-color: ${colorTokenCssVar('icon-neutral-heavier')}`
+    )
+    expect(rendered).toHaveStyle('display: block')
+    expect(rendered).toHaveStyle('--b-margin-top: 10px')
+  })
+})

package/src/v3/Icon/Icon.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { forwardRef, memo } from 'react'
+import * as React from 'react'
+
+import classNames from 'classnames'
+
+import { type BetaSemanticColor } from '~/src/types/beta-tokens'
+import { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'
+import { colorTokenCssVar } from '~/src/utils/style'
+
+import { type IconProps } from './Icon.types'
+
+import styles from './Icon.module.scss'
+
+const DEFAULT_ICON_COLOR = 'icon-neutral' satisfies BetaSemanticColor
+
+/**
+ * `Icon` renders a Bezier icon as an SVG element.
+ * Inject an icon component from the `@channel.io/bezier-icons` package into the `source` prop.
+ * @example
+ *
+ * ```tsx
+ * import { HeartFilledIcon } from '@channel.io/bezier-icons'
+ *
+ * <Icon
+ *   source={HeartFilledIcon}
+ *   size="24"
+ *   color="icon-neutral"
+ * />
+ * ```
+ */
+export const Icon = memo(
+  forwardRef<SVGSVGElement, IconProps>(function Icon(props, forwardedRef) {
+    const [marginProps, marginRest] = splitByMarginProps(props)
+    const marginStyles = getMarginStyles(marginProps)
+
+    const {
+      className,
+      size = '24',
+      color = DEFAULT_ICON_COLOR,
+      source: SourceElement,
+      style,
+      ...rest
+    } = marginRest
+
+    return (
+      <SourceElement
+        ref={forwardedRef}
+        style={
+          {
+            '--b-v3-icon-color': colorTokenCssVar(color),
+            ...marginStyles.style,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={classNames(
+          styles.Icon,
+          styles[`size-${size}`],
+          marginStyles.className,
+          className
+        )}
+        {...rest}
+      />
+    )
+  })
+)

package/src/v3/Icon/Icon.types.ts

@@ -0,0 +1,32 @@
+import { type BezierIcon } from '@channel.io/bezier-icons'
+
+import {
+  type BezierComponentProps,
+  type SizeProps,
+  type V3ColorProps,
+  type V3MarginProps,
+} from '~/src/types/props'
+
+export type IconSize = '10' | '12' | '16' | '20' | '24' | '36' | '44'
+
+interface IconOwnProps {
+  /**
+   * Controls which icon should be rendered.
+   * Inject the icon component from the `@channel.io/bezier-icons` package into this prop.
+   * @example
+   * ```tsx
+   * import { HeartFilledIcon } from '@channel.io/bezier-icons'
+   * import { Icon } from '@channel.io/bezier-react/v3'
+   *
+   * <Icon source={HeartFilledIcon} {...} />
+   * ```
+   */
+  source: BezierIcon
+}
+
+export interface IconProps
+  extends Omit<BezierComponentProps<'svg'>, keyof V3ColorProps>,
+    V3MarginProps,
+    SizeProps<IconSize>,
+    V3ColorProps,
+    IconOwnProps {}

package/src/v3/Icon/index.ts

@@ -0,0 +1,2 @@
+export { Icon } from './Icon'
+export type { IconProps, IconSize } from './Icon.types'

package/src/v3/SmoothCornersBox/SmoothCornersBox.module.scss

@@ -0,0 +1,48 @@
+.SmoothCornersBox {
+  --b-smooth-corners-box-border-radius: 0;
+  --b-smooth-corners-box-shadow-offset-x: 0;
+  --b-smooth-corners-box-shadow-offset-y: 0;
+  --b-smooth-corners-box-shadow-blur-radius: 0px;
+  --b-smooth-corners-box-shadow-spread-radius: 0px;
+  --b-smooth-corners-box-shadow-color: transparent;
+  --b-smooth-corners-box-padding: 0px;
+  --b-smooth-corners-box-margin: 0px;
+  --b-smooth-corners-box-background-color: transparent;
+
+  box-sizing: content-box;
+  margin: var(--b-smooth-corners-box-margin);
+
+  background-color: var(--b-smooth-corners-box-background-color);
+  background-image: var(--b-smooth-corners-box-background-image);
+  background-size: cover;
+  border-radius: var(--b-smooth-corners-box-border-radius);
+  box-shadow: var(--b-smooth-corners-box-shadow-offset-x)
+    var(--b-smooth-corners-box-shadow-offset-y)
+    var(--b-smooth-corners-box-shadow-blur-radius)
+    var(--b-smooth-corners-box-shadow-spread-radius)
+    var(--b-smooth-corners-box-shadow-color);
+
+  &:where([data-state='enabled']) {
+    @supports (background: paint(smooth-corners)) {
+      --smooth-corners: var(--b-smooth-corners-box-border-radius);
+      --smooth-corners-shadow: var(--b-smooth-corners-box-shadow-offset-x),
+        var(--b-smooth-corners-box-shadow-offset-y),
+        var(--b-smooth-corners-box-shadow-blur-radius),
+        var(--b-smooth-corners-box-shadow-spread-radius),
+        var(--b-smooth-corners-box-shadow-color);
+      --smooth-corners-bg-color: var(--b-smooth-corners-box-background-color);
+      --smooth-corners-padding: var(--b-smooth-corners-box-padding);
+
+      margin: calc(
+        var(--b-smooth-corners-box-margin) +
+          (-1 * var(--b-smooth-corners-box-padding))
+      );
+      padding: var(--b-smooth-corners-box-padding);
+
+      background: paint(smooth-corners);
+      border-radius: 0;
+      border-image-source: var(--b-smooth-corners-box-background-image);
+      box-shadow: none;
+    }
+  }
+}

package/src/v3/SmoothCornersBox/SmoothCornersBox.stories.tsx

@@ -0,0 +1,41 @@
+import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
+
+import { SmoothCornersBox } from './SmoothCornersBox'
+import { type SmoothCornersBoxProps } from './SmoothCornersBox.types'
+
+const meta: Meta<typeof SmoothCornersBox> = {
+  title: 'V3 components/SmoothCornersBox',
+  component: SmoothCornersBox,
+}
+
+export default meta
+
+const Template: StoryFn<SmoothCornersBoxProps> = ({
+  children,
+  ...otherSmoothCornersBoxProps
+}) => (
+  <SmoothCornersBox
+    style={{ width: 200, height: 200 }}
+    {...otherSmoothCornersBoxProps}
+  >
+    {children}
+  </SmoothCornersBox>
+)
+
+export const Primary: StoryObj<SmoothCornersBoxProps> = {
+  render: Template,
+  args: {
+    disabled: false,
+    borderRadius: '42%',
+    shadow: {
+      offsetX: 0,
+      offsetY: 4,
+      blurRadius: 20,
+      spreadRadius: 0,
+      color: 'elevation-large',
+    },
+    margin: 0,
+    backgroundColor: 'fill-absolute-white',
+    backgroundImage: '',
+  },
+}

package/src/v3/SmoothCornersBox/SmoothCornersBox.test.tsx

@@ -0,0 +1,83 @@
+import { render } from '~/src/utils/test'
+
+import { SmoothCornersBox } from './SmoothCornersBox'
+import { type SmoothCornersBoxProps } from './SmoothCornersBox.types'
+
+import styles from './SmoothCornersBox.module.scss'
+
+describe('SmoothCornersBox', () => {
+  const renderSmoothCornersBox = (
+    { children, ...rest }: SmoothCornersBoxProps = { borderRadius: 0 }
+  ) => render(<SmoothCornersBox {...rest}>{children}</SmoothCornersBox>)
+
+  it('should render with disabled state by default', () => {
+    const children = 'Hello, Channel!'
+    const { getByText } = renderSmoothCornersBox({ children, borderRadius: 10 })
+    const rendered = getByText(children)
+
+    expect(rendered).toHaveClass(styles.SmoothCornersBox)
+    expect(rendered).toHaveAttribute('data-state', 'disabled')
+  })
+
+  it('each style property must have the correct unit.', () => {
+    const children = 'Hello, Channel!'
+    const { getByText } = renderSmoothCornersBox({
+      children,
+      borderRadius: 10,
+      margin: 10,
+      shadow: {
+        offsetX: 10,
+        offsetY: 10,
+        blurRadius: 10,
+        spreadRadius: 10,
+        color: 'fill-neutral',
+      },
+      backgroundColor: 'fill-neutral',
+      backgroundImage: 'foo/bar',
+      className: 'test-class',
+    })
+
+    const rendered = getByText(children)
+    const computedStyle = window.getComputedStyle(rendered)
+
+    expect(rendered).toHaveClass('test-class')
+    expect(
+      computedStyle.getPropertyValue('--b-smooth-corners-box-border-radius')
+    ).toBe('10')
+    expect(
+      computedStyle.getPropertyValue('--b-smooth-corners-box-shadow-offset-x')
+    ).toBe('10px')
+    expect(
+      computedStyle.getPropertyValue('--b-smooth-corners-box-shadow-offset-y')
+    ).toBe('10px')
+    expect(
+      computedStyle.getPropertyValue(
+        '--b-smooth-corners-box-shadow-blur-radius'
+      )
+    ).toBe('10px')
+    expect(
+      computedStyle.getPropertyValue(
+        '--b-smooth-corners-box-shadow-spread-radius'
+      )
+    ).toBe('10px')
+    expect(
+      computedStyle.getPropertyValue('--b-smooth-corners-box-shadow-color')
+    ).toBe('var(--color-fill-neutral)')
+    expect(
+      computedStyle.getPropertyValue('--b-smooth-corners-box-padding')
+    ).toBe('20px')
+    expect(
+      computedStyle.getPropertyValue('--b-smooth-corners-box-margin')
+    ).toBe('10px')
+    expect(
+      computedStyle.getPropertyValue(
+        '--b-smooth-corners-box-background-color'
+      )
+    ).toBe('var(--color-fill-neutral)')
+    expect(
+      computedStyle.getPropertyValue(
+        '--b-smooth-corners-box-background-image'
+      )
+    ).toBe('url(foo/bar)')
+  })
+})

package/src/v3/SmoothCornersBox/SmoothCornersBox.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { forwardRef } from 'react'
+import * as React from 'react'
+
+import classNames from 'classnames'
+
+import { colorTokenCssVar, cssUrl, px } from '~/src/utils/style'
+
+import { FeatureType, useFeatureFlag } from '~/src/components/FeatureProvider'
+
+import { type SmoothCornersBoxProps } from './SmoothCornersBox.types'
+
+import styles from './SmoothCornersBox.module.scss'
+
+/**
+ * `SmoothCornersBox` is a simple `div` element with smooth corners.
+ * It is available by enabling the `SmoothCornersFeature`.
+ * @example
+ *
+ * ```tsx
+ * <AppProvider features={[SmoothCornersFeature]}>
+ *   <SmoothCornersBox />
+ * </AppProvider>
+ * ```
+ */
+export const SmoothCornersBox = forwardRef<
+  HTMLDivElement,
+  SmoothCornersBoxProps
+>(function SmoothCornersBox(
+  {
+    children,
+    style,
+    className,
+    disabled,
+    borderRadius,
+    margin,
+    shadow,
+    backgroundColor,
+    backgroundImage,
+    ...rest
+  },
+  forwardedRef
+) {
+  const shadowBlurRadius = shadow?.blurRadius ?? 0
+  const shadowSpreadRadius = shadow?.spreadRadius ?? 0
+
+  return (
+    <div
+      {...rest}
+      ref={forwardedRef}
+      style={
+        {
+          ...style,
+          '--b-smooth-corners-box-border-radius': borderRadius,
+          '--b-smooth-corners-box-shadow-offset-x': px(shadow?.offsetX),
+          '--b-smooth-corners-box-shadow-offset-y': px(shadow?.offsetY),
+          '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`,
+          '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,
+          '--b-smooth-corners-box-shadow-color': colorTokenCssVar(
+            shadow?.color
+          ),
+          /**
+           * NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.
+           * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}
+           */
+          '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) * 2}px`,
+          '--b-smooth-corners-box-margin': `${margin ?? 0}px`,
+          '--b-smooth-corners-box-background-color':
+            colorTokenCssVar(backgroundColor),
+          '--b-smooth-corners-box-background-image': cssUrl(backgroundImage),
+        } as React.CSSProperties
+      }
+      className={classNames(styles.SmoothCornersBox, className)}
+      data-state={
+        useFeatureFlag(FeatureType.SmoothCorners) && !disabled
+          ? 'enabled'
+          : 'disabled'
+      }
+    >
+      {children}
+    </div>
+  )
+})

package/src/v3/SmoothCornersBox/SmoothCornersBox.types.ts

@@ -0,0 +1,69 @@
+import { type BetaSemanticColor } from '~/src/types/beta-tokens'
+import type {
+  BezierComponentProps,
+  ChildrenProps,
+  DisableProps,
+} from '~/src/types/props'
+
+/**
+ * NOTE: The `inset` property is not currently supported.
+ */
+interface BoxShadow {
+  /**
+   * The value specifies the horizontal distance. Negative values place the shadow to the left of the element.
+   * @default 0
+   */
+  offsetX?: number
+  /**
+   * The value specifies the vertical distance. Negative values place the shadow above the element.
+   * @default 0
+   */
+  offsetY?: number
+  /**
+   * The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed.
+   * @default 0
+   */
+  blurRadius?: number
+  /**
+   * Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink.
+   * @default 0
+   */
+  spreadRadius?: number
+  /**
+   * The color of the shadow.
+   * @default transparent
+   */
+  color?: BetaSemanticColor
+}
+
+interface SmoothCornersBoxOwnProps {
+  /**
+   * Rounds the corners of an element's outer border edge.
+   * @default 0
+   */
+  borderRadius: number | string
+  /**
+   * Shadow effects around an element's frame.
+   */
+  shadow?: BoxShadow
+  /**
+   * The margin area on all four sides of an element.
+   * @default 0
+   */
+  margin?: number
+  /**
+   * The background color of an element.
+   * @default 'transparent'
+   */
+  backgroundColor?: BetaSemanticColor
+  /**
+   * The background image url of an element.
+   */
+  backgroundImage?: string
+}
+
+export interface SmoothCornersBoxProps
+  extends BezierComponentProps<'div'>,
+    ChildrenProps,
+    DisableProps,
+    SmoothCornersBoxOwnProps {}

package/src/v3/SmoothCornersBox/index.ts

@@ -0,0 +1,2 @@
+export { SmoothCornersBox } from './SmoothCornersBox'
+export type { SmoothCornersBoxProps } from './SmoothCornersBox.types'