@weing-dev/ui-kit-primitive 0.0.1 → 0.0.3

package/src/components/Cascader/Cascader.context.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-
-export type CascaderOption = {
-  id: string;
-  label: string;
-  disabled?: boolean;
-  role?: "title" | "divider";
-  children?: CascaderOption[];
-  [key: string]: unknown;
-};
-
-export type OnSelectProps = {
-  option: CascaderOption;
-  level: number;
-};
-
-type CascaderContextType = {
-  options: CascaderOption[];
-  activeOptions?: CascaderOption[];
-  selectedOptions?: CascaderOption[][];
-  showChildrenCount?: boolean;
-  columnPositionFromParent?: boolean;
-  columnOpenAnimation?: boolean;
-  maxColumnView?: number;
-  onSelect?: (props: OnSelectProps) => void;
-
-  // private
-  selectedOptionTop?: number[];
-  setSelectedOptionTop?: React.Dispatch<React.SetStateAction<number[]>>;
-};
-
-const initialState: CascaderContextType = {
-  options: [],
-  showChildrenCount: false,
-  columnPositionFromParent: false,
-  columnOpenAnimation: false,
-  maxColumnView: 6,
-};
-
-export const CascaderContext =
-  React.createContext<CascaderContextType>(initialState);
-
-export type CascaderProviderProps = React.PropsWithChildren<
-  CascaderContextType & {
-    className?: string;
-  }
->;
-
-export const CascaderProvider = (props: CascaderProviderProps) => {
-  const { children } = props;
-
-  return (
-    <CascaderContext.Provider
-      value={{
-        ...props,
-      }}
-    >
-      {children}
-    </CascaderContext.Provider>
-  );
-};

package/src/components/Cascader/Cascader.hook.ts

@@ -1,502 +0,0 @@
-import React from "react";
-import type { OnSelectProps, CascaderOption } from "./Cascader";
-
-interface UseCascaderProps {
-  options: CascaderOption[];
-  multiple?: boolean;
-}
-
-export interface UseCascaderReturn {
-  /**
-   * 활성화(active)된 옵션들
-   */
-  activeOptions: CascaderOption[];
-
-  /**
-   * 선택된 옵션들
-   */
-  selectedOptions: CascaderOption[][];
-
-  /**
-   * 활성화(active)된 옵션들을 기반으로 각 레벨별 선택 가능한 옵션들의 배열을 생성합니다.
-   *
-   * returns 
-   * 
-   * - 각 레벨별 옵션 배열을 포함하는 2차원 배열
-   * 
-   * - 첫 번째 레벨(index 0)은 항상 최상위 옵션들을 포함
-   * 
-   * - 이후 레벨들은 활성화된 옵션의 자식들을 순차적으로 포함
-   *
-   */
-  columns: CascaderOption[][];
-
-  /**
-   * 선택된 옵션들 중 자식이 없는 최종 옵션들만 필터링하여 반환
-   *
-   * returns: [{ id: "gangnam", ... }, { id: "yeoksam1", ... }, { id: "yeoksam2", ... }]
-   */
-  selectedResult: CascaderOption[];
-
-  /**
-   * 옵션 클릭 시 처리하는 핸들러
-   *
-   * 해당 메소드를 Cascader.Root에 전달하여 사용합니다.
-   *
-   * params - 클릭된 옵션과 레벨 정보 { option: CascaderOption, level: number }
-   *
-   * example - selectHandler({ option: { id: "korea", ... }, level: 0 })
-   */
-  selectHandler: (params: OnSelectProps) => void;
-
-  /**
-   * 특정 옵션을 선택하는 핸들러
-   *
-   * 해당 옵션을 통해 선택하면 해당 옵션과 그 부모 옵션들을 선택하거나 해제합니다.
-   *
-   * 만약 해당 옵션을 제거했을때 선택된 부모까지 전부 체크해서 선택되어있는 최종옵션이 없으면 상위의 부모옵션도 선택을 해제합니다.
-   *
-   * 토글식으로 작동됩니다.
-   *
-   *  params - 선택할 옵션의 ID { id: string }
-   *
-   * example - selectByIdHandler({ id: "gangnam" })
-   */
-  selectByIdHandler: (params: { id: string }) => void;
-
-  /**
-   * 모든 옵션을 초기화하는 핸들러
-   *
-   * params - 초기화할 옵션 종류 { active: boolean, selected: boolean }
-   *
-   * example - resetAll({ active: true, selected: true })
-   */
-  resetAll: (params?: { active?: boolean; selected?: boolean }) => void;
-
-  /**
-   * 특정 옵션과 해당 특정옵션의 자식중 선택되어 있는 옵션을 초기화하는 핸들러
-   *
-   * 해당 옵션을 초기화했을때 부모옵션까지 탐색해서 선택된 자식이 없을 경우 부모옵션도 초기화합니다.
-   *
-   * params - 초기화할 옵션의 ID { id: string }
-   *
-   * example - resetSelectedById({ id: "gangnam" })
-   */
-  resetSelectedById: (params: { id: string }) => void;
-
-  /**
-   * 특정 레벨까지 활성화(active)된 옵션들을 초기화하는 핸들러
-   *
-   * params - 초기화할 레벨 { level: number }
-   *
-   * example - resetActiveOptions({ level: 1 })
-   */
-  resetActiveOptions: (params?: { level?: number }) => void;
-}
-
-export function useCascader(props: UseCascaderProps): UseCascaderReturn {
-  const { options, multiple = false } = props;
-
-  // 현재 활성화된(열려있는) 옵션 상태
-  const [activeOptions, setActiveOptions] = React.useState<CascaderOption[]>(
-    []
-  );
-
-  // 현재 선택된 옵션 상태
-  const [selectedOptions, setSelectedOptions] = React.useState<
-    CascaderOption[][]
-  >([]);
-
-  // 옵션과 부모를 찾는 재귀 함수
-  interface FindOptionWithParentsProps {
-    options: CascaderOption[];
-    targetId: string;
-    parents?: CascaderOption[];
-  }
-  const findOptionWithParents = React.useCallback(
-    ({
-      options,
-      targetId,
-      parents = [],
-    }: FindOptionWithParentsProps): {
-      parent: CascaderOption;
-      target: CascaderOption;
-    } | null => {
-      // 모든 옵션을 순회하며 검색
-      for (const option of options) {
-        // 찾고자 하는 ID와 일치하는 옵션을 찾은 경우
-        if (option.id === targetId) {
-          // children이 있는 옵션은 중간 노드이므로 무시
-          if (option.children?.length) {
-            return null;
-          }
-          // 최종 옵션인 경우 마지막 부모와 함께 반환
-          return {
-            parent: parents[parents.length - 1],
-            target: option,
-          };
-        }
-
-        // 현재 옵션에 자식이 있는 경우 재귀적으로 검색
-        if (option.children?.length) {
-          const result = findOptionWithParents({
-            options: option.children,
-            targetId,
-            parents: [...parents, option],
-          });
-          if (result) return result;
-        }
-      }
-      // 찾지 못한 경우 null 반환
-      return null;
-    },
-    []
-  );
-
-  const columns = React.useMemo(() => {
-    const result: CascaderOption[][] = [];
-    result[0] = options;
-    // activeOptions가 있는 경우에만 실행
-    if (activeOptions.length > 0) {
-      // 현재 레벨의 옵션들을 저장하는 변수, 초기값은 최상위 옵션들
-      let currentLevelOptions = options;
-
-      // activeOptions를 순회하면서 각 레벨의 옵션들을 result 배열에 추가
-      activeOptions.forEach((active, index) => {
-        // 현재 레벨에서 active한 옵션을 찾음
-        const found = currentLevelOptions.find((opt) => opt.id === active.id);
-        // 찾은 옵션에 자식이 있는 경우
-        if (found?.children && found.children.length > 0) {
-          // 다음 레벨 탐색을 위해 현재 레벨의 옵션을 자식으로 업데이트
-          currentLevelOptions = found.children;
-          // 결과 배열의 다음 인덱스에 자식 옵션들을 저장
-          result[index + 1] = currentLevelOptions;
-        }
-      });
-    }
-
-    return result;
-  }, [activeOptions, options]);
-
-  const selectedResult = React.useMemo(() => {
-    // 선택된 옵션들 중 자식이 없는 최종 옵션들만 필터링하여 반환
-    return selectedOptions.reduce<CascaderOption[]>((acc, levelOptions) => {
-      // 현재 레벨의 옵션들 중 자식이 없는 옵션들만 필터링
-      const result = levelOptions.filter((option) => !option.children?.length);
-      // 누적된 결과와 현재 레벨의 결과를 합침
-      return [...acc, ...result];
-    }, []);
-  }, [selectedOptions]);
-
-  const selectHandler = (params: OnSelectProps) => {
-    const { option, level } = params;
-
-    const optionWithParent = {
-      ...option,
-      parentId: level > 0 ? activeOptions[level - 1]?.id : undefined,
-    };
-
-    const isSelected = selectedOptions[level]?.some(
-      (opt) => opt.id === option.id
-    );
-
-    if (isSelected) {
-      // 옵션이 선택되어 있지만 활성화되지 않은 상태이고, 자식이 있는 경우를 체크
-      const isSelectedButNotActive =
-        selectedOptions[level]?.some((opt) => opt.id === option.id) &&
-        activeOptions[level]?.id !== option.id &&
-        (option.children?.length ?? 0) > 0;
-
-      if (isSelectedButNotActive) {
-        // 선택되었지만 활성화되지 않은 옵션을 활성화
-        setActiveOptions((curr) => {
-          const newActive = [...curr];
-
-          // 현재 레벨의 옵션을 활성화하고 그 이후 레벨은 제거
-          newActive[level] = optionWithParent;
-          newActive.splice(level + 1);
-
-          return newActive;
-        });
-
-        return;
-      }
-      // 자식이 없는 최종 노드인 경우
-      if (!option.children?.length) {
-        setSelectedOptions((prev) => {
-          const newSelected = [...prev];
-          // 현재 레벨에서 선택된 옵션만 제거
-          newSelected[level] = newSelected[level].filter(
-            (opt) => opt.id !== option.id
-          );
-
-          // 특정 옵션 트리에서 선택된 최종 노드가 있는지 확인하는 재귀 함수
-          const hasSelectedEndNode = (options: CascaderOption[]): boolean => {
-            return options.some(
-              (opt) =>
-                (!opt.children?.length &&
-                  newSelected.some((level) =>
-                    level.some((selected) => selected.id === opt.id)
-                  )) ||
-                (opt.children?.length && hasSelectedEndNode(opt.children))
-            );
-          };
-
-          // 현재 레벨부터 상위 레벨로 올라가면서 유효하지 않은 부모 옵션 제거
-          for (let i = level - 1; i >= 0; i--) {
-            if (newSelected[i]) {
-              newSelected[i] = newSelected[i].filter((opt) =>
-                opt.children?.length ? hasSelectedEndNode(opt.children) : true
-              );
-            }
-          }
-
-          // 선택된 옵션이 없는 빈 레벨 제거
-          return newSelected.filter((level) => level.length > 0);
-        });
-      }
-    }
-
-    // 활성화된 옵션 상태 업데이트
-    setActiveOptions((curr) => {
-      const newActive = [...curr];
-
-      // 이미 활성화되어 있거나 선택된 옵션인 경우 해당 레벨부터 제거
-      if (curr[level]?.id === option.id || isSelected) {
-        newActive.splice(level);
-      } else {
-        // 새로운 옵션을 활성화하고 그 이후 레벨은 제거
-        newActive[level] = optionWithParent;
-        newActive.splice(level + 1);
-      }
-
-      return newActive;
-    });
-  };
-
-  interface SelectByIdHandlerProps {
-    id: string;
-  }
-
-  const selectByIdHandler = React.useCallback(
-    (params: SelectByIdHandlerProps) => {
-      const { id } = params;
-
-      setSelectedOptions((prev) => {
-        // 이미 선택된 옵션인지 확인
-        const isAlreadySelected = prev.some((level) =>
-          level.some((opt) => opt.id === id)
-        );
-
-        if (isAlreadySelected) {
-          // 선택 해제 로직
-          return prev.filter((level) => !level.some((opt) => opt.id === id));
-        } else {
-          // 새로운 옵션 선택 로직
-          const result = findOptionWithParents({ options, targetId: id });
-          if (!result) return prev;
-
-          // 부모가 이미 있는지 확인
-          const parentExists = prev[0]?.some(
-            (opt) => opt.id === result.parent.id
-          );
-
-          if (parentExists) {
-            // 부모가 이미 있으면 자식만 추가
-            return [prev[0], [...(prev[1] || []), result.target]];
-          } else {
-            // 부모가 없으면 새로운 배열 생성
-            return [[result.parent], [...(prev[1] || []), result.target]];
-          }
-        }
-      });
-    },
-    [options, findOptionWithParents]
-  );
-
-  interface ResetAllHandlerProps {
-    active?: boolean;
-    selected?: boolean;
-  }
-
-  const resetAll = React.useCallback((params?: ResetAllHandlerProps) => {
-    const { active = true, selected = true } = params ?? {};
-
-    if (active) {
-      setActiveOptions([]);
-    }
-    if (selected) {
-      setSelectedOptions([]);
-    }
-  }, []);
-
-  interface ResetSelectedByIdHandlerProps {
-    id: string;
-  }
-
-  const resetSelectedById = React.useCallback(
-    (params: ResetSelectedByIdHandlerProps) => {
-      const { id } = params;
-
-      setSelectedOptions((prev) => {
-        const newSelected = [...prev];
-
-        // 일치하는 id를 가진 옵션의 레벨과 인덱스 찾기
-        let targetLevel = -1;
-        let targetIndex = -1;
-
-        // 모든 레벨을 순회하면서 target의 위치 찾기
-        newSelected.forEach((levelOptions, level) => {
-          const foundIndex = levelOptions.findIndex((opt) => opt.id === id);
-          if (foundIndex !== -1) {
-            targetLevel = level;
-            targetIndex = foundIndex;
-          }
-        });
-
-        if (targetLevel !== -1) {
-          // 찾은 target 옵션 제거
-          const targetOption = newSelected[targetLevel][targetIndex];
-          newSelected[targetLevel].splice(targetIndex, 1);
-
-          // target의 자식 옵션들을 재귀적으로 제거하는 함수
-          const removeChildrenRecursive = (
-            parentId: string,
-            fromLevel: number
-          ) => {
-            // fromLevel부터 끝까지 순회하면서 자식 옵션들 제거
-            for (let level = fromLevel; level < newSelected.length; level++) {
-              newSelected[level] = newSelected[level].filter((opt) => {
-                const isChild =
-                  findOptionWithParents({ options, targetId: opt.id })?.parent
-                    .id !== parentId;
-                return isChild;
-              });
-            }
-          };
-
-          // target의 자식들 제거 실행
-          removeChildrenRecursive(targetOption.id, targetLevel + 1);
-
-          // 자식이 없는 부모 옵션들을 제거하는 재귀 함수
-          const removeParentIfNoChildren = (currentLevel: number) => {
-            if (currentLevel < 0) return;
-
-            const parentOptions = newSelected[currentLevel];
-            if (!parentOptions) return;
-
-            // 현재 레벨의 부모들 중 자식이 없는 옵션 제거
-            newSelected[currentLevel] = parentOptions.filter((parentOpt) => {
-              // 해당 부모의 자식이 있는지 확인
-              const hasSelectedChildren = newSelected
-                .slice(currentLevel + 1)
-                .some((levelOpts) =>
-                  levelOpts.some(
-                    (opt) =>
-                      findOptionWithParents({ options, targetId: opt.id })
-                        ?.parent.id === parentOpt.id
-                  )
-                );
-              return hasSelectedChildren;
-            });
-
-            // 상위 레벨로 올라가면서 재귀 실행
-            removeParentIfNoChildren(currentLevel - 1);
-          };
-
-          // 자식이 없는 부모 제거 실행
-          removeParentIfNoChildren(targetLevel - 1);
-
-          // 옵션이 없는 빈 레벨은 제거하고 반환
-          return newSelected.filter((level) => level.length > 0);
-        }
-
-        return newSelected;
-      });
-    },
-    [options, findOptionWithParents]
-  );
-
-  interface resetActiveOptionsHandlerProps {
-    level?: number;
-  }
-
-  const resetActiveOptions = React.useCallback(
-    (params?: resetActiveOptionsHandlerProps) => {
-      const { level = 0 } = params || {};
-
-      setActiveOptions((curr) => {
-        const newActive = [...curr];
-        newActive.splice(level, newActive.length - level);
-        return newActive;
-      });
-    },
-    []
-  );
-
-  // 선택된 옵션 추
-  React.useEffect(() => {
-    if (!multiple) {
-      const newSelected = activeOptions.map((option) => [option]);
-      setSelectedOptions(newSelected);
-      return;
-    }
-
-    // 활성화된 옵션 중 마지막 옵션 가져오기
-    const lastOption = activeOptions.at(-1);
-    // 마지막 옵션이 자식이 없는 경우에만 선택 처리
-    if (!lastOption?.children || lastOption.children?.length === 0) {
-      setSelectedOptions((prev) => {
-        const newSelected = [...prev];
-
-        // 마지막 옵션이 이미 선택되어 있는지 확인
-        const hasLastOption = prev.some((levelOptions) =>
-          levelOptions.some((opt) => opt.id === lastOption?.id)
-        );
-
-        // 활성화된 옵션들을 순회하면서 선택 상태 업데이트
-        activeOptions.forEach((active, index) => {
-          // 해당 레벨의 배열이 없으면 생성
-          if (!newSelected[index]) {
-            newSelected[index] = [];
-          }
-
-          // 마지막 레벨의 옵션 처리
-          if (index === activeOptions.length - 1) {
-            if (hasLastOption) {
-              // 이미 선택된 경우 제거
-              newSelected[index] = newSelected[index].filter(
-                (opt) => opt.id !== active.id
-              );
-            } else {
-              // 선택되지 않은 경우 추가
-              newSelected[index].push(active);
-            }
-          } else {
-            // 중간 레벨의 옵션들은 중복되지 않게 추가
-            if (!newSelected[index].some((opt) => opt.id === active.id)) {
-              newSelected[index].push(active);
-            }
-          }
-        });
-
-        // 빈 레벨 제거 후 반환
-        return newSelected.filter((level) => level.length > 0);
-      });
-    }
-  }, [activeOptions, multiple]);
-
-  const result = {
-    activeOptions,
-    selectedOptions,
-    columns,
-    selectedResult,
-    selectHandler,
-    selectByIdHandler,
-    resetAll,
-    resetSelectedById,
-    resetActiveOptions,
-  };
-
-  return result;
-}

package/src/components/Cascader/Cascader.module.scss

@@ -1,143 +0,0 @@
-.Root {
-  position: relative;
-  display: inline-flex;
-}
-
-.Menu {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  border-radius: 4px;
-  align-items: flex-start;
-}
-
-.Column {
-  --selected-option-top: 0;
-  --max-column-view: 6;
-  position: relative;
-  left: 0;
-  top: 0;
-  translate: 0 var(--selected-option-top);
-  min-width: 180px;
-  max-height: calc(40px * var(--max-column-view));
-  overflow: auto;
-  box-sizing: border-box;
-  border: 1px solid #e8e8e9;
-  background: #fff;
-  margin-left: -1px;
-  display: flex;
-  flex-direction: column;
-  overscroll-behavior: contain;
-
-  &.columnOpenAnimation {
-    transition: translate 0.2s ease-in-out;
-  }
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #e8e8e9;
-    border-radius: 2px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: #d1d1d1;
-  }
-
-  &:first-child {
-    border-radius: 4px 0 0 4px;
-    margin-left: 0;
-  }
-
-  &:last-child {
-    border-radius: 0 4px 4px 0;
-  }
-}
-
-.Item {
-  --item-height: 40px;
-
-  height: var(--item-height);
-  box-sizing: border-box;
-  padding: 8px 12px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  &:hover {
-    background-color: #f5f5f5;
-  }
-
-  &.title {
-    font-weight: bold;
-    cursor: default;
-    background-color: transparent;
-
-    &:hover {
-      background-color: transparent;
-    }
-  }
-
-  &.divider {
-    height: 1px;
-    background-color: #e8e8e9;
-    cursor: default;
-    padding: 0;
-    margin: 8px 0;
-    flex-shrink: 0;
-
-    &:hover {
-      background-color: #e8e8e9;
-    }
-  }
-
-  &.isSelected {
-    font-weight: 500;
-    color: #688dee;
-    .GoNext {
-      & > path {
-        fill: #688dee;
-      }
-    }
-  }
-
-  &.disabled {
-    color: #ccc;
-    cursor: not-allowed;
-    .GoNext {
-      & > path {
-        fill: #ccc;
-      }
-    }
-
-    &:hover {
-      background-color: transparent;
-    }
-  }
-
-  .ItemText {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: calc(180px - 56px);
-    flex-shrink: 0;
-  }
-}
-
-.GoNext {
-  flex-shrink: 0;
-
-  &.isSelected {
-    path {
-      fill: #688dee;
-    }
-  }
-}