@tipp/ui 1.0.13 → 1.0.14

package/src/charts/chart-theme.json

@@ -1,136 +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"
-  }
-}
+{
+  "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/charts/chart.tsx

@@ -1,43 +1,43 @@
-import React, { useMemo } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
-import ReactECharts from 'echarts-for-react';
-import type { EChartOption } from 'echarts';
-import { merge } from 'lodash-es';
-import chartTheme from './chart-theme.json';
-
-export { chartTheme };
-
-export type ChartProps = Omit<
-  React.ComponentProps<typeof ReactECharts>,
-  'option'
-> & {
-  option: EChartOption;
-};
-
-export function Chart(props: ChartProps): JSX.Element {
-  const { width, height, ref } = useResizeDetector({
-    handleHeight: false,
-    refreshMode: 'debounce',
-    refreshRate: 100,
-  });
-
-  const option = useMemo(() => {
-    const baseOption: EChartOption = {
-      textStyle: { fontFamily: 'Noto Sans KR' },
-      tooltip: { textStyle: { fontSize: 16 } },
-    };
-    return merge(baseOption, props.option);
-  }, [props.option]);
-
-  return (
-    <div ref={ref} style={{ width: '100%', height: '100%' }}>
-      <ReactECharts
-        opts={{ renderer: 'svg' }}
-        style={{ width, height }}
-        theme={chartTheme}
-        {...props}
-        option={option}
-      />
-    </div>
-  );
-}
+import React, { useMemo } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import ReactECharts from 'echarts-for-react';
+import type { EChartOption } from 'echarts';
+import { merge } from 'lodash-es';
+import chartTheme from './chart-theme.json';
+
+export { chartTheme };
+
+export type ChartProps = Omit<
+  React.ComponentProps<typeof ReactECharts>,
+  'option'
+> & {
+  option: EChartOption;
+};
+
+export function Chart(props: ChartProps): JSX.Element {
+  const { width, height, ref } = useResizeDetector({
+    handleHeight: false,
+    refreshMode: 'debounce',
+    refreshRate: 100,
+  });
+
+  const option = useMemo(() => {
+    const baseOption: EChartOption = {
+      textStyle: { fontFamily: 'Noto Sans KR' },
+      tooltip: { textStyle: { fontSize: 16 } },
+    };
+    return merge(baseOption, props.option);
+  }, [props.option]);
+
+  return (
+    <div ref={ref} style={{ width: '100%', height: '100%' }}>
+      <ReactECharts
+        opts={{ renderer: 'svg' }}
+        style={{ width, height }}
+        theme={chartTheme}
+        {...props}
+        option={option}
+      />
+    </div>
+  );
+}

package/src/charts/horizontal-bar-chart.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
-
-export interface HorizontalBarChartProps {
-  /** 100% 바가 뜻하는 전체 값 */
-  total: number;
-  /** 화면에 채워져보이는 값 */
-  value: number;
-  /** 배경 색상 */
-  backgroundColor?: string;
-  /** 바의 색상 */
-  barColor?: string;
-  /** 바의 높이 */
-  height?: number;
-}
-
-export function HorizontalBarChart(
-  props: HorizontalBarChartProps
-): React.ReactNode {
-  const { total, value, backgroundColor, barColor, height } = props;
-  return (
-    <div
-      className="tipp_horizontal-bar-chart bar-wrapper"
-      style={{ height, backgroundColor }}
-    >
-      <div
-        style={{
-          width: `${Math.round((value / total) * 100)}%`,
-          height: '100%',
-        }}
-      >
-        <div className="bar" style={{ backgroundColor: barColor }} />
-      </div>
-    </div>
-  );
-}
+import React from 'react';
+
+export interface HorizontalBarChartProps {
+  /** 100% 바가 뜻하는 전체 값 */
+  total: number;
+  /** 화면에 채워져보이는 값 */
+  value: number;
+  /** 배경 색상 */
+  backgroundColor?: string;
+  /** 바의 색상 */
+  barColor?: string;
+  /** 바의 높이 */
+  height?: number;
+}
+
+export function HorizontalBarChart(
+  props: HorizontalBarChartProps
+): React.ReactNode {
+  const { total, value, backgroundColor, barColor, height } = props;
+  return (
+    <div
+      className="tipp_horizontal-bar-chart bar-wrapper"
+      style={{ height, backgroundColor }}
+    >
+      <div
+        style={{
+          width: `${Math.round((value / total) * 100)}%`,
+          height: '100%',
+        }}
+      >
+        <div className="bar" style={{ backgroundColor: barColor }} />
+      </div>
+    </div>
+  );
+}

package/src/charts/index.ts

@@ -1,2 +1,2 @@
-export * from './chart';
-export * from './horizontal-bar-chart';
+export * from './chart';
+export * from './horizontal-bar-chart';

package/src/icon.ts

@@ -1,19 +1,21 @@
-export {
-  BookmarkIcon,
-  ExitIcon,
-  InfoCircledIcon,
-  ExclamationTriangleIcon,
-  MagnifyingGlassIcon,
-  DotsHorizontalIcon,
-  ChatBubbleIcon,
-  PlusIcon,
-  BookmarkFilledIcon,
-  MixerHorizontalIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ClipboardIcon,
-  BarChartIcon,
-  PersonIcon,
-  GearIcon,
-  DotsVerticalIcon,
-} from '@radix-ui/react-icons';
+export {
+  BookmarkIcon,
+  ExitIcon,
+  InfoCircledIcon,
+  ExclamationTriangleIcon,
+  MagnifyingGlassIcon,
+  DotsHorizontalIcon,
+  ChatBubbleIcon,
+  PlusIcon,
+  BookmarkFilledIcon,
+  MixerHorizontalIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ClipboardIcon,
+  BarChartIcon,
+  PersonIcon,
+  GearIcon,
+  DotsVerticalIcon,
+  Pencil1Icon,
+  Cross1Icon
+} from '@radix-ui/react-icons';

package/src/icons/down.tsx

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

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

package/src/icons/up.tsx

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