@seed-design/lynx-react 0.2.0-alpha.3 → 0.3.0

package/src/components/AppBar/useAppBar.ts

@@ -0,0 +1,100 @@
+import type { AppBarVariantProps } from "@seed-design/lynx-css/recipes/app-bar";
+import type { AppBarMainVariantProps } from "@seed-design/lynx-css/recipes/app-bar-main";
+import * as React from "@lynx-js/react";
+
+import { useSafeArea } from "../../hooks/useSafeArea";
+import type { LynxViewProps } from "../../types";
+import type { AppBarContextValue, SharedAppBarVariantProps } from "./context";
+
+type LynxSystemInfo = { platform?: string };
+
+declare const SystemInfo: LynxSystemInfo | undefined;
+
+type AppBarTheme = NonNullable<AppBarVariantProps["theme"]>;
+type LayoutChangeHandler = NonNullable<LynxViewProps["bindlayoutchange"]>;
+type AppBarStyleObject = Record<string, string | number>;
+
+const APP_BAR_HEIGHT_BY_THEME: Record<AppBarTheme, string> = {
+  cupertino: "44px",
+  android: "56px",
+};
+
+function getDefaultAppBarTheme(): AppBarTheme {
+  const globalSystemInfo = (globalThis as typeof globalThis & { SystemInfo?: LynxSystemInfo })
+    .SystemInfo;
+  const systemInfo =
+    globalSystemInfo ?? (typeof SystemInfo === "undefined" ? undefined : SystemInfo);
+
+  if (systemInfo == null) return "cupertino";
+
+  return systemInfo.platform === "Android" ? "android" : "cupertino";
+}
+
+export function getLayoutWidth(event: Parameters<LayoutChangeHandler>[0]): number | null {
+  const eventWithWidth = event as Parameters<LayoutChangeHandler>[0] & { width?: number };
+  const nextWidth = event.detail?.width ?? event.params?.width ?? eventWithWidth.width;
+  if (typeof nextWidth !== "number" || !Number.isFinite(nextWidth)) return null;
+
+  return Math.max(0, nextWidth);
+}
+
+function getCenteredTitlePadding(leftWidth: number, rightWidth: number): string {
+  return `${Math.max(leftWidth, rightWidth)}px`;
+}
+
+function getRootLayoutStyle(theme: AppBarTheme, safeAreaInsetTop: string): AppBarStyleObject {
+  return {
+    height: `calc(${APP_BAR_HEIGHT_BY_THEME[theme]} + ${safeAreaInsetTop})`,
+    paddingTop: safeAreaInsetTop,
+  };
+}
+
+export function getMainLayoutStyle(
+  theme: AppBarMainVariantProps["theme"],
+  safeAreaInsetTop: string,
+): AppBarStyleObject | undefined {
+  if (theme !== "cupertino") return undefined;
+
+  return {
+    top: safeAreaInsetTop,
+    bottom: "0px",
+  };
+}
+
+export function useAppBar(variantProps: AppBarVariantProps) {
+  const { safeAreaInsetTop } = useSafeArea();
+  const [leftWidth, setLeftWidth] = React.useState(0);
+  const [rightWidth, setRightWidth] = React.useState(0);
+  const resolvedTheme = variantProps.theme ?? getDefaultAppBarTheme();
+
+  const resolvedVariantProps: AppBarVariantProps = {
+    ...variantProps,
+    theme: resolvedTheme,
+  };
+  const centeredTitlePaddingX = getCenteredTitlePadding(leftWidth, rightWidth);
+  const rootLayoutStyle = getRootLayoutStyle(resolvedTheme, safeAreaInsetTop);
+  const sharedVariantProps = React.useMemo<SharedAppBarVariantProps>(
+    () => ({
+      theme: resolvedVariantProps.theme,
+      tone: resolvedVariantProps.tone,
+      transitionStyle: resolvedVariantProps.transitionStyle,
+    }),
+    [resolvedVariantProps.theme, resolvedVariantProps.tone, resolvedVariantProps.transitionStyle],
+  );
+  const contextValue = React.useMemo<AppBarContextValue>(
+    () => ({
+      centeredTitlePaddingX,
+      safeAreaInsetTop,
+      sharedVariantProps,
+      setLeftWidth,
+      setRightWidth,
+    }),
+    [centeredTitlePaddingX, safeAreaInsetTop, sharedVariantProps],
+  );
+
+  return {
+    contextValue,
+    resolvedVariantProps,
+    rootLayoutStyle,
+  };
+}

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,54 @@
+import "@testing-library/jest-dom";
+import { getQueriesForElement, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { Badge } from "./Badge";
+
+function getRenderedQueries() {
+  return getQueriesForElement(getRenderedRoot());
+}
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+describe("Badge", () => {
+  it("renders label text in the label slot with default variant classes", () => {
+    render(<Badge>거래중</Badge>);
+
+    const { getByText } = getRenderedQueries();
+    const root = getRenderedRoot();
+    const badgeRoot = root.querySelector(".seed-badge__root");
+    const label = getByText("거래중");
+
+    expect(badgeRoot).toBeInTheDocument();
+    expect(badgeRoot).toHaveClass("seed-badge__root--size_medium");
+    expect(badgeRoot).toHaveClass("seed-badge__root--variant_solid");
+    expect(badgeRoot).toHaveClass("seed-badge__root--tone_neutral");
+    expect(label).toHaveClass("seed-badge__label");
+  });
+
+  it("applies variant classes and preserves user className", () => {
+    render(
+      <Badge className="custom-badge" size="large" variant="outline" tone="brand">
+        추천
+      </Badge>,
+    );
+
+    const root = getRenderedRoot();
+    const badgeRoot = root.querySelector(".seed-badge__root");
+
+    expect(badgeRoot).toBeInTheDocument();
+    expect(badgeRoot).toHaveClass("custom-badge");
+    expect(badgeRoot).toHaveClass("seed-badge__root--size_large");
+    expect(badgeRoot).toHaveClass("seed-badge__root--variant_outline");
+    expect(badgeRoot).toHaveClass("seed-badge__root--tone_brand");
+    expect(badgeRoot).toHaveClass("seed-badge__root--tone_brand-variant_outline");
+  });
+});

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,32 @@
+import { badge, type BadgeVariantProps } from "@seed-design/lynx-css/recipes/badge";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+
+import type { LynxStyledElementProps, LynxViewRef } from "../../types";
+
+/**
+ * @platform Lynx
+ *
+ * 웹 Badge와 동일한 variant surface를 제공하지만, Lynx native `<view>` / `<text>`를
+ * 직접 렌더링합니다. Badge는 정적 정보 표시 컴포넌트이므로 press/tap API를 별도
+ * 소유하지 않습니다.
+ */
+export interface BadgeProps extends BadgeVariantProps, LynxStyledElementProps {}
+
+export const Badge = React.forwardRef<unknown, BadgeProps>((props, ref) => {
+  const [variantProps, otherProps] = badge.splitVariantProps(props);
+  const classes = badge(variantProps);
+  const { children, className, ...nativeProps } = otherProps;
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      className={clsx(classes.root, className)}
+    >
+      <text className={classes.label}>{children}</text>
+    </view>
+  );
+});
+
+Badge.displayName = "Badge";

package/src/components/Badge/index.ts

@@ -0,0 +1 @@
+export { Badge, type BadgeProps } from "./Badge";

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

@@ -0,0 +1,219 @@
+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>>,
+  rootProps: [] 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,
+    Record<string, unknown> & { children?: React.ReactNode }
+  >((props, ref) => {
+    sheetMocks.rootProps.push(props);
+    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 SheetHandle = React.forwardRef<
+    unknown,
+    Record<string, unknown> & { children?: React.ReactNode }
+  >((props) => {
+    const children = props["children"] as React.ReactNode;
+
+    return (
+      <view className={props["className"] as string} style={props["style"] as never}>
+        {children}
+      </view>
+    );
+  });
+  SheetHandle.displayName = "MockSheetHandle";
+
+  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,
+    SheetRoot,
+    SheetView,
+  };
+});
+
+vi.mock("../../hooks/useSafeArea", () => ({
+  useSafeArea: () => ({
+    safeAreaInsetTop: "62px",
+    safeAreaInsetBottom: "34px",
+  }),
+}));
+
+import * as BottomSheet from "./BottomSheet.namespace";
+
+describe("BottomSheet", () => {
+  beforeEach(() => {
+    sheetMocks.contentProps = [];
+    sheetMocks.rootProps = [];
+    sheetMocks.rootRef.open.mockClear();
+  });
+
+  it("passes handleOnly to the underlying SheetRoot", () => {
+    render(
+      <BottomSheet.Root handleOnly>
+        <BottomSheet.Content />
+      </BottomSheet.Root>,
+    );
+
+    expect(sheetMocks.rootProps.at(-1)).toMatchObject({
+      handleOnly: true,
+    });
+  });
+
+  it("renders Body as a vertical scroll-view", () => {
+    const { container } = render(
+      <BottomSheet.Root>
+        <BottomSheet.Body>
+          <text>Scrollable content</text>
+        </BottomSheet.Body>
+      </BottomSheet.Root>,
+    );
+
+    const body = container.querySelector("scroll-view");
+
+    expect(body).not.toBeNull();
+    expect(body?.hasAttribute("scroll-y")).toBe(true);
+  });
+
+  it("renders Handle with a target-size touch area around the visual handle", () => {
+    const { container } = render(
+      <BottomSheet.Root>
+        <BottomSheet.Handle />
+      </BottomSheet.Root>,
+    );
+
+    const touchArea = container.querySelector(".seed-bottom-sheet-handle__touchArea");
+    const visualHandle = container.querySelector(".seed-bottom-sheet-handle__root");
+
+    expect(visualHandle).not.toBeNull();
+    expect(touchArea).not.toBeNull();
+    expect(touchArea?.contains(visualHandle)).toBe(true);
+  });
+
+  it("passes inner layout styles and safe area bottom to Content", () => {
+    render(
+      <BottomSheet.Root>
+        <BottomSheet.Content innerStyle={{ paddingTop: "8px" }} />
+      </BottomSheet.Root>,
+    );
+
+    expect(sheetMocks.contentProps.at(-1)).toMatchObject({
+      innerStyle: {
+        display: "flex",
+        flexDirection: "column",
+        minHeight: "0",
+        paddingBottom: "34px",
+        paddingTop: "8px",
+      },
+    });
+  });
+
+  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 });
+  });
+});