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

package/src/components/AppBar/AppBar.tsx

@@ -0,0 +1,288 @@
+import { appBar, type AppBarVariantProps } from "@seed-design/lynx-css/recipes/app-bar";
+import {
+  appBarMain,
+  type AppBarMainVariantProps,
+} from "@seed-design/lynx-css/recipes/app-bar-main";
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+
+import type {
+  LynxElementProps,
+  LynxIconElementProps,
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewProps,
+  LynxViewRef,
+} from "../../types";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { Icon } from "../Icon";
+import { AppBarProvider, useAppBarContext } from "./context";
+import { getLayoutWidth, getMainLayoutStyle, useAppBar } from "./useAppBar";
+
+type AppBarClassNames = ReturnType<typeof appBar>;
+type AppBarMainClassNames = ReturnType<typeof appBarMain>;
+type LayoutChangeHandler = NonNullable<LynxViewProps["bindlayoutchange"]>;
+
+const { ClassNamesProvider: AppBarClassNamesProvider, useClassNames: useAppBarRecipeClassNames } =
+  createSlotRecipeContext(appBar);
+const {
+  ClassNamesProvider: AppBarMainClassNamesProvider,
+  useClassNames: useAppBarMainRecipeClassNames,
+} = createSlotRecipeContext(appBarMain);
+
+function useAppBarClassNames(consumer: string): AppBarClassNames {
+  try {
+    return useAppBarRecipeClassNames();
+  } catch {
+    throw new Error(`<${consumer}/> must be rendered inside <AppBarRoot/>.`);
+  }
+}
+
+function useAppBarMainClassNames(consumer: string): AppBarMainClassNames {
+  try {
+    return useAppBarMainRecipeClassNames();
+  } catch {
+    throw new Error(`<${consumer}/> must be rendered inside <AppBarMain/>.`);
+  }
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AppBarRootProps extends AppBarVariantProps, LynxStyledElementProps {}
+
+export const AppBarRoot = React.forwardRef<unknown, AppBarRootProps>((props, ref) => {
+  const [variantProps, otherProps] = appBar.splitVariantProps(props);
+  const { children, className, style, ...nativeProps } = otherProps;
+  const { contextValue, resolvedVariantProps, rootLayoutStyle } = useAppBar(variantProps);
+  const classNames = appBar(resolvedVariantProps);
+
+  return (
+    <AppBarProvider value={contextValue}>
+      <AppBarClassNamesProvider value={classNames}>
+        <view
+          {...(ref ? { ref: ref as LynxViewRef } : {})}
+          {...nativeProps}
+          className={clsx(classNames.root, className)}
+          style={
+            {
+              "--seed-safe-area-top": contextValue.safeAreaInsetTop,
+              "--centered-title-padding-x": contextValue.centeredTitlePaddingX,
+              ...rootLayoutStyle,
+              ...style,
+            } as LynxViewProps["style"]
+          }
+        >
+          <view accessibility-elements-hidden className={classNames.background} />
+          {children}
+        </view>
+      </AppBarClassNamesProvider>
+    </AppBarProvider>
+  );
+});
+AppBarRoot.displayName = "AppBarRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AppBarLeftProps extends LynxStyledElementProps {
+  bindlayoutchange?: LynxViewProps["bindlayoutchange"];
+}
+
+export const AppBarLeft = React.forwardRef<unknown, AppBarLeftProps>((props, ref) => {
+  const { children, className, bindlayoutchange, ...nativeProps } = props;
+  const { setLeftWidth } = useAppBarContext("AppBarLeft");
+  const classNames = useAppBarClassNames("AppBarLeft");
+
+  const handleLayoutChange = React.useCallback<LayoutChangeHandler>(
+    (...args) => {
+      bindlayoutchange?.(...args);
+      const width = getLayoutWidth(args[0]);
+      if (width != null) {
+        setLeftWidth(width);
+      }
+    },
+    [bindlayoutchange, setLeftWidth],
+  );
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      bindlayoutchange={handleLayoutChange}
+      className={clsx(classNames.left, className)}
+    >
+      {children}
+    </view>
+  );
+});
+AppBarLeft.displayName = "AppBarLeft";
+
+export interface AppBarRightProps extends LynxStyledElementProps {
+  bindlayoutchange?: LynxViewProps["bindlayoutchange"];
+}
+
+export const AppBarRight = React.forwardRef<unknown, AppBarRightProps>((props, ref) => {
+  const { children, className, bindlayoutchange, ...nativeProps } = props;
+  const { setRightWidth } = useAppBarContext("AppBarRight");
+  const classNames = useAppBarClassNames("AppBarRight");
+
+  const handleLayoutChange = React.useCallback<LayoutChangeHandler>(
+    (...args) => {
+      bindlayoutchange?.(...args);
+      const width = getLayoutWidth(args[0]);
+      if (width != null) {
+        setRightWidth(width);
+      }
+    },
+    [bindlayoutchange, setRightWidth],
+  );
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      bindlayoutchange={handleLayoutChange}
+      className={clsx(classNames.right, className)}
+    >
+      {children}
+    </view>
+  );
+});
+AppBarRight.displayName = "AppBarRight";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AppBarMainProps extends AppBarMainVariantProps, LynxStyledElementProps {}
+
+export const AppBarMain = React.forwardRef<unknown, AppBarMainProps>((props, ref) => {
+  const { centeredTitlePaddingX, safeAreaInsetTop, sharedVariantProps } =
+    useAppBarContext("AppBarMain");
+  const [variantProps, otherProps] = appBarMain.splitVariantProps({
+    ...sharedVariantProps,
+    ...props,
+  });
+  const resolvedTheme = variantProps.theme ?? "cupertino";
+  const classNames = appBarMain(variantProps);
+  const { children, className, style, ...nativeProps } = otherProps;
+  const centeredTitleStyle =
+    variantProps.theme === "cupertino"
+      ? {
+          paddingLeft: centeredTitlePaddingX,
+          paddingRight: centeredTitlePaddingX,
+        }
+      : undefined;
+
+  return (
+    <AppBarMainClassNamesProvider value={classNames}>
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...nativeProps}
+        className={clsx(classNames.root, className)}
+        style={
+          {
+            ...centeredTitleStyle,
+            ...getMainLayoutStyle(resolvedTheme, safeAreaInsetTop),
+            ...style,
+          } as LynxViewProps["style"]
+        }
+      >
+        {children}
+      </view>
+    </AppBarMainClassNamesProvider>
+  );
+});
+AppBarMain.displayName = "AppBarMain";
+
+export interface AppBarTitleProps extends LynxElementProps {}
+
+export const AppBarTitle = React.forwardRef<unknown, AppBarTitleProps>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+  const classNames = useAppBarMainClassNames("AppBarTitle");
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...nativeProps}
+      className={clsx(classNames.title, className)}
+    >
+      {children}
+    </text>
+  );
+});
+AppBarTitle.displayName = "AppBarTitle";
+
+export interface AppBarSubtitleProps extends LynxElementProps {}
+
+export const AppBarSubtitle = React.forwardRef<unknown, AppBarSubtitleProps>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+  const classNames = useAppBarMainClassNames("AppBarSubtitle");
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...nativeProps}
+      className={clsx(classNames.subtitle, className)}
+    >
+      {children}
+    </text>
+  );
+});
+AppBarSubtitle.displayName = "AppBarSubtitle";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface AppBarIconButtonProps extends LynxElementProps, LynxPressableProps {
+  icon?: React.ReactElement<LynxIconElementProps>;
+  "accessibility-label"?: LynxViewProps["accessibility-label"];
+  "accessibility-element"?: LynxViewProps["accessibility-element"];
+  "accessibility-traits"?: LynxViewProps["accessibility-traits"];
+}
+
+export const AppBarIconButton = React.forwardRef<unknown, AppBarIconButtonProps>((props, ref) => {
+  const {
+    children,
+    className,
+    icon,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-label": accessibilityLabel,
+    "accessibility-traits": accessibilityTraits = "button",
+    ...nativeProps
+  } = props;
+  const classNames = useAppBarClassNames("AppBarIconButton");
+
+  if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) {
+    console.warn("AppBarIconButton requires `accessibility-label` for accessibility.");
+  }
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      accessibility-element={accessibilityElement}
+      accessibility-label={accessibilityLabel}
+      accessibility-traits={accessibilityTraits}
+      className={clsx(classNames.iconButton, className)}
+    >
+      {icon ? <Icon className={classNames.icon} icon={icon} /> : children}
+    </view>
+  );
+});
+AppBarIconButton.displayName = "AppBarIconButton";
+
+export interface AppBarSlotProps extends LynxStyledElementProps {}
+
+export const AppBarSlot = React.forwardRef<unknown, AppBarSlotProps>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+  const classNames = useAppBarClassNames("AppBarSlot");
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      className={clsx(classNames.custom, className)}
+    >
+      {children}
+    </view>
+  );
+});
+AppBarSlot.displayName = "AppBarSlot";

package/src/components/AppBar/context.ts

@@ -0,0 +1,27 @@
+import { type AppBarMainVariantProps } from "@seed-design/lynx-css/recipes/app-bar-main";
+import * as React from "@lynx-js/react";
+
+export type SharedAppBarVariantProps = Pick<
+  AppBarMainVariantProps,
+  "theme" | "tone" | "transitionStyle"
+>;
+
+export interface AppBarContextValue {
+  centeredTitlePaddingX: string;
+  safeAreaInsetTop: string;
+  sharedVariantProps: SharedAppBarVariantProps;
+  setLeftWidth: (width: number) => void;
+  setRightWidth: (width: number) => void;
+}
+
+const AppBarContext = React.createContext<AppBarContextValue | null>(null);
+
+export const AppBarProvider = AppBarContext.Provider;
+
+export function useAppBarContext(consumer: string): AppBarContextValue {
+  const ctx = React.useContext(AppBarContext);
+  if (!ctx) {
+    throw new Error(`<${consumer}/> must be rendered inside <AppBarRoot/>.`);
+  }
+  return ctx;
+}

package/src/components/AppBar/index.ts

@@ -0,0 +1,21 @@
+export {
+  AppBarIconButton,
+  AppBarLeft,
+  AppBarMain,
+  AppBarRight,
+  AppBarRoot,
+  AppBarSlot,
+  AppBarSubtitle,
+  AppBarTitle,
+  type AppBarIconButtonProps,
+  type AppBarLeftProps,
+  type AppBarMainProps,
+  type AppBarRightProps,
+  type AppBarRootProps,
+  type AppBarRootProps as AppBarProps,
+  type AppBarSlotProps,
+  type AppBarSubtitleProps,
+  type AppBarTitleProps,
+} from "./AppBar";
+
+export * as AppBar from "./AppBar.namespace";

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.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";