@simplysm/solid 13.0.0-beta.6

package/src/components/data/list/List.tsx

@@ -0,0 +1,184 @@
+import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { ListContext, useListContext } from "./ListContext";
+import { ListItem } from "./ListItem";
+
+const baseClass = clsx("inline-flex flex-col rounded-md");
+
+const rootClass = clsx("border border-base-300 bg-base-50 p-px dark:border-base-700 dark:bg-base-900");
+
+const nestedClass = clsx("rounded-none py-1");
+
+const insetClass = clsx("w-full border-transparent bg-transparent dark:border-transparent dark:bg-transparent");
+
+export interface ListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /**
+   * 투명 배경 스타일 적용
+   */
+  inset?: boolean;
+}
+
+/**
+ * ListItem들을 담는 컨테이너 컴포넌트
+ *
+ * 트리뷰 스타일 키보드 네비게이션 지원:
+ * - `Space`/`Enter`: 현재 항목 토글
+ * - `ArrowUp`/`ArrowDown`: 이전/다음 항목으로 포커스 이동
+ * - `Home`/`End`: 첫 번째/마지막 항목으로 포커스 이동
+ * - `ArrowRight`: 닫혀있으면 열기, 열려있으면 첫 번째 자식으로 포커스
+ * - `ArrowLeft`: 열려있으면 닫기, 닫혀있으면 부모로 포커스
+ *
+ * @example
+ * ```tsx
+ * <List>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List>
+ *
+ * <List inset>
+ *   <List.Item>Inset style item</List.Item>
+ * </List>
+ * ```
+ */
+interface ListComponent extends ParentComponent<ListProps> {
+  Item: typeof ListItem;
+}
+
+const ListBase: ParentComponent<ListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "inset"]);
+
+  let listRef!: HTMLDivElement;
+
+  const parentContext = useListContext();
+  const currentLevel = parentContext.level + 1;
+  const isNested = currentLevel > 1;
+
+  const isVisible = (el: Element): boolean => {
+    let parent = el.parentElement;
+    while (parent && parent !== listRef) {
+      if (parent.hasAttribute("data-collapsed")) {
+        return false;
+      }
+      parent = parent.parentElement;
+    }
+    return true;
+  };
+
+  const handleArrowRight = (current: HTMLElement) => {
+    const isOpen = current.getAttribute("aria-expanded") === "true";
+    const hasChildren = current.hasAttribute("aria-expanded");
+
+    if (!hasChildren) return;
+
+    if (!isOpen) {
+      current.click();
+    } else {
+      // button의 다음 형제 요소(Collapse) 내에서 첫 번째 자식 항목 찾기
+      const collapse = current.nextElementSibling;
+      const nestedItem = collapse?.querySelector<HTMLElement>("[data-list-item]");
+      nestedItem?.focus();
+    }
+  };
+
+  const handleArrowLeft = (current: HTMLElement) => {
+    const isOpen = current.getAttribute("aria-expanded") === "true";
+    const hasChildren = current.hasAttribute("aria-expanded");
+
+    if (hasChildren && isOpen) {
+      current.click();
+    } else {
+      // Collapse의 이전 형제가 부모 button
+      const parentItem = current.closest("[data-collapse]")?.previousElementSibling as HTMLElement | null;
+      if (parentItem?.hasAttribute("data-list-item")) {
+        parentItem.focus();
+      }
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    const current = e.target as HTMLElement;
+    if (!current.hasAttribute("data-list-item")) return;
+
+    const allItems = [...listRef.querySelectorAll('[data-list-item]:not([aria-disabled="true"])')] as HTMLElement[];
+    const visibleItems = allItems.filter((el) => isVisible(el));
+    const idx = visibleItems.indexOf(current);
+
+    switch (e.key) {
+      case " ":
+      case "Enter":
+        e.preventDefault();
+        e.stopPropagation();
+        current.click();
+        break;
+      case "ArrowDown":
+        if (idx + 1 < visibleItems.length) {
+          e.preventDefault();
+          e.stopPropagation();
+          visibleItems[idx + 1]?.focus();
+        }
+        break;
+      case "ArrowUp":
+        if (idx - 1 >= 0) {
+          e.preventDefault();
+          e.stopPropagation();
+          visibleItems[idx - 1]?.focus();
+        }
+        break;
+      case "Home":
+        if (visibleItems.length > 0 && idx !== 0) {
+          e.preventDefault();
+          e.stopPropagation();
+          visibleItems[0]?.focus();
+        }
+        break;
+      case "End":
+        if (visibleItems.length > 0 && idx !== visibleItems.length - 1) {
+          e.preventDefault();
+          e.stopPropagation();
+          visibleItems[visibleItems.length - 1]?.focus();
+        }
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        e.stopPropagation();
+        handleArrowRight(current);
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        e.stopPropagation();
+        handleArrowLeft(current);
+        break;
+    }
+  };
+
+  const getClassName = () =>
+    twMerge(
+      baseClass,
+      !isNested && rootClass,
+      (local.inset || isNested) && insetClass,
+      isNested && nestedClass,
+      local.class,
+    );
+
+  return (
+    <ListContext.Provider value={{ level: currentLevel }}>
+      <div
+        ref={listRef}
+        role={isNested ? "group" : "tree"}
+        data-list
+        {...rest}
+        onKeyDown={(e) => {
+          handleKeyDown(e);
+          if (typeof rest.onKeyDown === "function") rest.onKeyDown(e);
+        }}
+        class={getClassName()}
+      >
+        {local.children}
+      </div>
+    </ListContext.Provider>
+  );
+};
+
+export const List = ListBase as ListComponent;
+List.Item = ListItem;

package/src/components/data/list/ListContext.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "solid-js";
+
+/**
+ * List context - 중첩 level 전달용
+ */
+export interface ListContextValue {
+  level: number;
+}
+
+export const ListContext = createContext<ListContextValue>({ level: 0 });
+
+export const useListContext = () => useContext(ListContext);

package/src/components/data/list/ListItem.styles.ts

@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import { borderDefault, type ComponentSize } from "../../../styles/tokens.styles";
+
+// 기본 아이템 스타일
+export const listItemBaseClass = clsx(
+  "flex",
+  "items-center",
+  "gap-2",
+  "py-1",
+  "px-1.5",
+  "m-px",
+  "cursor-pointer",
+  "rounded-md",
+  "transition-colors",
+  "focus:outline-none",
+  "focus-visible:bg-base-200 dark:focus-visible:bg-base-700",
+  "hover:bg-base-500/10 dark:hover:bg-base-700",
+);
+
+// 사이즈별 스타일
+export const listItemSizeClasses: Record<ComponentSize, string> = {
+  sm: clsx("py-0.5 px-1"),
+  lg: clsx("py-1.5 px-2"),
+};
+
+// 선택된 상태
+export const listItemSelectedClass = clsx(
+  "bg-primary-100",
+  "dark:bg-primary-800/50",
+  "font-bold",
+  "hover:bg-primary-200",
+  "dark:hover:bg-primary-700",
+);
+
+// 비활성화 상태
+export const listItemDisabledClass = clsx("pointer-events-none cursor-auto opacity-50");
+
+// 읽기 전용 상태
+export const listItemReadonlyClass = clsx("cursor-auto select-text hover:bg-transparent");
+
+// 들여쓰기 가이드 (중첩 아이템용)
+export const listItemIndentGuideClass = clsx("ml-4 w-2 border-l", borderDefault);
+
+// 아이템 콘텐츠 영역
+export const listItemContentClass = clsx("flex flex-1 flex-row", "items-center gap-1", "text-left");
+
+// 선택 아이콘 색상
+export const getListItemSelectedIconClass = (selected: boolean) =>
+  clsx(selected ? "text-primary-600 dark:text-primary-400" : "text-black/30 dark:text-white/30");

package/src/components/data/list/ListItem.tsx

@@ -0,0 +1,222 @@
+import { children, type Component, type JSX, type ParentComponent, Show, splitProps } from "solid-js";
+import { IconChevronDown, type IconProps } from "@tabler/icons-solidjs";
+import { Icon } from "../../display/Icon";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { ripple } from "../../../directives/ripple";
+import { Collapse } from "../../disclosure/Collapse";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { useListContext } from "./ListContext";
+import { List } from "./List";
+import { splitSlots } from "../../../helpers/splitSlots";
+import {
+  listItemBaseClass,
+  listItemSizeClasses,
+  listItemSelectedClass,
+  listItemDisabledClass,
+  listItemReadonlyClass,
+  listItemIndentGuideClass,
+  listItemContentClass,
+  getListItemSelectedIconClass,
+} from "./ListItem.styles";
+import type { ComponentSize } from "../../../styles/tokens.styles";
+
+void ripple;
+
+const chevronClass = clsx("transition-transform duration-200 motion-reduce:transition-none");
+
+/**
+ * 중첩 리스트를 담는 서브 컴포넌트
+ *
+ * ListItem의 하위 아이템을 정의할 때 사용한다.
+ * 내부적으로 `<List inset>`으로 감싸서 Context와 키보드 네비게이션이 동작한다.
+ * 세로선 가이드가 자동으로 표시된다.
+ *
+ * @example
+ * ```tsx
+ * <List.Item>
+ *   Folder
+ *   <List.Item.Children>
+ *     <List.Item>File 1</List.Item>
+ *     <List.Item>File 2</List.Item>
+ *   </List.Item.Children>
+ * </List.Item>
+ * ```
+ */
+const ListItemChildren: ParentComponent = (props) => (
+  <div class="flex" data-list-item-children>
+    <div class={listItemIndentGuideClass} />
+    <List inset class="flex-1">
+      {props.children}
+    </List>
+  </div>
+);
+
+export interface ListItemProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
+  /**
+   * 중첩 리스트의 열림 상태 (controlled 모드)
+   */
+  open?: boolean;
+
+  /**
+   * 열림 상태 변경 콜백 (있으면 controlled 모드)
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * 선택된 상태
+   */
+  selected?: boolean;
+
+  /**
+   * 읽기 전용 (클릭 비활성화, 일반 색상 유지)
+   */
+  readonly?: boolean;
+
+  /**
+   * 비활성화 (클릭 불가, 흐려짐)
+   */
+  disabled?: boolean;
+
+  /**
+   * 선택 표시 아이콘 컴포넌트 (중첩 List가 없을 때만 표시)
+   */
+  selectedIcon?: Component<IconProps>;
+
+  /**
+   * 아이템 크기
+   */
+  size?: ComponentSize;
+
+  /**
+   * 클릭 핸들러 (중첩 List가 없을 때 호출)
+   */
+  onClick?: (e: MouseEvent) => void;
+}
+
+/**
+ * 리스트 아이템 컴포넌트
+ *
+ * `ListItem.Children`으로 중첩 리스트를 포함하면 아코디언 동작을 지원한다.
+ * controlled 모드로 사용하려면 open과 onOpenChange를 함께 제공한다.
+ *
+ * @example
+ * ```tsx
+ * // 기본 사용
+ * <List.Item>Simple item</List.Item>
+ *
+ * // 선택 상태
+ * <List.Item selected>Selected item</List.Item>
+ *
+ * // 선택 아이콘
+ * <List.Item selectedIcon={IconCheck} selected>Icon selection</List.Item>
+ *
+ * // 중첩 리스트 (아코디언)
+ * <List.Item>
+ *   Folder
+ *   <List.Item.Children>
+ *     <List.Item>File</List.Item>
+ *   </List.Item.Children>
+ * </List.Item>
+ * ```
+ */
+interface ListItemComponent extends ParentComponent<ListItemProps> {
+  Children: typeof ListItemChildren;
+}
+
+export const ListItem: ListItemComponent = (props) => {
+  const [local, rest] = splitProps(props, [
+    "children",
+    "class",
+    "style",
+    "open",
+    "onOpenChange",
+    "selected",
+    "readonly",
+    "disabled",
+    "selectedIcon",
+    "size",
+    "onClick",
+  ]);
+
+  const listContext = useListContext();
+  const level = listContext.level;
+
+  const [openState, setOpenState] = createControllableSignal({
+    value: () => local.open ?? false,
+    onChange: () => local.onOpenChange,
+  });
+
+  const resolved = children(() => local.children);
+  const [slots, content] = splitSlots(resolved, ["listItemChildren"] as const);
+
+  const hasChildren = () => slots().listItemChildren.length > 0;
+
+  const useRipple = () => !(local.readonly || local.disabled);
+
+  const onHeaderClick = (e: MouseEvent) => {
+    if (local.readonly || local.disabled) return;
+
+    if (hasChildren()) {
+      setOpenState((v: boolean) => !v);
+    } else {
+      local.onClick?.(e);
+    }
+  };
+
+  const getHeaderClassName = () =>
+    twMerge(
+      listItemBaseClass,
+      local.size && listItemSizeClasses[local.size],
+      local.selected && listItemSelectedClass,
+      local.readonly && listItemReadonlyClass,
+      local.disabled && listItemDisabledClass,
+      local.class,
+    );
+
+  const getChevronClassName = () => twMerge(chevronClass, openState() ? "rotate-0" : "rotate-90");
+
+  const getSelectedIconClassName = () => getListItemSelectedIconClass(local.selected ?? false);
+
+  return (
+    <>
+      <button
+        {...rest}
+        type="button"
+        use:ripple={useRipple()}
+        class={getHeaderClassName()}
+        style={local.style}
+        data-list-item
+        role="treeitem"
+        aria-expanded={hasChildren() ? openState() : undefined}
+        aria-disabled={local.disabled || undefined}
+        aria-selected={local.selected || undefined}
+        aria-level={level}
+        tabIndex={local.disabled ? -1 : 0}
+        onClick={onHeaderClick}
+        onFocus={(e) => {
+          const treeRoot = e.currentTarget.closest("[data-list]");
+          treeRoot?.querySelectorAll("[data-list-item]").forEach((el) => {
+            (el as HTMLElement).tabIndex = -1;
+          });
+          e.currentTarget.tabIndex = 0;
+        }}
+      >
+        <Show when={local.selectedIcon && !hasChildren()}>
+          <Icon icon={local.selectedIcon!} class={getSelectedIconClassName()} />
+        </Show>
+        <span class={listItemContentClass}>{content()}</span>
+        <Show when={hasChildren()}>
+          <Icon icon={IconChevronDown} size="1em" class={getChevronClassName()} />
+        </Show>
+      </button>
+      <Show when={hasChildren()}>
+        <Collapse open={openState()} data-collapsed={!openState() || undefined}>
+          {slots().listItemChildren.single()}
+        </Collapse>
+      </Show>
+    </>
+  );
+};
+
+ListItem.Children = ListItemChildren;