@simplysm/solid 13.0.0-beta.6

package/src/components/form-control/state-preset/StatePreset.tsx

@@ -0,0 +1,277 @@
+import { createSignal, For, Show, splitProps } from "solid-js";
+import type { JSX } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import clsx from "clsx";
+import { IconDeviceFloppy, IconStar, IconX } from "@tabler/icons-solidjs";
+import { objClone, objEqual } from "@simplysm/core-common";
+import { usePersisted } from "../../../hooks/usePersisted";
+import { useNotification } from "../../feedback/notification/NotificationContext";
+import { Icon } from "../../display/Icon";
+import { textPlaceholder } from "../../../styles/tokens.styles";
+import type { ComponentSize } from "../../../styles/tokens.styles";
+
+// ── Types ──
+
+interface StatePresetItem<T> {
+  name: string;
+  state: T;
+}
+
+type StatePresetSize = ComponentSize;
+
+export interface StatePresetProps<T> {
+  presetKey: string;
+  value: T;
+  onValueChange: (value: T) => void;
+  size?: StatePresetSize;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+
+// ── Style constants ──
+
+const baseClass = clsx("inline-flex items-center gap-1.5", "flex-wrap");
+
+const chipClass = clsx(
+  "inline-flex items-center gap-1",
+  "rounded-full",
+  "bg-base-200 dark:bg-base-700",
+  "text-base-800 dark:text-base-200",
+  "cursor-default",
+);
+
+const chipDefaultClass = "px-3 py-1";
+
+const chipSizeClasses: Record<StatePresetSize, string> = {
+  sm: "px-2 py-0.5 text-sm",
+  lg: "px-4 py-2",
+};
+
+const chipNameBtnClass = clsx("cursor-pointer", "hover:underline", "focus:outline-none");
+
+const iconBtnClass = clsx(
+  "inline-flex items-center justify-center",
+  "rounded-full",
+  "cursor-pointer",
+  "transition-colors",
+  "focus:outline-none",
+  "hover:bg-base-300 dark:hover:bg-base-600",
+);
+
+const iconBtnDefaultClass = "p-0.5";
+
+const iconBtnSizeClasses: Record<StatePresetSize, string> = {
+  sm: "p-px",
+  lg: "p-1",
+};
+
+const starBtnClass = clsx(
+  "inline-flex items-center justify-center",
+  "rounded-full",
+  "cursor-pointer",
+  "transition-colors",
+  "focus:outline-none",
+  "text-warning-500",
+  "hover:bg-warning-100 dark:hover:bg-warning-900/40",
+);
+
+const starBtnDefaultClass = "p-1";
+
+const starBtnSizeClasses: Record<StatePresetSize, string> = {
+  sm: "p-0.5",
+  lg: "p-1.5",
+};
+
+const inputClass = clsx(
+  "rounded-full",
+  "bg-base-200 dark:bg-base-700",
+  "text-base-800 dark:text-base-200",
+  "border border-transparent",
+  "focus:ring-1 focus:ring-primary-400",
+  "focus:outline-none",
+  textPlaceholder,
+);
+
+const inputDefaultClass = "px-3 py-1 w-24";
+
+const inputSizeClasses: Record<StatePresetSize, string> = {
+  sm: "px-2 py-0.5 w-20 text-sm",
+  lg: "px-4 py-2 w-32",
+};
+
+const iconSize = "0.85em";
+
+// ── Component ──
+
+function StatePresetInner<T>(props: StatePresetProps<T>): JSX.Element {
+  const [local] = splitProps(props, ["presetKey", "value", "onValueChange", "size", "class", "style"]);
+
+  const notification = useNotification();
+
+  // presetKey는 마운트 시 한 번만 설정되는 식별자이므로 즉시 평가하여 캡처
+  /* eslint-disable solid/reactivity */
+  const [presets, setPresets] = usePersisted<StatePresetItem<T>[]>(`state-preset.${local.presetKey}`, []);
+  /* eslint-enable solid/reactivity */
+  const [adding, setAdding] = createSignal(false);
+  const [inputValue, setInputValue] = createSignal("");
+
+  // ── Handlers ──
+
+  function handleStartAdd(): void {
+    setAdding(true);
+    setInputValue("");
+  }
+
+  function handleCancelAdd(): void {
+    setAdding(false);
+    setInputValue("");
+  }
+
+  function handleConfirmAdd(): void {
+    const name = inputValue().trim();
+    if (!name) {
+      handleCancelAdd();
+      return;
+    }
+
+    if (presets().some((p) => p.name === name)) {
+      notification.warning("이름 중복", "같은 이름의 프리셋이 이미 존재합니다.");
+      return;
+    }
+
+    const newPreset: StatePresetItem<T> = {
+      name,
+      state: objClone(local.value),
+    };
+    setPresets([...presets(), newPreset]);
+    notification.info("프리셋 저장", `"${name}" 프리셋이 저장되었습니다.`);
+    setAdding(false);
+    setInputValue("");
+  }
+
+  function handleRestore(preset: StatePresetItem<T>): void {
+    if (!objEqual(local.value, preset.state)) {
+      local.onValueChange(objClone(preset.state));
+    }
+  }
+
+  function handleOverwrite(index: number): void {
+    const snapshot = [...presets()];
+    const presetName = snapshot[index].name;
+
+    const updated = snapshot.map((p, i) => (i === index ? { ...p, state: objClone(local.value) } : p));
+    setPresets(updated);
+
+    const notiId = notification.info("프리셋 덮어쓰기", `"${presetName}" 프리셋이 현재 상태로 업데이트되었습니다.`, {
+      action: {
+        label: "실행 취소",
+        onClick: () => {
+          setPresets(snapshot);
+          notification.remove(notiId);
+        },
+      },
+    });
+  }
+
+  function handleDelete(index: number): void {
+    const snapshot = [...presets()];
+    const presetName = snapshot[index].name;
+
+    const updated = snapshot.filter((_, i) => i !== index);
+    setPresets(updated);
+
+    const notiId = notification.info("프리셋 삭제", `"${presetName}" 프리셋이 삭제되었습니다.`, {
+      action: {
+        label: "실행 취소",
+        onClick: () => {
+          setPresets(snapshot);
+          notification.remove(notiId);
+        },
+      },
+    });
+  }
+
+  function handleInputKeyDown(e: KeyboardEvent): void {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleConfirmAdd();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancelAdd();
+    }
+  }
+
+  // ── Render ──
+
+  const containerClass = () => twMerge(baseClass, local.class);
+
+  const resolvedChipClass = () => twMerge(chipClass, local.size ? chipSizeClasses[local.size] : chipDefaultClass);
+
+  const resolvedIconBtnClass = () =>
+    twMerge(iconBtnClass, local.size ? iconBtnSizeClasses[local.size] : iconBtnDefaultClass);
+
+  const resolvedStarBtnClass = () =>
+    twMerge(starBtnClass, local.size ? starBtnSizeClasses[local.size] : starBtnDefaultClass);
+
+  const resolvedInputClass = () => twMerge(inputClass, local.size ? inputSizeClasses[local.size] : inputDefaultClass);
+
+  return (
+    <div class={containerClass()} style={local.style}>
+      {/* Star button - add preset */}
+      <button type="button" class={resolvedStarBtnClass()} onClick={handleStartAdd} title="프리셋 추가">
+        <Icon icon={IconStar} size={iconSize} />
+      </button>
+
+      {/* Preset chips */}
+      <For each={presets()}>
+        {(preset, index) => (
+          <span class={resolvedChipClass()}>
+            <button
+              type="button"
+              class={chipNameBtnClass}
+              onClick={() => handleRestore(preset)}
+              title={`"${preset.name}" 프리셋 적용`}
+            >
+              {preset.name}
+            </button>
+            <button
+              type="button"
+              class={resolvedIconBtnClass()}
+              onClick={() => handleOverwrite(index())}
+              title="현재 상태로 덮어쓰기"
+            >
+              <Icon icon={IconDeviceFloppy} size={iconSize} />
+            </button>
+            <button
+              type="button"
+              class={resolvedIconBtnClass()}
+              onClick={() => handleDelete(index())}
+              title="프리셋 삭제"
+            >
+              <Icon icon={IconX} size={iconSize} />
+            </button>
+          </span>
+        )}
+      </For>
+
+      {/* Inline input for naming a new preset */}
+      <Show when={adding()}>
+        <input
+          ref={(el) => {
+            // Autofocus when input appears
+            requestAnimationFrame(() => el.focus());
+          }}
+          type="text"
+          class={resolvedInputClass()}
+          placeholder="이름..."
+          value={inputValue()}
+          onInput={(e) => setInputValue(e.currentTarget.value)}
+          onKeyDown={handleInputKeyDown}
+          onBlur={() => (inputValue().trim() ? handleConfirmAdd() : handleCancelAdd())}
+        />
+      </Show>
+    </div>
+  );
+}
+
+export const StatePreset = StatePresetInner as <T>(props: StatePresetProps<T>) => JSX.Element;

package/src/components/layout/FormGroup.tsx

@@ -0,0 +1,63 @@
+import { type JSX, type ParentComponent, Show, splitProps, createContext, useContext } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export interface FormGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  inline?: boolean;
+}
+
+export interface FormGroupItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  label?: JSX.Element;
+}
+
+const FormGroupContext = createContext<{ inline: boolean }>({ inline: false });
+
+const baseClass = clsx("inline-flex flex-col gap-2");
+const inlineClass = clsx("inline-flex flex-row flex-wrap items-center gap-2");
+
+const itemInlineClass = clsx("flex flex-row items-center");
+
+const FormGroupItem: ParentComponent<FormGroupItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "label"]);
+  const ctx = useContext(FormGroupContext);
+
+  const getClassName = () => twMerge(ctx.inline ? itemInlineClass : undefined, local.class);
+
+  return (
+    <div class={getClassName()} data-form-group-item {...rest}>
+      <Show when={local.label}>
+        <label class={ctx.inline ? clsx("whitespace-nowrap font-bold", "pr-2") : "mb-1 block font-bold"}>
+          {local.label}
+        </label>
+      </Show>
+      {local.children}
+    </div>
+  );
+};
+
+interface FormGroupComponent extends ParentComponent<FormGroupProps> {
+  Item: typeof FormGroupItem;
+}
+
+const FormGroupBase: ParentComponent<FormGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "inline"]);
+
+  const getClassName = () => twMerge(local.inline ? inlineClass : baseClass, local.class);
+
+  return (
+    <FormGroupContext.Provider
+      value={{
+        get inline() {
+          return local.inline ?? false;
+        },
+      }}
+    >
+      <div data-form-group class={getClassName()} {...rest}>
+        {local.children}
+      </div>
+    </FormGroupContext.Provider>
+  );
+};
+
+export const FormGroup = FormGroupBase as FormGroupComponent;
+FormGroup.Item = FormGroupItem;

package/src/components/layout/FormTable.tsx

@@ -0,0 +1,29 @@
+import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export interface FormTableProps extends JSX.HTMLAttributes<HTMLTableElement> {}
+
+const baseClass = clsx(
+  "border-separate border-spacing-0 border-0",
+  // 모든 셀: 수직 중앙, 오른쪽/아래 패딩
+  "[&_td]:align-middle [&_th]:align-middle",
+  "[&_td]:pr-1.5 [&_th]:pr-1.5",
+  "[&_td]:pb-1 [&_th]:pb-1",
+  // 행의 마지막 셀: 오른쪽 패딩 제거
+  "[&_tr>*:last-child]:pr-0",
+  // 마지막 행 셀: 아래 패딩 제거
+  "[&_tr:last-child>*]:pb-0",
+  // th: 오른쪽 정렬, 콘텐츠 너비, 줄바꿈 방지
+  "[&_th]:w-0 [&_th]:whitespace-nowrap [&_th]:pl-1 [&_th]:text-right",
+);
+
+export const FormTable: ParentComponent<FormTableProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+
+  return (
+    <table data-form-table class={twMerge(baseClass, local.class)} {...rest}>
+      {local.children}
+    </table>
+  );
+};

package/src/components/layout/sidebar/Sidebar.tsx

@@ -0,0 +1,104 @@
+import { type JSX, type ParentComponent, splitProps, createMemo } from "solid-js";
+import { createMediaQuery } from "@solid-primitives/media";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { useSidebarContext, SM_MEDIA_QUERY } from "./SidebarContext";
+import { mergeStyles } from "../../../helpers/mergeStyles";
+import { SidebarContainer } from "./SidebarContainer";
+import { SidebarMenu } from "./SidebarMenu";
+import { SidebarUser } from "./SidebarUser";
+
+export type { SidebarContainerProps } from "./SidebarContainer";
+export type { SidebarMenuItem, SidebarMenuProps } from "./SidebarMenu";
+export type { SidebarUserMenu, SidebarUserProps } from "./SidebarUser";
+
+const baseClass = clsx(
+  "absolute",
+  "top-0",
+  "left-0",
+  "bottom-0",
+  "w-64",
+  "z-sidebar",
+  "flex",
+  "flex-col",
+  "bg-base-100",
+  "dark:bg-base-900",
+  "border-r",
+  "border-base-200",
+  "dark:border-base-700",
+  "transition-transform",
+  "duration-300",
+  "sm:duration-100",
+);
+
+const mobileOpenClass = clsx("shadow-xl");
+
+export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
+  children: JSX.Element;
+}
+
+/**
+ * 사이드바 본체 컴포넌트
+ *
+ * @remarks
+ * - SidebarContainer 내부에서 사용해야 함 (`position: absolute`로 컨테이너에 종속)
+ * - Context에서 toggle 상태를 읽어 열림/닫힘 애니메이션 적용
+ * - 토글 버튼 미포함 - useSidebarContext().setToggle로 외부에서 제어
+ *
+ * @example
+ * ```tsx
+ * <Sidebar>
+ *   <Sidebar.User menus={userMenus}>
+ *     <span>사용자</span>
+ *   </Sidebar.User>
+ *   <Sidebar.Menu menus={menuItems} />
+ * </Sidebar>
+ * ```
+ */
+interface SidebarComponent extends ParentComponent<SidebarProps> {
+  Container: typeof SidebarContainer;
+  Menu: typeof SidebarMenu;
+  User: typeof SidebarUser;
+}
+
+const SidebarBase: ParentComponent<SidebarProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "style"]);
+
+  const { toggle } = useSidebarContext();
+
+  // Tailwind sm: breakpoint 감지
+  const isDesktop = createMediaQuery(SM_MEDIA_QUERY);
+
+  // 사이드바 열림 여부 계산
+  const isOpen = createMemo(() => {
+    if (isDesktop()) {
+      return !toggle();
+    }
+    return toggle();
+  });
+
+  // transform 계산: 닫힘 시 왼쪽으로 숨김
+  const getTransform = () => {
+    return isOpen() ? "translateX(0)" : "translateX(-100%)";
+  };
+
+  const getClassName = () => twMerge(baseClass, !isDesktop() && isOpen() && mobileOpenClass, local.class);
+
+  return (
+    <aside
+      {...rest}
+      data-sidebar
+      class={getClassName()}
+      style={mergeStyles(local.style, { transform: getTransform() })}
+      aria-hidden={!isOpen()}
+      inert={!isOpen() || undefined}
+    >
+      {local.children}
+    </aside>
+  );
+};
+
+export const Sidebar = SidebarBase as SidebarComponent;
+Sidebar.Container = SidebarContainer;
+Sidebar.Menu = SidebarMenu;
+Sidebar.User = SidebarUser;

package/src/components/layout/sidebar/SidebarContainer.tsx

@@ -0,0 +1,115 @@
+import { type JSX, type ParentComponent, Show, splitProps, createMemo } from "solid-js";
+import { useBeforeLeave } from "@solidjs/router";
+import { createMediaQuery } from "@solid-primitives/media";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { SidebarContext, SM_MEDIA_QUERY } from "./SidebarContext";
+import { usePersisted } from "../../../hooks/usePersisted";
+import { mergeStyles } from "../../../helpers/mergeStyles";
+
+const backdropClass = clsx(
+  "absolute",
+  "top-0",
+  "left-0",
+  "right-0",
+  "bottom-0",
+  "z-sidebar-backdrop",
+  "bg-black/50",
+  "sm:hidden",
+);
+
+const containerClass = clsx("relative h-full transition-[padding-left] duration-100");
+
+export interface SidebarContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+/**
+ * 사이드바 컨테이너 컴포넌트
+ *
+ * @remarks
+ * - `position: relative`로 Sidebar를 포함하는 컨테이너 역할
+ * - 부모 요소에 높이가 지정되어야 함 (`h-full` 사용)
+ * - 콘텐츠 영역의 `overflow-auto`는 사용자가 직접 적용해야 함
+ * - SidebarContext.Provider로 toggle 상태 공유
+ * - usePersisted로 toggle 상태 localStorage 저장 (키: sidebar.toggle)
+ * - 데스크탑(640px+)에서 padding-left + transition으로 콘텐츠 확장/축소
+ * - 모바일(640px-)에서 backdrop 렌더링 및 클릭 시 닫기
+ * - 페이지 이동 시 모바일에서 자동 닫기
+ *
+ * @example
+ * ```tsx
+ * <div class="h-screen">
+ *   <SidebarContainer>
+ *     <Sidebar>
+ *       <SidebarUser menus={userMenus}>
+ *         <span>사용자</span>
+ *       </SidebarUser>
+ *       <SidebarMenu menus={menuItems} />
+ *     </Sidebar>
+ *     <main class="h-full overflow-auto">콘텐츠</main>
+ *   </SidebarContainer>
+ * </div>
+ * ```
+ */
+export const SidebarContainer: ParentComponent<SidebarContainerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "style"]);
+
+  const [toggle, setToggle] = usePersisted("sidebar.toggle", false);
+
+  // Tailwind sm: breakpoint 감지
+  const isDesktop = createMediaQuery(SM_MEDIA_QUERY);
+
+  // 사이드바 열림 여부 계산
+  const isOpen = createMemo(() => {
+    if (isDesktop()) {
+      return !toggle();
+    }
+    return toggle();
+  });
+
+  // backdrop 클릭 시 닫기
+  const handleBackdropClick = () => {
+    setToggle(false);
+  };
+
+  // 모바일에서 페이지 이동 시 자동 닫기
+  useBeforeLeave(() => {
+    if (!isDesktop() && toggle()) {
+      setToggle(false);
+    }
+  });
+
+  // 데스크탑에서 사이드바 열림 시 padding-left 적용 (16rem = w-64)
+  const getPaddingLeft = () => {
+    if (isDesktop() && isOpen()) {
+      return "16rem";
+    }
+    return undefined;
+  };
+
+  const getClassName = () => twMerge(containerClass, local.class);
+
+  return (
+    <SidebarContext.Provider value={{ toggle, setToggle }}>
+      <div
+        {...rest}
+        data-sidebar-container
+        class={getClassName()}
+        style={mergeStyles(local.style, { "padding-left": getPaddingLeft() })}
+      >
+        {local.children}
+        <Show when={!isDesktop() && isOpen()}>
+          <div
+            class={backdropClass}
+            onClick={handleBackdropClick}
+            onKeyDown={(e) => e.key === "Escape" && handleBackdropClick()}
+            role="button"
+            aria-label="사이드바 닫기"
+            tabIndex={0}
+          />
+        </Show>
+      </div>
+    </SidebarContext.Provider>
+  );
+};

package/src/components/layout/sidebar/SidebarContext.ts

@@ -0,0 +1,40 @@
+import { createContext, useContext, type Accessor, type Setter } from "solid-js";
+
+/**
+ * Tailwind sm: breakpoint에 해당하는 미디어 쿼리
+ * @see tailwind.config.ts screens.sm (640px)
+ */
+export const SM_MEDIA_QUERY = "(min-width: 640px)";
+
+/**
+ * 사이드바 toggle 상태 공유 Context
+ *
+ * @remarks
+ * toggle 시맨틱:
+ * - `toggle=false` (기본값): 데스크탑(640px+)에서 열림, 모바일(640px-)에서 닫힘
+ * - `toggle=true`: 데스크탑(640px+)에서 닫힘, 모바일(640px-)에서 열림 (오버레이)
+ */
+export interface SidebarContextValue {
+  toggle: Accessor<boolean>;
+  setToggle: Setter<boolean>;
+}
+
+export const SidebarContext = createContext<SidebarContextValue>();
+
+export function useSidebarContext(): SidebarContextValue {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebarContext는 SidebarContainer 내부에서만 사용할 수 있습니다");
+  }
+  return context;
+}
+
+/**
+ * SidebarContext를 선택적으로 사용 (Context 없으면 undefined 반환)
+ *
+ * @remarks
+ * SidebarContainer 외부에서도 사용 가능한 컴포넌트(예: Topbar)에서 사용
+ */
+export function useSidebarContextOptional(): SidebarContextValue | undefined {
+  return useContext(SidebarContext);
+}