@seed-design/lynx-react 0.6.3 → 0.7.0

package/src/components/ReactionButton/ReactionButton.test.tsx

@@ -0,0 +1,122 @@
+import "@testing-library/jest-dom";
+import { fireEvent, getQueriesForElement, render } from "@lynx-js/react/testing-library";
+import type { MainThread } from "@lynx-js/types";
+import type * as LynxReact from "@lynx-js/react";
+import * as React from "@lynx-js/react";
+import { describe, expect, it, vi } from "vitest";
+
+import type { LynxIconElementProps } from "../../types";
+import { Count } from "../Count";
+import { PrefixIcon } from "../Icon";
+import { ReactionButton } from "./ReactionButton";
+
+vi.mock("@lynx-js/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof LynxReact>();
+
+  return {
+    ...actual,
+    runOnMainThread: () => () => undefined,
+  };
+});
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function getReactionButtonRoot() {
+  const root = getRenderedRoot();
+
+  if (root.classList.contains("seed-reaction-button__root")) return root;
+
+  const reactionButtonRoot = root.querySelector<HTMLElement>(".seed-reaction-button__root");
+  if (!reactionButtonRoot) throw new Error("Expected ReactionButton root to exist.");
+
+  return reactionButtonRoot;
+}
+
+const MockIcon = React.forwardRef<MainThread.Element, LynxIconElementProps>((props, ref) => {
+  const { className, style, ...rest } = props;
+
+  return (
+    <image
+      {...rest}
+      {...(ref ? { "main-thread:ref": ref as React.Ref<MainThread.Element> } : {})}
+      className={className}
+      style={style}
+    />
+  );
+});
+MockIcon.displayName = "MockIcon";
+
+describe("ReactionButton", () => {
+  it("composes slots and toggles uncontrolled selected state", () => {
+    const onPressedChange = vi.fn();
+    render(
+      <ReactionButton onPressedChange={onPressedChange}>
+        <PrefixIcon icon={<MockIcon />} />
+        좋아요
+        <Count>12</Count>
+      </ReactionButton>,
+    );
+
+    const root = getReactionButtonRoot();
+    const queries = getQueriesForElement(getRenderedRoot());
+
+    expect(root).toHaveClass("seed-reaction-button__root--size_small");
+    expect(root.querySelector(".seed-prefix-icon")).toHaveClass("seed-reaction-button__prefixIcon");
+    expect(queries.getByText("좋아요")).toHaveClass("seed-reaction-button__label");
+    expect(queries.getByText("12")).toHaveClass("seed-count", "seed-reaction-button__count");
+
+    fireEvent.tap(root);
+
+    expect(onPressedChange).toHaveBeenCalledWith(true);
+    expect(getReactionButtonRoot()).toHaveClass("seed-reaction-button__root--selected_true");
+    expect(getReactionButtonRoot()).toHaveAttribute("accessibility-traits", "selected");
+  });
+
+  it("does not toggle when disabled", () => {
+    const onPressedChange = vi.fn();
+    render(
+      <ReactionButton disabled onPressedChange={onPressedChange}>
+        좋아요
+      </ReactionButton>,
+    );
+
+    const root = getReactionButtonRoot();
+    fireEvent.tap(root);
+
+    expect(onPressedChange).not.toHaveBeenCalled();
+    expect(root).toHaveClass("seed-reaction-button__root--disabled_true");
+    expect(root).toHaveAttribute("accessibility-traits", "disabled");
+  });
+
+  it("keeps content mounted and handles taps while loading", () => {
+    const onPressedChange = vi.fn();
+    render(
+      <ReactionButton loading onPressedChange={onPressedChange}>
+        좋아요
+        <Count>12</Count>
+      </ReactionButton>,
+    );
+
+    const root = getReactionButtonRoot();
+    const queries = getQueriesForElement(getRenderedRoot());
+    const content = root.querySelector(".seed-reaction-button__content");
+
+    expect(content).toHaveClass("seed-reaction-button__content--loading_true");
+    expect(queries.getByText("좋아요")).toBeInTheDocument();
+    expect(queries.getByText("12")).toBeInTheDocument();
+    expect(root.querySelector(".seed-reaction-button__loadingIndicator")).toBeInTheDocument();
+    expect(root.querySelector(".seed-progress-circle__root")).toBeInTheDocument();
+
+    fireEvent.tap(root);
+
+    expect(onPressedChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/components/ReactionButton/ReactionButton.tsx

@@ -0,0 +1,139 @@
+import { reactionButton } from "@seed-design/lynx-css/recipes/reaction-button";
+import type { ReactionButtonVariantProps } from "@seed-design/lynx-css/recipes/reaction-button";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { cloneElement, useMemo } from "@lynx-js/react";
+
+import { useControllableState } from "../../hooks/useControllableState";
+import { usePressTap } from "../../hooks/usePressTap";
+import type {
+  LynxAccessibilityProps,
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxViewRef,
+} from "../../types";
+import { toArray } from "../../utils/children";
+import { isCountElement, type CountProps } from "../Count/Count";
+import { getIconSlotName, IconSlotProvider } from "../Icon/Icon";
+import { ProgressCircleRange, ProgressCircleRoot } from "../ProgressCircle";
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HTML button 속성 및 native form 제출
+ * - 키보드 focus / focusVisible
+ * - `asChild`
+ */
+export interface ReactionButtonProps
+  extends Omit<ReactionButtonVariantProps, "selected" | "pressed" | "disabled" | "loading">,
+    LynxStyledElementProps,
+    LynxPressableProps,
+    LynxAccessibilityProps {
+  pressed?: boolean;
+  defaultPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export const ReactionButton = React.forwardRef<unknown, ReactionButtonProps>((props, ref) => {
+  const [variantProps, otherProps] = reactionButton.splitVariantProps(props);
+  const {
+    children,
+    className,
+    style,
+    defaultPressed = false,
+    onPressedChange,
+    bindtap,
+    "main-thread:bindtap": mainThreadBindtap,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-traits": accessibilityTraits,
+    ...nativeProps
+  } = otherProps;
+  const {
+    size,
+    pressed: pressedProp,
+    disabled = false,
+    loading = false,
+  } = variantProps;
+  const [selected, setSelected] = useControllableState({
+    value: pressedProp,
+    defaultValue: defaultPressed,
+    onChange: onPressedChange,
+  });
+  const handleTap = React.useCallback(
+    (...args: Parameters<NonNullable<LynxPressableProps["bindtap"]>>) => {
+      setSelected(!selected);
+      bindtap?.(...args);
+    },
+    [bindtap, selected, setSelected],
+  );
+  const { pressed, ...pressHandlers } = usePressTap({
+    disabled,
+    onTap: handleTap,
+    mainThreadOnTap: mainThreadBindtap,
+  });
+  const classNames = reactionButton({ ...variantProps, selected, pressed, disabled, loading });
+  const iconSlotContextValue = useMemo(
+    () => ({
+      classNames: { prefixIcon: classNames.prefixIcon },
+      deps: [size ?? "small", selected, pressed, disabled, loading],
+    }),
+    [classNames.prefixIcon, size, selected, pressed, disabled, loading],
+  );
+
+  const prefixIconChildren: React.ReactNode[] = [];
+  const labelChildren: React.ReactNode[] = [];
+  const countChildren: React.ReactElement<CountProps>[] = [];
+
+  for (const child of toArray(children)) {
+    if (getIconSlotName(child) === "prefixIcon") {
+      prefixIconChildren.push(child);
+      continue;
+    }
+
+    if (isCountElement(child)) {
+      countChildren.push(child);
+      continue;
+    }
+
+    labelChildren.push(child);
+  }
+
+  return (
+    <IconSlotProvider value={iconSlotContextValue}>
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...nativeProps}
+        className={clsx(classNames.root, className)}
+        style={style}
+        accessibility-element={accessibilityElement}
+        accessibility-traits={
+          disabled ? "disabled" : selected ? "selected" : (accessibilityTraits ?? "button")
+        }
+        {...pressHandlers}
+      >
+        <view className={classNames.content}>
+          {prefixIconChildren}
+          {labelChildren.length > 0 ? (
+            <text className={classNames.label}>{labelChildren}</text>
+          ) : null}
+          {countChildren.map((child) =>
+            cloneElement(child, {
+              className: clsx(classNames.count, child.props.className),
+            }),
+          )}
+        </view>
+        {loading ? (
+          <view className={classNames.loadingIndicator}>
+            <ProgressCircleRoot size="14" tone="inherit">
+              <ProgressCircleRange />
+            </ProgressCircleRoot>
+          </view>
+        ) : null}
+      </view>
+    </IconSlotProvider>
+  );
+});
+ReactionButton.displayName = "ReactionButton";

package/src/components/ReactionButton/index.ts

@@ -0,0 +1 @@
+export { ReactionButton, type ReactionButtonProps } from "./ReactionButton";

package/src/components/ScaleFeedback/ScaleFeedback.test.tsx

@@ -0,0 +1,41 @@
+import { createRef } from "@lynx-js/react";
+import { render, waitSchedule } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { ScaleFeedback } from "./ScaleFeedback";
+
+describe("ScaleFeedback", () => {
+  it("forwards the consumer ref and clears it on unmount", async () => {
+    const ref = createRef<unknown>();
+    const { unmount } = render(
+      <ScaleFeedback ref={ref}>
+        <view />
+      </ScaleFeedback>,
+      { enableMainThread: true, enableBackgroundThread: true },
+    );
+    await waitSchedule();
+
+    expect(ref.current).toBeTruthy();
+    unmount();
+    await waitSchedule();
+    expect(ref.current).toBeNull();
+  });
+
+  it("renders its child inside one native feedback target", async () => {
+    const { container } = render(
+      <ScaleFeedback>
+        <view id="target" />
+      </ScaleFeedback>,
+      { enableMainThread: true, enableBackgroundThread: false },
+    );
+    await waitSchedule();
+
+    const target = container.querySelector("#target");
+    const feedbackTarget = container.children[0];
+
+    expect(target).not.toBeNull();
+    expect(container.children).toHaveLength(1);
+    expect(feedbackTarget).not.toBe(target);
+    expect(feedbackTarget.children).toHaveLength(1);
+  });
+});

package/src/components/ScaleFeedback/ScaleFeedback.tsx

@@ -0,0 +1,32 @@
+import * as React from "@lynx-js/react";
+import { useScaleFeedback, type UseScaleFeedbackOptions } from "../../hooks/useScaleFeedback";
+import type { LynxViewRef } from "../../types";
+import { mergeProps } from "../../utils/merge-props";
+
+export interface ScaleFeedbackProps extends UseScaleFeedbackOptions {
+  /** Content rendered inside the native element that receives Self Scale Feedback. */
+  children: React.ReactNode;
+}
+
+/**
+ * Applies Self Scale Feedback through a native Lynx view.
+ */
+export const ScaleFeedback = React.forwardRef<unknown, ScaleFeedbackProps>(
+  ({ children, ...options }, ref) => {
+    const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback(options);
+
+    return (
+      <view
+        {...mergeProps(
+          ref ? { ref: ref as LynxViewRef } : {},
+          scaleFeedbackTriggerProps,
+          scaleFeedbackTargetProps,
+        )}
+      >
+        {children}
+      </view>
+    );
+  },
+);
+
+ScaleFeedback.displayName = "ScaleFeedback";

package/src/components/ScaleFeedback/index.ts

@@ -0,0 +1 @@
+export * from "./ScaleFeedback";

package/src/components/SegmentedControl/SegmentedControl.test.tsx

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { fireEvent, render, waitSchedule } from "@lynx-js/react/testing-library";
 import { describe, expect, it, vi } from "vitest";
 
 import * as SegmentedControl from "./SegmentedControl.namespace";
@@ -62,19 +62,31 @@ describe("SegmentedControl", () => {
     expect(disabledItem).toHaveAttribute("accessibility-traits", "disabled");
   });
 
-  it("keeps the press-start selection on the fading item background", () => {
-    const { container } = render(<BasicSegmentedControl defaultValue="hot" />);
+  it("keeps the press-start selection when main-thread feedback hands off to selection", async () => {
+    const onValueChange = vi.fn();
+    const { container } = render(
+      <BasicSegmentedControl defaultValue="hot" onValueChange={onValueChange} />,
+      {
+        enableMainThread: true,
+        enableBackgroundThread: true,
+      },
+    );
+    await waitSchedule();
     const latest = getItem(container, "최신순");
     const getBackground = () =>
       latest.querySelector<HTMLElement>(".seed-segmented-control__itemBackground");
 
     fireEvent.touchstart(latest, {});
+    await waitSchedule();
     expect(getBackground()).toHaveClass("seed-segmented-control__itemBackground--pressed_true");
     expect(getBackground()).toHaveClass("seed-segmented-control__itemBackground--selected_false");
 
     fireEvent.touchend(latest, {});
+    await waitSchedule();
     fireEvent.tap(latest);
+    await waitSchedule();
 
+    expect(onValueChange).toHaveBeenCalledExactlyOnceWith("new");
     expect(getBackground()).toHaveClass("seed-segmented-control__itemBackground--pressed_false");
     expect(getBackground()).toHaveClass("seed-segmented-control__itemBackground--selected_false");
   });

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -4,6 +4,7 @@ import clsx from "clsx";
 
 import { useControllableState } from "../../hooks/useControllableState";
 import { usePressTap } from "../../hooks/usePressTap";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
 import type {
   LynxAccessibilityProps,
   LynxPressableProps,
@@ -12,6 +13,8 @@ import type {
   LynxViewRef,
 } from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { HStack } from "../Stack";
+import { mergeProps } from "../../utils/merge-props";
 
 interface SegmentedControlContextValue {
   value: string | undefined;
@@ -105,8 +108,7 @@ export const SegmentedControlRoot = React.forwardRef<unknown, SegmentedControlRo
       <SegmentedControlContext.Provider value={contextValue}>
         <ClassNamesProvider value={classNames}>
           <view
-            {...(ref ? { ref: ref as LynxViewRef } : {})}
-            {...nativeProps}
+            {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
             accessibility-element={accessibilityElement}
             accessibility-role-description={accessibilityRoleDescription}
             className={clsx(classNames.root, className)}
@@ -132,6 +134,7 @@ export interface SegmentedControlItemProps
     LynxAccessibilityProps,
     LynxPressableProps {
   children: string | number;
+  notification?: React.ReactNode;
   value: string;
   disabled?: boolean;
 }
@@ -140,6 +143,7 @@ export const SegmentedControlItem = React.forwardRef<unknown, SegmentedControlIt
   (props, ref) => {
     const {
       children,
+      notification,
       className,
       style,
       value: itemValue,
@@ -170,11 +174,12 @@ export const SegmentedControlItem = React.forwardRef<unknown, SegmentedControlIt
       [bindtap, context.selectValue, itemValue, selected],
     );
     const pressSelectionRef = React.useRef(selected);
-    const { pressed, bindtouchstart, ...pressHandlers } = usePressTap({
-      disabled,
-      onTap: handleTap,
-      mainThreadOnTap: mainThreadBindtap,
-    });
+    const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } =
+      usePressTap({
+        disabled,
+        onTap: handleTap,
+        mainThreadOnTap: mainThreadBindtap,
+      });
     const handleTouchStart = React.useCallback(
       (...args: Parameters<typeof bindtouchstart>) => {
         pressSelectionRef.current = selected;
@@ -182,6 +187,12 @@ export const SegmentedControlItem = React.forwardRef<unknown, SegmentedControlIt
       },
       [bindtouchstart, selected],
     );
+    const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+      disabled,
+      onTouchStart: handleTouchStart,
+      onTouchEnd: bindtouchend,
+      onTouchCancel: bindtouchcancel,
+    });
     const classes = segmentedControl({ selected, disabled, pressed });
     const pressStartClasses = segmentedControl({
       selected: pressSelectionRef.current,
@@ -193,10 +204,12 @@ export const SegmentedControlItem = React.forwardRef<unknown, SegmentedControlIt
 
     return (
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
-        {...nativeProps}
-        bindtouchstart={handleTouchStart}
-        {...pressHandlers}
+        {...mergeProps(
+          ref ? { ref: ref as LynxViewRef } : {},
+          scaleFeedbackTriggerProps,
+          pressHandlers,
+          nativeProps,
+        )}
         accessibility-element={accessibilityElement}
         accessibility-label={accessibilityLabel ?? label}
         accessibility-role-description={accessibilityRoleDescription}
@@ -208,7 +221,16 @@ export const SegmentedControlItem = React.forwardRef<unknown, SegmentedControlIt
         style={style}
       >
         <view accessibility-elements-hidden={true} className={pressStartClasses.itemBackground} />
-        <text className={classes.label}>{children}</text>
+        <view className={classes.itemContent} {...scaleFeedbackTargetProps}>
+        {notification ? (
+          <HStack position="relative" align="flex-start">
+            <text className={classes.label}>{children}</text>
+            <view accessibility-elements-hidden={true}>{notification}</view>
+          </HStack>
+        ) : (
+          <text className={classes.label}>{children}</text>
+        )}
+        </view>
       </view>
     );
   },
@@ -224,8 +246,7 @@ export const SegmentedControlIndicator = React.forwardRef<unknown, SegmentedCont
 
     return (
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
-        {...nativeProps}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         accessibility-elements-hidden={true}
         className={clsx(classNames.indicator, className)}
         style={style}

package/src/components/SelectBox/SelectBox.test.tsx

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import { act, fireEvent, render } from "@lynx-js/react/testing-library";
+import { act, fireEvent, render, waitSchedule } from "@lynx-js/react/testing-library";
 import { describe, expect, it, vi } from "vitest";
 
 import { RadioGroup } from "../RadioGroup";
@@ -29,6 +29,36 @@ function CheckItem() {
 }
 
 describe("SelectBox", () => {
+  it("shares checkbox touch state with content feedback and cancels without selecting", async () => {
+    const onCheckedChange = vi.fn();
+    const { container } = render(
+      <CheckSelectBox.Root onCheckedChange={onCheckedChange}>
+        <CheckSelectBox.Trigger>
+          <CheckSelectBox.Label>선택</CheckSelectBox.Label>
+        </CheckSelectBox.Trigger>
+      </CheckSelectBox.Root>,
+      { enableMainThread: true, enableBackgroundThread: true },
+    );
+    await waitSchedule();
+    const trigger = container.querySelector<HTMLElement>(".seed-select-box__interactionRoot")!;
+    const surface = container.querySelector(".seed-select-box__root")!;
+    const content = container.querySelector(".seed-select-box__scaleContent")!;
+    expect(content).toHaveAttribute("flatten", "false");
+    expect(content).not.toContainElement(surface.querySelector(".seed-select-box__selectedStroke"));
+
+    fireEvent.touchstart(trigger, {});
+    await waitSchedule();
+    expect(surface).toHaveClass("seed-select-box__root--pressed_true");
+    fireEvent.touchcancel(trigger, {});
+    await waitSchedule();
+    expect(surface).toHaveClass("seed-select-box__root--pressed_false");
+    expect(onCheckedChange).not.toHaveBeenCalled();
+
+    fireEvent.tap(trigger);
+    await waitSchedule();
+    expect(onCheckedChange).toHaveBeenCalledExactlyOnceWith(true);
+  });
+
   it("lays out custom label content in a view", () => {
     render(
       <CheckSelectBox.Root accessibility-label="Melon New">
@@ -137,6 +167,9 @@ describe("SelectBox", () => {
           <RadioSelectBox.Item value="second" accessibility-label="두 번째">
             <RadioSelectBox.Trigger>
               <RadioSelectBox.Label>두 번째</RadioSelectBox.Label>
+              <RadioGroup.ItemControl>
+                <RadioGroup.ItemIndicator />
+              </RadioGroup.ItemControl>
             </RadioSelectBox.Trigger>
           </RadioSelectBox.Item>
           <RadioSelectBox.Item value="disabled" accessibility-label="비활성" disabled>
@@ -153,6 +186,11 @@ describe("SelectBox", () => {
       ".seed-select-box__interactionRoot",
     );
     const surfaces = root.querySelectorAll<HTMLElement>(".seed-select-box__root");
+    const radioContent = surfaces[1].querySelector(".seed-select-box__scaleContent");
+    const radioMark = surfaces[1].querySelector(".seed-radiomark__root");
+
+    expect(radioContent).toHaveAttribute("flatten", "false");
+    expect(radioMark).not.toHaveAttribute("flatten", "false");
 
     expect(surfaces[0]).toHaveAttribute("accessibility-value", "selected");
     expect(surfaces[1]).toHaveAttribute("accessibility-value", "not selected");