@simplysm/solid 13.0.62 → 13.0.65

package/src/components/features/data-select-button/DataSelectButton.tsx

@@ -0,0 +1,279 @@
+import {
+  createEffect,
+  createMemo,
+  createResource,
+  createSignal,
+  For,
+  type JSX,
+  on,
+  Show,
+  splitProps,
+} from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { IconSearch, IconX } from "@tabler/icons-solidjs";
+import { Icon } from "../../display/Icon";
+import { Invalid } from "../../form-control/Invalid";
+import { useDialog, type DialogShowOptions } from "../../disclosure/DialogContext";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { type ComponentSize, textMuted } from "../../../styles/tokens.styles";
+import {
+  triggerBaseClass,
+  triggerDisabledClass,
+  triggerInsetClass,
+  triggerSizeClasses,
+} from "../../form-control/DropdownTrigger.styles";
+
+/** 모달에서 반환하는 결과 인터페이스 */
+export interface DataSelectModalResult<TKey> {
+  selectedKeys: TKey[];
+}
+
+/** DataSelectButton Props */
+export interface DataSelectButtonProps<TItem, TKey = string | number> {
+  /** 현재 선택된 키 (단일 또는 다중) */
+  value?: TKey | TKey[];
+  /** 값 변경 콜백 */
+  onValueChange?: (value: TKey | TKey[] | undefined) => void;
+
+  /** 키로 아이템을 로드하는 함수 */
+  load: (keys: TKey[]) => TItem[] | Promise<TItem[]>;
+  /** 선택 모달 컴포넌트 팩토리 */
+  modal: () => JSX.Element;
+  /** 아이템 렌더링 함수 */
+  renderItem: (item: TItem) => JSX.Element;
+
+  /** 다중 선택 모드 */
+  multiple?: boolean;
+  /** 필수 입력 */
+  required?: boolean;
+  /** 비활성화 */
+  disabled?: boolean;
+  /** 트리거 크기 */
+  size?: ComponentSize;
+  /** 테두리 없는 스타일 */
+  inset?: boolean;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: unknown) => string | undefined;
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
+
+  /** 다이얼로그 옵션 */
+  dialogOptions?: DialogShowOptions;
+}
+
+// 스타일
+const containerClass = clsx("inline-flex items-center", "group");
+const selectedValueClass = clsx("flex-1", "whitespace-nowrap", "overflow-hidden", "text-ellipsis");
+const actionButtonClass = clsx(
+  "flex-shrink-0",
+  "p-0.5",
+  "rounded",
+  "cursor-pointer",
+  "transition-colors",
+  "hover:bg-base-200 dark:hover:bg-base-700",
+  "focus:outline-none",
+);
+
+function getTriggerContainerClass(options: {
+  size?: ComponentSize;
+  disabled?: boolean;
+  inset?: boolean;
+  class?: string;
+}): string {
+  return twMerge(
+    triggerBaseClass,
+    "px-2 py-1",
+    options.size && triggerSizeClasses[options.size],
+    options.disabled && triggerDisabledClass,
+    options.inset && triggerInsetClass,
+    options.class,
+  );
+}
+
+export function DataSelectButton<TItem, TKey = string | number>(
+  props: DataSelectButtonProps<TItem, TKey>,
+): JSX.Element {
+  const [local] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "load",
+    "modal",
+    "renderItem",
+    "multiple",
+    "required",
+    "disabled",
+    "size",
+    "inset",
+    "validate",
+    "touchMode",
+    "dialogOptions",
+  ]);
+
+  const dialog = useDialog();
+
+  // value를 항상 배열로 정규화
+  const normalizeKeys = (value: TKey | TKey[] | undefined): TKey[] => {
+    if (value === undefined || value === null) return [];
+    if (Array.isArray(value)) return value;
+    return [value];
+  };
+
+  // controlled/uncontrolled 패턴
+  type ValueType = TKey | TKey[] | undefined;
+  const [getValue, setValue] = createControllableSignal<ValueType>({
+    value: () => local.value,
+    onChange: () => local.onValueChange as ((v: ValueType) => void) | undefined,
+  } as Parameters<typeof createControllableSignal<ValueType>>[0]);
+
+  // load를 위한 키 추적 signal
+  // eslint-disable-next-line solid/reactivity -- 초기값은 mount 시점에 한 번만 읽음
+  const [loadKeys, setLoadKeys] = createSignal<TKey[]>(normalizeKeys(local.value));
+
+  // value가 변경되면 loadKeys 업데이트
+  createEffect(
+    on(
+      () => getValue(),
+      (value) => {
+        setLoadKeys(normalizeKeys(value));
+      },
+    ),
+  );
+
+  // createResource로 load 호출
+  // eslint-disable-next-line solid/reactivity -- createResource의 fetcher는 source 변경 시 호출됨
+  const [selectedItems] = createResource(loadKeys, async (keys) => {
+    if (keys.length === 0) return [];
+    return Promise.resolve(local.load(keys));
+  });
+
+  // 값이 있는지 확인
+  const hasValue = createMemo(() => {
+    const keys = normalizeKeys(getValue());
+    return keys.length > 0;
+  });
+
+  // 지우기 가능 여부
+  const clearable = createMemo(() => !local.required && hasValue() && !local.disabled);
+
+  // 유효성 검사
+  const errorMsg = createMemo(() => {
+    const v = getValue();
+    if (local.required) {
+      const keys = normalizeKeys(v);
+      if (keys.length === 0) return "필수 입력 항목입니다";
+    }
+    return local.validate?.(v);
+  });
+
+  // 모달 열기
+  const handleOpenModal = async () => {
+    if (local.disabled) return;
+
+    const result = await dialog.show<DataSelectModalResult<TKey>>(
+      local.modal,
+      local.dialogOptions ?? {},
+    );
+
+    if (result) {
+      const newKeys = result.selectedKeys;
+      if (local.multiple) {
+        setValue(newKeys);
+      } else {
+        setValue(newKeys.length > 0 ? newKeys[0] : undefined);
+      }
+    }
+  };
+
+  // 지우기
+  const handleClear = (e: MouseEvent) => {
+    e.stopPropagation();
+    if (local.multiple) {
+      setValue([] as unknown as TKey[]);
+    } else {
+      setValue(undefined);
+    }
+  };
+
+  // 선택된 값 표시
+  const renderSelectedDisplay = (): JSX.Element => {
+    const items = selectedItems();
+    if (!items || items.length === 0) {
+      return <span class={textMuted} />;
+    }
+    return (
+      <span class="flex items-center gap-1">
+        <For each={items}>
+          {(item, index) => (
+            <>
+              <Show when={index() > 0}>
+                <span class={textMuted}>,</span>
+              </Show>
+              {local.renderItem(item)}
+            </>
+          )}
+        </For>
+      </span>
+    );
+  };
+
+  // 트리거 클래스 계산
+  const triggerClassName = () =>
+    getTriggerContainerClass({
+      size: local.size,
+      disabled: local.disabled,
+      inset: local.inset,
+    });
+
+  return (
+    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+      <div data-data-select-button class={containerClass}>
+        <div
+          role="combobox"
+          aria-haspopup="dialog"
+          aria-expanded={false}
+          aria-disabled={local.disabled || undefined}
+          aria-required={local.required || undefined}
+          tabIndex={local.disabled ? -1 : 0}
+          class={triggerClassName()}
+          onKeyDown={(e) => {
+            if (local.disabled) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              void handleOpenModal();
+            }
+          }}
+        >
+          <div class={selectedValueClass}>{renderSelectedDisplay()}</div>
+          <div class="flex items-center gap-0.5">
+            <Show when={clearable()}>
+              <button
+                type="button"
+                data-clear-button
+                class={twMerge(actionButtonClass, "text-base-400 hover:text-danger-500")}
+                onClick={handleClear}
+                tabIndex={-1}
+                aria-label="선택 해제"
+              >
+                <Icon icon={IconX} size="0.875em" />
+              </button>
+            </Show>
+            <Show when={!local.disabled}>
+              <button
+                type="button"
+                data-search-button
+                class={twMerge(actionButtonClass, "text-base-400 hover:text-primary-500")}
+                onClick={() => void handleOpenModal()}
+                tabIndex={-1}
+                aria-label="검색"
+              >
+                <Icon icon={IconSearch} size="0.875em" />
+              </button>
+            </Show>
+          </div>
+        </div>
+      </div>
+    </Invalid>
+  );
+}

package/src/components/{data → features}/permission-table/PermissionTable.tsx

@@ -11,7 +11,7 @@ import {
 } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { DataSheet } from "../sheet/DataSheet";
+import { DataSheet } from "../../data/sheet/DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { borderDefault } from "../../../styles/tokens.styles";
 import type { AppPerm } from "../../../helpers/createAppStructure";

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

@@ -0,0 +1,101 @@
+import { createMemo, type JSX, mergeProps, splitProps } from "solid-js";
+import { IconEdit, IconSearch } from "@tabler/icons-solidjs";
+import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
+import { Select, type SelectProps } from "../../form-control/select/Select";
+import { Icon } from "../../display/Icon";
+import { useDialog } from "../../disclosure/DialogContext";
+import { type ComponentSize } from "../../../styles/tokens.styles";
+
+/** SharedDataSelect Props */
+export interface SharedDataSelectProps<TItem> {
+  /** 공유 데이터 접근자 */
+  data: SharedDataAccessor<TItem>;
+
+  /** 현재 선택된 값 */
+  value?: unknown;
+  /** 값 변경 콜백 */
+  onValueChange?: (value: unknown) => void;
+  /** 다중 선택 모드 */
+  multiple?: boolean;
+  /** 필수 입력 */
+  required?: boolean;
+  /** 비활성화 */
+  disabled?: boolean;
+  /** 트리거 크기 */
+  size?: ComponentSize;
+  /** 테두리 없는 스타일 */
+  inset?: boolean;
+
+  /** 항목 필터 함수 */
+  filterFn?: (item: TItem, index: number) => boolean;
+  /** 선택 모달 컴포넌트 팩토리 */
+  modal?: () => JSX.Element;
+  /** 편집 모달 컴포넌트 팩토리 */
+  editModal?: () => JSX.Element;
+
+  /** 아이템 렌더링 함수 */
+  children: (item: TItem, index: number, depth: number) => JSX.Element;
+}
+
+export function SharedDataSelect<TItem>(props: SharedDataSelectProps<TItem>): JSX.Element {
+  const [local, rest] = splitProps(props, ["data", "filterFn", "modal", "editModal", "children"]);
+
+  const dialog = useDialog();
+
+  // filterFn 적용된 items
+  const items = createMemo(() => {
+    const allItems = local.data.items();
+    if (!local.filterFn) return allItems;
+    return allItems.filter(local.filterFn);
+  });
+
+  // modal 열기
+  const handleOpenModal = async () => {
+    if (!local.modal) return;
+    await dialog.show(local.modal, {});
+  };
+
+  // editModal 열기
+  const handleOpenEditModal = async () => {
+    if (!local.editModal) return;
+    await dialog.show(local.editModal, {});
+  };
+
+  // Select의 discriminated union (multiple: true | false?)과 TItem → unknown 변환을 위해 mergeProps + as 사용
+  // getter로 래핑하여 SolidJS 반응성 lint 규칙 충족
+  const selectProps = mergeProps(rest, {
+    get items() {
+      return items();
+    },
+    get getChildren() {
+      if (!local.data.getParentKey) return undefined;
+      // eslint-disable-next-line solid/reactivity -- 반환 함수는 Select 내부 JSX tracked scope에서 호출됨
+      return (item: TItem) => {
+        const key = local.data.getKey(item);
+        return items().filter((child) => local.data.getParentKey!(child) === key);
+      };
+    },
+    get getSearchText() {
+      return local.data.getSearchText;
+    },
+    get getIsHidden() {
+      return local.data.getIsHidden;
+    },
+  }) as unknown as SelectProps;
+
+  return (
+    <Select {...selectProps}>
+      <Select.ItemTemplate>{local.children}</Select.ItemTemplate>
+      {local.modal && (
+        <Select.Action onClick={() => void handleOpenModal()} aria-label="검색">
+          <Icon icon={IconSearch} size="1em" />
+        </Select.Action>
+      )}
+      {local.editModal && (
+        <Select.Action onClick={() => void handleOpenEditModal()} aria-label="편집">
+          <Icon icon={IconEdit} size="1em" />
+        </Select.Action>
+      )}
+    </Select>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { type JSX, splitProps } from "solid-js";
+import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
+import {
+  DataSelectButton,
+  type DataSelectButtonProps,
+} from "../data-select-button/DataSelectButton";
+import { type ComponentSize } from "../../../styles/tokens.styles";
+
+/** SharedDataSelectButton Props */
+export interface SharedDataSelectButtonProps<TItem> {
+  /** 공유 데이터 접근자 */
+  data: SharedDataAccessor<TItem>;
+
+  /** 현재 선택된 키 (단일 또는 다중) */
+  value?: DataSelectButtonProps<TItem>["value"];
+  /** 값 변경 콜백 */
+  onValueChange?: DataSelectButtonProps<TItem>["onValueChange"];
+  /** 다중 선택 모드 */
+  multiple?: boolean;
+  /** 필수 입력 */
+  required?: boolean;
+  /** 비활성화 */
+  disabled?: boolean;
+  /** 트리거 크기 */
+  size?: ComponentSize;
+  /** 테두리 없는 스타일 */
+  inset?: boolean;
+
+  /** 선택 모달 컴포넌트 팩토리 */
+  modal: () => JSX.Element;
+  /** 아이템 렌더링 함수 */
+  children: (item: TItem) => JSX.Element;
+}
+
+export function SharedDataSelectButton<TItem>(
+  props: SharedDataSelectButtonProps<TItem>,
+): JSX.Element {
+  const [local, rest] = splitProps(props, ["data", "children"]);
+
+  return (
+    <DataSelectButton
+      load={(keys) => local.data.items().filter((item) => keys.includes(local.data.getKey(item)))}
+      renderItem={local.children}
+      {...rest}
+    />
+  );
+}

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

@@ -0,0 +1,85 @@
+import { createMemo, type JSX, Show, splitProps } from "solid-js";
+import { IconExternalLink } from "@tabler/icons-solidjs";
+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";
+
+/** SharedDataSelectList Props */
+export interface SharedDataSelectListProps<TItem> {
+  /** 공유 데이터 접근자 */
+  data: SharedDataAccessor<TItem>;
+
+  /** 현재 선택된 값 */
+  value?: TItem;
+  /** 값 변경 콜백 */
+  onValueChange?: (value: TItem | undefined) => void;
+  /** 필수 입력 */
+  required?: boolean;
+  /** 비활성화 */
+  disabled?: boolean;
+
+  /** 항목 필터 함수 */
+  filterFn?: (item: TItem, index: number) => boolean;
+  /** 값 변경 가드 (false 반환 시 변경 차단) */
+  canChange?: (item: TItem | undefined) => boolean | Promise<boolean>;
+  /** 페이지 크기 (있으면 Pagination 자동 표시) */
+  pageSize?: number;
+  /** 헤더 텍스트 */
+  header?: string;
+  /** 관리 모달 컴포넌트 팩토리 */
+  modal?: () => JSX.Element;
+
+  /** 서브 컴포넌트용 children (ItemTemplate 등) */
+  children: JSX.Element;
+}
+
+export function SharedDataSelectList<TItem>(props: SharedDataSelectListProps<TItem>): JSX.Element {
+  const [local, rest] = splitProps(props, ["data", "filterFn", "modal", "header", "children"]);
+
+  const dialog = useDialog();
+
+  // filterFn 적용된 items
+  const items = createMemo(() => {
+    const allItems = local.data.items();
+    if (!local.filterFn) return allItems;
+    return allItems.filter(local.filterFn);
+  });
+
+  // modal 열기
+  const handleOpenModal = async () => {
+    if (!local.modal) return;
+    await dialog.show(local.modal, {});
+  };
+
+  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>
+      {local.children}
+    </SelectList>
+  );
+}

package/src/components/form-control/checkbox/Checkbox.styles.ts

@@ -1,6 +1,5 @@
 import clsx from "clsx";
 import {
-  bgSurface,
   borderDefault,
   type ComponentSize,
   disabledOpacity,
@@ -32,7 +31,8 @@ export const indicatorBaseClass = clsx(
   "size-4",
   "border",
   borderDefault,
-  bgSurface,
+  // bgSurface,
+  "bg-primary-50 dark:bg-primary-950/30",
   "transition-colors",
 );
 

package/src/components/form-control/checkbox/Checkbox.tsx

@@ -90,27 +90,25 @@ export const Checkbox: ParentComponent<CheckboxProps> = (props) => {
 
   return (
     <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
-      <div class="inline-flex">
-        <label
-          {...rest}
-          use:ripple={!local.disabled}
-          role="checkbox"
-          aria-checked={value()}
-          tabIndex={local.disabled ? -1 : 0}
-          class={getWrapperClass()}
-          style={local.style}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-        >
-          <div class={getIndicatorClass()}>
-            <Show when={value()}>
-              <Icon icon={IconCheck} size="1em" />
-            </Show>
-          </div>
-          <Show when={local.children}>
-            <span>{local.children}</span>
+      <div
+        {...rest}
+        use:ripple={!local.disabled}
+        role="checkbox"
+        aria-checked={value()}
+        tabIndex={local.disabled ? -1 : 0}
+        class={getWrapperClass()}
+        style={local.style}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      >
+        <div class={getIndicatorClass()}>
+          <Show when={value()}>
+            <Icon icon={IconCheck} size="1em" />
           </Show>
-        </label>
+        </div>
+        <Show when={local.children}>
+          <span>{local.children}</span>
+        </Show>
       </div>
     </Invalid>
   );

package/src/components/form-control/checkbox/Radio.tsx

@@ -91,27 +91,25 @@ export const Radio: ParentComponent<RadioProps> = (props) => {
 
   return (
     <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
-      <div class="inline-flex">
-        <label
-          {...rest}
-          use:ripple={!local.disabled}
-          role="radio"
-          aria-checked={value()}
-          tabIndex={local.disabled ? -1 : 0}
-          class={getWrapperClass()}
-          style={local.style}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-        >
-          <div class={getIndicatorClass()}>
-            <Show when={value()}>
-              <div class={radioDotClass} />
-            </Show>
-          </div>
-          <Show when={local.children}>
-            <span>{local.children}</span>
+      <div
+        {...rest}
+        use:ripple={!local.disabled}
+        role="radio"
+        aria-checked={value()}
+        tabIndex={local.disabled ? -1 : 0}
+        class={getWrapperClass()}
+        style={local.style}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      >
+        <div class={getIndicatorClass()}>
+          <Show when={value()}>
+            <div class={radioDotClass} />
           </Show>
-        </label>
+        </div>
+        <Show when={local.children}>
+          <span>{local.children}</span>
+        </Show>
       </div>
     </Invalid>
   );