@seed-design/lynx-react 0.2.0-alpha.2 → 0.2.0

package/src/components/BottomSheet/BottomSheet.tsx

@@ -24,16 +24,27 @@ import {
   useContext,
   useMemo,
   useRef,
-  type ReactNode,
-  type Ref,
+  type ForwardRefExoticComponent,
+  type PropsWithoutRef,
+  type ReactElement,
   type RefObject,
+  type RefAttributes,
 } from "@lynx-js/react";
-import type { CSSProperties } from "react";
 import clsx from "clsx";
 
+import { useSafeArea } from "../../hooks/useSafeArea";
+import type {
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewRef,
+} from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
 
 type BottomSheetClassNames = ReturnType<typeof bottomSheet>;
+type LynxForwardRefComponent<T, P> = ForwardRefExoticComponent<
+  PropsWithoutRef<P> & RefAttributes<T>
+>;
 
 const { ClassNamesProvider, useClassNames, withContext } = createSlotRecipeContext(bottomSheet);
 
@@ -132,8 +143,8 @@ export interface BottomSheetRootProps
  * - `BottomSheetCloseButton`: Tier B (Lynx SVG 지원 후 추가 예정)
  * - `BottomSheetTrigger`의 `asChild`: 미지원 (기본 `<view>`만)
  */
-export const BottomSheetRoot = forwardRef<SheetRootRef, BottomSheetRootProps>(
-  (props, forwardedRef) => {
+export const BottomSheetRoot: LynxForwardRefComponent<SheetRootRef, BottomSheetRootProps> =
+  forwardRef<SheetRootRef, BottomSheetRootProps>((props, forwardedRef) => {
     const [variantProps, restProps] = bottomSheet.splitVariantProps(props);
     const { open, defaultOpen, onOpenChange, snapPoints, children, ...nativeProps } = restProps;
     const { headerAlign, skipAnimation } = variantProps;
@@ -186,50 +197,47 @@ export const BottomSheetRoot = forwardRef<SheetRootRef, BottomSheetRootProps>(
         </ClassNamesProvider>
       </BottomSheetContext.Provider>
     );
-  },
-);
+  });
 BottomSheetRoot.displayName = "BottomSheetRoot";
 
 ////////////////////////////////////////////////////////////////////////////////////
 // Trigger
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface BottomSheetTriggerProps {
-  children?: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-  bindtap?: () => void;
-}
+export interface BottomSheetTriggerProps
+  extends LynxStyledElementProps,
+    Pick<LynxPressableProps, "bindtap"> {}
+
+export const BottomSheetTrigger: LynxForwardRefComponent<unknown, BottomSheetTriggerProps> =
+  forwardRef<unknown, BottomSheetTriggerProps>((props, ref) => {
+    const { children, className, style, bindtap: userBindtap } = props;
+    const { rootRef, options } = useBottomSheetContext();
+
+    // `bindtap`을 직접 prop으로 쓰면 React DOM `<view>` 타입(SVG)이 적용되어 TS가 거부한다.
+    // Lynx JSX 런타임은 이 prop을 올바르게 처리하므로 spread로 우회한다 (ActionButton과 동일 패턴).
+    const handlers: Pick<LynxPressableProps, "bindtap"> = {
+      bindtap: (event, instance) => {
+        if (options.skipAnimation) {
+          rootRef.current?.open({ animate: false });
+        } else {
+          rootRef.current?.open();
+        }
 
-export const BottomSheetTrigger = forwardRef<unknown, BottomSheetTriggerProps>((props, ref) => {
-  const { children, className, style, bindtap: userBindtap } = props;
-  const { rootRef, options } = useBottomSheetContext();
-
-  // `bindtap`을 직접 prop으로 쓰면 React DOM `<view>` 타입(SVG)이 적용되어 TS가 거부한다.
-  // Lynx JSX 런타임은 이 prop을 올바르게 처리하므로 spread로 우회한다 (ActionButton과 동일 패턴).
-  const handlers = {
-    bindtap: () => {
-      if (options.skipAnimation) {
-        rootRef.current?.open({ animate: false });
-      } else {
-        rootRef.current?.open();
-      }
-
-      userBindtap?.();
-    },
-  };
+        userBindtap?.(event, instance);
+      },
+    };
 
-  return (
-    <view
-      {...(ref ? { ref: ref as Ref<SVGViewElement> } : {})}
-      {...handlers}
-      className={className}
-      style={style}
-    >
-      {children}
-    </view>
-  );
-});
+    return (
+      <view
+        {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
+        {...handlers}
+        className={className}
+        style={style as never}
+      >
+        {children}
+      </view>
+    );
+  });
 BottomSheetTrigger.displayName = "BottomSheetTrigger";
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -248,10 +256,8 @@ export interface BottomSheetPositionerProps extends SheetViewProps {}
  * recipe의 `positioner` slot className을 자동 적용해 `position: fixed` + 전체
  * 뷰포트 커버 레이아웃을 보장한다.
  */
-export const BottomSheetPositioner = withContext<unknown, BottomSheetPositionerProps>(
-  SheetView,
-  "positioner",
-);
+export const BottomSheetPositioner: LynxForwardRefComponent<unknown, BottomSheetPositionerProps> =
+  withContext<unknown, BottomSheetPositionerProps>(SheetView, "positioner");
 BottomSheetPositioner.displayName = "BottomSheetPositioner";
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -265,32 +271,40 @@ BottomSheetPositioner.displayName = "BottomSheetPositioner";
 
 export interface BottomSheetBackdropProps extends SheetBackdropProps {}
 
-export const BottomSheetBackdrop = withContext<unknown, BottomSheetBackdropProps>(
-  SheetBackdrop,
-  "backdrop",
-);
+export const BottomSheetBackdrop: LynxForwardRefComponent<unknown, BottomSheetBackdropProps> =
+  withContext<unknown, BottomSheetBackdropProps>(SheetBackdrop, "backdrop");
 BottomSheetBackdrop.displayName = "BottomSheetBackdrop";
 
 export interface BottomSheetContentProps extends SheetContentProps {}
 
-export const BottomSheetContent = forwardRef<unknown, BottomSheetContentProps>((props, ref) => {
-  const { className, snapAnimation, enterAnimation, exitAnimation, ...restProps } = props;
-  const classNames = useClassNames();
-  const { options } = useBottomSheetContext();
+export const BottomSheetContent: LynxForwardRefComponent<unknown, BottomSheetContentProps> =
+  forwardRef<unknown, BottomSheetContentProps>((props, ref) => {
+    const { className, innerStyle, snapAnimation, enterAnimation, exitAnimation, ...restProps } =
+      props;
+    const classNames = useClassNames();
+    const { options } = useBottomSheetContext();
+    const { safeAreaInsetBottom } = useSafeArea();
 
-  const defaultAnimation = options.skipAnimation ? SKIP_ANIMATION_TRANSITION : undefined;
+    const defaultAnimation = options.skipAnimation ? SKIP_ANIMATION_TRANSITION : undefined;
 
-  return (
-    <SheetContent
-      {...(ref ? { ref } : {})}
-      {...restProps}
-      className={clsx(classNames.content, className)}
-      snapAnimation={snapAnimation ?? defaultAnimation ?? SEED_SNAP_ANIMATION}
-      enterAnimation={enterAnimation ?? defaultAnimation ?? SEED_ENTER_ANIMATION}
-      exitAnimation={exitAnimation ?? defaultAnimation ?? SEED_EXIT_ANIMATION}
-    />
-  );
-});
+    return (
+      <SheetContent
+        {...(ref ? { ref } : {})}
+        {...restProps}
+        className={clsx(classNames.content, className)}
+        innerStyle={{
+          display: "flex",
+          flexDirection: "column",
+          minHeight: "0",
+          paddingBottom: safeAreaInsetBottom,
+          ...innerStyle,
+        }}
+        snapAnimation={snapAnimation ?? defaultAnimation ?? SEED_SNAP_ANIMATION}
+        enterAnimation={enterAnimation ?? defaultAnimation ?? SEED_ENTER_ANIMATION}
+        exitAnimation={exitAnimation ?? defaultAnimation ?? SEED_EXIT_ANIMATION}
+      />
+    );
+  });
 BottomSheetContent.displayName = "BottomSheetContent";
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -301,15 +315,21 @@ export interface BottomSheetHandleProps extends SheetHandleProps {}
 
 /**
  * @remarks
- * `SheetHandle`은 forwardRef가 아니므로 ref 시그니처는 제공하지 않는다. touchArea 슬롯은
- * `SheetHandle` JSX가 정적으로 children을 받지 않는 구조라 적용하지 않는다 (Lynx
- * BackgroundSnapshot이 정적 slot 외의 동적 children 삽입을 허용하지 않음).
+ * `SheetHandle`은 forwardRef가 아니므로 ref 시그니처는 제공하지 않는다.
+ * Lynx drag handler는 `SheetHandle`의 outer view에 붙으므로, 44x44 target
+ * area는 `SheetHandle`에 적용하고 보이는 handle은 그 중심에 배치한다.
  */
-export function BottomSheetHandle(props: BottomSheetHandleProps) {
-  const { className, style, ...rest } = props;
+export function BottomSheetHandle(props: BottomSheetHandleProps): ReactElement {
+  const { children, className, style, ...rest } = props;
   const classNames = bottomSheetHandle();
 
-  return <SheetHandle className={clsx(classNames.root, className)} style={style} {...rest} />;
+  return (
+    <SheetHandle className={classNames.touchArea} {...rest}>
+      <view className={clsx(classNames.root, className)} style={style as never}>
+        {children}
+      </view>
+    </SheetHandle>
+  );
 }
 BottomSheetHandle.displayName = "BottomSheetHandle";
 
@@ -323,22 +343,20 @@ BottomSheetHandle.displayName = "BottomSheetHandle";
 // (lynx-ui-sheet 같은 외부 컴포넌트 감싸기엔 withContext를 그대로 사용해도 안전.)
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface BottomSheetSlotProps {
-  children?: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
+export interface BottomSheetSlotProps extends LynxStyledElementProps {}
 
-function createViewSlot(slotName: keyof BottomSheetClassNames) {
+function createViewSlot(
+  slotName: keyof BottomSheetClassNames,
+): LynxForwardRefComponent<unknown, BottomSheetSlotProps> {
   const Slot = forwardRef<unknown, BottomSheetSlotProps>((props, ref) => {
     const { children, className, style } = props;
     const classNames = useClassNames();
 
     return (
       <view
-        {...(ref ? { ref: ref as Ref<SVGViewElement> } : {})}
+        {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
         className={clsx(classNames[slotName], className)}
-        style={style}
+        style={style as never}
       >
         {children}
       </view>
@@ -347,16 +365,18 @@ function createViewSlot(slotName: keyof BottomSheetClassNames) {
   return Slot;
 }
 
-function createTextSlot(slotName: keyof BottomSheetClassNames) {
+function createTextSlot(
+  slotName: keyof BottomSheetClassNames,
+): LynxForwardRefComponent<unknown, BottomSheetSlotProps> {
   const Slot = forwardRef<unknown, BottomSheetSlotProps>((props, ref) => {
     const { children, className, style } = props;
     const classNames = useClassNames();
 
     return (
       <text
-        {...(ref ? { ref: ref as Ref<SVGTextElement> } : {})}
+        {...(ref ? ({ ref: ref as LynxTextRef } as Record<string, unknown>) : {})}
         className={clsx(classNames[slotName], className)}
-        style={style}
+        style={style as never}
       >
         {children}
       </text>
@@ -370,7 +390,24 @@ export const BottomSheetHeader = createViewSlot("header");
 BottomSheetHeader.displayName = "BottomSheetHeader";
 
 export interface BottomSheetBodyProps extends BottomSheetSlotProps {}
-export const BottomSheetBody = createViewSlot("body");
+export const BottomSheetBody: LynxForwardRefComponent<unknown, BottomSheetBodyProps> = forwardRef<
+  unknown,
+  BottomSheetBodyProps
+>((props, ref) => {
+  const { children, className, style } = props;
+  const classNames = useClassNames();
+
+  return (
+    <scroll-view
+      {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
+      scroll-y
+      className={clsx(classNames.body, className)}
+      style={style as never}
+    >
+      {children}
+    </scroll-view>
+  );
+});
 BottomSheetBody.displayName = "BottomSheetBody";
 
 export interface BottomSheetFooterProps extends BottomSheetSlotProps {}

package/src/components/Box/Box.test.tsx

@@ -0,0 +1,85 @@
+import "@testing-library/jest-dom";
+import { render } from "@lynx-js/react/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Text } from "../Text";
+import { Box } from "./Box";
+
+interface TestLynxGlobal {
+  lynx?: {
+    __globalProps?: {
+      safeAreaInsetTop?: number;
+      safeAreaInsetBottom?: number;
+    };
+  };
+  lynxTestingEnv?: {
+    backgroundThread: {
+      globalThis: TestLynxGlobal;
+    };
+    mainThread: {
+      globalThis: TestLynxGlobal;
+    };
+  };
+}
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function expectStyle(style: CSSStyleDeclaration, expected: Record<string, string>) {
+  for (const [key, value] of Object.entries(expected)) {
+    expect(style.getPropertyValue(key)).toBe(value);
+  }
+}
+
+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,
+    };
+  }
+}
+
+describe("Box", () => {
+  afterEach(() => {
+    setGlobalProps({});
+    vi.unstubAllGlobals();
+  });
+
+  it("resolves top and bottom safe area padding from global props", () => {
+    setGlobalProps({
+      safeAreaInsetTop: 47,
+      safeAreaInsetBottom: 34,
+    });
+
+    render(
+      <Box className="box-test" pt="safeArea" pb="safeArea">
+        <Text>Box content</Text>
+      </Box>,
+    );
+
+    const box = getRenderedRoot().querySelector(".box-test");
+
+    expect(box).toBeInTheDocument();
+    expectStyle((box as HTMLElement).style, {
+      "padding-top": "47px",
+      "padding-bottom": "34px",
+    });
+  });
+});

package/src/components/Box/Box.tsx

@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+
+import type { LynxPressableProps, LynxStyledElementProps, LynxViewRef } from "../../types";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
+
+/**
+ * @platform Lynx
+ *
+ * `Box`는 SEED style prop을 native `<view>`의 object style로 변환하는 편의
+ * primitive입니다. 많은 항목을 반복 렌더링하는 화면에서는 primitive 컴포넌트
+ * 렌더링과 style prop 해석 비용이 누적될 수 있습니다. 앱 코드에서는 native
+ * `<view>`/`<text>`와 Tailwind utility className을 우선 고려하세요. 패키지
+ * 컴포넌트 내부에서는 native tag와 recipe className을 사용하고, inline style은
+ * 런타임 값이 필요한 경우에만 제한적으로 사용합니다.
+ */
+export interface BoxProps extends StyleProps, LynxStyledElementProps, LynxPressableProps {
+  bindtouchstart?: () => void;
+  bindtouchend?: () => void;
+  bindtouchcancel?: () => void;
+}
+
+export const Box = React.forwardRef<unknown, BoxProps>((props, ref) => {
+  const { style, restProps } = useStyleProps(props);
+  const { children, className, ...nativeProps } = restProps;
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      className={clsx(className)}
+      style={style}
+    >
+      {children}
+    </view>
+  );
+});
+
+Box.displayName = "Box";

package/src/components/Box/index.ts

@@ -0,0 +1 @@
+export { Box, type BoxProps } from "./Box";