@tipp/ui 0.1.6 → 0.1.8

package/dist/molecules/index.d.ts

@@ -0,0 +1,4 @@
+export { ExpandTable, ExpandTableProps } from './expand-table/index.js';
+export { ExpandComp, OnRowClick } from './expand-table/row.js';
+export { ColumnDef, createColumnHelper } from '@tanstack/react-table';
+import 'react';

package/dist/molecules/index.js

@@ -0,0 +1,63 @@
+import "../chunk-WWCWPFEJ.js";
+import {
+  ExpandTable,
+  createColumnHelper
+} from "../chunk-76NL7K3Z.js";
+import "../chunk-ZE5G2S34.js";
+import "../chunk-BSTJBBEX.js";
+import "../chunk-NDUKDKGB.js";
+import "../chunk-WN3DQQSJ.js";
+import "../chunk-IIBITN2G.js";
+import "../chunk-JPIZP2PZ.js";
+import "../chunk-XJJDE4YP.js";
+import "../chunk-ACVANQJ4.js";
+import "../chunk-355MU6BH.js";
+import "../chunk-HYITAA4J.js";
+import "../chunk-5H3YPCZK.js";
+import "../chunk-74DX4CU7.js";
+import "../chunk-OYM4XCHQ.js";
+import "../chunk-YJ7ZFOYL.js";
+import "../chunk-5ZITU5L7.js";
+import "../chunk-ILRUXI2E.js";
+import "../chunk-365QMK4D.js";
+import "../chunk-YO3BQW6S.js";
+import "../chunk-6IVCARWS.js";
+import "../chunk-6DJOIRMF.js";
+import "../chunk-FPD73OHW.js";
+import "../chunk-ZKZDVS7G.js";
+import "../chunk-MUNMDHRF.js";
+import "../chunk-TVDKGMBI.js";
+import "../chunk-HLOY6BIP.js";
+import "../chunk-O3T3TM3V.js";
+import "../chunk-O3DNDMV3.js";
+import "../chunk-XQOL7UBI.js";
+import "../chunk-TULWX7D6.js";
+import "../chunk-XQOZWYUA.js";
+import "../chunk-5AVBYDPB.js";
+import "../chunk-OCJNQGHN.js";
+import "../chunk-Q37G2GS6.js";
+import "../chunk-VTJZMOSP.js";
+import "../chunk-P6B2PNYI.js";
+import "../chunk-YTZSKMX3.js";
+import "../chunk-2DZ2Y3JI.js";
+import "../chunk-25HMMI7R.js";
+import "../chunk-EGEQY3KT.js";
+import "../chunk-4Y5BEXVN.js";
+import "../chunk-RET725VL.js";
+import "../chunk-B6XJN6EC.js";
+import "../chunk-FYEASFUU.js";
+import "../chunk-MIMJ7LON.js";
+import "../chunk-IQEEPHOY.js";
+import "../chunk-JEHDCZQU.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-J242TTFH.js";
+import "../chunk-EAXUQEO5.js";
+import "../chunk-CZEGRZBK.js";
+import "../chunk-ALOPZ54P.js";
+import "../chunk-YGL6SWKN.js";
+import "../chunk-N552FDTV.js";
+export {
+  ExpandTable,
+  createColumnHelper
+};
+//# sourceMappingURL=index.js.map

package/dist/molecules/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/types/react-table.d.cjs

@@ -0,0 +1,5 @@
+"use strict";
+
+// src/types/react-table.d.ts
+var import_react_table = require("@tanstack/react-table");
+//# sourceMappingURL=react-table.d.cjs.map

package/dist/types/react-table.d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/types/react-table.d.ts"],"sourcesContent":["import '@tanstack/react-table';\n\ndeclare module '@tanstack/react-table' {\n  type ExpandButtonComp = <Data extends RowData>(props: {\n    open: boolean;\n    setIsOpen: (value: boolean) => void;\n    data: Data;\n  }) => React.ReactNode;\n\n  /** OpenBtn을 전달한 경우 open과 setIsOpen 상태 관리 props를 전달해 렌더함 */\n\n  interface ColumnMeta {\n    OpenBtn?: ExpandButtonComp;\n    /** 셀의 가로 너비 지정을 number가 아닌 auto로 사용하고 싶을 경우.\n     * 테이블 당 하나의 셀에만 사용하기를 권장\n     */\n    autoSize?: boolean;\n  }\n}\n"],"mappings":";;;AAAA,yBAAO;","names":[]}

package/dist/types/react-table.d.d.cts

@@ -0,0 +1,17 @@
+declare module '@tanstack/react-table' {
+  type ExpandButtonComp = <Data extends RowData>(props: {
+    open: boolean;
+    setIsOpen: (value: boolean) => void;
+    data: Data;
+  }) => React.ReactNode;
+
+  /** OpenBtn을 전달한 경우 open과 setIsOpen 상태 관리 props를 전달해 렌더함 */
+
+  interface ColumnMeta {
+    OpenBtn?: ExpandButtonComp;
+    /** 셀의 가로 너비 지정을 number가 아닌 auto로 사용하고 싶을 경우.
+     * 테이블 당 하나의 셀에만 사용하기를 권장
+     */
+    autoSize?: boolean;
+  }
+}

package/dist/types/react-table.d.d.ts

@@ -0,0 +1,17 @@
+declare module '@tanstack/react-table' {
+  type ExpandButtonComp = <Data extends RowData>(props: {
+    open: boolean;
+    setIsOpen: (value: boolean) => void;
+    data: Data;
+  }) => React.ReactNode;
+
+  /** OpenBtn을 전달한 경우 open과 setIsOpen 상태 관리 props를 전달해 렌더함 */
+
+  interface ColumnMeta {
+    OpenBtn?: ExpandButtonComp;
+    /** 셀의 가로 너비 지정을 number가 아닌 auto로 사용하고 싶을 경우.
+     * 테이블 당 하나의 셀에만 사용하기를 권장
+     */
+    autoSize?: boolean;
+  }
+}

package/dist/types/react-table.d.js

@@ -0,0 +1,3 @@
+// src/types/react-table.d.ts
+import "@tanstack/react-table";
+//# sourceMappingURL=react-table.d.js.map

package/dist/types/react-table.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/types/react-table.d.ts"],"sourcesContent":["import '@tanstack/react-table';\n\ndeclare module '@tanstack/react-table' {\n  type ExpandButtonComp = <Data extends RowData>(props: {\n    open: boolean;\n    setIsOpen: (value: boolean) => void;\n    data: Data;\n  }) => React.ReactNode;\n\n  /** OpenBtn을 전달한 경우 open과 setIsOpen 상태 관리 props를 전달해 렌더함 */\n\n  interface ColumnMeta {\n    OpenBtn?: ExpandButtonComp;\n    /** 셀의 가로 너비 지정을 number가 아닌 auto로 사용하고 싶을 경우.\n     * 테이블 당 하나의 셀에만 사용하기를 권장\n     */\n    autoSize?: boolean;\n  }\n}\n"],"mappings":";AAAA,OAAO;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "private": false,
   "type": "module",
   "exports": {
@@ -56,9 +56,11 @@
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.1",
+    "@tanstack/react-table": "^8.19.3",
     "echarts-for-react": "^3.0.2",
     "i": "^0.3.7",
     "npm": "^10.8.2",
+    "postcss-scss": "^4.0.9",
     "react": "^18.3.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
@@ -78,17 +80,17 @@
     "postcss-nesting": "12.0.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "@tipp/eslint-config": "0.2.2",
-    "@tipp/typescript-config": "0.0.3"
+    "@tipp/eslint-config": "0.2.3",
+    "@tipp/typescript-config": "0.0.4"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css",
+    "build": "pnpm run build:js & pnpm run build:css",
     "build:css": "postcss style/index.css -o dist/index.css",
     "build:js": "tsup",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "dev": "pnpm run dev:js && pnpm run dev:css",
-    "dev:css": "postcss src/styles/index.css -o dist/index.css --watch",
-    "dev:js": "tsup --watch",
+    "dev": "pnpm run dev:js & pnpm run dev:css",
+    "dev:css": "pnpm run build:css --watch",
+    "dev:js": "pnpm run build:js --watch",
     "lint": "eslint . --max-warnings 0",
     "lint-staged": "lint-staged ./src",
     "type-check": "tsc --noEmit"

package/src/atoms/collapse.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+export interface CollapseProps {
+  children: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+}
+
+export function Collapse(props: CollapseProps): React.ReactNode {
+  const { children } = props;
+  const [open, setOpen] = useState(() => {
+    return props.open || props.defaultOpen || false;
+  });
+
+  useEffect(() => {
+    if (props.open === undefined) return;
+    setOpen(props.open);
+  }, [props.open]);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : '0';
+  }, [open]);
+
+  return (
+    <div className="collapse" ref={ref}>
+      {children}
+    </div>
+  );
+}

package/src/atoms/index.ts

@@ -0,0 +1,48 @@
+export * from './alert-dialog';
+export * from './aspect-ratio';
+export * from './avatar';
+export * from './badge';
+export * from './blockquote';
+export * from './box';
+export * from './button';
+export * from './call-out';
+export * from './card';
+export * from './check-box';
+export * from './check-box-card';
+export * from './check-box-group';
+export * from './code';
+export * from './container';
+export * from './data-list';
+export * from './date-picker';
+export * from './dialog';
+export * from './dropdown-menu';
+export * from './em';
+export * from './flex';
+export * from './grid';
+export * from './heading';
+export * from './hover-card';
+export * from './icon-button';
+export * from './inset';
+export * from './kbd';
+export * from './link';
+export * from './popover';
+export * from './progress';
+export * from './quote';
+export * from './radio';
+export * from './radio-cards';
+export * from './radio-group';
+export * from './scroll-area';
+export * from './section';
+export * from './segmented-control';
+export * from './select';
+export * from './separator';
+export * from './skeleton';
+export * from './strong';
+export * from './switch';
+export * from './tab-nav';
+export * from './tabs';
+export * from './text-area';
+export * from './text';
+export * from './text-field';
+export * from './tooltip';
+export * from './collapse';

package/src/icon.ts

@@ -7,4 +7,5 @@ export {
   DotsHorizontalIcon,
   ChatBubbleIcon,
   PlusIcon,
+  MixerHorizontalIcon,
 } from '@radix-ui/react-icons';

package/src/icons/down.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { IconProps } from './types';
+
+export const TriangleArrowDownIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        fill="none"
+        height="7"
+        viewBox="0 0 8 7"
+        width="8"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M7.10844 0.8125H0.891554C0.197392 0.8125 -0.177096 1.62672 0.274659 2.15377L3.3831 5.78029C3.70737 6.1586 4.29263 6.1586 4.6169 5.78029L7.72534 2.15377C8.1771 1.62672 7.80261 0.8125 7.10844 0.8125Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+TriangleArrowDownIcon.displayName = 'ArrowDownIcon';

package/src/icons/types.ts

@@ -0,0 +1,4 @@
+export interface IconProps extends React.SVGAttributes<SVGElement> {
+  children?: never;
+  color?: string;
+}

package/src/icons/up.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { IconProps } from './types';
+
+export const TriangleArrowUpIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        fill="none"
+        height="7"
+        viewBox="0 0 8 7"
+        width="8"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M0.891555 6.1875L7.10845 6.1875C7.80261 6.1875 8.1771 5.37328 7.72534 4.84623L4.6169 1.21971C4.29263 0.841403 3.70737 0.841403 3.3831 1.21971L0.274659 4.84623C-0.177095 5.37328 0.197393 6.1875 0.891555 6.1875Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+TriangleArrowUpIcon.displayName = 'ArrowUpIcon';

package/src/index.ts

@@ -1,52 +1,6 @@
-export * from './atoms/alert-dialog';
-export * from './atoms/aspect-ratio';
-export * from './atoms/avatar';
-export * from './atoms/badge';
-export * from './atoms/blockquote';
-export * from './atoms/box';
-export * from './atoms/button';
-export * from './atoms/call-out';
-export * from './atoms/card';
-export * from './atoms/check-box';
-export * from './atoms/check-box-card';
-export * from './atoms/check-box-group';
-export * from './atoms/code';
-export * from './atoms/container';
-export * from './atoms/data-list';
-export * from './atoms/date-picker';
-export * from './atoms/dialog';
-export * from './atoms/dropdown-menu';
-export * from './atoms/em';
-export * from './atoms/flex';
-export * from './atoms/grid';
-export * from './atoms/heading';
-export * from './atoms/hover-card';
-export * from './atoms/icon-button';
-export * from './atoms/inset';
-export * from './atoms/kbd';
-export * from './atoms/link';
-export * from './atoms/popover';
-export * from './atoms/progress';
-export * from './atoms/quote';
-export * from './atoms/radio';
-export * from './atoms/radio-cards';
-export * from './atoms/radio-group';
-export * from './atoms/scroll-area';
-export * from './atoms/section';
-export * from './atoms/segmented-control';
-export * from './atoms/select';
-export * from './atoms/separator';
-export * from './atoms/skeleton';
-export * from './atoms/strong';
-export * from './atoms/switch';
-export * from './atoms/tab-nav';
-export * from './atoms/tabs';
-export * from './atoms/text-area';
-export * from './atoms/text';
-export * from './atoms/text-field';
-export * from './atoms/tooltip';
+export * from './atoms';
+export * from './molecules';
 export * from './theme/theme-provider';
 export * from './theme/use-theme';
-export * from './ui-props/index';
+export * from './ui-props';
 export * from './icon';
-// export * from '../charts/chart';

package/src/molecules/expand-table/index.tsx

@@ -0,0 +1,131 @@
+import type { ColumnDef, SortingState, RowData } from '@tanstack/react-table';
+import type { CSSProperties } from 'react';
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getSortedRowModel,
+  createColumnHelper,
+} from '@tanstack/react-table';
+import React, { useState } from 'react';
+import { Flex, Text } from '../../atoms';
+import { TriangleArrowDownIcon } from '../../icons/down';
+import { TriangleArrowUpIcon } from '../../icons/up';
+import { Row, type ExpandComp, type OnRowClick } from './row';
+
+export type { ExpandComp, OnRowClick, ColumnDef };
+export { createColumnHelper };
+
+export interface ExpandTableProps<Datum extends RowData> {
+  /** 렌더할 데이터 배열  */
+  data?: Datum[];
+  /** 테이블 컬럼의 메타 데이터 */
+  columns: ColumnDef<Datum>[];
+  /** Row의 open이 true인 경우 하단의 collapse에 렌더할 컴포넌트 */
+  ExpandComp?: ExpandComp<Datum>;
+  /** 데이테가 없을 시 화면에 표시할 컴포넌트 */
+  placeholder?: React.ReactNode;
+  /** 행 클릭 시 실행할 콜백 */
+  onRowClick?: OnRowClick<Datum>;
+  rowStyle?: CSSProperties;
+}
+
+export function ExpandTable<Datum extends RowData>(
+  props: ExpandTableProps<Datum>
+): React.ReactNode {
+  const { data, columns, ExpandComp, placeholder, onRowClick } = props;
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const { getRowModel, getHeaderGroups } = useReactTable({
+    data: data || [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+  });
+
+  const rowModels = getRowModel();
+
+  return (
+    <div className="expand-table">
+      <div className="thead">
+        {getHeaderGroups().map((headerGroup) => (
+          <div className="tr" key={headerGroup.id}>
+            {headerGroup.headers.map((header) => {
+              const sortable = header.column.getCanSort();
+              const sortedState = header.column.getIsSorted();
+              return (
+                <div
+                  className="th"
+                  key={header.id}
+                  style={{
+                    width: header.getSize(),
+                  }}
+                >
+                  <button
+                    onClick={header.column.getToggleSortingHandler()}
+                    style={sortable ? { cursor: 'pointer' } : undefined}
+                    type="button"
+                  >
+                    <Text variant="body">
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                    </Text>
+                    {sortable ? (
+                      <Flex
+                        direction="column"
+                        style={{ marginLeft: 'var(--space-2)' }}
+                      >
+                        <TriangleArrowUpIcon
+                          color={
+                            sortedState === 'asc'
+                              ? 'var(--iris-10)'
+                              : 'var(--iris-6)'
+                          }
+                        />
+                        <TriangleArrowDownIcon
+                          color={
+                            sortedState === 'desc'
+                              ? 'var(--iris-10)'
+                              : 'var(--iris-6)'
+                          }
+                        />
+                      </Flex>
+                    ) : null}
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+      <div className="tbody">
+        {/* 데이터가 없을 시 표시되는 노드 */}
+        {rowModels.rows.length === 0 && (
+          <div className="tr" key="expand_placeholder">
+            <Flex align="center" justify="center">
+              {placeholder || <Text>데이터가 없습니다</Text>}
+            </Flex>
+          </div>
+        )}
+
+        {/* 행을 렌더하는 로직 */}
+        {rowModels.rows.map((row) => {
+          return (
+            <Row
+              ExpandComp={ExpandComp}
+              key={`row_${row.id}`}
+              onRowClick={onRowClick}
+              row={row}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/molecules/expand-table/row.tsx

@@ -0,0 +1,67 @@
+import {
+  type Row as TanstackRow,
+  type RowData,
+  flexRender,
+} from '@tanstack/react-table';
+import React, { useCallback, useState } from 'react';
+import { Collapse } from '../../atoms';
+
+export type ExpandComp<Datum> = React.FC<{ row: TanstackRow<Datum> }>;
+export type OnRowClick<Datum> = (data: Datum) => void;
+
+interface RowProps<Datum extends RowData> {
+  row: TanstackRow<Datum>;
+  ExpandComp?: ExpandComp<Datum>;
+  onRowClick?: OnRowClick<Datum>;
+}
+
+export function Row<Datum extends RowData>(
+  props: RowProps<Datum>
+): React.ReactNode {
+  const { row, ExpandComp } = props;
+  const [open, setOpen] = useState(false);
+  const onClickRow = useCallback(() => {
+    props.onRowClick?.(row.original);
+    setOpen((prev) => !prev);
+  }, [props, row.original]);
+
+  return (
+    <div
+      className={`tr-wrapper ${ExpandComp ? 'expandable' : ''}`}
+      key={`tr-wrapper_${row.id}`}
+    >
+      <button
+        className="tr"
+        key={`tr_${row.id}`}
+        onClick={onClickRow}
+        type="button"
+      >
+        {row.getVisibleCells().map((cell) => {
+          return (
+            <div
+              className="td"
+              key={cell.id}
+              style={{ width: cell.column.getSize() }}
+            >
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              {cell.column.columnDef.meta?.OpenBtn ? (
+                <cell.column.columnDef.meta.OpenBtn
+                  data={row.original}
+                  open={open}
+                  setIsOpen={setOpen}
+                />
+              ) : null}
+            </div>
+          );
+        })}
+      </button>
+      {ExpandComp ? (
+        <Collapse open={open}>
+          <div className="expand-comp-wrapper">
+            <ExpandComp row={row} />
+          </div>
+        </Collapse>
+      ) : null}
+    </div>
+  );
+}

package/src/molecules/index.ts

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

package/src/types/react-table.d.ts

@@ -0,0 +1,19 @@
+import '@tanstack/react-table';
+
+declare module '@tanstack/react-table' {
+  type ExpandButtonComp = <Data extends RowData>(props: {
+    open: boolean;
+    setIsOpen: (value: boolean) => void;
+    data: Data;
+  }) => React.ReactNode;
+
+  /** OpenBtn을 전달한 경우 open과 setIsOpen 상태 관리 props를 전달해 렌더함 */
+
+  interface ColumnMeta {
+    OpenBtn?: ExpandButtonComp;
+    /** 셀의 가로 너비 지정을 number가 아닌 auto로 사용하고 싶을 경우.
+     * 테이블 당 하나의 셀에만 사용하기를 권장
+     */
+    autoSize?: boolean;
+  }
+}