@uniai-fe/uds-primitives 0.1.12 → 0.2.0

package/src/components/dropdown/markup/foundation/MenuItem.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import clsx from "clsx";
+import { forwardRef } from "react";
+
+import type { DropdownMenuItemProps } from "../../types/props";
+import { Checkbox } from "../../../checkbox/markup/Checkbox";
+import type { CheckboxProps } from "../../../checkbox/types";
+
+/**
+ * Dropdown menu item; label/description/slot 구성을 처리한다.
+ * @component
+ * @param {DropdownMenuItemProps} props dropdown menu option props
+ * @param {boolean} [props.isSelected] 선택 상태
+ * @param {boolean} [props.multiple] multi select 스타일 여부
+ */
+const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
+  (
+    {
+      label,
+      description,
+      leftSlot,
+      rightSlot,
+      isSelected = false,
+      multiple = false,
+      className,
+      checkboxProps,
+      children,
+      onSelect: onSelectHandler,
+      ...rest
+    },
+    ref,
+  ) => {
+    const labelContent = label ?? children;
+    const hasDescription = Boolean(description);
+    const shouldRenderCheckbox = multiple && !leftSlot;
+
+    const renderPrefix = () => {
+      if (shouldRenderCheckbox) {
+        const checkboxClassName = clsx(
+          "dropdown-menu-item-checkbox",
+          checkboxProps?.className,
+        );
+
+        const checkboxAdditionalProps: CheckboxProps = {
+          ...checkboxProps,
+          checked: isSelected,
+          onCheckedChange: checkboxProps?.onCheckedChange ?? (() => {}),
+          tabIndex: -1,
+          "aria-hidden": true,
+          className: checkboxClassName,
+        } as CheckboxProps;
+
+        return (
+          <span className="dropdown-menu-item-prefix" aria-hidden="true">
+            <Checkbox size="medium" {...checkboxAdditionalProps} />
+          </span>
+        );
+      }
+
+      if (leftSlot) {
+        return <span className="dropdown-menu-item-prefix">{leftSlot}</span>;
+      }
+
+      return null;
+    };
+
+    return (
+      <li className="dropdown-menu-item">
+        <DropdownMenu.Item
+          {...rest}
+          ref={ref}
+          className={clsx("dropdown-menu-item-trigger", className)}
+          data-state={isSelected ? "selected" : undefined}
+          data-multiple={multiple ? "true" : undefined}
+          data-has-description={hasDescription ? "true" : undefined}
+          onSelect={event => {
+            if (multiple) {
+              event.preventDefault();
+            }
+            onSelectHandler?.(event);
+          }}
+        >
+          {renderPrefix()}
+          <span className="dropdown-menu-item-body">
+            {labelContent ? (
+              <span className="dropdown-menu-item-label">{labelContent}</span>
+            ) : null}
+            {description ? (
+              <span className="dropdown-menu-item-description">
+                {description}
+              </span>
+            ) : null}
+          </span>
+          {rightSlot ? (
+            <span className="dropdown-menu-item-suffix">{rightSlot}</span>
+          ) : null}
+        </DropdownMenu.Item>
+      </li>
+    );
+  },
+);
+
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+export default DropdownMenuItem;

package/src/components/dropdown/markup/foundation/MenuList.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import clsx from "clsx";
+import { forwardRef } from "react";
+
+import type { DropdownMenuListProps } from "../../types/props";
+
+/**
+ * Dropdown option list wrapper
+ * @component
+ * @param {DropdownMenuListProps} props list attributes
+ */
+const DropdownMenuList = forwardRef<HTMLUListElement, DropdownMenuListProps>(
+  ({ className, ...rest }, ref) => {
+    return (
+      <ul
+        {...rest}
+        ref={ref}
+        className={clsx("dropdown-menu-list", className)}
+      />
+    );
+  },
+);
+
+DropdownMenuList.displayName = "DropdownMenuList";
+
+export default DropdownMenuList;

package/src/components/dropdown/markup/foundation/Provider.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from "react";
+
+import type { DropdownContextValue } from "../../types";
+
+/**
+ * Dropdown 전용 context; trigger ref를 공유한다.
+ */
+const DropdownContext = createContext<DropdownContextValue | null>(null);
+
+/**
+ * Dropdown context provider
+ * @component
+ * @param {ReactNode} props.children dropdown 하위 노드
+ */
+const DropdownProvider = ({ children }: { children: ReactNode }) => {
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const value = useMemo<DropdownContextValue>(() => ({ triggerRef }), []);
+
+  return (
+    <DropdownContext.Provider value={value}>
+      {children}
+    </DropdownContext.Provider>
+  );
+};
+
+/**
+ * Dropdown context hook; scope 내에서만 호출해야 한다.
+ * @param {string} componentName 오류 메시지용 컴포넌트 명
+ */
+const useDropdownContext = (componentName: string) => {
+  const context = useContext(DropdownContext);
+  if (!context) {
+    throw new Error(`${componentName} must be used within Dropdown.Container`);
+  }
+  return context;
+};
+
+export { DropdownContext, DropdownProvider, useDropdownContext };

package/src/components/dropdown/markup/foundation/Root.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import type { ReactNode } from "react";
+
+import type { DropdownRootProps } from "../../types/base";
+import { DropdownProvider } from "./Provider";
+
+/**
+ * Dropdown root; Provider와 Radix Root를 래핑한다.
+ * @component
+ * @param {DropdownRootProps} props Dropdown Root props
+ * @param {ReactNode} props.children Dropdown 하위 node
+ * @param {boolean} [props.modal=false] Radix modal 모드
+ */
+const DropdownRoot = ({
+  children,
+  modal = false,
+  ...rootProps
+}: DropdownRootProps & { children: ReactNode }) => {
+  return (
+    <DropdownProvider>
+      <DropdownMenu.Root modal={modal} {...rootProps}>
+        {children}
+      </DropdownMenu.Root>
+    </DropdownProvider>
+  );
+};
+
+export default DropdownRoot;

package/src/components/dropdown/markup/foundation/Trigger.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { forwardRef } from "react";
+
+import type { DropdownTriggerProps } from "../../types/props";
+import { mergeRefs } from "../../utils";
+import { useDropdownContext } from "./Provider";
+
+/**
+ * Dropdown trigger; trigger ref를 context에 공유한다.
+ * @component
+ * @param {DropdownTriggerProps} props Dropdown trigger props
+ * @param {boolean} [props.asChild=true] asChild 패턴 유지 여부
+ */
+const DropdownTrigger = forwardRef<HTMLElement, DropdownTriggerProps>(
+  ({ asChild = true, children, ...rest }, ref) => {
+    const { triggerRef } = useDropdownContext("Dropdown.Trigger");
+
+    return (
+      <DropdownMenu.Trigger
+        {...rest}
+        asChild={asChild}
+        ref={mergeRefs(ref, triggerRef)}
+      >
+        {children}
+      </DropdownMenu.Trigger>
+    );
+  },
+);
+
+DropdownTrigger.displayName = "DropdownTrigger";
+
+export default DropdownTrigger;

package/src/components/dropdown/markup/foundation/index.tsx

@@ -0,0 +1,25 @@
+import DropdownContainer from "./Container";
+import DropdownMenuItem from "./MenuItem";
+import DropdownMenuList from "./MenuList";
+import DropdownRoot from "./Root";
+import { DropdownProvider } from "./Provider";
+import DropdownTrigger from "./Trigger";
+
+/**
+ * Dropdown; 기초 컴포넌트
+ * - Provider
+ * - Root
+ * - Container
+ * - Menu
+ *     - Item
+ *     - List
+ * - Panel
+ * - Trigger
+ */
+export const DropdownFoundation = {
+  Provider: DropdownProvider,
+  Root: DropdownRoot,
+  Container: DropdownContainer,
+  Menu: { Item: DropdownMenuItem, List: DropdownMenuList },
+  Trigger: DropdownTrigger,
+};

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

@@ -1,4 +1,10 @@
+import { DropdownFoundation } from "./foundation";
+import DropdownTemplate from "./Template";
+
 /**
- * TODO(dropdown): SOT 및 사용자 제약에 따라 컴포넌트를 구현한다.
+ * Dropdown namespace export
  */
-export {};
+export const Dropdown = {
+  ...DropdownFoundation,
+  Template: DropdownTemplate,
+};

package/src/components/dropdown/styles/dropdown.scss

@@ -0,0 +1,166 @@
+.dropdown-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dropdown-panel-gap);
+  padding: var(--dropdown-panel-padding);
+  border-radius: var(--dropdown-panel-radius);
+  border: 1px solid var(--dropdown-panel-border-color);
+  background-color: var(--dropdown-panel-background);
+  box-shadow: var(--dropdown-panel-shadow);
+  max-height: var(--dropdown-panel-max-height);
+  overflow-y: auto;
+}
+
+.dropdown-panel-small {
+  --dropdown-option-height-current: var(--dropdown-option-height-small);
+  --dropdown-text-size-current: var(--dropdown-text-small-size);
+  --dropdown-text-line-height-current: var(--dropdown-text-small-line-height);
+  --dropdown-text-letter-spacing-current: var(
+    --dropdown-text-small-letter-spacing
+  );
+}
+
+.dropdown-panel-medium {
+  --dropdown-option-height-current: var(--dropdown-option-height-medium);
+  --dropdown-text-size-current: var(--dropdown-text-medium-size);
+  --dropdown-text-line-height-current: var(--dropdown-text-medium-line-height);
+  --dropdown-text-letter-spacing-current: var(
+    --dropdown-text-medium-letter-spacing
+  );
+}
+
+.dropdown-panel-large {
+  --dropdown-option-height-current: var(--dropdown-option-height-large);
+  --dropdown-text-size-current: var(--dropdown-text-large-size);
+  --dropdown-text-line-height-current: var(--dropdown-text-large-line-height);
+  --dropdown-text-letter-spacing-current: var(
+    --dropdown-text-large-letter-spacing
+  );
+}
+
+.dropdown-menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dropdown-panel-gap);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.dropdown-menu-item {
+  width: 100%;
+}
+
+.dropdown-menu-item-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--dropdown-option-gap-inline);
+  width: 100%;
+  min-height: var(
+    --dropdown-option-height-current,
+    var(--dropdown-option-height-medium)
+  );
+  padding: var(--dropdown-option-padding-block)
+    var(--dropdown-option-padding-inline);
+  border-radius: var(--dropdown-option-radius);
+  background-color: transparent;
+  color: var(--dropdown-option-color);
+  cursor: pointer;
+  font-size: var(--dropdown-option-font-size, var(--dropdown-text-medium-size));
+  font-weight: var(--dropdown-option-font-weight, var(--dropdown-text-weight));
+  line-height: var(
+    --dropdown-option-line-height,
+    var(--dropdown-text-medium-line-height)
+  );
+
+  &[data-state="selected"] {
+    background-color: var(--dropdown-option-bg-selected);
+    color: var(--dropdown-option-color-selected);
+  }
+
+  &[data-highlighted],
+  &:hover {
+    background-color: var(--dropdown-option-bg-hover);
+    color: var(--dropdown-option-color-hover);
+  }
+
+  &[data-state="selected"]:hover {
+    background-color: var(--dropdown-option-bg-selected);
+    color: var(--dropdown-option-color-selected);
+  }
+
+  &[data-disabled],
+  &:disabled {
+    color: var(--dropdown-option-color-disabled);
+    cursor: not-allowed;
+    background-color: var(--dropdown-option-bg-disabled);
+  }
+
+  &[data-disabled] .dropdown-menu-item-label,
+  &:disabled .dropdown-menu-item-label {
+    color: var(--dropdown-option-color-disabled);
+  }
+
+  &[data-disabled] .dropdown-menu-item-description,
+  &:disabled .dropdown-menu-item-description {
+    color: var(--dropdown-option-color-disabled);
+  }
+}
+
+.dropdown-menu-item-prefix,
+.dropdown-menu-item-suffix {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+}
+
+.dropdown-menu-item-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.dropdown-menu-item-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  color: inherit;
+  font-size: var(
+    --dropdown-text-size-current,
+    var(--dropdown-text-medium-size)
+  );
+  line-height: var(
+    --dropdown-text-line-height-current,
+    var(--dropdown-text-medium-line-height)
+  );
+  letter-spacing: var(
+    --dropdown-text-letter-spacing-current,
+    var(--dropdown-text-medium-letter-spacing)
+  );
+  font-weight: var(--dropdown-text-weight);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropdown-menu-item-description {
+  font-size: var(--dropdown-description-size);
+  line-height: var(--dropdown-description-line-height);
+  color: var(--dropdown-description-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dropdown-menu-item-trigger[data-state="selected"] .dropdown-menu-item-label {
+  font-weight: var(--dropdown-text-weight-selected);
+}
+.dropdown-menu-item-trigger[data-multiple="true"] {
+  align-items: center;
+}
+.dropdown-menu-item-checkbox {
+  width: var(--theme-checkbox-frame-size-medium);
+  height: var(--theme-checkbox-frame-size-medium);
+  padding: 0;
+}

package/src/components/dropdown/styles/index.scss

@@ -0,0 +1,2 @@
+@use "./variables.scss";
+@use "./dropdown.scss";

package/src/components/dropdown/styles/variables.scss

@@ -0,0 +1,40 @@
+:root {
+  --dropdown-panel-background: var(--color-common-100);
+  --dropdown-panel-border-color: var(--color-border-standard-cool-gray);
+  --dropdown-panel-radius: var(--theme-radius-large-1);
+  --dropdown-panel-shadow: 0px 4px 22px rgba(19, 22, 32, 0.12);
+  --dropdown-panel-padding: var(--spacing-padding-3);
+  --dropdown-panel-gap: var(--spacing-gap-2);
+  --dropdown-panel-max-height: 32rem;
+
+  --dropdown-option-radius: var(--theme-radius-medium-1);
+  --dropdown-option-gap-inline: var(--spacing-gap-3);
+  --dropdown-option-padding-inline: var(--spacing-padding-6);
+  --dropdown-option-padding-block: var(--spacing-padding-2);
+  --dropdown-option-color: var(--color-label-standard);
+  --dropdown-option-color-hover: var(--color-label-strong);
+  --dropdown-option-color-selected: var(--color-primary-default);
+  --dropdown-option-color-disabled: var(--color-label-disabled);
+  --dropdown-option-bg-hover: var(--color-surface-standard);
+  --dropdown-option-bg-selected: var(--color-surface-static-blue);
+  --dropdown-option-bg-disabled: transparent;
+
+  --dropdown-text-small-size: 15px;
+  --dropdown-text-small-line-height: 24px;
+  --dropdown-text-small-letter-spacing: 0;
+  --dropdown-text-medium-size: 16px;
+  --dropdown-text-medium-line-height: 24px;
+  --dropdown-text-medium-letter-spacing: 0;
+  --dropdown-text-large-size: 17px;
+  --dropdown-text-large-line-height: 26px;
+  --dropdown-text-large-letter-spacing: 0;
+  --dropdown-text-weight: 400;
+  --dropdown-text-weight-selected: 600;
+  --dropdown-description-color: var(--color-label-neutral);
+  --dropdown-description-size: 14px;
+  --dropdown-description-line-height: 22px;
+
+  --dropdown-option-height-small: 32px;
+  --dropdown-option-height-medium: 40px;
+  --dropdown-option-height-large: 48px;
+}

package/src/components/dropdown/types/base.ts

@@ -0,0 +1,18 @@
+import type { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
+
+/**
+ * Dropdown size scale
+ * @typedef {"small" | "medium" | "large"} DropdownSize
+ */
+export type DropdownSize = "small" | "medium" | "large";
+
+/**
+ * Dropdown root props
+ * @property {boolean} [modal] Radix modal 모드 여부
+ */
+export interface DropdownRootProps extends DropdownMenuProps {
+  /**
+   * Radix modal 모드 여부
+   */
+  modal?: DropdownMenuProps["modal"];
+}

package/src/components/dropdown/types/index.ts

@@ -1,4 +1,2 @@
-/**
- * TODO(dropdown): variant/slot 타입 정의를 작성한다.
- */
-export {};
+export type * from "./base";
+export type * from "./props";

package/src/components/dropdown/types/props.ts

@@ -0,0 +1,174 @@
+import type {
+  DropdownMenuContentProps,
+  DropdownMenuItemProps as RadixDropdownMenuItemProps,
+  DropdownMenuTriggerProps,
+} from "@radix-ui/react-dropdown-menu";
+import type { HTMLAttributes, MutableRefObject, ReactNode } from "react";
+
+import type { CheckboxProps } from "../../checkbox/types";
+import type { DropdownRootProps, DropdownSize } from "./base";
+
+/**
+ * Dropdown trigger props
+ * @property {boolean} [asChild=true] trigger를 asChild 패턴으로 감쌀지 여부
+ */
+export interface DropdownTriggerProps extends DropdownMenuTriggerProps {
+  /**
+   * trigger를 asChild 패턴으로 감쌀지 여부
+   */
+  asChild?: DropdownMenuTriggerProps["asChild"];
+}
+
+/**
+ * Dropdown Container props
+ * @property {DropdownSize} [size="medium"] option 높이 스케일
+ * @property {boolean} [matchTriggerWidth=true] trigger 너비에 맞춰 dropdown 너비를 맞출지 여부
+ * @property {HTMLElement | null} [portalContainer] portal을 렌더링할 DOM 컨테이너
+ */
+export interface DropdownContainerProps extends DropdownMenuContentProps {
+  /**
+   * option 높이 스케일
+   */
+  size?: DropdownSize;
+  /**
+   * trigger 너비에 맞춰 dropdown 너비를 맞출지 여부
+   */
+  matchTriggerWidth?: boolean;
+  /**
+   * portal을 렌더링할 DOM 컨테이너
+   */
+  portalContainer?: HTMLElement | null;
+}
+
+/**
+ * Dropdown menu item props
+ * @property {ReactNode} [label] 옵션 라벨
+ * @property {ReactNode} [description] 보조 텍스트
+ * @property {ReactNode} [leftSlot] 좌측 슬롯
+ * @property {ReactNode} [rightSlot] 우측 슬롯
+ * @property {boolean} [isSelected] 선택 상태 여부
+ * @property {boolean} [multiple] multi select 스타일 여부
+ * @property {CheckboxProps} [checkboxProps] multiple 시 Checkbox 커스터마이징 옵션
+ */
+export interface DropdownMenuItemProps extends RadixDropdownMenuItemProps {
+  /**
+   * 옵션 라벨
+   */
+  label?: ReactNode;
+  /**
+   * 보조 텍스트
+   */
+  description?: ReactNode;
+  /**
+   * 좌측 슬롯
+   */
+  leftSlot?: ReactNode;
+  /**
+   * 우측 슬롯
+   */
+  rightSlot?: ReactNode;
+  /**
+   * 선택 상태 여부
+   */
+  isSelected?: boolean;
+  /**
+   * multi select 스타일 여부
+   */
+  multiple?: boolean;
+  /**
+   * Checkbox 커스터마이징 props
+   */
+  checkboxProps?: CheckboxProps;
+}
+
+/**
+ * Dropdown menu list props
+ */
+export interface DropdownMenuListProps extends HTMLAttributes<HTMLUListElement> {}
+
+/**
+ * Dropdown context value; trigger ref 공유용
+ * @property {React.MutableRefObject<HTMLElement | null>} triggerRef trigger DOM ref
+ */
+export interface DropdownContextValue {
+  /**
+   * trigger DOM ref
+   */
+  triggerRef: MutableRefObject<HTMLElement | null>;
+}
+
+/**
+ * Dropdown template item
+ * @property {string} id 고유 식별자
+ * @property {ReactNode} label 옵션 라벨
+ * @property {ReactNode} [description] 보조 텍스트
+ * @property {boolean} [disabled] 비활성 여부
+ * @property {ReactNode} [leftSlot] 좌측 슬롯
+ * @property {ReactNode} [rightSlot] 우측 슬롯
+ * @property {boolean} [multiple] multi select 스타일 여부
+ */
+export interface DropdownTemplateItem {
+  /**
+   * 고유 식별자
+   */
+  id: string;
+  /**
+   * 옵션 라벨
+   */
+  label: ReactNode;
+  /**
+   * 보조 텍스트
+   */
+  description?: ReactNode;
+  /**
+   * 비활성 여부
+   */
+  disabled?: boolean;
+  /**
+   * 좌측 슬롯
+   */
+  leftSlot?: ReactNode;
+  /**
+   * 우측 슬롯
+   */
+  rightSlot?: ReactNode;
+  /**
+   * multi select 스타일 여부
+   */
+  multiple?: boolean;
+}
+
+/**
+ * Dropdown template props
+ * @property {ReactNode} trigger trigger 요소
+ * @property {DropdownTemplateItem[]} items 렌더링할 menu item 리스트
+ * @property {string[]} [selectedIds] 선택된 item id 배열
+ * @property {DropdownSize} [size="medium"] surface height scale
+ * @property {boolean} [matchTriggerWidth=true] trigger width 동기화 여부
+ * @property {DropdownRootProps} [rootProps] Root 에 전달할 props
+ * @property {DropdownContainerProps} [containerProps] Container 에 전달할 props
+ * @property {DropdownMenuListProps} [menuListProps] MenuList 에 전달할 props
+ */
+export interface DropdownTemplateProps {
+  trigger: ReactNode;
+  items: DropdownTemplateItem[];
+  selectedIds?: string[];
+  onSelect?: (item: DropdownTemplateItem) => void;
+  size?: DropdownSize;
+  matchTriggerWidth?: boolean;
+  /**
+   * Root 에 전달할 props
+   */
+  rootProps?: DropdownRootProps;
+  /**
+   * Container 에 전달할 props
+   */
+  containerProps?: Omit<
+    DropdownContainerProps,
+    "children" | "size" | "matchTriggerWidth"
+  >;
+  /**
+   * MenuList 에 전달할 props
+   */
+  menuListProps?: DropdownMenuListProps;
+}