@seed-design/lynx-react 0.4.1 → 0.5.1

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,76 @@
+import * as React from "@lynx-js/react";
+
+import type { LynxAccessibilityProps, LynxStyledElementProps } from "../../types";
+import type { StyleProps } from "../../utils/styled";
+import { Box } from "../Box";
+
+export interface DividerProps
+  extends Omit<LynxStyledElementProps, "children">,
+    LynxAccessibilityProps {
+  /**
+   * @default "stroke.neutralMuted"
+   */
+  color?: StyleProps["borderColor"];
+
+  /**
+   * @default 1
+   */
+  thickness?: StyleProps["borderWidth"];
+
+  /**
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+
+  /**
+   * Adds 16px of spacing to both ends of the divider.
+   * @default false
+   */
+  inset?: boolean;
+}
+
+/**
+ * @platform Lynx
+ *
+ * 웹의 `<hr>` 대신 native `<view>`를 렌더링합니다. 구분선은 기본적으로 접근성
+ * 요소로 노출되며 `accessibility-role-description="separator"`를 사용합니다.
+ * 장식용 구분선은 `accessibility-element={false}`로 접근성 트리에서 제외하세요.
+ */
+export const Divider = React.forwardRef<unknown, DividerProps>((props, ref) => {
+  const {
+    color = "stroke.neutralMuted",
+    thickness = 1,
+    orientation = "horizontal",
+    inset = false,
+    style,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "separator",
+    ...nativeProps
+  } = props;
+
+  const isHorizontal = orientation === "horizontal";
+
+  return (
+    <Box
+      {...nativeProps}
+      ref={ref}
+      borderColor={color}
+      borderWidth={0}
+      borderBottomWidth={isHorizontal ? thickness : 0}
+      borderRightWidth={isHorizontal ? 0 : thickness}
+      accessibility-element={accessibilityElement}
+      accessibility-role-description={accessibilityRoleDescription}
+      style={{
+        width: isHorizontal ? (inset ? "calc(100% - 32px)" : "100%") : undefined,
+        height: isHorizontal ? undefined : inset ? "calc(100% - 32px)" : "100%",
+        marginLeft: inset && isHorizontal ? "16px" : undefined,
+        marginRight: inset && isHorizontal ? "16px" : undefined,
+        marginTop: inset && !isHorizontal ? "16px" : undefined,
+        marginBottom: inset && !isHorizontal ? "16px" : undefined,
+        ...style,
+      }}
+    />
+  );
+});
+
+Divider.displayName = "Divider";

package/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from "./Divider";

package/src/components/Icon/Icon.test.tsx

@@ -0,0 +1,129 @@
+import * as React from "@lynx-js/react";
+import { act, render, waitSchedule } from "@lynx-js/react/testing-library";
+import type { MainThread } from "@lynx-js/types";
+import { describe, expect, it } from "vitest";
+
+import type { LynxIconElementProps } from "../../types";
+import { InternalIcon } from "./Icon";
+
+const TestIcon = React.forwardRef<
+  MainThread.Element,
+  LynxIconElementProps & { children?: React.ReactNode }
+>((props, ref) => {
+  const { children, ...nativeProps } = props;
+
+  return (
+    <image {...nativeProps} {...(ref ? { "main-thread:ref": ref } : {})}>
+      {children}
+    </image>
+  );
+});
+TestIcon.displayName = "TestIcon";
+
+function getSourceAndImage() {
+  const source = elementTree.root?.querySelector<HTMLElement>("view");
+  const image = source?.querySelector<HTMLElement>("image");
+
+  if (!source || !image) {
+    throw new Error("Expected icon source and image elements to exist.");
+  }
+
+  return { source, image };
+}
+
+function installMainThreadStyleMocks(getComputedColor: () => string) {
+  let nextFrameId = 1;
+  const frames = new Map<number, FrameRequestCallback>();
+
+  lynxTestingEnv.mainThread.globalThis["SystemInfo"] = {
+    ...SystemInfo,
+    lynxSdkVersion: "3.5",
+  };
+  lynxTestingEnv.mainThread.globalThis["__GetComputedStyleByKey"] = getComputedColor;
+  lynxTestingEnv.mainThread.globalThis["requestAnimationFrame"] = (
+    callback: FrameRequestCallback,
+  ) => {
+    const frameId = nextFrameId;
+    nextFrameId += 1;
+    frames.set(frameId, callback);
+    return frameId;
+  };
+  lynxTestingEnv.mainThread.globalThis["cancelAnimationFrame"] = (frameId: number) => {
+    frames.delete(frameId);
+  };
+
+  const runNextFrame = (timestamp = 16) => {
+    const nextFrame = frames.entries().next().value;
+    if (!nextFrame) {
+      throw new Error("Expected a scheduled animation frame.");
+    }
+
+    const [frameId, callback] = nextFrame;
+    frames.delete(frameId);
+    lynxTestingEnv.switchToMainThread();
+    act(() => {
+      callback(timestamp);
+    });
+    lynxTestingEnv.switchToBackgroundThread();
+  };
+
+  return { frames, runNextFrame };
+}
+
+describe("InternalIcon", () => {
+  it("reads the updated computed color in the next frame", async () => {
+    let computedColor = "rgb(134, 139, 148)";
+    const { frames, runNextFrame } = installMainThreadStyleMocks(() => computedColor);
+
+    const renderIcon = (dependency: string) => (
+      <InternalIcon icon={<TestIcon />} className={dependency} deps={[dependency]} />
+    );
+    const { rerender } = render(renderIcon("unchecked"), {
+      enableMainThread: true,
+      enableBackgroundThread: true,
+    });
+    await waitSchedule();
+
+    const { image } = getSourceAndImage();
+    expect(frames.size).toBe(1);
+    runNextFrame();
+
+    expect(image.getAttribute("tint-color")).toBe("rgb(134, 139, 148)");
+
+    rerender(renderIcon("checked"));
+    await waitSchedule();
+
+    expect(frames.size).toBe(1);
+    expect(image.getAttribute("tint-color")).toBe("rgb(134, 139, 148)");
+
+    computedColor = "rgb(255, 102, 0)";
+    runNextFrame();
+
+    expect(image.getAttribute("tint-color")).toBe("rgb(255, 102, 0)");
+  });
+
+  it("coalesces pending frame syncs across rapid dependency changes", async () => {
+    let computedColor = "rgb(134, 139, 148)";
+    const { frames, runNextFrame } = installMainThreadStyleMocks(() => computedColor);
+    const renderIcon = (dependency: string) => (
+      <InternalIcon icon={<TestIcon />} className={dependency} deps={[dependency]} />
+    );
+    const { rerender } = render(renderIcon("unchecked"), {
+      enableMainThread: true,
+      enableBackgroundThread: true,
+    });
+    await waitSchedule();
+
+    rerender(renderIcon("checked"));
+    await waitSchedule();
+    rerender(renderIcon("unchecked-again"));
+    await waitSchedule();
+
+    expect(frames.size).toBe(1);
+
+    computedColor = "rgb(73, 80, 88)";
+    runNextFrame();
+
+    expect(getSourceAndImage().image.getAttribute("tint-color")).toBe("rgb(73, 80, 88)");
+  });
+});

package/src/components/Tabs/Tabs.namespace.ts

@@ -0,0 +1,16 @@
+export {
+  TabsCarousel as Carousel,
+  TabsCarouselCamera as CarouselCamera,
+  TabsContent as Content,
+  TabsIndicator as Indicator,
+  TabsList as List,
+  TabsRoot as Root,
+  TabsTrigger as Trigger,
+  type TabsCarouselCameraProps as CarouselCameraProps,
+  type TabsCarouselProps as CarouselProps,
+  type TabsContentProps as ContentProps,
+  type TabsIndicatorProps as IndicatorProps,
+  type TabsListProps as ListProps,
+  type TabsRootProps as RootProps,
+  type TabsTriggerProps as TriggerProps,
+} from "./Tabs";

package/src/components/Tabs/Tabs.test.tsx

@@ -0,0 +1,221 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import * as Tabs from "./Tabs.namespace";
+import { getTabsLayoutWidth, getTabsOrderedItems, getTabsTriggerRects } from "./Tabs.utils";
+
+function BasicTabs(props: {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}) {
+  return (
+    <Tabs.Root {...props}>
+      <Tabs.List>
+        <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+        <Tabs.Trigger value="two">두 번째</Tabs.Trigger>
+        <Tabs.Indicator />
+      </Tabs.List>
+      <Tabs.Content value="one">첫 번째 콘텐츠</Tabs.Content>
+      <Tabs.Content value="two">두 번째 콘텐츠</Tabs.Content>
+    </Tabs.Root>
+  );
+}
+
+function getTrigger(container: HTMLElement, label: string) {
+  const trigger = Array.from(container.querySelectorAll<HTMLElement>(".seed-tabs__trigger")).find(
+    (element) => element.textContent === label,
+  );
+  if (!trigger) throw new Error(`Expected trigger for ${label} to exist.`);
+  return trigger;
+}
+
+describe("Tabs", () => {
+  it("renders triggers inside the list content layout container", () => {
+    const { container } = render(<BasicTabs defaultValue="one" />);
+    const list = container.querySelector(".seed-tabs__list");
+    const listContent = list?.querySelector(":scope > .seed-tabs__listContent");
+
+    expect(listContent).not.toBeNull();
+    expect(listContent?.querySelectorAll(".seed-tabs__trigger")).toHaveLength(2);
+  });
+
+  it("changes an uncontrolled value when a trigger is tapped", () => {
+    const onValueChange = vi.fn();
+    const { container } = render(<BasicTabs defaultValue="one" onValueChange={onValueChange} />);
+
+    const first = getTrigger(container, "첫 번째");
+    const second = getTrigger(container, "두 번째");
+
+    expect(first).toHaveAttribute("accessibility-value", "selected");
+    expect(second).toHaveAttribute("accessibility-value", "not selected");
+
+    fireEvent.tap(second);
+
+    expect(onValueChange).toHaveBeenCalledWith("two");
+    expect(second).toHaveAttribute("accessibility-value", "selected");
+  });
+
+  it("derives trigger positions from ordered widths instead of platform coordinates", () => {
+    expect(getTabsLayoutWidth({ detail: { width: 128 }, params: { width: 128 } })).toBe(128);
+    expect(
+      getTabsTriggerRects(["one", "two", "three"], {
+        one: 128,
+        two: 128,
+        three: 128,
+      }),
+    ).toEqual({
+      one: { left: 0, width: 128 },
+      two: { left: 128, width: 128 },
+      three: { left: 256, width: 128 },
+    });
+  });
+
+  it("waits for every preceding trigger width before positioning later triggers", () => {
+    expect(getTabsTriggerRects(["one", "two", "three"], { one: 80, three: 120 })).toEqual({
+      one: { left: 0, width: 80 },
+    });
+  });
+
+  it("ignores inherited object properties used as trigger values", () => {
+    expect(getTabsTriggerRects(["toString"], {})).toEqual({});
+    expect(getTabsTriggerRects(["constructor"], {})).toEqual({});
+    expect(getTabsTriggerRects(["__proto__"], {})).toEqual({});
+  });
+
+  it("updates trigger positions when keyed triggers are reordered", () => {
+    const items = [{ value: "one" }, { value: "two" }, { value: "three" }];
+    const reordered = getTabsOrderedItems(items, ["three", "two", "one"]);
+    const rects = getTabsTriggerRects(
+      reordered.map((item) => item.value),
+      { one: 80, two: 80, three: 80 },
+    );
+
+    expect(reordered.map((item) => item.value)).toEqual(["three", "two", "one"]);
+    expect(rects["three"]?.left).toBe(0);
+  });
+
+  it("does not select a disabled trigger", () => {
+    const onValueChange = vi.fn();
+    const { container } = render(
+      <Tabs.Root defaultValue="one" onValueChange={onValueChange}>
+        <Tabs.List>
+          <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+          <Tabs.Trigger value="two" disabled>
+            두 번째
+          </Tabs.Trigger>
+        </Tabs.List>
+      </Tabs.Root>,
+    );
+
+    const disabled = getTrigger(container, "두 번째");
+    fireEvent.tap(disabled);
+
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(disabled).toHaveAttribute("accessibility-traits", "disabled");
+  });
+
+  it("keeps controlled selection until the value prop changes", () => {
+    const onValueChange = vi.fn();
+    const { container, rerender } = render(<BasicTabs value="one" onValueChange={onValueChange} />);
+
+    const second = getTrigger(container, "두 번째");
+    fireEvent.tap(second);
+
+    expect(onValueChange).toHaveBeenCalledWith("two");
+    expect(second).toHaveAttribute("accessibility-value", "not selected");
+
+    rerender(<BasicTabs value="two" onValueChange={onValueChange} />);
+    expect(second).toHaveAttribute("accessibility-value", "selected");
+  });
+
+  it("keeps carousel contents as views without a carousel camera", () => {
+    const { container } = render(
+      <Tabs.Root defaultValue="one">
+        <Tabs.List>
+          <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Carousel>
+          <Tabs.Content value="one">첫 번째 콘텐츠</Tabs.Content>
+        </Tabs.Carousel>
+      </Tabs.Root>,
+    );
+
+    expect(container.querySelector("viewpager-item")).toBeNull();
+    expect(container.querySelector(".seed-tabs__content")).not.toBeNull();
+  });
+
+  it("renders carousel camera contents as native viewpager items", () => {
+    const { container } = render(
+      <Tabs.Root defaultValue="one">
+        <Tabs.List>
+          <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+          <Tabs.Trigger value="two">두 번째</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Carousel swipeable>
+          <Tabs.CarouselCamera>
+            <Tabs.Content value="one">첫 번째 콘텐츠</Tabs.Content>
+            <Tabs.Content value="two">두 번째 콘텐츠</Tabs.Content>
+          </Tabs.CarouselCamera>
+        </Tabs.Carousel>
+      </Tabs.Root>,
+    );
+
+    const pager = container.querySelector("viewpager");
+    expect(pager).not.toBeNull();
+    expect(pager?.querySelectorAll("viewpager-item")).toHaveLength(2);
+    expect(pager).toHaveAttribute("enable-scroll");
+    expect(pager).toHaveAttribute("ios-gesture-offset", "32");
+  });
+
+  it("supports a custom iOS back gesture edge width", () => {
+    const { container } = render(
+      <Tabs.Root defaultValue="one">
+        <Tabs.List>
+          <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Carousel swipeable iosBackGestureEdgeWidth={48}>
+          <Tabs.CarouselCamera>
+            <Tabs.Content value="one">첫 번째 콘텐츠</Tabs.Content>
+          </Tabs.CarouselCamera>
+        </Tabs.Carousel>
+      </Tabs.Root>,
+    );
+
+    expect(container.querySelector("viewpager")).toHaveAttribute("ios-gesture-offset", "48");
+  });
+
+  it("maps pager indexes from content order when a disabled trigger has no content", () => {
+    const { container } = render(
+      <Tabs.Root defaultValue="two">
+        <Tabs.List>
+          <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+          <Tabs.Trigger value="disabled" disabled>
+            비활성
+          </Tabs.Trigger>
+          <Tabs.Trigger value="two">두 번째</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Carousel swipeable>
+          <Tabs.CarouselCamera>
+            <Tabs.Content value="one">첫 번째 콘텐츠</Tabs.Content>
+            <Tabs.Content value="two">두 번째 콘텐츠</Tabs.Content>
+          </Tabs.CarouselCamera>
+        </Tabs.Carousel>
+      </Tabs.Root>,
+    );
+
+    const pager = container.querySelector("viewpager");
+    expect(pager).toHaveAttribute("initial-select-index", "1");
+    expect(getTrigger(container, "두 번째")).toHaveAttribute("accessibility-value", "selected");
+  });
+
+  it("exposes tab semantics through Lynx accessibility attributes", () => {
+    const { container } = render(<BasicTabs defaultValue="one" />);
+    const first = getTrigger(container, "첫 번째");
+
+    expect(first).toHaveAttribute("accessibility-role-description", "tab");
+    expect(first).toHaveAttribute("accessibility-label", "첫 번째");
+    expect(first).toHaveAttribute("accessibility-traits", "selected");
+  });
+});