@uniai-fe/uds-primitives 0.2.10 → 0.3.0

package/src/components/table/markup/Container.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import type { TableTemplateColumn, TableTemplateProps } from "../types";
+import type { TableContainerProps } from "../types";
 import TableBody from "./foundation/Body";
 import TableCell from "./foundation/Cell";
 import TableHead from "./foundation/Head";
@@ -7,33 +7,12 @@ import TableTh from "./foundation/Th";
 import TableRoot from "./foundation/Root";
 import TableRow from "./foundation/Row";
 
-const resolveHeadContent = (column: TableTemplateColumn): React.ReactNode => {
-  if (typeof column.cellContents !== "undefined") {
-    return column.cellContents;
-  }
-
-  if (typeof column.cellChildren !== "undefined") {
-    return column.cellChildren;
-  }
-
-  if (typeof column.headContent !== "undefined") {
-    return column.headContent;
-  }
-
-  if (typeof column.dataName !== "undefined") {
-    return column.dataName;
-  }
-
-  return column.dataKey;
-};
-
 /**
  * Table Preset; 기본 Container 조합 컴포넌트
  * @component
- * @param {TableTemplateProps} props
- * @param {TableTemplateColumn[]} [props.columns] colgroup/head 자동 렌더링 column 목록
+ * @param {TableContainerProps} props
+ * @param {TableColumnData[]} [props.columns] colgroup/head 자동 렌더링 column 목록
  * @param {boolean} [props.isCustomBody=false] true면 body wrapper 없이 children 직접 렌더링
- * @param {"legacy-rem" | "raw"} [props.widthMode="legacy-rem"] number width 해석 방식
  * @param {React.ReactNode} [props.footer] footer 노드. `<Table.Foot />`를 직접 전달하는 방식을 권장
  * @param {React.ReactNode} [props.children] table body 콘텐츠
  * @example
@@ -52,60 +31,45 @@ const resolveHeadContent = (column: TableTemplateColumn): React.ReactNode => {
  *   {rows}
  * </Table.Container>
  */
-const TableContainer = forwardRef<HTMLTableElement, TableTemplateProps>(
-  (
-    {
-      columns,
-      isCustomBody = false,
-      widthMode = "legacy-rem",
-      footer,
-      children,
-      ...tableProps
-    },
-    ref,
-  ) => {
-    const hasColumns = Array.isArray(columns) && columns.length > 0;
+const TableContainer = forwardRef<HTMLTableElement, TableContainerProps>(
+  ({ columns, isCustomBody = false, footer, children, ...tableProps }, ref) => {
+    // 변경: optional columns를 안전하게 순회하기 위한 기본 배열을 고정한다.
+    const resolvedColumns = columns ?? [];
+    // 변경: columns 존재 여부만 단일 플래그로 관리해 렌더 분기 가독성을 유지한다.
+    const hasColumns = resolvedColumns.length > 0;
 
     return (
       <TableRoot {...tableProps} ref={ref}>
         {hasColumns && (
           <colgroup>
-            {columns.map(({ key, width, dataKey, className, span }) => {
-              const normalizedWidth =
-                typeof width === "number"
-                  ? widthMode === "legacy-rem"
-                    ? `${width / 10}rem`
-                    : width
-                  : width;
-
-              return (
-                <col
-                  key={`${key}/colgroup`}
-                  className={className}
-                  data-key={dataKey}
-                  span={span}
-                  style={
-                    normalizedWidth
-                      ? {
-                          width: normalizedWidth,
-                        }
-                      : undefined
-                  }
-                  width={typeof width === "number" ? width : undefined}
-                />
-              );
-            })}
+            {resolvedColumns.map(({ key, width, dataKey, className }) => (
+              <col
+                key={`${key}/colgroup`}
+                className={className}
+                data-key={dataKey}
+                style={
+                  typeof width !== "undefined"
+                    ? {
+                        // 변경: width는 number|string 값을 그대로 사용하고, 단위 해석은 사용처에서 결정한다.
+                        width,
+                      }
+                    : undefined
+                }
+                width={typeof width === "number" ? width : undefined}
+              />
+            ))}
           </colgroup>
         )}
 
         {hasColumns && (
           <TableHead>
             <TableRow>
-              {columns.map(column => (
-                <TableTh key={`${column.key}/head`} data-key={column.dataKey}>
+              {resolvedColumns.map(({ key, dataKey, align, cellContents }) => (
+                <TableTh key={`${key}/head`} data-key={dataKey}>
                   {/* 변경: 헤더 셀 여백/정렬도 Cell 레이어에서 일관 제어한다. */}
-                  <TableCell section="head" alignX={column.align}>
-                    {resolveHeadContent(column)}
+                  <TableCell section="head" alignX={align}>
+                    {/* 변경: 헤더 콘텐츠는 cellContents 우선, 미지정 시 key를 fallback으로 사용한다. */}
+                    {typeof cellContents !== "undefined" ? cellContents : key}
                   </TableCell>
                 </TableTh>
               ))}

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

@@ -53,14 +53,14 @@ 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"} [align] 헤더 정렬
  */
-export interface TableColgroupColumn {
+export interface TableColumnData {
   /**
    * column 고유 key
    */
@@ -70,47 +70,17 @@ 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;
   /**
    * 헤더 정렬
    */
@@ -118,26 +88,21 @@ export interface TableTemplateColumn extends TableColgroupColumn {
 }
 
 /**
- * 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 노드
    */

package/src/index.tsx

@@ -1,33 +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 "./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;
-}