@seed-design/lynx-react 0.4.1 → 0.5.0

package/src/components/Checkbox/Checkbox.tsx

@@ -38,6 +38,8 @@ interface CheckboxContextValue {
   indeterminate: boolean;
   disabled: boolean;
   pressed: boolean;
+  pressStartChecked: boolean;
+  pressStartIndeterminate: boolean;
   checkboxVariantProps: CheckboxVariantProps;
   checkmarkVariantProps: CheckmarkVariantProps;
   toggle: () => void;
@@ -103,10 +105,18 @@ export const CheckboxRoot = React.forwardRef<unknown, CheckboxRootProps>((props,
 
   const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
 
-  const { pressed, ...pressHandlers } = usePressTap({
+  const pressSelectionRef = React.useRef({ checked, indeterminate });
+  const { pressed, bindtouchstart, ...pressHandlers } = usePressTap({
     disabled,
     onTap: toggle,
   });
+  const handleTouchStart = React.useCallback(
+    (...args: Parameters<typeof bindtouchstart>) => {
+      pressSelectionRef.current = { checked, indeterminate };
+      bindtouchstart(...args);
+    },
+    [bindtouchstart, checked, indeterminate],
+  );
 
   const rootClassName = checkbox({ ...checkboxVariantProps, disabled }).root;
 
@@ -116,6 +126,8 @@ export const CheckboxRoot = React.forwardRef<unknown, CheckboxRootProps>((props,
       indeterminate,
       disabled,
       pressed,
+      pressStartChecked: pressSelectionRef.current.checked,
+      pressStartIndeterminate: pressSelectionRef.current.indeterminate,
       checkboxVariantProps,
       checkmarkVariantProps,
       toggle,
@@ -136,6 +148,7 @@ export const CheckboxRoot = React.forwardRef<unknown, CheckboxRootProps>((props,
       <view
         {...(ref ? { ref: ref as LynxViewRef } : {})}
         className={clsx(rootClassName, className)}
+        bindtouchstart={handleTouchStart}
         {...pressHandlers}
         {...nativeProps}
       >
@@ -166,15 +179,36 @@ export const CheckboxControl = React.forwardRef<unknown, CheckboxControlProps>((
   };
   const classes = checkmark(checkmarkVariantProps);
 
+  // Lynx는 opaque color와 transparent black 사이의 background-color를 보간할 때
+  // 중간 RGB가 검게 탁해진다. ghost root는 투명 상태로 고정하고 별도 배경의
+  // opacity만 전환한다.
+  const pressStartClasses = checkmark({
+    ...checkmarkVariantProps,
+    checked: context.pressStartChecked,
+    indeterminate: context.pressStartIndeterminate,
+    pressed: context.pressed,
+  });
+  const isGhost = checkmarkVariantProps.variant === "ghost";
+  // ghost root 상태를 고정하고 overlay opacity만 전환한다.
+  const rootClassName = isGhost
+    ? checkmark({
+        ...checkmarkVariantProps,
+        checked: false,
+        indeterminate: false,
+        pressed: false,
+      }).root
+    : classes.root;
+
   return (
     <CheckmarkControlContext.Provider
       value={{ iconClassName: classes.icon, checkmarkVariantProps }}
     >
       <view
         {...(ref ? { ref: ref as LynxViewRef } : {})}
-        className={clsx(classes.root, className)}
+        className={clsx(rootClassName, className)}
         {...nativeProps}
       >
+        {isGhost ? <view className={pressStartClasses.background} /> : null}
         {children}
       </view>
     </CheckmarkControlContext.Provider>

package/src/components/Chip/Chip.namespace.ts

@@ -0,0 +1,20 @@
+export {
+  ChipButton as Button,
+  ChipLabel as Label,
+  ChipPrefixAvatar as PrefixAvatar,
+  ChipPrefixIcon as PrefixIcon,
+  ChipRadioItem as RadioItem,
+  ChipRadioRoot as RadioRoot,
+  ChipRoot as Root,
+  ChipSuffixIcon as SuffixIcon,
+  ChipToggle as Toggle,
+  type ChipButtonProps as ButtonProps,
+  type ChipLabelProps as LabelProps,
+  type ChipPrefixAvatarProps as PrefixAvatarProps,
+  type ChipPrefixIconProps as PrefixIconProps,
+  type ChipRadioItemProps as RadioItemProps,
+  type ChipRadioRootProps as RadioRootProps,
+  type ChipRootProps as RootProps,
+  type ChipSuffixIconProps as SuffixIconProps,
+  type ChipToggleProps as ToggleProps,
+} from "./Chip";

package/src/components/Chip/Chip.test.tsx

@@ -0,0 +1,113 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import * as Chip from "./Chip.namespace";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function getChipRoot() {
+  const root = getRenderedRoot();
+
+  if (root.classList.contains("seed-chip__root")) return root;
+
+  const chipRoot = root.querySelector<HTMLElement>(".seed-chip__root");
+  if (!chipRoot) throw new Error("Expected Chip root to exist.");
+
+  return chipRoot;
+}
+
+describe("Chip", () => {
+  it("renders the button and label recipe slots", () => {
+    render(
+      <Chip.Button size="large" variant="outlineStrong">
+        <Chip.Label>버튼 칩</Chip.Label>
+      </Chip.Button>,
+    );
+
+    const root = getChipRoot();
+    const label = root.querySelector(".seed-chip__label");
+
+    expect(root).toHaveClass("seed-chip__root--size_large");
+    expect(root).toHaveClass("seed-chip__root--variant_outlineStrong");
+    expect(label).toHaveTextContent("버튼 칩");
+    expect(label).toHaveClass("seed-chip__label--size_large");
+  });
+
+  it("toggles uncontrolled selected state", () => {
+    const onCheckedChange = vi.fn();
+    render(
+      <Chip.Toggle onCheckedChange={onCheckedChange}>
+        <Chip.Label>토글 칩</Chip.Label>
+      </Chip.Toggle>,
+    );
+
+    const root = getChipRoot();
+    expect(root).toHaveClass("seed-chip__root--selected_false");
+
+    fireEvent.tap(root);
+
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    expect(getChipRoot()).toHaveClass("seed-chip__root--selected_true");
+    expect(getChipRoot()).toHaveAttribute("accessibility-traits", "selected");
+  });
+
+  it("does not toggle when disabled", () => {
+    const onCheckedChange = vi.fn();
+    render(
+      <Chip.Toggle disabled onCheckedChange={onCheckedChange}>
+        <Chip.Label>비활성 칩</Chip.Label>
+      </Chip.Toggle>,
+    );
+
+    const root = getChipRoot();
+    fireEvent.tap(root);
+
+    expect(onCheckedChange).not.toHaveBeenCalled();
+    expect(root).toHaveClass("seed-chip__root--disabled_true");
+    expect(root).toHaveAttribute("accessibility-traits", "disabled");
+  });
+
+  it("selects one radio item and reports the value", () => {
+    const onValueChange = vi.fn();
+    render(
+      <Chip.RadioRoot defaultValue="first" onValueChange={onValueChange}>
+        <Chip.RadioItem value="first">
+          <Chip.Label>첫 번째</Chip.Label>
+        </Chip.RadioItem>
+        <Chip.RadioItem value="second">
+          <Chip.Label>두 번째</Chip.Label>
+        </Chip.RadioItem>
+      </Chip.RadioRoot>,
+    );
+
+    const roots = getRenderedRoot().querySelectorAll(".seed-chip__root");
+    expect(roots[0]).toHaveClass("seed-chip__root--selected_true");
+    expect(roots[1]).toHaveClass("seed-chip__root--selected_false");
+
+    fireEvent.tap(roots[1] as HTMLElement);
+
+    expect(onValueChange).toHaveBeenCalledWith("second");
+    const updatedRoots = getRenderedRoot().querySelectorAll(".seed-chip__root");
+    expect(updatedRoots[0]).toHaveClass("seed-chip__root--selected_false");
+    expect(updatedRoots[1]).toHaveClass("seed-chip__root--selected_true");
+  });
+
+  it("requires radio items to be rendered inside a radio root", () => {
+    expect(() => {
+      render(
+        <Chip.RadioItem value="orphan">
+          <Chip.Label>고립된 칩</Chip.Label>
+        </Chip.RadioItem>,
+      );
+    }).toThrow(/must be rendered inside <ChipRadioRoot\/>/);
+  });
+});

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,373 @@
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+
+import { chip, type ChipVariantProps } from "@seed-design/lynx-css/recipes/chip";
+
+import { useControllableState } from "../../hooks/useControllableState";
+import { usePressTap } from "../../hooks/usePressTap";
+import type {
+  LynxAccessibilityProps,
+  LynxPressableProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewRef,
+} from "../../types";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import {
+  IconRequired,
+  IconSlotProvider,
+  PrefixIcon,
+  SuffixIcon,
+  type PrefixIconProps,
+  type SuffixIconProps,
+} from "../Icon/Icon";
+
+const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(chip);
+
+type ChipPublicVariantProps = Omit<ChipVariantProps, "selected" | "pressed">;
+
+interface ChipRootViewProps
+  extends ChipVariantProps,
+    LynxStyledElementProps,
+    LynxPressableProps,
+    LynxAccessibilityProps {}
+
+const ChipRootView = React.forwardRef<unknown, ChipRootViewProps>((props, ref) => {
+  const [variantProps, otherProps] = chip.splitVariantProps(props);
+  const classes = chip(variantProps);
+  const { children, className, ...nativeProps } = otherProps;
+  const iconSlotContextValue = React.useMemo(
+    () => ({
+      classNames: {
+        icon: classes.icon,
+        prefixIcon: classes.prefixIcon,
+        suffixIcon: classes.suffixIcon,
+      },
+      deps: [
+        variantProps.variant,
+        variantProps.size,
+        variantProps.layout,
+        variantProps.selected,
+        variantProps.pressed,
+        variantProps.disabled,
+      ],
+    }),
+    [
+      classes.icon,
+      classes.prefixIcon,
+      classes.suffixIcon,
+      variantProps.variant,
+      variantProps.size,
+      variantProps.layout,
+      variantProps.selected,
+      variantProps.pressed,
+      variantProps.disabled,
+    ],
+  );
+
+  return (
+    <ClassNamesProvider value={classes}>
+      <IconSlotProvider value={iconSlotContextValue}>
+        <IconRequired enabled={variantProps.layout === "iconOnly"}>
+          <view
+            {...(ref ? { ref: ref as LynxViewRef } : {})}
+            className={clsx(classes.root, className)}
+            {...nativeProps}
+          >
+            {children}
+          </view>
+        </IconRequired>
+      </IconSlotProvider>
+    </ClassNamesProvider>
+  );
+});
+ChipRootView.displayName = "ChipRootView";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HTML button 속성 및 native form 제출
+ * - 키보드 focus / focusVisible
+ * - `asChild`
+ */
+export interface ChipButtonProps
+  extends ChipPublicVariantProps,
+    LynxStyledElementProps,
+    LynxPressableProps,
+    LynxAccessibilityProps {
+  disabled?: boolean;
+}
+
+export const ChipButton = React.forwardRef<unknown, ChipButtonProps>((props, ref) => {
+  const {
+    bindtap,
+    "main-thread:bindtap": mainThreadBindtap,
+    disabled = false,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-traits": accessibilityTraits,
+    ...restProps
+  } = props;
+  const { pressed, ...pressHandlers } = usePressTap({
+    disabled,
+    onTap: bindtap,
+    mainThreadOnTap: mainThreadBindtap,
+  });
+
+  return (
+    <ChipRootView
+      ref={ref}
+      {...restProps}
+      disabled={disabled}
+      selected={false}
+      pressed={pressed}
+      accessibility-element={accessibilityElement}
+      accessibility-traits={disabled ? "disabled" : (accessibilityTraits ?? "button")}
+      {...pressHandlers}
+    />
+  );
+});
+ChipButton.displayName = "ChipButton";
+
+/** React `Chip.Root`에 대응하는 기본 action chip입니다. */
+export interface ChipRootProps extends ChipButtonProps {}
+
+export const ChipRoot = React.forwardRef<unknown, ChipRootProps>((props, ref) => (
+  <ChipButton ref={ref} {...props} />
+));
+ChipRoot.displayName = "ChipRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HiddenInput / inputProps / name / value: Lynx에 HTML form 제출 모델이 없음
+ * - raw DOM `onChange`: `onCheckedChange`로 대체
+ */
+export interface ChipToggleProps extends ChipButtonProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export const ChipToggle = React.forwardRef<unknown, ChipToggleProps>((props, ref) => {
+  const {
+    checked: checkedProp,
+    defaultChecked = false,
+    onCheckedChange,
+    bindtap,
+    "main-thread:bindtap": mainThreadBindtap,
+    disabled = false,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-traits": accessibilityTraits,
+    ...restProps
+  } = props;
+  const [checked, setChecked] = useControllableState({
+    value: checkedProp,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange,
+  });
+  const handleTap = React.useCallback(
+    (...args: Parameters<NonNullable<LynxPressableProps["bindtap"]>>) => {
+      setChecked(!checked);
+      bindtap?.(...args);
+    },
+    [bindtap, checked, setChecked],
+  );
+  const { pressed, ...pressHandlers } = usePressTap({
+    disabled,
+    onTap: handleTap,
+    mainThreadOnTap: mainThreadBindtap,
+  });
+
+  return (
+    <ChipRootView
+      ref={ref}
+      {...restProps}
+      disabled={disabled}
+      selected={checked}
+      pressed={pressed}
+      accessibility-element={accessibilityElement}
+      accessibility-traits={
+        disabled ? "disabled" : checked ? "selected" : (accessibilityTraits ?? "button")
+      }
+      {...pressHandlers}
+    />
+  );
+});
+ChipToggle.displayName = "ChipToggle";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+interface ChipRadioGroupContextValue {
+  value: string | null;
+  setValue: (value: string) => void;
+  disabled: boolean;
+}
+
+const ChipRadioGroupContext = React.createContext<ChipRadioGroupContextValue | null>(null);
+
+function useChipRadioGroupContext(consumer: string): ChipRadioGroupContextValue {
+  const context = React.useContext(ChipRadioGroupContext);
+  if (!context) {
+    throw new Error(`<${consumer}/> must be rendered inside <ChipRadioRoot/>.`);
+  }
+  return context;
+}
+
+export interface ChipRadioRootProps extends LynxStyledElementProps {
+  value?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  onValueChange?: (value: string) => void;
+}
+
+export const ChipRadioRoot = React.forwardRef<unknown, ChipRadioRootProps>((props, ref) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    disabled = false,
+    onValueChange,
+    children,
+    className,
+    ...nativeProps
+  } = props;
+  const handleChange = React.useCallback(
+    (nextValue: string | null) => {
+      if (nextValue !== null) onValueChange?.(nextValue);
+    },
+    [onValueChange],
+  );
+  const [value, setValueInternal] = useControllableState<string | null>({
+    value: valueProp !== undefined ? valueProp : undefined,
+    defaultValue: defaultValue ?? null,
+    onChange: handleChange,
+  });
+  const setValue = React.useCallback(
+    (nextValue: string) => setValueInternal(nextValue),
+    [setValueInternal],
+  );
+  const contextValue = React.useMemo(
+    () => ({ value, setValue, disabled }),
+    [value, setValue, disabled],
+  );
+
+  return (
+    <ChipRadioGroupContext.Provider value={contextValue}>
+      <view {...(ref ? { ref: ref as LynxViewRef } : {})} className={className} {...nativeProps}>
+        {children}
+      </view>
+    </ChipRadioGroupContext.Provider>
+  );
+});
+ChipRadioRoot.displayName = "ChipRadioRoot";
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HiddenInput / inputProps / name / required: Lynx에 HTML form 제출 모델이 없음
+ * - raw DOM `onChange`: `Chip.RadioRoot`의 `onValueChange`로 대체
+ */
+export interface ChipRadioItemProps extends ChipButtonProps {
+  value: string;
+}
+
+export const ChipRadioItem = React.forwardRef<unknown, ChipRadioItemProps>((props, ref) => {
+  const {
+    value: itemValue,
+    disabled: itemDisabled = false,
+    bindtap,
+    "main-thread:bindtap": mainThreadBindtap,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-traits": accessibilityTraits,
+    ...restProps
+  } = props;
+  const group = useChipRadioGroupContext("ChipRadioItem");
+  const disabled = group.disabled || itemDisabled;
+  const selected = group.value === itemValue;
+  const handleTap = React.useCallback(
+    (...args: Parameters<NonNullable<LynxPressableProps["bindtap"]>>) => {
+      if (!selected) group.setValue(itemValue);
+      bindtap?.(...args);
+    },
+    [bindtap, group, itemValue, selected],
+  );
+  const { pressed, ...pressHandlers } = usePressTap({
+    disabled,
+    onTap: handleTap,
+    mainThreadOnTap: mainThreadBindtap,
+  });
+
+  return (
+    <ChipRootView
+      ref={ref}
+      {...restProps}
+      disabled={disabled}
+      selected={selected}
+      pressed={pressed}
+      accessibility-element={accessibilityElement}
+      accessibility-traits={
+        disabled ? "disabled" : selected ? "selected" : (accessibilityTraits ?? "button")
+      }
+      {...pressHandlers}
+    />
+  );
+});
+ChipRadioItem.displayName = "ChipRadioItem";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipLabelProps extends LynxStyledElementProps {}
+
+export const ChipLabel = React.forwardRef<unknown, ChipLabelProps>((props, ref) => {
+  const classes = useClassNames();
+  const { children, className, ...nativeProps } = props;
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      className={clsx(classes.label, className)}
+      {...nativeProps}
+    >
+      {children}
+    </text>
+  );
+});
+ChipLabel.displayName = "ChipLabel";
+
+export interface ChipPrefixIconProps extends PrefixIconProps {}
+
+export const ChipPrefixIcon = React.forwardRef<unknown, ChipPrefixIconProps>((props, ref) => (
+  <PrefixIcon ref={ref} {...props} />
+));
+ChipPrefixIcon.displayName = "ChipPrefixIcon";
+
+export interface ChipPrefixAvatarProps extends LynxStyledElementProps {}
+
+export const ChipPrefixAvatar = React.forwardRef<unknown, ChipPrefixAvatarProps>((props, ref) => {
+  const classes = useClassNames();
+  const { children, className, ...nativeProps } = props;
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      className={clsx(classes.prefixAvatar, className)}
+      {...nativeProps}
+    >
+      {children}
+    </view>
+  );
+});
+ChipPrefixAvatar.displayName = "ChipPrefixAvatar";
+
+export interface ChipSuffixIconProps extends SuffixIconProps {}
+
+export const ChipSuffixIcon = React.forwardRef<unknown, ChipSuffixIconProps>((props, ref) => (
+  <SuffixIcon ref={ref} {...props} />
+));
+ChipSuffixIcon.displayName = "ChipSuffixIcon";

package/src/components/Chip/index.ts

@@ -0,0 +1,22 @@
+export {
+  ChipButton,
+  ChipLabel,
+  ChipPrefixAvatar,
+  ChipPrefixIcon,
+  ChipRadioItem,
+  ChipRadioRoot,
+  ChipRoot,
+  ChipSuffixIcon,
+  ChipToggle,
+  type ChipButtonProps,
+  type ChipLabelProps,
+  type ChipPrefixAvatarProps,
+  type ChipPrefixIconProps,
+  type ChipRadioItemProps,
+  type ChipRadioRootProps,
+  type ChipRootProps,
+  type ChipSuffixIconProps,
+  type ChipToggleProps,
+} from "./Chip";
+
+export * as Chip from "./Chip.namespace";

package/src/components/Divider/Divider.test.tsx

@@ -0,0 +1,73 @@
+import "@testing-library/jest-dom";
+import { render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { Divider } from "./Divider";
+
+function getRenderedDivider() {
+  const divider = elementTree.root?.firstElementChild;
+
+  if (!divider) {
+    throw new Error("Expected Divider to render a root element.");
+  }
+
+  return divider as HTMLElement;
+}
+
+function expectStyle(style: CSSStyleDeclaration, expected: Record<string, string>) {
+  for (const [key, value] of Object.entries(expected)) {
+    expect(style.getPropertyValue(key)).toBe(value);
+  }
+}
+
+describe("Divider", () => {
+  it("renders a horizontal semantic divider by default", () => {
+    render(<Divider className="custom-divider" />);
+
+    const divider = getRenderedDivider();
+
+    expect(divider).toHaveClass("custom-divider");
+    expect(divider).toHaveAttribute("accessibility-element", "true");
+    expect(divider).toHaveAttribute("accessibility-role-description", "separator");
+    expectStyle(divider.style, {
+      width: "100%",
+      "border-color": "var(--seed-color-stroke-neutral-muted)",
+      "border-bottom-width": "1px",
+      "border-right-width": "0px",
+    });
+  });
+
+  it("supports vertical orientation, inset spacing, color, and thickness", () => {
+    render(
+      <Divider
+        orientation="vertical"
+        inset
+        color="palette.blue500"
+        thickness="2px"
+        accessibility-element={false}
+      />,
+    );
+
+    const divider = getRenderedDivider();
+
+    expect(divider).toHaveAttribute("accessibility-element", "false");
+    expectStyle(divider.style, {
+      height: "calc(100% - 32px)",
+      "border-color": "var(--seed-color-palette-blue-500)",
+      "border-bottom-width": "0px",
+      "border-right-width": "2px",
+      "margin-top": "16px",
+      "margin-bottom": "16px",
+    });
+  });
+
+  it("lets user style override the default layout style", () => {
+    render(<Divider style={{ width: "80%", marginLeft: "4px" }} inset />);
+
+    expectStyle(getRenderedDivider().style, {
+      width: "80%",
+      "margin-left": "4px",
+      "margin-right": "16px",
+    });
+  });
+});