@uniai-fe/uds-primitives 0.1.13 → 0.2.0

package/src/components/select/markup/foundation/Icon.tsx

@@ -0,0 +1,78 @@
+import ChevronPrimarySmall from "../../img/chevron/primary/small.svg";
+import ChevronPrimaryMedium from "../../img/chevron/primary/medium.svg";
+import ChevronPrimaryLarge from "../../img/chevron/primary/large.svg";
+import ChevronSecondarySmall from "../../img/chevron/secondary/small.svg";
+import ChevronSecondaryMedium from "../../img/chevron/secondary/medium.svg";
+import ChevronSecondaryLarge from "../../img/chevron/secondary/large.svg";
+
+import Remove from "../../img/remove.svg";
+import type {
+  SelectIconCollection,
+  SelectIconPriorityMap,
+  SelectIconRemovePriorityMap,
+  SelectIconSizeMap,
+} from "../../types/icon";
+
+/**
+ * Select; Chevron 아이콘 - primary
+ * - small
+ * - medium
+ * - large
+ */
+const SelectChevronPrimaryIcon: SelectIconSizeMap = {
+  small: ChevronPrimarySmall,
+  medium: ChevronPrimaryMedium,
+  large: ChevronPrimaryLarge,
+};
+
+/**
+ * Select; Chevron 아이콘 - secondary
+ * - small
+ * - medium
+ * - large
+ */
+const SelectChevronSecondaryIcon: SelectIconSizeMap = {
+  small: ChevronSecondarySmall,
+  medium: ChevronSecondaryMedium,
+  large: ChevronSecondaryLarge,
+};
+
+/**
+ * Select; Chevron 아이콘 컬렉션
+ * - primary (small, medium, large)
+ * - secondary (small, medium, large)
+ */
+const SelectChevronIcon: SelectIconPriorityMap = {
+  primary: SelectChevronPrimaryIcon,
+  secondary: SelectChevronSecondaryIcon,
+};
+
+/**
+ * Select; Remove 아이콘 - primary
+ * - small
+ * - medium
+ * - large
+ */
+const SelectMultipleRemoveIcon: SelectIconSizeMap = {
+  small: Remove,
+  medium: Remove,
+  large: Remove,
+};
+
+/**
+ * Select; Remove 아이콘 컬렉션
+ * - primary (small, medium, large)
+ */
+const SelectRemoveIcon: SelectIconRemovePriorityMap = {
+  primary: SelectMultipleRemoveIcon,
+};
+
+/**
+ * Select svgr 아이콘 레지스트리
+ * @property {SelectIconPriorityMap} Chevron priority/size별 Chevron 세트
+ * @property {SelectIconRemovePriorityMap} Remove multi select remove 세트
+ */
+export const SelectIcon: SelectIconCollection = {
+  Chevron: SelectChevronIcon,
+  Remove: SelectRemoveIcon,
+};

package/src/components/select/markup/foundation/Selected.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import clsx from "clsx";
+import type { SelectSelectedProps } from "../../types/trigger";
+
+/**
+ * Select trigger label renderer
+ * @component
+ * @param {SelectSelectedProps} props selected view props
+ * @param {React.ReactNode} [props.label] 선택된 라벨
+ * @param {React.ReactNode} [props.placeholder] placeholder 텍스트
+ * @param {boolean} [props.isPlaceholder] placeholder 스타일 활성 여부
+ */
+const SelectTriggerSelected = ({
+  label,
+  placeholder,
+  isPlaceholder,
+}: SelectSelectedProps) => {
+  return (
+    <div className="select-value">
+      <span
+        className={clsx("select-label", {
+          "select-label-placeholder": isPlaceholder,
+        })}
+      >
+        {label ?? placeholder}
+      </span>
+    </div>
+  );
+};
+
+SelectTriggerSelected.displayName = "SelectSelected";
+
+export { SelectTriggerSelected };

package/src/components/select/markup/foundation/index.ts

@@ -0,0 +1,2 @@
+export { SelectTriggerBase } from "./Base";
+export { SelectTriggerSelected } from "./Selected";

package/src/components/select/markup/index.tsx

@@ -1,4 +1,38 @@
+import { SelectDefault } from "./Default";
+import { SelectMultipleSelectedChip, SelectMultipleTrigger } from "./multiple";
+import { SelectTriggerBase, SelectTriggerSelected } from "./foundation";
+import SelectContainer from "./foundation/Container";
+
 /**
- * TODO(select): SOT 및 사용자 제약에 따라 컴포넌트를 구현한다.
+ * Selec; 컴포넌트 모듈
+ * @namespace Select
+ * - <Select.Default />: Select 기본
+ * - <Select.Multiple />: Select multi select
+ * - <Select.Container />: Select wrapper
+ * - <Select.Trigger.Base />: Select trigger 컴포넌트
+ * - <Select.Selected.Base />: Selected 기본 컴포넌트
+ * - <Select.Selected.Multiple />: Selected multi select 컴포넌트
  */
-export {};
+export const Select = {
+  Default: SelectDefault,
+  Multiple: SelectMultipleTrigger,
+  Container: SelectContainer,
+  /**
+   * Select Trigger 컴포넌트 모듈
+   * @namespace Select.Trigger
+   * - <Select.Trigger.Base />: Select trigger 컴포넌트
+   */
+  Trigger: {
+    Base: SelectTriggerBase,
+  },
+  /**
+   * Select Selected 컴포넌트 모듈
+   * @namespace Select.Selected
+   * - <Select.Selected.Base />: Selected 기본 컴포넌트
+   * - <Select.Selected.Multiple />: Selected multi select 컴포넌트
+   */
+  Selected: {
+    Base: SelectTriggerSelected,
+    Multiple: SelectMultipleSelectedChip,
+  },
+};

package/src/components/select/markup/multiple/Multiple.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import clsx from "clsx";
+import { forwardRef, useMemo } from "react";
+
+import Container from "../foundation/Container";
+import { Dropdown } from "../../../dropdown/markup";
+import type { DropdownSize } from "../../../dropdown/types";
+import type { SelectMultipleComponentProps } from "../../types/props";
+import type { SelectMultipleTag } from "../../types/multiple";
+import { SelectMultipleSelectedChip } from "./SelectedChip";
+import { SelectTriggerBase, SelectTriggerSelected } from "../foundation";
+import { useSelectDropdownOpenState } from "../../hooks";
+
+/**
+ * Select trigger for multi select; 선택된 tag들을 chip 형태로 렌더링한다.
+ * @component
+ * @param {SelectMultipleComponentProps} props multi trigger props
+ * @param {SelectMultipleTag[]} [props.tags] 선택된 tag 리스트
+ * @param {React.ReactNode} [props.displayLabel] fallback 라벨
+ * @param {React.ReactNode} [props.placeholder] placeholder 텍스트
+ * @param {"primary" | "secondary"} [props.priority="primary"] priority scale
+ * @param {"small" | "medium" | "large"} [props.size="medium"] size scale
+ * @param {boolean} [props.block] block 여부
+ * @param {boolean} [props.isOpen] dropdown open 여부
+ * @param {boolean} [props.disabled] disabled 여부
+ */
+const SelectMultipleTrigger = forwardRef<
+  HTMLElement,
+  SelectMultipleComponentProps
+>(
+  (
+    {
+      className,
+      displayLabel,
+      placeholder,
+      priority = "primary",
+      size = "medium",
+      state = "default",
+      block,
+      isOpen,
+      disabled,
+      tags,
+      options = [],
+      selectedOptionIds,
+      onOptionSelect,
+      dropdownSize,
+      dropdownMatchTriggerWidth = true,
+      dropdownRootProps,
+      dropdownContainerProps,
+      dropdownMenuListProps,
+      open,
+      defaultOpen,
+      onOpenChange,
+      ...rest
+    },
+    ref,
+  ) => {
+    // hook dependency 안정화를 위해 memoized selected id 배열을 유지한다.
+    const resolvedSelectedIds = useMemo(
+      () => selectedOptionIds ?? [],
+      [selectedOptionIds],
+    );
+
+    const resolvedDisplayLabel =
+      displayLabel ??
+      (resolvedSelectedIds.length > 0
+        ? options.find(option => option.id === resolvedSelectedIds[0])?.label
+        : undefined);
+
+    const derivedTags = useMemo<SelectMultipleTag[]>(() => {
+      if (tags && tags.length > 0) {
+        return tags;
+      }
+
+      if (options.length === 0 || resolvedSelectedIds.length === 0) {
+        return [];
+      }
+
+      return resolvedSelectedIds
+        .map(id => options.find(option => option.id === id))
+        .filter((option): option is NonNullable<typeof option> =>
+          Boolean(option),
+        )
+        .map(option => ({
+          label: option.label,
+          removable: false,
+        }));
+    }, [tags, options, resolvedSelectedIds]);
+
+    const hasTags = derivedTags.length > 0;
+    const hasLabel =
+      resolvedDisplayLabel !== undefined &&
+      resolvedDisplayLabel !== null &&
+      resolvedDisplayLabel !== "";
+
+    const { open: dropdownOpen, setOpen } = useSelectDropdownOpenState({
+      open: open ?? isOpen,
+      defaultOpen,
+      onOpenChange,
+    });
+    // multi select에서도 동일한 open 상태를 유지하기 위해 공통 hook을 사용한다.
+
+    const panelSize = (dropdownSize ?? size) as DropdownSize;
+    const shouldRenderDropdown = options.length > 0;
+    const MAX_VISIBLE_TAGS = 3;
+    const visibleTags = hasTags ? derivedTags.slice(0, MAX_VISIBLE_TAGS) : [];
+    const overflowCount = hasTags
+      ? Math.max(derivedTags.length - visibleTags.length, 0)
+      : 0;
+
+    return (
+      <Container
+        className={clsx("select-trigger-multiple", className)}
+        block={block}
+      >
+        <Dropdown.Root
+          open={dropdownOpen}
+          onOpenChange={setOpen}
+          modal={false}
+          {...dropdownRootProps}
+        >
+          {/* Select trigger와 Dropdown trigger를 결합해 동일한 DOM을 공유한다. */}
+          <Dropdown.Trigger asChild>
+            <SelectTriggerBase
+              ref={ref}
+              priority={priority}
+              size={size}
+              state={disabled ? "disabled" : state}
+              block={block}
+              open={dropdownOpen}
+              multiple
+              disabled={disabled}
+              as="div"
+              {...rest}
+            >
+              {hasTags ? (
+                <div className="select-tags">
+                  {visibleTags.map(
+                    ({ label, suffix, removable, onRemove }, index) => (
+                      <SelectMultipleSelectedChip
+                        key={`select-tag-${index}`}
+                        label={label}
+                        suffix={suffix}
+                        removable={removable}
+                        onRemove={onRemove}
+                      />
+                    ),
+                  )}
+                  {overflowCount > 0 ? (
+                    <SelectMultipleSelectedChip
+                      label={`+${overflowCount}`}
+                      removable={false}
+                      kind="summary"
+                    />
+                  ) : null}
+                </div>
+              ) : (
+                <SelectTriggerSelected
+                  label={resolvedDisplayLabel}
+                  placeholder={placeholder}
+                  isPlaceholder={!hasLabel}
+                />
+              )}
+            </SelectTriggerBase>
+          </Dropdown.Trigger>
+          {shouldRenderDropdown ? (
+            <Dropdown.Container
+              {...dropdownContainerProps}
+              size={panelSize}
+              matchTriggerWidth={dropdownMatchTriggerWidth}
+            >
+              <Dropdown.Menu.List {...dropdownMenuListProps}>
+                {/* multi select 전용 옵션을 Dropdown.Menu.Item으로 노출한다. */}
+                {options.map(option => (
+                  <Dropdown.Menu.Item
+                    key={option.id}
+                    label={option.label}
+                    description={option.description}
+                    disabled={option.disabled}
+                    leftSlot={option.leftSlot}
+                    rightSlot={option.rightSlot}
+                    multiple
+                    isSelected={resolvedSelectedIds.includes(option.id)}
+                    onSelect={event => {
+                      if (option.disabled) {
+                        event.preventDefault();
+                        return;
+                      }
+                      onOptionSelect?.(option);
+                    }}
+                  />
+                ))}
+              </Dropdown.Menu.List>
+            </Dropdown.Container>
+          ) : null}
+        </Dropdown.Root>
+      </Container>
+    );
+  },
+);
+
+SelectMultipleTrigger.displayName = "SelectMultipleTrigger";
+
+export { SelectMultipleTrigger };

package/src/components/select/markup/multiple/SelectedChip.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import clsx from "clsx";
+
+import RemoveIcon from "../../img/remove.svg";
+import type { SelectMultipleChipProps } from "../../types/multiple";
+
+/**
+ * Select multi chip; 선택된 값을 chip 형태로 표시하고 필요 시 제거 버튼을 노출한다.
+ * @component
+ * @param {SelectMultipleChipProps} props chip props
+ * @param {React.ReactNode} props.label chip 라벨
+ * @param {React.ReactNode} [props.suffix] 라벨 뒤에 붙는 서브 라벨
+ * @param {boolean} [props.removable] remove 버튼 노출 여부
+ * @param {() => void} [props.onRemove] remove 클릭 핸들러
+ */
+export function SelectMultipleSelectedChip({
+  label,
+  suffix,
+  removable = true,
+  onRemove,
+  kind = "value",
+}: SelectMultipleChipProps) {
+  const isRemovable = removable && typeof onRemove === "function";
+  const handleRemove = () => {
+    if (isRemovable) {
+      onRemove?.();
+    }
+  };
+
+  return (
+    <div
+      className={clsx("select-tag", {
+        "select-tag-removable": isRemovable,
+        "select-tag-summary": kind === "summary",
+      })}
+      data-removable={isRemovable ? "true" : undefined}
+      data-kind={kind}
+    >
+      <span className="select-tag-label">
+        {label}
+        {suffix && <span className="select-tag-suffix">{suffix}</span>}
+      </span>
+      {isRemovable ? (
+        <button
+          type="button"
+          className="select-tag-remove"
+          aria-label="remove tag"
+          onClick={handleRemove}
+        >
+          <RemoveIcon width={16} height={16} />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+SelectMultipleSelectedChip.displayName = "SelectMultipleSelectedChip";

package/src/components/select/markup/multiple/index.ts

@@ -0,0 +1,2 @@
+export { SelectMultipleTrigger } from "./Multiple";
+export { SelectMultipleSelectedChip } from "./SelectedChip";