@uniai-fe/uds-primitives 0.2.11 → 0.3.1

package/src/components/table/types/foundation.ts

@@ -2,20 +2,50 @@ import type { ComponentPropsWithoutRef } from "react";
 
 export const TABLE_CELL_ALIGN_OPTIONS = ["left", "center", "right"] as const;
 export const TABLE_CELL_ALIGN_Y_OPTIONS = ["top", "center", "bottom"] as const;
+export const TABLE_CELL_JUSTIFY_CONTENT_OPTIONS = [
+  "normal",
+  "start",
+  "end",
+  "flex-start",
+  "flex-end",
+  "center",
+  "left",
+  "right",
+  "space-between",
+  "space-around",
+  "space-evenly",
+  "stretch",
+] as const;
+export const TABLE_CELL_ALIGN_ITEMS_OPTIONS = [
+  "normal",
+  "stretch",
+  "center",
+  "start",
+  "end",
+  "flex-start",
+  "flex-end",
+  "self-start",
+  "self-end",
+  "baseline",
+] as const;
 export const TABLE_CELL_PADDING_OPTIONS = ["default", "none"] as const;
 export const TABLE_SECTIONS = ["head", "body", "foot"] as const;
 export const TABLE_LAYOUT_OPTIONS = ["line", "grid"] as const;
 
 /**
- * Table Types; Cell 정렬 값 타입
- * @typedef {"left" | "center" | "right"} TableCellAlign
+ * Table Types; Cell 가로 정렬 값 타입
+ * @typedef {"left" | "center" | "right" | "normal" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch"} TableCellAlignX
  */
-export type TableCellAlign = (typeof TABLE_CELL_ALIGN_OPTIONS)[number];
+export type TableCellAlignX =
+  | (typeof TABLE_CELL_ALIGN_OPTIONS)[number]
+  | (typeof TABLE_CELL_JUSTIFY_CONTENT_OPTIONS)[number];
 /**
  * Table Types; Cell 세로 정렬 값 타입
- * @typedef {"top" | "center" | "bottom"} TableCellAlignY
+ * @typedef {"top" | "center" | "bottom" | "normal" | "stretch" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline"} TableCellAlignY
  */
-export type TableCellAlignY = (typeof TABLE_CELL_ALIGN_Y_OPTIONS)[number];
+export type TableCellAlignY =
+  | (typeof TABLE_CELL_ALIGN_Y_OPTIONS)[number]
+  | (typeof TABLE_CELL_ALIGN_ITEMS_OPTIONS)[number];
 /**
  * Table Types; Cell padding 제어 타입
  * @typedef {"default" | "none"} TableCellPadding
@@ -53,14 +83,15 @@ export interface TableRootProps extends ComponentPropsWithoutRef<"table"> {
 export interface TableColgroupProps extends ComponentPropsWithoutRef<"colgroup"> {}
 
 /**
- * Table Types; Colgroup column item
+ * Table Types; Container column data
  * @property {string} key column 고유 key
  * @property {number | string} [width] width 값
- * @property {string} [dataKey] data-key attr 값
- * @property {string} [className] col className
- * @property {number} [span] col span 값
+ * @property {string} [dataKey] tbody loop 렌더링 시 데이터 매핑(property key)용 식별자 및 data-key attr 값
+ * @property {React.ReactNode} [cellContents] 헤더 셀 콘텐츠
+ * @property {"left" | "center" | "right" | "normal" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch"} [alignX] 헤더 가로 정렬(CSS `justify-content` 값과 매핑)
+ * @property {"top" | "center" | "bottom" | "normal" | "stretch" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline"} [alignY] 헤더 세로 정렬(CSS `align-items` 값과 매핑)
  */
-export interface TableColgroupColumn {
+export interface TableColumnData {
   /**
    * column 고유 key
    */
@@ -70,74 +101,43 @@ export interface TableColgroupColumn {
    */
   width?: number | string;
   /**
-   * data-key attr 값
+   * tbody loop 렌더링 시 데이터 매핑(property key)용 식별자 및 data-key attr 값
    */
   dataKey?: string;
   /**
    * col className
    */
   className?: string;
-  /**
-   * col span 값
-   */
-  span?: number;
-}
-
-/**
- * Table Types; Template column item
- * @property {string} key column 고유 key
- * @property {number | string} [width] width 값
- * @property {string} [dataKey] data-key attr 값
- * @property {string} [dataName] 헤더 식별자
- * @property {React.ReactNode} [headContent] 헤더 셀 콘텐츠
- * @property {React.ReactNode} [cellContents] ui-legacy 호환 헤더 콘텐츠
- * @property {React.ReactNode} [cellChildren] 서비스 호환 헤더 콘텐츠
- * @property {"left" | "center" | "right"} [align] 헤더 정렬
- */
-export interface TableTemplateColumn extends TableColgroupColumn {
-  /**
-   * 헤더 식별자
-   */
-  dataName?: string;
   /**
    * 헤더 셀 콘텐츠
    */
-  headContent?: React.ReactNode;
-  /**
-   * ui-legacy 호환 헤더 콘텐츠
-   */
   cellContents?: React.ReactNode;
   /**
-   * 서비스 호환 헤더 콘텐츠
+   * 헤더 가로 정렬
    */
-  cellChildren?: React.ReactNode;
+  alignX?: TableCellAlignX;
   /**
-   * 헤더 정렬
+   * 헤더 세로 정렬
    */
-  align?: TableCellAlign;
+  alignY?: TableCellAlignY;
 }
 
 /**
- * Table Types; Template props
- * @property {TableTemplateColumn[]} [columns] colgroup/head 자동 렌더링용 column 데이터
+ * Table Types; Container props
+ * @property {TableColumnData[]} [columns] colgroup/head 자동 렌더링용 column 데이터
  * @property {boolean} [isCustomBody] true면 body wrapper 없이 children을 직접 렌더링
- * @property {"legacy-rem" | "raw"} [widthMode] number width 해석 방식
  * @property {React.ReactNode} [footer] footer 노드
  * @property {React.ReactNode} [children] body 콘텐츠
  */
-export interface TableTemplateProps extends TableRootProps {
+export interface TableContainerProps extends TableRootProps {
   /**
    * colgroup/head 자동 렌더링용 column 데이터
    */
-  columns?: TableTemplateColumn[];
+  columns?: TableColumnData[];
   /**
    * true면 body wrapper 없이 children을 직접 렌더링
    */
   isCustomBody?: boolean;
-  /**
-   * number width 해석 방식
-   */
-  widthMode?: "legacy-rem" | "raw";
   /**
    * footer 노드
    */
@@ -201,15 +201,17 @@ export interface TableTdProps extends ComponentPropsWithoutRef<"td"> {}
 /**
  * Table Types; Cell content props
  * @property {"head" | "body" | "foot"} [section] cell 상위 섹션
- * @property {"left" | "center" | "right"} [alignX] cell 콘텐츠 가로 정렬
- * @property {"top" | "center" | "bottom"} [alignY] cell 콘텐츠 세로 정렬
+ * @property {"left" | "center" | "right" | "normal" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch"} [alignX] cell 콘텐츠 가로 정렬(CSS `justify-content` 값과 매핑)
+ * @property {"top" | "center" | "bottom" | "normal" | "stretch" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline"} [alignY] cell 콘텐츠 세로 정렬(CSS `align-items` 값과 매핑)
  * @property {boolean} [noPadding] true면 cell 내부 padding 제거
  * @property {"default" | "none"} [padding] cell 내부 padding 제어
- * @property {"left" | "center" | "right"} [align] cell 콘텐츠 가로 정렬(호환 alias)
  * @property {string} [className] cell content className
- * @property {React.ReactNode} [children] cell 내부 콘텐츠
+ * @property {React.ReactNode} [children] cell 내부 콘텐츠 `span.table-cell-text.table-${section}-cell-text`
  */
-export interface TableCellContentProps extends ComponentPropsWithoutRef<"div"> {
+export interface TableCellContentProps extends Omit<
+  ComponentPropsWithoutRef<"div">,
+  "children"
+> {
   /**
    * cell 상위 섹션
    */
@@ -217,7 +219,7 @@ export interface TableCellContentProps extends ComponentPropsWithoutRef<"div"> {
   /**
    * cell 콘텐츠 가로 정렬
    */
-  alignX?: TableCellAlign;
+  alignX?: TableCellAlignX;
   /**
    * cell 콘텐츠 세로 정렬
    */
@@ -231,10 +233,11 @@ export interface TableCellContentProps extends ComponentPropsWithoutRef<"div"> {
    */
   padding?: TableCellPadding;
   /**
-   * cell 콘텐츠 가로 정렬(호환 alias)
-   * @deprecated `alignX` 사용을 권장한다.
+   * cell 내부 콘텐츠 `span.table-cell-text.table-${section}-cell-text`
+   * `span.table-cell-text`
+   * `.table-${section}-cell-text`
    */
-  align?: TableCellAlign;
+  children?: React.ReactNode;
 }
 
 /**

package/src/index.scss

@@ -4,20 +4,21 @@
 @use "./components/calendar";
 @use "./components/checkbox";
 @use "./components/chip";
+@use "./components/divider";
 @use "./components/drawer";
 @use "./components/dropdown";
-@use "./components/pop-over";
-@use "./components/tooltip";
-@use "./components/label";
-@use "./components/input";
-@use "./components/select";
 @use "./components/form";
+@use "./components/info-box";
+@use "./components/input";
+@use "./components/label";
 @use "./components/navigation";
 @use "./components/pagination";
+@use "./components/pop-over";
 @use "./components/radio";
 @use "./components/scrollbar";
 @use "./components/segmented-control";
+@use "./components/select";
 @use "./components/spinner";
 @use "./components/tab";
 @use "./components/table";
-@use "./components/divider";
+@use "./components/tooltip";

package/src/index.tsx

@@ -1,34 +1,31 @@
 // Mantine 날짜 생태계와 dayjs 설정을 한 번만 초기화한다.
 import "./init/dayjs";
 import "./init/mantine";
-// ThemeProvider는 foundation provider에서만 export한다(one-source 규칙).
 
 // 루트 배럴: 카테고리별 export를 집계한다.
+export * from "./components/alternate";
+export * from "./components/badge";
 export * from "./components/button";
-export * from "./components/label";
-export * from "./components/input";
+export * from "./components/calendar";
 export * from "./components/checkbox";
-export * from "./components/radio";
-export * from "./components/select";
-export * from "./components/tab";
-export * from "./components/navigation";
+export * from "./components/chip";
+export * from "./components/divider";
+export * from "./components/drawer";
 export * from "./components/dropdown";
+export * from "./components/form";
+export * from "./components/info-box";
+export * from "./components/input";
+export * from "./components/label";
+export * from "./components/navigation";
+export * from "./components/pagination";
 export * from "./components/pop-over";
-export * from "./components/tooltip";
-export * from "./components/drawer";
+export * from "./components/radio";
 export * from "./components/scrollbar";
-export * from "./components/calendar";
-export * from "./components/pagination";
-export * from "./components/table";
-export * from "./components/chip";
-export * from "./components/badge";
-export * from "./components/spinner";
-export * from "./components/alternate";
 export * from "./components/segmented-control";
-export * from "./components/divider";
+export * from "./components/select";
 export * from "./components/slot";
-export * from "./components/info-box";
-export * from "./types";
-
-// 기타 도구
-export * from "./components/form";
+export * from "./components/spinner";
+export * from "./components/tab";
+export * from "./components/table";
+export * from "./components/tooltip";
+export type * from "./types";

package/src/components/button/types/templates.ts

@@ -1,84 +0,0 @@
-import type { ButtonPriority, ButtonProps } from ".";
-
-/**
- * Button; TextButton size 옵션
- * @desc
- * - `small`
- * - `medium`
- * - `large`
- */
-export type TextButtonSize = "small" | "medium" | "large";
-/**
- * Button; TextButton priority 옵션
- * @desc
- * - `secondary`
- * - `tertiary`
- */
-export type TextButtonPriority = Exclude<ButtonPriority, "primary">;
-
-/**
- * Button; TextButton props
- * @property {ElementType} [as] 렌더링할 요소. 기본값은 button.
- * @property {ReactNode} [children] 주 내용. 문자열이면 자동으로 .button-label로 감싼다.
- * @property {TextButtonSize} size 높이/타이포 스케일. scale 조합보다 우선한다.
- * @property {TextButtonPriority} priority semantic color priority.
- * @property {ButtonState} [state] UI 상태. disabled prop과 조합된다.
- * @property {boolean} [block] width:100% 확장 여부.
- * @property {boolean} [loading] true면 readonly 처리 + aria-busy.
- * @property {ReactNode} [left] 라벨 왼쪽 커스텀 슬롯.
- * @property {ReactNode} [right] 라벨 오른쪽 커스텀 슬롯.
- * @property {ButtonUserAction} ["data-user-action"] Interation 상태 강제 표현용 data attr.
- */
-export interface TextButtonProps extends Omit<
-  ButtonProps,
-  "scale" | "priority" | "fill" | "size"
-> {
-  /**
-   * @required
-   * - primary
-   * - secondary
-   * - tertiary
-   */
-  priority: TextButtonPriority;
-  /**
-   * @required
-   * - xlarge
-   * - large
-   * - medium
-   * - small
-   */
-  size: TextButtonSize;
-}
-
-/**
- * Button; RoundButton size 옵션
- * @desc
- * - `small`
- * - `medium`
- * - `large`
- */
-export type RoundButtonSize = "small" | "medium" | "large";
-
-/**
- * Button; RoundButton props
- * @property {ElementType} [as] 렌더링할 요소. 기본값은 button.
- * @property {ReactNode} [children] 주 내용. 문자열이면 자동으로 .button-label로 감싼다.
- * @property {RoundButtonSize} size 높이/타이포 스케일. 템플릿에서 fill/size를 자동 매핑한다.
- * @property {ButtonPriority} priority semantic color priority.
- * @property {ButtonState} [state] UI 상태. disabled prop과 조합된다.
- * @property {boolean} [block] width:100% 확장 여부.
- * @property {boolean} [loading] true면 readonly 처리 + aria-busy.
- * @property {ReactNode} [left] 라벨 왼쪽 커스텀 슬롯.
- * @property {ReactNode} [right] 라벨 오른쪽 커스텀 슬롯.
- * @property {ButtonUserAction} ["data-user-action"] Interation 상태 강제 표현용 data attr.
- */
-export interface RoundButtonProps extends Omit<
-  ButtonProps,
-  "scale" | "size" | "fill"
-> {
-  /**
-   * 라운드 버튼 전용 size 축.
-   * 템플릿에서 fill/size를 자동 매핑한다.
-   */
-  size: RoundButtonSize;
-}

package/src/components/input/utils/verification.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import InputBaseUtilityButton from "../markup/foundation/Button";
-import type { VerificationRequestButtonOptions } from "../types";
-
-/**
- * 인증 요청 버튼의 기본 라벨.
- */
-const DEFAULT_REQUEST_LABEL = "인증번호 요청";
-/**
- * 인증 요청 버튼을 렌더링한다.
- * @function
- * @param {VerificationRequestButtonOptions} options 버튼 옵션
- * @returns {React.ReactNode} 버튼 노드
- */
-export const renderVerificationRequestButton = ({
-  onRequestCode,
-  requestButtonDisabled,
-  requestButtonLabel = DEFAULT_REQUEST_LABEL,
-}: VerificationRequestButtonOptions): React.ReactNode => {
-  // 인증 요청 핸들러가 없으면 버튼 자체를 렌더링하지 않는다.
-  if (!onRequestCode) {
-    return null;
-  }
-
-  return (
-    <InputBaseUtilityButton
-      priority="primary"
-      onClick={onRequestCode}
-      disabled={requestButtonDisabled}
-    >
-      {requestButtonLabel}
-    </InputBaseUtilityButton>
-  );
-};