@seed-design/lynx-react 0.3.1 → 0.4.0

package/src/components/TextField/context.ts

@@ -0,0 +1,33 @@
+import * as React from "@lynx-js/react";
+import type { NodesRef } from "@lynx-js/types";
+
+/** iOS와 Android의 32비트 `maxlength` setter에서 사용하는 무제한 센티널. */
+export const NATIVE_TEXT_MAX_LENGTH_UNLIMITED = 2_147_483_647;
+
+export interface TextFieldContextValue {
+  rootRef: React.RefObject<NodesRef | null>;
+  value: string;
+  /** @internal controlled 입력의 native value 조정 여부를 판별한다. */
+  controlled: boolean;
+  nativeInsertionMaxLength?: number;
+  disabled: boolean;
+  invalid: boolean;
+  readOnly: boolean;
+  required: boolean;
+  name?: string;
+  focused: boolean;
+  setValue: (value: string) => void;
+  setFocused: (focused: boolean) => void;
+}
+
+export const TextFieldContext = React.createContext<TextFieldContextValue | null>(null);
+
+export function useTextFieldContext(): TextFieldContextValue {
+  const context = React.useContext(TextFieldContext);
+
+  if (!context) {
+    throw new Error("TextField compound components must be rendered inside <TextField.Root>.");
+  }
+
+  return context;
+}

package/src/components/TextField/index.ts

@@ -0,0 +1,23 @@
+export {
+  TextFieldPrefixIcon,
+  TextFieldPrefixText,
+  TextFieldRoot,
+  TextFieldSuffixIcon,
+  TextFieldSuffixText,
+  TextFieldInput,
+  TextFieldTextarea,
+  type TextFieldPrefixIconProps,
+  type TextFieldPrefixTextProps,
+  type TextFieldRootProps,
+  type TextFieldSuffixIconProps,
+  type TextFieldSuffixTextProps,
+  type TextFieldInputProps,
+  type TextFieldTextareaProps,
+} from "./TextField";
+
+export {
+  useTextFieldWithGraphemes,
+  type UseTextFieldWithGraphemesParams,
+} from "./useTextFieldWithGraphemes";
+
+export * as TextField from "./TextField.namespace";

package/src/components/TextField/useTextFieldWithGraphemes.test.tsx

@@ -0,0 +1,80 @@
+import { act, renderHook } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import { NATIVE_TEXT_MAX_LENGTH_UNLIMITED } from "./context";
+import { useTextFieldWithGraphemes } from "./useTextFieldWithGraphemes";
+
+describe("useTextFieldWithGraphemes", () => {
+  it("counts extended grapheme clusters", () => {
+    const { result } = renderHook(() =>
+      useTextFieldWithGraphemes({ defaultValue: "👨‍👩‍👧‍👦🏳️‍🌈é" }),
+    );
+
+    expect(result.current.graphemes).toEqual(["👨‍👩‍👧‍👦", "🏳️‍🌈", "é"]);
+    expect(result.current.counterProps).toEqual({ current: 3, max: 0 });
+  });
+
+  it("reports the original and grapheme-sliced values", () => {
+    const onValueChange = vi.fn();
+    const { result } = renderHook(() =>
+      useTextFieldWithGraphemes({ maxGraphemeCount: 2, onValueChange }),
+    );
+
+    act(() => {
+      result.current.textFieldRootProps.onValueChange("A👨‍👩‍👧‍👦B");
+    });
+
+    expect(onValueChange).toHaveBeenCalledWith({
+      value: "A👨‍👩‍👧‍👦B",
+      graphemes: ["A", "👨‍👩‍👧‍👦", "B"],
+      slicedValue: "A👨‍👩‍👧‍👦",
+      slicedGraphemes: ["A", "👨‍👩‍👧‍👦"],
+    });
+    expect(result.current.counterProps).toEqual({ current: 3, max: 2 });
+  });
+
+  it("keeps a controlled value fixed", () => {
+    const onValueChange = vi.fn();
+    const { result } = renderHook(() =>
+      useTextFieldWithGraphemes({ value: "고정", onValueChange }),
+    );
+
+    act(() => {
+      result.current.textFieldRootProps.onValueChange("변경");
+    });
+
+    expect(result.current.textFieldRootProps.value).toBe("고정");
+    expect(onValueChange).toHaveBeenCalledOnce();
+  });
+
+  it("leaves native insertion maxlength unmanaged without a grapheme limit", () => {
+    const { result } = renderHook(() => useTextFieldWithGraphemes({ defaultValue: "제한 없음" }));
+
+    expect(result.current.textFieldRootProps.nativeInsertionMaxLength).toBeUndefined();
+  });
+
+  it("provides a UTF-16 native insertion cap only at the grapheme limit", () => {
+    const family = "👨‍👩‍👧‍👦";
+    const { result, rerender } = renderHook(
+      ({ value }: { value: string }) => useTextFieldWithGraphemes({ value, maxGraphemeCount: 2 }),
+      { initialProps: { value: family } },
+    );
+
+    expect(result.current.textFieldRootProps.nativeInsertionMaxLength).toBe(
+      NATIVE_TEXT_MAX_LENGTH_UNLIMITED,
+    );
+
+    const valueAtLimit = `${family}A`;
+    rerender({ value: valueAtLimit });
+
+    expect(result.current.graphemes).toEqual([family, "A"]);
+    expect(result.current.textFieldRootProps.nativeInsertionMaxLength).toBe(valueAtLimit.length);
+    expect(result.current.textFieldRootProps.nativeInsertionMaxLength).toBeGreaterThan(2);
+
+    rerender({ value: "A" });
+
+    expect(result.current.textFieldRootProps.nativeInsertionMaxLength).toBe(
+      NATIVE_TEXT_MAX_LENGTH_UNLIMITED,
+    );
+  });
+});

package/src/components/TextField/useTextFieldWithGraphemes.ts

@@ -0,0 +1,78 @@
+import * as React from "@lynx-js/react";
+import { splitGraphemes } from "unicode-segmenter/grapheme";
+
+import { NATIVE_TEXT_MAX_LENGTH_UNLIMITED } from "./context";
+
+export interface UseTextFieldWithGraphemesParams {
+  maxGraphemeCount?: number;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (values: {
+    value: string;
+    graphemes: string[];
+    slicedValue: string;
+    slicedGraphemes: string[];
+  }) => void;
+}
+
+let cachedValue = "";
+let cachedGraphemes: string[] = [];
+
+function getGraphemes(value: string): string[] {
+  if (value === cachedValue) return cachedGraphemes;
+
+  cachedValue = value;
+  cachedGraphemes = Array.from(splitGraphemes(value));
+  return cachedGraphemes;
+}
+
+export function useTextFieldWithGraphemes({
+  maxGraphemeCount,
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+}: UseTextFieldWithGraphemesParams) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const graphemes = React.useMemo(() => getGraphemes(value), [value]);
+
+  const handleValueChange = React.useCallback(
+    (nextValue: string) => {
+      "background only";
+
+      const nextGraphemes = getGraphemes(nextValue);
+      const slicedGraphemes =
+        maxGraphemeCount === undefined ? nextGraphemes : nextGraphemes.slice(0, maxGraphemeCount);
+
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onValueChange?.({
+        value: nextValue,
+        graphemes: nextGraphemes,
+        slicedValue: slicedGraphemes.join(""),
+        slicedGraphemes,
+      });
+    },
+    [isControlled, maxGraphemeCount, onValueChange],
+  );
+
+  return {
+    textFieldRootProps: {
+      value,
+      onValueChange: handleValueChange,
+      nativeInsertionMaxLength:
+        maxGraphemeCount === undefined
+          ? undefined
+          : graphemes.length >= maxGraphemeCount
+            ? value.length
+            : NATIVE_TEXT_MAX_LENGTH_UNLIMITED,
+    },
+    counterProps: {
+      current: graphemes.length,
+      max: maxGraphemeCount ?? 0,
+    },
+    graphemes,
+  };
+}

package/src/components/index.ts

@@ -4,10 +4,13 @@ export * from "./Badge";
 export * from "./Box";
 export * from "./BottomSheet";
 export * from "./Checkbox";
+export * from "./Field";
 export * from "./Icon";
+export * from "./KeyboardAvoidingScrollView";
 export * from "./ProgressCircle";
 export * from "./RadioGroup";
 export * from "./Stack";
 export * from "./Switch";
 export * from "./TagGroup";
 export * from "./Text";
+export * from "./TextField";