@simplysm/solid 13.0.69 → 13.0.71

package/src/components/form-control/combobox/Combobox.tsx

@@ -15,7 +15,7 @@ import { Invalid } from "../Invalid";
 
 void ripple;
 
-// Combobox 전용 스타일
+// Combobox-specific styles
 const selectedValueClass = clsx("flex-1", "whitespace-nowrap", "overflow-hidden");
 const inputClass = clsx(
   "min-w-0 flex-1",
@@ -26,69 +26,69 @@ const inputClass = clsx(
 const noResultsClass = clsx("px-3 py-2", textMuted);
 
 /**
- * 아이템 템플릿 서브 컴포넌트
+ * Item template sub-component
  */
 const ComboboxItemTemplate = <TArgs extends unknown[]>(props: {
   children: (...args: TArgs) => JSX.Element;
 }) => {
   const ctx = useComboboxContext();
-  // eslint-disable-next-line solid/reactivity -- 렌더 함수를 signal에 저장, JSX tracked scope에서 호출됨
+  // 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;
 };
 
-// Props 정의
+// Props definition
 export interface ComboboxProps<TValue = unknown> {
-  /** 현재 선택된 값 */
+  /** Currently selected value */
   value?: TValue;
 
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: TValue) => void;
 
-  /** 아이템 로드 함수 (필수) */
+  /** Item load function (required) */
   loadItems: (query: string) => TValue[] | Promise<TValue[]>;
 
-  /** 디바운스 딜레이 (기본값: 300ms) */
+  /** Debounce delay (default: 300ms) */
   debounceMs?: number;
 
-  /** 커스텀 값 허용 */
+  /** Allow custom values */
   allowCustomValue?: boolean;
 
-  /** 커스텀 값 파싱 함수 */
+  /** Custom value parsing function */
   parseCustomValue?: (text: string) => TValue;
 
-  /** 선택된 값을 렌더링하는 함수 (필수) */
+  /** Function to render selected value (required) */
   renderValue: (value: TValue) => JSX.Element;
 
-  /** 비활성화 */
+  /** Disable input */
   disabled?: boolean;
 
-  /** 필수 입력 */
+  /** Required input */
   required?: boolean;
 
-  /** 커스텀 유효성 검사 함수 */
+  /** Custom validation function */
   validate?: (value: TValue | undefined) => string | undefined;
 
-  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  /** touchMode: show errors only after blur */
   touchMode?: boolean;
 
-  /** 플레이스홀더 */
+  /** Placeholder text */
   placeholder?: string;
 
-  /** 트리거 크기 */
+  /** Trigger size */
   size?: ComponentSize;
 
-  /** 테두리 없는 스타일 */
+  /** Borderless style */
   inset?: boolean;
 
-  /** 커스텀 class */
+  /** Custom class */
   class?: string;
 
-  /** 커스텀 style */
+  /** Custom style */
   style?: JSX.CSSProperties;
 
-  /** children (Combobox.Item 또는 Combobox.ItemTemplate) */
+  /** Children (Combobox.Item or Combobox.ItemTemplate) */
   children?: JSX.Element;
 }
 
@@ -99,13 +99,13 @@ interface ComboboxComponent {
 }
 
 /**
- * Combobox 컴포넌트
+ * Combobox component
  *
- * 비동기 검색과 아이템 선택을 지원하는 자동완성 컴포넌트입니다.
+ * An autocomplete component supporting async search and item selection.
  *
  * @example
  * ```tsx
- * // 기본 사용
+ * // Basic usage
  * <Combobox
  *   loadItems={async (query) => {
  *     const response = await fetch(`/api/search?q=${query}`);
@@ -120,7 +120,7 @@ interface ComboboxComponent {
  *   </Combobox.ItemTemplate>
  * </Combobox>
  *
- * // children 방식
+ * // Children approach
  * <Combobox loadItems={loadItems} renderValue={(v) => v.name}>
  *   <For each={items()}>
  *     {(item) => <Combobox.Item value={item}>{item.name}</Combobox.Item>}
@@ -149,52 +149,52 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     "touchMode",
   ]);
 
-  // 상태
+  // State
   const [open, setOpen] = createSignal(false);
   const [query, setQuery] = createSignal("");
   const [items, setItems] = createSignal<T[]>([]);
   const [busyCount, setBusyCount] = createSignal(0);
 
-  // 선택된 값 관리 (controlled/uncontrolled 패턴)
+  // Selected value management (controlled/uncontrolled pattern)
   const [getValue, setInternalValue] = createControllableSignal<T | undefined>({
     value: () => local.value,
     onChange: () => local.onValueChange,
   } as Parameters<typeof createControllableSignal<T | undefined>>[0]);
 
-  // 디바운스 큐 (마운트 시 한 번만 생성, debounceMs는 초기값만 사용)
-  // eslint-disable-next-line solid/reactivity -- 디바운스 큐는 마운트 시점의 debounceMs로 한 번만 생성
+  // Debounce queue (created once on mount, debounceMs only used as initial value)
+  // eslint-disable-next-line solid/reactivity -- Debounce queue created once with debounceMs from mount time
   const debounceQueue = new DebounceQueue(local.debounceMs ?? 300);
 
   onCleanup(() => {
     debounceQueue.dispose();
   });
 
-  // 값이 선택되어 있는지 확인
+  // Check if value is selected
   const isSelected = (value: T): boolean => {
     const current = getValue();
     return current === value;
   };
 
-  // 값 선택
+  // Select value
   const selectValue = (value: T) => {
     setInternalValue(value);
     setQuery("");
     setOpen(false);
   };
 
-  // 드롭다운 닫기
+  // Close dropdown
   const closeDropdown = () => {
     setOpen(false);
   };
 
-  // 아이템 템플릿 signal
+  // Item template signal
   const [itemTemplate, _setItemTemplate] = createSignal<
     ((...args: unknown[]) => JSX.Element) | undefined
   >();
   const setItemTemplate = (fn: ((...args: unknown[]) => JSX.Element) | undefined) =>
     _setItemTemplate(() => fn);
 
-  // Context 값
+  // Context value
   const contextValue: ComboboxContextValue<T> = {
     isSelected,
     selectValue,
@@ -202,9 +202,9 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     setItemTemplate,
   };
 
-  // 검색 실행
+  // Perform search
   const performSearch = (searchQuery: string) => {
-    // loadItems 함수 참조를 캡처하여 사용
+    // Capture loadItems function reference for use
     const loadItemsFn = local.loadItems;
     debounceQueue.run(async () => {
       setBusyCount((c) => c + 1);
@@ -217,7 +217,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     });
   };
 
-  // 입력 핸들러
+  // Input handler
   const handleInput = (e: InputEvent) => {
     const target = e.currentTarget as HTMLInputElement;
     const newQuery = target.value;
@@ -229,7 +229,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     }
   };
 
-  // Dropdown 열림/닫힘 변경 핸들러
+  // Dropdown open/close change handler
   const handleOpenChange = (isOpen: boolean) => {
     setOpen(isOpen);
     if (isOpen) {
@@ -237,7 +237,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     }
   };
 
-  // 트리거 키보드 처리
+  // Trigger keyboard handling
   const handleTriggerKeyDown = (e: KeyboardEvent) => {
     if (local.disabled) return;
 
@@ -255,15 +255,15 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     }
   };
 
-  // 유효성 검사 메시지
+  // Validation message
   const errorMsg = createMemo(() => {
     const v = getValue();
     if (local.required && (v === undefined || v === null || v === ""))
-      return "필수 입력 항목입니다";
+      return "This field is required";
     return local.validate?.(v);
   });
 
-  // 트리거 클래스
+  // Trigger class
   const getTriggerClassName = () =>
     getTriggerClass({
       size: local.size,
@@ -272,19 +272,19 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
       class: clsx(!local.inset && "bg-primary-50 dark:bg-primary-950/30", local.class),
     });
 
-  // 참고: 초기 검색은 handleTriggerClick에서 수행됨
-  // 입력 시에는 handleInput에서 performSearch가 호출됨
+  // Note: Initial search performed in handleTriggerClick
+  // Input triggers performSearch in handleInput
 
-  // 선택된 값 또는 입력 표시
+  // Render selected value or input
   const renderDisplayContent = (): JSX.Element => {
     const currentValue = getValue();
 
-    // 드롭다운이 열려있거나 값이 없으면 입력 필드 표시
+    // Show input field if dropdown is open or no value selected
     if (open() || currentValue === undefined) {
       return (
         <input
           ref={(el) => {
-            // 드롭다운이 열릴 때 input에 포커스
+            // Focus input when dropdown opens
             if (open()) {
               requestAnimationFrame(() => el.focus());
             }
@@ -300,25 +300,25 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
       );
     }
 
-    // 값이 있고 드롭다운이 닫혀있으면 값 표시
+    // Show value if selected and dropdown is closed
     return <div class="truncate">{local.renderValue(currentValue)}</div>;
   };
 
-  // 아이템 렌더링
+  // Render items
   const renderItems = (): JSX.Element => {
     const template = itemTemplate() as ((item: T, index: number) => JSX.Element) | undefined;
 
-    // 로딩 중
+    // Loading
     if (busyCount() > 0) {
-      return <div class={noResultsClass}>검색 중...</div>;
+      return <div class={noResultsClass}>Searching...</div>;
     }
 
-    // items가 비어있는 경우
+    // Items empty
     if (items().length === 0) {
-      return <div class={noResultsClass}>검색 결과가 없습니다</div>;
+      return <div class={noResultsClass}>No results found</div>;
     }
 
-    // ItemTemplate 방식
+    // ItemTemplate approach
     if (template) {
       return (
         <For each={items()}>
@@ -327,7 +327,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
       );
     }
 
-    // 기본 렌더링
+    // Default rendering
     return (
       <For each={items()}>{(item) => <ComboboxItem value={item}>{String(item)}</ComboboxItem>}</For>
     );

package/src/components/form-control/combobox/ComboboxContext.ts

@@ -1,16 +1,16 @@
 import { type JSX, createContext, useContext } from "solid-js";
 
 export interface ComboboxContextValue<TValue = unknown> {
-  /** 값이 선택되어 있는지 확인 */
+  /** Check if value is selected */
   isSelected: (value: TValue) => boolean;
 
-  /** 값 선택 */
+  /** Select value */
   selectValue: (value: TValue) => void;
 
-  /** 드롭다운 닫기 */
+  /** Close dropdown */
   closeDropdown: () => void;
 
-  /** 아이템 템플릿 등록 */
+  /** Register item template */
   setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
 }
 
@@ -19,7 +19,7 @@ export const ComboboxContext = createContext<ComboboxContextValue>();
 export function useComboboxContext<TValue = unknown>(): ComboboxContextValue<TValue> {
   const context = useContext(ComboboxContext);
   if (!context) {
-    throw new Error("useComboboxContext는 Combobox 컴포넌트 내부에서만 사용할 수 있습니다");
+    throw new Error("useComboboxContext can only be used inside the Combobox component");
   }
   return context as ComboboxContextValue<TValue>;
 }

package/src/components/form-control/combobox/ComboboxItem.tsx

@@ -15,15 +15,15 @@ export interface ComboboxItemProps<TValue = unknown> extends Omit<
   JSX.ButtonHTMLAttributes<HTMLButtonElement>,
   "value" | "onClick"
 > {
-  /** 아이템의 값 */
+  /** Item value */
   value: TValue;
 
-  /** 비활성화 */
+  /** Disabled */
   disabled?: boolean;
 }
 
 /**
- * Combobox 드롭다운 내의 선택 가능한 아이템
+ * Selectable item in Combobox dropdown
  */
 export const ComboboxItem: ParentComponent<ComboboxItemProps> = <T,>(
   props: ComboboxItemProps<T> & { children?: JSX.Element },

package/src/components/form-control/date-range-picker/DateRangePicker.tsx

@@ -6,58 +6,59 @@ import { createControllableSignal } from "../../../hooks/createControllableSigna
 import { type FieldSize } from "../field/Field.styles";
 import { DatePicker } from "../field/DatePicker";
 import { Select } from "../select/Select";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 
 export type DateRangePeriodType = "day" | "month" | "range";
 
 const baseClass = clsx("inline-flex items-center", "gap-1");
 
 export interface DateRangePickerProps {
-  /** 기간 타입 */
+  /** Period type */
   periodType?: DateRangePeriodType;
 
-  /** 기간 타입 변경 콜백 */
+  /** Period type change callback */
   onPeriodTypeChange?: (value: DateRangePeriodType) => void;
 
-  /** 시작 날짜 */
+  /** Start date */
   from?: DateOnly;
 
-  /** 시작 날짜 변경 콜백 */
+  /** Start date change callback */
   onFromChange?: (value: DateOnly | undefined) => void;
 
-  /** 종료 날짜 */
+  /** End date */
   to?: DateOnly;
 
-  /** 종료 날짜 변경 콜백 */
+  /** End date change callback */
   onToChange?: (value: DateOnly | undefined) => void;
 
-  /** 필수 입력 */
+  /** Required input */
   required?: boolean;
 
-  /** 비활성화 */
+  /** Disabled */
   disabled?: boolean;
 
-  /** 사이즈 */
+  /** Size */
   size?: FieldSize;
 
-  /** 커스텀 class */
+  /** Custom class */
   class?: string;
 
-  /** 커스텀 style */
+  /** Custom style */
   style?: JSX.CSSProperties;
 }
 
 /**
- * 월의 마지막 날을 구한다.
+ * Get the last day of the month.
  */
 function getLastDayOfMonth(date: DateOnly): DateOnly {
   return date.addMonths(1).setDay(1).addDays(-1);
 }
 
 /**
- * DateRangePicker 컴포넌트
+ * DateRangePicker component
  *
- * 기간 타입(일/월/범위) 선택에 따라 날짜 범위를 입력한다.
- * periodType 변경 시 from/to를 자동으로 보정한다.
+ * Input date range based on selected period type (day/month/range).
+ * Automatically adjusts from/to when periodType changes.
  *
  * @example
  * ```tsx
@@ -77,6 +78,8 @@ function getLastDayOfMonth(date: DateOnly): DateOnly {
  * ```
  */
 export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
+  const i18n = useI18nOptional();
+
   const [local, rest] = splitProps(props, [
     "periodType",
     "onPeriodTypeChange",
@@ -91,7 +94,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
     "style",
   ]);
 
-  // controlled/uncontrolled 패턴
+  // Controlled/uncontrolled pattern
   const [periodType, setPeriodType] = createControllableSignal({
     value: () => local.periodType ?? ("range" as DateRangePeriodType),
     onChange: () => local.onPeriodTypeChange,
@@ -107,7 +110,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
     onChange: () => local.onToChange,
   });
 
-  // periodType 변경 핸들러
+  // Handle period type change
   const handlePeriodTypeChange = (newType: DateRangePeriodType | DateRangePeriodType[]) => {
     const type = Array.isArray(newType) ? newType[0] : newType;
     setPeriodType(type);
@@ -127,7 +130,7 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
     }
   };
 
-  // from 변경 핸들러
+  // Handle from date change
   const handleFromChange = (newFrom: DateOnly | undefined) => {
     setFrom(newFrom);
 
@@ -145,12 +148,12 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
     }
   };
 
-  // to 변경 핸들러
+  // Handle to date change
   const handleToChange = (newTo: DateOnly | undefined) => {
     setTo(newTo);
   };
 
-  // wrapper 클래스
+  // Wrapper CSS class
   const getWrapperClass = () => twMerge(baseClass, local.class);
 
   return (
@@ -158,17 +161,28 @@ export const DateRangePicker: Component<DateRangePickerProps> = (props) => {
       <Select
         value={periodType()}
         onValueChange={handlePeriodTypeChange}
-        renderValue={(v: DateRangePeriodType) => (
-          <>{{ day: "일", month: "월", range: "범위" }[v]}</>
-        )}
+        renderValue={(v: DateRangePeriodType) => {
+          const labels = {
+            day: i18n?.t("dateRangePicker.day") ?? "Day",
+            month: i18n?.t("dateRangePicker.month") ?? "Month",
+            range: i18n?.t("dateRangePicker.range") ?? "Range"
+          };
+          return <>{labels[v]}</>;
+        }}
         required
         disabled={local.disabled}
         size={local.size}
         inset
       >
-        <Select.Item value={"day" as DateRangePeriodType}>일</Select.Item>
-        <Select.Item value={"month" as DateRangePeriodType}>월</Select.Item>
-        <Select.Item value={"range" as DateRangePeriodType}>범위</Select.Item>
+        <Select.Item value={"day" as DateRangePeriodType}>
+          {i18n?.t("dateRangePicker.day") ?? "Day"}
+        </Select.Item>
+        <Select.Item value={"month" as DateRangePeriodType}>
+          {i18n?.t("dateRangePicker.month") ?? "Month"}
+        </Select.Item>
+        <Select.Item value={"range" as DateRangePeriodType}>
+          {i18n?.t("dateRangePicker.range") ?? "Range"}
+        </Select.Item>
       </Select>
 
       <Show