@remember-web/primitive 0.2.8 → 0.2.10

package/src/Chips/Chip/index.tsx

@@ -0,0 +1,51 @@
+import { IconCloseS } from '@remember-web/icon';
+import { type ForwardedRef, forwardRef } from 'react';
+import type { PolymorphicComponent } from 'styled-components';
+import { ButtonWrapper, StyledChip } from './styles';
+import { ensureValidChipProps } from './typeGuard';
+import type { ChipProps } from './types';
+
+export const Chip = forwardRef(
+  (props: ChipProps, ref: ForwardedRef<HTMLDivElement | null>) => {
+    const {
+      size = 'medium',
+      variant = 'filled',
+      selected = false,
+      clickable = true,
+      ...rest
+    } = props;
+
+    // NOTE: 개발 모드에서만 런타임 체크 수행
+    if (process.env.NODE_ENV === 'development') {
+      ensureValidChipProps(props);
+    }
+
+    return (
+      <StyledChip
+        ref={ref}
+        aria-live="polite"
+        $size={size}
+        $variant={variant}
+        $selected={selected}
+        $clickable={clickable}
+        data-chip-disabled={props.disabled}
+        {...rest}
+      >
+        {props.leftIcon}
+        {props.children}
+        {props.onDelete && (
+          <ButtonWrapper
+            onClick={(e: React.MouseEvent | React.KeyboardEvent) => {
+              e.stopPropagation();
+              e.preventDefault();
+              props.onDelete?.();
+            }}
+            className="delete-button"
+          >
+            {props.deleteIcon || <IconCloseS />}
+          </ButtonWrapper>
+        )}
+      </StyledChip>
+    );
+  }
+) as PolymorphicComponent<'web', ChipProps>;

package/src/Chips/Chip/styles.ts

@@ -0,0 +1,80 @@
+import { getTypographyStyles } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
+import { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';
+import type { ChipState, ChipStyleProps } from './types';
+
+const getVariantStyles = (props: Partial<ChipStyleProps>) => {
+  const { $variant = 'filled', $selected, $clickable } = props;
+  const getStateStyle = (state: ChipState) => css`
+    background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};
+    color: ${CHIP_VARIANT_STYLE[$variant][state].color};
+    border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};
+    --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};
+    --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};
+  `;
+
+  return css`
+    ${getStateStyle('default')};
+
+    ${
+      $clickable &&
+      css`
+      &:hover:not([data-chip-disabled='true']) {
+        ${getStateStyle('hover')}
+      }
+
+      ${$selected ? '&' : '&:active'}:not([data-chip-disabled="true"]) {
+        ${getStateStyle('selected')}
+        ${$variant === 'outline' && 'border: none;'}
+      }
+      `
+    }
+    
+    &[data-chip-disabled='true'] {
+      ${getStateStyle('disabled')}
+      cursor: not-allowed;
+    }
+
+    & svg {
+      color: var(--left-icon-color);
+    }
+
+    .delete-button svg {
+      color: var(--delete-button-color);
+    }
+  `;
+};
+
+export const StyledChip = styled.div<ChipStyleProps>`
+  ${({ $size, $variant, $clickable = false, ...props }) => css`
+    box-sizing: border-box;
+    user-select: none;
+    cursor: ${$clickable ? 'pointer' : 'default'};
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    gap: 4px;
+
+    width: fit-content;
+    border-radius: 50px;
+    text-align: center;
+    transition: all 0.2s ease-in;
+
+    height: ${CHIP_SIZE_STYLE[$size].height};
+    padding: ${CHIP_SIZE_STYLE[$size].padding};
+
+    ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}
+
+    ${getVariantStyles({ $variant, $clickable, ...props })}
+  `}
+`;
+
+export const ButtonWrapper = styled.button`
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  `;

package/src/Chips/Chip/typeGuard.ts

@@ -0,0 +1,48 @@
+import type { ChipProps, ChipSize, ChipVariant } from './types';
+
+export function ensureValidChipProps(props: ChipProps): props is ChipProps {
+  if (props.clickable === false && 'selected' in props) {
+    throw new Error(
+      '오류: "clickable"이 false일 때는 "selected" 속성을 사용할 수 없습니다. ' +
+        '선택 가능한 Chip을 만들려면 "clickable"을 true로 설정하세요.'
+    );
+  }
+
+  if (props.onDelete === undefined && 'deleteIcon' in props) {
+    throw new Error(
+      '오류: "onDelete" 함수 없이 "deleteIcon"을 사용할 수 없습니다. ' +
+        '"deleteIcon"을 사용하려면 "onDelete" 함수를 함께 사용해야 합니다.'
+    );
+  }
+
+  if (!props.children) {
+    throw new Error(
+      '오류: Chip 컴포넌트에는 반드시 children이 있어야 합니다. '
+    );
+  }
+
+  if (!props.size) {
+    throw new Error('오류: Chip 컴포넌트에는 반드시 size가 있어야 합니다. ');
+  }
+
+  if (!props.variant) {
+    throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');
+  }
+
+  const validSizes: ChipSize[] = ['small', 'medium'];
+  if (props.size && !validSizes.includes(props.size)) {
+    throw new Error(
+      `오류: 올바르지 않은 size 값입니다: "${props.size}". ` +
+        `유효한 size 값은 다음과 같습니다: ${validSizes.join(', ')}.`
+    );
+  }
+
+  const validVariants: ChipVariant[] = ['filled', 'outline', 'dashedLine'];
+  if (props.variant && !validVariants.includes(props.variant)) {
+    throw new Error(
+      `오류: 올바르지 않은 variant 값입니다: "${props.variant}". ` +
+        `유효한 variant 값은 다음과 같습니다: ${validVariants.join(', ')}.`
+    );
+  }
+  return true;
+}

package/src/Chips/Chip/types.ts

@@ -0,0 +1,61 @@
+import type { ComponentProps } from 'react';
+
+// Props types -------------------------------------------------------
+export type ChipSize = 'small' | 'medium';
+
+export type ChipVariant = 'filled' | 'outline' | 'dashedLine';
+
+type ClickableProps =
+  | {
+      clickable?: true;
+      selected?: boolean;
+    }
+  | {
+      clickable: false;
+      selected?: never;
+    };
+
+type DeleteProps =
+  | {
+      onDelete: VoidFunction;
+      deleteIcon?: React.ReactNode;
+    }
+  | {
+      onDelete?: never;
+      deleteIcon?: never;
+    };
+
+type BaseChipProps = {
+  size: ChipSize;
+  variant: ChipVariant;
+  children: React.ReactNode;
+  leftIcon?: React.ReactNode;
+  disabled?: boolean;
+};
+
+export type ChipProps = BaseChipProps &
+  ClickableProps &
+  DeleteProps &
+  ComponentProps<'div'>;
+
+// Styling types -------------------------------------------------------
+export type ChipState = 'default' | 'hover' | 'disabled' | 'selected';
+
+export type ChipStyleProps = {
+  $size: ChipSize;
+  $variant: ChipVariant;
+  $clickable: boolean;
+  $selected: boolean;
+};
+
+interface ChipStateStyle {
+  backgroundColor: string;
+  color: string;
+  leftIconColor: string;
+  deleteButtonColor: string;
+  border?: string;
+}
+
+type ChipStateStyles = Record<ChipState, ChipStateStyle>;
+
+export type ChipVariantStyleMap = Record<ChipVariant, ChipStateStyles>;

package/src/Chips/index.ts

@@ -0,0 +1 @@
+export * from './Chip';

package/src/Inputs/TextInput/index.tsx

@@ -39,6 +39,13 @@ const TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
     props.hasTogglePasswordVisibilityButton &&
     isVisiblePassword;
 
+  // NOTE: InputInner 컴포넌트에 전달되는 input native 속성에 커스텀 props인 hasTogglePasswordVisibilityButton가 전달되지 않도록 하는 처리
+  // type === 'password' 일 때에 hasTogglePasswordVisibilityButton 속성이 존재할 수 있음.
+  const inputInnerProps = {
+    ...props,
+    hasTogglePasswordVisibilityButton: undefined,
+  };
+
   return (
     <InputWrapper $width={width}>
       {label && (
@@ -49,7 +56,7 @@ const TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
       )}
       <InputContainer
         disabled={disabled}
-        hasError={!!errorMessage}
+        $hasError={!!errorMessage}
         className={className}
       >
         {leftElement && <InputDecorator>{leftElement}</InputDecorator>}
@@ -57,7 +64,7 @@ const TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
           disabled={disabled}
           id={inputId}
           aria-labelledby={label ? labelId : undefined}
-          {...props}
+          {...inputInnerProps}
           type={isForceVisibleInput ? 'text' : props.type || 'text'}
           ref={ref}
         />

package/src/Inputs/TextInput/styles.ts

@@ -23,7 +23,7 @@ export const InputWrapper = styled.div<{ $width?: string | number }>`
 
 export const InputContainer = styled.div<{
   disabled?: boolean;
-  hasError?: boolean;
+  $hasError?: boolean;
 }>`
   display: flex;
   align-items: center;
@@ -36,8 +36,8 @@ export const InputContainer = styled.div<{
     border-color 0.2s,
     background-color 0.2s;
 
-  ${({ hasError, disabled }) => [
-    hasError
+  ${({ $hasError, disabled }) => [
+    $hasError
       ? css`
           border-color: ${roleRed};
         `

package/src/index.ts

@@ -8,3 +8,4 @@ export * from './Modals';
 export * from './Paginations';
 export * from './Inputs';
 export * from './Floating';
+export * from './Chips';

package/src/stories/common.styles.tsx

@@ -44,7 +44,7 @@ export const TableHeader = styled.thead``;
 
 export const TableBody = styled.tbody``;
 
-const Th = styled.th<{ align?: TextAlign }>`
+const Th = styled.th<{ align?: TextAlign; rowSpan?: number }>`
   border: 1px solid ${contents100};
   border-width: 1px 0 1px 0;
   padding: 10px;
@@ -52,7 +52,7 @@ const Th = styled.th<{ align?: TextAlign }>`
   vertical-align: middle;
 `;
 
-const Td = styled.td<{ align?: TextAlign }>`
+const Td = styled.td<{ align?: TextAlign; rowSpan?: number }>`
   border-bottom: 1px solid ${contents300};
   vertical-align: top;
   padding: 20px 10px;
@@ -63,16 +63,22 @@ const Td = styled.td<{ align?: TextAlign }>`
 export const TableColumn = ({
   isHeader,
   align = 'left',
+  rowSpan,
   children,
 }: {
   isHeader?: boolean;
   align?: TextAlign;
+  rowSpan?: number;
   children: ReactNode;
 }) =>
   isHeader ? (
-    <Th align={align}>{children}</Th>
+    <Th align={align} rowSpan={rowSpan}>
+      {children}
+    </Th>
   ) : (
-    <Td align={align}>{children}</Td>
+    <Td align={align} rowSpan={rowSpan}>
+      {children}
+    </Td>
   );
 
 export const TableRow = styled.tr``;