@seed-design/lynx-react 0.5.2 → 0.6.0

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/>.`);

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");
+  });
+});

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,236 @@
+import { segmentedControl } from "@seed-design/lynx-css/recipes/segmented-control";
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+
+import { useControllableState } from "../../hooks/useControllableState";
+import { usePressTap } from "../../hooks/usePressTap";
+import type {
+  LynxAccessibilityProps,
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxViewProps,
+  LynxViewRef,
+} from "../../types";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+
+interface SegmentedControlContextValue {
+  value: string | undefined;
+  disabled: boolean;
+  items: string[];
+  selectValue: (value: string) => void;
+  registerItem: (value: string) => () => void;
+}
+
+const SegmentedControlContext = React.createContext<SegmentedControlContextValue | null>(null);
+const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(segmentedControl);
+
+function useSegmentedControlContext(consumer: string) {
+  const context = React.useContext(SegmentedControlContext);
+  if (!context) {
+    throw new Error(`<${consumer}/> must be rendered inside <SegmentedControlRoot/>.`);
+  }
+  return context;
+}
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HiddenInput, name, form: Lynx에 HTML form 제출 모델이 없음
+ * - focus, focusVisible: Lynx에 키보드 포커스 모델이 없음
+ * - raw DOM change event: 선택 변경은 onValueChange로 노출
+ */
+export interface SegmentedControlRootProps extends LynxStyledElementProps, LynxAccessibilityProps {
+  value?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  onValueChange?: (value: string) => void;
+}
+
+export const SegmentedControlRoot = React.forwardRef<unknown, SegmentedControlRootProps>(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      style,
+      value: valueProp,
+      defaultValue,
+      disabled = false,
+      onValueChange,
+      "accessibility-element": accessibilityElement = true,
+      "accessibility-role-description": accessibilityRoleDescription = "radiogroup",
+      ...nativeProps
+    } = props;
+    const [value, setValue] = useControllableState<string | undefined>({
+      value: valueProp,
+      defaultValue,
+      onChange(nextValue) {
+        "background only";
+        if (nextValue !== undefined) onValueChange?.(nextValue);
+      },
+    });
+    const [items, setItems] = React.useState<string[]>([]);
+
+    const registerItem = React.useCallback((itemValue: string) => {
+      setItems((current) => {
+        if (current.includes(itemValue)) return current;
+        return [...current, itemValue];
+      });
+      return () => {
+        "background only";
+        setItems((current) => current.filter((item) => item !== itemValue));
+      };
+    }, []);
+
+    const selectValue = React.useCallback(
+      (nextValue: string) => {
+        if (!disabled) setValue(nextValue);
+      },
+      [disabled, setValue],
+    );
+    const selectedIndex = items.indexOf(value ?? "");
+    const classNames = segmentedControl({ hasSelection: selectedIndex >= 0 });
+    const contextValue = React.useMemo<SegmentedControlContextValue>(
+      () => ({
+        value,
+        disabled,
+        items,
+        selectValue,
+        registerItem,
+      }),
+      [value, disabled, items, selectValue, registerItem],
+    );
+
+    return (
+      <SegmentedControlContext.Provider value={contextValue}>
+        <ClassNamesProvider value={classNames}>
+          <view
+            {...(ref ? { ref: ref as LynxViewRef } : {})}
+            {...nativeProps}
+            accessibility-element={accessibilityElement}
+            accessibility-role-description={accessibilityRoleDescription}
+            className={clsx(classNames.root, className)}
+            style={
+              {
+                "--segment-count": Math.max(items.length, 1).toString(),
+                "--segment-index": Math.max(selectedIndex, 0).toString(),
+                ...style,
+              } as LynxViewProps["style"]
+            }
+          >
+            {children}
+          </view>
+        </ClassNamesProvider>
+      </SegmentedControlContext.Provider>
+    );
+  },
+);
+SegmentedControlRoot.displayName = "SegmentedControlRoot";
+
+export interface SegmentedControlItemProps
+  extends Omit<LynxStyledElementProps, "children">,
+    LynxAccessibilityProps,
+    LynxPressableProps {
+  children: string | number;
+  value: string;
+  disabled?: boolean;
+}
+
+export const SegmentedControlItem = React.forwardRef<unknown, SegmentedControlItemProps>(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      style,
+      value: itemValue,
+      disabled: itemDisabled = false,
+      bindtap,
+      "main-thread:bindtap": mainThreadBindtap,
+      "accessibility-element": accessibilityElement = true,
+      "accessibility-label": accessibilityLabel,
+      "accessibility-role-description": accessibilityRoleDescription = "radio",
+      "accessibility-traits": accessibilityTraits,
+      ...nativeProps
+    } = props;
+    const context = useSegmentedControlContext("SegmentedControlItem");
+    const disabled = context.disabled || itemDisabled;
+    const selected = context.value === itemValue;
+
+    React.useEffect(() => {
+      "background only";
+      return context.registerItem(itemValue);
+    }, [context.registerItem, itemValue]);
+
+    const handleTap = React.useCallback(
+      (...args: Parameters<NonNullable<LynxPressableProps["bindtap"]>>) => {
+        "background only";
+        if (!selected) context.selectValue(itemValue);
+        bindtap?.(...args);
+      },
+      [bindtap, context.selectValue, itemValue, selected],
+    );
+    const pressSelectionRef = React.useRef(selected);
+    const { pressed, bindtouchstart, ...pressHandlers } = usePressTap({
+      disabled,
+      onTap: handleTap,
+      mainThreadOnTap: mainThreadBindtap,
+    });
+    const handleTouchStart = React.useCallback(
+      (...args: Parameters<typeof bindtouchstart>) => {
+        pressSelectionRef.current = selected;
+        bindtouchstart(...args);
+      },
+      [bindtouchstart, selected],
+    );
+    const classes = segmentedControl({ selected, disabled, pressed });
+    const pressStartClasses = segmentedControl({
+      selected: pressSelectionRef.current,
+      disabled,
+      pressed,
+    });
+    const label =
+      typeof children === "string" || typeof children === "number" ? String(children) : undefined;
+
+    return (
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...nativeProps}
+        bindtouchstart={handleTouchStart}
+        {...pressHandlers}
+        accessibility-element={accessibilityElement}
+        accessibility-label={accessibilityLabel ?? label}
+        accessibility-role-description={accessibilityRoleDescription}
+        accessibility-value={selected ? "selected" : "not selected"}
+        accessibility-traits={
+          disabled ? "disabled" : selected ? "selected" : (accessibilityTraits ?? "button")
+        }
+        className={clsx(classes.item, className)}
+        style={style}
+      >
+        <view accessibility-elements-hidden={true} className={pressStartClasses.itemBackground} />
+        <text className={classes.label}>{children}</text>
+      </view>
+    );
+  },
+);
+SegmentedControlItem.displayName = "SegmentedControlItem";
+
+export interface SegmentedControlIndicatorProps extends LynxStyledElementProps {}
+
+export const SegmentedControlIndicator = React.forwardRef<unknown, SegmentedControlIndicatorProps>(
+  (props, ref) => {
+    const { className, style, ...nativeProps } = props;
+    const classNames = useClassNames();
+
+    return (
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...nativeProps}
+        accessibility-elements-hidden={true}
+        className={clsx(classNames.indicator, className)}
+        style={style}
+      />
+    );
+  },
+);
+SegmentedControlIndicator.displayName = "SegmentedControlIndicator";