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

package/src/components/AppBar/AppBar.test.tsx

@@ -0,0 +1,270 @@
+import "@testing-library/jest-dom";
+import {
+  act,
+  fireEvent,
+  getQueriesForElement,
+  render,
+  waitFor,
+} from "@lynx-js/react/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import * as AppBar from "./AppBar.namespace";
+
+type TestSystemInfo = { platform?: string };
+
+interface TestLynxGlobal {
+  SystemInfo?: TestSystemInfo;
+  lynx?: {
+    __globalProps?: {
+      safeAreaInsetTop?: number;
+      safeAreaInsetBottom?: number;
+    };
+  };
+  lynxTestingEnv?: {
+    backgroundThread: {
+      globalThis: TestLynxGlobal;
+    };
+    mainThread: {
+      globalThis: TestLynxGlobal;
+    };
+  };
+}
+
+function getRenderedQueries() {
+  return getQueriesForElement(getAppBarRoot());
+}
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function getAppBarRoot() {
+  const root = getRenderedRoot();
+
+  if (root.classList.contains("seed-app-bar__root")) return root;
+
+  const appBarRoot = root.querySelector<HTMLElement>(".seed-app-bar__root");
+  if (!appBarRoot) {
+    throw new Error("Expected AppBar root to exist.");
+  }
+
+  return appBarRoot;
+}
+
+function expectStyle(style: CSSStyleDeclaration, expected: Record<string, string>) {
+  for (const [key, value] of Object.entries(expected)) {
+    expect(style.getPropertyValue(key)).toBe(value);
+  }
+}
+
+function setSystemInfo(systemInfo: TestSystemInfo | undefined) {
+  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) {
+    if (systemInfo == null) {
+      delete global.SystemInfo;
+    } else {
+      global.SystemInfo = systemInfo;
+    }
+  }
+}
+
+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,
+    };
+  }
+}
+
+function stubPlatform(platform: string | undefined) {
+  setSystemInfo(platform == null ? {} : { platform });
+}
+
+describe("AppBar", () => {
+  afterEach(() => {
+    setSystemInfo({ platform: "iOS" });
+    setGlobalProps({});
+    vi.unstubAllGlobals();
+  });
+
+  it("uses android theme by default on Android", () => {
+    stubPlatform("Android");
+
+    render(<AppBar.Root />);
+
+    expect(getAppBarRoot()).toHaveClass("seed-app-bar__root--theme_android");
+  });
+
+  it("uses cupertino theme by default outside Android", () => {
+    stubPlatform("iOS");
+
+    render(<AppBar.Root />);
+
+    expect(getAppBarRoot()).toHaveClass("seed-app-bar__root--theme_cupertino");
+  });
+
+  it("uses cupertino theme when SystemInfo.platform is unavailable", () => {
+    stubPlatform(undefined);
+
+    render(<AppBar.Root />);
+
+    expect(getAppBarRoot()).toHaveClass("seed-app-bar__root--theme_cupertino");
+  });
+
+  it("lets explicit theme override the platform default", () => {
+    stubPlatform("Android");
+
+    render(<AppBar.Root theme="cupertino" />);
+
+    expect(getAppBarRoot()).toHaveClass("seed-app-bar__root--theme_cupertino");
+    expect(getAppBarRoot()).not.toHaveClass("seed-app-bar__root--theme_android");
+  });
+
+  it("applies safe area from useSafeArea to the root layout", () => {
+    setGlobalProps({ safeAreaInsetTop: 47 });
+
+    render(<AppBar.Root theme="cupertino" />);
+
+    expectStyle(getAppBarRoot().style, {
+      height: "calc(91px)",
+      "padding-top": "47px",
+    });
+  });
+
+  it("does not read the safe area CSS variable override as the JS layout source", () => {
+    setGlobalProps({ safeAreaInsetTop: 47 });
+
+    render(
+      <AppBar.Root
+        theme="cupertino"
+        style={{ "--seed-safe-area-top": "0px" } as AppBar.RootProps["style"]}
+      />,
+    );
+
+    expectStyle(getAppBarRoot().style, {
+      height: "calc(91px)",
+      "padding-top": "47px",
+    });
+  });
+
+  it("keeps Cupertino title-only main centered in the safe-area adjusted bar", () => {
+    setGlobalProps({ safeAreaInsetTop: 47 });
+
+    render(
+      <AppBar.Root theme="cupertino">
+        <AppBar.Main>
+          <AppBar.Title>Title</AppBar.Title>
+        </AppBar.Main>
+      </AppBar.Root>,
+    );
+
+    const main = getAppBarRoot().querySelector<HTMLElement>(".seed-app-bar-main__root");
+
+    expect(main).toBeInTheDocument();
+    expectStyle(main!.style, {
+      top: "47px",
+      bottom: "0px",
+    });
+  });
+
+  it("renders slots with recipe class names", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <AppBar.IconButton accessibility-label="Back" />
+        </AppBar.Left>
+        <AppBar.Main layout="withSubtitle">
+          <AppBar.Title>Title</AppBar.Title>
+          <AppBar.Subtitle>Subtitle</AppBar.Subtitle>
+        </AppBar.Main>
+        <AppBar.Right>
+          <AppBar.Slot>
+            <text>Done</text>
+          </AppBar.Slot>
+        </AppBar.Right>
+      </AppBar.Root>,
+    );
+
+    const { getByText } = getRenderedQueries();
+    const root = getAppBarRoot();
+
+    expect(root.querySelector(".seed-app-bar__left")).toBeInTheDocument();
+    expect(root.querySelector(".seed-app-bar__right")).toBeInTheDocument();
+    expect(root.querySelector(".seed-app-bar__iconButton")).toBeInTheDocument();
+    expect(root.querySelector(".seed-app-bar__custom")).toBeInTheDocument();
+    expect(getByText("Title")).toHaveClass("seed-app-bar-main__title");
+    expect(getByText("Subtitle")).toHaveClass("seed-app-bar-main__subtitle");
+  });
+
+  it("maps icon button labels to Lynx accessibility props", () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <AppBar.IconButton accessibility-label="Back" />
+        </AppBar.Left>
+      </AppBar.Root>,
+    );
+
+    const iconButton = getAppBarRoot().querySelector(".seed-app-bar__iconButton");
+
+    expect(iconButton).toHaveAttribute("accessibility-label", "Back");
+    expect(iconButton).toHaveAttribute("accessibility-element", "true");
+    expect(iconButton).toHaveAttribute("accessibility-traits", "button");
+  });
+
+  it("updates centered title padding from left and right layout widths", async () => {
+    render(
+      <AppBar.Root>
+        <AppBar.Left>
+          <text>Left</text>
+        </AppBar.Left>
+        <AppBar.Main>
+          <AppBar.Title>Title</AppBar.Title>
+        </AppBar.Main>
+        <AppBar.Right>
+          <text>Right</text>
+        </AppBar.Right>
+      </AppBar.Root>,
+    );
+
+    const root = getAppBarRoot();
+    const main = root.querySelector(".seed-app-bar-main__root");
+    const left = root.querySelector(".seed-app-bar__left");
+    const right = root.querySelector(".seed-app-bar__right");
+
+    if (!main || !left || !right) {
+      throw new Error("Expected AppBar main, left, and right slots to exist.");
+    }
+
+    act(() => {
+      fireEvent.layoutchange(left, { width: 48 });
+      fireEvent.layoutchange(right, { width: 72 });
+    });
+
+    await waitFor(() => {
+      expect(main).toHaveStyle({ paddingLeft: "72px", paddingRight: "72px" });
+    });
+  });
+});

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