@tipp/ui 1.0.14 → 1.0.16

package/src/index.ts

@@ -1,6 +1,6 @@
-export * from './atoms';
-export * from './molecules';
-export * from './theme/theme-provider';
-export * from './theme/use-theme';
-export * from './ui-props';
-export * from './icon';
+export * from './atoms';
+export * from './molecules';
+export * from './theme/theme-provider';
+export * from './theme/use-theme';
+export * from './ui-props';
+export * from './icon';

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

@@ -1,144 +1,144 @@
-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, { useMemo, useState } from 'react';
-import { Flex, Typo } 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 gridColTemp = useMemo<string>(() => {
-    return columns
-      .map((col) => {
-        if (col.meta?.autoSize) return '1fr';
-        return `${col.size || 150}px`;
-      })
-      .join(' ');
-  }, [columns]);
-
-  const rowModels = getRowModel();
-
-  return (
-    <div className="expand-table">
-      <div className="thead">
-        {getHeaderGroups().map((headerGroup) => (
-          <div
-            className="tr"
-            key={headerGroup.id}
-            style={{ gridTemplateColumns: gridColTemp }}
-          >
-            {headerGroup.headers.map((header) => {
-              const sortable = header.column.getCanSort();
-              const sortedState = header.column.getIsSorted();
-
-              return (
-                <div className="th" key={header.id}>
-                  <button
-                    onClick={header.column.getToggleSortingHandler()}
-                    style={sortable ? { cursor: 'pointer' } : undefined}
-                    type="button"
-                  >
-                    <Typo variant="body">
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                    </Typo>
-                    {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 || (
-                <Typo color="gray" mb="6" mt="6" variant="body">
-                  데이터가 없습니다
-                </Typo>
-              )}
-            </Flex>
-          </div>
-        )}
-
-        {/* 행을 렌더하는 로직 */}
-        {rowModels.rows.map((row) => {
-          return (
-            <Row
-              ExpandComp={ExpandComp}
-              gridColTemp={gridColTemp}
-              key={`row_${row.id}`}
-              onRowClick={onRowClick}
-              row={row}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}
+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, { useMemo, useState } from 'react';
+import { Flex, Typo } 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 gridColTemp = useMemo<string>(() => {
+    return columns
+      .map((col) => {
+        if (col.meta?.autoSize) return '1fr';
+        return `${col.size || 150}px`;
+      })
+      .join(' ');
+  }, [columns]);
+
+  const rowModels = getRowModel();
+
+  return (
+    <div className="expand-table">
+      <div className="thead">
+        {getHeaderGroups().map((headerGroup) => (
+          <div
+            className="tr"
+            key={headerGroup.id}
+            style={{ gridTemplateColumns: gridColTemp }}
+          >
+            {headerGroup.headers.map((header) => {
+              const sortable = header.column.getCanSort();
+              const sortedState = header.column.getIsSorted();
+
+              return (
+                <div className="th" key={header.id}>
+                  <button
+                    onClick={header.column.getToggleSortingHandler()}
+                    style={sortable ? { cursor: 'pointer' } : undefined}
+                    type="button"
+                  >
+                    <Typo variant="body">
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                    </Typo>
+                    {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 || (
+                <Typo color="gray" mb="6" mt="6" variant="body">
+                  데이터가 없습니다
+                </Typo>
+              )}
+            </Flex>
+          </div>
+        )}
+
+        {/* 행을 렌더하는 로직 */}
+        {rowModels.rows.map((row) => {
+          return (
+            <Row
+              ExpandComp={ExpandComp}
+              gridColTemp={gridColTemp}
+              key={`row_${row.id}`}
+              onRowClick={onRowClick}
+              row={row}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -1,75 +1,75 @@
-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>;
-  gridColTemp: string;
-}
-
-export function Row<Datum extends RowData>(
-  props: RowProps<Datum>
-): React.ReactNode {
-  const { row, ExpandComp, gridColTemp } = 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}
-        style={{ gridTemplateColumns: gridColTemp }}
-        type="button"
-      >
-        {row.getVisibleCells().map((cell) => {
-          const autoSize = cell.column.columnDef.meta?.autoSize;
-
-          return (
-            <div
-              className="td"
-              key={cell.id}
-              style={{
-                minWidth: autoSize ? undefined : cell.column.getSize(),
-                flexGrow: autoSize ? 1 : undefined,
-              }}
-            >
-              {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>
-  );
-}
+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>;
+  gridColTemp: string;
+}
+
+export function Row<Datum extends RowData>(
+  props: RowProps<Datum>
+): React.ReactNode {
+  const { row, ExpandComp, gridColTemp } = 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}
+        style={{ gridTemplateColumns: gridColTemp }}
+        type="button"
+      >
+        {row.getVisibleCells().map((cell) => {
+          const autoSize = cell.column.columnDef.meta?.autoSize;
+
+          return (
+            <div
+              className="td"
+              key={cell.id}
+              style={{
+                minWidth: autoSize ? undefined : cell.column.getSize(),
+                flexGrow: autoSize ? 1 : undefined,
+              }}
+            >
+              {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

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

package/src/molecules/navigation.tsx

@@ -1,69 +1,69 @@
-import React from 'react';
-import { Button, Flex, Typo } from '../atoms';
-
-interface Item {
-  itemRender?: (item: Item) => React.ReactNode;
-  key: string;
-  onClick?: () => void;
-  title: string;
-  icon?: React.ReactNode;
-  children?: Item[];
-}
-
-export interface NavigationProps {
-  items?: Item[];
-  fontColor?: string;
-  backgroundColor?: string;
-  activeKey?: string;
-}
-
-export function Navigation({
-  items,
-  fontColor,
-  backgroundColor,
-  activeKey,
-}: NavigationProps): React.ReactNode {
-  return (
-    <Flex
-      direction="column"
-      gap="4"
-      pr="3"
-      style={{
-        color: fontColor || 'var(--white-a12)',
-        backgroundColor: backgroundColor || 'var(--black-a12)',
-      }}
-    >
-      {items?.map((item) => {
-        const { key, title, icon, itemRender, onClick, children } = item;
-        return (
-          <Flex direction="column" key={key} onClick={onClick}>
-            {itemRender ? (
-              itemRender(item)
-            ) : (
-              <Flex align="center" gap="3" height="36px" pl="4" pr="4">
-                {icon}
-                <Typo variant="subtitle">{title}</Typo>
-              </Flex>
-            )}
-            {children?.map((menu) => {
-              return menu.itemRender ? (
-                menu.itemRender(menu)
-              ) : (
-                <Button
-                  className={`tipp-navigation-button ${activeKey === menu.key ? 'active' : ''}`}
-                  key={menu.key}
-                  ml="6"
-                  onClick={menu.onClick}
-                  size="large"
-                  style={{ color: 'var(--white-a12)' }}
-                >
-                  {menu.title}
-                </Button>
-              );
-            })}
-          </Flex>
-        );
-      })}
-    </Flex>
-  );
-}
+import React from 'react';
+import { Button, Flex, Typo } from '../atoms';
+
+interface Item {
+  itemRender?: (item: Item) => React.ReactNode;
+  key: string;
+  onClick?: () => void;
+  title: string;
+  icon?: React.ReactNode;
+  children?: Item[];
+}
+
+export interface NavigationProps {
+  items?: Item[];
+  fontColor?: string;
+  backgroundColor?: string;
+  activeKey?: string;
+}
+
+export function Navigation({
+  items,
+  fontColor,
+  backgroundColor,
+  activeKey,
+}: NavigationProps): React.ReactNode {
+  return (
+    <Flex
+      direction="column"
+      gap="4"
+      pr="3"
+      style={{
+        color: fontColor || 'var(--white-a12)',
+        backgroundColor: backgroundColor || 'var(--black-a12)',
+      }}
+    >
+      {items?.map((item) => {
+        const { key, title, icon, itemRender, onClick, children } = item;
+        return (
+          <Flex direction="column" key={key} onClick={onClick}>
+            {itemRender ? (
+              itemRender(item)
+            ) : (
+              <Flex align="center" gap="3" height="36px" pl="4" pr="4">
+                {icon}
+                <Typo variant="subtitle">{title}</Typo>
+              </Flex>
+            )}
+            {children?.map((menu) => {
+              return menu.itemRender ? (
+                menu.itemRender(menu)
+              ) : (
+                <Button
+                  className={`tipp-navigation-button ${activeKey === menu.key ? 'active' : ''}`}
+                  key={menu.key}
+                  ml="6"
+                  onClick={menu.onClick}
+                  size="large"
+                  style={{ color: 'var(--white-a12)' }}
+                >
+                  {menu.title}
+                </Button>
+              );
+            })}
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+}

package/src/theme/theme-provider.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import { Theme } from '@radix-ui/themes';
-
-type ThemeProps = React.ComponentProps<typeof Theme>;
-
-interface ThemeProviderProps extends ThemeProps {
-  children: React.ReactNode;
-}
-
-export function ThemeProvider(props: ThemeProviderProps): React.ReactNode {
-  return <Theme accentColor="iris" radius="large" {...props} />;
-}
+import React from 'react';
+import { Theme } from '@radix-ui/themes';
+
+type ThemeProps = React.ComponentProps<typeof Theme>;
+
+interface ThemeProviderProps extends ThemeProps {
+  children: React.ReactNode;
+}
+
+export function ThemeProvider(props: ThemeProviderProps): React.ReactNode {
+  return <Theme accentColor="iris" radius="large" {...props} />;
+}

package/src/theme/use-theme.tsx

@@ -1 +1 @@
-export { useThemeContext } from '@radix-ui/themes';
+export { useThemeContext } from '@radix-ui/themes';

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

@@ -1,19 +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;
-  }
-}
+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;
+  }
+}