@seed-design/react 2.0.4 → 2.1.0

package/src/components/Dialog/Dialog.tsx

@@ -90,8 +90,6 @@ export const DialogFooter = withContext<HTMLDivElement, DialogFooterProps>(Primi
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface DialogActionProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLButtonElement> {}
+export interface DialogActionProps extends DialogPrimitive.CloseButtonProps {}
 
 export const DialogAction = DialogPrimitive.CloseButton;

package/src/components/Dialog/index.ts

@@ -1,3 +1,8 @@
+// NOTE: dialog naming is mid-rename; rootage/vars already use the new names, recipes and react components still use the old ones.
+// Semantically (= snippet naming), this component is the AlertDialog:
+//   snippet AlertDialog → react Dialog        → recipe "dialog"         → vars alertDialog
+//   snippet Dialog      → react ContentDialog → recipe "content-dialog" → vars dialog
+
 export {
   DialogBackdrop,
   DialogPositioner,

package/src/components/QuantityPicker/QuantityPicker.namespace.ts

@@ -0,0 +1,12 @@
+export {
+  QuantityPickerRoot as Root,
+  QuantityPickerDecrementButton as DecrementButton,
+  QuantityPickerValueDisplay as ValueDisplay,
+  QuantityPickerIncrementButton as IncrementButton,
+  QuantityPickerHiddenInput as HiddenInput,
+  type QuantityPickerRootProps as RootProps,
+  type QuantityPickerDecrementButtonProps as DecrementButtonProps,
+  type QuantityPickerValueDisplayProps as ValueDisplayProps,
+  type QuantityPickerIncrementButtonProps as IncrementButtonProps,
+  type QuantityPickerHiddenInputProps as HiddenInputProps,
+} from "./QuantityPicker";

package/src/components/QuantityPicker/QuantityPicker.test.tsx

@@ -0,0 +1,108 @@
+import { render } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "bun:test";
+import { QuantityPicker } from "./index";
+
+afterEach(() => {
+  document.body.replaceChildren();
+});
+
+describe("QuantityPicker", () => {
+  it("값 표시 슬롯 양옆에 divider DOM을 배치하고 action icon slot을 연결한다", () => {
+    const { getByLabelText, getByText, container } = render(
+      <QuantityPicker.Root defaultValue={1} min={0} max={5} aria-label="수량">
+        <QuantityPicker.DecrementButton aria-label="줄이기" icon={<svg />} />
+        <QuantityPicker.ValueDisplay />
+        <QuantityPicker.IncrementButton aria-label="늘리기" icon={<svg />} />
+        <QuantityPicker.HiddenInput name="quantity" />
+      </QuantityPicker.Root>,
+    );
+
+    const valueDisplay = getByText("1").closest(".seed-quantity-picker__valueDisplay");
+    if (!valueDisplay) throw new Error("값 표시를 찾을 수 없습니다.");
+    const decrementButton = getByLabelText("줄이기");
+    const incrementButton = getByLabelText("늘리기");
+
+    expect(valueDisplay).toHaveClass("seed-quantity-picker__valueDisplay");
+    expect(valueDisplay.previousElementSibling).toHaveClass("seed-quantity-picker__divider");
+    expect(valueDisplay.nextElementSibling).toHaveClass("seed-quantity-picker__divider");
+    expect(valueDisplay.previousElementSibling?.previousElementSibling).toBe(decrementButton);
+    expect(valueDisplay.nextElementSibling?.nextElementSibling).toBe(incrementButton);
+    expect(getByLabelText("줄이기").firstElementChild).toHaveClass(
+      "seed-quantity-picker__decrementIcon",
+    );
+    expect(getByLabelText("줄이기").firstElementChild).toHaveAttribute("aria-hidden", "true");
+    expect(getByLabelText("늘리기").firstElementChild).toHaveClass(
+      "seed-quantity-picker__incrementIcon",
+    );
+    expect(container.querySelectorAll(".seed-quantity-picker__divider")).toHaveLength(2);
+  });
+
+  it("fallback children은 버튼의 접근 가능한 이름으로 유지한다", () => {
+    const { getByRole } = render(
+      <QuantityPicker.Root min={0} max={5} aria-label="수량">
+        <QuantityPicker.DecrementButton>수량 줄이기</QuantityPicker.DecrementButton>
+        <QuantityPicker.ValueDisplay />
+        <QuantityPicker.IncrementButton>수량 늘리기</QuantityPicker.IncrementButton>
+      </QuantityPicker.Root>,
+    );
+
+    expect(getByRole("button", { name: "수량 줄이기" })).toBeInTheDocument();
+    expect(getByRole("button", { name: "수량 늘리기" })).toBeInTheDocument();
+  });
+
+  it("직접 인접한 action과 값 표시 사이에만 divider를 삽입한다", () => {
+    const { container } = render(
+      <QuantityPicker.Root min={0} max={5} aria-label="수량">
+        <QuantityPicker.DecrementButton aria-label="줄이기" icon={<svg />} />
+        <QuantityPicker.ValueDisplay />
+        <QuantityPicker.HiddenInput name="quantity" />
+      </QuantityPicker.Root>,
+    );
+
+    expect(container.querySelectorAll(".seed-quantity-picker__divider")).toHaveLength(1);
+  });
+
+  it("최대값의 자릿수만큼 0으로 채운 숨김 요소로 값 표시 너비를 확보한다", () => {
+    const { container } = render(
+      <QuantityPicker.Root min={0} max={123} aria-label="수량">
+        <QuantityPicker.DecrementButton aria-label="줄이기" icon={<svg />} />
+        <QuantityPicker.ValueDisplay />
+        <QuantityPicker.IncrementButton aria-label="늘리기" icon={<svg />} />
+      </QuantityPicker.Root>,
+    );
+
+    const placeholder = container.querySelector(".seed-quantity-picker__valueDisplayPlaceholder");
+
+    expect(placeholder).toHaveAttribute("aria-hidden", "true");
+    expect(placeholder).toHaveTextContent("000");
+  });
+
+  it("숨김 요소에도 getValueText를 적용해 포매팅된 값의 너비를 확보한다", () => {
+    const { container } = render(
+      <QuantityPicker.Root
+        min={0}
+        max={123}
+        getValueText={(valueText, value) => `${valueText}개(${value.toString()})`}
+        aria-label="수량"
+      >
+        <QuantityPicker.ValueDisplay />
+      </QuantityPicker.Root>,
+    );
+
+    const placeholder = container.querySelector(".seed-quantity-picker__valueDisplayPlaceholder");
+
+    expect(placeholder).toHaveTextContent("000개(000)");
+  });
+
+  it("범위 끝에서는 해당 action icon에도 disabled state를 전달한다", () => {
+    const { getByLabelText } = render(
+      <QuantityPicker.Root min={0} max={1} value={1} aria-label="수량">
+        <QuantityPicker.DecrementButton aria-label="줄이기" icon={<svg />} />
+        <QuantityPicker.ValueDisplay />
+        <QuantityPicker.IncrementButton aria-label="늘리기" icon={<svg />} />
+      </QuantityPicker.Root>,
+    );
+
+    expect(getByLabelText("늘리기").firstElementChild).toHaveAttribute("data-disabled");
+  });
+});

package/src/components/QuantityPicker/QuantityPicker.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import {
+  QuantityPicker as QuantityPickerPrimitive,
+  useQuantityPickerContext,
+} from "@seed-design/react-quantity-picker";
+import {
+  quantityPicker,
+  type QuantityPickerVariantProps,
+} from "@seed-design/css/recipes/quantity-picker";
+import clsx from "clsx";
+import * as React from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(quantityPicker);
+const withStateProps = createWithStateProps([useQuantityPickerContext]);
+
+function isQuantityPickerButton(child: React.ReactNode) {
+  return (
+    React.isValidElement(child) &&
+    (child.type === QuantityPickerDecrementButton || child.type === QuantityPickerIncrementButton)
+  );
+}
+
+function isQuantityPickerValueDisplay(child: React.ReactNode) {
+  return React.isValidElement(child) && child.type === QuantityPickerValueDisplay;
+}
+
+function withDividers(children: React.ReactNode, dividerClassName: string) {
+  const childArray = React.Children.toArray(children);
+
+  return childArray.flatMap((child, index) => {
+    const nextChild = childArray[index + 1];
+    const shouldInsertDivider =
+      (isQuantityPickerButton(child) && isQuantityPickerValueDisplay(nextChild)) ||
+      (isQuantityPickerValueDisplay(child) && isQuantityPickerButton(nextChild));
+
+    if (!shouldInsertDivider) return child;
+
+    return [
+      child,
+      <Primitive.div
+        key={`divider-${index.toString()}`}
+        aria-hidden="true"
+        className={dividerClassName}
+      />,
+    ];
+  });
+}
+
+function getValueDisplayPlaceholder(max: number) {
+  return String(max).replace(/\d/g, "0");
+}
+
+function renderIcon(
+  icon: React.ReactNode,
+  className: string,
+  stateProps: { "data-disabled"?: string },
+  ariaHidden: boolean,
+) {
+  if (!React.isValidElement<{ className?: string }>(icon)) return icon;
+
+  return React.cloneElement(
+    icon as React.ReactElement<{
+      className?: string;
+      "aria-hidden"?: boolean;
+      "data-disabled"?: string;
+    }>,
+    {
+      ...(ariaHidden ? { "aria-hidden": true } : {}),
+      className: clsx(icon.props.className, className),
+      "data-disabled": stateProps["data-disabled"],
+    },
+  );
+}
+
+export type QuantityPickerRootProps = QuantityPickerVariantProps &
+  QuantityPickerPrimitive.RootProps;
+
+export const QuantityPickerRoot = React.forwardRef<HTMLDivElement, QuantityPickerRootProps>(
+  (props, ref) => {
+    const [variantProps, otherProps] = quantityPicker.splitVariantProps(props);
+    const {
+      children,
+      className,
+      removable: _removable,
+      removeAriaLabel: _removeAriaLabel,
+      ...rootProps
+    } = otherProps;
+    const classNames = quantityPicker(variantProps);
+    const quantityPickerRootProps: QuantityPickerPrimitive.RootProps = props.removable
+      ? {
+          ...rootProps,
+          removable: true,
+          removeAriaLabel: props.removeAriaLabel,
+        }
+      : {
+          ...rootProps,
+          removable: false,
+        };
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <QuantityPickerPrimitive.Root
+          ref={ref}
+          className={clsx(classNames.root, className)}
+          {...quantityPickerRootProps}
+        >
+          {withDividers(children, classNames.divider)}
+        </QuantityPickerPrimitive.Root>
+      </ClassNamesProvider>
+    );
+  },
+);
+QuantityPickerRoot.displayName = "QuantityPickerRoot";
+
+interface QuantityPickerButtonProps
+  extends PrimitiveProps,
+    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "type"> {
+  icon?: React.ReactNode;
+  loadingIndicator?: React.ReactNode;
+}
+
+export interface QuantityPickerDecrementButtonProps
+  extends Omit<QuantityPickerPrimitive.DecrementButtonProps, "children">,
+    QuantityPickerButtonProps {
+  removeIcon?: React.ReactNode;
+}
+
+export const QuantityPickerDecrementButton = React.forwardRef<
+  HTMLButtonElement,
+  QuantityPickerDecrementButtonProps
+>(({ children, className, icon, loadingIndicator, removeIcon, ...props }, ref) => {
+  const classNames = useClassNames();
+  const { decrementIconProps, decrementLoading, isRemoveButton } = useQuantityPickerContext();
+  const content = decrementLoading
+    ? loadingIndicator
+    : isRemoveButton
+      ? (removeIcon ?? icon)
+      : icon;
+  const contentIsIcon = content !== null && content !== undefined;
+
+  return (
+    <QuantityPickerPrimitive.DecrementButton
+      ref={ref}
+      className={clsx(classNames.decrementButton, className)}
+      {...props}
+    >
+      {renderIcon(content ?? children, classNames.decrementIcon, decrementIconProps, contentIsIcon)}
+    </QuantityPickerPrimitive.DecrementButton>
+  );
+});
+QuantityPickerDecrementButton.displayName = "QuantityPickerDecrementButton";
+
+export interface QuantityPickerValueDisplayProps
+  extends QuantityPickerPrimitive.ValueDisplayProps {}
+
+export const QuantityPickerValueDisplay = withStateProps(
+  React.forwardRef<HTMLSpanElement, QuantityPickerValueDisplayProps>(
+    ({ className, ...props }, ref) => {
+      const classNames = useClassNames();
+      const { getValueText, max, valueDisplayProps } = useQuantityPickerContext();
+      const placeholder = getValueDisplayPlaceholder(max);
+
+      return (
+        <Primitive.span
+          ref={ref}
+          {...mergeProps(valueDisplayProps, props)}
+          className={clsx(classNames.valueDisplay, className)}
+        >
+          <Primitive.span aria-hidden="true" className={classNames.valueDisplayPlaceholder}>
+            {getValueText(placeholder, placeholder)}
+          </Primitive.span>
+          <Primitive.span className={classNames.valueDisplayText}>
+            {valueDisplayProps.children}
+          </Primitive.span>
+        </Primitive.span>
+      );
+    },
+  ),
+);
+QuantityPickerValueDisplay.displayName = "QuantityPickerValueDisplay";
+
+export interface QuantityPickerIncrementButtonProps
+  extends Omit<QuantityPickerPrimitive.IncrementButtonProps, "children">,
+    QuantityPickerButtonProps {}
+
+export const QuantityPickerIncrementButton = React.forwardRef<
+  HTMLButtonElement,
+  QuantityPickerIncrementButtonProps
+>(({ children, className, icon, loadingIndicator, ...props }, ref) => {
+  const classNames = useClassNames();
+  const { incrementIconProps, incrementLoading } = useQuantityPickerContext();
+  const content = incrementLoading ? loadingIndicator : icon;
+  const contentIsIcon = content !== null && content !== undefined;
+
+  return (
+    <QuantityPickerPrimitive.IncrementButton
+      ref={ref}
+      className={clsx(classNames.incrementButton, className)}
+      {...props}
+    >
+      {renderIcon(content ?? children, classNames.incrementIcon, incrementIconProps, contentIsIcon)}
+    </QuantityPickerPrimitive.IncrementButton>
+  );
+});
+QuantityPickerIncrementButton.displayName = "QuantityPickerIncrementButton";
+
+export interface QuantityPickerHiddenInputProps extends QuantityPickerPrimitive.HiddenInputProps {}
+
+export const QuantityPickerHiddenInput = QuantityPickerPrimitive.HiddenInput;

package/src/components/QuantityPicker/index.ts

@@ -0,0 +1,14 @@
+export {
+  QuantityPickerRoot,
+  QuantityPickerDecrementButton,
+  QuantityPickerValueDisplay,
+  QuantityPickerIncrementButton,
+  QuantityPickerHiddenInput,
+  type QuantityPickerRootProps,
+  type QuantityPickerDecrementButtonProps,
+  type QuantityPickerValueDisplayProps,
+  type QuantityPickerIncrementButtonProps,
+  type QuantityPickerHiddenInputProps,
+} from "./QuantityPicker";
+
+export * as QuantityPicker from "./QuantityPicker.namespace";

package/src/components/ResponsiveDialog/ResponsiveDialog.namespace.ts

@@ -0,0 +1,28 @@
+export {
+  ResponsiveDialogAction as Action,
+  ResponsiveDialogBackdrop as Backdrop,
+  ResponsiveDialogBody as Body,
+  ResponsiveDialogContent as Content,
+  ResponsiveDialogDescription as Description,
+  ResponsiveDialogFooter as Footer,
+  ResponsiveDialogHandle as Handle,
+  ResponsiveDialogHeader as Header,
+  ResponsiveDialogPositioner as Positioner,
+  ResponsiveDialogRoot as Root,
+  ResponsiveDialogTitle as Title,
+  ResponsiveDialogTrigger as Trigger,
+  ResponsiveDialogCloseButton as CloseButton,
+  type ResponsiveDialogActionProps as ActionProps,
+  type ResponsiveDialogBackdropProps as BackdropProps,
+  type ResponsiveDialogBodyProps as BodyProps,
+  type ResponsiveDialogContentProps as ContentProps,
+  type ResponsiveDialogDescriptionProps as DescriptionProps,
+  type ResponsiveDialogFooterProps as FooterProps,
+  type ResponsiveDialogHandleProps as HandleProps,
+  type ResponsiveDialogHeaderProps as HeaderProps,
+  type ResponsiveDialogPositionerProps as PositionerProps,
+  type ResponsiveDialogRootProps as RootProps,
+  type ResponsiveDialogTitleProps as TitleProps,
+  type ResponsiveDialogTriggerProps as TriggerProps,
+  type ResponsiveDialogCloseButtonProps as CloseButtonProps,
+} from "./ResponsiveDialog";