@seed-design/lynx-react 0.6.3 → 0.7.0

package/src/components/InputButton/InputButton.tsx

@@ -0,0 +1,295 @@
+import * as React from "@lynx-js/react";
+import type { NodesRef } from "@lynx-js/types";
+import {
+  inputButton,
+  type InputButtonVariantProps,
+} from "@seed-design/lynx-css/recipes/input-button";
+import clsx from "clsx";
+
+import { usePressTap } from "../../hooks/usePressTap";
+import type {
+  LynxAccessibilityProps,
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewRef,
+} from "../../types";
+import { InternalIcon, type InternalIconProps } from "../Icon/Icon";
+
+interface InputButtonContextValue {
+  variantProps: InputButtonVariantProps;
+  disabled: boolean;
+  readOnly: boolean;
+}
+
+const InputButtonContext = React.createContext<InputButtonContextValue | null>(null);
+
+function useInputButtonContext(consumer: string): InputButtonContextValue {
+  const context = React.useContext(InputButtonContext);
+
+  if (!context) {
+    throw new Error(`<${consumer}/> must be rendered inside <InputButton.Root/>.`);
+  }
+
+  return context;
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - `size="responsive"`: Lynx에는 CSS viewport breakpoint가 없음
+ * - HTML form 제출과 DOM ARIA id 연결
+ */
+export interface InputButtonRootProps
+  extends Omit<InputButtonVariantProps, "pressed">,
+    LynxStyledElementProps {}
+
+export const InputButtonRoot = React.forwardRef<NodesRef, InputButtonRootProps>(
+  (props, forwardedRef) => {
+    const [variantProps, otherProps] = inputButton.splitVariantProps(props);
+    const { children, className, ...nativeProps } = otherProps;
+    const disabled = variantProps.disabled ?? false;
+    const readOnly = variantProps.readOnly ?? false;
+    const classes = inputButton(variantProps);
+    const contextValue = React.useMemo(
+      () => ({ variantProps, disabled, readOnly }),
+      [variantProps, disabled, readOnly],
+    );
+
+    return (
+      <InputButtonContext.Provider value={contextValue}>
+        <view
+          {...(forwardedRef ? { ref: forwardedRef } : {})}
+          className={clsx(classes.root, className)}
+          {...nativeProps}
+        >
+          {children}
+        </view>
+      </InputButtonContext.Provider>
+    );
+  },
+);
+InputButtonRoot.displayName = "InputButtonRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface InputButtonButtonProps
+  extends LynxStyledElementProps,
+    LynxPressableProps,
+    LynxAccessibilityProps {}
+
+export const InputButtonButton = React.forwardRef<unknown, InputButtonButtonProps>((props, ref) => {
+  const context = useInputButtonContext("InputButton.Button");
+  const {
+    children,
+    className,
+    bindtap,
+    "main-thread:bindtap": mainThreadBindtap,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-traits": accessibilityTraits,
+    ...nativeProps
+  } = props;
+  const nonInteractive = context.disabled || context.readOnly;
+  const { pressed, ...pressHandlers } = usePressTap({
+    disabled: nonInteractive,
+    onTap: bindtap,
+    mainThreadOnTap: mainThreadBindtap,
+  });
+  const classes = inputButton({ ...context.variantProps, pressed });
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      className={clsx(classes.button, className)}
+      accessibility-element={accessibilityElement}
+      accessibility-traits={accessibilityTraits ?? (nonInteractive ? "disabled" : "button")}
+      {...pressHandlers}
+      {...nativeProps}
+    >
+      <view className={classes.baseStroke} accessibility-elements-hidden={true} />
+      <view className={classes.stroke} accessibility-elements-hidden={true} />
+      {children}
+    </view>
+  );
+});
+InputButtonButton.displayName = "InputButtonButton";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface InputButtonValueProps extends LynxStyledElementProps {}
+
+export const InputButtonValue = React.forwardRef<unknown, InputButtonValueProps>((props, ref) => {
+  const context = useInputButtonContext("InputButton.Value");
+  const classes = inputButton(context.variantProps);
+  const { children, className, ...nativeProps } = props;
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      className={clsx(classes.value, className)}
+      accessibility-elements-hidden={true}
+      {...nativeProps}
+    >
+      {children}
+    </text>
+  );
+});
+InputButtonValue.displayName = "InputButtonValue";
+
+export interface InputButtonPlaceholderProps extends LynxStyledElementProps {}
+
+export const InputButtonPlaceholder = React.forwardRef<unknown, InputButtonPlaceholderProps>(
+  (props, ref) => {
+    const context = useInputButtonContext("InputButton.Placeholder");
+    const classes = inputButton(context.variantProps);
+    const { children, className, ...nativeProps } = props;
+
+    return (
+      <text
+        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        className={clsx(classes.placeholder, className)}
+        accessibility-elements-hidden={true}
+        {...nativeProps}
+      >
+        {children}
+      </text>
+    );
+  },
+);
+InputButtonPlaceholder.displayName = "InputButtonPlaceholder";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface InputButtonPrefixTextProps extends LynxStyledElementProps {}
+
+export const InputButtonPrefixText = React.forwardRef<unknown, InputButtonPrefixTextProps>(
+  (props, ref) => {
+    const context = useInputButtonContext("InputButton.PrefixText");
+    const classes = inputButton(context.variantProps);
+    const { children, className, ...nativeProps } = props;
+
+    return (
+      <text
+        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        className={clsx(classes.prefixText, className)}
+        accessibility-elements-hidden={true}
+        {...nativeProps}
+      >
+        {children}
+      </text>
+    );
+  },
+);
+InputButtonPrefixText.displayName = "InputButtonPrefixText";
+
+export interface InputButtonPrefixIconProps extends InternalIconProps {}
+
+export const InputButtonPrefixIcon = React.forwardRef<unknown, InputButtonPrefixIconProps>(
+  (props, ref) => {
+    const context = useInputButtonContext("InputButton.PrefixIcon");
+    const classes = inputButton(context.variantProps);
+    const { className, ...otherProps } = props;
+
+    return (
+      <InternalIcon
+        ref={ref}
+        className={clsx(classes.prefixIcon, className)}
+        accessibility-elements-hidden={true}
+        {...otherProps}
+      />
+    );
+  },
+);
+InputButtonPrefixIcon.displayName = "InputButtonPrefixIcon";
+
+export interface InputButtonSuffixTextProps extends LynxStyledElementProps {}
+
+export const InputButtonSuffixText = React.forwardRef<unknown, InputButtonSuffixTextProps>(
+  (props, ref) => {
+    const context = useInputButtonContext("InputButton.SuffixText");
+    const classes = inputButton(context.variantProps);
+    const { children, className, ...nativeProps } = props;
+
+    return (
+      <text
+        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        className={clsx(classes.suffixText, className)}
+        accessibility-elements-hidden={true}
+        {...nativeProps}
+      >
+        {children}
+      </text>
+    );
+  },
+);
+InputButtonSuffixText.displayName = "InputButtonSuffixText";
+
+export interface InputButtonSuffixIconProps extends InternalIconProps {}
+
+export const InputButtonSuffixIcon = React.forwardRef<unknown, InputButtonSuffixIconProps>(
+  (props, ref) => {
+    const context = useInputButtonContext("InputButton.SuffixIcon");
+    const classes = inputButton(context.variantProps);
+    const { className, ...otherProps } = props;
+
+    return (
+      <InternalIcon
+        ref={ref}
+        className={clsx(classes.suffixIcon, className)}
+        accessibility-elements-hidden={true}
+        {...otherProps}
+      />
+    );
+  },
+);
+InputButtonSuffixIcon.displayName = "InputButtonSuffixIcon";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface InputButtonClearButtonProps
+  extends InternalIconProps,
+    LynxPressableProps,
+    LynxAccessibilityProps {}
+
+export const InputButtonClearButton = React.forwardRef<unknown, InputButtonClearButtonProps>(
+  (props, ref) => {
+    const context = useInputButtonContext("InputButton.ClearButton");
+    const {
+      className,
+      bindtap,
+      "main-thread:bindtap": mainThreadBindtap,
+      "accessibility-element": accessibilityElement = true,
+      "accessibility-label": accessibilityLabel,
+      ...otherProps
+    } = props;
+    const nonInteractive = context.disabled || context.readOnly;
+    const { pressed, ...pressHandlers } = usePressTap({
+      disabled: nonInteractive,
+      onTap: bindtap,
+      mainThreadOnTap: mainThreadBindtap,
+    });
+    const classes = inputButton({ ...context.variantProps, pressed });
+
+    if (nonInteractive) return null;
+
+    if (process.env.NODE_ENV !== "production" && !accessibilityLabel) {
+      console.warn("InputButton.ClearButton requires `accessibility-label` for accessibility.");
+    }
+
+    return (
+      <InternalIcon
+        ref={ref}
+        className={clsx(classes.clearButton, className)}
+        accessibility-element={accessibilityElement}
+        accessibility-label={accessibilityLabel}
+        accessibility-traits="button"
+        {...pressHandlers}
+        {...otherProps}
+      />
+    );
+  },
+);
+InputButtonClearButton.displayName = "InputButtonClearButton";

package/src/components/InputButton/index.ts

@@ -0,0 +1,2 @@
+export * from "./InputButton";
+export * as InputButton from "./InputButton.namespace";

package/src/components/KeyboardAvoidingScrollView/KeyboardAvoidingScrollView.tsx

@@ -21,6 +21,7 @@ import { KeyboardAvoidanceActionsContext, type KeyboardAvoidanceActions } from "
 import { createKeyboardAvoidingEngine, type KeyboardAvoidingScheduler } from "./engine";
 import { lynxKeyboardEventSource } from "./keyboard-event-source";
 import { lynxKeyboardAvoidingNativeDriver } from "./native-driver";
+import { mergeProps } from "../../utils/merge-props";
 
 type NativeScrollViewProps = IntrinsicElements["scroll-view"];
 type LayoutChangeHandler = NonNullable<NativeScrollViewProps["bindlayoutchange"]>;
@@ -147,17 +148,8 @@ export const KeyboardAvoidingScrollView: LynxForwardRefComponent<
     [],
   );
 
-  const mergedRef = useCallback(
-    (node: NodesRef | null) => {
-      "background only";
-
-      scrollRef.current = node;
-      if (typeof forwardedRef === "function") {
-        forwardedRef(node);
-      } else if (forwardedRef) {
-        forwardedRef.current = node;
-      }
-    },
+  const mergedRef = useMemo(
+    () => mergeProps({ ref: scrollRef }, { ref: forwardedRef }).ref,
     [forwardedRef],
   );
 
@@ -276,21 +268,24 @@ export const KeyboardAvoidingScrollView: LynxForwardRefComponent<
   return (
     <KeyboardAvoidanceActionsContext.Provider value={actions}>
       <scroll-view
-        {...nativeProps}
-        ref={mergedRef}
+        {...mergeProps(
+          {
+            ref: mergedRef,
+            bindlayoutchange: handleLayoutChange,
+            bindtouchstart: handleTouchStart,
+            bindtouchend: handleTouchEnd,
+            bindtouchcancel: handleTouchCancel,
+            bindscroll: handleScroll,
+            bindscrollend: handleScrollEnd,
+          },
+          nativeProps,
+        )}
         scroll-orientation="vertical"
         flatten={false}
-        bindlayoutchange={handleLayoutChange}
-        bindtouchstart={handleTouchStart}
-        bindtouchend={handleTouchEnd}
-        bindtouchcancel={handleTouchCancel}
-        bindscroll={handleScroll}
-        bindscrollend={handleScrollEnd}
       >
         {children}
         <view
-          {...({ ref: spacerRef as LynxViewRef } as Record<string, unknown>)}
-          {...spacerProps}
+          {...mergeProps({ ref: spacerRef as LynxViewRef } as Record<string, unknown>, spacerProps)}
         />
       </scroll-view>
     </KeyboardAvoidanceActionsContext.Provider>

package/src/components/List/List.namespace.ts

@@ -0,0 +1,24 @@
+export {
+  ListButtonItem as ButtonItem,
+  ListCheckboxItem as CheckboxItem,
+  ListContent as Content,
+  ListDetail as Detail,
+  ListItem as Item,
+  ListPrefix as Prefix,
+  ListRadioItem as RadioItem,
+  ListRoot as Root,
+  ListSuffix as Suffix,
+  ListSwitchItem as SwitchItem,
+  ListTitle as Title,
+  type ListButtonItemProps as ButtonItemProps,
+  type ListCheckboxItemProps as CheckboxItemProps,
+  type ListContentProps as ContentProps,
+  type ListDetailProps as DetailProps,
+  type ListItemProps as ItemProps,
+  type ListPrefixProps as PrefixProps,
+  type ListRadioItemProps as RadioItemProps,
+  type ListRootProps as RootProps,
+  type ListSuffixProps as SuffixProps,
+  type ListSwitchItemProps as SwitchItemProps,
+  type ListTitleProps as TitleProps,
+} from "./List";

package/src/components/List/List.test.tsx

@@ -0,0 +1,162 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import { RadioGroup } from "../RadioGroup";
+import { List, ListHeader } from "./index";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function getListItem(className: string) {
+  const item = getRenderedRoot().querySelector<HTMLElement>(`.${className}`);
+
+  if (!item) {
+    throw new Error(`Expected ${className} to exist.`);
+  }
+
+  return item;
+}
+
+describe("List", () => {
+  it("renders a header variant", () => {
+    render(
+      <view>
+        <ListHeader variant="boldSolid" className="list-header">
+          목록 제목
+        </ListHeader>
+      </view>,
+    );
+
+    expect(getRenderedRoot().querySelector(".list-header")).toHaveClass(
+      "seed-list-header--variant_boldSolid",
+    );
+  });
+
+  it("renders the container and item slots", () => {
+    render(
+      <List.Root className="list-root">
+        <List.Item highlighted className="static-item">
+          <List.Prefix>앞</List.Prefix>
+          <List.Content>
+            <List.Title>제목</List.Title>
+            <List.Detail>설명</List.Detail>
+          </List.Content>
+          <List.Suffix>뒤</List.Suffix>
+        </List.Item>
+      </List.Root>,
+    );
+
+    const item = getListItem("static-item");
+
+    expect(getRenderedRoot().querySelector(".list-root")).toHaveClass("seed-list");
+    expect(item.querySelector(".seed-list-item__prefix")).toHaveTextContent("앞");
+    expect(item.querySelector(".seed-list-item__title")).toHaveTextContent("제목");
+    expect(item.querySelector(".seed-list-item__detail")).toHaveTextContent("설명");
+    expect(item.querySelector(".seed-list-item__suffix")).toHaveTextContent("뒤");
+    expect(item.querySelector(".seed-list-item__pressedOverlay")).toHaveClass(
+      "seed-list-item__pressedOverlay--highlighted_true",
+    );
+  });
+
+  it("tracks button pressed state and ignores a disabled tap", () => {
+    const onTap = vi.fn();
+    const { rerender } = render(
+      <List.ButtonItem className="button-item" bindtap={onTap} accessibility-label="열기">
+        <List.Content>
+          <List.Title>버튼</List.Title>
+        </List.Content>
+      </List.ButtonItem>,
+    );
+
+    let item = getListItem("button-item");
+    fireEvent.touchstart(item, {});
+    expect(item.querySelector(".seed-list-item__pressedOverlay")).toHaveClass(
+      "seed-list-item__pressedOverlay--pressed_true",
+    );
+
+    fireEvent.tap(item);
+    expect(onTap).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <List.ButtonItem disabled className="button-item" bindtap={onTap} accessibility-label="열기">
+        <List.Content>
+          <List.Title>버튼</List.Title>
+        </List.Content>
+      </List.ButtonItem>,
+    );
+    item = getListItem("button-item");
+    fireEvent.tap(item);
+
+    expect(onTap).toHaveBeenCalledTimes(1);
+    expect(item).toHaveAttribute("accessibility-traits", "disabled");
+    expect(item.querySelector(".seed-list-item__title")).toHaveClass(
+      "seed-list-item__title--disabled_true",
+    );
+  });
+
+  it("uses the existing checkbox and switch state", () => {
+    const onCheckedChange = vi.fn();
+
+    render(
+      <List.Root>
+        <List.CheckboxItem className="checkbox-item" onCheckedChange={onCheckedChange}>
+          <List.Content>
+            <List.Title>체크</List.Title>
+          </List.Content>
+        </List.CheckboxItem>
+        <List.SwitchItem className="switch-item">
+          <List.Content>
+            <List.Title>스위치</List.Title>
+          </List.Content>
+        </List.SwitchItem>
+      </List.Root>,
+    );
+
+    const checkbox = getListItem("checkbox-item");
+    const checkboxRoot = checkbox.parentElement as HTMLElement;
+    expect(checkbox).toHaveAttribute("accessibility-value", "선택 안 됨");
+    fireEvent.tap(checkboxRoot);
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    expect(checkbox).toHaveAttribute("accessibility-value", "선택됨");
+
+    const switchItem = getListItem("switch-item");
+    const switchRoot = switchItem.parentElement as HTMLElement;
+    expect(switchItem).toHaveAttribute("accessibility-value", "꺼짐");
+    fireEvent.tap(switchRoot);
+    expect(switchItem).toHaveAttribute("accessibility-value", "켜짐");
+  });
+
+  it("uses radio-group selection state", () => {
+    render(
+      <RadioGroup.Root defaultValue="first">
+        <List.RadioItem value="first" className="first-radio">
+          <List.Content>
+            <List.Title>첫 번째</List.Title>
+          </List.Content>
+        </List.RadioItem>
+        <List.RadioItem value="second" className="second-radio">
+          <List.Content>
+            <List.Title>두 번째</List.Title>
+          </List.Content>
+        </List.RadioItem>
+      </RadioGroup.Root>,
+    );
+
+    const first = getListItem("first-radio");
+    const second = getListItem("second-radio");
+    expect(first).toHaveAttribute("accessibility-value", "선택됨");
+    expect(second).toHaveAttribute("accessibility-value", "선택 안 됨");
+
+    fireEvent.tap(second.parentElement as HTMLElement);
+    expect(first).toHaveAttribute("accessibility-value", "선택 안 됨");
+    expect(second).toHaveAttribute("accessibility-value", "선택됨");
+  });
+});