@uniai-fe/ui-legacy 0.1.1

package/src/button/styles/scss/theme.scss

@@ -0,0 +1,36 @@
+:root {
+  --button-primary-solid: var(--color-light-blue-600);
+  --button-primary-solid-text: white;
+  --button-primary-outline: var(--color-light-blue-600);
+  --button-primary-outline-text: var(--color-light-blue-600);
+
+  --button-secondary-solid: #000;
+  --button-secondary-solid-text: white;
+  --button-secondary-outline: #000;
+  --button-secondary-outline-text: #000;
+
+  --button-neutral-solid: var(--color-blue-gray-100);
+  --button-neutral-solid-text: var(--color_60);
+  --button-neutral-outline: var(--color-blue-gray-400);
+  --button-neutral-outline-text: var(--color-blue-gray-600);
+
+  --button-pale-solid: var(--color_30);
+  --button-pale-solid-text: var(--color_80);
+  --button-pale-outline: var(--color_30);
+  --button-pale-outline-text: var(--color_60);
+
+  --button-readonly-cover: rgba(255, 255, 255, 0.6);
+
+  --button-border-style: solid;
+
+  &.dark-mode {
+    --button-readonly-cover: rgba(0, 0, 0, 0.5);
+
+    --button-neutral-solid: #1c242e;
+    --button-neutral-outline: #484f56;
+    --button-neutral-outline-text: var(--color-blue-gray-300);
+
+    --button-secondary-outline-text: #fff;
+    --button-secondary-outline: #66707a;
+  }
+}

package/src/button/styles/styled-components/button.ts

@@ -0,0 +1,311 @@
+"use client";
+
+import Link from "next/link";
+import { styled, css, keyframes } from "styled-components";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+import type {
+  ButtonFillType,
+  ButtonPriorityType,
+  ButtonSizeType,
+  ButtonStateType,
+  ButtonWidthType,
+} from "../../../types";
+
+const buttonAttr = {
+  shouldForwardProp: (attr: string) =>
+    attr.includes("-") ||
+    attr.startsWith("on") ||
+    ["readonly", "disabled", "children", "className"].includes(attr),
+};
+
+export type ButtonColorProps = {
+  $priority: ButtonPriorityType;
+  $fill: ButtonFillType;
+};
+
+export type ButtonStyledProps = ButtonColorProps & {
+  $size: ButtonSizeType;
+  $state: ButtonStateType;
+  $width: ButtonWidthType | string | number;
+};
+
+const base = css`
+  display: flex;
+  align-items: center;
+  margin: var(--button-margin-vertical) var(--button-margin-horizontal);
+  border-top-left-radius: var(--button-top-radius);
+  border-top-right-radius: var(--button-top-radius);
+  border-bottom-left-radius: var(--button-bottom-radius);
+  border-bottom-right-radius: var(--button-bottom-radius);
+  border-width: var(--button-border-width);
+  border-style: var(--button-border-style);
+  transition: width 0.3s;
+  font-weight: 600;
+  span {
+    white-space: nowrap;
+    user-select: none;
+  }
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+
+const size = (sizeType: ButtonSizeType) => {
+  const branch = () => {
+    switch (sizeType) {
+      case "large":
+        return css``;
+      case "medium":
+        return css``;
+      case "small":
+        return css``;
+      case "modal":
+        return css`
+          width: 10rem;
+          justify-content: center;
+        `;
+      case "chip":
+        return css`
+          --button-top-radius: 1.6rem;
+          --button-bottom-radius: 1.6rem;
+          &:before {
+            border-radius: 1.6rem;
+          }
+        `;
+      default:
+        return css``;
+    }
+  };
+  return css`
+    /* width: auto; */
+    height: var(--button-height-${sizeType});
+    padding: 0 var(--button-padding-${sizeType});
+
+    .loading-icon {
+      width: var(--button-loading-size-${sizeType});
+      height: var(--button-loading-size-${sizeType});
+
+      svg {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    span {
+      font-size: var(--button-name-size-${sizeType});
+    }
+
+    ${branch()}
+  `;
+};
+
+const color = (priority: ButtonPriorityType, fill: ButtonFillType) => {
+  const branch = () => {
+    switch (fill) {
+      case "solid":
+        return css`
+          background-color: var(--button-${priority}-solid);
+        `;
+      default:
+        return css`
+          background-color: var(--color_0);
+        `;
+    }
+  };
+
+  return css`
+    /* 테두리 */
+    border-color: var(--button-${priority}-${fill});
+    /* 텍스트 */
+    color: var(--button-${priority}-${fill}-text);
+    ${branch()}
+    span {
+      color: var(--button-${priority}-${fill}-text);
+    }
+    /* 로딩 아이콘 컬러 */
+    .loading-icon {
+      svg path {
+        fill: var(--button-${priority}-${fill}-text);
+      }
+    }
+  `;
+};
+
+const mouse = css`
+  position: relative;
+  &:before {
+    content: "마우스 오버";
+    display: block;
+    width: calc(
+      100% + var(--button-border-width) * 2
+    ); /* border-left, border-right */
+    height: calc(
+      100% + var(--button-border-width) * 2
+    ); /* border-top, border-bottom */
+    /* border-radius: 0.4rem; */
+    border-top-left-radius: var(--button-top-radius);
+    border-top-right-radius: var(--button-top-radius);
+    border-bottom-left-radius: var(--button-bottom-radius);
+    border-bottom-right-radius: var(--button-bottom-radius);
+    font-size: 0 !important;
+    position: absolute;
+    top: calc(var(--button-border-width) * -1); /* border-top */
+    left: calc(var(--button-border-width) * -1); /* border-left */
+    z-index: 10;
+  }
+  &:hover {
+    &:before {
+      background: rgba(0, 0, 0, 0.06);
+    }
+  }
+  &:active {
+    &:before {
+      background: rgba(0, 0, 0, 0.12);
+    }
+  }
+  &[readonly],
+  &[disabled],
+  &[button-state="loading"] {
+    cursor: default;
+    &:before {
+      background: var(--button-readonly-cover);
+      border-radius: inherit;
+    }
+  }
+`;
+
+const fetching = keyframes`
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }`;
+
+const basicStyle = ({
+  $size,
+  $priority,
+  $fill,
+  $width,
+  $state,
+}: ButtonStyledProps) => css`
+  ${base}
+  ${mouse}
+  ${size($size)}
+  ${color($priority, $fill)}
+  ${$width === "wide" &&
+  css`
+    width: 100%;
+    justify-content: center;
+  `}
+  ${$state === "loading" &&
+  css`
+    span {
+      display: none;
+    }
+    .loading-icon {
+      display: block;
+      animation: ${fetching} 1s linear infinite;
+    }
+  `}
+  &.fetching {
+    .fetching-icon {
+      animation: ${fetching} 1s linear infinite;
+    }
+  }
+  /* .expand-icon {
+    margin-left: 16px;
+  } */
+  ${((typeof $width == "string" &&
+    !["fit", "wide", "normal"].includes($width)) ||
+    typeof $width === "number") &&
+  css`
+    width: ${styleBaseSize("rem", $width)};
+  `}
+`;
+
+const basic = styled.button.withConfig(buttonAttr)<ButtonStyledProps>`
+  ${basicStyle}
+
+  &.button-reset {
+    span {
+      margin-left: 0.4rem;
+    }
+  }
+`;
+
+const link = styled(Link)<ButtonStyledProps>`
+  ${basicStyle}
+`;
+
+const expand = styled.button`
+  width: fit-content;
+  height: fit-content;
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  span {
+    font-size: 1.6rem;
+    color: var(--color_60);
+    white-space: nowrap;
+  }
+  /* &[expand-state="open"] {
+    figure {
+      transform: rotate(180deg);
+    }
+  } */
+`;
+
+// const icon = styled.figure`
+//   width: fit-content;
+//   height: fit-content;
+//   margin: 0 4px;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   &:first-child {
+//     margin-left: 0;
+//   }
+//   &:last-child {
+//     margin-right: 0;
+//   }
+// `;
+
+const tooltip = styled.button.withConfig(buttonAttr)<
+  ButtonColorProps & { $size: number }
+>`
+  width: ${({ $size }) => $size / 10}rem;
+  height: ${({ $size }) => $size / 10}rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  figure {
+    width: 100%;
+    height: 100%;
+  }
+  svg {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    path {
+      fill: var(
+        --button-${({ $priority }) => $priority}-${({ $fill }) => $fill}
+      );
+    }
+  }
+`;
+
+const StyledButtonBase = {
+  color,
+  mouse,
+  basic,
+  link,
+  expand,
+  tooltip,
+};
+
+export default StyledButtonBase;

package/src/button/styles/styled-components/icon.ts

@@ -0,0 +1,30 @@
+"use client";
+
+import { styled } from "styled-components";
+
+const resetSelected = styled.figure`
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  border-radius: 1rem;
+  margin-left: 0.6rem;
+
+  background-color: var(--color-blue-gray-400);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .icon-wrapper {
+    width: 1rem;
+    height: 1.1rem;
+    position: relative;
+  }
+`;
+
+const StyledButtonIcon = {
+  resetSelected,
+};
+
+export default StyledButtonIcon;

package/src/button/styles/styled-components/multiple.ts

@@ -0,0 +1,75 @@
+"use client";
+
+import { styled, css } from "styled-components";
+
+type StyledMultipleContainerProps = Partial<{
+  $empty: boolean;
+}>;
+const container = styled.div<StyledMultipleContainerProps>`
+  width: 100%;
+  ${({ $empty }) =>
+    $empty &&
+    css`
+      height: 100%;
+    `}
+`;
+
+type StyledMultipleListProps = Partial<{
+  $columnLength: number;
+}>;
+const list = styled.ul<StyledMultipleListProps>`
+  width: 100%;
+  ${({ $columnLength }) =>
+    $columnLength
+      ? css`
+          display: grid;
+          grid-template-columns: repeat(${$columnLength}, 1fr);
+          gap: var(--button-multiple-list-gap-horizontal)
+            var(--button-multiple-list-gap-vertical);
+        `
+      : css`
+          height: 100%;
+        `}
+`;
+type StyledMultipleItemProps = Partial<{
+  $isAlternate: boolean;
+}>;
+const item = styled.li<StyledMultipleItemProps>`
+  height: ${({ $isAlternate }) =>
+    $isAlternate ? "100%" : "var(--button-multiple-item-height)"};
+  font-size: var(--button-multiple-text-size);
+  color: var(--button-multiple-text-color-default);
+`;
+const button = styled.button<{ $selected: boolean }>`
+  width: 100%;
+  height: 100%;
+  padding: var(--button-multiple-item-padding-vertical)
+    var(--button-multiple-item-padding-horizontal);
+
+  display: flex;
+  align-items: var(--button-multiple-align-items);
+  justify-content: var(--button-multiple-justify-content);
+
+  ${({ $selected }) =>
+    $selected &&
+    css`
+      background: var(--button-multiple-item-bg-selected);
+    `}
+
+  span {
+    font-size: var(--button-multiple-text-size);
+    color: var(
+      --button-multiple-text-color-${({ $selected }) =>
+          $selected ? "selected" : "default"}
+    );
+  }
+`;
+
+const StyledButtonMultiple = {
+  container,
+  list,
+  item,
+  button,
+};
+
+export default StyledButtonMultiple;

package/src/button/styles/styled-components/template.ts

@@ -0,0 +1,43 @@
+"use client";
+
+import { styled } from "styled-components";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+export type StyledButtonTextProps = Partial<{
+  $color: string;
+  $state: string;
+  $size: number | string;
+}>;
+const textButton = styled.button<StyledButtonTextProps>`
+  width: fit-content;
+  height: fit-content;
+  max-width: 100%;
+
+  display: flex;
+  align-items: center;
+
+  span {
+    width: fit-content;
+    font-size: ${({ $size }) => styleBaseSize("rem", $size, 14)};
+    color: ${({ $color }) => $color || `var(--color_60)`};
+    font-weight: 500;
+    line-height: 1.2em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &:hover {
+    span {
+      text-decoration: underline;
+    }
+  }
+`;
+
+const resetSelected = styled(textButton)``;
+
+const StyledButtonTemplate = {
+  textButton,
+  resetSelected,
+};
+
+export default StyledButtonTemplate;

package/src/chart/chart.scss

@@ -0,0 +1,11 @@
+@use "./styles/scss/level.color.scss";
+
+@use "./styles/scss/tick.scss";
+@use "./styles/scss/graph.scss";
+@use "./styles/scss/legend.scss";
+@use "./styles/scss/tooltip.scss";
+@use "./styles/scss/control.scss";
+@use "./styles/scss/filter.scss";
+
+@use "./styles/scss/arc-gauge.scss";
+@use "./styles/scss/arc-meter.scss";

package/src/chart/components/Contents.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import StyledChartCommon from "../styles/styled/common";
+
+export default function ChartContents({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <StyledChartCommon.container className={className}>
+      {children}
+    </StyledChartCommon.container>
+  );
+}

package/src/chart/components/control/Button.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledChartControl from "../../styles/styled/control";
+import Icon from "../../../icon";
+
+/**
+ * 차트 인터렉션 컨트롤 버튼
+ * @component
+ * @property {"zoom-in" | "zoom-out" | "pan-left" | "pan-right"} role - 버튼 역할
+ * @property {Function} clickEvent - 클릭 이벤트 핸들러
+ * @property {string} [className] - 추가 클래스 이름
+ * @property {React.ReactNode} [children] - 버튼 내부에 렌더링
+ */
+export default function ChartControlButton({
+  className,
+  role,
+  clickEvent,
+  children,
+  disabled,
+}: {
+  role: "zoom-in" | "zoom-out" | "pan-left" | "pan-right";
+  clickEvent: () => void;
+} & Partial<{
+  className: string;
+  children: React.ReactNode;
+  disabled: boolean;
+}>) {
+  return (
+    <StyledChartControl.button
+      type="button"
+      className={clsx("chart-control-button", className)}
+      disabled={disabled}
+      onClick={!disabled ? clickEvent : undefined}
+    >
+      {children || <Icon.Chart.Control {...{ role, width: 20, height: 20 }} />}
+    </StyledChartControl.button>
+  );
+}

package/src/chart/components/control/Container.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledChartControl from "../../styles/styled/control";
+
+/**
+ * 차트 인터렉션 컨트롤 컨테이너
+ * @component
+ * @property {string} [className] - 추가 클래스 이름
+ * @property {React.ReactNode} children - 자식 컴포넌트
+ */
+export default function ChartControlContainer({
+  className,
+  children,
+}: {
+  children: React.ReactNode;
+} & Partial<{
+  className: string;
+}>) {
+  return (
+    <StyledChartControl.container
+      className={clsx("chart-control-container", className)}
+    >
+      {children}
+    </StyledChartControl.container>
+  );
+}

package/src/chart/components/control/Provider.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import type { ChartControlContext, ChartControlRange } from "../../../types";
+
+/**
+ * 차트 컨트롤을 위한 데이터 컨텍스트
+ * @context
+ * @desc
+ * - {object[]} originData 원본 차트 데이터
+ * - {{ start: number; end: number; }} indexRange 현재 X축 인덱스 범위
+ * - {function} setRange X축 범위 업데이트 함수
+ */
+const ChartControlContext = createContext<ChartControlContext>({
+  originData: [],
+  indexRange: { start: 0, end: 0 },
+  setIndexRange: () => {},
+});
+
+/**
+ * 차트 컨트롤을 위한 데이터 컨텍스트 공급자
+ * @component
+ * @param {object} props
+ * @param {object[]} props.originData 원본 차트 데이터
+ * @param {React.ReactNode} props.children
+ */
+export default function ChartControlProvider<
+  ChartData extends object = object,
+>({
+  originData,
+  children,
+}: {
+  /**
+   * 원본 차트 데이터
+   * @type {object[]}
+   */
+  originData: ChartData[];
+  children: React.ReactNode;
+}) {
+  const [indexRange, setIndexRange] = useState<ChartControlRange>({
+    start: 0,
+    end: originData.length > 1 ? originData.length - 1 : 0,
+  });
+
+  // 초기 데이터 로딩 시(0 -> N) 전체 범위로 동기 업데이트하여 깜빡임 방지
+  const prevLenRef = useRef<number>(originData.length);
+  useLayoutEffect(() => {
+    const prev = prevLenRef.current;
+    const next = originData.length;
+    if (prev === 0 && next > 0) {
+      setIndexRange({ start: 0, end: Math.max(0, next - 1) });
+    }
+    prevLenRef.current = next;
+  }, [originData.length]);
+
+  // 데이터 길이가 변할 때 현재 indexRange를 데이터 범위에 맞춰 정돈
+  useLayoutEffect(() => {
+    const total = originData.length;
+    if (total < 0) return;
+    const maxEnd = Math.max(0, total - 1);
+
+    // 비어있는 경우 0,0 고정
+    if (total === 0) {
+      if (indexRange.start !== 0 || indexRange.end !== 0)
+        setIndexRange({ start: 0, end: 0 });
+      return;
+    }
+
+    // 현재 윈도우 길이 보존 시도
+    const length = Math.max(1, indexRange.end - indexRange.start + 1);
+
+    // 범위를 넘어가면 오른쪽 끝에 맞춰 재정렬
+    if (indexRange.end > maxEnd || indexRange.start > maxEnd) {
+      const newEnd = maxEnd;
+      const newStart = Math.max(0, newEnd - Math.min(length, total) + 1);
+      if (newStart !== indexRange.start || newEnd !== indexRange.end)
+        setIndexRange({ start: newStart, end: newEnd });
+    }
+  }, [originData.length, indexRange.start, indexRange.end]);
+
+  return (
+    <ChartControlContext.Provider
+      value={{
+        originData,
+        indexRange,
+        setIndexRange,
+      }}
+    >
+      {children}
+    </ChartControlContext.Provider>
+  );
+}
+
+/**
+ * 차트 컨트롤 데이터 컨텍스트를 사용하기 위한 커스텀 훅
+ * @hook
+ * @desc
+ * - {object[]} originData 원본 차트 데이터
+ * - {{ start: number; end: number; }} indexRange 현재 X축 인덱스 범위
+ * - {function} setIndexRange X축 범위 업데이트 함수
+ * @return {ChartControlContext} { originData, indexRange, setIndexRange }
+ */
+export function useChartContext<
+  ChartData extends object,
+>(): ChartControlContext<ChartData> {
+  const context = useContext(ChartControlContext);
+  if (!context) {
+    throw new Error("차트 데이터에 대한 컨텍스트를 찾을 수 없습니다.");
+  }
+  return context as ChartControlContext<ChartData>;
+}