Divider 컴포넌트 훔쳐오기

import React, {
  ComponentPropsWithoutRef,
  ComponentPropsWithRef,
  ElementType,
  forwardRef,
  ReactElement,
} from 'react';
 
import * as S from './Divider.style';
import { neutralDay } from '@/foundation/color';
 
export type Orientations = 'horizontal' | 'vertical';
 
type DividerProps<T extends ElementType = 'hr'> = {
  as?: T;
  size?: number;
  color?: string;
  decorative?: boolean;
  orientation?: Orientations;
  isFlexItem?: boolean;
} & ComponentPropsWithoutRef<T>;
 
type DividerComponent = <T extends ElementType = 'hr'>(
  props: DividerProps<T>,
) => ReactElement | null;
 
const DEFAULT_ORIENTATION = 'horizontal';
 
/**
 * `Divider`는 수평 또는 수직으로 구분선을 그립니다.
 *
 * @example <caption>Horizontal</caption>
 * <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
 *   <button>Button</button>
 *   <Divider />
 *   <button>Button</button>
 * </div>
 *
 * @example <caption>Vertical: 부모 요소의 높이가 명시적으로 설정되어 있어야 합니다.</caption>
 * <div style={{ display: 'flex', gap: '16px' }}>
 *   <button>Button</button>
 *   <Divider orientation='vertical' isFlexItem />
 *   <button>Button</button>
 * </div>
 *
 * ----------------------------------------
 *
 * @prop {number} [size=1] - 선의 두께를 지정합니다.
 * @prop {string} [color=neutralDay.gray90] - 선의 색상을 지정합니다.
 * @prop {boolean} [decorative=false] - 스크린 리더에서 이 요소를 무시할지 여부를 결정합니다. 즉 접근성과 관련 없는 장식용이라면 true로 설정합니다.
 * @prop {'horizontal'|'vertical'} [orientation='horizontal'] - 선의 방향을 지정합니다. 'horizontal' 또는 'vertical' 값을 가질 수 있습니다.
 * @prop {boolean} [isFlexItem=false] - divider가 flex의 item인지 여부를 결정합니다. true로 설정하면 부모 요소의 height를 명시적으로 설정할 필요가 없습니다.
 */
export const Divider: DividerComponent = forwardRef(function Divider<T extends ElementType = 'hr'>(
  {
    as,
    size = 1,
    color = neutralDay.gray90,
    decorative = false,
    orientation = DEFAULT_ORIENTATION,
    isFlexItem = false,
    ...restProps
  }: DividerProps<T>,
  ref?: ComponentPropsWithRef<T>['ref'],
) {
  const semanticProps = decorative
    ? { role: 'none' }
    : { role: 'separator', 'aria-orientation': orientation };
 
  return (
    <S.Divider
      as={as}
      ref={ref}
      size={size}
      color={color}
      orientation={orientation}
      isFlexItem={isFlexItem}
      {...semanticProps}
      {...restProps}
    />
  );
});

import styled from '@emotion/styled';
 
import { Orientations } from './Divider';
 
function getDividerStyle(
  size: number,
  color: string,
  orientation: Orientations,
  isFlexItem: boolean,
) {
  return {
    horizontal: {
      width: '100%',
      borderTop: `${size}px solid ${color}`,
    },
    vertical: {
      height: isFlexItem ? 'auto' : '100%',
      borderLeft: `${size}px solid ${color}`,
      alignSelf: isFlexItem ? 'stretch' : 'auto',
    },
  }[orientation];
}
 
export const Divider = styled.hr<{
  size: number;
  color: string;
  orientation: Orientations;
  isFlexItem: boolean;
}>`
  border: none;
  margin: 0;
 
  ${({ size, color, orientation, isFlexItem }) =>
    getDividerStyle(size, color, orientation, isFlexItem)}
`;