@seed-design/lynx-react 0.7.0 → 0.8.0

package/src/components/Dialog/Dialog.test.tsx

@@ -0,0 +1,172 @@
+import type { ReactNode } from "@lynx-js/react";
+
+import { render } from "@lynx-js/react/testing-library";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const dialogMocks = vi.hoisted(() => ({
+  rootProps: [] as Array<Record<string, unknown>>,
+  viewProps: [] as Array<Record<string, unknown>>,
+  backdropProps: [] as Array<Record<string, unknown>>,
+  contentProps: [] as Array<Record<string, unknown>>,
+  closeProps: [] as Array<Record<string, unknown>>,
+}));
+
+vi.mock("@lynx-js/lynx-ui-dialog", () => {
+  const renderChildren = (children: unknown, status: Record<string, boolean>): ReactNode => {
+    if (typeof children === "function") {
+      return (children as (status: Record<string, boolean>) => ReactNode)(status);
+    }
+    return children as ReactNode;
+  };
+
+  const DialogRoot = (props: Record<string, unknown>) => {
+    dialogMocks.rootProps.push(props);
+    return <>{renderChildren(props["children"], { open: props["show"] === true })}</>;
+  };
+  DialogRoot.displayName = "MockDialogRoot";
+
+  const DialogTrigger = (props: Record<string, unknown>) => (
+    <view>{renderChildren(props["children"], { active: false, busy: false })}</view>
+  );
+  DialogTrigger.displayName = "MockDialogTrigger";
+
+  const DialogView = (props: Record<string, unknown>) => {
+    dialogMocks.viewProps.push(props);
+    return (
+      <view className={props["className"] as string}>
+        {renderChildren(props["children"], { open: props["show"] === true })}
+      </view>
+    );
+  };
+  DialogView.displayName = "MockDialogView";
+
+  const DialogBackdrop = (props: Record<string, unknown>) => {
+    dialogMocks.backdropProps.push(props);
+    return <view className={props["className"] as string}>{props["children"] as ReactNode}</view>;
+  };
+  DialogBackdrop.displayName = "MockDialogBackdrop";
+
+  const DialogContent = (props: Record<string, unknown>) => {
+    dialogMocks.contentProps.push(props);
+    return <view className={props["className"] as string}>{props["children"] as ReactNode}</view>;
+  };
+  DialogContent.displayName = "MockDialogContent";
+
+  const DialogClose = (props: Record<string, unknown>) => {
+    dialogMocks.closeProps.push(props);
+    return <view>{renderChildren(props["children"], { active: false, busy: false })}</view>;
+  };
+  DialogClose.displayName = "MockDialogClose";
+
+  return {
+    DialogBackdrop,
+    DialogClose,
+    DialogContent,
+    DialogRoot,
+    DialogTrigger,
+    DialogView,
+  };
+});
+
+import * as Dialog from "./Dialog.namespace";
+
+describe("Dialog", () => {
+  beforeEach(() => {
+    dialogMocks.rootProps = [];
+    dialogMocks.viewProps = [];
+    dialogMocks.backdropProps = [];
+    dialogMocks.contentProps = [];
+    dialogMocks.closeProps = [];
+  });
+
+  it("maps the namespace API to the Lynx UI headless primitives", () => {
+    const onOpenChange = vi.fn();
+    const { container } = render(
+      <Dialog.Root open onOpenChange={onOpenChange}>
+        <Dialog.Trigger>
+          <text>Open</text>
+        </Dialog.Trigger>
+        <Dialog.Positioner>
+          <Dialog.Backdrop />
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Title</Dialog.Title>
+              <Dialog.Description>Description</Dialog.Description>
+            </Dialog.Header>
+            <Dialog.Body
+              className="custom-body"
+              maxHeight="96px"
+              paddingLeft="16px"
+              style={{ maxHeight: "120px" }}
+            >
+              <text>Scrollable content</text>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.Action>
+                <text>Close</text>
+              </Dialog.Action>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.Root>,
+    );
+
+    expect(dialogMocks.rootProps.at(-1)).toMatchObject({
+      show: true,
+      onShowChange: onOpenChange,
+    });
+    expect(container.querySelector(".seed-dialog__positioner")).not.toBeNull();
+    expect(container.querySelector(".seed-dialog__backdrop")).not.toBeNull();
+    expect(container.querySelector(".seed-dialog__content")).not.toBeNull();
+    expect(container.querySelector(".seed-dialog__header")).not.toBeNull();
+    expect(container.querySelector(".seed-dialog__title")).not.toBeNull();
+    expect(container.querySelector(".seed-dialog__description")).not.toBeNull();
+    expect(container.querySelector(".seed-dialog__footer")).not.toBeNull();
+
+    const body = container.querySelector<HTMLElement>("scroll-view");
+
+    expect(body?.classList.contains("seed-dialog__body")).toBe(true);
+    expect(body?.classList.contains("custom-body")).toBe(true);
+    expect(body?.hasAttribute("scroll-y")).toBe(true);
+    expect(body?.style.maxHeight).toBe("120px");
+    expect(body?.style.paddingLeft).toBe("16px");
+  });
+
+  it("forwards headless mount options and removes only reserved lifecycle handlers", () => {
+    const userBindTap = vi.fn();
+    const dialogContentProps = {
+      style: { paddingTop: "12px" },
+      bindtap: userBindTap,
+    };
+
+    render(
+      <Dialog.Root defaultOpen forceMount skipAnimation>
+        <Dialog.Positioner
+          container="window"
+          overlayLevel={2}
+          dialogViewProps={{ style: { top: "8px" } }}
+        >
+          <Dialog.Backdrop />
+          <Dialog.Content dialogContentProps={dialogContentProps} />
+        </Dialog.Positioner>
+      </Dialog.Root>,
+    );
+
+    expect(dialogMocks.rootProps.at(-1)).toMatchObject({
+      defaultShow: true,
+      forceMount: true,
+    });
+    expect(dialogMocks.viewProps.at(-1)).toMatchObject({
+      container: "window",
+      overlayLevel: 2,
+      transition: false,
+      dialogViewProps: { style: { top: "8px" } },
+    });
+    expect(dialogMocks.contentProps.at(-1)).toMatchObject({
+      transition: false,
+      dialogContentProps: { style: { paddingTop: "12px" } },
+    });
+    expect(dialogMocks.contentProps.at(-1)?.["dialogContentProps"]).not.toHaveProperty("bindtap");
+    expect(userBindTap).not.toHaveBeenCalled();
+  });
+});

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,373 @@
+import {
+  DialogBackdrop as DialogBackdropPrimitive,
+  DialogClose as DialogClosePrimitive,
+  DialogContent as DialogContentPrimitive,
+  DialogRoot as DialogRootPrimitive,
+  DialogTrigger as DialogTriggerPrimitive,
+  DialogView as DialogViewPrimitive,
+  type DialogBackdropProps as DialogPrimitiveBackdropProps,
+  type DialogCloseProps as DialogPrimitiveCloseProps,
+  type DialogContentProps as DialogPrimitiveContentProps,
+  type DialogRootProps as DialogPrimitiveRootProps,
+  type DialogTriggerProps as DialogPrimitiveTriggerProps,
+  type DialogViewProps as DialogPrimitiveViewProps,
+} from "@lynx-js/lynx-ui-dialog";
+import {
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type PropsWithoutRef,
+  type ReactElement,
+  type RefAttributes,
+} from "@lynx-js/react";
+import { dialog, type DialogVariantProps } from "@seed-design/lynx-css/recipes/dialog";
+import clsx from "clsx";
+
+import type { LynxStyledElementProps, LynxTextRef, LynxViewRef } from "../../types";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+type DialogComponent<Props> = ((props: Props) => ReactElement) & {
+  displayName?: string;
+};
+type LynxForwardRefComponent<T, Props> = ForwardRefExoticComponent<
+  PropsWithoutRef<Props> & RefAttributes<T>
+>;
+
+type NativeLifecycleHandlers = {
+  bindanimationstart?: unknown;
+  bindanimationend?: unknown;
+  bindanimationcancel?: unknown;
+  bindtransitionstart?: unknown;
+  bindtransitionend?: unknown;
+  bindtap?: unknown;
+};
+
+const { ClassNamesProvider, PropsProvider, useClassNames, useProps } =
+  createSlotRecipeContext(dialog);
+
+function omitHeadlessLifecycleHandlers<Props extends object>(
+  props: Props | undefined,
+): Props | undefined {
+  if (!props) return props;
+
+  const {
+    bindanimationstart: _bindanimationstart,
+    bindanimationend: _bindanimationend,
+    bindanimationcancel: _bindanimationcancel,
+    bindtransitionstart: _bindtransitionstart,
+    bindtransitionend: _bindtransitionend,
+    bindtap: _bindtap,
+    ...nativeProps
+  } = props as Props & NativeLifecycleHandlers;
+
+  return nativeProps as Props;
+}
+
+function useDialogTransition(transition: boolean | undefined) {
+  const skipAnimation = useProps()?.skipAnimation === true;
+
+  return skipAnimation ? false : (transition ?? true);
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+// Root
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogRootProps
+  extends DialogVariantProps,
+    Omit<DialogPrimitiveRootProps, "show" | "defaultShow" | "onShowChange"> {
+  /**
+   * Whether the dialog is open (controlled mode).
+   * Internally mapped to `show` of `@lynx-js/lynx-ui-dialog`.
+   */
+  open?: boolean;
+  /**
+   * Whether the dialog is open by default (uncontrolled mode).
+   * Internally mapped to `defaultShow`.
+   * @defaultValue false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Called when the dialog's open state is about to change.
+   * The Lynx headless implementation provides only the next boolean state.
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * @platform Lynx — wraps `@lynx-js/lynx-ui-dialog`.
+ *
+ * Unlike the React Dialog primitive, Lynx does not support refs, `lazyMount`,
+ * `unmountOnExit`, focus management, title/description associations, Escape-key
+ * dismissal, `asChild`, or close-reason details. Use `forceMount` from the
+ * underlying Lynx dialog when content must remain mounted while closed.
+ */
+export const DialogRoot = forwardRef<never, DialogRootProps>((props, _ref) => {
+  const [variantProps, restProps] = dialog.splitVariantProps(props);
+  const { children, open, defaultOpen, onOpenChange, ...nativeProps } = restProps;
+  const classNames = dialog(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <PropsProvider value={variantProps}>
+        <DialogRootPrimitive
+          {...nativeProps}
+          show={open}
+          defaultShow={defaultOpen}
+          onShowChange={onOpenChange}
+        >
+          {children}
+        </DialogRootPrimitive>
+      </PropsProvider>
+    </ClassNamesProvider>
+  );
+}) as DialogComponent<DialogRootProps>;
+DialogRoot.displayName = "DialogRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Trigger
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogTriggerProps extends DialogPrimitiveTriggerProps {}
+
+/**
+ * @platform Lynx — `asChild` and refs are unsupported.
+ */
+export const DialogTrigger = forwardRef<never, DialogTriggerProps>((props, _ref) => {
+  const { children, transition, ...nativeProps } = props;
+  const resolvedTransition = useDialogTransition(transition);
+
+  return (
+    <DialogTriggerPrimitive {...nativeProps} transition={resolvedTransition}>
+      {children}
+    </DialogTriggerPrimitive>
+  );
+}) as DialogComponent<DialogTriggerProps>;
+DialogTrigger.displayName = "DialogTrigger";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Positioner
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogPositionerProps extends DialogPrimitiveViewProps {}
+
+/**
+ * @platform Lynx — maps to `DialogView`; refs are unsupported.
+ */
+export const DialogPositioner = forwardRef<never, DialogPositionerProps>((props, _ref) => {
+  const { children, className, transition, ...nativeProps } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useDialogTransition(transition);
+
+  return (
+    <DialogViewPrimitive
+      {...nativeProps}
+      className={clsx(classNames.positioner, className)}
+      transition={resolvedTransition}
+    >
+      {children}
+    </DialogViewPrimitive>
+  );
+}) as DialogComponent<DialogPositionerProps>;
+DialogPositioner.displayName = "DialogPositioner";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Backdrop
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogBackdropProps extends DialogPrimitiveBackdropProps {}
+
+/**
+ * @platform Lynx — refs are unsupported. Native lifecycle handlers in
+ * `dialogBackdropProps` are reserved by the headless primitive and are omitted
+ * so they cannot replace its presence and dismissal handlers.
+ */
+export const DialogBackdrop = forwardRef<never, DialogBackdropProps>((props, _ref) => {
+  const { children, className, transition, dialogBackdropProps, ...nativeProps } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useDialogTransition(transition);
+
+  return (
+    <DialogBackdropPrimitive
+      {...nativeProps}
+      className={clsx(classNames.backdrop, className)}
+      transition={resolvedTransition}
+      dialogBackdropProps={omitHeadlessLifecycleHandlers(dialogBackdropProps)}
+    >
+      {children}
+    </DialogBackdropPrimitive>
+  );
+}) as DialogComponent<DialogBackdropProps>;
+DialogBackdrop.displayName = "DialogBackdrop";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Content
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogContentProps extends DialogPrimitiveContentProps {}
+
+/**
+ * @platform Lynx — refs are unsupported. Native lifecycle handlers in
+ * `dialogContentProps` are reserved by the headless primitive and are omitted
+ * so they cannot replace its presence handlers.
+ */
+export const DialogContent = forwardRef<never, DialogContentProps>((props, _ref) => {
+  const { children, className, transition, dialogContentProps, ...nativeProps } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useDialogTransition(transition);
+
+  return (
+    <DialogContentPrimitive
+      {...nativeProps}
+      className={clsx(classNames.content, className)}
+      transition={resolvedTransition}
+      dialogContentProps={omitHeadlessLifecycleHandlers(dialogContentProps)}
+    >
+      {children}
+    </DialogContentPrimitive>
+  );
+}) as DialogComponent<DialogContentProps>;
+DialogContent.displayName = "DialogContent";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Local slots
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogHeaderProps extends StyleProps, LynxStyledElementProps {}
+
+export const DialogHeader: LynxForwardRefComponent<unknown, DialogHeaderProps> = forwardRef<
+  unknown,
+  DialogHeaderProps
+>((props, ref) => {
+  const { style, restProps } = useStyleProps(props);
+  const { children, className, ...nativeProps } = restProps;
+  const classNames = useClassNames();
+
+  return (
+    <view
+      {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
+      {...nativeProps}
+      className={clsx(classNames.header, className)}
+      style={style as never}
+    >
+      {children}
+    </view>
+  );
+});
+DialogHeader.displayName = "DialogHeader";
+
+export interface DialogBodyProps extends StyleProps, LynxStyledElementProps {}
+
+export const DialogBody: LynxForwardRefComponent<unknown, DialogBodyProps> = forwardRef<
+  unknown,
+  DialogBodyProps
+>((props, ref) => {
+  const { style, restProps } = useStyleProps(props);
+  const { children, className, ...nativeProps } = restProps;
+  const classNames = useClassNames();
+
+  return (
+    <scroll-view
+      {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
+      {...nativeProps}
+      scroll-y
+      className={clsx(classNames.body, className)}
+      style={style}
+    >
+      {children}
+    </scroll-view>
+  );
+});
+DialogBody.displayName = "DialogBody";
+
+export interface DialogTitleProps extends StyleProps, LynxStyledElementProps {}
+
+export const DialogTitle: LynxForwardRefComponent<unknown, DialogTitleProps> = forwardRef<
+  unknown,
+  DialogTitleProps
+>((props, ref) => {
+  const { style, restProps } = useStyleProps(props);
+  const { children, className, ...nativeProps } = restProps;
+  const classNames = useClassNames();
+
+  return (
+    <text
+      {...(ref ? ({ ref: ref as LynxTextRef } as Record<string, unknown>) : {})}
+      {...nativeProps}
+      className={clsx(classNames.title, className)}
+      style={style as never}
+    >
+      {children}
+    </text>
+  );
+});
+DialogTitle.displayName = "DialogTitle";
+
+export interface DialogDescriptionProps extends StyleProps, LynxStyledElementProps {}
+
+export const DialogDescription: LynxForwardRefComponent<unknown, DialogDescriptionProps> =
+  forwardRef<unknown, DialogDescriptionProps>((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    const { children, className, ...nativeProps } = restProps;
+    const classNames = useClassNames();
+
+    return (
+      <text
+        {...(ref ? ({ ref: ref as LynxTextRef } as Record<string, unknown>) : {})}
+        {...nativeProps}
+        className={clsx(classNames.description, className)}
+        style={style as never}
+      >
+        {children}
+      </text>
+    );
+  });
+DialogDescription.displayName = "DialogDescription";
+
+export interface DialogFooterProps extends StyleProps, LynxStyledElementProps {}
+
+export const DialogFooter: LynxForwardRefComponent<unknown, DialogFooterProps> = forwardRef<
+  unknown,
+  DialogFooterProps
+>((props, ref) => {
+  const { style, restProps } = useStyleProps(props);
+  const { children, className, ...nativeProps } = restProps;
+  const classNames = useClassNames();
+
+  return (
+    <view
+      {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
+      {...nativeProps}
+      className={clsx(classNames.footer, className)}
+      style={style as never}
+    >
+      {children}
+    </view>
+  );
+});
+DialogFooter.displayName = "DialogFooter";
+
+////////////////////////////////////////////////////////////////////////////////////
+// Action
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogActionProps extends DialogPrimitiveCloseProps {}
+
+/**
+ * @platform Lynx — maps to `DialogClose`; `asChild` and refs are unsupported.
+ */
+export const DialogAction = forwardRef<never, DialogActionProps>((props, _ref) => {
+  const { children, className, transition, ...nativeProps } = props;
+  const classNames = useClassNames();
+  const resolvedTransition = useDialogTransition(transition);
+
+  return (
+    <DialogClosePrimitive
+      {...nativeProps}
+      className={clsx(classNames.action, className)}
+      transition={resolvedTransition}
+    >
+      {children}
+    </DialogClosePrimitive>
+  );
+}) as DialogComponent<DialogActionProps>;
+DialogAction.displayName = "DialogAction";

package/src/components/Dialog/index.ts

@@ -0,0 +1,26 @@
+export {
+  DialogAction,
+  type DialogActionProps,
+  DialogBackdrop,
+  type DialogBackdropProps,
+  DialogBody,
+  type DialogBodyProps,
+  DialogContent,
+  type DialogContentProps,
+  DialogDescription,
+  type DialogDescriptionProps,
+  DialogFooter,
+  type DialogFooterProps,
+  DialogHeader,
+  type DialogHeaderProps,
+  DialogPositioner,
+  type DialogPositionerProps,
+  DialogRoot,
+  type DialogRootProps,
+  DialogTitle,
+  type DialogTitleProps,
+  DialogTrigger,
+  type DialogTriggerProps,
+} from "./Dialog";
+
+export * as Dialog from "./Dialog.namespace";

package/src/components/FloatingActionButton/FloatingActionButton.namespace.ts

@@ -0,0 +1,8 @@
+export {
+  FloatingActionButtonIcon as Icon,
+  FloatingActionButtonLabel as Label,
+  FloatingActionButtonRoot as Root,
+  type FloatingActionButtonIconProps as IconProps,
+  type FloatingActionButtonLabelProps as LabelProps,
+  type FloatingActionButtonRootProps as RootProps,
+} from "./FloatingActionButton";

package/src/components/FloatingActionButton/FloatingActionButton.test.tsx

@@ -0,0 +1,59 @@
+import "@testing-library/jest-dom";
+import { render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { FloatingActionButtonLabel, FloatingActionButtonRoot } from "./FloatingActionButton";
+
+function getFloatingActionButtonRoot(container: HTMLElement) {
+  const root = container.querySelector<HTMLElement>(".seed-floating-action-button__root");
+
+  if (!root) {
+    throw new Error("Expected FloatingActionButton root to exist.");
+  }
+
+  return root;
+}
+
+describe("FloatingActionButton", () => {
+  it("removes and restores the label node while preserving the root accessibility name", () => {
+    const { container, rerender } = render(
+      <FloatingActionButtonRoot extended accessibility-label="새 글 작성">
+        <FloatingActionButtonLabel>Extended</FloatingActionButtonLabel>
+      </FloatingActionButtonRoot>,
+    );
+
+    expect(container.querySelector(".seed-floating-action-button__label")).toHaveTextContent(
+      "Extended",
+    );
+    expect(getFloatingActionButtonRoot(container)).toHaveAttribute(
+      "accessibility-label",
+      "새 글 작성",
+    );
+
+    rerender(
+      <FloatingActionButtonRoot extended={false} accessibility-label="새 글 작성">
+        <FloatingActionButtonLabel>Extended</FloatingActionButtonLabel>
+      </FloatingActionButtonRoot>,
+    );
+
+    expect(container.querySelector(".seed-floating-action-button__label")).not.toBeInTheDocument();
+    expect(getFloatingActionButtonRoot(container)).toHaveAttribute(
+      "accessibility-label",
+      "새 글 작성",
+    );
+
+    rerender(
+      <FloatingActionButtonRoot extended accessibility-label="새 글 작성">
+        <FloatingActionButtonLabel>Extended</FloatingActionButtonLabel>
+      </FloatingActionButtonRoot>,
+    );
+
+    expect(container.querySelector(".seed-floating-action-button__label")).toHaveTextContent(
+      "Extended",
+    );
+    expect(getFloatingActionButtonRoot(container)).toHaveAttribute(
+      "accessibility-label",
+      "새 글 작성",
+    );
+  });
+});