@uniai-fe/uds-primitives 0.2.9 → 0.2.11

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

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableColgroupProps } from "../../types";
+
+/**
+ * Table Foundation; Colgroup 마크업 컴포넌트
+ * @component
+ * @param {TableColgroupProps} props
+ * @param {string} [props.className] colgroup className
+ * @param {React.ReactNode} [props.children] col 목록
+ * @deprecated `Table.Container` 또는 native `<colgroup />` 사용을 권장한다.
+ */
+const TableColgroup = forwardRef<HTMLTableColElement, TableColgroupProps>(
+  ({ className, children, ...colgroupProps }, ref) => {
+    return (
+      <colgroup
+        {...colgroupProps}
+        ref={ref}
+        className={clsx("table-colgroup", className)}
+      >
+        {children}
+      </colgroup>
+    );
+  },
+);
+
+TableColgroup.displayName = "TableFoundation.Colgroup";
+
+export default TableColgroup;

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

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableFootProps } from "../../types";
+
+/**
+ * Table Foundation; Tfoot 마크업 컴포넌트
+ * @component
+ * @param {TableFootProps} props
+ * @param {string} [props.className] tfoot className
+ * @param {React.ReactNode} [props.children] tfoot 내부 콘텐츠
+ */
+const TableFoot = forwardRef<HTMLTableSectionElement, TableFootProps>(
+  ({ className, children, ...footProps }, ref) => {
+    return (
+      <tfoot {...footProps} ref={ref} className={clsx("table-foot", className)}>
+        {children}
+      </tfoot>
+    );
+  },
+);
+
+TableFoot.displayName = "TableFoundation.Foot";
+
+export default TableFoot;

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

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableHeadProps } from "../../types";
+
+/**
+ * Table Foundation; Thead 마크업 컴포넌트
+ * @component
+ * @param {TableHeadProps} props
+ * @param {string} [props.className] thead className
+ * @param {React.ReactNode} [props.children] thead 내부 콘텐츠
+ */
+const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
+  ({ className, children, ...headProps }, ref) => {
+    return (
+      <thead {...headProps} ref={ref} className={clsx("table-head", className)}>
+        {children}
+      </thead>
+    );
+  },
+);
+
+TableHead.displayName = "TableFoundation.Head";
+
+export default TableHead;

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

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableRootProps } from "../../types";
+
+/**
+ * Table Foundation; Table Root 마크업 컴포넌트
+ * @component
+ * @param {TableRootProps} props
+ * @param {string} [props.className] table 루트 className
+ * @param {React.ReactNode} [props.children] table 내부 콘텐츠
+ */
+const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(
+  ({ className, children, role, layout = "line", ...tableProps }, ref) => {
+    return (
+      <table
+        {...tableProps}
+        ref={ref}
+        className={clsx("table", "table-container", className)}
+        // 변경: line/grid 스타일 축을 data attribute로 명시해 foundation.scss에서 분기한다.
+        data-layout={layout}
+        // 기본 접근성 role은 table로 고정하고, 외부에서 전달한 role이 있으면 우선한다.
+        role={role ?? "table"}
+      >
+        {children}
+      </table>
+    );
+  },
+);
+
+TableRoot.displayName = "TableFoundation.Root";
+
+export default TableRoot;

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);
+}