@simplysm/solid 13.0.16 → 13.0.24

package/src/components/form-control/select/SelectItem.tsx

@@ -30,18 +30,18 @@ const SelectItemChildren: ParentComponent = (props) => (
   </div>
 );
 
-export interface SelectItemProps<T = unknown> extends Omit<
+export interface SelectItemProps<TValue = unknown> extends Omit<
   JSX.ButtonHTMLAttributes<HTMLButtonElement>,
   "value" | "onClick"
 > {
   /** 아이템의 값 */
-  value: T;
+  value: TValue;
 
   /** 비활성화 */
   disabled?: boolean;
 }
 
-interface SelectItemComponent<T = unknown> extends ParentComponent<SelectItemProps<T>> {
+interface SelectItemComponent<TValue = unknown> extends ParentComponent<SelectItemProps<TValue>> {
   Children: typeof SelectItemChildren;
 }
 

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

@@ -12,17 +12,17 @@ import type { ComponentSize } from "../../../styles/tokens.styles";
 
 // ── Types ──
 
-interface StatePresetItem<T> {
+interface StatePresetItem<TValue> {
   name: string;
-  state: T;
+  state: TValue;
 }
 
 type StatePresetSize = ComponentSize;
 
-export interface StatePresetProps<T> {
+export interface StatePresetProps<TValue> {
   presetKey: string;
-  value: T;
-  onValueChange: (value: T) => void;
+  value: TValue;
+  onValueChange: (value: TValue) => void;
   size?: StatePresetSize;
   class?: string;
   style?: JSX.CSSProperties;
@@ -107,14 +107,14 @@ const iconSize = "0.85em";
 
 // ── Component ──
 
-function StatePresetInner<T>(props: StatePresetProps<T>): JSX.Element {
+function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element {
   const [local] = splitProps(props, ["presetKey", "value", "onValueChange", "size", "class", "style"]);
 
   const notification = useNotification();
 
   // presetKey는 마운트 시 한 번만 설정되는 식별자이므로 즉시 평가하여 캡처
   /* eslint-disable solid/reactivity */
-  const [presets, setPresets] = useSyncConfig<StatePresetItem<T>[]>(`state-preset.${local.presetKey}`, []);
+  const [presets, setPresets] = useSyncConfig<StatePresetItem<TValue>[]>(`state-preset.${local.presetKey}`, []);
   /* eslint-enable solid/reactivity */
   const [adding, setAdding] = createSignal(false);
   const [inputValue, setInputValue] = createSignal("");
@@ -143,7 +143,7 @@ function StatePresetInner<T>(props: StatePresetProps<T>): JSX.Element {
       return;
     }
 
-    const newPreset: StatePresetItem<T> = {
+    const newPreset: StatePresetItem<TValue> = {
       name,
       state: objClone(local.value),
     };
@@ -153,7 +153,7 @@ function StatePresetInner<T>(props: StatePresetProps<T>): JSX.Element {
     setInputValue("");
   }
 
-  function handleRestore(preset: StatePresetItem<T>): void {
+  function handleRestore(preset: StatePresetItem<TValue>): void {
     if (!objEqual(local.value, preset.state)) {
       local.onValueChange(objClone(preset.state));
     }
@@ -278,4 +278,4 @@ function StatePresetInner<T>(props: StatePresetProps<T>): JSX.Element {
   );
 }
 
-export const StatePreset = StatePresetInner as <T>(props: StatePresetProps<T>) => JSX.Element;
+export const StatePreset = StatePresetInner as <TValue>(props: StatePresetProps<TValue>) => JSX.Element;

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

@@ -17,10 +17,12 @@ const headerClass = clsx(
   "flex",
   "items-center",
   "p-2",
+  "m-1",
+  "rounded-md",
   "text-left",
   "cursor-pointer",
   "transition-colors",
-  "hover:bg-base-100",
+  "hover:bg-base-500/10",
   "dark:hover:bg-base-700",
 );
 
@@ -95,8 +97,7 @@ export const SidebarUser: Component<SidebarUserProps> = (props) => {
     menu.onClick();
   };
 
-  const getHeaderClassName = () =>
-    twMerge(headerClass, !hasMenus() && headerReadonlyClass, open() && "border-b border-b-base-50");
+  const getHeaderClassName = () => twMerge(headerClass, !hasMenus() && headerReadonlyClass);
 
   const getContainerClassName = () => twMerge(containerClass, local.class);
 
@@ -123,6 +124,7 @@ export const SidebarUser: Component<SidebarUserProps> = (props) => {
       </button>
       <Show when={hasMenus()}>
         <Collapse open={open()}>
+          <hr class={clsx("border-base-200 dark:border-base-700")} />
           <List inset>
             <For each={local.menus}>
               {(menu) => <ListItem onClick={() => handleMenuClick(menu)}>{menu.title}</ListItem>}

package/src/helpers/createAppStructure.ts

@@ -54,6 +54,7 @@ export interface AppStructure<TModule> {
   usableMenus: Accessor<SidebarMenuItem[]>;
   usableFlatMenus: Accessor<AppFlatMenu[]>;
   permRecord: Accessor<Record<string, boolean>>;
+  getTitleChainByHref(href: string): string[];
 }
 
 // ── 내부 헬퍼 ──
@@ -150,6 +151,23 @@ function flattenMenus(menus: SidebarMenuItem[], titleChain: string[] = []): AppF
   return result;
 }
 
+function findItemChainByCodes<TModule>(
+  items: AppStructureItem<TModule>[],
+  codes: string[],
+): AppStructureItem<TModule>[] {
+  const result: AppStructureItem<TModule>[] = [];
+
+  let currentItems = items;
+  for (const code of codes) {
+    const found = currentItems.find((item) => item.code === code);
+    if (found === undefined) break;
+    result.push(found);
+    currentItems = isGroupItem(found) ? found.children : [];
+  }
+
+  return result;
+}
+
 // ── 메인 함수 ──
 
 export function createAppStructure<TModule>(opts: {
@@ -179,5 +197,9 @@ export function createAppStructure<TModule>(opts: {
     usableMenus,
     usableFlatMenus,
     permRecord,
+    getTitleChainByHref(href: string): string[] {
+      const codes = href.split("/").filter(Boolean);
+      return findItemChainByCodes(opts.items, codes).map((item) => item.title);
+    },
   };
 }

package/src/hooks/createControllableSignal.ts

@@ -7,7 +7,7 @@ import { createSignal, createEffect } from "solid-js";
  * @remarks
  * 함수를 저장해야 할 경우 객체로 감싸기: `createControllableSignal<{ fn: () => void }>(...)`
  */
-type NotFunction<T> = T extends (...args: unknown[]) => unknown ? never : T;
+type NotFunction<TValue> = TValue extends (...args: unknown[]) => unknown ? never : TValue;
 
 /**
  * Controlled/Uncontrolled 패턴을 지원하는 signal hook
@@ -35,11 +35,11 @@ type NotFunction<T> = T extends (...args: unknown[]) => unknown ? never : T;
  * setOpen(prev => !prev);
  * ```
  */
-export function createControllableSignal<T>(options: {
-  value: () => T & NotFunction<T>;
-  onChange: () => ((value: T) => void) | undefined;
+export function createControllableSignal<TValue>(options: {
+  value: () => TValue & NotFunction<TValue>;
+  onChange: () => ((value: TValue) => void) | undefined;
 }) {
-  const [internalValue, setInternalValue] = createSignal<T>(options.value());
+  const [internalValue, setInternalValue] = createSignal<TValue>(options.value());
 
   // props 변경 시 내부 상태 동기화 (props 우선)
   createEffect(() => {
@@ -49,8 +49,8 @@ export function createControllableSignal<T>(options: {
 
   const isControlled = () => options.onChange() !== undefined;
   const value = () => (isControlled() ? options.value() : internalValue());
-  const setValue = (newValue: T | ((prev: T) => T)) => {
-    const resolved = typeof newValue === "function" ? (newValue as (prev: T) => T)(value()) : newValue;
+  const setValue = (newValue: TValue | ((prev: TValue) => TValue)) => {
+    const resolved = typeof newValue === "function" ? (newValue as (prev: TValue) => TValue)(value()) : newValue;
 
     if (isControlled()) {
       options.onChange()?.(resolved);

package/src/hooks/useLocalStorage.ts

@@ -27,28 +27,31 @@ import { useConfig } from "../providers/ConfigContext";
  * setToken(undefined);
  * ```
  */
-export function useLocalStorage<T>(key: string, initialValue?: T): [Accessor<T | undefined>, Setter<T | undefined>] {
+export function useLocalStorage<TValue>(
+  key: string,
+  initialValue?: TValue,
+): [Accessor<TValue | undefined>, Setter<TValue | undefined>] {
   const config = useConfig();
   const prefixedKey = `${config.clientName}.${key}`;
 
   // localStorage에서 초기값 읽기
-  let storedValue: T | undefined = initialValue;
+  let storedValue: TValue | undefined = initialValue;
   try {
     const item = localStorage.getItem(prefixedKey);
     if (item !== null) {
-      storedValue = JSON.parse(item) as T;
+      storedValue = JSON.parse(item) as TValue;
     }
   } catch {
     // JSON 파싱 실패 시 초기값 사용
   }
 
-  const [value, setValue] = createSignal<T | undefined>(storedValue);
+  const [value, setValue] = createSignal<TValue | undefined>(storedValue);
 
-  const setAndStore = (newValue: T | undefined | ((prev: T | undefined) => T | undefined)) => {
-    let resolved: T | undefined;
+  const setAndStore = (newValue: TValue | undefined | ((prev: TValue | undefined) => TValue | undefined)) => {
+    let resolved: TValue | undefined;
 
     if (typeof newValue === "function") {
-      resolved = (newValue as (prev: T | undefined) => T | undefined)(value());
+      resolved = (newValue as (prev: TValue | undefined) => TValue | undefined)(value());
       setValue(() => resolved);
     } else {
       resolved = newValue;
@@ -64,5 +67,5 @@ export function useLocalStorage<T>(key: string, initialValue?: T): [Accessor<T |
     return resolved;
   };
 
-  return [value, setAndStore as Setter<T | undefined>];
+  return [value, setAndStore as Setter<TValue | undefined>];
 }

package/src/hooks/useSyncConfig.ts

@@ -22,10 +22,13 @@ import { useConfig } from "../providers/ConfigContext";
  * </Show>
  * ```
  */
-export function useSyncConfig<T>(key: string, defaultValue: T): [Accessor<T>, Setter<T>, Accessor<boolean>] {
+export function useSyncConfig<TValue>(
+  key: string,
+  defaultValue: TValue,
+): [Accessor<TValue>, Setter<TValue>, Accessor<boolean>] {
   const config = useConfig();
   const prefixedKey = `${config.clientName}.${key}`;
-  const [value, setValue] = createSignal<T>(defaultValue);
+  const [value, setValue] = createSignal<TValue>(defaultValue);
   const [loading, setLoading] = createSignal(false);
 
   // Initialize from storage
@@ -35,7 +38,7 @@ export function useSyncConfig<T>(key: string, defaultValue: T): [Accessor<T>, Se
       try {
         const stored = localStorage.getItem(prefixedKey);
         if (stored !== null) {
-          setValue(() => JSON.parse(stored) as T);
+          setValue(() => JSON.parse(stored) as TValue);
         }
       } catch {
         // Ignore parse errors, keep default value
@@ -48,14 +51,14 @@ export function useSyncConfig<T>(key: string, defaultValue: T): [Accessor<T>, Se
     try {
       const stored = await config.syncStorage.getItem(prefixedKey);
       if (stored !== null) {
-        setValue(() => JSON.parse(stored) as T);
+        setValue(() => JSON.parse(stored) as TValue);
       }
     } catch {
       // Fall back to localStorage on error
       try {
         const stored = localStorage.getItem(prefixedKey);
         if (stored !== null) {
-          setValue(() => JSON.parse(stored) as T);
+          setValue(() => JSON.parse(stored) as TValue);
         }
       } catch {
         // Ignore parse errors

package/src/index.ts

@@ -1,9 +1,17 @@
-// form-control
+//#region ========== Form Control ==========
+
+// Button
 export * from "./components/form-control/Button";
+
+// Select
 export * from "./components/form-control/select/Select";
 export * from "./components/form-control/select/SelectContext";
+
+// Combobox
 export * from "./components/form-control/combobox/Combobox";
 export * from "./components/form-control/combobox/ComboboxContext";
+
+// Field
 export * from "./components/form-control/field/TextInput";
 export * from "./components/form-control/field/NumberInput";
 export * from "./components/form-control/field/DatePicker";
@@ -11,11 +19,15 @@ export * from "./components/form-control/field/DateTimePicker";
 export * from "./components/form-control/field/TimePicker";
 export * from "./components/form-control/field/Textarea";
 export * from "./components/form-control/field/Field.styles";
+
+// Checkbox / Radio
 export * from "./components/form-control/checkbox/Checkbox";
 export * from "./components/form-control/checkbox/Checkbox.styles";
 export * from "./components/form-control/checkbox/Radio";
 export * from "./components/form-control/checkbox/CheckboxGroup";
 export * from "./components/form-control/checkbox/RadioGroup";
+
+// Specialty inputs
 export * from "./components/form-control/color-picker/ColorPicker";
 export * from "./components/form-control/date-range-picker/DateRangePicker";
 export * from "./components/form-control/editor/RichTextEditor";
@@ -24,14 +36,20 @@ export * from "./components/form-control/state-preset/StatePreset";
 export * from "./components/form-control/ThemeToggle";
 export * from "./components/form-control/Invalid";
 
-// layout
+//#endregion
+
+//#region ========== Layout ==========
+
 export * from "./components/layout/FormGroup";
 export * from "./components/layout/FormTable";
 export * from "./components/layout/sidebar/Sidebar";
 export * from "./components/layout/sidebar/SidebarContext";
 export * from "./components/layout/topbar/Topbar";
 
-// data
+//#endregion
+
+//#region ========== Data ==========
+
 export * from "./components/data/Table";
 export * from "./components/data/list/List";
 export * from "./components/data/list/ListContext";
@@ -45,7 +63,10 @@ export * from "./components/data/permission-table/PermissionTable";
 export * from "./components/data/kanban/Kanban";
 export * from "./components/data/kanban/KanbanContext";
 
-// display
+//#endregion
+
+//#region ========== Display ==========
+
 export * from "./components/display/Barcode";
 export * from "./components/display/Card";
 export * from "./components/display/Echarts";
@@ -53,7 +74,10 @@ export * from "./components/display/Icon";
 export * from "./components/display/Tag";
 export * from "./components/display/Alert";
 
-// disclosure
+//#endregion
+
+//#region ========== Disclosure ==========
+
 export * from "./components/disclosure/Collapse";
 export * from "./components/disclosure/Dropdown";
 export * from "./components/disclosure/Dialog";
@@ -62,23 +86,30 @@ export * from "./components/disclosure/DialogInstanceContext";
 export * from "./components/disclosure/DialogProvider";
 export * from "./components/disclosure/Tabs";
 
-// feedback
+//#endregion
+
+//#region ========== Feedback ==========
+
+// Notification
 export * from "./components/feedback/notification/NotificationContext";
 export * from "./components/feedback/notification/NotificationBell";
 export * from "./components/feedback/notification/NotificationProvider";
 export * from "./components/feedback/notification/NotificationBanner";
 
-// feedback - loading
+// Loading
 export * from "./components/feedback/loading/LoadingContext";
 export * from "./components/feedback/loading/LoadingContainer";
 export * from "./components/feedback/loading/LoadingProvider";
 
-// feedback - print
+// Print
 export * from "./components/feedback/print/Print";
 export * from "./components/feedback/print/PrintInstanceContext";
 export * from "./components/feedback/Progress";
 
-// providers
+//#endregion
+
+//#region ========== Providers ==========
+
 export * from "./providers/ConfigContext";
 export * from "./providers/InitializeProvider";
 export { useTheme } from "./providers/ThemeContext";
@@ -89,7 +120,10 @@ export * from "./providers/shared-data/SharedDataContext";
 export * from "./providers/shared-data/SharedDataProvider";
 export * from "./providers/shared-data/SharedDataChangeEvent";
 
-// hooks
+//#endregion
+
+//#region ========== Hooks ==========
+
 export * from "./hooks/useLocalStorage";
 export * from "./hooks/useSyncConfig";
 export * from "./hooks/useLogger";
@@ -100,14 +134,23 @@ export { createMountTransition } from "./hooks/createMountTransition";
 export { createPwaUpdate } from "./hooks/createPwaUpdate";
 export { useRouterLink } from "./hooks/useRouterLink";
 
-// styles
+//#endregion
+
+//#region ========== Styles ==========
+
 export * from "./styles/tokens.styles";
 export * from "./styles/patterns.styles";
 
-// directives
+//#endregion
+
+//#region ========== Directives ==========
+
 export { ripple } from "./directives/ripple";
 
-// helpers
+//#endregion
+
+//#region ========== Helpers ==========
+
 export { mergeStyles } from "./helpers/mergeStyles";
 export { splitSlots } from "./helpers/splitSlots";
 export { createAppStructure } from "./helpers/createAppStructure";
@@ -120,3 +163,5 @@ export type {
   AppFlatMenu,
   AppStructure,
 } from "./helpers/createAppStructure";
+
+//#endregion

package/src/providers/InitializeProvider.tsx

@@ -6,7 +6,7 @@ import { ThemeProvider } from "./ThemeContext";
 import { NotificationProvider } from "../components/feedback/notification/NotificationProvider";
 import { NotificationBanner } from "../components/feedback/notification/NotificationBanner";
 import { LoadingProvider } from "../components/feedback/loading/LoadingProvider";
-import { DialogProvider } from "../components/disclosure/DialogProvider";
+
 import { createPwaUpdate } from "../hooks/createPwaUpdate";
 import { useLogger } from "../hooks/useLogger";
 
@@ -50,7 +50,6 @@ function GlobalErrorLogger() {
  * - 알림 시스템 + 배너
  * - 전역 에러 캡처 (window.onerror, unhandledrejection)
  * - 루트 로딩 오버레이
- * - 프로그래매틱 다이얼로그
  *
  * @example
  * ```tsx
@@ -71,9 +70,7 @@ export const InitializeProvider: ParentComponent<{ config: AppConfig }> = (props
           <NotificationBanner />
           <GlobalErrorLogger />
           <PwaUpdater />
-          <LoadingProvider variant={props.config.loadingVariant}>
-            <DialogProvider>{props.children}</DialogProvider>
-          </LoadingProvider>
+          <LoadingProvider variant={props.config.loadingVariant}>{props.children}</LoadingProvider>
         </NotificationProvider>
       </ThemeProvider>
     </ConfigContext.Provider>

package/src/providers/shared-data/SharedDataContext.ts

@@ -1,21 +1,21 @@
 import { type Accessor, createContext, useContext } from "solid-js";
 
-export interface SharedDataDefinition<T> {
+export interface SharedDataDefinition<TData> {
   serviceKey: string;
-  fetch: (changeKeys?: Array<string | number>) => Promise<T[]>;
-  getKey: (item: T) => string | number;
-  orderBy: [(item: T) => unknown, "asc" | "desc"][];
+  fetch: (changeKeys?: Array<string | number>) => Promise<TData[]>;
+  getKey: (item: TData) => string | number;
+  orderBy: [(item: TData) => unknown, "asc" | "desc"][];
   filter?: unknown;
 }
 
-export interface SharedDataAccessor<T> {
-  items: Accessor<T[]>;
-  get: (key: string | number | undefined) => T | undefined;
+export interface SharedDataAccessor<TData> {
+  items: Accessor<TData[]>;
+  get: (key: string | number | undefined) => TData | undefined;
   emit: (changeKeys?: Array<string | number>) => Promise<void>;
 }
 
-export type SharedDataValue<T extends Record<string, unknown>> = {
-  [K in keyof T]: SharedDataAccessor<T[K]>;
+export type SharedDataValue<TSharedData extends Record<string, unknown>> = {
+  [K in keyof TSharedData]: SharedDataAccessor<TSharedData[K]>;
 } & {
   wait: () => Promise<void>;
   loading: Accessor<boolean>;
@@ -23,12 +23,14 @@ export type SharedDataValue<T extends Record<string, unknown>> = {
 
 export const SharedDataContext = createContext<SharedDataValue<Record<string, unknown>>>();
 
-export function useSharedData<T extends Record<string, unknown> = Record<string, unknown>>(): SharedDataValue<T> {
+export function useSharedData<
+  TSharedData extends Record<string, unknown> = Record<string, unknown>,
+>(): SharedDataValue<TSharedData> {
   const context = useContext(SharedDataContext);
   if (!context) {
     throw new Error(
       "useSharedData는 SharedDataProvider 내부에서만 사용할 수 있습니다. SharedDataProvider는 ServiceClientProvider 아래에 위치해야 합니다",
     );
   }
-  return context as unknown as SharedDataValue<T>;
+  return context as unknown as SharedDataValue<TSharedData>;
 }

package/src/providers/shared-data/SharedDataProvider.tsx

@@ -11,8 +11,8 @@ import { useServiceClient } from "../ServiceClientContext";
 import { useNotification } from "../../components/feedback/notification/NotificationContext";
 import { useLogger } from "../../hooks/useLogger";
 
-export function SharedDataProvider<T extends Record<string, unknown>>(props: {
-  definitions: { [K in keyof T]: SharedDataDefinition<T[K]> };
+export function SharedDataProvider<TSharedData extends Record<string, unknown>>(props: {
+  definitions: { [K in keyof TSharedData]: SharedDataDefinition<TSharedData[K]> };
   children: JSX.Element;
 }): JSX.Element {
   const serviceClient = useServiceClient();

package/tailwind.config.ts

@@ -45,7 +45,7 @@ export default {
       },
     },
   },
-  content: [`${__dirname}src/**/*.{ts,tsx}`],
+  content: [`${__dirname}src/**/*.{ts,tsx}`, `${__dirname}dist/**/*.js`],
   corePlugins: {
     aspectRatio: false, // Chrome 84 미지원
   },