@simplysm/solid 13.0.70 → 13.0.71

package/tests/components/form-control/checkbox/Checkbox.spec.tsx

@@ -3,26 +3,26 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { Checkbox } from "../../../../src/components/form-control/checkbox/Checkbox";
 
-describe("Checkbox 컴포넌트", () => {
+describe("Checkbox component", () => {
   describe("basic rendering", () => {
-    it("checkbox role로 렌더링된다", () => {
+    it("renders with checkbox role", () => {
       const { getByRole } = render(() => <Checkbox />);
       expect(getByRole("checkbox")).toBeTruthy();
     });
 
-    it("children이 라벨로 표시된다", () => {
+    it("renders children as label", () => {
       const { getByText } = render(() => <Checkbox>동의합니다</Checkbox>);
       expect(getByText("동의합니다")).toBeTruthy();
     });
 
-    it("기본값은 unchecked이다", () => {
+    it("defaults to unchecked", () => {
       const { getByRole } = render(() => <Checkbox />);
       expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
     });
   });
 
   describe("click behavior", () => {
-    it("클릭하면 checked 상태가 토글된다", () => {
+    it("toggles checked state on click", () => {
       const { getByRole } = render(() => <Checkbox />);
       const checkbox = getByRole("checkbox");
 
@@ -33,7 +33,7 @@ describe("Checkbox 컴포넌트", () => {
       expect(checkbox.getAttribute("aria-checked")).toBe("false");
     });
 
-    it("disabled 상태에서는 클릭해도 변경되지 않는다", () => {
+    it("does not change when disabled", () => {
       const { getByRole } = render(() => <Checkbox disabled />);
       const checkbox = getByRole("checkbox");
 
@@ -42,8 +42,8 @@ describe("Checkbox 컴포넌트", () => {
     });
   });
 
-  describe("키보드 동작", () => {
-    it("Space 키로 토글된다", () => {
+  describe("keyboard behavior", () => {
+    it("toggles with Space key", () => {
       const { getByRole } = render(() => <Checkbox />);
       const checkbox = getByRole("checkbox");
 
@@ -55,13 +55,13 @@ describe("Checkbox 컴포넌트", () => {
     });
   });
 
-  describe("controlled 패턴", () => {
-    it("value prop이 checked 상태로 반영된다", () => {
+  describe("controlled pattern", () => {
+    it("reflects value prop as checked state", () => {
       const { getByRole } = render(() => <Checkbox value={true} />);
       expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("true");
     });
 
-    it("onValueChange가 클릭 시 호출된다", () => {
+    it("calls onValueChange on click", () => {
       const handleChange = vi.fn();
       const { getByRole } = render(() => <Checkbox value={false} onValueChange={handleChange} />);
 
@@ -69,7 +69,7 @@ describe("Checkbox 컴포넌트", () => {
       expect(handleChange).toHaveBeenCalledWith(true);
     });
 
-    it("외부 상태 변경 시 업데이트된다", () => {
+    it("updates when external state changes", () => {
       const [value, setValue] = createSignal(false);
       const { getByRole } = render(() => <Checkbox value={value()} onValueChange={setValue} />);
 
@@ -80,22 +80,22 @@ describe("Checkbox 컴포넌트", () => {
     });
   });
 
-  describe("스타일 변형", () => {
-    it("size prop에 따라 스타일이 달라진다", () => {
+  describe("style variants", () => {
+    it("applies different styles per size", () => {
       const { getByRole: getDefault } = render(() => <Checkbox />);
       const { getByRole: getSm } = render(() => <Checkbox size="sm" />);
 
       expect(getDefault("checkbox").className).not.toBe(getSm("checkbox").className);
     });
 
-    it("inset prop에 따라 스타일이 달라진다", () => {
+    it("applies different styles when inset", () => {
       const { getByRole: getDefault } = render(() => <Checkbox />);
       const { getByRole: getInset } = render(() => <Checkbox inset />);
 
       expect(getDefault("checkbox").className).not.toBe(getInset("checkbox").className);
     });
 
-    it("disabled 스타일이 적용된다", () => {
+    it("applies disabled style", () => {
       const { getByRole } = render(() => <Checkbox disabled />);
       expect(getByRole("checkbox").classList.contains("opacity-30")).toBe(true);
     });
@@ -110,25 +110,25 @@ describe("Checkbox 컴포넌트", () => {
   });
 
   describe("validation", () => {
-    it("required일 때 체크되지 않으면 에러 메시지가 설정된다", () => {
+    it("sets error message when required and unchecked", () => {
       const { container } = render(() => <Checkbox required value={false} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("This is a required selection");
     });
 
-    it("required일 때 체크되면 유효하다", () => {
+    it("is valid when required and checked", () => {
       const { container } = render(() => <Checkbox required value={true} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
     });
 
-    it("validate 함수가 에러 메시지를 반환하면 설정된다", () => {
+    it("sets error message returned by validate function", () => {
       const { container } = render(() => <Checkbox value={true} validate={() => "커스텀 에러"} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("커스텀 에러");
     });
 
-    it("validate 함수가 undefined를 반환하면 유효하다", () => {
+    it("is valid when validate function returns undefined", () => {
       const { container } = render(() => <Checkbox value={true} validate={() => undefined} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);

package/tests/components/form-control/checkbox/CheckboxGroup.spec.tsx

@@ -3,9 +3,9 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { CheckboxGroup } from "../../../../src/components/form-control/checkbox/CheckboxGroup";
 
-describe("CheckboxGroup 컴포넌트", () => {
+describe("CheckboxGroup component", () => {
   describe("basic rendering", () => {
-    it("컨테이너가 렌더링된다", () => {
+    it("renders the container", () => {
       const { container } = render(() => (
         <CheckboxGroup>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
@@ -14,7 +14,7 @@ describe("CheckboxGroup 컴포넌트", () => {
       expect(container.querySelector("div")).toBeTruthy();
     });
 
-    it("아이템이 체크박스로 렌더링된다", () => {
+    it("renders items as checkboxes", () => {
       const { getAllByRole } = render(() => (
         <CheckboxGroup>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
@@ -25,8 +25,8 @@ describe("CheckboxGroup 컴포넌트", () => {
     });
   });
 
-  describe("controlled 패턴", () => {
-    it("value prop이 선택 상태로 반영된다", () => {
+  describe("controlled pattern", () => {
+    it("reflects value prop as selected state", () => {
       const { getAllByRole } = render(() => (
         <CheckboxGroup value={["a"]}>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
@@ -38,7 +38,7 @@ describe("CheckboxGroup 컴포넌트", () => {
       expect(checkboxes[1].getAttribute("aria-checked")).toBe("false");
     });
 
-    it("onValueChange가 토글 시 호출된다", () => {
+    it("calls onValueChange on toggle", () => {
       const handleChange = vi.fn();
       const { getAllByRole } = render(() => (
         <CheckboxGroup value={[]} onValueChange={handleChange}>
@@ -49,7 +49,7 @@ describe("CheckboxGroup 컴포넌트", () => {
       expect(handleChange).toHaveBeenCalledWith(["a"]);
     });
 
-    it("외부 상태 변경 시 업데이트된다", () => {
+    it("updates when external state changes", () => {
       const [value, setValue] = createSignal<string[]>([]);
       const { getAllByRole } = render(() => (
         <CheckboxGroup value={value()} onValueChange={setValue}>
@@ -63,13 +63,13 @@ describe("CheckboxGroup 컴포넌트", () => {
   });
 
   describe("validation", () => {
-    // 그룹의 Invalid hidden input은 자식 Checkbox들의 hidden input들보다 뒤에 위치한다
+    // The group's hidden input is positioned after the children's hidden inputs
     const getGroupHiddenInput = (container: HTMLElement) => {
       const inputs = container.querySelectorAll("input[aria-hidden='true']");
       return inputs[inputs.length - 1] as HTMLInputElement;
     };
 
-    it("required일 때 선택 항목이 없으면 에러 메시지가 설정된다", () => {
+    it("sets error message when required and no item selected", () => {
       const { container } = render(() => (
         <CheckboxGroup required value={[]}>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
@@ -78,7 +78,7 @@ describe("CheckboxGroup 컴포넌트", () => {
       expect(getGroupHiddenInput(container).validationMessage).toBe("Please select an item");
     });
 
-    it("required일 때 선택 항목이 있으면 유효하다", () => {
+    it("is valid when required and item is selected", () => {
       const { container } = render(() => (
         <CheckboxGroup required value={["a"]}>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
@@ -87,7 +87,7 @@ describe("CheckboxGroup 컴포넌트", () => {
       expect(getGroupHiddenInput(container).validity.valid).toBe(true);
     });
 
-    it("validate 함수가 에러 메시지를 반환하면 설정된다", () => {
+    it("sets error message returned by validate function", () => {
       const { container } = render(() => (
         <CheckboxGroup value={["a"]} validate={() => "커스텀 에러"}>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
@@ -96,7 +96,7 @@ describe("CheckboxGroup 컴포넌트", () => {
       expect(getGroupHiddenInput(container).validationMessage).toBe("커스텀 에러");
     });
 
-    it("validate 함수가 undefined를 반환하면 유효하다", () => {
+    it("is valid when validate function returns undefined", () => {
       const { container } = render(() => (
         <CheckboxGroup value={["a"]} validate={() => undefined}>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>

package/tests/components/form-control/checkbox/Radio.spec.tsx

@@ -3,26 +3,26 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { Radio } from "../../../../src/components/form-control/checkbox/Radio";
 
-describe("Radio 컴포넌트", () => {
+describe("Radio component", () => {
   describe("basic rendering", () => {
-    it("radio role로 렌더링된다", () => {
+    it("renders with radio role", () => {
       const { getByRole } = render(() => <Radio />);
       expect(getByRole("radio")).toBeTruthy();
     });
 
-    it("children이 라벨로 표시된다", () => {
+    it("renders children as label", () => {
       const { getByText } = render(() => <Radio>옵션 A</Radio>);
       expect(getByText("옵션 A")).toBeTruthy();
     });
 
-    it("기본값은 unchecked이다", () => {
+    it("defaults to unchecked", () => {
       const { getByRole } = render(() => <Radio />);
       expect(getByRole("radio").getAttribute("aria-checked")).toBe("false");
     });
   });
 
   describe("click behavior", () => {
-    it("클릭하면 선택된다", () => {
+    it("selects on click", () => {
       const { getByRole } = render(() => <Radio />);
       const radio = getByRole("radio");
 
@@ -30,7 +30,7 @@ describe("Radio 컴포넌트", () => {
       expect(radio.getAttribute("aria-checked")).toBe("true");
     });
 
-    it("이미 선택된 상태에서 다시 클릭해도 선택 해제되지 않는다", () => {
+    it("does not deselect when already selected", () => {
       const { getByRole } = render(() => <Radio value={true} />);
       const radio = getByRole("radio");
 
@@ -38,7 +38,7 @@ describe("Radio 컴포넌트", () => {
       expect(radio.getAttribute("aria-checked")).toBe("true");
     });
 
-    it("disabled 상태에서는 클릭해도 변경되지 않는다", () => {
+    it("does not change when disabled", () => {
       const { getByRole } = render(() => <Radio disabled />);
       const radio = getByRole("radio");
 
@@ -47,8 +47,8 @@ describe("Radio 컴포넌트", () => {
     });
   });
 
-  describe("키보드 동작", () => {
-    it("Space 키로 선택된다", () => {
+  describe("keyboard behavior", () => {
+    it("selects with Space key", () => {
       const { getByRole } = render(() => <Radio />);
       const radio = getByRole("radio");
 
@@ -57,13 +57,13 @@ describe("Radio 컴포넌트", () => {
     });
   });
 
-  describe("controlled 패턴", () => {
-    it("value prop이 checked 상태로 반영된다", () => {
+  describe("controlled pattern", () => {
+    it("reflects value prop as checked state", () => {
       const { getByRole } = render(() => <Radio value={true} />);
       expect(getByRole("radio").getAttribute("aria-checked")).toBe("true");
     });
 
-    it("onValueChange가 클릭 시 호출된다", () => {
+    it("calls onValueChange on click", () => {
       const handleChange = vi.fn();
       const { getByRole } = render(() => <Radio value={false} onValueChange={handleChange} />);
 
@@ -71,7 +71,7 @@ describe("Radio 컴포넌트", () => {
       expect(handleChange).toHaveBeenCalledWith(true);
     });
 
-    it("외부 상태 변경 시 업데이트된다", () => {
+    it("updates when external state changes", () => {
       const [value, setValue] = createSignal(false);
       const { getByRole } = render(() => <Radio value={value()} onValueChange={setValue} />);
 
@@ -82,21 +82,21 @@ describe("Radio 컴포넌트", () => {
     });
   });
 
-  describe("스타일 변형", () => {
-    it("인디케이터가 원형이다", () => {
+  describe("style variants", () => {
+    it("indicator is circular", () => {
       const { getByRole } = render(() => <Radio />);
       const indicator = getByRole("radio").querySelector("div") as HTMLElement;
       expect(indicator.classList.contains("rounded-full")).toBe(true);
     });
 
-    it("size prop에 따라 스타일이 달라진다", () => {
+    it("applies different styles per size", () => {
       const { getByRole: getDefault } = render(() => <Radio />);
       const { getByRole: getSm } = render(() => <Radio size="sm" />);
 
       expect(getDefault("radio").className).not.toBe(getSm("radio").className);
     });
 
-    it("disabled 스타일이 적용된다", () => {
+    it("applies disabled style", () => {
       const { getByRole } = render(() => <Radio disabled />);
       expect(getByRole("radio").classList.contains("opacity-30")).toBe(true);
     });
@@ -111,25 +111,25 @@ describe("Radio 컴포넌트", () => {
   });
 
   describe("validation", () => {
-    it("required일 때 선택되지 않으면 에러 메시지가 설정된다", () => {
+    it("sets error message when required and not selected", () => {
       const { container } = render(() => <Radio required value={false} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("This is a required selection");
     });
 
-    it("required일 때 선택되면 유효하다", () => {
+    it("is valid when required and selected", () => {
       const { container } = render(() => <Radio required value={true} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
     });
 
-    it("validate 함수가 에러 메시지를 반환하면 설정된다", () => {
+    it("sets error message returned by validate function", () => {
       const { container } = render(() => <Radio value={true} validate={() => "커스텀 에러"} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("커스텀 에러");
     });
 
-    it("validate 함수가 undefined를 반환하면 유효하다", () => {
+    it("is valid when validate function returns undefined", () => {
       const { container } = render(() => <Radio value={true} validate={() => undefined} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);

package/tests/components/form-control/checkbox/RadioGroup.spec.tsx

@@ -3,9 +3,9 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { RadioGroup } from "../../../../src/components/form-control/checkbox/RadioGroup";
 
-describe("RadioGroup 컴포넌트", () => {
+describe("RadioGroup component", () => {
   describe("basic rendering", () => {
-    it("컨테이너가 렌더링된다", () => {
+    it("renders the container", () => {
       const { container } = render(() => (
         <RadioGroup>
           <RadioGroup.Item value="a">A</RadioGroup.Item>
@@ -14,7 +14,7 @@ describe("RadioGroup 컴포넌트", () => {
       expect(container.querySelector("div")).toBeTruthy();
     });
 
-    it("아이템이 radio로 렌더링된다", () => {
+    it("renders items as radios", () => {
       const { getAllByRole } = render(() => (
         <RadioGroup>
           <RadioGroup.Item value="a">A</RadioGroup.Item>
@@ -25,8 +25,8 @@ describe("RadioGroup 컴포넌트", () => {
     });
   });
 
-  describe("controlled 패턴", () => {
-    it("value prop이 선택 상태로 반영된다", () => {
+  describe("controlled pattern", () => {
+    it("reflects value prop as selected state", () => {
       const { getAllByRole } = render(() => (
         <RadioGroup value="a">
           <RadioGroup.Item value="a">A</RadioGroup.Item>
@@ -38,7 +38,7 @@ describe("RadioGroup 컴포넌트", () => {
       expect(radios[1].getAttribute("aria-checked")).toBe("false");
     });
 
-    it("onValueChange가 선택 시 호출된다", () => {
+    it("calls onValueChange on selection", () => {
       const handleChange = vi.fn();
       const { getAllByRole } = render(() => (
         <RadioGroup value={undefined} onValueChange={handleChange}>
@@ -49,7 +49,7 @@ describe("RadioGroup 컴포넌트", () => {
       expect(handleChange).toHaveBeenCalledWith("a");
     });
 
-    it("외부 상태 변경 시 업데이트된다", () => {
+    it("updates when external state changes", () => {
       const [value, setValue] = createSignal<string | undefined>(undefined);
       const { getAllByRole } = render(() => (
         <RadioGroup value={value()} onValueChange={setValue}>
@@ -63,13 +63,13 @@ describe("RadioGroup 컴포넌트", () => {
   });
 
   describe("validation", () => {
-    // 그룹의 Invalid hidden input은 자식 Radio들의 hidden input들보다 뒤에 위치한다
+    // The group's hidden input is positioned after the children's hidden inputs
     const getGroupHiddenInput = (container: HTMLElement) => {
       const inputs = container.querySelectorAll("input[aria-hidden='true']");
       return inputs[inputs.length - 1] as HTMLInputElement;
     };
 
-    it("required일 때 선택 항목이 없으면 에러 메시지가 설정된다", () => {
+    it("sets error message when required and no item selected", () => {
       const { container } = render(() => (
         <RadioGroup required value={undefined}>
           <RadioGroup.Item value="a">A</RadioGroup.Item>
@@ -78,7 +78,7 @@ describe("RadioGroup 컴포넌트", () => {
       expect(getGroupHiddenInput(container).validationMessage).toBe("Please select an item");
     });
 
-    it("required일 때 선택 항목이 있으면 유효하다", () => {
+    it("is valid when required and item is selected", () => {
       const { container } = render(() => (
         <RadioGroup required value="a">
           <RadioGroup.Item value="a">A</RadioGroup.Item>
@@ -87,7 +87,7 @@ describe("RadioGroup 컴포넌트", () => {
       expect(getGroupHiddenInput(container).validity.valid).toBe(true);
     });
 
-    it("validate 함수가 에러 메시지를 반환하면 설정된다", () => {
+    it("sets error message returned by validate function", () => {
       const { container } = render(() => (
         <RadioGroup value="a" validate={() => "커스텀 에러"}>
           <RadioGroup.Item value="a">A</RadioGroup.Item>
@@ -96,7 +96,7 @@ describe("RadioGroup 컴포넌트", () => {
       expect(getGroupHiddenInput(container).validationMessage).toBe("커스텀 에러");
     });
 
-    it("validate 함수가 undefined를 반환하면 유효하다", () => {
+    it("is valid when validate function returns undefined", () => {
       const { container } = render(() => (
         <RadioGroup value="a" validate={() => undefined}>
           <RadioGroup.Item value="a">A</RadioGroup.Item>

package/tests/components/form-control/color-picker/ColorPicker.spec.tsx

@@ -3,24 +3,24 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { ColorPicker } from "../../../../src/components/form-control/color-picker/ColorPicker";
 
-describe("ColorPicker 컴포넌트", () => {
+describe("ColorPicker component", () => {
   describe("basic rendering", () => {
-    it("input type=color가 렌더링된다", () => {
+    it("renders input type=color", () => {
       const { container } = render(() => <ColorPicker />);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input).toBeTruthy();
       expect(input.type).toBe("color");
     });
 
-    it("기본값은 #000000이다", () => {
+    it("defaults to #000000", () => {
       const { container } = render(() => <ColorPicker />);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.value).toBe("#000000");
     });
   });
 
-  describe("controlled 패턴", () => {
-    it("onValueChange가 색상 변경 시 호출된다", () => {
+  describe("controlled pattern", () => {
+    it("calls onValueChange on color change", () => {
       const handleChange = vi.fn();
       const { container } = render(() => (
         <ColorPicker value="#000000" onValueChange={handleChange} />
@@ -32,7 +32,7 @@ describe("ColorPicker 컴포넌트", () => {
       expect(handleChange).toHaveBeenCalledWith("#ff5500");
     });
 
-    it("외부 상태 변경 시 input 값이 업데이트된다", () => {
+    it("updates input value when external state changes", () => {
       const [value, setValue] = createSignal("#ff0000");
       const { container } = render(() => <ColorPicker value={value()} onValueChange={setValue} />);
       const input = container.querySelector("input") as HTMLInputElement;
@@ -45,13 +45,13 @@ describe("ColorPicker 컴포넌트", () => {
   });
 
   describe("disabled state", () => {
-    it("disabled=true일 때 input이 비활성화된다", () => {
+    it("disables input when disabled=true", () => {
       const { container } = render(() => <ColorPicker disabled />);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.disabled).toBe(true);
     });
 
-    it("disabled 스타일이 적용된다", () => {
+    it("applies disabled style", () => {
       const { container } = render(() => <ColorPicker disabled />);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.classList.contains("cursor-default")).toBe(true);
@@ -74,13 +74,13 @@ describe("ColorPicker 컴포넌트", () => {
       expect(hiddenInput.validationMessage).toBe("This field is required");
     });
 
-    it("required일 때 값이 있으면 유효하다", () => {
+    it("is valid when required and value exists", () => {
       const { container } = render(() => <ColorPicker required value="#ff0000" />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
     });
 
-    it("validate 함수가 에러를 반환하면 해당 메시지가 설정된다", () => {
+    it("sets error message returned by validate function", () => {
       const { container } = render(() => (
         <ColorPicker
           validate={(v) => (v === "#000000" ? "검정색은 사용할 수 없습니다" : undefined)}