@simplysm/solid 13.0.69 → 13.0.71

package/src/components/features/shared-data/SharedDataSelectList.tsx

@@ -1,85 +1,257 @@
-import { createMemo, type JSX, Show, splitProps } from "solid-js";
-import { IconExternalLink } from "@tabler/icons-solidjs";
+import { createEffect, createMemo, createSignal, For, type JSX, Show, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
 import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
-import { SelectList } from "../../form-control/select-list/SelectList";
-import { Icon } from "../../display/Icon";
-import { useDialog } from "../../disclosure/DialogContext";
+import { List } from "../../data/list/List";
+import { Pagination } from "../../data/Pagination";
+import { TextInput } from "../../form-control/field/TextInput";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { textMuted } from "../../../styles/tokens.styles";
+import { createSlotSignal } from "../../../hooks/createSlotSignal";
+import {
+  SharedDataSelectListContext,
+  type SharedDataSelectListContextValue,
+  SharedDataSelectListItemTemplate,
+  SharedDataSelectListFilter,
+} from "./SharedDataSelectListContext";
 
 /** SharedDataSelectList Props */
 export interface SharedDataSelectListProps<TItem> {
-  /** 공유 데이터 접근자 */
+  /** Shared data accessor */
   data: SharedDataAccessor<TItem>;
 
-  /** 현재 선택된 값 */
+  /** Currently selected value */
   value?: TItem;
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: TItem | undefined) => void;
-  /** 필수 입력 */
+  /** Required input */
   required?: boolean;
-  /** 비활성화 */
+  /** Disabled */
   disabled?: boolean;
 
-  /** 항목 필터 함수 */
+  /** Item filter function */
   filterFn?: (item: TItem, index: number) => boolean;
-  /** 값 변경 가드 (false 반환 시 변경 차단) */
+  /** Value change guard (blocks change if returns false) */
   canChange?: (item: TItem | undefined) => boolean | Promise<boolean>;
-  /** 페이지 크기 (있으면 Pagination 자동 표시) */
+  /** Page size (shows Pagination if provided) */
   pageSize?: number;
-  /** 헤더 텍스트 */
-  header?: string;
-  /** 관리 모달 컴포넌트 팩토리 */
-  modal?: () => JSX.Element;
+  /** Header content */
+  header?: JSX.Element;
 
-  /** 서브 컴포넌트용 children (ItemTemplate 등) */
-  children: JSX.Element;
+  /** Compound sub-components (ItemTemplate, Filter) */
+  children?: JSX.Element;
+
+  /** Custom class */
+  class?: string;
+  /** Custom style */
+  style?: JSX.CSSProperties;
+}
+
+// ─── Styles ──────────────────────────────────────────────
+
+const containerClass = clsx("flex-col gap-1");
+
+// ─── Component ───────────────────────────────────────────
+
+export interface SharedDataSelectListComponent {
+  <TItem>(props: SharedDataSelectListProps<TItem>): JSX.Element;
+  ItemTemplate: typeof SharedDataSelectListItemTemplate;
+  Filter: typeof SharedDataSelectListFilter;
 }
 
-export function SharedDataSelectList<TItem>(props: SharedDataSelectListProps<TItem>): JSX.Element {
-  const [local, rest] = splitProps(props, ["data", "filterFn", "modal", "header", "children"]);
+export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
+  props: SharedDataSelectListProps<TItem>,
+): JSX.Element => {
+  const [local, rest] = splitProps(props, [
+    "data",
+    "children",
+    "class",
+    "style",
+    "value",
+    "onValueChange",
+    "required",
+    "disabled",
+    "filterFn",
+    "canChange",
+    "pageSize",
+    "header",
+  ]);
+
+  const i18n = useI18nOptional();
+
+  // ─── Slot signals ──────────────────────────────────────
+
+  const [filter, setFilter] = createSlotSignal();
+  const [itemTemplate, _setItemTemplate] = createSignal<
+    ((item: TItem, index: number) => JSX.Element) | undefined
+  >();
+  const setItemTemplate = (fn: ((...args: unknown[]) => JSX.Element) | undefined) =>
+    _setItemTemplate(() => fn as ((item: TItem, index: number) => JSX.Element) | undefined);
+
+  const contextValue: SharedDataSelectListContextValue = {
+    setItemTemplate,
+    setFilter,
+  };
+
+  // ─── Search state ──────────────────────────────────────
+
+  const [searchText, setSearchText] = createSignal("");
+
+  // Reset search text when filter slot changes
+  createEffect(() => {
+    if (filter()) {
+      setSearchText("");
+    }
+  });
+
+  // ─── Pagination state ─────────────────────────────────
+
+  const [page, setPage] = createSignal(1);
+
+  // ─── Filtering pipeline ─────────────────────────────────
+
+  const filteredItems = createMemo(() => {
+    let result = local.data.items();
+
+    // getIsHidden filter
+    const isHidden = local.data.getIsHidden;
+    if (isHidden) {
+      result = result.filter((item) => !isHidden(item));
+    }
+
+    // Search filter (only when Filter compound is absent and getSearchText exists)
+    const getSearchText = local.data.getSearchText;
+    if (!filter() && getSearchText && searchText()) {
+      const terms = searchText().trim().split(" ").filter(Boolean);
+      if (terms.length > 0) {
+        result = result.filter((item) => {
+          const text = getSearchText(item).toLowerCase();
+          return terms.every((t) => text.includes(t.toLowerCase()));
+        });
+      }
+    }
+
+    // filterFn
+    if (local.filterFn) {
+      const fn = local.filterFn;
+      result = result.filter((item, index) => fn(item, index));
+    }
 
-  const dialog = useDialog();
+    return result;
+  });
+
+  // ─── Page calculation ───────────────────────────────────────
+
+  const totalPageCount = createMemo(() => {
+    if (local.pageSize == null) return 1;
+    return Math.max(1, Math.ceil(filteredItems().length / local.pageSize));
+  });
 
-  // filterFn 적용된 items
-  const items = createMemo(() => {
-    const allItems = local.data.items();
-    if (!local.filterFn) return allItems;
-    return allItems.filter(local.filterFn);
+  // Reset page when filter changes
+  createEffect(() => {
+    void filteredItems();
+    setPage(1);
   });
 
-  // modal 열기
-  const handleOpenModal = async () => {
-    if (!local.modal) return;
-    await dialog.show(local.modal, {});
+  // Page slice
+  const displayItems = createMemo(() => {
+    const items = filteredItems();
+    if (local.pageSize == null) return items;
+
+    const start = (page() - 1) * local.pageSize;
+    const end = start + local.pageSize;
+    return items.slice(start, end);
+  });
+
+  // ─── Select/toggle handler ─────────────────────────────
+
+  const handleSelect = async (item: TItem | undefined) => {
+    if (local.disabled) return;
+
+    // canChange guard
+    if (local.canChange) {
+      const allowed = await local.canChange(item);
+      if (!allowed) return;
+    }
+
+    // Toggle: click already selected value to deselect (only if not required)
+    if (item !== undefined && item === local.value && !local.required) {
+      local.onValueChange?.(undefined);
+    } else {
+      local.onValueChange?.(item);
+    }
   };
 
+  // ─── Render ────────────────────────────────────────────
+
   return (
-    <SelectList
-      {...rest}
-      items={items()}
-      getSearchText={local.data.getSearchText}
-      getIsHidden={local.data.getIsHidden}
-    >
-      {/* header + modal 아이콘을 SelectList.Header로 결합 */}
-      <Show when={local.header != null || local.modal != null}>
-        <SelectList.Header>
-          <div class="flex items-center gap-1">
-            <Show when={local.header != null}>
-              <span>{local.header}</span>
-            </Show>
-            <Show when={local.modal != null}>
-              <button
-                type="button"
-                class="inline-flex items-center justify-center rounded p-0.5 text-base-500 hover:text-primary-500 dark:text-base-400 dark:hover:text-primary-400"
-                aria-label="관리"
-                onClick={() => void handleOpenModal()}
-              >
-                <Icon icon={IconExternalLink} size="1em" />
-              </button>
-            </Show>
-          </div>
-        </SelectList.Header>
-      </Show>
+    <SharedDataSelectListContext.Provider value={contextValue}>
+      {/* Render children inside Provider so sub-components (ItemTemplate, Filter) can access context */}
       {local.children}
-    </SelectList>
+      <div
+        {...rest}
+        data-shared-data-select-list
+        class={twMerge(containerClass, local.class)}
+        style={local.style}
+      >
+        {/* Header */}
+        <Show when={local.header != null}>{local.header}</Show>
+
+        {/* Search input: when Filter compound is absent and getSearchText exists */}
+        <Show when={!filter() && local.data.getSearchText}>
+          <div class={"p-1"}>
+            <TextInput
+              value={searchText()}
+              onValueChange={setSearchText}
+              placeholder={i18n?.t("sharedDataSelectList.searchPlaceholder") ?? "Search..."}
+              class={"w-full"}
+            />
+          </div>
+        </Show>
+
+        {/* Custom Filter */}
+        <Show when={filter()}>{filter()!()}</Show>
+
+        {/* Pagination */}
+        <Show when={local.pageSize != null && totalPageCount() > 1}>
+          <Pagination
+            page={page()}
+            onPageChange={setPage}
+            totalPageCount={totalPageCount()}
+            size="sm"
+          />
+        </Show>
+
+        {/* List */}
+        <List inset>
+          {/* Unspecified item (when not required) */}
+          <Show when={!local.required}>
+            <List.Item
+              selected={local.value === undefined}
+              disabled={local.disabled}
+              onClick={() => handleSelect(undefined)}
+            >
+              <span class={textMuted}>Unspecified</span>
+            </List.Item>
+          </Show>
+
+          {/* Item list */}
+          <For each={displayItems()}>
+            {(item, index) => (
+              <List.Item
+                selected={item === local.value}
+                disabled={local.disabled}
+                onClick={() => handleSelect(item)}
+              >
+                {itemTemplate()?.(item, index())}
+              </List.Item>
+            )}
+          </For>
+        </List>
+      </div>
+    </SharedDataSelectListContext.Provider>
   );
-}
+}) as SharedDataSelectListComponent;
+
+SharedDataSelectList.ItemTemplate = SharedDataSelectListItemTemplate;
+SharedDataSelectList.Filter = SharedDataSelectListFilter;

package/src/components/features/shared-data/SharedDataSelectListContext.ts

@@ -0,0 +1,39 @@
+import { createContext, useContext, type JSX, type ParentComponent, onCleanup } from "solid-js";
+import { createSlotComponent } from "../../../helpers/createSlotComponent";
+import type { SlotAccessor } from "../../../hooks/createSlotSignal";
+
+// ─── Context ──────────────────────────────────────────────
+
+export interface SharedDataSelectListContextValue {
+  setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
+  setFilter: (content: SlotAccessor) => void;
+}
+
+export const SharedDataSelectListContext = createContext<SharedDataSelectListContextValue>();
+
+export function useSharedDataSelectListContext(): SharedDataSelectListContextValue {
+  const context = useContext(SharedDataSelectListContext);
+  if (!context) {
+    throw new Error("useSharedDataSelectListContext can only be used inside SharedDataSelectList");
+  }
+  return context;
+}
+
+// ─── Sub-components ───────────────────────────────────────
+
+/** ItemTemplate sub-component — registers item render function */
+export const SharedDataSelectListItemTemplate = <TItem,>(props: {
+  children: (item: TItem, index: number) => JSX.Element;
+}) => {
+  const ctx = useSharedDataSelectListContext();
+  // eslint-disable-next-line solid/reactivity -- Store render function in signal, called from JSX tracked scope
+  ctx.setItemTemplate(props.children as (...args: unknown[]) => JSX.Element);
+  onCleanup(() => ctx.setItemTemplate(undefined));
+  return null;
+};
+
+/** Filter sub-component — registers custom filter UI slot */
+export const SharedDataSelectListFilter: ParentComponent = createSlotComponent(
+  SharedDataSelectListContext,
+  (ctx) => ctx.setFilter,
+);

package/src/components/feedback/Progress.tsx

@@ -10,7 +10,7 @@ import {
 export type ProgressTheme = SemanticTheme;
 
 export interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  /** 진행률 (0~1 범위, 0 = 0%, 1 = 100%) */
+  /** Progress value (range 0-1, 0 = 0%, 1 = 100%) */
   value: number;
   theme?: ProgressTheme;
   size?: ComponentSizeCompact;

package/src/components/feedback/busy/BusyContainer.tsx

@@ -14,9 +14,9 @@ import { createMountTransition } from "../../../hooks/createMountTransition";
 import "./BusyContainer.css";
 
 export interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
-  /** 로딩 오버레이 표시 (children은 유지됨) */
+  /** Show loading overlay (children are preserved) */
   busy?: boolean;
-  /** false이면 children을 숨기고 로딩 오버레이 표시. 초기 데이터 로드 시 사용 */
+  /** If false, children are hidden and loading overlay is shown. Used for initial data loading */
   ready?: boolean;
   variant?: BusyVariant;
   message?: string;
@@ -26,7 +26,7 @@ export interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivEleme
 
 const baseClass = clsx("relative", "size-full", "min-h-[70px] min-w-[70px]", "overflow-auto");
 
-// eslint-disable-next-line tailwindcss/enforces-shorthand -- inset은 Chrome 87+에서만 지원
+// eslint-disable-next-line tailwindcss/enforces-shorthand -- inset is only supported in Chrome 87+
 const screenBaseClass = clsx(
   "absolute bottom-0 left-0 right-0 top-0",
   "z-busy",
@@ -71,7 +71,7 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
   const busyCtx = useContext(BusyContext);
   const currVariant = (): BusyVariant => local.variant ?? busyCtx?.variant() ?? "spinner";
 
-  // 애니메이션 상태 (mount transition)
+  // Animation state (mount transition)
   const { mounted, animating, unmount } = createMountTransition(
     () => local.ready === false || !!local.busy,
   );
@@ -83,7 +83,7 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
     }
   };
 
-  // 키보드 입력 차단 (캡처 단계)
+  // Block keyboard input (capture phase)
   let containerRef!: HTMLDivElement;
 
   createEffect(() => {
@@ -106,7 +106,7 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
       animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
     );
 
-  // spinner: 슬라이드 다운 애니메이션
+  // spinner: slide down animation
   const rectClass = () => {
     if (currVariant() !== "spinner") return "";
     return clsx(

package/src/components/feedback/busy/BusyContext.ts

@@ -1,38 +1,38 @@
 import { createContext, useContext, type Accessor } from "solid-js";
 
 /**
- * Busy 오버레이 표시 방식
- * - `spinner`: 전체 화면 스피너
- * - `bar`: 상단 프로그레스 바
+ * Busy overlay display type
+ * - `spinner`: Full-screen spinner
+ * - `bar`: Top progress bar
  */
 export type BusyVariant = "spinner" | "bar";
 
 /**
- * Busy 오버레이 Context 값
+ * Busy overlay Context value
  */
 export interface BusyContextValue {
-  /** 현재 표시 방식 */
+  /** Current display type */
   variant: Accessor<BusyVariant>;
-  /** 오버레이 표시 (중첩 호출 가능, 호출 횟수만큼 hide 필요) */
+  /** Show overlay (nestable calls, requires matching hide calls) */
   show: (message?: string) => void;
-  /** 오버레이 숨김 (모든 show에 대응하는 hide 호출 후 실제 숨김) */
+  /** Hide overlay (actually hides after all show calls have corresponding hide calls) */
   hide: () => void;
-  /** 프로그레스 바 진행률 설정 (0~100, undefined면 indeterminate) */
+  /** Set progress bar progress (0-100, undefined for indeterminate) */
   setProgress: (percent: number | undefined) => void;
 }
 
-/** Busy 오버레이 Context */
+/** Busy overlay Context */
 export const BusyContext = createContext<BusyContextValue>();
 
 /**
- * Busy 오버레이에 접근하는 훅
+ * Hook to access Busy overlay
  *
- * @throws BusyProvider가 없으면 에러 발생
+ * @throws Error if BusyProvider is not present
  */
 export function useBusy(): BusyContextValue {
   const context = useContext(BusyContext);
   if (!context) {
-    throw new Error("useBusy는 BusyProvider 내부에서만 사용할 수 있습니다");
+    throw new Error("useBusy can only be used inside BusyProvider");
   }
   return context;
 }

package/src/components/feedback/busy/BusyProvider.tsx

@@ -6,19 +6,19 @@ import { BusyContainer } from "./BusyContainer";
 
 const overlayClass = clsx("fixed left-0 top-0", "h-screen w-screen", "overflow-hidden");
 
-/** BusyProvider 설정 */
+/** BusyProvider configuration */
 export interface BusyProviderProps {
-  /** 표시 방식 (기본값: `"spinner"`) */
+  /** Display style (default: `"spinner"`) */
   variant?: BusyVariant;
 }
 
 /**
- * Busy 오버레이 Provider
+ * Busy Overlay Provider
  *
  * @remarks
- * - show/hide는 중첩 호출 가능 (내부 카운터로 관리)
- * - Portal로 렌더링하여 항상 최상위에 표시
- * - 독립적으로 동작 (다른 Provider 의존성 없음)
+ * - show/hide can be nested (managed with internal counter)
+ * - Renders via Portal to always display on top
+ * - Works independently (no other Provider dependencies)
  */
 export const BusyProvider: ParentComponent<BusyProviderProps> = (props) => {
   const [busyCount, setBusyCount] = createSignal(0);

package/src/components/feedback/notification/NotificationBanner.tsx

@@ -3,6 +3,7 @@ import { Portal } from "solid-js/web";
 import clsx from "clsx";
 import { IconX } from "@tabler/icons-solidjs";
 import { useNotification } from "./NotificationContext";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 import { Icon } from "../../display/Icon";
 import { themeTokens } from "../../../styles/tokens.styles";
 
@@ -38,6 +39,7 @@ const dismissButtonClass = clsx("rounded", "p-1", "hover:bg-white/20");
 
 export const NotificationBanner: Component = () => {
   const notification = useNotification();
+  const i18n = useI18nOptional();
 
   const handleDismiss = () => {
     notification.dismissBanner();
@@ -72,7 +74,7 @@ export const NotificationBanner: Component = () => {
               </Show>
               <button
                 type="button"
-                aria-label="알림 닫기"
+                aria-label={i18n?.t("notification.close") ?? "Close notification"}
                 class={dismissButtonClass}
                 onClick={handleDismiss}
               >

package/src/components/feedback/notification/NotificationBell.tsx

@@ -78,7 +78,7 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
             type="button"
             data-notification-bell
             class={buttonClass}
-            aria-label={`알림 ${notification.unreadCount()}개`}
+            aria-label={`${notification.unreadCount()} notifications`}
             aria-haspopup="true"
             aria-expanded={open()}
           >
@@ -93,7 +93,7 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
         <Dropdown.Content>
           <div class="w-80 p-2">
             <div class={dropdownHeaderClass}>
-              <span class="font-bold">알림</span>
+              <span class="font-bold">Notifications</span>
               <Show when={notification.items().length > 0}>
                 <button
                   type="button"
@@ -101,14 +101,14 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
                   class={clearButtonClass}
                   onClick={handleClear}
                 >
-                  전체 삭제
+                  Clear All
                 </button>
               </Show>
             </div>
 
             <Show
               when={notification.items().length > 0}
-              fallback={<div class={emptyClass}>알림이 없습니다</div>}
+              fallback={<div class={emptyClass}>No notifications</div>}
             >
               <div class={listClass}>
                 <For each={[...notification.items()].reverse()}>