@tipp/ui 0.1.13 → 0.1.15

package/dist/molecules/index.js

@@ -6,12 +6,13 @@ import {
 import "../chunk-PBPRWY2V.js";
 import "../chunk-BSTJBBEX.js";
 import "../chunk-NDUKDKGB.js";
-import "../chunk-UKJ64ZOX.js";
+import "../chunk-SQ5HD7LD.js";
 import "../chunk-IIBITN2G.js";
+import "../chunk-5ZITU5L7.js";
 import "../chunk-ILRUXI2E.js";
 import "../chunk-JPIZP2PZ.js";
 import "../chunk-ACVANQJ4.js";
-import "../chunk-5U2NU566.js";
+import "../chunk-TVDKGMBI.js";
 import "../chunk-355MU6BH.js";
 import "../chunk-HYITAA4J.js";
 import "../chunk-5H3YPCZK.js";
@@ -19,7 +20,7 @@ import "../chunk-FR2GDOU2.js";
 import "../chunk-74DX4CU7.js";
 import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
-import "../chunk-5ZITU5L7.js";
+import "../chunk-5AVBYDPB.js";
 import "../chunk-365QMK4D.js";
 import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
@@ -27,14 +28,14 @@ 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-P3DQHJ5L.js";
+import "../chunk-5U2NU566.js";
+import "../chunk-O3DNDMV3.js";
 import "../chunk-OCJNQGHN.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
@@ -51,6 +52,7 @@ import "../chunk-MIMJ7LON.js";
 import "../chunk-IQEEPHOY.js";
 import "../chunk-JEHDCZQU.js";
 import "../chunk-OHMOP5PV.js";
+import "../chunk-MMAV5BRZ.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
 import "../chunk-CZEGRZBK.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "private": false,
   "type": "module",
   "exports": {

package/src/atoms/index.ts

@@ -47,3 +47,5 @@ export * from './text-field';
 export * from './tooltip';
 export * from './collapse';
 export * from './spinner';
+
+export * from './pagination';

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/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

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

package/src/icon.ts

@@ -9,4 +9,6 @@ export {
   PlusIcon,
   BookmarkFilledIcon,
   MixerHorizontalIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
 } from '@radix-ui/react-icons';