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

package/src/v3/Box/Box.test.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+
+import { render } from '~/src/utils/test'
+
+import { Box } from './Box'
+import { type BoxProps } from './Box.types'
+
+import styles from './Box.module.scss'
+
+describe('Box', () => {
+  const renderBox = (props?: Partial<BoxProps>) =>
+    render(<Box {...props}>Hello, Channel!</Box>)
+
+  it('should render with default style', () => {
+    const { getByText } = renderBox()
+    const rendered = getByText('Hello, Channel!')
+
+    expect(rendered).toHaveClass(styles.Box)
+  })
+
+  it('should render as the given element', () => {
+    const { getByText } = renderBox({ as: 'section' })
+    const rendered = getByText('Hello, Channel!')
+
+    expect(rendered.tagName).toBe('SECTION')
+  })
+
+  it('should forward ref', () => {
+    const ref = React.createRef<HTMLElement>()
+
+    render(<Box ref={ref} />)
+
+    expect(ref.current).toBeInTheDocument()
+  })
+
+  it('should receive display style', () => {
+    const { getByText } = renderBox({ display: 'inline-block' })
+    const rendered = getByText('Hello, Channel!')
+
+    expect(rendered).toHaveClass(styles['display-inline-block'])
+  })
+
+  it('should receive layout and margin styles', () => {
+    const { getByText } = renderBox({
+      width: '100px',
+      marginTop: 10,
+      style: { backgroundColor: 'red' },
+      className: 'test-class',
+    })
+    const rendered = getByText('Hello, Channel!')
+
+    expect(rendered).toHaveStyle('--b-width: 100px')
+    expect(rendered).toHaveStyle('--b-margin-top: 10px')
+    expect(rendered).toHaveStyle('background-color: red')
+    expect(rendered).toHaveClass('test-class')
+  })
+})

package/src/v3/Box/Box.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { createElement, forwardRef } from 'react'
+import type { CSSProperties } from 'react'
+
+import classNames from 'classnames'
+
+import {
+  getV3LayoutStyles,
+  getV3MarginStyles,
+  splitByV3LayoutProps,
+  splitByV3MarginProps,
+} from '~/src/types/props-helpers'
+
+import type { BoxProps } from './Box.types'
+
+import styles from './Box.module.scss'
+
+/**
+ * `Box` is a primitive layout component. It provides an easy way to access design tokens.
+ * @example
+ *
+ * ```tsx
+ * <Box
+ *   width="100px"
+ *   height="100px"
+ *   padding="6px"
+ *   margin="6px"
+ *   backgroundColor="fill-neutral"
+ * >
+ *   <div>{ ... }</div>
+ * </Box>
+ * ```
+ */
+export const Box = forwardRef<HTMLElement, BoxProps>(
+  function Box(props, forwardedRef) {
+    const [marginProps, marginRest] = splitByV3MarginProps(props)
+    const [layoutProps, layoutRest] = splitByV3LayoutProps(marginRest)
+    const marginStyles = getV3MarginStyles(marginProps)
+    const layoutStyles = getV3LayoutStyles(layoutProps)
+
+    const {
+      children,
+      style,
+      className,
+      as = 'div',
+      display,
+      ...rest
+    } = layoutRest
+
+    /**
+     * NOTE: Keep the existing loose polymorphic Box pattern for API parity.
+     * TODO: Replace this with a typed polymorphic helper when ref inference is standardized.
+     */
+    return createElement(
+      as,
+      {
+        ref: forwardedRef,
+        style: {
+          ...marginStyles.style,
+          ...layoutStyles.style,
+          ...style,
+        } as CSSProperties,
+        className: classNames(
+          styles.Box,
+          display && styles[`display-${display}`],
+          marginStyles.className,
+          layoutStyles.className,
+          className
+        ),
+        'data-testid': 'bezier-box',
+        ...rest,
+      },
+      children
+    )
+  }
+)

package/src/v3/Box/Box.types.ts

@@ -0,0 +1,24 @@
+import type {
+  BezierComponentProps,
+  ChildrenProps,
+  PolymorphicProps,
+  V3LayoutProps,
+  V3MarginProps,
+} from '~/src/types/props'
+
+type Display = 'block' | 'inline' | 'inline-block'
+
+interface BoxOwnProps {
+  /**
+   * Display type of the box.
+   */
+  display?: Display
+}
+
+export interface BoxProps
+  extends Omit<BezierComponentProps<'div'>, keyof BoxOwnProps>,
+    PolymorphicProps,
+    ChildrenProps,
+    V3MarginProps,
+    V3LayoutProps,
+    BoxOwnProps {}

package/src/v3/Box/index.ts

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

package/src/v3/Divider/Divider.module.scss

@@ -0,0 +1,52 @@
+.Divider {
+  --b-v3-divider-indent-size: 6px;
+  --b-v3-divider-thickness: 1px;
+
+  flex-shrink: 0;
+  background-color: var(--color-border-neutral);
+  border-radius: var(--b-v3-divider-thickness);
+
+  &:where(.horizontal) {
+    width: calc(100% - 2 * var(--b-v3-divider-indent-size));
+    height: var(--b-v3-divider-thickness);
+    margin: var(--b-v3-divider-indent-size);
+
+    &:where(.without-indent) {
+      width: 100%;
+      margin: 0;
+    }
+
+    &:where(.without-side-indent) {
+      width: 100%;
+      margin-right: 0;
+      margin-left: 0;
+    }
+
+    &:where(.without-parallel-indent) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &:where(.vertical) {
+    width: var(--b-v3-divider-thickness);
+    height: calc(100% - 2 * var(--b-v3-divider-indent-size));
+    margin: var(--b-v3-divider-indent-size);
+
+    &:where(.without-indent) {
+      height: 100%;
+      margin: 0;
+    }
+
+    &:where(.without-side-indent) {
+      height: 100%;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    &:where(.without-parallel-indent) {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+}

package/src/v3/Divider/Divider.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import { Divider } from './Divider'
+import { type DividerProps } from './Divider.types'
+
+const meta = {
+  title: 'V3 components/Divider',
+  component: Divider,
+  argTypes: {
+    orientation: {
+      control: {
+        type: 'radio',
+      },
+      options: ['horizontal', 'vertical'],
+    },
+    withoutSideIndent: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    withoutParallelIndent: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    withoutIndent: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+} satisfies Meta<typeof Divider>
+
+export default meta
+
+const Template: StoryFn<DividerProps> = (props) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 200,
+      height: 200,
+    }}
+  >
+    <Divider {...props} />
+  </div>
+)
+
+export const Primary: StoryObj<DividerProps> = {
+  render: Template,
+
+  args: {
+    orientation: 'horizontal',
+  },
+}
+
+export const Vertical: StoryObj<DividerProps> = {
+  render: Template,
+
+  args: {
+    orientation: 'vertical',
+  },
+}
+
+const CompositionTemplate: StoryFn<DividerProps> = ({
+  orientation,
+  ...rest
+}) => (
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: orientation === 'horizontal' ? 'column' : 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 200,
+      height: 200,
+    }}
+  >
+    <div>Channel</div>
+    <Divider
+      orientation={orientation}
+      {...rest}
+    />
+    <div>Bezier</div>
+  </div>
+)
+
+export const Composition: StoryObj<DividerProps> = {
+  render: CompositionTemplate,
+
+  args: {
+    orientation: 'horizontal',
+  },
+}

package/src/v3/Divider/Divider.test.tsx

@@ -0,0 +1,47 @@
+import { render } from '~/src/utils/test'
+
+import { Divider } from './Divider'
+import { type DividerProps } from './Divider.types'
+
+import styles from './Divider.module.scss'
+
+describe('Divider', () => {
+  const renderDivider = (props?: Partial<DividerProps>) =>
+    render(<Divider {...props} />)
+
+  it('should render default Divider', () => {
+    const { getByRole } = renderDivider()
+    const divider = getByRole('separator')
+
+    expect(divider).toHaveClass(styles.Divider)
+    expect(divider).toHaveClass(styles.horizontal)
+  })
+
+  it('should render vertical divider with aria-orientation attribute', () => {
+    const { getByRole } = renderDivider({ orientation: 'vertical' })
+    const divider = getByRole('separator')
+
+    expect(divider).toHaveClass(styles.vertical)
+    expect(divider).toHaveAttribute('aria-orientation', 'vertical')
+  })
+
+  it('should receive indent styles', () => {
+    const { getByRole } = renderDivider({
+      withoutIndent: true,
+      withoutParallelIndent: true,
+      withoutSideIndent: true,
+    })
+    const divider = getByRole('separator')
+
+    expect(divider).toHaveClass(styles['without-indent'])
+    expect(divider).toHaveClass(styles['without-parallel-indent'])
+    expect(divider).toHaveClass(styles['without-side-indent'])
+  })
+
+  it('should not have aria attributes when decorative is true', () => {
+    const { getByRole } = renderDivider({ decorative: true })
+    const divider = getByRole('separator')
+
+    expect(divider).not.toHaveAttribute('aria-orientation')
+  })
+})

package/src/v3/Divider/Divider.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { forwardRef } from 'react'
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import classNames from 'classnames'
+
+import type { DividerProps } from './Divider.types'
+
+import styles from './Divider.module.scss'
+
+/**
+ * `Divider` is a component to visually or semantically separate content.
+ * @example
+ *
+ * ```tsx
+ * <Divider
+ *   withoutSideIndent
+ * />
+ * ```
+ */
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  (
+    {
+      orientation = 'horizontal',
+      decorative,
+      withoutSideIndent = false,
+      withoutParallelIndent = false,
+      withoutIndent = false,
+      style,
+      className,
+      ...rest
+    },
+    forwardedRef
+  ) => (
+    <SeparatorPrimitive.Root
+      asChild
+      orientation={orientation}
+      decorative={decorative}
+    >
+      <div
+        ref={forwardedRef}
+        style={style}
+        className={classNames(
+          styles.Divider,
+          styles[orientation],
+          withoutIndent && styles['without-indent'],
+          withoutParallelIndent && styles['without-parallel-indent'],
+          withoutSideIndent && styles['without-side-indent'],
+          className
+        )}
+        role="separator"
+        {...rest}
+      />
+    </SeparatorPrimitive.Root>
+  )
+)

package/src/v3/Divider/Divider.types.ts

@@ -0,0 +1,32 @@
+import type { SeparatorProps as SeparatorPrimitiveProps } from '@radix-ui/react-separator'
+
+import type { BezierComponentProps } from '~/src/types/props'
+
+interface DividerOwnProps {
+  /**
+   * If true, the divider will be rendered without side padding,
+   * which stands for the padding on the left and right sides of the horizontal divider,
+   * and the top and bottom sides of the vertical divider.
+   * @default false
+   */
+  withoutSideIndent?: boolean
+
+  /**
+   * If true, the divider will be rendered without parallel padding,
+   * which stands for the padding on the top and bottom sides of the horizontal divider,
+   * and the left and right sides of the vertical divider.
+   * @default false
+   */
+  withoutParallelIndent?: boolean
+
+  /**
+   * If true, the divider will be rendered without padding,
+   * @default false
+   */
+  withoutIndent?: boolean
+}
+
+export interface DividerProps
+  extends BezierComponentProps<'div'>,
+    SeparatorPrimitiveProps,
+    DividerOwnProps {}

package/src/v3/Divider/index.ts

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

package/src/v3/HStack/HStack.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 { HStack } from './HStack'
+
+const meta = {
+  title: 'V3 components/HStack',
+  component: HStack,
+} satisfies Meta<typeof HStack>
+
+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 HStack> = (args) => (
+  <HStack
+    {...args}
+    borderColor="border-neutral"
+    borderWidth={1}
+  >
+    {range(4).map((i) => (
+      <DecorativeBox key={`item-${i}`}>{i + 1}</DecorativeBox>
+    ))}
+  </HStack>
+)
+
+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/HStack/HStack.test.tsx

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

package/src/v3/HStack/HStack.tsx

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

package/src/v3/HStack/HStack.types.ts

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

package/src/v3/HStack/index.ts

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

package/src/v3/Icon/Icon.module.scss

@@ -0,0 +1,20 @@
+@use '../../styles/mixins/dimension';
+
+$icon-sizes: '10', '12', '16', '20', '24', '36', '44';
+
+.Icon {
+  --b-v3-icon-size: initial;
+  --b-v3-icon-color: initial;
+
+  @include dimension.square(var(--b-v3-icon-size));
+
+  flex: 0 0 auto;
+  color: var(--b-v3-icon-color);
+  transition: color var(--motion-transition-fast);
+
+  @each $size in $icon-sizes {
+    &:where(.size-#{$size}) {
+      --b-v3-icon-size: #{$size}px;
+    }
+  }
+}