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

package/src/v3/Spinner/Spinner.module.scss

@@ -0,0 +1,58 @@
+@use '../../styles/mixins/dimension';
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.Spinner {
+  --b-v3-spinner-color: initial;
+
+  display: inline-block;
+  flex-shrink: 0;
+
+  border-style: solid;
+  border-top-color: transparent;
+  border-right-color: var(--b-v3-spinner-color);
+  border-bottom-color: var(--b-v3-spinner-color);
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  border-left-color: var(--b-v3-spinner-color);
+  border-radius: 50%;
+
+  animation: spin 1s linear infinite;
+
+  &:where(.size-xl) {
+    @include dimension.square(50px);
+
+    border-width: 4px;
+  }
+
+  &:where(.size-l, .size-m) {
+    border-width: 3px;
+  }
+
+  &:where(.size-l) {
+    @include dimension.square(24px);
+  }
+
+  &:where(.size-m) {
+    @include dimension.square(20px);
+  }
+
+  &:where(.size-s, .size-xs) {
+    border-width: 2px;
+  }
+
+  &:where(.size-s) {
+    @include dimension.square(16px);
+  }
+
+  &:where(.size-xs) {
+    @include dimension.square(12px);
+  }
+}

package/src/v3/Spinner/Spinner.stories.tsx

@@ -0,0 +1,28 @@
+import { type Meta, type StoryFn } from '@storybook/react'
+
+import { Spinner } from './Spinner'
+import { type SpinnerProps } from './Spinner.types'
+
+const meta: Meta<typeof Spinner> = {
+  title: 'V3 components/Spinner',
+  component: Spinner,
+  argTypes: {
+    size: {
+      control: {
+        type: 'radio',
+      },
+      options: ['xs', 's', 'm', 'l', 'xl'],
+    },
+  },
+}
+export default meta
+
+const Template: StoryFn<SpinnerProps> = ({ ...args }) => <Spinner {...args} />
+
+export const Primary = {
+  render: Template,
+
+  args: {
+    size: 'm',
+  },
+}

package/src/v3/Spinner/Spinner.test.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+
+import { colorTokenCssVar } from '~/src/utils/style'
+import { render } from '~/src/utils/test'
+
+import { Spinner } from './Spinner'
+import { type SpinnerProps } from './Spinner.types'
+
+import styles from './Spinner.module.scss'
+
+describe('Spinner', () => {
+  const renderSpinner = (props?: SpinnerProps) => render(<Spinner {...props} />)
+
+  it('should render loading status by default', () => {
+    const { getByRole } = renderSpinner()
+    const spinner = getByRole('status', { name: 'Loading' })
+
+    expect(spinner).toHaveClass(styles.Spinner)
+    expect(spinner).toHaveClass(styles['size-m'])
+    expect(spinner).toHaveStyle(
+      `--b-v3-spinner-color: ${colorTokenCssVar('icon-neutral')}`
+    )
+  })
+
+  it('should allow overriding accessibility status', () => {
+    const { getByRole } = renderSpinner({
+      role: 'progressbar',
+      'aria-label': 'Submitting',
+    })
+
+    expect(getByRole('progressbar', { name: 'Submitting' })).toBeInTheDocument()
+  })
+
+  it('should forward ref', () => {
+    const ref = React.createRef<HTMLDivElement>()
+
+    render(<Spinner ref={ref} />)
+
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('should receive style and class name', () => {
+    const { getByRole } = renderSpinner({
+      style: { color: 'red' },
+      className: 'test-class',
+    })
+    const spinner = getByRole('status')
+
+    expect(spinner).toHaveStyle('color: red')
+    expect(spinner).toHaveClass('test-class')
+  })
+
+  it('should receive color and size', () => {
+    const { getByRole } = renderSpinner({
+      color: 'icon-neutral-heavier',
+      size: 'xl',
+    })
+    const spinner = getByRole('status')
+
+    expect(spinner).toHaveClass(styles['size-xl'])
+    expect(spinner).toHaveStyle(
+      `--b-v3-spinner-color: ${colorTokenCssVar('icon-neutral-heavier')}`
+    )
+  })
+})

package/src/v3/Spinner/Spinner.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { forwardRef } from 'react'
+import * as React from 'react'
+
+import classNames from 'classnames'
+
+import type { BetaSemanticColor } from '~/src/types/beta-tokens'
+import { colorTokenCssVar } from '~/src/utils/style'
+
+import type { SpinnerProps } from './Spinner.types'
+
+import styles from './Spinner.module.scss'
+
+const DEFAULT_SPINNER_COLOR = 'icon-neutral' satisfies BetaSemanticColor
+
+/**
+ * `Spinner` is a component for indicating loading state.
+ * @example
+ *
+ * ```tsx
+ * <Spinner
+ *   size="m"
+ *   color="icon-neutral"
+ * />
+ * ```
+ */
+export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
+  function Spinner(
+    {
+      style,
+      className,
+      size = 'm',
+      color = DEFAULT_SPINNER_COLOR,
+      role = 'status',
+      'aria-label': ariaLabel,
+      ...rest
+    },
+    forwardedRef
+  ) {
+    return (
+      <div
+        {...rest}
+        ref={forwardedRef}
+        role={role}
+        aria-label={ariaLabel ?? (role === 'status' ? 'Loading' : undefined)}
+        style={
+          {
+            '--b-v3-spinner-color': colorTokenCssVar(color),
+            ...style,
+          } as React.CSSProperties
+        }
+        className={classNames(
+          styles.Spinner,
+          styles[`size-${size}`],
+          className
+        )}
+      />
+    )
+  }
+)

package/src/v3/Spinner/Spinner.types.ts

@@ -0,0 +1,12 @@
+import type {
+  BezierComponentProps,
+  SizeProps,
+  V3ColorProps,
+} from '~/src/types/props'
+
+export type SpinnerSize = 'xl' | 'l' | 'm' | 's' | 'xs'
+
+export interface SpinnerProps
+  extends Omit<BezierComponentProps<'div'>, keyof V3ColorProps>,
+    SizeProps<SpinnerSize>,
+    V3ColorProps {}

package/src/v3/Spinner/index.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner'
+export type { SpinnerProps, SpinnerSize } from './Spinner.types'

package/src/v3/Text/Text.module.scss

@@ -0,0 +1,69 @@
+@use '../../styles/mixins/typography';
+
+$typo-sizes: 11, 12, 13, 14, 15, 16, 17, 18, 22, 24, 30, 36;
+
+.Text {
+  --b-text-color: initial;
+  --b-text-font-weight: var(--typography-font-weight-400);
+  --b-text-line-clamp: 1;
+  --b-text-line-height: initial;
+  --b-text-font-size: initial;
+  --b-text-letter-spacing: initial;
+
+  font-size: var(--b-text-font-size);
+  font-weight: var(--b-text-font-weight);
+  font-style: normal;
+  line-height: var(--b-text-line-height);
+  color: var(--b-text-color);
+  letter-spacing: var(--b-text-letter-spacing);
+
+  &:where(.bold) {
+    --b-text-font-weight: var(--typography-font-weight-600);
+  }
+
+  &:where(.italic) {
+    font-style: italic;
+  }
+
+  &:where(.truncated) {
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:where(.multi-line-truncated) {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+
+    max-height: calc(var(--b-text-line-clamp) * var(--b-text-line-height));
+
+    text-overflow: ellipsis;
+
+    -webkit-line-clamp: var(--b-text-line-clamp);
+  }
+
+  &:where(.align-left) {
+    text-align: left;
+  }
+
+  &:where(.align-center) {
+    text-align: center;
+  }
+
+  &:where(.align-right) {
+    text-align: right;
+  }
+
+  @each $size in $typo-sizes {
+    &:where(.typo-#{$size}) {
+      @include typography.size(
+        $size,
+        'b-text-font-size',
+        'b-text-line-height',
+        'b-text-letter-spacing'
+      );
+    }
+  }
+}

package/src/v3/Text/Text.stories.tsx

@@ -0,0 +1,52 @@
+import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
+
+import { Box } from '~/src/v3/Box'
+
+import { Text } from './Text'
+import { type TextProps } from './Text.types'
+
+const meta: Meta<typeof Text> = {
+  title: 'V3 components/Text',
+  component: Text,
+}
+
+const Template: StoryFn<TextProps> = ({ children, ...rest }) => (
+  <Box width={200}>
+    <Text {...rest}>{children}</Text>
+  </Box>
+)
+
+export const Primary: StoryObj<typeof Text> = {
+  render: Template,
+  args: {
+    bold: false,
+    italic: false,
+    truncated: false,
+    color: 'text-neutral',
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    typo: '15',
+  },
+}
+
+const MultiLineTruncated: StoryFn<TextProps> = ({ children, ...rest }) => (
+  <Box width={200}>
+    <Text
+      {...rest}
+      color="text-neutral"
+    >
+      {children}
+    </Text>
+  </Box>
+)
+
+export const Secondary: StoryObj<typeof Text> = {
+  render: MultiLineTruncated,
+  args: {
+    truncated: 4,
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dolor nunc, bibendum vel neque eget, facilisis ornare justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In laoreet ipsum in commodo eleifend. Duis vestibulum, nulla ut tincidunt molestie, eros massa commodo risus, non sollicitudin turpis diam vitae elit.',
+  },
+  name: 'Multi-line truncated',
+}
+
+export default meta

package/src/v3/Text/Text.test.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react'
+
+import { colorTokenCssVar } from '~/src/utils/style'
+import { render } from '~/src/utils/test'
+
+import { Text } from './Text'
+import { type TextProps } from './Text.types'
+
+import styles from './Text.module.scss'
+
+const TEXT = 'Hello, Channel!'
+
+describe('Text', () => {
+  const renderText = (props?: Partial<TextProps>) =>
+    render(<Text {...props}>{TEXT}</Text>)
+
+  it('should have default style', () => {
+    const { getByText } = renderText()
+    const rendered = getByText(TEXT)
+
+    expect(rendered).toHaveClass(styles.Text)
+    expect(rendered).toHaveClass(styles['typo-15'])
+  })
+
+  it('should render as the given element', () => {
+    const { getByText } = renderText({ as: 'p' })
+    const rendered = getByText(TEXT)
+
+    expect(rendered.tagName).toBe('P')
+  })
+
+  it('should forward ref', () => {
+    const ref = React.createRef<HTMLElement>()
+
+    render(<Text ref={ref}>{TEXT}</Text>)
+
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('should receive color and font weight', () => {
+    const { getByText } = renderText({
+      color: 'text-neutral',
+      fontWeight: '600',
+    })
+    const rendered = getByText(TEXT)
+
+    expect(rendered).toHaveStyle(
+      `--b-text-color: ${colorTokenCssVar('text-neutral')}`
+    )
+    expect(rendered).toHaveStyle(
+      '--b-text-font-weight: var(--typography-font-weight-600)'
+    )
+  })
+
+  it('should receive text styles', () => {
+    const { getByText } = renderText({
+      bold: true,
+      italic: true,
+      align: 'center',
+      typo: '24',
+    })
+    const rendered = getByText(TEXT)
+
+    expect(rendered).toHaveClass(styles.bold)
+    expect(rendered).toHaveClass(styles.italic)
+    expect(rendered).toHaveClass(styles['align-center'])
+    expect(rendered).toHaveClass(styles['typo-24'])
+  })
+
+  it('should receive truncated style', () => {
+    const { getByText } = renderText({ truncated: true })
+    const rendered = getByText(TEXT)
+
+    expect(rendered).toHaveClass(styles.truncated)
+  })
+
+  it('should receive multi-line truncated style', () => {
+    const { getByText } = renderText({ truncated: 2 })
+    const rendered = getByText(TEXT)
+
+    expect(rendered).toHaveClass(styles['multi-line-truncated'])
+    expect(rendered).toHaveStyle('--b-text-line-clamp: 2')
+  })
+})

package/src/v3/Text/Text.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { createElement, forwardRef } from 'react'
+
+import classNames from 'classnames'
+
+import { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'
+import { colorTokenCssVar } from '~/src/utils/style'
+import { isNumber } from '~/src/utils/type'
+
+import { type TextProps } from './Text.types'
+
+import styles from './Text.module.scss'
+
+function fontWeightTokenCssVar(fontWeight?: TextProps['fontWeight']) {
+  return fontWeight ? `var(--typography-font-weight-${fontWeight})` : undefined
+}
+
+/**
+ * `Text` is a component for representing the typography of a design system.
+ * @example
+ *
+ * ```tsx
+ * <Text
+ *   typo="15"
+ *   color="text-neutral"
+ * >
+ *   Hello, Channel!
+ * </Text>
+ * ```
+ */
+export const Text = forwardRef<HTMLElement, TextProps>(
+  function Text(props, forwardedRef) {
+    const [marginProps, marginRest] = splitByMarginProps(props)
+    const marginStyles = getMarginStyles(marginProps)
+
+    const {
+      children,
+      style,
+      className,
+      as = 'span',
+      typo = '15',
+      color,
+      bold,
+      fontWeight,
+      italic,
+      truncated,
+      align,
+      ...rest
+    } = marginRest
+    const isMultiLineTruncated = isNumber(truncated) && truncated >= 1
+
+    return createElement(
+      as,
+      {
+        ref: forwardedRef,
+        style: {
+          '--b-text-color': colorTokenCssVar(color),
+          '--b-text-font-weight': fontWeightTokenCssVar(fontWeight),
+          '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,
+          ...marginStyles.style,
+          ...style,
+        },
+        className: classNames(
+          styles.Text,
+          styles[`typo-${typo}`],
+          bold && styles.bold,
+          italic && styles.italic,
+          truncated === true
+            ? styles.truncated
+            : isMultiLineTruncated && styles['multi-line-truncated'],
+          align && styles[`align-${align}`],
+          marginStyles.className,
+          className
+        ),
+        ...rest,
+      },
+      children
+    )
+  }
+)

package/src/v3/Text/Text.types.ts

@@ -0,0 +1,70 @@
+import {
+  type BetaTextSemanticColor,
+  type BetaTypographyFontWeight,
+} from '~/src/types/beta-tokens'
+import {
+  type BezierComponentProps,
+  type ChildrenProps,
+  type PolymorphicProps,
+  type V3MarginProps,
+} from '~/src/types/props'
+
+type Typography =
+  | '11'
+  | '12'
+  | '13'
+  | '14'
+  | '15'
+  | '16'
+  | '17'
+  | '18'
+  | '22'
+  | '24'
+  | '30'
+  | '36'
+
+type TextAlign = 'left' | 'center' | 'right'
+
+interface TextOwnProps {
+  /**
+   * Typography style of the text.
+   * @default '15'
+   */
+  typo?: Typography
+  /**
+   * Color of the text. If no value is specified, it inherits the color of the parent element.
+   */
+  color?: BetaTextSemanticColor
+  /**
+   * Whether the text is bold.
+   * @default false
+   */
+  bold?: boolean
+  /**
+   * Font weight of the text.
+   * If `bold` and `fontWeight` are used together, `fontWeight` takes precedence.
+   */
+  fontWeight?: BetaTypographyFontWeight
+  /**
+   * Whether the text is italic.
+   * @default false
+   */
+  italic?: boolean
+  /**
+   * Whether the text is truncated.
+   * If it is a positive integer, it means the maximum number of lines.
+   * @default false
+   */
+  truncated?: boolean | number
+  /**
+   * Horizontal alignment of the text.
+   */
+  align?: TextAlign
+}
+
+export interface TextProps
+  extends Omit<BezierComponentProps, keyof TextOwnProps>,
+    PolymorphicProps,
+    ChildrenProps,
+    V3MarginProps,
+    TextOwnProps {}

package/src/v3/Text/index.ts

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

package/src/v3/VStack/VStack.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
+
+import { range } from '~/src/utils/number'
+import { Box } from '~/src/v3/Box'
+import { Text } from '~/src/v3/Text'
+
+import { VStack } from './VStack'
+
+const meta = {
+  title: 'V3 components/VStack',
+  component: VStack,
+} satisfies Meta<typeof VStack>
+
+type Story = StoryObj<typeof meta>
+
+function DecorativeBox({ children }: React.PropsWithChildren<{}>) {
+  return (
+    <Box
+      width={50}
+      height={50}
+      backgroundColor="fill-neutral"
+      borderRadius="8"
+      borderWidth={1}
+      borderColor="border-neutral"
+    >
+      <Text>{children}</Text>
+    </Box>
+  )
+}
+
+const Template: StoryFn<typeof VStack> = (args) => (
+  <VStack
+    {...args}
+    borderColor="border-neutral"
+    borderWidth={1}
+  >
+    {range(4).map((i) => (
+      <DecorativeBox key={`item-${i}`}>{i + 1}</DecorativeBox>
+    ))}
+  </VStack>
+)
+
+export const Primary: Story = {
+  render: Template,
+  args: {
+    justify: 'start',
+    align: 'start',
+    reverse: false,
+    wrap: true,
+    width: 300,
+    height: 300,
+    spacing: 6,
+  },
+}
+
+export default meta

package/src/v3/VStack/VStack.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '~/src/utils/test'
+import styles from '~/src/v3/BaseStack/BaseStack.module.scss'
+
+import { VStack } from './VStack'
+
+describe('VStack', () => {
+  it('should render vertical stack', () => {
+    const { getByText } = render(<VStack>Hello, Channel!</VStack>)
+    const rendered = getByText('Hello, Channel!')
+
+    expect(rendered).toHaveClass(styles.BaseStack)
+    expect(rendered).toHaveClass(styles['direction-vertical'])
+  })
+})

package/src/v3/VStack/VStack.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { createElement, forwardRef } from 'react'
+
+import { BaseStack } from '~/src/v3/BaseStack/BaseStack'
+
+import type { VStackProps } from './VStack.types'
+
+/**
+ * `VStack` is a shorthand component equivalent to `Stack` with a vertical direction property.
+ * @see BaseStack
+ */
+export const VStack = forwardRef<HTMLElement, VStackProps>(
+  function VStack(props, forwardedRef) {
+    return createElement(BaseStack, {
+      ...props,
+      direction: 'vertical',
+      ref: forwardedRef,
+    })
+  }
+)

package/src/v3/VStack/VStack.types.ts

@@ -0,0 +1 @@
+export type { VStackProps } from '~/src/v3/BaseStack/BaseStack.types'

package/src/v3/VStack/index.ts

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