@simplysm/solid 13.0.75 → 13.0.77

package/tests/components/form-control/field/DateTimePicker.spec.tsx

@@ -3,7 +3,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { DateTime } from "@simplysm/core-common";
 import { DateTimePicker } from "../../../../src/components/form-control/field/DateTimePicker";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("DateTimePicker component", () => {
@@ -12,32 +12,6 @@ describe("DateTimePicker component", () => {
   });
 
   describe("basic rendering", () => {
-    it("renders input type=datetime-local when unit=minute", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("datetime-local");
-    });
-
-    it("renders input type=datetime-local when unit=second", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="second" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("datetime-local");
-    });
-
-    it("defaults unit to minute", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.type).toBe("datetime-local");
-    });
-
-    it("defaults autocomplete to one-time-code", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.autocomplete).toBe("one-time-code");
-    });
-
     it("sets step=1 when unit=second", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="second" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
@@ -198,19 +172,12 @@ describe("DateTimePicker component", () => {
       expect(getByText("2025-03-15T10:30")).toBeTruthy();
     });
 
-    it("applies disabled style", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker disabled value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
-      ));
-      const div = container.querySelector("div.sd-datetime-field") as HTMLElement;
-      expect(div.classList.contains("bg-base-100")).toBe(true);
-    });
   });
 
   describe("readonly state", () => {
     it("renders as div when readonly=true", () => {
       const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker readonly value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker readOnly value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-datetime-field");
@@ -221,41 +188,16 @@ describe("DateTimePicker component", () => {
 
     it("displays value when readonly", () => {
       const { getByText } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" readonly value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" readOnly value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       expect(getByText("2025-03-15T10:30")).toBeTruthy();
     });
   });
 
-  describe("size option", () => {
-    it("applies small padding when size=sm", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker size="sm" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-0.5")).toBe(true);
-    });
-
-    it("applies large padding when size=lg", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker size="lg" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-2")).toBe(true);
-    });
-  });
-
   describe("inset style", () => {
-    it("applies relative to outer and inset style to content when inset=true", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset /></I18nProvider></ConfigProvider>);
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("relative")).toBe(true);
-      expect(outer.classList.contains("border-none")).toBe(false);
-
-      const contentDiv = outer.querySelector("[data-datetime-field-content]") as HTMLElement;
-      expect(contentDiv.classList.contains("border-none")).toBe(true);
-      expect(contentDiv.classList.contains("bg-primary-50")).toBe(true);
-    });
-
     it("shows content div and no input when inset + readonly", () => {
       const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset readonly value={new DateTime(2025, 3, 15, 14, 30, 0)} /></I18nProvider></ConfigProvider>
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset readOnly value={new DateTime(2025, 3, 15, 14, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
@@ -281,36 +223,13 @@ describe("DateTimePicker component", () => {
     });
 
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset readonly /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset readOnly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-datetime-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toBe("\u00A0");
     });
   });
 
-  describe("dark mode style", () => {
-    it("applies dark mode border style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:border-base-700")).toBe(true);
-    });
-
-    it("applies dark mode background style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:bg-primary-950/30")).toBe(true);
-    });
-  });
-
-  describe("class merging", () => {
-    it("merges custom class with existing styles", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-
   describe("validation", () => {
     it("sets error message when required and value is empty", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker required value={undefined} /></I18nProvider></ConfigProvider>);

package/tests/components/form-control/field/FieldShell.spec.tsx

@@ -0,0 +1,127 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect, beforeEach } from "vitest";
+import { FieldShell } from "../../../../src/components/form-control/field/FieldShell";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
+
+// Minimal wrapperClass stub — returns a predictable class string.
+// The real getFieldWrapperClass (Field.styles.ts) generates Tailwind classes
+// based on size/disabled/inset options.
+const stubWrapperClass = (_includeCustom: boolean) => "wrapper-class";
+
+function wrap(ui: () => import("solid-js").JSX.Element) {
+  return render(() => <ConfigProvider clientName="test"><I18nProvider>{ui()}</I18nProvider></ConfigProvider>);
+}
+
+describe("FieldShell", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
+  it("renders displayContent when standalone-readonly", () => {
+    const { container } = wrap(() => (
+      <FieldShell
+        errorMsg={undefined}
+        invalidVariant="border"
+        inset={false}
+        isEditable={false}
+        wrapperClass={stubWrapperClass}
+        dataAttr="data-test-field"
+        readonlyExtraClass="sd-test-field"
+        displayContent={<span>readonly-text</span>}
+      >
+        <input type="text" />
+      </FieldShell>
+    ));
+    const div = container.querySelector("[data-test-field]") as HTMLElement;
+    expect(div).toBeTruthy();
+    expect(div.classList.contains("sd-test-field")).toBe(true);
+    expect(div.textContent).toContain("readonly-text");
+    expect(container.querySelector("input:not([aria-hidden])")).toBeFalsy();
+  });
+
+  it("renders children when standalone-editable", () => {
+    const { container } = wrap(() => (
+      <FieldShell
+        errorMsg={undefined}
+        invalidVariant="border"
+        inset={false}
+        isEditable={true}
+        wrapperClass={stubWrapperClass}
+        dataAttr="data-test-field"
+        displayContent={<span>readonly-text</span>}
+      >
+        <input type="text" data-testid="my-input" />
+      </FieldShell>
+    ));
+    const input = container.querySelector("[data-testid='my-input']");
+    expect(input).toBeTruthy();
+    expect(container.textContent).not.toContain("readonly-text");
+  });
+
+  it("renders inset sizing + overlay when inset-editable", () => {
+    const { container } = wrap(() => (
+      <FieldShell
+        errorMsg={undefined}
+        invalidVariant="dot"
+        inset={true}
+        isEditable={true}
+        wrapperClass={stubWrapperClass}
+        dataAttr="data-test-field"
+        displayContent={<span>sizing-text</span>}
+      >
+        <input type="text" data-testid="my-input" />
+      </FieldShell>
+    ));
+    const outer = container.querySelector("[data-test-field]") as HTMLElement;
+    expect(outer.classList.contains("relative")).toBe(true);
+
+    const sizingDiv = outer.querySelector("[data-test-field-content]") as HTMLElement;
+    expect(sizingDiv).toBeTruthy();
+    expect(sizingDiv.style.visibility).toBe("hidden");
+
+    const input = outer.querySelector("[data-testid='my-input']");
+    expect(input).toBeTruthy();
+  });
+
+  it("renders inset sizing visible when inset-readonly", () => {
+    const { container } = wrap(() => (
+      <FieldShell
+        errorMsg={undefined}
+        invalidVariant="dot"
+        inset={true}
+        isEditable={false}
+        wrapperClass={stubWrapperClass}
+        dataAttr="data-test-field"
+        displayContent={<span>visible-text</span>}
+      >
+        <input type="text" />
+      </FieldShell>
+    ));
+    const sizingDiv = container.querySelector("[data-test-field-content]") as HTMLElement;
+    expect(sizingDiv).toBeTruthy();
+    expect(sizingDiv.style.visibility).toBe("");
+    expect(sizingDiv.textContent).toContain("visible-text");
+    expect(container.querySelector("input:not([aria-hidden])")).toBeFalsy();
+  });
+
+  it("uses renderSizing for sizing content when provided", () => {
+    const { container } = wrap(() => (
+      <FieldShell
+        errorMsg={undefined}
+        invalidVariant="dot"
+        inset={true}
+        isEditable={true}
+        wrapperClass={stubWrapperClass}
+        dataAttr="data-test-field"
+        displayContent={<span>display</span>}
+        renderSizing={() => <span>custom-sizing</span>}
+      >
+        <input type="text" />
+      </FieldShell>
+    ));
+    const sizingDiv = container.querySelector("[data-test-field-content]") as HTMLElement;
+    expect(sizingDiv.textContent).toContain("custom-sizing");
+    expect(sizingDiv.textContent).not.toContain("display");
+  });
+});

package/tests/components/form-control/field/NumberInput.spec.tsx

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, fireEvent, screen } from "@solidjs/testing-library";
 import { createSignal } from "solid-js";
 import { NumberInput } from "../../../../src/components/form-control/field/NumberInput";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("NumberInput", () => {
@@ -10,42 +10,12 @@ describe("NumberInput", () => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
 
-  describe("basic rendering", () => {
-    it("renders input element", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toBeInTheDocument();
-    });
-
-    it("sets inputmode to numeric", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveAttribute("inputmode", "numeric");
-    });
-
-    it("sets input type to text", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveAttribute("type", "text");
-    });
-
-    it("defaults autocomplete to one-time-code", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveAttribute("autocomplete", "one-time-code");
-    });
-  });
-
   describe("value conversion", () => {
     it("displays numeric value as string", () => {
       render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={12345} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
-      // comma is true by default, so commas are included
+      // useGrouping is true by default, so grouping separators are included
       expect(input).toHaveValue("12,345");
     });
 
@@ -113,36 +83,36 @@ describe("NumberInput", () => {
   });
 
   describe("display format", () => {
-    it("displays thousands comma when comma=true", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} comma={true} /></I18nProvider></ConfigProvider>);
+    it("displays thousands separator when useGrouping=true", () => {
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} useGrouping={true} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1,234,567");
     });
 
-    it("displays without comma when comma=false", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} comma={false} /></I18nProvider></ConfigProvider>);
+    it("displays without separator when useGrouping=false", () => {
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} useGrouping={false} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1234567");
     });
 
-    it("defaults comma to true", () => {
+    it("defaults useGrouping to true", () => {
       render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1,234,567");
     });
 
-    it("sets minimum decimal digits with minDigits", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100} minDigits={2} /></I18nProvider></ConfigProvider>);
+    it("sets minimum decimal digits with minimumFractionDigits", () => {
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100} minimumFractionDigits={2} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("100.00");
     });
 
-    it("displays decimals longer than minDigits as-is", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100.12345} minDigits={2} /></I18nProvider></ConfigProvider>);
+    it("displays decimals longer than minimumFractionDigits as-is", () => {
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100.12345} minimumFractionDigits={2} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("100.12345");
@@ -160,58 +130,17 @@ describe("NumberInput", () => {
     });
 
     it("renders as div when readonly", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={5678} readonly /></I18nProvider></ConfigProvider>);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={5678} readOnly /></I18nProvider></ConfigProvider>);
 
       expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
       expect(screen.getByText("5,678")).toBeInTheDocument();
     });
 
-    it("applies disabled style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100} disabled /></I18nProvider></ConfigProvider>);
-
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.className).toContain("bg-base-100");
-    });
-  });
-
-  describe("right alignment", () => {
-    it("aligns input to the right", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
-
-      const input = screen.getByRole("textbox");
-      expect(input.className).toContain("text-right");
-    });
-  });
-
-  describe("style options", () => {
-    it("applies small padding when size='sm'", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput size="sm" /></I18nProvider></ConfigProvider>);
-
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.className).toContain("px-1.5");
-    });
-
-    it("applies large padding when size='lg'", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput size="lg" /></I18nProvider></ConfigProvider>);
-
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.className).toContain("px-3");
-    });
-
-    it("applies inset style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset /></I18nProvider></ConfigProvider>);
-
-      // outer div is relative when inset, inner content div has border-none
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("relative")).toBe(true);
-      const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
-      expect(contentDiv.className).toContain("border-none");
-    });
   });
 
   describe("inset dual-element", () => {
     it("shows content div and no input when inset + readonly", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readonly value={1234} /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readOnly value={1234} /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
 
@@ -234,15 +163,8 @@ describe("NumberInput", () => {
       expect(input).toBeTruthy();
     });
 
-    it("applies right alignment in inset + readonly", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readonly value={100} /></I18nProvider></ConfigProvider>);
-      const outer = container.firstChild as HTMLElement;
-      const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
-      expect(contentDiv.classList.contains("justify-end")).toBe(true);
-    });
-
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readonly /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readOnly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toBe("\u00A0");
@@ -271,15 +193,6 @@ describe("NumberInput", () => {
     });
   });
 
-  describe("placeholder", () => {
-    it("displays placeholder", () => {
-      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput placeholder="숫자를 입력하세요" /></I18nProvider></ConfigProvider>);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveAttribute("placeholder", "숫자를 입력하세요");
-    });
-  });
-
   describe("validation", () => {
     it("sets error message when required and value is empty", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput required value={undefined} /></I18nProvider></ConfigProvider>);
@@ -318,38 +231,6 @@ describe("NumberInput", () => {
   });
 
   describe("Prefix slot", () => {
-    it("renders NumberInput.Prefix slot", () => {
-      render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><NumberInput>
-          <NumberInput.Prefix>
-            <span data-testid="prefix">₩</span>
-          </NumberInput.Prefix>
-        </NumberInput></I18nProvider></ConfigProvider>
-      ));
-
-      expect(document.querySelector('[data-testid="prefix"]')).not.toBeNull();
-    });
-
-    it("applies gap class when Prefix slot is used", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><NumberInput>
-          <NumberInput.Prefix>
-            <span>₩</span>
-          </NumberInput.Prefix>
-        </NumberInput></I18nProvider></ConfigProvider>
-      ));
-
-      const wrapper = container.querySelector("[data-number-field]") as HTMLElement;
-      expect(wrapper.className).toContain("gap-");
-    });
-
-    it("does not apply gap class without Prefix slot", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
-
-      const wrapper = container.querySelector("[data-number-field]") as HTMLElement;
-      expect(wrapper.className).not.toContain("gap-");
-    });
-
     it("renders Prefix slot when disabled", () => {
       render(() => (
         <ConfigProvider clientName="test"><I18nProvider><NumberInput disabled value={100}>