@seed-design/lynx-react 0.5.1 → 0.6.0

package/src/components/PageBanner/PageBanner.test.tsx

@@ -0,0 +1,124 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import * as PageBanner from "./PageBanner.namespace";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function getPageBannerRoot() {
+  const root = getRenderedRoot();
+
+  if (root.classList.contains("seed-page-banner__root")) return root;
+
+  const pageBannerRoot = root.querySelector<HTMLElement>(".seed-page-banner__root");
+  if (!pageBannerRoot) {
+    throw new Error("Expected PageBanner root to exist.");
+  }
+
+  return pageBannerRoot;
+}
+
+describe("PageBanner", () => {
+  it("renders compound slots with the default neutral weak style", () => {
+    render(
+      <PageBanner.Root>
+        <PageBanner.Content>
+          <PageBanner.Body>
+            <PageBanner.Title>Title</PageBanner.Title>
+            <PageBanner.Description>Description</PageBanner.Description>
+          </PageBanner.Body>
+          <PageBanner.Button>Action</PageBanner.Button>
+        </PageBanner.Content>
+        <PageBanner.CloseButton accessibility-label="Close" />
+      </PageBanner.Root>,
+    );
+
+    const root = getPageBannerRoot();
+
+    expect(root).toHaveClass("seed-page-banner__root--tone_neutral-variant_weak");
+    expect(root.querySelector(".seed-page-banner__content")?.tagName.toLowerCase()).toBe("view");
+    expect(root.querySelector(".seed-page-banner__body")?.tagName.toLowerCase()).toBe("text");
+    expect(root.querySelector(".seed-page-banner__title")).toHaveClass(
+      "seed-page-banner__title--tone_neutral-variant_weak",
+    );
+    expect(root.querySelector(".seed-page-banner__description")).toHaveClass(
+      "seed-page-banner__description--tone_neutral-variant_weak",
+    );
+    expect(root.querySelector(".seed-page-banner__button")).toHaveAttribute(
+      "accessibility-traits",
+      "button",
+    );
+  });
+
+  it("tracks pressed state and maps actionable accessibility", () => {
+    const onTap = vi.fn();
+
+    render(
+      <PageBanner.Root tone="positive" variant="solid" bindtap={onTap}>
+        <PageBanner.Content>
+          <PageBanner.Body>
+            <PageBanner.Description>Actionable</PageBanner.Description>
+          </PageBanner.Body>
+        </PageBanner.Content>
+      </PageBanner.Root>,
+    );
+
+    const root = getPageBannerRoot();
+
+    expect(root).toHaveAttribute("accessibility-element", "true");
+    expect(root).toHaveAttribute("accessibility-traits", "button");
+
+    fireEvent.touchstart(root, {});
+    expect(root).toHaveClass("seed-page-banner__root--tone_positive-variant_solid-pressed_true");
+
+    fireEvent.tap(root);
+    expect(onTap).toHaveBeenCalledTimes(1);
+  });
+
+  it("dismisses an uncontrolled banner and composes the close tap handler", () => {
+    const onTap = vi.fn();
+    const onDismiss = vi.fn();
+
+    render(
+      <PageBanner.Root onDismiss={onDismiss}>
+        <PageBanner.CloseButton bindtap={onTap} accessibility-label="Close" />
+      </PageBanner.Root>,
+    );
+
+    const closeButton = getPageBannerRoot().querySelector(".seed-page-banner__closeButton");
+    if (!closeButton) throw new Error("Expected close button to exist.");
+
+    fireEvent.tap(closeButton);
+
+    expect(onTap).toHaveBeenCalledTimes(1);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(getRenderedRoot().querySelector(".seed-page-banner__root")).not.toBeInTheDocument();
+  });
+
+  it("notifies without hiding a controlled banner", () => {
+    const onDismiss = vi.fn();
+
+    render(
+      <PageBanner.Root open onDismiss={onDismiss}>
+        <PageBanner.CloseButton accessibility-label="Close" />
+      </PageBanner.Root>,
+    );
+
+    const closeButton = getPageBannerRoot().querySelector(".seed-page-banner__closeButton");
+    if (!closeButton) throw new Error("Expected close button to exist.");
+
+    fireEvent.tap(closeButton);
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(getPageBannerRoot()).toBeInTheDocument();
+  });
+});

package/src/components/PageBanner/PageBanner.tsx

@@ -0,0 +1,340 @@
+import { pageBanner, type PageBannerVariantProps } from "@seed-design/lynx-css/recipes/page-banner";
+import * as React from "@lynx-js/react";
+import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
+import clsx from "clsx";
+
+import { useControllableState } from "../../hooks/useControllableState";
+import { usePressTap } from "../../hooks/usePressTap";
+import type {
+  LynxAccessibilityProps,
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewProps,
+  LynxViewRef,
+} from "../../types";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { IconSlotProvider } from "../Icon/Icon";
+
+const { ClassNamesProvider, PropsProvider, useClassNames, useProps } =
+  createSlotRecipeContext(pageBanner);
+
+type TapHandler = NonNullable<LynxViewProps["bindtap"]>;
+
+interface PageBannerContextValue {
+  dismiss: () => void;
+}
+
+const PageBannerContext = React.createContext<PageBannerContextValue | null>(null);
+
+function usePageBannerContext(consumer: string) {
+  const context = React.useContext(PageBannerContext);
+
+  if (!context) {
+    throw new Error(`<${consumer}/> must be rendered inside <PageBannerRoot/>.`);
+  }
+
+  return context;
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 차이:
+ * - `asChild`와 DOM 이벤트 대신 Lynx native `<view>`와 `bindtap`을 사용합니다.
+ * - 웹 focus ring과 동적 scale feedback은 지원하지 않습니다.
+ */
+export interface PageBannerRootProps
+  extends Omit<PageBannerVariantProps, "pressed" | "closeButtonPressed">,
+    LynxStyledElementProps,
+    LynxPressableProps,
+    LynxAccessibilityProps {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onDismiss?: () => void;
+}
+
+export const PageBannerRoot = React.forwardRef<unknown, PageBannerRootProps>((props, ref) => {
+  if (
+    process.env.NODE_ENV !== "production" &&
+    props.variant === "solid" &&
+    props.tone === "magic"
+  ) {
+    console.error(
+      '`magic` tone is not available for `solid` variant in PageBanner components. Please use variant="weak" or a different tone instead.',
+    );
+  }
+
+  const [variantProps, otherProps] = pageBanner.splitVariantProps(props);
+  const {
+    children,
+    className,
+    style,
+    defaultOpen = true,
+    open: openProp,
+    onDismiss,
+    bindtap,
+    "main-thread:bindtap": mainThreadBindtap,
+    "accessibility-element": accessibilityElement,
+    "accessibility-traits": accessibilityTraits,
+    ...nativeProps
+  } = otherProps;
+  const [open, setOpen] = useControllableState({
+    value: openProp,
+    defaultValue: defaultOpen,
+  });
+  const isInteractive = bindtap != null || mainThreadBindtap != null;
+  const pressTap = usePressTap({
+    disabled: !isInteractive,
+    onTap: bindtap,
+    mainThreadOnTap: mainThreadBindtap,
+  });
+  const classNames = pageBanner({ ...variantProps, pressed: pressTap.pressed });
+  const dismiss = useMemoizedFn(() => {
+    if (!open) return;
+
+    setOpen(false);
+    onDismiss?.();
+  });
+  const contextValue = React.useMemo(() => ({ dismiss }), [dismiss]);
+  const iconSlotContextValue = React.useMemo(
+    () => ({
+      classNames: {
+        prefixIcon: classNames.prefixIcon,
+        suffixIcon: classNames.suffixIcon,
+      },
+      deps: [variantProps.tone ?? "neutral", variantProps.variant ?? "weak", pressTap.pressed],
+    }),
+    [
+      classNames.prefixIcon,
+      classNames.suffixIcon,
+      pressTap.pressed,
+      variantProps.tone,
+      variantProps.variant,
+    ],
+  );
+
+  if (!open) return null;
+
+  return (
+    <PageBannerContext.Provider value={contextValue}>
+      <ClassNamesProvider value={classNames}>
+        <PropsProvider value={variantProps}>
+          <IconSlotProvider value={iconSlotContextValue}>
+            <view
+              {...(ref ? { ref: ref as LynxViewRef } : {})}
+              {...nativeProps}
+              {...(isInteractive ? pressTap : {})}
+              accessibility-element={accessibilityElement ?? (isInteractive ? true : undefined)}
+              accessibility-traits={accessibilityTraits ?? (isInteractive ? "button" : undefined)}
+              className={clsx(classNames.root, className)}
+              style={style}
+            >
+              {children}
+            </view>
+          </IconSlotProvider>
+        </PropsProvider>
+      </ClassNamesProvider>
+    </PageBannerContext.Provider>
+  );
+});
+PageBannerRoot.displayName = "PageBannerRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PageBannerContentProps extends LynxStyledElementProps, LynxAccessibilityProps {}
+
+export const PageBannerContent = React.forwardRef<unknown, PageBannerContentProps>((props, ref) => {
+  const { children, className, style, ...nativeProps } = props;
+  const classNames = useClassNames();
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      className={clsx(classNames.content, className)}
+      style={style}
+    >
+      {children}
+    </view>
+  );
+});
+PageBannerContent.displayName = "PageBannerContent";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PageBannerBodyProps extends LynxStyledElementProps, LynxAccessibilityProps {}
+
+export const PageBannerBody = React.forwardRef<unknown, PageBannerBodyProps>((props, ref) => {
+  const { children, className, style, ...nativeProps } = props;
+  const classNames = useClassNames();
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...nativeProps}
+      className={clsx(classNames.body, className)}
+      style={style}
+    >
+      {children}
+    </text>
+  );
+});
+PageBannerBody.displayName = "PageBannerBody";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PageBannerTitleProps extends LynxStyledElementProps, LynxAccessibilityProps {}
+
+export const PageBannerTitle = React.forwardRef<unknown, PageBannerTitleProps>((props, ref) => {
+  const { children, className, style, ...nativeProps } = props;
+  const classNames = useClassNames();
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...nativeProps}
+      className={clsx(classNames.title, className)}
+      style={style}
+    >
+      {children}
+      {"  "}
+    </text>
+  );
+});
+PageBannerTitle.displayName = "PageBannerTitle";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PageBannerDescriptionProps
+  extends LynxStyledElementProps,
+    LynxAccessibilityProps {}
+
+export const PageBannerDescription = React.forwardRef<unknown, PageBannerDescriptionProps>(
+  (props, ref) => {
+    const { children, className, style, ...nativeProps } = props;
+    const classNames = useClassNames();
+
+    return (
+      <text
+        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        {...nativeProps}
+        className={clsx(classNames.description, className)}
+        style={style}
+      >
+        {children}
+      </text>
+    );
+  },
+);
+PageBannerDescription.displayName = "PageBannerDescription";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PageBannerButtonProps
+  extends LynxStyledElementProps,
+    LynxPressableProps,
+    LynxAccessibilityProps {}
+
+export const PageBannerButton = React.forwardRef<unknown, PageBannerButtonProps>((props, ref) => {
+  const {
+    children,
+    className,
+    style,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-traits": accessibilityTraits = "button",
+    ...nativeProps
+  } = props;
+  const classNames = useClassNames();
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...nativeProps}
+      accessibility-element={accessibilityElement}
+      accessibility-traits={accessibilityTraits}
+      className={clsx(classNames.button, className)}
+      style={style}
+    >
+      {children}
+    </text>
+  );
+});
+PageBannerButton.displayName = "PageBannerButton";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PageBannerCloseButtonProps
+  extends LynxStyledElementProps,
+    LynxPressableProps,
+    LynxAccessibilityProps {}
+
+export const PageBannerCloseButton = React.forwardRef<unknown, PageBannerCloseButtonProps>(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      style,
+      bindtap,
+      "main-thread:bindtap": mainThreadBindtap,
+      "accessibility-element": accessibilityElement = true,
+      "accessibility-label": accessibilityLabel,
+      "accessibility-traits": accessibilityTraits = "button",
+      ...nativeProps
+    } = props;
+    const parentVariantProps = useProps() ?? {};
+    const { dismiss } = usePageBannerContext("PageBannerCloseButton");
+    const handleTap = useMemoizedFn<TapHandler>((event) => {
+      bindtap?.(event);
+      dismiss();
+    });
+    const pressTap = usePressTap({
+      onTap: handleTap,
+      mainThreadOnTap: mainThreadBindtap,
+    });
+    const classNames = pageBanner({
+      ...parentVariantProps,
+      closeButtonPressed: pressTap.pressed,
+    });
+    const iconSlotContextValue = React.useMemo(
+      () => ({
+        classNames: { suffixIcon: classNames.closeButtonIcon },
+        deps: [
+          parentVariantProps.tone ?? "neutral",
+          parentVariantProps.variant ?? "weak",
+          pressTap.pressed,
+        ],
+      }),
+      [
+        classNames.closeButtonIcon,
+        parentVariantProps.tone,
+        parentVariantProps.variant,
+        pressTap.pressed,
+      ],
+    );
+
+    if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) {
+      console.warn("PageBannerCloseButton requires `accessibility-label` for accessibility.");
+    }
+
+    return (
+      <IconSlotProvider value={iconSlotContextValue}>
+        <view
+          {...(ref ? { ref: ref as LynxViewRef } : {})}
+          {...nativeProps}
+          {...pressTap}
+          accessibility-element={accessibilityElement}
+          accessibility-label={accessibilityLabel}
+          accessibility-traits={accessibilityTraits}
+          className={clsx(classNames.closeButton, className)}
+          style={style}
+        >
+          {children}
+        </view>
+      </IconSlotProvider>
+    );
+  },
+);
+PageBannerCloseButton.displayName = "PageBannerCloseButton";

package/src/components/PageBanner/index.ts

@@ -0,0 +1,18 @@
+export {
+  PageBannerBody,
+  PageBannerButton,
+  PageBannerCloseButton,
+  PageBannerContent,
+  PageBannerDescription,
+  PageBannerRoot,
+  PageBannerTitle,
+  type PageBannerBodyProps,
+  type PageBannerButtonProps,
+  type PageBannerCloseButtonProps,
+  type PageBannerContentProps,
+  type PageBannerDescriptionProps,
+  type PageBannerRootProps,
+  type PageBannerTitleProps,
+} from "./PageBanner";
+
+export * as PageBanner from "./PageBanner.namespace";

package/src/components/RadioGroup/RadioGroup.tsx

@@ -60,7 +60,7 @@ interface RadioGroupItemContextValue {
 
 const RadioGroupItemContext = React.createContext<RadioGroupItemContextValue | null>(null);
 
-function useRadioGroupItemContext(consumer: string): RadioGroupItemContextValue {
+export function useRadioGroupItemContext(consumer: string): RadioGroupItemContextValue {
   const ctx = React.useContext(RadioGroupItemContext);
   if (!ctx) {
     throw new Error(`<${consumer}/> must be rendered inside <RadioGroupItem/>.`);
@@ -232,6 +232,7 @@ export const RadioGroupItemControl = React.forwardRef<unknown, RadioGroupItemCon
       pressed: itemContext.pressed,
     };
     const classes = radiomark(radiomarkVariantProps);
+    const controlClassName = radio(groupContext.radioVariantProps).control;
 
     return (
       <RadiomarkControlContext.Provider
@@ -239,7 +240,7 @@ export const RadioGroupItemControl = React.forwardRef<unknown, RadioGroupItemCon
       >
         <view
           {...(ref ? { ref: ref as LynxViewRef } : {})}
-          className={clsx(classes.root, className)}
+          className={clsx(classes.root, controlClassName, className)}
           {...nativeProps}
         >
           {children}

package/src/components/SegmentedControl/SegmentedControl.namespace.ts

@@ -0,0 +1,8 @@
+export {
+  SegmentedControlIndicator as Indicator,
+  SegmentedControlItem as Item,
+  SegmentedControlRoot as Root,
+  type SegmentedControlIndicatorProps as IndicatorProps,
+  type SegmentedControlItemProps as ItemProps,
+  type SegmentedControlRootProps as RootProps,
+} from "./SegmentedControl";

package/src/components/SegmentedControl/SegmentedControl.test.tsx

@@ -0,0 +1,81 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import * as SegmentedControl from "./SegmentedControl.namespace";
+
+function BasicSegmentedControl(props: {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}) {
+  return (
+    <SegmentedControl.Root {...props} accessibility-label="정렬 기준">
+      <SegmentedControl.Item value="hot">인기순</SegmentedControl.Item>
+      <SegmentedControl.Item value="new">최신순</SegmentedControl.Item>
+      <SegmentedControl.Indicator />
+    </SegmentedControl.Root>
+  );
+}
+
+function getItem(container: HTMLElement, label: string) {
+  const item = Array.from(
+    container.querySelectorAll<HTMLElement>(".seed-segmented-control__item"),
+  ).find((element) => element.textContent === label);
+  if (!item) throw new Error(`Expected item for ${label} to exist.`);
+  return item;
+}
+
+describe("SegmentedControl", () => {
+  it("changes an uncontrolled value when an item is tapped", () => {
+    const onValueChange = vi.fn();
+    const { container } = render(
+      <BasicSegmentedControl defaultValue="hot" onValueChange={onValueChange} />,
+    );
+    const hot = getItem(container, "인기순");
+    const latest = getItem(container, "최신순");
+
+    expect(hot).toHaveAttribute("accessibility-value", "selected");
+    expect(latest).toHaveAttribute("accessibility-value", "not selected");
+
+    fireEvent.tap(latest);
+
+    expect(onValueChange).toHaveBeenCalledWith("new");
+    expect(latest).toHaveAttribute("accessibility-value", "selected");
+  });
+
+  it("does not select a disabled item", () => {
+    const onValueChange = vi.fn();
+    const { container } = render(
+      <SegmentedControl.Root defaultValue="hot" onValueChange={onValueChange}>
+        <SegmentedControl.Item value="hot">인기순</SegmentedControl.Item>
+        <SegmentedControl.Item value="new" disabled>
+          최신순
+        </SegmentedControl.Item>
+      </SegmentedControl.Root>,
+    );
+    const disabledItem = getItem(container, "최신순");
+
+    fireEvent.tap(disabledItem);
+
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(disabledItem).toHaveAttribute("accessibility-traits", "disabled");
+  });
+
+  it("keeps the press-start selection on the fading item background", () => {
+    const { container } = render(<BasicSegmentedControl defaultValue="hot" />);
+    const latest = getItem(container, "최신순");
+    const getBackground = () =>
+      latest.querySelector<HTMLElement>(".seed-segmented-control__itemBackground");
+
+    fireEvent.touchstart(latest, {});
+    expect(getBackground()).toHaveClass("seed-segmented-control__itemBackground--pressed_true");
+    expect(getBackground()).toHaveClass("seed-segmented-control__itemBackground--selected_false");
+
+    fireEvent.touchend(latest, {});
+    fireEvent.tap(latest);
+
+    expect(getBackground()).toHaveClass("seed-segmented-control__itemBackground--pressed_false");
+    expect(getBackground()).toHaveClass("seed-segmented-control__itemBackground--selected_false");
+  });
+});