@tipp/ui 1.0.0 → 1.0.2

package/src/atoms/pagination.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '../icon';
+import type { IconButtonProps } from './icon-button';
+import { IconButton } from './icon-button';
+import { Flex } from './flex';
+import { Typo } from './typo';
+
+export interface PaginationProps {
+  /** 현재 선택된 페이지 */
+  page?: number;
+  /** 기본 선택 페이지, page보다 낮은 우선 순위를 갖는다 */
+  defaultPage?: number;
+  /** 선택한 페이지 변경 이벤트 cb */
+  onChange?: (page: number) => void;
+  /** 전체 페이지의 수 */
+  count?: number;
+}
+
+export function Pagination(props: PaginationProps): React.ReactNode {
+  const { onChange, count = 0 } = props;
+  const siblingCount = 2;
+
+  const [page, setPage] = useState(() => props.page || props.defaultPage || 1);
+
+  const visibleItems = useMemo(() => {
+    let start = Math.max(1, page - siblingCount);
+    let end = Math.min(count, page + siblingCount);
+    if (page - siblingCount <= 0 && end < count) {
+      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);
+    } else if (page + siblingCount > count && start > 1) {
+      start = Math.max(1, start - (page + siblingCount - count));
+    }
+
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, [count, page]);
+
+  useEffect(() => {
+    onChange?.(page);
+  }, [onChange, page]);
+
+  useEffect(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+
+  const onClickPrev = useCallback(() => {
+    setPage((prev) => Math.max(1, prev - 1));
+  }, []);
+
+  const onClickNext = useCallback(() => {
+    setPage((prev) => Math.min(count, prev + 1));
+  }, [count]);
+
+  const moveButtonProps: IconButtonProps = {
+    variant: 'ghost',
+    size: '3',
+    style: { borderRadius: '50%' },
+  };
+
+  const iconSize = {
+    height: 24,
+    width: 24,
+  };
+
+  const prevDisabled = useMemo(() => {
+    return page - siblingCount <= 1;
+  }, [page]);
+
+  const nextDisabled = useMemo(() => {
+    return page + siblingCount >= count;
+  }, [count, page]);
+
+  return (
+    <Flex align="center" className="tipp-pagination" gap="4">
+      <IconButton
+        disabled={prevDisabled}
+        onClick={onClickPrev}
+        {...moveButtonProps}
+      >
+        <ChevronLeftIcon {...iconSize} />
+      </IconButton>
+      <Flex gap="1">
+        {visibleItems.map((item) => {
+          return (
+            <button
+              className={`page-button ${item === page ? 'active' : ''}`}
+              key={item}
+              onClick={() => {
+                setPage(item);
+              }}
+              type="button"
+            >
+              <Typo variant="body">{item}</Typo>
+            </button>
+          );
+        })}
+      </Flex>
+      <IconButton
+        disabled={nextDisabled}
+        onClick={onClickNext}
+        {...moveButtonProps}
+      >
+        <ChevronRightIcon {...iconSize} />
+      </IconButton>
+    </Flex>
+  );
+}

package/src/atoms/popover.tsx

@@ -0,0 +1 @@
+export { Popover } from '@radix-ui/themes';

package/src/atoms/progress.tsx

@@ -0,0 +1 @@
+export { Progress, type ProgressProps } from '@radix-ui/themes';

package/src/atoms/quote.tsx

@@ -0,0 +1 @@
+export { Quote, type QuoteProps } from '@radix-ui/themes';

package/src/atoms/radio-cards.tsx

@@ -0,0 +1 @@
+export { RadioCards } from '@radix-ui/themes';

package/src/atoms/radio-group.tsx

@@ -0,0 +1 @@
+export { RadioGroup } from '@radix-ui/themes';

package/src/atoms/radio.tsx

@@ -0,0 +1 @@
+export { Radio, type RadioProps } from '@radix-ui/themes';

package/src/atoms/scroll-area.tsx

@@ -0,0 +1 @@
+export { ScrollArea, type ScrollAreaProps } from '@radix-ui/themes';

package/src/atoms/section.tsx

@@ -0,0 +1 @@
+export { Section, type SectionProps } from '@radix-ui/themes';

package/src/atoms/segmented-control.tsx

@@ -0,0 +1 @@
+export { SegmentedControl } from '@radix-ui/themes';

package/src/atoms/select.tsx

@@ -0,0 +1 @@
+export { Select } from '@radix-ui/themes';

package/src/atoms/separator.tsx

@@ -0,0 +1 @@
+export { Separator, type SeparatorProps } from '@radix-ui/themes';

package/src/atoms/skeleton.tsx

@@ -0,0 +1 @@
+export { Skeleton, type SkeletonProps } from '@radix-ui/themes';

package/src/atoms/spinner.tsx

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps } from '@radix-ui/themes';

package/src/atoms/strong.tsx

@@ -0,0 +1 @@
+export { Strong, type StrongProps } from '@radix-ui/themes';

package/src/atoms/switch.tsx

@@ -0,0 +1 @@
+export { Switch, type SwitchProps } from '@radix-ui/themes';

package/src/atoms/tab-nav.tsx

@@ -0,0 +1 @@
+export { TabNav } from '@radix-ui/themes';

package/src/atoms/tabs.tsx

@@ -0,0 +1 @@
+export { Tabs } from '@radix-ui/themes';

package/src/atoms/text-area.tsx

@@ -0,0 +1 @@
+export { TextArea, type TextAreaProps } from '@radix-ui/themes';

package/src/atoms/text-field.tsx

@@ -0,0 +1 @@
+export { TextField } from '@radix-ui/themes';

package/src/atoms/tooltip.tsx

@@ -0,0 +1 @@
+export { Tooltip, type TooltipProps } from '@radix-ui/themes';

package/src/atoms/typo.tsx

@@ -0,0 +1,34 @@
+import type { TextProps as RadixTextProps } from '@radix-ui/themes';
+import { Text as RadixText } from '@radix-ui/themes';
+import React, { useMemo, forwardRef } from 'react';
+
+export type TypoProps = RadixTextProps & {
+  variant?: 'body' | 'caption' | 'subtitle';
+};
+
+export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
+  (props: TypoProps, ref): React.ReactNode => {
+    const { size, variant, children, ...rest } = props;
+
+    const radixSize = useMemo<RadixTextProps['size']>(() => {
+      if (size !== undefined) return size;
+      switch (variant) {
+        case 'caption':
+          return '1';
+        case 'subtitle':
+          return '3';
+        case 'body':
+        default:
+          return '2';
+      }
+    }, [size, variant]);
+
+    return (
+      <RadixText {...rest} ref={ref} size={radixSize}>
+        {children}
+      </RadixText>
+    );
+  }
+);
+
+Typo.displayName = 'Typo';

package/src/chart/chart-theme.json

@@ -0,0 +1,136 @@
+{
+  "version": 1,
+  "themeName": "customed",
+  "theme": {
+    "seriesCnt": "5",
+    "backgroundColor": "rgba(0,0,0,0)",
+    "titleColor": "#1c2024",
+    "subtitleColor": "#8d8d8d",
+    "textColorShow": false,
+    "textColor": "#333",
+    "markTextColor": "#ffffff",
+    "color": [
+      "#ffe629",
+      "#3e63dd",
+      "#ec9455",
+      "#5bb98b",
+      "#cb1d63",
+      "#3ba272",
+      "#fc8452",
+      "#9a60b4",
+      "#ea7ccc"
+    ],
+    "borderColor": "#8d8d8d",
+    "borderWidth": 0,
+    "visualMapColor": ["#bf444c", "#d88273", "#f6efa6"],
+    "legendTextColor": "#1c2024",
+    "kColor": "#eb5454",
+    "kColor0": "#47b262",
+    "kBorderColor": "#eb5454",
+    "kBorderColor0": "#47b262",
+    "kBorderWidth": 1,
+    "lineWidth": 2,
+    "symbolSize": 4,
+    "symbol": "emptyCircle",
+    "symbolBorderWidth": 1,
+    "lineSmooth": false,
+    "graphLineWidth": 1,
+    "graphLineColor": "#aaa",
+    "mapLabelColor": "#000",
+    "mapLabelColorE": "rgb(100,0,0)",
+    "mapBorderColor": "#444",
+    "mapBorderColorE": "#444",
+    "mapBorderWidth": 0.5,
+    "mapBorderWidthE": 1,
+    "mapAreaColor": "#eee",
+    "mapAreaColorE": "rgba(255,215,0,0.8)",
+    "axes": [
+      {
+        "type": "all",
+        "name": "通用坐标轴",
+        "axisLineShow": true,
+        "axisLineColor": "#6E7079",
+        "axisTickShow": true,
+        "axisTickColor": "#6E7079",
+        "axisLabelShow": true,
+        "axisLabelColor": "#6E7079",
+        "splitLineShow": true,
+        "splitLineColor": ["#E0E6F1"],
+        "splitAreaShow": false,
+        "splitAreaColor": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      },
+      {
+        "type": "category",
+        "name": "类目坐标轴",
+        "axisLineShow": true,
+        "axisLineColor": "#6E7079",
+        "axisTickShow": true,
+        "axisTickColor": "#6E7079",
+        "axisLabelShow": true,
+        "axisLabelColor": "#6E7079",
+        "splitLineShow": false,
+        "splitLineColor": ["#E0E6F1"],
+        "splitAreaShow": false,
+        "splitAreaColor": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      },
+      {
+        "type": "value",
+        "name": "数值坐标轴",
+        "axisLineShow": false,
+        "axisLineColor": "#6E7079",
+        "axisTickShow": false,
+        "axisTickColor": "#6E7079",
+        "axisLabelShow": true,
+        "axisLabelColor": "#6E7079",
+        "splitLineShow": true,
+        "splitLineColor": ["#E0E6F1"],
+        "splitAreaShow": false,
+        "splitAreaColor": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      },
+      {
+        "type": "log",
+        "name": "对数坐标轴",
+        "axisLineShow": false,
+        "axisLineColor": "#6E7079",
+        "axisTickShow": false,
+        "axisTickColor": "#6E7079",
+        "axisLabelShow": true,
+        "axisLabelColor": "#6E7079",
+        "splitLineShow": true,
+        "splitLineColor": ["#E0E6F1"],
+        "splitAreaShow": false,
+        "splitAreaColor": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      },
+      {
+        "type": "time",
+        "name": "时间坐标轴",
+        "axisLineShow": true,
+        "axisLineColor": "#6E7079",
+        "axisTickShow": true,
+        "axisTickColor": "#6E7079",
+        "axisLabelShow": true,
+        "axisLabelColor": "#6E7079",
+        "splitLineShow": false,
+        "splitLineColor": ["#E0E6F1"],
+        "splitAreaShow": false,
+        "splitAreaColor": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    ],
+    "axisSeperateSetting": true,
+    "toolboxColor": "#8d8d8d",
+    "toolboxEmphasisColor": "#1c2024",
+    "tooltipAxisColor": "#cccccc",
+    "tooltipAxisWidth": 1,
+    "timelineLineColor": "#dae1f5",
+    "timelineLineWidth": 2,
+    "timelineItemColor": "#a4b1d7",
+    "timelineItemColorE": "#ffffff",
+    "timelineCheckColor": "#316bf3",
+    "timelineCheckBorderColor": "#ffffff",
+    "timelineItemBorderWidth": 1,
+    "timelineControlColor": "#a4b1d7",
+    "timelineControlBorderColor": "#a4b1d7",
+    "timelineControlBorderWidth": 1,
+    "timelineLabelColor": "#a4b1d7"
+  }
+}

package/src/chart/chart.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import ReactECharts from 'echarts-for-react';
+import chartTheme from './chart-theme.json';
+
+export { chartTheme };
+
+export type ChartProps = React.ComponentProps<typeof ReactECharts>;
+
+export function Chart(props: ChartProps): JSX.Element {
+  const { width, height, ref } = useResizeDetector({
+    handleHeight: false,
+    refreshMode: 'debounce',
+    refreshRate: 100,
+  });
+
+  return (
+    <div ref={ref} style={{ width: '100%', height: '100%' }}>
+      <ReactECharts style={{ width, height }} theme={chartTheme} {...props} />
+    </div>
+  );
+}

package/src/icon.ts

@@ -0,0 +1,14 @@
+export {
+  BookmarkIcon,
+  ExitIcon,
+  InfoCircledIcon,
+  ExclamationTriangleIcon,
+  MagnifyingGlassIcon,
+  DotsHorizontalIcon,
+  ChatBubbleIcon,
+  PlusIcon,
+  BookmarkFilledIcon,
+  MixerHorizontalIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} 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

@@ -0,0 +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';

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

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

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

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

package/src/molecules/index.ts

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