@seed-design/lynx-react 0.4.1 → 0.5.1

package/src/components/Callout/Callout.test.tsx

@@ -0,0 +1,188 @@
+import "@testing-library/jest-dom";
+import { fireEvent, getQueriesForElement, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import * as Callout from "./Callout.namespace";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function getCalloutRoot() {
+  const root = getRenderedRoot();
+
+  if (root.classList.contains("seed-callout__root")) return root;
+
+  const calloutRoot = root.querySelector<HTMLElement>(".seed-callout__root");
+  if (!calloutRoot) {
+    throw new Error("Expected Callout root to exist.");
+  }
+
+  return calloutRoot;
+}
+
+function getRenderedQueries() {
+  return getQueriesForElement(getRenderedRoot());
+}
+
+describe("Callout", () => {
+  it("renders compound slots with the default neutral tone", () => {
+    render(
+      <Callout.Root>
+        <Callout.Content>
+          <Callout.Title>Title</Callout.Title>
+          <Callout.Description>Description</Callout.Description>
+          <Callout.Link bindtap={() => undefined}>Learn more</Callout.Link>
+        </Callout.Content>
+        <Callout.CloseButton accessibility-label="Close" />
+      </Callout.Root>,
+    );
+
+    const root = getCalloutRoot();
+
+    expect(root).toHaveClass("seed-callout__root--tone_neutral");
+    expect(root.querySelector(".seed-callout__content")?.tagName.toLowerCase()).toBe("text");
+    expect(root.querySelector(".seed-callout__title")).toHaveClass(
+      "seed-callout__title--tone_neutral",
+    );
+    expect(root.querySelector(".seed-callout__description")).toHaveClass(
+      "seed-callout__description--tone_neutral",
+    );
+    expect(root.querySelector(".seed-callout__link")).toHaveAttribute(
+      "accessibility-traits",
+      "link",
+    );
+    expect(root.querySelector(".seed-callout__closeButton")).toHaveAttribute(
+      "accessibility-label",
+      "Close",
+    );
+  });
+
+  it("applies an explicit tone to every visual slot", () => {
+    render(
+      <Callout.Root tone="critical">
+        <Callout.Content>
+          <Callout.Title>Title</Callout.Title>
+          <Callout.Description>Description</Callout.Description>
+          <Callout.Link>Link</Callout.Link>
+        </Callout.Content>
+      </Callout.Root>,
+    );
+
+    const root = getCalloutRoot();
+
+    expect(root).toHaveClass("seed-callout__root--tone_critical");
+    expect(root.querySelector(".seed-callout__title")).toHaveClass(
+      "seed-callout__title--tone_critical",
+    );
+    expect(root.querySelector(".seed-callout__description")).toHaveClass(
+      "seed-callout__description--tone_critical",
+    );
+    expect(root.querySelector(".seed-callout__link")).toHaveClass(
+      "seed-callout__link--tone_critical",
+    );
+  });
+
+  it("tracks pressed state and maps actionable accessibility", () => {
+    const onTap = vi.fn();
+
+    render(
+      <Callout.Root tone="positive" bindtap={onTap}>
+        <Callout.Content>
+          <Callout.Description>Actionable</Callout.Description>
+        </Callout.Content>
+      </Callout.Root>,
+    );
+
+    const root = getCalloutRoot();
+
+    expect(root).toHaveAttribute("accessibility-element", "true");
+    expect(root).toHaveAttribute("accessibility-traits", "button");
+
+    fireEvent.touchstart(root, {});
+    expect(root).toHaveClass("seed-callout__root--tone_positive-pressed_true");
+
+    fireEvent.tap(root);
+    expect(onTap).toHaveBeenCalledTimes(1);
+
+    fireEvent.touchend(root, {});
+    expect(root).not.toHaveClass("seed-callout__root--tone_positive-pressed_true");
+  });
+
+  it("does not render when defaultOpen is false", () => {
+    render(<Callout.Root defaultOpen={false} />);
+
+    expect(getRenderedRoot().querySelector(".seed-callout__root")).not.toBeInTheDocument();
+  });
+
+  it("dismisses an uncontrolled callout", () => {
+    const onDismiss = vi.fn();
+
+    render(
+      <Callout.Root onDismiss={onDismiss}>
+        <Callout.Content>
+          <Callout.Description>Dismissible</Callout.Description>
+        </Callout.Content>
+        <Callout.CloseButton accessibility-label="Close" />
+      </Callout.Root>,
+    );
+
+    const closeButton = getCalloutRoot().querySelector(".seed-callout__closeButton");
+    if (!closeButton) throw new Error("Expected close button to exist.");
+
+    fireEvent.tap(closeButton);
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(getRenderedRoot().querySelector(".seed-callout__root")).not.toBeInTheDocument();
+  });
+
+  it("notifies without hiding a controlled callout", () => {
+    const onDismiss = vi.fn();
+
+    render(
+      <Callout.Root open onDismiss={onDismiss}>
+        <Callout.Content>
+          <Callout.Description>Controlled</Callout.Description>
+        </Callout.Content>
+        <Callout.CloseButton accessibility-label="Close" />
+      </Callout.Root>,
+    );
+
+    const closeButton = getCalloutRoot().querySelector(".seed-callout__closeButton");
+    if (!closeButton) throw new Error("Expected close button to exist.");
+
+    fireEvent.tap(closeButton);
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(getCalloutRoot()).toBeInTheDocument();
+    expect(getRenderedQueries().getByText("Controlled")).toBeInTheDocument();
+
+    fireEvent.tap(closeButton);
+    expect(onDismiss).toHaveBeenCalledTimes(2);
+  });
+
+  it("composes the close button tap handler with dismiss", () => {
+    const onTap = vi.fn();
+    const onDismiss = vi.fn();
+
+    render(
+      <Callout.Root onDismiss={onDismiss}>
+        <Callout.CloseButton bindtap={onTap} accessibility-label="Close" />
+      </Callout.Root>,
+    );
+
+    const closeButton = getCalloutRoot().querySelector(".seed-callout__closeButton");
+    if (!closeButton) throw new Error("Expected close button to exist.");
+
+    fireEvent.tap(closeButton);
+
+    expect(onTap).toHaveBeenCalledTimes(1);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Callout/Callout.tsx

@@ -0,0 +1,272 @@
+import { callout, type CalloutVariantProps } from "@seed-design/lynx-css/recipes/callout";
+import * as React from "@lynx-js/react";
+import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
+import clsx from "clsx";
+
+import { useControllableState } from "../../hooks/useControllableState";
+import { usePressTap } from "../../hooks/usePressTap";
+import type {
+  LynxAccessibilityProps,
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewProps,
+  LynxViewRef,
+} from "../../types";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { IconSlotProvider } from "../Icon/Icon";
+
+const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(callout);
+
+type TapHandler = NonNullable<LynxViewProps["bindtap"]>;
+
+interface CalloutContextValue {
+  dismiss: () => void;
+}
+
+const CalloutContext = React.createContext<CalloutContextValue | null>(null);
+
+function useCalloutContext(consumer: string) {
+  const context = React.useContext(CalloutContext);
+
+  if (!context) {
+    throw new Error(`<${consumer}/> must be rendered inside <CalloutRoot/>.`);
+  }
+
+  return context;
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 차이:
+ * - `asChild`와 DOM 이벤트 대신 Lynx native `<view>`와 `bindtap`을 사용합니다.
+ * - 웹 focus ring은 지원하지 않습니다.
+ */
+export interface CalloutRootProps
+  extends Omit<CalloutVariantProps, "pressed">,
+    LynxStyledElementProps,
+    LynxPressableProps,
+    LynxAccessibilityProps {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onDismiss?: () => void;
+}
+
+export const CalloutRoot = React.forwardRef<unknown, CalloutRootProps>((props, ref) => {
+  const [variantProps, otherProps] = callout.splitVariantProps(props);
+  const {
+    children,
+    className,
+    style,
+    defaultOpen = true,
+    open: openProp,
+    onDismiss,
+    bindtap,
+    "main-thread:bindtap": mainThreadBindtap,
+    "accessibility-element": accessibilityElement,
+    "accessibility-traits": accessibilityTraits,
+    ...nativeProps
+  } = otherProps;
+  const [open, setOpen] = useControllableState({
+    value: openProp,
+    defaultValue: defaultOpen,
+  });
+  const isInteractive = bindtap != null || mainThreadBindtap != null;
+  const pressTap = usePressTap({
+    disabled: !isInteractive,
+    onTap: bindtap,
+    mainThreadOnTap: mainThreadBindtap,
+  });
+  const classNames = callout({ ...variantProps, pressed: pressTap.pressed });
+  const dismiss = useMemoizedFn(() => {
+    if (!open) return;
+
+    setOpen(false);
+    onDismiss?.();
+  });
+  const contextValue = React.useMemo(() => ({ dismiss }), [dismiss]);
+  const iconSlotContextValue = React.useMemo(
+    () => ({
+      classNames: {
+        prefixIcon: classNames.prefixIcon,
+        suffixIcon: classNames.suffixIcon,
+      },
+      deps: [variantProps.tone ?? "neutral", pressTap.pressed],
+    }),
+    [classNames.prefixIcon, classNames.suffixIcon, pressTap.pressed, variantProps.tone],
+  );
+
+  if (!open) return null;
+
+  return (
+    <CalloutContext.Provider value={contextValue}>
+      <ClassNamesProvider value={classNames}>
+        <IconSlotProvider value={iconSlotContextValue}>
+          <view
+            {...(ref ? { ref: ref as LynxViewRef } : {})}
+            {...nativeProps}
+            {...(isInteractive ? pressTap : {})}
+            accessibility-element={accessibilityElement ?? (isInteractive ? true : undefined)}
+            accessibility-traits={accessibilityTraits ?? (isInteractive ? "button" : undefined)}
+            className={clsx(classNames.root, className)}
+            style={style}
+          >
+            {children}
+          </view>
+        </IconSlotProvider>
+      </ClassNamesProvider>
+    </CalloutContext.Provider>
+  );
+});
+CalloutRoot.displayName = "CalloutRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CalloutContentProps extends LynxStyledElementProps, LynxAccessibilityProps {}
+
+export const CalloutContent = React.forwardRef<unknown, CalloutContentProps>((props, ref) => {
+  const { children, className, style, ...nativeProps } = props;
+  const classNames = useClassNames();
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...nativeProps}
+      className={clsx(classNames.content, className)}
+      style={style}
+    >
+      {children}
+    </text>
+  );
+});
+CalloutContent.displayName = "CalloutContent";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CalloutTitleProps extends LynxStyledElementProps, LynxAccessibilityProps {}
+
+export const CalloutTitle = React.forwardRef<unknown, CalloutTitleProps>((props, ref) => {
+  const { children, className, style, ...nativeProps } = props;
+  const classNames = useClassNames();
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...nativeProps}
+      className={clsx(classNames.title, className)}
+      style={style}
+    >
+      {children}
+      {"  "}
+    </text>
+  );
+});
+CalloutTitle.displayName = "CalloutTitle";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CalloutDescriptionProps extends LynxStyledElementProps, LynxAccessibilityProps {}
+
+export const CalloutDescription = React.forwardRef<unknown, CalloutDescriptionProps>(
+  (props, ref) => {
+    const { children, className, style, ...nativeProps } = props;
+    const classNames = useClassNames();
+
+    return (
+      <text
+        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        {...nativeProps}
+        className={clsx(classNames.description, className)}
+        style={style}
+      >
+        {children}
+        {"  "}
+      </text>
+    );
+  },
+);
+CalloutDescription.displayName = "CalloutDescription";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CalloutLinkProps
+  extends LynxStyledElementProps,
+    LynxPressableProps,
+    LynxAccessibilityProps {}
+
+export const CalloutLink = React.forwardRef<unknown, CalloutLinkProps>((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-traits": accessibilityTraits = "link",
+    ...nativeProps
+  } = props;
+  const classNames = useClassNames();
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...nativeProps}
+      accessibility-element={accessibilityElement}
+      accessibility-traits={accessibilityTraits}
+      className={clsx(classNames.link, className)}
+      style={style}
+    >
+      {children}
+    </text>
+  );
+});
+CalloutLink.displayName = "CalloutLink";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CalloutCloseButtonProps
+  extends LynxStyledElementProps,
+    LynxPressableProps,
+    LynxAccessibilityProps {}
+
+export const CalloutCloseButton = React.forwardRef<unknown, CalloutCloseButtonProps>(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      style,
+      bindtap,
+      "accessibility-element": accessibilityElement = true,
+      "accessibility-label": accessibilityLabel,
+      "accessibility-traits": accessibilityTraits = "button",
+      ...nativeProps
+    } = props;
+    const classNames = useClassNames();
+    const { dismiss } = useCalloutContext("CalloutCloseButton");
+    const handleTap = useMemoizedFn<TapHandler>((event) => {
+      bindtap?.(event);
+      dismiss();
+    });
+
+    if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) {
+      console.warn("CalloutCloseButton requires `accessibility-label` for accessibility.");
+    }
+
+    return (
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...nativeProps}
+        bindtap={handleTap}
+        accessibility-element={accessibilityElement}
+        accessibility-label={accessibilityLabel}
+        accessibility-traits={accessibilityTraits}
+        className={clsx(classNames.closeButton, className)}
+        style={style}
+      >
+        {children}
+      </view>
+    );
+  },
+);
+CalloutCloseButton.displayName = "CalloutCloseButton";

package/src/components/Callout/index.ts

@@ -0,0 +1,16 @@
+export {
+  CalloutCloseButton,
+  CalloutContent,
+  CalloutDescription,
+  CalloutLink,
+  CalloutRoot,
+  CalloutTitle,
+  type CalloutCloseButtonProps,
+  type CalloutContentProps,
+  type CalloutDescriptionProps,
+  type CalloutLinkProps,
+  type CalloutRootProps,
+  type CalloutTitleProps,
+} from "./Callout";
+
+export * as Callout from "./Callout.namespace";

package/src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,176 @@
+import "@testing-library/jest-dom";
+import * as React from "@lynx-js/react";
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import type { MainThread } from "@lynx-js/types";
+import { describe, expect, it, vi } from "vitest";
+
+import type { LynxIconElementProps } from "../../types";
+import * as Checkbox from "./Checkbox.namespace";
+
+const TestIcon = React.forwardRef<MainThread.Element, LynxIconElementProps>((props, ref) => {
+  return <image {...props} {...(ref ? { "main-thread:ref": ref } : {})} />;
+});
+TestIcon.displayName = "TestIcon";
+
+function ControlledGhostCheckbox({
+  onCheckedChange,
+}: {
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <Checkbox.Root
+      variant="ghost"
+      checked={checked}
+      onCheckedChange={(nextChecked) => {
+        setChecked(nextChecked);
+        onCheckedChange(nextChecked);
+      }}
+    >
+      <Checkbox.Control>
+        <Checkbox.Indicator
+          checked={<TestIcon className="checked-test-icon" />}
+          unchecked={<TestIcon className="unchecked-test-icon" />}
+        />
+      </Checkbox.Control>
+    </Checkbox.Root>
+  );
+}
+
+function getCheckboxRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Checkbox root to exist.");
+  }
+
+  if (root.classList.contains("seed-checkbox__root")) {
+    return root;
+  }
+
+  const checkboxRoot = root.querySelector<HTMLElement>(".seed-checkbox__root");
+
+  if (!checkboxRoot) {
+    throw new Error("Expected Checkbox root to exist.");
+  }
+
+  return checkboxRoot;
+}
+
+function getCheckboxControl() {
+  const control = getCheckboxRoot().querySelector<HTMLElement>(".seed-checkmark__root");
+
+  if (!control) {
+    throw new Error("Expected Checkbox control to exist.");
+  }
+
+  return control;
+}
+
+function getCheckboxBackground() {
+  const background = getCheckboxControl().querySelector<HTMLElement>(".seed-checkmark__background");
+
+  if (!background) {
+    throw new Error("Expected Checkbox background to exist.");
+  }
+
+  return background;
+}
+
+describe("Checkbox", () => {
+  it("keeps each ghost press color stable through release in both toggle directions", () => {
+    const onCheckedChange = vi.fn();
+
+    render(<ControlledGhostCheckbox onCheckedChange={onCheckedChange} />);
+
+    const root = getCheckboxRoot();
+    const idleRootClassName = getCheckboxControl().className;
+
+    expect(getCheckboxRoot().querySelector(".unchecked-test-icon")).not.toBeNull();
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--checked_false");
+
+    fireEvent.touchstart(root, {});
+    expect(getCheckboxControl().className).toBe(idleRootClassName);
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--pressed_true");
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--checked_false");
+
+    fireEvent.touchend(root, {});
+    const uncheckedReleaseRootClassName = getCheckboxControl().className;
+    const uncheckedReleaseClassName = getCheckboxBackground().className;
+
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--pressed_false");
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--checked_false");
+
+    fireEvent.tap(root);
+
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    expect(getCheckboxRoot().querySelector(".checked-test-icon")).not.toBeNull();
+    expect(getCheckboxControl().className).toBe(uncheckedReleaseRootClassName);
+    expect(getCheckboxBackground().className).toBe(uncheckedReleaseClassName);
+
+    fireEvent.touchstart(root, {});
+
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--pressed_true");
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--checked_true");
+    expect(getCheckboxBackground()).toHaveClass(
+      "seed-checkmark__background--variant_ghost-tone_brand-checked_true",
+    );
+
+    fireEvent.touchend(root, {});
+    const checkedReleaseRootClassName = getCheckboxControl().className;
+    const checkedReleaseClassName = getCheckboxBackground().className;
+
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--pressed_false");
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--checked_true");
+
+    fireEvent.tap(root);
+
+    expect(onCheckedChange.mock.calls).toEqual([[true], [false]]);
+    expect(getCheckboxRoot().querySelector(".unchecked-test-icon")).not.toBeNull();
+    expect(getCheckboxControl().className).toBe(checkedReleaseRootClassName);
+    expect(getCheckboxBackground().className).toBe(checkedReleaseClassName);
+
+    fireEvent.touchstart(root, {});
+
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--pressed_true");
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--checked_false");
+
+    fireEvent.touchcancel(root, {});
+
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--pressed_false");
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--checked_false");
+  });
+
+  it("keeps the touchstart selection while controlled state changes during a press", () => {
+    const renderCheckbox = (checked: boolean) => (
+      <Checkbox.Root variant="ghost" checked={checked}>
+        <Checkbox.Control />
+      </Checkbox.Root>
+    );
+    const { rerender } = render(renderCheckbox(true));
+
+    const root = getCheckboxRoot();
+
+    fireEvent.touchstart(root, {});
+    const checkedPressClassName = getCheckboxBackground().className;
+
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--checked_true");
+
+    rerender(renderCheckbox(false));
+
+    expect(getCheckboxBackground().className).toBe(checkedPressClassName);
+
+    fireEvent.touchend(root, {});
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--checked_true");
+
+    fireEvent.touchstart(root, {});
+    const uncheckedPressClassName = getCheckboxBackground().className;
+
+    expect(getCheckboxBackground()).toHaveClass("seed-checkmark__background--checked_false");
+
+    rerender(renderCheckbox(true));
+
+    expect(getCheckboxBackground().className).toBe(uncheckedPressClassName);
+  });
+});