@uniai-fe/ui-legacy 0.1.5 → 0.1.7

package/src/template/filter/components/Group.tsx

@@ -1,100 +0,0 @@
-"use client";
-
-import { useCallback } from "react";
-import { useFormContext, useWatch } from "react-hook-form";
-
-import InputCheckbox from "../../../form-field/input/components/click/Checkbox";
-import StyledFilter from "../styles/styled-components/filter";
-
-import type { FilterGroupDataType, FilterStateFormType } from "../../../types";
-
-export default function FilterGroup({
-  groupKey,
-  categoryKey,
-  categoryName,
-  items,
-}: FilterGroupDataType) {
-  const { register, control, getValues, setValue } =
-    useFormContext<FilterStateFormType>();
-
-  // 현재 그룹 선택 현황
-  const checkState = useWatch({ control, name: `filter.${categoryKey}` });
-
-  // 전체선택 클릭 이벤트
-  const onCheckAll = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { checked } = e.target;
-      setValue(`filter.${categoryKey}.all`, checked);
-
-      // 하위항목에 all check상태 일괄 적용
-      const keys = items.map(({ value }) => value);
-
-      keys.forEach(dataKey => {
-        setValue(`filter.${categoryKey}.${dataKey}`, checked);
-      });
-    },
-    [categoryKey, items, setValue],
-  );
-
-  // 하위항목 선택 클릭 이벤트
-  const onCheckEach = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>, dataKey: string) => {
-      // 클릭한 항목 선택 업데이트
-      const { checked: thisChecked } = e.target;
-      setValue(`filter.${categoryKey}.${dataKey}`, thisChecked);
-
-      // 전체 선택상태
-      const currentCheckedAll = getValues(`filter.${categoryKey}.all`);
-
-      // 나머지 하위항목 선택상태
-      const others = Object.fromEntries(
-        Object.entries(checkState).filter(
-          ([key]) => !["all", dataKey].includes(key),
-        ),
-      );
-      // 현재 항목을 클릭함으로써, 모든 하위항목이 모두 체크되었는지 확인
-      const isCheckedAllByEach =
-        thisChecked && Object.values(others).every(checked => checked);
-
-      // 현재 전체선택 체크상태와 다르면 업데이트
-      if (currentCheckedAll !== isCheckedAllByEach)
-        setValue(`filter.${categoryKey}.all`, isCheckedAllByEach);
-    },
-    [categoryKey, checkState, getValues, setValue],
-  );
-
-  return (
-    <StyledFilter.Group.Container>
-      <StyledFilter.Group.Title>
-        <InputCheckbox
-          label={{
-            name: <span>{categoryName}</span>,
-            position: "right",
-            hide: false,
-          }}
-          selectorId={`${categoryKey}/all`}
-          dataKey={`${categoryKey}/all`}
-          register={register(`filter.${categoryKey}.all`)}
-          state={{ checked: checkState.all }}
-          onCustomChange={onCheckAll}
-        />
-      </StyledFilter.Group.Title>
-      {items.map(({ value: dataKey, name }) => (
-        <StyledFilter.Group.Item key={`${groupKey}/${dataKey}`}>
-          <InputCheckbox
-            label={{
-              name: <span>{name}</span>,
-              position: "right",
-              hide: false,
-            }}
-            selectorId={`${categoryKey}/${dataKey}`}
-            dataKey={`${categoryKey}/${dataKey}`}
-            register={register(`filter.${categoryKey}.${dataKey}`)}
-            state={{ checked: checkState[dataKey] }}
-            onCustomChange={e => onCheckEach(e, dataKey)}
-          />
-        </StyledFilter.Group.Item>
-      ))}
-    </StyledFilter.Group.Container>
-  );
-}

package/src/template/filter/components/ToggleButton.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import ButtonDefault from "../../../button/components/base/Default";
-import IconButton from "../../../icon/components/button";
-import StyledFilter from "../styles/styled-components/filter";
-
-export default function FilterToggleButton({
-  clickEvent,
-}: {
-  clickEvent: () => void;
-}) {
-  return (
-    <StyledFilter.Button
-      as={ButtonDefault}
-      className="filter-button"
-      styleOptions={{
-        priorityType: "pale",
-        fillType: "outline",
-        sizeType: "small",
-      }}
-      clickEvent={clickEvent}
-    >
-      <IconButton.Filter />
-      <span>필터</span>
-    </StyledFilter.Button>
-  );
-}

package/src/template/filter/index.tsx

@@ -1,5 +0,0 @@
-import FilterContainer from "./components/Container";
-
-const Filter = FilterContainer;
-
-export default Filter;

package/src/template/filter/styled.tsx

@@ -1,3 +0,0 @@
-import StyledFilter from "./styles/styled-components/filter";
-
-export default StyledFilter;

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

@@ -1,66 +0,0 @@
-"use client";
-
-import { styled } from "styled-components";
-import StyledDropdown from "../../../../dropdown/styled";
-import Button from "../../../../button";
-
-const FilterButton = styled(Button.Default)`
-  margin: 0;
-  figure {
-    margin-right: 4px;
-  }
-`;
-const Parent = styled(StyledDropdown.parent)`
-  --dropdown-padding-vertical: 15px;
-  --dropdown-padding-horizontal: 15px;
-
-  --dropdown-border-top-radius: 4px;
-  --dropdown-border-bottom-radius: 4px;
-
-  --field-item-width: fit-content;
-  --field-item-wrapper-width: fit-content;
-  --field-item-flex-wrap: nowrap;
-
-  ${StyledDropdown.wrapper} {
-    display: flex;
-  }
-`;
-
-const GroupContainer = styled.dl`
-  width: fit-content;
-  margin-right: 15px;
-  padding-right: 15px;
-  border-right: 1px solid var(--color_30);
-
-  &:last-child {
-    margin-right: 0;
-    padding-right: 0;
-    border-right: 0;
-  }
-`;
-
-const GroupTitle = styled.dt`
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--color_30);
-  span {
-    font-size: 16px;
-  }
-`;
-
-const GroupItem = styled.dd`
-  margin-top: 5px;
-`;
-
-const Group = {
-  Container: GroupContainer,
-  Title: GroupTitle,
-  Item: GroupItem,
-};
-
-const StyledFilter = {
-  Parent,
-  Button: FilterButton,
-  Group,
-};
-
-export default StyledFilter;

package/src/template/health-score/components/Chart.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-import { useCallback } from "react";
-import Chart from "../../../chart";
-import StyledHealthScore from "../styles/styled/chart";
-import Button from "../../../button";
-
-export default function HealthScoreChart({
-  title,
-  score,
-  details,
-}: {
-  title: string;
-  score: number | "";
-  details?: React.ReactNode[];
-}) {
-  const onOpen = useCallback(() => {
-    console.log(details);
-  }, [details]);
-
-  return (
-    <StyledHealthScore.container>
-      <Chart.Graph.ArcMeter
-        data={{ name: title, value: score || "" }}
-        max={100}
-      />
-      <StyledHealthScore.title>
-        <h5>{title}</h5>
-        <Button.Tooltip
-          size={18}
-          priorityType="primary"
-          fillType="solid"
-          clickEvent={onOpen}
-        />
-      </StyledHealthScore.title>
-    </StyledHealthScore.container>
-  );
-}

package/src/template/health-score/index.tsx

@@ -1,3 +0,0 @@
-import HealthScoreChart from "./components/Chart";
-
-export default HealthScoreChart;

package/src/template/health-score/styled.tsx

@@ -1,3 +0,0 @@
-import StyledHealthScore from "./styles/styled/chart";
-
-export default StyledHealthScore;

package/src/template/health-score/styles/styled/chart.ts

@@ -1,26 +0,0 @@
-"use client";
-
-import { styled } from "styled-components";
-import Chart from "../../../../chart";
-
-const container = styled(Chart.ContentsContainer)``;
-
-const title = styled.div`
-  width: 100%;
-  margin-top: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  h5 {
-    font-size: 20px;
-    color: var(--color_90);
-    font-weight: 600;
-  }
-`;
-
-const StyledHealthScore = {
-  container,
-  title,
-};
-
-export default StyledHealthScore;

package/src/template.tsx

@@ -1,5 +0,0 @@
-import HealthScoreChart from "./template/health-score";
-import Compare from "./template/compare";
-import Filter from "./template/filter";
-
-export { HealthScoreChart, Compare, Filter };

package/src/types/chart/axis.d.ts

@@ -1,15 +0,0 @@
-/**
- * 차트 y축 카테고리별 생성 데이터
- * @property {string} key - 렌더링 키
- * @property {string} axisCategory - y축 id
- */
-export interface ChartYAxisDataType {
-  /**
-   * 렌더링 키
-   */
-  key: string;
-  /**
-   * y축 id
-   */
-  axisCategory: string;
-}

package/src/types/chart/control.d.ts

@@ -1,109 +0,0 @@
-/**
- * 차트 제어 타입
- * @desc
- * - zoom-in: 확대
- * - zoom-out: 축소
- * - pan-left: 왼쪽으로 이동
- * - pan-right: 오른쪽으로 이동
- */
-export type ChartControlRole =
-  | "zoom-in"
-  | "zoom-out"
-  | "pan-left"
-  | "pan-right";
-
-/**
- * 차트 제어 범위
- */
-export type ChartControlRange = {
-  [edge: string]: number;
-  start: number;
-  end: number;
-};
-/**
- * 차트 제어 데이터 컨텍스트
- * @desc
- * - originData: 차트 데이터 원본
- * - indexRange: 현재 X축 범위 [시작 인덱스, 끝 인덱스]
- * - setIndexRange: X축 범위 업데이트 함수
- */
-export type ChartControlContext<ChartData extends object = object> = {
-  /**
-   * 차트 데이터 원본
-   */
-  originData: ChartData[];
-  /**
-   * 현재 X축 범위
-   * @desc
-   * - [시작 인덱스, 끝 인덱스]
-   */
-  indexRange: ChartControlRange;
-  /**
-   * X축 범위 업데이트
-   * @desc
-   * - [시작 인덱스, 끝 인덱스]
-   */
-  setIndexRange: React.Dispatch<React.SetStateAction<ChartControlRange>>;
-};
-
-/**
- * 차트 제어 도구; 확대/축소 (zoom)
- */
-export type ChartControlMethodZoom = {
-  [direction: string]: () => void;
-  in: () => void;
-  out: () => void;
-};
-/**
- * 차트 제어 도구; 좌우 이동 (pan)
- */
-export type ChartControlMethodPan = {
-  [direction: string]: () => void;
-  left: () => void;
-  right: () => void;
-};
-/**
- * 차트 제어 도구; 동작 함수
- */
-export type ChartControlMethod = {
-  zoom: ChartControlMethodZoom;
-  pan: ChartControlMethodPan;
-};
-
-/**
- * 차트 제어 도구; 확대/축소 비활성화 상태
- */
-export type ChartControlDisabledZoom = {
-  [direction: string]: boolean;
-  in: boolean;
-  out: boolean;
-};
-/**
- * 차트 제어 도구; 좌우 이동 상태
- */
-export type ChartControlDisabledPan = {
-  [direction: string]: boolean;
-  left: boolean;
-  right: boolean;
-};
-/**
- * 차트 제어 도구; 상태
- */
-export type ChartControlDisabled = {
-  zoom: ChartControlDisabledZoom;
-  pan: ChartControlDisabledPan;
-};
-
-/**
- * 차트 제어 도구
- */
-export type ChartControlReturn = {
-  /**
-   * 동작 함수
-   */
-  method: ChartControlMethod;
-  /**
-   * 비활성화 상태
-   */
-  disabled: ChartControlDisabled;
-};

package/src/types/chart/data.d.ts

@@ -1,41 +0,0 @@
-/**
- * 차트 데이터; 1차원 데이터
- */
-export type ChartCoreDataSingleType = {
-  /**
-   * 임의의 차트 데이터
-   */
-  [dataKey: string]: number | string | null;
-  /**
-   * 데이터 명칭
-   */
-  name: string;
-  /**
-   * 데이터 값
-   */
-  value: number | null;
-  /**
-   * 데이터 단위
-   */
-  unit: string;
-  /**
-   * 데이터 색상
-   */
-  fill: string;
-  /**
-   * pie 차트의 경우, 데이터 트랙
-   * - 데이터 총량 또는 게이지 최대값
-   */
-  track?: number;
-};
-
-/**
- * 차트 데이터; 2차원 데이터
- */
-export type ChartCoreDataAxisType = {
-  /**
-   * 차트 시그니처 데이터
-   * number | string | null
-   */
-  [dataKey: string]: number | string | null;
-};

package/src/types/chart/dot.d.ts

@@ -1,3 +0,0 @@
-import type { Props } from "recharts/types/shape/Dot";
-
-export type ChartDotProps = Props;

package/src/types/chart/index.d.ts

@@ -1,7 +0,0 @@
-export type * from "./legend";
-export type * from "./axis";
-export type * from "./data";
-export type * from "./props";
-export type * from "./tick";
-export type * from "./dot";
-export type * from "./control";

package/src/types/chart/legend.d.ts

@@ -1,124 +0,0 @@
-/**
- * <Area /> 차트 그라디언트 컬러 데이터
- */
-export type AreaGradientOptions = {
-  /**
-   * 렌더링 키
-   */
-  key: string;
-  /**
-   * 컬러 위치값
-   */
-  offset: string;
-  /**
-   * 컬러
-   * - rgba
-   * - hex + alpha
-   */
-  color: string;
-};
-/**
- * <Area /> 차트 그라디언트 옵션
- */
-export type AreaGradientProps = {
-  /**
-   * <linearGradient id="selectorId" />
-   * <Area fill="url(#selectorId)" />
-   */
-  selectorId: string;
-  gradient: AreaGradientOptions[];
-};
-
-/**
- * 차트 레전드; 기본 타입
- * @property {string} key - 렌더링 키
- * @property {string} axisCategory - y축 id
- * @property {string} code - 데이터 키
- * @property {string} name - 데이터 명칭
- * @property {string} [nameJsx] - 데이터 명칭
- * @property {string} unit - 데이터 단위
- * @property {string} color - 데이터 컬러
- * @property {string} [strokeColor] - 테두리 컬러
- * @property {string} [strokeStyle] - 테두리 스타일
- * @property {boolean} active - 데이터 활성화 여부 (레전드 토글 등)
- * @property {boolean} [highlight] - 포커스 구분
- */
-export interface ChartLegendBaseType {
-  /**
-   * 렌더링 키
-   */
-  key: string;
-  /**
-   * y축 id
-   */
-  axisCategory: string;
-  /**
-   * 데이터 키
-   */
-  code: string;
-  /**
-   * 커스텀 Dot
-   */
-  dot?: React.ReactNode;
-  /**
-   * 데이터 명칭
-   */
-  name: string;
-  /**
-   * 데이터 명칭 (JSX)
-   */
-  nameJsx?: React.ReactNode;
-  /**
-   * 데이터 단위
-   */
-  unit: string;
-  /**
-   * 데이터 컬러
-   */
-  color: string;
-  /**
-   * 데이터 활성화 여부 (레전드 토글 등)
-   */
-  active: boolean;
-  // ------------------------------ style option 개편 필요
-  /**
-   * 테두리 컬러
-   */
-  strokeColor?: string;
-  /**
-   * 테두리 스타일
-   */
-  strokeStyle?: string;
-  /**
-   * 테두리 두께
-   */
-  strokeWidth?: number;
-  /**
-   * 포커스 구분
-   */
-  highlight?: boolean;
-  /**
-   * 투명도
-   */
-  opacity?: number;
-}
-
-/**
- * 차트 레전드; 데이터 포함 타입
- * @property {string} key - 렌더링 키
- * @property {string} axisCategory - y축 id
- * @property {string} code - 데이터 키
- * @property {string} name - 데이터 명칭
- * @property {React.ReactNode} value - 데이터값 표현
- * @property {string} unit - 데이터 단위
- * @property {string} color - 데이터 컬러
- * @property {boolean} active - 데이터 활성화 여부 (레전드 토글 등)
- * @property {boolean} [highlight] - 포커스 구분
- */
-export type ChartLegendDataType = ChartLegendBaseType & {
-  /**
-   * 표현될 데이터 값
-   * - 단순 number, null로는 표현하기 힘든, 복합적인 표현 방식을 고려
-   */
-  value: React.ReactNode;
-};