@seed-design/lynx-react 0.5.1 → 0.6.0

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

package/src/components/SegmentedControl/index.ts

@@ -0,0 +1,10 @@
+export {
+  SegmentedControlIndicator,
+  SegmentedControlItem,
+  SegmentedControlRoot,
+  type SegmentedControlIndicatorProps,
+  type SegmentedControlItemProps,
+  type SegmentedControlRootProps,
+} from "./SegmentedControl";
+
+export * as SegmentedControl from "./SegmentedControl.namespace";

package/src/components/SelectBox/CheckSelectBox.namespace.ts

@@ -0,0 +1,22 @@
+export {
+  CheckSelectBoxBody as Body,
+  CheckSelectBoxCheckmarkControl as CheckmarkControl,
+  CheckSelectBoxCheckmarkIcon as CheckmarkIcon,
+  CheckSelectBoxContent as Content,
+  CheckSelectBoxDescription as Description,
+  CheckSelectBoxFooter as Footer,
+  CheckSelectBoxGroup as Group,
+  CheckSelectBoxLabel as Label,
+  CheckSelectBoxRoot as Root,
+  CheckSelectBoxTrigger as Trigger,
+  type CheckSelectBoxBodyProps as BodyProps,
+  type CheckSelectBoxCheckmarkControlProps as CheckmarkControlProps,
+  type CheckSelectBoxCheckmarkIconProps as CheckmarkIconProps,
+  type CheckSelectBoxContentProps as ContentProps,
+  type CheckSelectBoxDescriptionProps as DescriptionProps,
+  type CheckSelectBoxFooterProps as FooterProps,
+  type CheckSelectBoxGroupProps as GroupProps,
+  type CheckSelectBoxLabelProps as LabelProps,
+  type CheckSelectBoxRootProps as RootProps,
+  type CheckSelectBoxTriggerProps as TriggerProps,
+} from "./SelectBox";

package/src/components/SelectBox/RadioSelectBox.namespace.ts

@@ -0,0 +1,18 @@
+export {
+  RadioSelectBoxBody as Body,
+  RadioSelectBoxContent as Content,
+  RadioSelectBoxDescription as Description,
+  RadioSelectBoxFooter as Footer,
+  RadioSelectBoxGroup as Group,
+  RadioSelectBoxItem as Item,
+  RadioSelectBoxLabel as Label,
+  RadioSelectBoxTrigger as Trigger,
+  type RadioSelectBoxBodyProps as BodyProps,
+  type RadioSelectBoxContentProps as ContentProps,
+  type RadioSelectBoxDescriptionProps as DescriptionProps,
+  type RadioSelectBoxFooterProps as FooterProps,
+  type RadioSelectBoxGroupProps as GroupProps,
+  type RadioSelectBoxItemProps as ItemProps,
+  type RadioSelectBoxLabelProps as LabelProps,
+  type RadioSelectBoxTriggerProps as TriggerProps,
+} from "./SelectBox";

package/src/components/SelectBox/SelectBox.test.tsx

@@ -0,0 +1,169 @@
+import "@testing-library/jest-dom";
+import { act, fireEvent, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import { RadioGroup } from "../RadioGroup";
+import { CheckSelectBox, RadioSelectBox } from "./index";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+  if (!root) throw new Error("Expected Lynx render root to exist.");
+  return root;
+}
+
+function CheckItem() {
+  return (
+    <CheckSelectBox.Root accessibility-label="마케팅 정보 수신">
+      <CheckSelectBox.Trigger>
+        <CheckSelectBox.Content>
+          <CheckSelectBox.Body>
+            <CheckSelectBox.Label>마케팅 정보 수신</CheckSelectBox.Label>
+          </CheckSelectBox.Body>
+        </CheckSelectBox.Content>
+      </CheckSelectBox.Trigger>
+      <CheckSelectBox.Footer className="check-footer">
+        <text>혜택 알림을 받습니다.</text>
+      </CheckSelectBox.Footer>
+    </CheckSelectBox.Root>
+  );
+}
+
+describe("SelectBox", () => {
+  it("lays out custom label content in a view", () => {
+    render(
+      <CheckSelectBox.Root accessibility-label="Melon New">
+        <CheckSelectBox.Trigger>
+          <CheckSelectBox.Label>
+            <text>Melon</text>
+            <view className="label-badge">
+              <text>New</text>
+            </view>
+          </CheckSelectBox.Label>
+        </CheckSelectBox.Trigger>
+      </CheckSelectBox.Root>,
+    );
+
+    const label = getRenderedRoot().querySelector<HTMLElement>(".seed-select-box__label");
+
+    expect(label?.tagName.toLowerCase()).toBe("view");
+    expect(label?.querySelector(".label-badge")).toBeInTheDocument();
+  });
+
+  it("renders an initially open footer without starting from zero height", () => {
+    render(
+      <CheckSelectBox.Root accessibility-label="마케팅 정보 수신" defaultChecked>
+        <CheckSelectBox.Trigger>
+          <CheckSelectBox.Label>마케팅 정보 수신</CheckSelectBox.Label>
+        </CheckSelectBox.Trigger>
+        <CheckSelectBox.Footer className="check-footer">
+          <text>혜택 알림을 받습니다.</text>
+        </CheckSelectBox.Footer>
+      </CheckSelectBox.Root>,
+    );
+
+    const root = getRenderedRoot();
+    const footer = root.querySelector<HTMLElement>(".check-footer");
+    const footerInner = footer?.querySelector<HTMLElement>(".seed-select-box__footerInner");
+
+    expect(footer).toHaveStyle({ height: "auto" });
+
+    act(() => {
+      fireEvent.layoutchange(footerInner as HTMLElement, { height: 48 });
+    });
+
+    expect(footer).toHaveStyle({ height: "48px" });
+  });
+
+  it("toggles a check item and reveals the measured footer", () => {
+    const onCheckedChange = vi.fn();
+    render(
+      <CheckSelectBox.Root accessibility-label="마케팅 정보 수신" onCheckedChange={onCheckedChange}>
+        <CheckSelectBox.Trigger>
+          <CheckSelectBox.Label>마케팅 정보 수신</CheckSelectBox.Label>
+        </CheckSelectBox.Trigger>
+        <CheckSelectBox.Footer className="check-footer">
+          <text>혜택 알림을 받습니다.</text>
+        </CheckSelectBox.Footer>
+      </CheckSelectBox.Root>,
+    );
+
+    const root = getRenderedRoot();
+    const interactionRoot = root.querySelector<HTMLElement>(".seed-select-box__interactionRoot");
+    const surface = root.querySelector<HTMLElement>(".seed-select-box__root");
+    const footer = root.querySelector<HTMLElement>(".check-footer");
+    const footerInner = footer?.querySelector<HTMLElement>(".seed-select-box__footerInner");
+
+    expect(surface).toHaveAttribute("accessibility-value", "not selected");
+    expect(footer).toHaveStyle({ height: "0px" });
+    expect(footer).toHaveAttribute("accessibility-elements-hidden", "true");
+
+    act(() => {
+      fireEvent.layoutchange(footerInner as HTMLElement, { height: 48 });
+    });
+    fireEvent.tap(interactionRoot as HTMLElement);
+
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+    expect(surface).toHaveAttribute("accessibility-value", "selected");
+    expect(footer).toHaveStyle({ height: "48px" });
+    expect(footer).toHaveAttribute("accessibility-elements-hidden", "false");
+  });
+
+  it("uses vertical item layout for a multi-column group", () => {
+    render(
+      <CheckSelectBox.Group columns={2} className="select-box-group">
+        <CheckItem />
+        <CheckItem />
+      </CheckSelectBox.Group>,
+    );
+
+    const root = getRenderedRoot();
+    const group = root.querySelector<HTMLElement>(".select-box-group");
+    const trigger = root.querySelector<HTMLElement>(".seed-select-box__trigger");
+
+    expect(group).toHaveStyle({ gridTemplateColumns: "repeat(2, 1fr)" });
+    expect(trigger?.className).toContain("seed-select-box__trigger--layout_vertical");
+  });
+
+  it("selects one radio item and ignores a disabled item", () => {
+    const onValueChange = vi.fn();
+    render(
+      <RadioGroup.Root defaultValue="first" onValueChange={onValueChange}>
+        <RadioSelectBox.Group>
+          <RadioSelectBox.Item value="first" accessibility-label="첫 번째">
+            <RadioSelectBox.Trigger>
+              <RadioSelectBox.Label>첫 번째</RadioSelectBox.Label>
+            </RadioSelectBox.Trigger>
+          </RadioSelectBox.Item>
+          <RadioSelectBox.Item value="second" accessibility-label="두 번째">
+            <RadioSelectBox.Trigger>
+              <RadioSelectBox.Label>두 번째</RadioSelectBox.Label>
+            </RadioSelectBox.Trigger>
+          </RadioSelectBox.Item>
+          <RadioSelectBox.Item value="disabled" accessibility-label="비활성" disabled>
+            <RadioSelectBox.Trigger>
+              <RadioSelectBox.Label>비활성</RadioSelectBox.Label>
+            </RadioSelectBox.Trigger>
+          </RadioSelectBox.Item>
+        </RadioSelectBox.Group>
+      </RadioGroup.Root>,
+    );
+
+    const root = getRenderedRoot();
+    const interactionRoots = root.querySelectorAll<HTMLElement>(
+      ".seed-select-box__interactionRoot",
+    );
+    const surfaces = root.querySelectorAll<HTMLElement>(".seed-select-box__root");
+
+    expect(surfaces[0]).toHaveAttribute("accessibility-value", "selected");
+    expect(surfaces[1]).toHaveAttribute("accessibility-value", "not selected");
+
+    fireEvent.tap(interactionRoots[1]);
+    expect(onValueChange).toHaveBeenCalledWith("second");
+    expect(surfaces[0]).toHaveAttribute("accessibility-value", "not selected");
+    expect(surfaces[1]).toHaveAttribute("accessibility-value", "selected");
+
+    fireEvent.tap(interactionRoots[2]);
+    expect(onValueChange).toHaveBeenCalledTimes(1);
+    expect(surfaces[2]).toHaveAttribute("accessibility-traits", "disabled");
+  });
+});