@simplysm/solid 13.0.75 → 13.0.76

package/tests/components/layout/sidebar/SidebarContainer.spec.tsx

@@ -15,13 +15,13 @@ vi.mock("@solidjs/router", () => ({
   useNavigate: vi.fn(() => vi.fn()),
 }));
 
-import { Sidebar, useSidebarContext } from "../../../../src";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { Sidebar, useSidebar } from "../../../../src";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 // ToggleCapture helper - Extract setToggle from Context for external control
 const ToggleCapture: Component<{ onCapture: (setToggle: Setter<boolean>) => void }> = (props) => {
-  const { setToggle } = useSidebarContext();
+  const { setToggle } = useSidebar();
    
   props.onCapture(setToggle);
   return null;
@@ -38,20 +38,6 @@ describe("SidebarContainer component", () => {
     localStorage.removeItem("test.i18n-locale");
   });
 
-  describe("basic rendering", () => {
-    it("displays children inside container", () => {
-      const { getByText } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Sidebar.Container>
-          <span>Content</span>
-        </Sidebar.Container>
-        </I18nProvider></ConfigProvider>
-      ));
-
-      expect(getByText("Content")).toBeTruthy();
-    });
-  });
-
   describe("padding-left handling", () => {
     it("applies padding-left when open on desktop", () => {
       mockCreateMediaQuery.mockReturnValue(() => true); // Desktop
@@ -231,32 +217,4 @@ describe("SidebarContainer component", () => {
     });
   });
 
-  describe("style merging", () => {
-    it("merges custom classes", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-          <Sidebar.Container class="my-custom-class">
-          <div>Content</div>
-        </Sidebar.Container>
-        </I18nProvider></ConfigProvider>
-      ));
-
-      const containerEl = container.firstElementChild as HTMLElement;
-      expect(containerEl.classList.contains("my-custom-class")).toBe(true);
-    });
-
-    it("merges custom styles", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <Sidebar.Container style={{ "background-color": "red" }}>
-          <div>Content</div>
-        </Sidebar.Container>
-        </I18nProvider></ConfigProvider>
-      ));
-
-      const containerEl = container.firstElementChild as HTMLElement;
-      expect(containerEl.style.backgroundColor).toBe("red");
-    });
-  });
 });

package/tests/components/layout/sidebar/SidebarMenu.spec.tsx

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, fireEvent } from "@solidjs/testing-library";
 import { Router } from "@solidjs/router";
 import { Sidebar, type AppMenu } from "../../../../src";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 // Mock pathname signal
@@ -61,56 +61,6 @@ describe("SidebarMenu", () => {
     ));
   };
 
-  describe("rendering", () => {
-    it("renders menu items", () => {
-      const menus: AppMenu[] = [
-        { title: "Dashboard", href: "/dashboard" },
-        { title: "Settings", href: "/settings" },
-      ];
-
-      const { getByText } = renderWithRouter(menus);
-
-      expect(getByText("Dashboard")).toBeTruthy();
-      expect(getByText("Settings")).toBeTruthy();
-    });
-
-    it("displays MENU header", () => {
-      const menus: AppMenu[] = [{ title: "Home", href: "/" }];
-
-      const { getByText } = renderWithRouter(menus);
-
-      expect(getByText("MENU")).toBeTruthy();
-    });
-
-    it("renders nested menu", () => {
-      const menus: AppMenu[] = [
-        {
-          title: "Settings",
-          children: [
-            { title: "Profile", href: "/settings/profile" },
-            { title: "Security", href: "/settings/security" },
-          ],
-        },
-      ];
-
-      const { getByText } = renderWithRouter(menus);
-
-      expect(getByText("Settings")).toBeTruthy();
-    });
-
-    it("renders menu with icon", () => {
-      const MockIcon = (props: { class?: string }) => (
-        <svg data-testid="mock-icon" class={props.class} />
-      );
-
-      const menus: AppMenu[] = [{ title: "Dashboard", href: "/dashboard", icon: MockIcon }];
-
-      const { container } = renderWithRouter(menus);
-
-      expect(container.querySelector("[data-testid='mock-icon']")).toBeTruthy();
-    });
-  });
-
   describe("link behavior", () => {
     it("navigates using SPA routing on internal link click", () => {
       const menus: AppMenu[] = [{ title: "Dashboard", href: "/dashboard" }];
@@ -204,27 +154,4 @@ describe("SidebarMenu", () => {
     });
   });
 
-  describe("style merging", () => {
-    it("merges custom classes", () => {
-      const menus: AppMenu[] = [{ title: "Home", href: "/" }];
-
-      const { container } = render(() => (
-        <ConfigProvider clientName="test">
-          <I18nProvider>
-            <Router base="" root={(props) => props.children}>
-              {[
-                {
-                  path: "*",
-                  // eslint-disable-next-line tailwindcss/no-custom-classname
-                  component: () => <Sidebar.Menu menus={menus} class="my-custom-class" />,
-                },
-              ]}
-            </Router>
-          </I18nProvider>
-        </ConfigProvider>
-      ));
-
-      expect(container.querySelector(".my-custom-class")).toBeTruthy();
-    });
-  });
 });

package/tests/components/layout/sidebar/SidebarUser.spec.tsx

@@ -15,30 +15,6 @@ describe("SidebarUser", () => {
     vi.restoreAllMocks();
   });
 
-  describe("rendering", () => {
-    it("renders name prop", () => {
-      const { getByText } = render(() => <Sidebar.User name="User Name" />);
-
-      expect(getByText("User Name")).toBeTruthy();
-    });
-
-    it("does not have aria-expanded when menus are not provided", () => {
-      const { container } = render(() => <Sidebar.User name="User" />);
-
-      const button = container.querySelector("button");
-      expect(button?.hasAttribute("aria-expanded")).toBe(false);
-    });
-
-    it("has aria-expanded=false when menus are provided", () => {
-      const menus: SidebarUserMenu[] = [{ title: "Logout", onClick: () => {} }];
-
-      const { container } = render(() => <Sidebar.User name="User" menus={menus} />);
-
-      const button = container.querySelector("button");
-      expect(button?.getAttribute("aria-expanded")).toBe("false");
-    });
-  });
-
   describe("click behavior", () => {
     it("does not open dropdown when clicked without menus", () => {
       const { container } = render(() => <Sidebar.User name="User" />);
@@ -106,28 +82,4 @@ describe("SidebarUser", () => {
     });
   });
 
-  describe("styles based on menu presence", () => {
-    it("styles differ based on menus prop", () => {
-      const menus: SidebarUserMenu[] = [{ title: "Logout", onClick: () => {} }];
-
-      const { container: withoutMenus } = render(() => <Sidebar.User name="User" />);
-      const { container: withMenus } = render(() => <Sidebar.User name="User" menus={menus} />);
-
-      const buttonWithout = withoutMenus.querySelector("button")!;
-      const buttonWith = withMenus.querySelector("button")!;
-
-      expect(buttonWithout.className).not.toBe(buttonWith.className);
-    });
-  });
-
-  describe("style merging", () => {
-    it("merges custom classes", () => {
-      const { container } = render(() => (
-        // eslint-disable-next-line tailwindcss/no-custom-classname
-        <Sidebar.User name="User" class="my-custom-class" />
-      ));
-
-      expect(container.querySelector(".my-custom-class")).toBeTruthy();
-    });
-  });
 });

package/tests/components/layout/topbar/TopbarActions.spec.tsx

@@ -2,7 +2,7 @@ import { render, cleanup } from "@solidjs/testing-library";
 import { describe, it, expect, afterEach, beforeEach } from "vitest";
 import { createSignal, Show } from "solid-js";
 import { Topbar, createTopbarActions } from "../../../../src";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Topbar.Actions component", () => {

package/tests/components/layout/topbar/createTopbarActions.spec.tsx

@@ -55,13 +55,4 @@ describe("createTopbarActions", () => {
     setShow(false);
     expect(actionsAccessor()).toBeUndefined();
   });
-
-  it("throws error when called without TopbarContainer", () => {
-    expect(() => {
-      render(() => {
-        createTopbarActions(() => <button>Save</button>);
-        return null;
-      });
-    }).toThrow();
-  });
 });

package/tests/helpers/createAppStructure.spec.tsx

@@ -77,32 +77,6 @@ function buildTestStructure<const TItems extends AppStructureItem<string>[]>(opt
 }
 
 describe("createAppStructure", () => {
-  it("returns AppStructureProvider and useAppStructure", () => {
-    createRoot((dispose) => {
-      const { AppStructureProvider, useAppStructure } = createAppStructure(() => ({
-        items: [
-          {
-            code: "home",
-            title: "홈",
-            children: [
-              {
-                code: "user",
-                title: "사용자",
-                component: DummyA,
-                perms: ["use"] as ("use" | "edit")[],
-              },
-            ],
-          },
-        ],
-      }));
-
-      expect(AppStructureProvider).toBeTypeOf("function");
-      expect(useAppStructure).toBeTypeOf("function");
-
-      dispose();
-    });
-  });
-
   describe("usableRoutes", () => {
     it("includes paths and components for all leaf items", () => {
       createRoot((dispose) => {

package/tests/helpers/createSlot.spec.tsx

@@ -0,0 +1,99 @@
+import { describe, it, expect } from "vitest";
+import { createRoot } from "solid-js";
+import { createSlot } from "../../src/helpers/createSlot";
+
+interface TestSlotProps {
+  label: string;
+  value: number;
+}
+
+describe("createSlot", () => {
+  it("returns a [SlotComponent, useSlot] tuple", () => {
+    const [SlotComponent, useSlot] = createSlot<TestSlotProps>();
+    expect(typeof SlotComponent).toBe("function");
+    expect(typeof useSlot).toBe("function");
+  });
+
+  it("useSlot returns [accessor, Provider] tuple", () => {
+    createRoot((dispose) => {
+      const [, useSlot] = createSlot<TestSlotProps>();
+      const [item, Provider] = useSlot();
+      expect(typeof item).toBe("function");
+      expect(typeof Provider).toBe("function");
+      dispose();
+    });
+  });
+
+  it("accessor returns undefined initially", () => {
+    createRoot((dispose) => {
+      const [, useSlot] = createSlot<TestSlotProps>();
+      const [item] = useSlot();
+      expect(item()).toBeUndefined();
+      dispose();
+    });
+  });
+
+  it("registering a SlotComponent via Provider sets item in accessor", () => {
+    createRoot((dispose) => {
+      const [SlotComponent, useSlot] = createSlot<TestSlotProps>();
+      const [item, Provider] = useSlot();
+
+      Provider({
+        get children() {
+          SlotComponent({ label: "alpha", value: 1 });
+          return undefined;
+        },
+      });
+
+      expect(item()).toBeDefined();
+      expect(item()!.label).toBe("alpha");
+      expect(item()!.value).toBe(1);
+      dispose();
+    });
+  });
+
+  it("cleanup removes the registered item from accessor", () => {
+    createRoot((dispose) => {
+      const [SlotComponent, useSlot] = createSlot<TestSlotProps>();
+      const [item, Provider] = useSlot();
+
+      // Mount an inner root that registers a slot item
+      const innerDispose = createRoot((disposeInner) => {
+        Provider({
+          get children() {
+            SlotComponent({ label: "temp", value: 99 });
+            return undefined;
+          },
+        });
+        return disposeInner;
+      });
+
+      expect(item()).toBeDefined();
+
+      // Dispose the inner root — triggers onCleanup in SlotComponent
+      innerDispose();
+
+      expect(item()).toBeUndefined();
+      dispose();
+    });
+  });
+
+  it("throws 'Slot already occupied' when a second SlotComponent is registered", () => {
+    createRoot((dispose) => {
+      const [SlotComponent, useSlot] = createSlot<TestSlotProps>();
+      const [, Provider] = useSlot();
+
+      expect(() => {
+        Provider({
+          get children() {
+            SlotComponent({ label: "first", value: 1 });
+            SlotComponent({ label: "second", value: 2 });
+            return undefined;
+          },
+        });
+      }).toThrow("Slot already occupied");
+
+      dispose();
+    });
+  });
+});

package/tests/helpers/createSlots.spec.tsx

@@ -0,0 +1,100 @@
+import { describe, it, expect } from "vitest";
+import { createRoot } from "solid-js";
+import { createSlots } from "../../src/helpers/createSlots";
+
+interface TestSlotProps {
+  label: string;
+  value: number;
+}
+
+describe("createSlots", () => {
+  it("returns a [SlotComponent, useSlots] tuple", () => {
+    const [SlotComponent, useSlots] = createSlots<TestSlotProps>();
+    expect(typeof SlotComponent).toBe("function");
+    expect(typeof useSlots).toBe("function");
+  });
+
+  it("useSlots returns [accessor, Provider] tuple", () => {
+    createRoot((dispose) => {
+      const [, useSlots] = createSlots<TestSlotProps>();
+      const [items, Provider] = useSlots();
+      expect(typeof items).toBe("function");
+      expect(typeof Provider).toBe("function");
+      dispose();
+    });
+  });
+
+  it("accessor returns empty array initially", () => {
+    createRoot((dispose) => {
+      const [, useSlots] = createSlots<TestSlotProps>();
+      const [items] = useSlots();
+      expect(items()).toEqual([]);
+      dispose();
+    });
+  });
+
+  it("registering a SlotComponent via Provider adds item to accessor", () => {
+    createRoot((dispose) => {
+      const [SlotComponent, useSlots] = createSlots<TestSlotProps>();
+      const [items, Provider] = useSlots();
+
+      Provider({
+        get children() {
+          SlotComponent({ label: "alpha", value: 1 });
+          return undefined;
+        },
+      });
+
+      expect(items()).toHaveLength(1);
+      expect(items()[0].label).toBe("alpha");
+      expect(items()[0].value).toBe(1);
+      dispose();
+    });
+  });
+
+  it("registering multiple SlotComponents adds all items to accessor", () => {
+    createRoot((dispose) => {
+      const [SlotComponent, useSlots] = createSlots<TestSlotProps>();
+      const [items, Provider] = useSlots();
+
+      Provider({
+        get children() {
+          SlotComponent({ label: "first", value: 10 });
+          SlotComponent({ label: "second", value: 20 });
+          return undefined;
+        },
+      });
+
+      expect(items()).toHaveLength(2);
+      expect(items()[0].label).toBe("first");
+      expect(items()[1].label).toBe("second");
+      dispose();
+    });
+  });
+
+  it("cleanup removes the registered item from accessor", () => {
+    createRoot((dispose) => {
+      const [SlotComponent, useSlots] = createSlots<TestSlotProps>();
+      const [items, Provider] = useSlots();
+
+      // Mount an inner root that registers a slot item
+      const innerDispose = createRoot((disposeInner) => {
+        Provider({
+          get children() {
+            SlotComponent({ label: "temp", value: 42 });
+            return undefined;
+          },
+        });
+        return disposeInner;
+      });
+
+      expect(items()).toHaveLength(1);
+
+      // Dispose the inner root — triggers onCleanup in SlotComponent
+      innerDispose();
+
+      expect(items()).toEqual([]);
+      dispose();
+    });
+  });
+});

package/tests/hooks/createControllableSignal.spec.ts

@@ -66,17 +66,6 @@ describe("createControllableSignal hook", () => {
       });
     });
 
-    it("value() is set to initial value when onChange is not provided", () => {
-      createRoot((dispose) => {
-        const [value] = createControllableSignal({
-          value: () => "initial",
-          onChange: () => undefined,
-        });
-
-        expect(value()).toBe("initial");
-        dispose();
-      });
-    });
   });
 
   describe("Function-form setter", () => {
@@ -133,45 +122,6 @@ describe("createControllableSignal hook", () => {
   });
 
   describe("Support various types", () => {
-    it("supports number type", () => {
-      createRoot((dispose) => {
-        const [value, setValue] = createControllableSignal({
-          value: () => 0,
-          onChange: () => undefined,
-        });
-
-        setValue(42);
-        expect(value()).toBe(42);
-        dispose();
-      });
-    });
-
-    it("supports string type", () => {
-      createRoot((dispose) => {
-        const [value, setValue] = createControllableSignal({
-          value: () => "hello",
-          onChange: () => undefined,
-        });
-
-        setValue("world");
-        expect(value()).toBe("world");
-        dispose();
-      });
-    });
-
-    it("supports object type", () => {
-      createRoot((dispose) => {
-        const [value, setValue] = createControllableSignal({
-          value: () => ({ count: 0 }),
-          onChange: () => undefined,
-        });
-
-        setValue({ count: 10 });
-        expect(value()).toEqual({ count: 10 });
-        dispose();
-      });
-    });
-
     it("can store function wrapped in object", () => {
       createRoot((dispose) => {
         const fn1 = () => "first";

package/tests/hooks/createControllableStore.spec.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from "vitest";
+import { createRoot } from "solid-js";
+import { createControllableStore } from "../../src/hooks/createControllableStore";
+import { DateTime } from "@simplysm/core-common";
+
+describe("createControllableStore", () => {
+  it("calls onChange when store value changes", () => {
+    const onChange = vi.fn();
+
+    createRoot((dispose) => {
+      const [store, setStore] = createControllableStore<{ name: string }>({
+        value: () => ({ name: "a" }),
+        onChange: () => onChange,
+      });
+
+      expect(store.name).toBe("a");
+
+      setStore("name", "b");
+
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ name: "b" }));
+      dispose();
+    });
+  });
+
+  it("does not call onChange when value is unchanged", () => {
+    const onChange = vi.fn();
+
+    createRoot((dispose) => {
+      const [, setStore] = createControllableStore<{ name: string }>({
+        value: () => ({ name: "a" }),
+        onChange: () => onChange,
+      });
+
+      setStore("name", "a");
+
+      expect(onChange).not.toHaveBeenCalled();
+      dispose();
+    });
+  });
+
+  it("correctly detects changes in DateTime values", () => {
+    const onChange = vi.fn();
+
+    createRoot((dispose) => {
+      const dt1 = new DateTime(2025, 1, 1, 0, 0, 0);
+      const dt2 = new DateTime(2025, 6, 15, 12, 30, 0);
+
+      const [, setStore] = createControllableStore<{ date: DateTime }>({
+        value: () => ({ date: dt1 }),
+        onChange: () => onChange,
+      });
+
+      // Change to different DateTime — should trigger onChange
+      setStore("date", dt2);
+      expect(onChange).toHaveBeenCalledTimes(1);
+
+      onChange.mockClear();
+
+      // Set same tick DateTime — should NOT trigger onChange
+      setStore("date", new DateTime(dt2.tick));
+      expect(onChange).not.toHaveBeenCalled();
+
+      dispose();
+    });
+  });
+});

package/tests/hooks/createMountTransition.spec.ts

@@ -15,15 +15,6 @@ describe("createMountTransition", () => {
     vi.useRealTimers();
   });
 
-  it("mounted=false and animating=false when open=false", () => {
-    createRoot((dispose) => {
-      const { mounted, animating } = createMountTransition(() => false);
-      expect(mounted()).toBe(false);
-      expect(animating()).toBe(false);
-      dispose();
-    });
-  });
-
   it("mounted=true when open changes to true", async () => {
     const outerDispose = await new Promise<() => void>((resolveDispose) => {
       void createRoot(async (dispose) => {

package/tests/hooks/useLocalStorage.spec.tsx

@@ -13,40 +13,6 @@ describe("useLocalStorage", () => {
     localStorage.clear();
   });
 
-  it("returns undefined when no initial value is provided", () => {
-    let value!: () => string | undefined;
-
-    function TestComponent() {
-      [value] = useLocalStorage<string>("test-key");
-      return <div />;
-    }
-
-    render(() => (
-      <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <TestComponent />
-      </ConfigContext.Provider>
-    ));
-
-    expect(value()).toBeUndefined();
-  });
-
-  it("returns provided initial value", () => {
-    let value!: () => string | undefined;
-
-    function TestComponent() {
-      [value] = useLocalStorage("test-key", "default");
-      return <div />;
-    }
-
-    render(() => (
-      <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <TestComponent />
-      </ConfigContext.Provider>
-    ));
-
-    expect(value()).toBe("default");
-  });
-
   it("returns existing value from localStorage if available", () => {
     localStorage.setItem("testApp.test-key", JSON.stringify("stored"));