@tipp/ui 0.1.5 → 0.1.7

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/theme/theme-provider.tsx

@@ -8,5 +8,5 @@ interface ThemeProviderProps extends ThemeProps {
 }
 
 export function ThemeProvider(props: ThemeProviderProps): React.ReactNode {
-  return <Theme accentColor="iris" {...props} />;
+  return <Theme accentColor="iris" radius="large" {...props} />;
 }

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

package/dist/chunk-3566LFAS.js

@@ -1,7 +0,0 @@
-// src/atoms/check-box.tsx
-import { Checkbox } from "@radix-ui/themes";
-
-export {
-  Checkbox
-};
-//# sourceMappingURL=chunk-3566LFAS.js.map

package/dist/chunk-3566LFAS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/check-box.tsx"],"sourcesContent":["export { Checkbox, type CheckboxProps } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,gBAAoC;","names":[]}

package/dist/chunk-4PP245MS.js

@@ -1,7 +0,0 @@
-// src/atoms/check-box-group.tsx
-import { CheckboxGroup } from "@radix-ui/themes";
-
-export {
-  CheckboxGroup
-};
-//# sourceMappingURL=chunk-4PP245MS.js.map

package/dist/chunk-4PP245MS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/check-box-group.tsx"],"sourcesContent":["export { CheckboxGroup } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,qBAAqB;","names":[]}

package/dist/chunk-DYUKDKUS.js

@@ -1,7 +0,0 @@
-// src/atoms/text.tsx
-import { Text } from "@radix-ui/themes";
-
-export {
-  Text
-};
-//# sourceMappingURL=chunk-DYUKDKUS.js.map

package/dist/chunk-DYUKDKUS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/text.tsx"],"sourcesContent":["export { Text, type TextProps } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,YAA4B;","names":[]}

package/dist/chunk-LFJCZVNE.js

@@ -1,7 +0,0 @@
-// src/atoms/button.tsx
-import { Button } from "@radix-ui/themes";
-
-export {
-  Button
-};
-//# sourceMappingURL=chunk-LFJCZVNE.js.map

package/dist/chunk-LFJCZVNE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/button.tsx"],"sourcesContent":["export { Button, type ButtonProps } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,cAAgC;","names":[]}

package/dist/chunk-M4P36WOR.js

@@ -1,7 +0,0 @@
-// src/atoms/avatar.tsx
-import { Avatar } from "@radix-ui/themes";
-
-export {
-  Avatar
-};
-//# sourceMappingURL=chunk-M4P36WOR.js.map

package/dist/chunk-M4P36WOR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/avatar.tsx"],"sourcesContent":["export { Avatar, type AvatarProps } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,cAAgC;","names":[]}

package/dist/chunk-MLMWFOEE.js

@@ -1,7 +0,0 @@
-// src/atoms/link.tsx
-import { Link } from "@radix-ui/themes";
-
-export {
-  Link
-};
-//# sourceMappingURL=chunk-MLMWFOEE.js.map

package/dist/chunk-MLMWFOEE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/link.tsx"],"sourcesContent":["export { Link, type LinkProps } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,YAA4B;","names":[]}

package/dist/chunk-MYTJIEMB.js

@@ -1,7 +0,0 @@
-// src/atoms/heading.tsx
-import { Heading } from "@radix-ui/themes";
-
-export {
-  Heading
-};
-//# sourceMappingURL=chunk-MYTJIEMB.js.map

package/dist/chunk-MYTJIEMB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/heading.tsx"],"sourcesContent":["export { Heading, type HeadingProps } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,eAAkC;","names":[]}

package/dist/chunk-W4KST6UY.js

@@ -1,7 +0,0 @@
-// src/atoms/badge.tsx
-import { Badge } from "@radix-ui/themes";
-
-export {
-  Badge
-};
-//# sourceMappingURL=chunk-W4KST6UY.js.map

package/dist/chunk-W4KST6UY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/badge.tsx"],"sourcesContent":["export { Badge } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,aAAa;","names":[]}