@seed-design/lynx-react 0.0.0-alpha-20260622094810

package/src/components/ActionButton/ActionButton.tsx

@@ -0,0 +1,363 @@
+import { actionButton } from "@seed-design/lynx-css/recipes/action-button";
+import type { ActionButtonVariantProps } from "@seed-design/lynx-css/recipes/action-button";
+import { progressCircleVariantMap } from "@seed-design/lynx-css/recipes/progress-circle";
+import { actionButton as actionButtonVars } from "@seed-design/lynx-css/vars/component";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { isValidElement, useMemo } from "@lynx-js/react";
+
+import { usePressTap } from "../../hooks/usePressTap";
+import type {
+  LynxElementProps,
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxTouchProps,
+  LynxViewProps,
+  LynxViewRef,
+} from "../../types";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { toArray } from "../../utils/children";
+import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token";
+import { resolveFlexValue, type StyleProps } from "../../utils/styled";
+import {
+  ProgressCircleRange,
+  ProgressCircleRoot,
+  type ProgressCircleRootProps,
+} from "../ProgressCircle";
+import {
+  Icon,
+  IconRequired,
+  IconSlotProvider,
+  PrefixIcon,
+  SuffixIcon,
+  getIconSlotName,
+  type IconProps,
+  type PrefixIconProps,
+  type SuffixIconProps,
+} from "../Icon/Icon";
+
+// Root/TextSlot 은 `withProvider("view", ...)` / `withContext("text", ...)` 를 쓰지 않는다.
+// intrinsic string 인자는 `React.createElement("view", ...)` 로 컴파일되어 Lynx 컴파일러의
+// 리터럴 JSX 정적 분석을 우회하고 `BackgroundSnapshot not found: view` 런타임 에러를 유발한다.
+// (자세한 내용: `packages/lynx-react/AGENTS.md` 의 "Native tag literal JSX constraint" 섹션)
+const { ClassNamesProvider, useClassNames, PropsProvider } = createSlotRecipeContext(actionButton);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+interface ActionButtonContentProps extends LynxElementProps {
+  isIconOnly: boolean;
+  icon?: IconProps["icon"];
+  prefixIcon?: PrefixIconProps["icon"];
+  suffixIcon?: SuffixIconProps["icon"];
+}
+
+interface ActionButtonAccessibilityProps {
+  "accessibility-label"?: LynxViewProps["accessibility-label"];
+  "accessibility-element"?: LynxViewProps["accessibility-element"];
+  "accessibility-traits"?: LynxViewProps["accessibility-traits"];
+}
+
+interface ActionButtonRootOwnProps
+  extends LynxStyledElementProps,
+    LynxTouchProps,
+    ActionButtonAccessibilityProps {}
+
+interface ActionButtonRootProps extends ActionButtonVariantProps, ActionButtonRootOwnProps {}
+
+function resolveProgressCircleSize(
+  actionButtonSize: ActionButtonVariantProps["size"],
+): ProgressCircleRootProps["size"] {
+  const size = actionButtonSize ?? "medium";
+  const token = resolveRecipeToken(actionButtonVars, [
+    `size${capitalize(size)}`,
+    "enabled",
+    "progressCircle",
+    "size",
+  ]);
+  const normalized = token?.endsWith("px") ? token.slice(0, -2) : token;
+
+  return progressCircleVariantMap.size.find((size) => size === normalized) ?? "16";
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+const ActionButtonRoot = React.forwardRef<unknown, ActionButtonRootProps>((innerProps, ref) => {
+  const props = { layout: "withText" as const, ...innerProps };
+  const [variantProps, otherProps] = actionButton.splitVariantProps(props);
+  const classNames = actionButton(variantProps);
+  const {
+    className: userClassName,
+    children,
+    ...rest
+  } = otherProps as ActionButtonRootOwnProps & Record<string, unknown>;
+  const propsForContext = useMemo(
+    () => variantProps,
+    [
+      variantProps.variant,
+      variantProps.size,
+      variantProps.layout,
+      variantProps.pressed,
+      variantProps.disabled,
+      variantProps.loading,
+    ],
+  );
+  const iconSlotContextValue = useMemo(
+    () => ({
+      classNames: {
+        icon: classNames.icon,
+        prefixIcon: classNames.prefixIcon,
+        suffixIcon: classNames.suffixIcon,
+      },
+      deps: [
+        variantProps.variant ?? null,
+        variantProps.disabled ?? false,
+        variantProps.loading ?? false,
+        variantProps.pressed ?? false,
+      ],
+    }),
+    [
+      classNames.icon,
+      classNames.prefixIcon,
+      classNames.suffixIcon,
+      variantProps.variant,
+      variantProps.disabled,
+      variantProps.loading,
+      variantProps.pressed,
+    ],
+  );
+  return (
+    <ClassNamesProvider value={classNames}>
+      <PropsProvider value={propsForContext}>
+        <IconSlotProvider value={iconSlotContextValue}>
+          <view
+            {...(ref ? { ref: ref as LynxViewRef } : {})}
+            {...rest}
+            className={clsx(classNames.root, userClassName)}
+          >
+            {children as React.ReactNode}
+          </view>
+        </IconSlotProvider>
+      </PropsProvider>
+    </ClassNamesProvider>
+  );
+});
+ActionButtonRoot.displayName = "ActionButtonRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+interface ActionButtonTextSlotProps extends LynxElementProps {}
+
+const ActionButtonTextSlot = React.forwardRef<unknown, ActionButtonTextSlotProps>((props, ref) => {
+  const { children, className: userClassName, ...rest } = props;
+  const classNames = useClassNames();
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...rest}
+      className={clsx(classNames.text, userClassName)}
+    >
+      {children}
+    </text>
+  );
+});
+ActionButtonTextSlot.displayName = "ActionButtonTextSlot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+function ActionButtonContent({
+  children,
+  isIconOnly,
+  icon,
+  prefixIcon,
+  suffixIcon,
+}: ActionButtonContentProps) {
+  const childArray = toArray(children);
+  const prefixIconChildren: React.ReactNode[] = [];
+  const suffixIconChildren: React.ReactNode[] = [];
+  const iconChildren: React.ReactNode[] = [];
+  const textChildren: React.ReactNode[] = [];
+
+  for (const child of childArray) {
+    const slotName = getIconSlotName(child);
+
+    if (slotName === "prefixIcon") {
+      prefixIconChildren.push(child);
+      continue;
+    }
+    if (slotName === "suffixIcon") {
+      suffixIconChildren.push(child);
+      continue;
+    }
+    if (slotName === "icon") {
+      iconChildren.push(child);
+      continue;
+    }
+
+    textChildren.push(child);
+  }
+
+  if (isIconOnly) {
+    if (icon != null && isValidElement(icon)) return <Icon icon={icon} />;
+    return iconChildren.length > 0 ? <>{iconChildren}</> : null;
+  }
+
+  return (
+    <>
+      {prefixIcon != null && isValidElement(prefixIcon) ? <PrefixIcon icon={prefixIcon} /> : null}
+      {prefixIconChildren}
+      {textChildren.length > 0 ? <ActionButtonTextSlot>{textChildren}</ActionButtonTextSlot> : null}
+      {suffixIconChildren}
+      {suffixIcon != null && isValidElement(suffixIcon) ? <SuffixIcon icon={suffixIcon} /> : null}
+    </>
+  );
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+function ActionButtonLoadingContent(props: ActionButtonContentProps) {
+  const classNames = useClassNames();
+
+  return (
+    <view className={classNames.content}>
+      <ActionButtonContent {...props} />
+    </view>
+  );
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+function ActionButtonLoadingIndicator({ size }: { size: ActionButtonVariantProps["size"] }) {
+  const classNames = useClassNames();
+  const progressCircleSize = resolveProgressCircleSize(size);
+
+  return (
+    <view className={classNames.loadingIndicator}>
+      <ProgressCircleRoot size={progressCircleSize} tone="inherit">
+        <ProgressCircleRange />
+      </ProgressCircleRoot>
+    </view>
+  );
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 차이:
+ * - 아이콘 렌더링: 웹의 SVG `currentColor` 대신 Lynx `<image>` 의 `tint-color` 를
+ *   `Icon` / `PrefixIcon` / `SuffixIcon` wrapper 가 동기화한다.
+ * - 호환 API: 기존 `prefixIcon` / `suffixIcon` / `icon` prop 도 유지한다.
+ * - 미지원 prop: `color`, `fontWeight`, `bleedX`, `bleedY` (CSS variable 동적 주입 제한)
+ *
+ * ```tsx
+ * import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";
+ * import IconChevronDownFill from "@karrotmarket/lynx-monochrome-icon/IconChevronDownFill";
+ * import { Icon, PrefixIcon, SuffixIcon } from "@seed-design/lynx-react";
+ *
+ * // withText (기본)
+ * <ActionButton variant="brandSolid">
+ *   <PrefixIcon icon={<IconPlusFill />} />
+ *   라벨
+ *   <SuffixIcon icon={<IconChevronDownFill />} />
+ * </ActionButton>
+ *
+ * // iconOnly — `<Icon />` child 와 `accessibility-label` 필수
+ * <ActionButton
+ *   layout="iconOnly"
+ *   variant="neutralSolid"
+ *   accessibility-label="추가"
+ * >
+ *   <Icon icon={<IconPlusFill />} />
+ * </ActionButton>
+ * ```
+ */
+export interface ActionButtonProps
+  extends Omit<ActionButtonVariantProps, "pressed">,
+    Pick<StyleProps, "flexGrow">,
+    LynxElementProps,
+    LynxPressableProps,
+    ActionButtonAccessibilityProps {
+  icon?: IconProps["icon"];
+  prefixIcon?: PrefixIconProps["icon"];
+  suffixIcon?: SuffixIconProps["icon"];
+}
+
+export const ActionButton = React.forwardRef<unknown, ActionButtonProps>((props, ref) => {
+  const {
+    children,
+    flexGrow,
+    layout,
+    icon,
+    prefixIcon,
+    suffixIcon,
+    bindtap,
+    "main-thread:bindtap": mainThreadBindtap,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-label": accessibilityLabel,
+    "accessibility-traits": accessibilityTraits = "button",
+    ...variantAndRest
+  } = props;
+  const { disabled = false, loading = false } = variantAndRest;
+  const isInteractive = !disabled && !loading;
+  const isIconOnly = layout === "iconOnly";
+  const size = variantAndRest.size;
+
+  if (
+    process.env.NODE_ENV !== "production" &&
+    isIconOnly &&
+    accessibilityElement &&
+    !accessibilityLabel
+  ) {
+    console.warn(
+      'ActionButton: `layout="iconOnly"` requires `accessibility-label` for accessibility.',
+    );
+  }
+
+  const { pressed, ...pressTapHandlers } = usePressTap({
+    disabled: !isInteractive,
+    onTap: bindtap,
+    mainThreadOnTap: mainThreadBindtap,
+  });
+
+  return (
+    <IconRequired enabled={isIconOnly}>
+      <ActionButtonRoot
+        {...variantAndRest}
+        layout={layout}
+        pressed={pressed}
+        ref={ref}
+        style={flexGrow != null ? { flexGrow: resolveFlexValue(flexGrow) } : undefined}
+        accessibility-element={accessibilityElement}
+        accessibility-label={accessibilityLabel}
+        accessibility-traits={accessibilityTraits}
+        {...pressTapHandlers}
+      >
+        {loading ? (
+          <>
+            <ActionButtonLoadingIndicator size={size} />
+            <ActionButtonLoadingContent
+              isIconOnly={isIconOnly}
+              icon={icon}
+              prefixIcon={prefixIcon}
+              suffixIcon={suffixIcon}
+            >
+              {children}
+            </ActionButtonLoadingContent>
+          </>
+        ) : (
+          <ActionButtonContent
+            isIconOnly={isIconOnly}
+            icon={icon}
+            prefixIcon={prefixIcon}
+            suffixIcon={suffixIcon}
+          >
+            {children}
+          </ActionButtonContent>
+        )}
+      </ActionButtonRoot>
+    </IconRequired>
+  );
+});
+ActionButton.displayName = "ActionButton";

package/src/components/ActionButton/index.ts

@@ -0,0 +1 @@
+export { ActionButton, type ActionButtonProps } from "./ActionButton";

package/src/components/AppBar/AppBar.namespace.ts

@@ -0,0 +1,18 @@
+export {
+  AppBarIconButton as IconButton,
+  AppBarLeft as Left,
+  AppBarMain as Main,
+  AppBarRight as Right,
+  AppBarRoot as Root,
+  AppBarSlot as Slot,
+  AppBarSubtitle as Subtitle,
+  AppBarTitle as Title,
+  type AppBarIconButtonProps as IconButtonProps,
+  type AppBarLeftProps as LeftProps,
+  type AppBarMainProps as MainProps,
+  type AppBarRightProps as RightProps,
+  type AppBarRootProps as RootProps,
+  type AppBarSlotProps as SlotProps,
+  type AppBarSubtitleProps as SubtitleProps,
+  type AppBarTitleProps as TitleProps,
+} from "./AppBar";

package/src/components/AppBar/AppBar.test.tsx

@@ -0,0 +1,270 @@
+import "@testing-library/jest-dom";
+import {
+  act,
+  fireEvent,
+  getQueriesForElement,
+  render,
+  waitFor,
+} from "@lynx-js/react/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import * as AppBar from "./AppBar.namespace";
+
+type TestSystemInfo = { platform?: string };
+
+interface TestLynxGlobal {
+  SystemInfo?: TestSystemInfo;
+  lynx?: {
+    __globalProps?: {
+      safeAreaInsetTop?: number;
+      safeAreaInsetBottom?: number;
+    };
+  };
+  lynxTestingEnv?: {
+    backgroundThread: {
+      globalThis: TestLynxGlobal;
+    };
+    mainThread: {
+      globalThis: TestLynxGlobal;
+    };
+  };
+}
+
+function getRenderedQueries() {
+  return getQueriesForElement(getAppBarRoot());
+}
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function getAppBarRoot() {
+  const root = getRenderedRoot();
+
+  if (root.classList.contains("seed-app-bar__root")) return root;
+
+  const appBarRoot = root.querySelector<HTMLElement>(".seed-app-bar__root");
+  if (!appBarRoot) {
+    throw new Error("Expected AppBar root to exist.");
+  }
+
+  return appBarRoot;
+}
+
+function expectStyle(style: CSSStyleDeclaration, expected: Record<string, string>) {
+  for (const [key, value] of Object.entries(expected)) {
+    expect(style.getPropertyValue(key)).toBe(value);
+  }
+}
+
+function setSystemInfo(systemInfo: TestSystemInfo | undefined) {
+  const lynxTestingEnv = (globalThis as TestLynxGlobal).lynxTestingEnv;
+  const globals = [
+    globalThis as TestLynxGlobal,
+    lynxTestingEnv?.backgroundThread.globalThis,
+    lynxTestingEnv?.mainThread.globalThis,
+  ].filter((global): global is TestLynxGlobal => Boolean(global));
+
+  for (const global of globals) {
+    if (systemInfo == null) {
+      delete global.SystemInfo;
+    } else {
+      global.SystemInfo = systemInfo;
+    }
+  }
+}
+
+function setGlobalProps(
+  globalProps: NonNullable<NonNullable<TestLynxGlobal["lynx"]>["__globalProps"]>,
+) {
+  const lynxTestingEnv = (globalThis as TestLynxGlobal).lynxTestingEnv;
+  const globals = [
+    globalThis as TestLynxGlobal,
+    lynxTestingEnv?.backgroundThread.globalThis,
+    lynxTestingEnv?.mainThread.globalThis,
+  ].filter((global): global is TestLynxGlobal => Boolean(global));
+
+  for (const global of globals) {
+    global.lynx = {
+      ...global.lynx,
+      __globalProps: globalProps,
+    };
+  }
+}
+
+function stubPlatform(platform: string | undefined) {
+  setSystemInfo(platform == null ? {} : { platform });
+}
+
+describe("AppBar", () => {
+  afterEach(() => {
+    setSystemInfo({ platform: "iOS" });
+    setGlobalProps({});
+    vi.unstubAllGlobals();
+  });
+
+  it("uses android theme by default on Android", () => {
+    stubPlatform("Android");
+
+    render(<AppBar.Root />);
+
+    expect(getAppBarRoot()).toHaveClass("seed-app-bar__root--theme_android");
+  });
+
+  it("uses cupertino theme by default outside Android", () => {
+    stubPlatform("iOS");
+
+    render(<AppBar.Root />);
+
+    expect(getAppBarRoot()).toHaveClass("seed-app-bar__root--theme_cupertino");
+  });
+
+  it("uses cupertino theme when SystemInfo.platform is unavailable", () => {
+    stubPlatform(undefined);
+
+    render(<AppBar.Root />);
+
+    expect(getAppBarRoot()).toHaveClass("seed-app-bar__root--theme_cupertino");
+  });
+
+  it("lets explicit theme override the platform default", () => {
+    stubPlatform("Android");
+
+    render(<AppBar.Root theme="cupertino" />);
+
+    expect(getAppBarRoot()).toHaveClass("seed-app-bar__root--theme_cupertino");
+    expect(getAppBarRoot()).not.toHaveClass("seed-app-bar__root--theme_android");
+  });
+
+  it("applies safe area from useSafeArea to the root layout", () => {
+    setGlobalProps({ safeAreaInsetTop: 47 });
+
+    render(<AppBar.Root theme="cupertino" />);
+
+    expectStyle(getAppBarRoot().style, {
+      height: "calc(91px)",
+      "padding-top": "47px",
+    });
+  });
+
+  it("does not read the safe area CSS variable override as the JS layout source", () => {
+    setGlobalProps({ safeAreaInsetTop: 47 });
+
+    render(
+      <AppBar.Root
+        theme="cupertino"
+        style={{ "--seed-safe-area-top": "0px" } as AppBar.RootProps["style"]}
+      />,
+    );
+
+    expectStyle(getAppBarRoot().style, {
+      height: "calc(91px)",
+      "padding-top": "47px",
+    });
+  });
+
+  it("keeps Cupertino title-only main centered in the safe-area adjusted bar", () => {
+    setGlobalProps({ safeAreaInsetTop: 47 });
+
+    render(
+      <AppBar.Root theme="cupertino">
+        <AppBar.Main>
+          <AppBar.Title>Title</AppBar.Title>
+        </AppBar.Main>
+      </AppBar.Root>,
+    );
+
+    const main = getAppBarRoot().querySelector<HTMLElement>(".seed-app-bar-main__root");
+
+    expect(main).toBeInTheDocument();
+    expectStyle(main!.style, {
+      top: "47px",
+      bottom: "0px",
+    });
+  });
+
+  it("renders slots with recipe class names", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <AppBar.IconButton accessibility-label="Back" />
+        </AppBar.Left>
+        <AppBar.Main layout="withSubtitle">
+          <AppBar.Title>Title</AppBar.Title>
+          <AppBar.Subtitle>Subtitle</AppBar.Subtitle>
+        </AppBar.Main>
+        <AppBar.Right>
+          <AppBar.Slot>
+            <text>Done</text>
+          </AppBar.Slot>
+        </AppBar.Right>
+      </AppBar.Root>,
+    );
+
+    const { getByText } = getRenderedQueries();
+    const root = getAppBarRoot();
+
+    expect(root.querySelector(".seed-app-bar__left")).toBeInTheDocument();
+    expect(root.querySelector(".seed-app-bar__right")).toBeInTheDocument();
+    expect(root.querySelector(".seed-app-bar__iconButton")).toBeInTheDocument();
+    expect(root.querySelector(".seed-app-bar__custom")).toBeInTheDocument();
+    expect(getByText("Title")).toHaveClass("seed-app-bar-main__title");
+    expect(getByText("Subtitle")).toHaveClass("seed-app-bar-main__subtitle");
+  });
+
+  it("maps icon button labels to Lynx accessibility props", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <AppBar.IconButton accessibility-label="Back" />
+        </AppBar.Left>
+      </AppBar.Root>,
+    );
+
+    const iconButton = getAppBarRoot().querySelector(".seed-app-bar__iconButton");
+
+    expect(iconButton).toHaveAttribute("accessibility-label", "Back");
+    expect(iconButton).toHaveAttribute("accessibility-element", "true");
+    expect(iconButton).toHaveAttribute("accessibility-traits", "button");
+  });
+
+  it("updates centered title padding from left and right layout widths", async () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <text>Left</text>
+        </AppBar.Left>
+        <AppBar.Main>
+          <AppBar.Title>Title</AppBar.Title>
+        </AppBar.Main>
+        <AppBar.Right>
+          <text>Right</text>
+        </AppBar.Right>
+      </AppBar.Root>,
+    );
+
+    const root = getAppBarRoot();
+    const main = root.querySelector(".seed-app-bar-main__root");
+    const left = root.querySelector(".seed-app-bar__left");
+    const right = root.querySelector(".seed-app-bar__right");
+
+    if (!main || !left || !right) {
+      throw new Error("Expected AppBar main, left, and right slots to exist.");
+    }
+
+    act(() => {
+      fireEvent.layoutchange(left, { width: 48 });
+      fireEvent.layoutchange(right, { width: 72 });
+    });
+
+    await waitFor(() => {
+      expect(main).toHaveStyle({ paddingLeft: "72px", paddingRight: "72px" });
+    });
+  });
+});