@seed-design/lynx-react 0.1.0

package/src/components/ActionButton/ActionButton.tsx

@@ -0,0 +1,340 @@
+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,
+  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 ActionButtonRootOwnProps extends LynxStyledElementProps, LynxTouchProps {}
+
+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 와 `aria-label` 필수
+ * <ActionButton
+ *   layout="iconOnly"
+ *   variant="neutralSolid"
+ *   aria-label="추가"
+ * >
+ *   <Icon icon={<IconPlusFill />} />
+ * </ActionButton>
+ * ```
+ */
+export interface ActionButtonProps
+  extends Omit<ActionButtonVariantProps, "pressed">,
+    Pick<StyleProps, "flexGrow">,
+    LynxElementProps,
+    LynxPressableProps {
+  icon?: IconProps["icon"];
+  prefixIcon?: PrefixIconProps["icon"];
+  suffixIcon?: SuffixIconProps["icon"];
+  "aria-label"?: string;
+}
+
+export const ActionButton = React.forwardRef<unknown, ActionButtonProps>((props, ref) => {
+  const {
+    children,
+    flexGrow,
+    layout,
+    icon,
+    prefixIcon,
+    suffixIcon,
+    bindtap,
+    "main-thread:bindtap": mainThreadBindtap,
+    ...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 && !props["aria-label"]) {
+    console.warn('ActionButton: `layout="iconOnly"` requires `aria-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}
+        {...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/BottomSheet/BottomSheet.namespace.ts

@@ -0,0 +1,24 @@
+export {
+  BottomSheetBackdrop as Backdrop,
+  BottomSheetBody as Body,
+  BottomSheetContent as Content,
+  BottomSheetDescription as Description,
+  BottomSheetFooter as Footer,
+  BottomSheetHandle as Handle,
+  BottomSheetHeader as Header,
+  BottomSheetPositioner as Positioner,
+  BottomSheetRoot as Root,
+  BottomSheetTitle as Title,
+  BottomSheetTrigger as Trigger,
+  type BottomSheetBackdropProps as BackdropProps,
+  type BottomSheetBodyProps as BodyProps,
+  type BottomSheetContentProps as ContentProps,
+  type BottomSheetDescriptionProps as DescriptionProps,
+  type BottomSheetFooterProps as FooterProps,
+  type BottomSheetHandleProps as HandleProps,
+  type BottomSheetHeaderProps as HeaderProps,
+  type BottomSheetPositionerProps as PositionerProps,
+  type BottomSheetRootProps as RootProps,
+  type BottomSheetTitleProps as TitleProps,
+  type BottomSheetTriggerProps as TriggerProps,
+} from "./BottomSheet";

package/src/components/BottomSheet/BottomSheet.test.tsx

@@ -0,0 +1,153 @@
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const sheetMocks = vi.hoisted(() => ({
+  contentProps: [] as Array<Record<string, unknown>>,
+  rootRef: {
+    open: vi.fn(),
+  },
+}));
+
+vi.mock("@lynx-js/lynx-ui-sheet", async () => {
+  const React = await vi.importActual<typeof import("@lynx-js/react")>("@lynx-js/react");
+
+  const SheetRoot = React.forwardRef<unknown, { children?: React.ReactNode }>((props, ref) => {
+    React.useImperativeHandle(ref, () => sheetMocks.rootRef);
+    return <>{props.children}</>;
+  });
+  SheetRoot.displayName = "MockSheetRoot";
+
+  const SheetView = React.forwardRef<unknown, { children?: React.ReactNode }>((props) => {
+    return <>{props.children}</>;
+  });
+  SheetView.displayName = "MockSheetView";
+
+  const SheetContent = React.forwardRef<
+    unknown,
+    Record<string, unknown> & { children?: React.ReactNode }
+  >((props) => {
+    sheetMocks.contentProps.push(props);
+    return <>{props["children"]}</>;
+  });
+  SheetContent.displayName = "MockSheetContent";
+
+  const passthrough = (displayName: string) => {
+    const Component = React.forwardRef<unknown, { children?: React.ReactNode }>((props) => {
+      return <>{props.children}</>;
+    });
+    Component.displayName = displayName;
+    return Component;
+  };
+
+  return {
+    SheetBackdrop: passthrough("MockSheetBackdrop"),
+    SheetContent,
+    SheetHandle: passthrough("MockSheetHandle"),
+    SheetRoot,
+    SheetView,
+  };
+});
+
+vi.mock("../../hooks/useSafeArea", () => ({
+  useSafeArea: () => ({
+    safeAreaInsetTop: "62px",
+    safeAreaInsetBottom: "34px",
+  }),
+}));
+
+import * as BottomSheet from "./BottomSheet.namespace";
+
+describe("BottomSheet", () => {
+  beforeEach(() => {
+    sheetMocks.contentProps = [];
+    sheetMocks.rootRef.open.mockClear();
+  });
+
+  it("passes safe area bottom to Content inner padding", () => {
+    render(
+      <BottomSheet.Root>
+        <BottomSheet.Content />
+      </BottomSheet.Root>,
+    );
+
+    expect(sheetMocks.contentProps.at(-1)).toMatchObject({
+      innerStyle: {
+        paddingBottom: "34px",
+      },
+    });
+  });
+
+  it("skips motion-engine animations when Root has skipAnimation", () => {
+    render(
+      <BottomSheet.Root skipAnimation>
+        <BottomSheet.Content />
+      </BottomSheet.Root>,
+    );
+
+    expect(sheetMocks.contentProps.at(-1)).toMatchObject({
+      snapAnimation: { type: "tween", duration: 0 },
+      enterAnimation: { type: "tween", duration: 0 },
+      exitAnimation: { type: "tween", duration: 0 },
+    });
+  });
+
+  it("preserves user-provided animations when Root has skipAnimation", () => {
+    const snapAnimation = { type: "tween", duration: 120 } as const;
+    const enterAnimation = { type: "tween", duration: 140 } as const;
+    const exitAnimation = { type: "tween", duration: 90 } as const;
+
+    render(
+      <BottomSheet.Root skipAnimation>
+        <BottomSheet.Content
+          snapAnimation={snapAnimation}
+          enterAnimation={enterAnimation}
+          exitAnimation={exitAnimation}
+        />
+      </BottomSheet.Root>,
+    );
+
+    expect(sheetMocks.contentProps.at(-1)).toMatchObject({
+      snapAnimation,
+      enterAnimation,
+      exitAnimation,
+    });
+  });
+
+  it("opens with default animation when Root does not skip animation", () => {
+    const { getByText } = render(
+      <BottomSheet.Root>
+        <BottomSheet.Trigger>
+          <text>Open sheet</text>
+        </BottomSheet.Trigger>
+      </BottomSheet.Root>,
+    );
+
+    const trigger = (getByText("Open sheet") as HTMLElement).parentElement;
+    if (!trigger) {
+      throw new Error("Expected trigger parent element to exist.");
+    }
+
+    fireEvent.tap(trigger);
+
+    expect(sheetMocks.rootRef.open).toHaveBeenCalledWith();
+  });
+
+  it("opens without animation when Trigger is tapped inside a skipping Root", () => {
+    const { getByText } = render(
+      <BottomSheet.Root skipAnimation>
+        <BottomSheet.Trigger>
+          <text>Open sheet</text>
+        </BottomSheet.Trigger>
+      </BottomSheet.Root>,
+    );
+
+    const trigger = (getByText("Open sheet") as HTMLElement).parentElement;
+    if (!trigger) {
+      throw new Error("Expected trigger parent element to exist.");
+    }
+
+    fireEvent.tap(trigger);
+
+    expect(sheetMocks.rootRef.open).toHaveBeenCalledWith({ animate: false });
+  });
+});