@uniai-fe/uds-primitives 0.2.8 → 0.2.10

package/src/components/table/markup/foundation/Row.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableRowProps } from "../../types";
+
+/**
+ * Table Foundation; Tr 마크업 컴포넌트
+ * @component
+ * @param {TableRowProps} props
+ * @param {string} [props.className] tr className
+ * @param {React.ReactNode} [props.children] row 내부 콘텐츠
+ */
+const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ className, children, section, ...rowProps }, ref) => {
+    return (
+      <tr
+        {...rowProps}
+        ref={ref}
+        className={clsx(
+          "table-row",
+          section && `table-${section}-row`,
+          className,
+        )}
+      >
+        {children}
+      </tr>
+    );
+  },
+);
+
+TableRow.displayName = "TableFoundation.Row";
+
+export default TableRow;

package/src/components/table/markup/foundation/Td.tsx

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableTdProps } from "../../types";
+
+/**
+ * Table Foundation; Td 마크업 컴포넌트
+ * @component
+ * @param {TableTdProps} props
+ * @param {string} [props.className] td className
+ * @param {React.ReactNode} [props.children] 셀 콘텐츠
+ */
+const TableTd = forwardRef<HTMLTableCellElement, TableTdProps>(
+  ({ className, children, style, ...cellProps }, ref) => {
+    return (
+      <td
+        {...cellProps}
+        ref={ref}
+        className={clsx("table-native-cell", "table-td", className)}
+        // 변경: th/td 레벨 text-align은 기본 left 고정으로 유지한다.
+        style={{ ...style, textAlign: "left" }}
+      >
+        {/* 변경: 태그 셀렉터 의존을 피하기 위해 className 기반 텍스트 노드를 사용한다. */}
+        {typeof children === "string" || typeof children === "number" ? (
+          <span className={clsx("table-native-cell-text", "table-td-text")}>
+            {children}
+          </span>
+        ) : (
+          children
+        )}
+      </td>
+    );
+  },
+);
+
+TableTd.displayName = "TableFoundation.Td";
+
+export default TableTd;

package/src/components/table/markup/foundation/Th.tsx

@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableThProps } from "../../types";
+
+/**
+ * Table Foundation; Th 마크업 컴포넌트
+ * @component
+ * @param {TableThProps} props
+ * @param {string} [props.className] th className
+ * @param {React.ReactNode} [props.children] 셀 콘텐츠
+ */
+const TableTh = forwardRef<HTMLTableCellElement, TableThProps>(
+  ({ className, children, scope, style, ...cellProps }, ref) => {
+    return (
+      <th
+        {...cellProps}
+        ref={ref}
+        className={clsx("table-native-cell", "table-th", className)}
+        // th 기본 scope는 col로 유지한다.
+        scope={scope ?? "col"}
+        // 변경: th/td 레벨 text-align은 기본 left 고정으로 유지한다.
+        style={{ ...style, textAlign: "left" }}
+      >
+        {/* 변경: 태그 셀렉터 의존을 피하기 위해 className 기반 텍스트 노드를 사용한다. */}
+        {typeof children === "string" || typeof children === "number" ? (
+          <span className={clsx("table-native-cell-text", "table-th-text")}>
+            {children}
+          </span>
+        ) : (
+          children
+        )}
+      </th>
+    );
+  },
+);
+
+TableTh.displayName = "TableFoundation.Th";
+
+export default TableTh;

package/src/components/table/markup/foundation/index.tsx

@@ -0,0 +1,30 @@
+import TableBody from "./Body";
+import TableCell from "./Cell";
+import TableCol from "./Col";
+import TableColgroup from "./Colgroup";
+import TableFoot from "./Foot";
+import TableHead from "./Head";
+import TableTh from "./Th";
+import TableRoot from "./Root";
+import TableRow from "./Row";
+import TableTd from "./Td";
+
+/**
+ * Table Foundation; 기초 마크업 컴포넌트 세트
+ */
+export const TableFoundation = {
+  Root: TableRoot,
+  Colgroup: TableColgroup,
+  Col: TableCol,
+  Head: TableHead,
+  Body: TableBody,
+  Foot: TableFoot,
+  Row: TableRow,
+  Cell: TableCell,
+  Thead: TableHead,
+  Tbody: TableBody,
+  Tfoot: TableFoot,
+  Tr: TableRow,
+  Th: TableTh,
+  Td: TableTd,
+};

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

@@ -1,4 +1,10 @@
+import { TableFoundation } from "./foundation";
+import TableContainer from "./Container";
+
 /**
- * TODO(table): SOT 및 사용자 제약에 따라 컴포넌트를 구현한다.
+ * Table; 마크업 네임스페이스
  */
-export {};
+export const Table = {
+  ...TableFoundation,
+  Container: TableContainer,
+};

package/src/components/table/styles/foundation.scss

@@ -0,0 +1,247 @@
+.table.table-container {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.table.table-container .table-native-cell.table-th,
+.table.table-container .table-native-cell.table-td {
+  vertical-align: middle;
+  background-color: var(--table-cell-background-color);
+  text-align: left;
+}
+
+// 변경: line 타입은 상/하 border 중심과 헤더/바디 높이 축을 고정한다.
+.table.table-container[data-layout="line"] .table-native-cell.table-th,
+.table.table-container[data-layout="line"] .table-native-cell.table-td {
+  // table cell 내부 field full-bleed 계산을 위해 padding 값을 변수로 노출한다.
+  --table-cell-padding-inline: var(--table-line-cell-padding-inline);
+  --table-cell-padding-block: var(--table-line-cell-padding-block);
+  border-bottom: 1px solid var(--table-border-color);
+}
+
+.table.table-container[data-layout="line"]
+  .table-head
+  .table-native-cell.table-th {
+  height: var(--table-line-cell-height-head);
+  border-top: 1px solid var(--table-border-color);
+  background-color: var(--table-line-head-background-color);
+}
+
+.table.table-container[data-layout="line"]
+  .table-body
+  .table-native-cell.table-td,
+.table.table-container[data-layout="line"]
+  .table-foot
+  .table-native-cell.table-td {
+  height: var(--table-line-cell-height-body);
+}
+
+// 변경: grid 타입은 모든 셀 border와 헤더 배경을 기본 제공한다.
+.table.table-container[data-layout="grid"] .table-native-cell.table-th,
+.table.table-container[data-layout="grid"] .table-native-cell.table-td {
+  // table cell 내부 field full-bleed 계산을 위해 padding 값을 변수로 노출한다.
+  --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
+  --table-cell-padding-block: var(--table-grid-cell-padding-block);
+  border: 1px solid var(--table-border-color);
+  height: var(--table-grid-cell-height);
+}
+
+.table.table-container[data-layout="grid"] {
+  border-radius: var(--table-grid-border-radius);
+  overflow: hidden;
+}
+
+.table.table-container[data-layout="grid"]
+  .table-head
+  .table-native-cell.table-th {
+  background-color: var(--table-grid-head-background-color);
+}
+
+// 변경: tag selector 대신 className selector로 텍스트 스타일 적용 범위를 고정한다.
+.table-native-cell.table-th .table-native-cell-text {
+  color: var(--table-th-text-color);
+  font-size: var(--table-th-text-size);
+  font-weight: var(--table-th-text-weight);
+  line-height: var(--table-th-text-line-height);
+}
+
+.table-native-cell.table-td .table-native-cell-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
+// Cell 콘텐츠 래퍼는 다양한 입력 컴포넌트 정렬을 위한 공통 슬롯이다.
+.table-cell-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  padding-inline: var(--table-cell-padding-inline);
+  padding-block: var(--table-cell-padding-block);
+}
+
+.table-cell-content[data-padding="none"] {
+  padding: 0;
+}
+
+.table-cell-content[data-no-padding="true"] {
+  padding: 0;
+}
+
+// 변경: table cell 내부에서는 input table이 셀 영역을 가득 채우도록 컨텍스트 규칙을 둔다.
+.table-cell-content[data-padding="default"] .input[data-priority="table"] {
+  width: calc(100% + (var(--table-cell-padding-inline) * 2));
+  height: 100%;
+  min-height: calc(100% + (var(--table-cell-padding-block) * 2));
+  margin-inline: calc(var(--table-cell-padding-inline) * -1);
+  margin-block: calc(var(--table-cell-padding-block) * -1);
+  flex: 1 1 auto;
+}
+
+.table-cell-content[data-padding="default"]
+  :where(.input[data-priority="table"] .input-box),
+.table-cell-content[data-padding="default"]
+  :where(.input[data-priority="table"] .input-field) {
+  width: 100%;
+  height: 100%;
+}
+
+.table-cell-content[data-padding="default"] .input-date-field {
+  width: calc(100% + (var(--table-cell-padding-inline) * 2));
+  height: 100%;
+  min-height: calc(100% + (var(--table-cell-padding-block) * 2));
+  margin-inline: calc(var(--table-cell-padding-inline) * -1);
+  margin-block: calc(var(--table-cell-padding-block) * -1);
+}
+
+.table-cell-content[data-padding="default"] :where(.select.select-container) {
+  width: calc(100% + (var(--table-cell-padding-inline) * 2));
+  height: 100%;
+  min-height: calc(100% + (var(--table-cell-padding-block) * 2));
+  margin-inline: calc(var(--table-cell-padding-inline) * -1);
+  margin-block: calc(var(--table-cell-padding-block) * -1);
+  flex: 1 1 auto;
+}
+
+.table-cell-content[data-padding="default"]
+  :where(.select.select-container .select-button) {
+  width: 100%;
+  height: 100%;
+}
+
+.table-cell-content[data-padding="none"]
+  :where(
+    .input[data-priority="table"],
+    .input[data-priority="table"] .input-box,
+    .input[data-priority="table"] .input-field,
+    .input-date-field,
+    .select.select-container,
+    .select.select-container .select-button
+  ),
+.table-cell-content[data-no-padding="true"]
+  :where(
+    .input[data-priority="table"],
+    .input[data-priority="table"] .input-box,
+    .input[data-priority="table"] .input-field,
+    .input-date-field,
+    .select.select-container,
+    .select.select-container .select-button
+  ) {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+// 변경: Cell 슬롯 텍스트도 className selector로 기본 타이포를 동일하게 맞춘다.
+.table-cell-content .table-cell-text {
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+// 변경: Cell.alignX/alignY로 콘텐츠 정렬을 제어한다.
+.table-cell-content[data-align-x="left"],
+.table-cell-content[data-align="left"] {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.table-cell-content[data-align-x="center"],
+.table-cell-content[data-align="center"] {
+  justify-content: center;
+  text-align: center;
+}
+
+.table-cell-content[data-align-x="right"],
+.table-cell-content[data-align="right"] {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.table-cell-content[data-align-y="top"] {
+  align-items: flex-start;
+}
+
+.table-cell-content[data-align-y="center"] {
+  align-items: center;
+}
+
+.table-cell-content[data-align-y="bottom"] {
+  align-items: flex-end;
+}
+
+// 변경: section 기반 Cell 텍스트는 native cell 토큰과 동일한 스케일을 따르게 한다.
+.table-cell.table-head-cell .table-cell-text {
+  color: var(--table-th-text-color);
+  font-size: var(--table-th-text-size);
+  font-weight: var(--table-th-text-weight);
+  line-height: var(--table-th-text-line-height);
+}
+
+// 변경: table priority input/select는 size와 무관하게 table body 텍스트 스케일(15px)을 사용한다.
+.table-cell .input[data-priority="table"] .input-element,
+.table-cell
+  .select.select-container
+  .select-button[data-priority="table"]
+  .select-label,
+.table-cell
+  .select.select-container
+  .select-button[data-priority="table"]
+  .select-label-placeholder {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
+// 변경: radio 라벨은 section 타이포를 따른다(head 13px / body-foot 15px).
+.table-cell.table-head-cell .radio-label-text {
+  color: var(--table-th-text-color);
+  font-size: var(--table-th-text-size);
+  font-weight: var(--table-th-text-weight);
+  line-height: var(--table-th-text-line-height);
+}
+
+.table-cell.table-body-cell .table-cell-text,
+.table-cell.table-foot-cell .table-cell-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
+// 변경: Cell(body/foot) 컨텍스트에서는 table priority input/select 텍스트를 15px 축으로 강제한다.
+.table-cell.table-body-cell .radio-label-text,
+.table-cell.table-foot-cell .radio-label-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}

package/src/components/table/styles/index.scss

@@ -0,0 +1,2 @@
+@use "./variables.scss";
+@use "./foundation.scss";

package/src/components/table/styles/variables.scss

@@ -0,0 +1,29 @@
+:root {
+  // 변경: Figma(705:12000, 726:14739) 값을 foundation 토큰으로 역매핑한 table 모듈 전용 토큰 레이어.
+  --table-border-color: var(--color-border-standard-cool-gray);
+  --table-line-head-background-color: var(--color-surface-static-cool-gray);
+  --table-grid-head-background-color: var(
+    --color-background-alternative-cool-gray
+  );
+  --table-cell-background-color: var(--color-surface-static-white);
+
+  --table-line-cell-height-head: 44px;
+  --table-line-cell-height-body: 56px;
+  --table-grid-cell-height: 48px;
+  --table-grid-border-radius: var(--theme-radius-large-1);
+
+  --table-line-cell-padding-inline: var(--spacing-padding-6);
+  --table-line-cell-padding-block: 9px;
+  --table-grid-cell-padding-inline: var(--spacing-padding-6);
+  --table-grid-cell-padding-block: 9px;
+
+  --table-th-text-color: var(--color-label-standard);
+  --table-th-text-size: 13px;
+  --table-th-text-weight: var(--font-label-small-weight);
+  --table-th-text-line-height: var(--font-label-small-line-height);
+
+  --table-td-text-color: var(--color-label-standard);
+  --table-td-text-size: 15px;
+  --table-td-text-weight: var(--font-body-xsmall-weight);
+  --table-td-text-line-height: var(--font-body-xsmall-line-height);
+}

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

@@ -0,0 +1,250 @@
+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_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
+ */
+export type TableCellAlign = (typeof TABLE_CELL_ALIGN_OPTIONS)[number];
+/**
+ * Table Types; Cell 세로 정렬 값 타입
+ * @typedef {"top" | "center" | "bottom"} TableCellAlignY
+ */
+export type TableCellAlignY = (typeof TABLE_CELL_ALIGN_Y_OPTIONS)[number];
+/**
+ * Table Types; Cell padding 제어 타입
+ * @typedef {"default" | "none"} TableCellPadding
+ */
+export type TableCellPadding = (typeof TABLE_CELL_PADDING_OPTIONS)[number];
+/**
+ * Table Types; section 식별 타입
+ * @typedef {"head" | "body" | "foot"} TableSection
+ */
+export type TableSection = (typeof TABLE_SECTIONS)[number];
+/**
+ * Table Types; layout 식별 타입
+ * @typedef {"line" | "grid"} TableLayout
+ */
+export type TableLayout = (typeof TABLE_LAYOUT_OPTIONS)[number];
+
+/**
+ * Table Types; Root props
+ * @property {string} [className] table 루트 className
+ * @property {"line" | "grid"} [layout] 테이블 스타일 축
+ * @property {React.ReactNode} [children] table 내부 콘텐츠
+ */
+export interface TableRootProps extends ComponentPropsWithoutRef<"table"> {
+  /**
+   * 테이블 스타일 축
+   */
+  layout?: TableLayout;
+}
+
+/**
+ * Table Types; Colgroup props
+ * @property {string} [className] colgroup className
+ * @property {React.ReactNode} [children] col 목록
+ */
+export interface TableColgroupProps extends ComponentPropsWithoutRef<"colgroup"> {}
+
+/**
+ * Table Types; Colgroup column item
+ * @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 값
+ */
+export interface TableColgroupColumn {
+  /**
+   * column 고유 key
+   */
+  key: string;
+  /**
+   * width 값
+   */
+  width?: number | string;
+  /**
+   * 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;
+  /**
+   * 헤더 정렬
+   */
+  align?: TableCellAlign;
+}
+
+/**
+ * Table Types; Template props
+ * @property {TableTemplateColumn[]} [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 {
+  /**
+   * colgroup/head 자동 렌더링용 column 데이터
+   */
+  columns?: TableTemplateColumn[];
+  /**
+   * true면 body wrapper 없이 children을 직접 렌더링
+   */
+  isCustomBody?: boolean;
+  /**
+   * number width 해석 방식
+   */
+  widthMode?: "legacy-rem" | "raw";
+  /**
+   * footer 노드
+   */
+  footer?: React.ReactNode;
+}
+
+/**
+ * Table Types; Col props
+ * @property {string} [className] col className
+ */
+export interface TableColProps extends ComponentPropsWithoutRef<"col"> {}
+
+/**
+ * Table Types; Thead props
+ * @property {string} [className] thead className
+ * @property {React.ReactNode} [children] thead 내부 콘텐츠
+ */
+export interface TableHeadProps extends ComponentPropsWithoutRef<"thead"> {}
+
+/**
+ * Table Types; Tbody props
+ * @property {string} [className] tbody className
+ * @property {React.ReactNode} [children] tbody 내부 콘텐츠
+ */
+export interface TableBodyProps extends ComponentPropsWithoutRef<"tbody"> {}
+
+/**
+ * Table Types; Tfoot props
+ * @property {string} [className] tfoot className
+ * @property {React.ReactNode} [children] tfoot 내부 콘텐츠
+ */
+export interface TableFootProps extends ComponentPropsWithoutRef<"tfoot"> {}
+
+/**
+ * Table Types; Tr props
+ * @property {"head" | "body" | "foot"} [section] row 상위 섹션
+ * @property {string} [className] tr className
+ * @property {React.ReactNode} [children] row 내부 콘텐츠
+ */
+export interface TableRowProps extends ComponentPropsWithoutRef<"tr"> {
+  /**
+   * row 상위 섹션
+   */
+  section?: TableSection;
+}
+
+/**
+ * Table Types; Th props
+ * @property {string} [className] th className
+ * @property {React.ReactNode} [children] header cell 콘텐츠
+ */
+export interface TableThProps extends ComponentPropsWithoutRef<"th"> {}
+
+/**
+ * Table Types; Td props
+ * @property {string} [className] td className
+ * @property {React.ReactNode} [children] body cell 콘텐츠
+ */
+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 {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 내부 콘텐츠
+ */
+export interface TableCellContentProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * cell 상위 섹션
+   */
+  section?: TableSection;
+  /**
+   * cell 콘텐츠 가로 정렬
+   */
+  alignX?: TableCellAlign;
+  /**
+   * cell 콘텐츠 세로 정렬
+   */
+  alignY?: TableCellAlignY;
+  /**
+   * true면 cell 내부 padding 제거
+   */
+  noPadding?: boolean;
+  /**
+   * cell 내부 padding 제어
+   */
+  padding?: TableCellPadding;
+  /**
+   * cell 콘텐츠 가로 정렬(호환 alias)
+   * @deprecated `alignX` 사용을 권장한다.
+   */
+  align?: TableCellAlign;
+}
+
+/**
+ * Table Types; HeadCell props (deprecated alias)
+ * @deprecated `TableThProps` 사용을 권장한다.
+ */
+export interface TableHeadCellProps extends TableThProps {}
+
+/**
+ * Table Types; Body Cell props (deprecated alias)
+ * @deprecated `TableTdProps` 사용을 권장한다.
+ */
+export interface TableCellProps extends TableTdProps {}

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

@@ -1,4 +1 @@
-/**
- * TODO(table): variant/slot 타입 정의를 작성한다.
- */
-export {};
+export * from "./foundation";