@seed-design/lynx-react 0.7.0 → 0.8.0

package/src/components/Select/index.ts

@@ -0,0 +1,39 @@
+export {
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectPlaceholder,
+  SelectPrefixIcon,
+  SelectSuffixIcon,
+  SelectContent,
+  SelectScrollArea,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectItemPrefixIcon,
+  SelectItemBody,
+  SelectItemLabel,
+  SelectItemDescription,
+  SelectItemIndicator,
+  type SelectRootProps,
+  type SelectTriggerProps,
+  type SelectValueProps,
+  type SelectPlaceholderProps,
+  type SelectPrefixIconProps,
+  type SelectSuffixIconProps,
+  type SelectContentProps,
+  type SelectScrollAreaProps,
+  type SelectGroupProps,
+  type SelectGroupLabelProps,
+  type SelectItemProps,
+  type SelectItemPrefixIconProps,
+  type SelectItemBodyProps,
+  type SelectItemLabelProps,
+  type SelectItemDescriptionProps,
+  type SelectItemIndicatorProps,
+  type SelectOpenChangeDetails,
+  type SelectOpenChangeReason,
+  type SelectSelectedItem,
+} from "./Select";
+
+export * as Select from "./Select.namespace";

package/src/components/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,64 @@
+import "@testing-library/jest-dom";
+import { render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { Skeleton } from "./Skeleton";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function getSkeletonRoot() {
+  const root = getRenderedRoot().querySelector<HTMLElement>(".seed-skeleton__root");
+
+  if (!root) {
+    throw new Error("Expected Skeleton root to exist.");
+  }
+
+  return root;
+}
+
+describe("Skeleton", () => {
+  it("renders root and shimmer slots with default variant classes", () => {
+    render(<Skeleton />);
+
+    const root = getSkeletonRoot();
+    const shimmer = root.querySelector<HTMLElement>(".seed-skeleton__shimmer");
+
+    expect(root.tagName.toLowerCase()).toBe("view");
+    expect(root).toHaveClass("seed-skeleton__root--radius_8");
+    expect(root).toHaveClass("seed-skeleton__root--tone_neutral");
+    expect(shimmer).toBeInTheDocument();
+    expect(shimmer?.tagName.toLowerCase()).toBe("view");
+    expect(shimmer).toHaveClass("seed-skeleton__shimmer--tone_neutral");
+  });
+
+  it("applies radius and tone variants and preserves user className", () => {
+    render(<Skeleton className="custom-skeleton" radius="full" tone="magic" />);
+
+    const root = getSkeletonRoot();
+    const shimmer = root.querySelector<HTMLElement>(".seed-skeleton__shimmer");
+
+    expect(root).toHaveClass("custom-skeleton");
+    expect(root).toHaveClass("seed-skeleton__root--radius_full");
+    expect(root).toHaveClass("seed-skeleton__root--tone_magic");
+    expect(shimmer).toHaveClass("seed-skeleton__shimmer--tone_magic");
+  });
+
+  it("preserves width, height, style, and decorative accessibility semantics", () => {
+    render(<Skeleton width="48px" height="16px" style={{ opacity: 0.5 }} />);
+
+    const root = getSkeletonRoot();
+    const shimmer = root.querySelector<HTMLElement>(".seed-skeleton__shimmer");
+
+    expect(root).toHaveStyle({ width: "48px", height: "16px", opacity: "0.5" });
+    expect(root).toHaveAttribute("accessibility-elements-hidden", "true");
+    expect(shimmer).toHaveAttribute("accessibility-elements-hidden", "true");
+  });
+});

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,45 @@
+import { skeleton, type SkeletonVariantProps } from "@seed-design/lynx-css/recipes/skeleton";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+
+import type { LynxStyledElementProps, LynxViewRef } from "../../types";
+import { mergeProps } from "../../utils/merge-props";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
+
+/**
+ * @platform Lynx
+ *
+ * 웹 Skeleton의 정적 placeholder를 native `<view>` root와 shimmer child로
+ * 렌더링합니다. 장식 요소이므로 접근성 트리에서 숨겨지며, children이나 이벤트·상태
+ * API를 노출하지 않습니다.
+ */
+export interface SkeletonProps
+  extends SkeletonVariantProps,
+    Omit<LynxStyledElementProps, "children">,
+    Pick<StyleProps, "width" | "height"> {}
+
+export const Skeleton = React.forwardRef<unknown, SkeletonProps>((props, ref) => {
+  const [variantProps, otherProps] = skeleton.splitVariantProps(props);
+  const { style, restProps } = useStyleProps(otherProps);
+  const {
+    children: _children,
+    className,
+    ...nativeProps
+  } = restProps as typeof restProps & {
+    children?: unknown;
+  };
+  const classes = skeleton(variantProps);
+
+  return (
+    <view
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
+      className={clsx(classes.root, className)}
+      style={style}
+      accessibility-elements-hidden={true}
+    >
+      <view className={classes.shimmer} accessibility-elements-hidden={true} />
+    </view>
+  );
+});
+
+Skeleton.displayName = "Skeleton";

package/src/components/Skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton, type SkeletonProps } from "./Skeleton";

package/src/components/Slider/Slider.namespace.ts

@@ -0,0 +1,26 @@
+export {
+  SliderRoot as Root,
+  SliderControl as Control,
+  SliderTrack as Track,
+  SliderRange as Range,
+  SliderThumb as Thumb,
+  SliderTick as Tick,
+  SliderMarkers as Markers,
+  SliderMarker as Marker,
+  SliderValueIndicatorRoot as ValueIndicatorRoot,
+  SliderValueIndicatorArrow as ValueIndicatorArrow,
+  SliderValueIndicatorArrowTip as ValueIndicatorArrowTip,
+  SliderValueIndicatorLabel as ValueIndicatorLabel,
+  type SliderRootProps as RootProps,
+  type SliderControlProps as ControlProps,
+  type SliderTrackProps as TrackProps,
+  type SliderRangeProps as RangeProps,
+  type SliderThumbProps as ThumbProps,
+  type SliderTickProps as TickProps,
+  type SliderMarkersProps as MarkersProps,
+  type SliderMarkerProps as MarkerProps,
+  type SliderValueIndicatorRootProps as ValueIndicatorRootProps,
+  type SliderValueIndicatorArrowProps as ValueIndicatorArrowProps,
+  type SliderValueIndicatorArrowTipProps as ValueIndicatorArrowTipProps,
+  type SliderValueIndicatorLabelProps as ValueIndicatorLabelProps,
+} from "./Slider";

package/src/components/Slider/Slider.test.tsx

@@ -0,0 +1,260 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, waitSchedule } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+import { getRectByRef } from "@lynx-js/lynx-ui-common";
+import type * as LynxUiCommon from "@lynx-js/lynx-ui-common";
+
+import * as Slider from "./Slider.namespace";
+import {
+  hasMinimumSteps,
+  normalizeValue,
+  normalizeValues,
+  percentageForValue,
+  valueForPercentage,
+} from "./Slider.utils";
+
+vi.mock("@lynx-js/lynx-ui-common", async (importOriginal) => {
+  const actual = await importOriginal<typeof LynxUiCommon>();
+  return {
+    ...actual,
+    getRectByRef: vi.fn(() => Promise.resolve({ left: 10, width: 100 })),
+  };
+});
+
+describe("Slider utilities", () => {
+  it("normalizes to bounds and step increments", () => {
+    expect(normalizeValue(14, 0, 100, 10)).toBe(10);
+    expect(normalizeValue(140, 0, 100, 10)).toBe(100);
+    expect(normalizeValues([70, -2, 31], 0, 100, 10)).toEqual([0, 30, 70]);
+  });
+
+  it("uses allowed values instead of step snapping", () => {
+    expect(normalizeValue(34, 0, 100, 10, [5, 35, 90])).toBe(35);
+    expect(normalizeValues([89, 6], 0, 100, 1, [5, 35, 90])).toEqual([5, 90]);
+    expect(normalizeValue(-8, 0, 100, 10, [-10, 50])).toBe(-10);
+  });
+
+  it("enforces minimum steps and converts RTL geometry", () => {
+    expect(hasMinimumSteps([10, 30], 2, 10)).toBe(true);
+    expect(hasMinimumSteps([10, 20], 2, 10)).toBe(false);
+    expect(hasMinimumSteps([10, 10], 1, 0)).toBe(false);
+    expect(hasMinimumSteps([0.1, 0.3], 2, 0.1)).toBe(true);
+    expect(valueForPercentage(25, 0, 100, "ltr")).toBe(25);
+    expect(valueForPercentage(25, 0, 100, "rtl")).toBe(75);
+    expect(percentageForValue(25, 0, 100)).toBe(25);
+  });
+});
+
+describe("Slider", () => {
+  it("exposes adjustable thumb accessibility and indicator labels", () => {
+    const { container } = render(
+      <Slider.Root defaultValues={[40]} getAccessibilityLabel={(index) => `Price ${index + 1}`}>
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Range />
+            <Slider.Thumb />
+            <Slider.ValueIndicatorRoot>
+              <Slider.ValueIndicatorLabel />
+            </Slider.ValueIndicatorRoot>
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>,
+    );
+    const thumb = container.querySelector(".seed-slider__thumb");
+    const label = container.querySelector("text");
+    expect(thumb).toHaveAttribute("accessibility-role-description", "adjustable");
+    expect(thumb).toHaveAttribute("accessibility-label", "Price 1");
+    expect(thumb).toHaveAttribute("accessibility-value", "minimum 0, maximum 100, current 40");
+    expect(label).toHaveTextContent("40");
+  });
+
+  it("reports controlled touch updates and commits once at touch end", async () => {
+    const onValuesChange = vi.fn();
+    const onValuesCommit = vi.fn();
+    const view = render(
+      <Slider.Root values={[20]} onValuesChange={onValuesChange} onValuesCommit={onValuesCommit}>
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Range />
+            <Slider.Thumb />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>,
+    );
+    await waitSchedule();
+    const root = view.container.querySelector(".seed-slider__root");
+    if (!root) throw new Error("Expected slider root");
+    fireEvent.touchstart(root, { eventType: "catchEvent", touches: [{ pageX: 60 }] });
+    await waitSchedule();
+    fireEvent.touchmove(root, { eventType: "catchEvent", touches: [{ pageX: 80 }] });
+    fireEvent.touchend(root, { eventType: "catchEvent", changedTouches: [{ pageX: 80 }] });
+    await waitSchedule();
+    expect(onValuesChange).toHaveBeenCalled();
+    expect(onValuesCommit).toHaveBeenCalledTimes(1);
+    expect(onValuesCommit).toHaveBeenLastCalledWith([70]);
+  });
+
+  it("coalesces touch moves to the latest value once per frame", async () => {
+    const onValuesChange = vi.fn();
+    const view = render(
+      <Slider.Root defaultValues={[20]} onValuesChange={onValuesChange}>
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Thumb />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>,
+    );
+    await waitSchedule();
+    const root = view.container.querySelector(".seed-slider__root");
+    if (!root) throw new Error("Expected slider root");
+    fireEvent.touchstart(root, { eventType: "catchEvent", touches: [{ pageX: 30 }] });
+    fireEvent.touchmove(root, { eventType: "catchEvent", touches: [{ pageX: 40 }] });
+    fireEvent.touchmove(root, { eventType: "catchEvent", touches: [{ pageX: 80 }] });
+
+    expect(onValuesChange).not.toHaveBeenCalled();
+    await waitSchedule();
+    expect(onValuesChange).toHaveBeenCalledTimes(1);
+    expect(onValuesChange).toHaveBeenLastCalledWith([70]);
+  });
+
+  it("commits a quick first tap after track measurement", async () => {
+    const onValuesChange = vi.fn();
+    const onValuesCommit = vi.fn();
+    const view = render(
+      <Slider.Root
+        defaultValues={[20]}
+        onValuesChange={onValuesChange}
+        onValuesCommit={onValuesCommit}
+      >
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Thumb />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>,
+    );
+    const root = view.container.querySelector(".seed-slider__root");
+    if (!root) throw new Error("Expected slider root");
+    fireEvent.touchstart(root, { eventType: "catchEvent", touches: [{ pageX: 80 }] });
+    fireEvent.touchend(root, { eventType: "catchEvent", changedTouches: [{ pageX: 80 }] });
+    await waitSchedule();
+    expect(onValuesChange).toHaveBeenLastCalledWith([70]);
+    expect(onValuesCommit).toHaveBeenCalledTimes(1);
+    expect(onValuesCommit).toHaveBeenLastCalledWith([70]);
+  });
+
+  it("clears a finished interaction when measurement fails", async () => {
+    const getRect = vi.mocked(getRectByRef);
+    const onValuesChange = vi.fn();
+    const onValuesCommit = vi.fn();
+    getRect.mockRejectedValue(new Error("measurement failed"));
+
+    try {
+      const view = render(
+        <Slider.Root values={[20]} onValuesChange={onValuesChange} onValuesCommit={onValuesCommit}>
+          <Slider.Control>
+            <Slider.Track>
+              <Slider.Thumb />
+            </Slider.Track>
+          </Slider.Control>
+        </Slider.Root>,
+      );
+      const root = view.container.querySelector(".seed-slider__root");
+      if (!root) throw new Error("Expected slider root");
+      fireEvent.touchstart(root, { eventType: "catchEvent", touches: [{ pageX: 80 }] });
+      fireEvent.touchend(root, { eventType: "catchEvent", changedTouches: [{ pageX: 80 }] });
+      await waitSchedule();
+
+      getRect.mockResolvedValue({
+        left: 10,
+        top: 0,
+        width: 100,
+        height: 20,
+        right: 110,
+        bottom: 20,
+      });
+      view.rerender(
+        <Slider.Root
+          values={[20, 40]}
+          onValuesChange={onValuesChange}
+          onValuesCommit={onValuesCommit}
+        >
+          <Slider.Control>
+            <Slider.Track>
+              <Slider.Thumb />
+            </Slider.Track>
+          </Slider.Control>
+        </Slider.Root>,
+      );
+      await waitSchedule();
+
+      expect(onValuesChange).not.toHaveBeenCalled();
+      expect(onValuesCommit).not.toHaveBeenCalled();
+    } finally {
+      getRect.mockReset();
+      getRect.mockResolvedValue({
+        left: 10,
+        top: 0,
+        width: 100,
+        height: 20,
+        right: 110,
+        bottom: 20,
+      });
+    }
+  });
+
+  it("cancels an unmeasured interaction without committing delayed updates", async () => {
+    const onValuesChange = vi.fn();
+    const onValuesCommit = vi.fn();
+    const view = render(
+      <Slider.Root
+        defaultValues={[20]}
+        onValuesChange={onValuesChange}
+        onValuesCommit={onValuesCommit}
+      >
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Thumb />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>,
+    );
+    const root = view.container.querySelector(".seed-slider__root");
+    if (!root) throw new Error("Expected slider root");
+    fireEvent.touchstart(root, { eventType: "catchEvent", touches: [{ pageX: 80 }] });
+    fireEvent.touchcancel(root, { eventType: "catchEvent" });
+    await waitSchedule();
+    expect(onValuesChange).not.toHaveBeenCalled();
+    expect(onValuesCommit).not.toHaveBeenCalled();
+  });
+
+  it("does not update or commit a disabled slider", () => {
+    const onValuesChange = vi.fn();
+    const onValuesCommit = vi.fn();
+    const { container } = render(
+      <Slider.Root
+        defaultValues={[20]}
+        disabled
+        onValuesChange={onValuesChange}
+        onValuesCommit={onValuesCommit}
+      >
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Thumb />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>,
+    );
+    const root = container.querySelector(".seed-slider__root");
+    if (!root) throw new Error("Expected slider root");
+    fireEvent.touchstart(root, { eventType: "catchEvent", touches: [{ pageX: 80 }] });
+    fireEvent.touchend(root, { eventType: "catchEvent", changedTouches: [{ pageX: 80 }] });
+    expect(onValuesChange).not.toHaveBeenCalled();
+    expect(onValuesCommit).not.toHaveBeenCalled();
+    expect(container.querySelector(".seed-slider__thumb")).toHaveAttribute(
+      "accessibility-traits",
+      "disabled",
+    );
+  });
+});