@edux-design/buttons 0.1.3 → 0.1.4

package/src/elements/ButtonCounter.jsx

@@ -1,341 +0,0 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { cx } from "@edux-design/utils";
-
-/**
- * ButtonCounter (stepper) component.
- *
- * Renders decrement/increment buttons with a central value display.
- * Supports the same size + variant flags as the main Button.
- *
- * @typedef {React.HTMLAttributes<HTMLDivElement> & {
- *   value?: number,
- *   defaultValue?: number,
- *   onChange?: (value: number) => void,
- *   min?: number,
- *   max?: number,
- *   step?: number,
- *   children?: React.ReactNode,
- *   size?: "small"|"medium"|"large",
- *   isSecondary?: boolean,
- *   isDanger?: boolean,
- *   isBare?: boolean,
- *   isStretched?: boolean,
- *   disabled?: boolean,
- *   isEditable?: boolean,
- *   inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"|"defaultValue"|"onChange"|"type">,
- *   decrementIcon?: React.ReactNode,
- *   incrementIcon?: React.ReactNode,
- *   startIcon?: React.ReactNode,
- *   endIcon?: React.ReactNode,
- *   decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
- *   incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
- *   className?: string,
- * }} ButtonCounterProps
- */
-
-/**
- * @type {React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>}
- */
-export const ButtonCounter = forwardRef(function ButtonCounter(
-  {
-    value,
-    defaultValue = 1,
-    onChange,
-    min = Number.NEGATIVE_INFINITY,
-    max = Number.POSITIVE_INFINITY,
-    step = 1,
-    children,
-    size = "medium",
-    isSecondary,
-    isDanger,
-    isBare,
-    isStretched,
-    disabled,
-    isEditable = false,
-    inputProps,
-    decrementIcon,
-    incrementIcon,
-    startIcon,
-    endIcon,
-    decrementButtonProps,
-    incrementButtonProps,
-    className,
-    ...rest
-  },
-  ref,
-) {
-  const isControlled = value !== undefined;
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const currentValue = isControlled ? value : internalValue;
-
-  const clampedValue = useMemo(() => {
-    const safe = Number.isFinite(currentValue) ? currentValue : defaultValue;
-    return Math.min(max, Math.max(min, safe));
-  }, [currentValue, defaultValue, max, min]);
-
-  const commitValue = useCallback(
-    (next) => {
-      const clamped = Math.min(max, Math.max(min, next));
-      if (!isControlled) setInternalValue(clamped);
-      onChange?.(clamped);
-    },
-    [isControlled, max, min, onChange],
-  );
-
-  const decrementDisabled =
-    !!disabled || !Number.isFinite(clampedValue) || clampedValue - step < min;
-  const incrementDisabled =
-    !!disabled || !Number.isFinite(clampedValue) || clampedValue + step > max;
-
-  let variant = "primary";
-  if (disabled) {
-    variant = "disabled";
-  } else if (isDanger && isBare) {
-    variant = "dangerBare";
-  } else if (isDanger) {
-    variant = "danger";
-  } else if (isSecondary) {
-    variant = "secondary";
-  } else if (isBare) {
-    variant = "bare";
-  }
-
-  if (process.env.NODE_ENV !== "production") {
-    const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
-    const hasAllowedCombo = isDanger && isBare && count === 2;
-    if (count > 1 && !hasAllowedCombo) {
-      console.warn(
-        "[ButtonCounter]: Multiple variant props passed. Using the highest priority only.",
-      );
-    }
-
-    if (step <= 0) {
-      console.warn("[ButtonCounter]: step should be > 0.");
-    }
-  }
-
-  const CONTROL_SIZES = {
-    small: {
-      button: "h-[36px] w-[36px] text-sm",
-      display: "h-[36px] min-w-[48px] px-12 text-sm",
-    },
-    medium: {
-      button: "h-[44px] w-[44px] text-base",
-      display: "h-[44px] min-w-[56px] px-12 text-base",
-    },
-    large: {
-      button: "h-[56px] w-[56px] text-lg",
-      display: "h-[56px] min-w-[72px] px-16 text-lg",
-    },
-  };
-
-  const defaultsButton =
-    "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
-
-  const defaultsDisplay =
-    "flex items-center justify-center text-bold tracking-normal";
-
-  const width = isStretched ? "w-full" : "w-fit-content";
-
-  const variants = {
-    primary: {
-      button:
-        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
-      display:
-        "border-y-2 border-x-2 border-border-primary-emphasis bg-bg-primary-base text-white",
-    },
-    secondary: {
-      button:
-        "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
-      display:
-        "border-y-2 border-x-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis",
-    },
-    bare: {
-      button:
-        "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
-      display: "bg-bg-base text-fg-primary-emphasis",
-    },
-    dangerBare: {
-      button:
-        "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
-      display: "bg-bg-base text-fg-danger-emphasis",
-    },
-    danger: {
-      button:
-        "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
-      display:
-        "border-y-2 border-x-2 border-border-danger-emphasis bg-bg-danger-base text-white",
-    },
-    disabled: {
-      button:
-        "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline cursor-not-allowed",
-      display:
-        "border-y-2 border-x-2 border-border-subtle bg-bg-inactive text-fg-inactive",
-    },
-  };
-
-  const sizeStyles = CONTROL_SIZES[size] ?? CONTROL_SIZES.medium;
-  const variantStyles = variants[variant] ?? variants.primary;
-
-  const leftButtonStyles = cx(
-    defaultsButton,
-    sizeStyles.button,
-    "rounded-l-lg",
-    "relative z-10",
-    variantStyles.button,
-    variant !== "bare" && variant !== "dangerBare" ? "border-r-0" : null,
-  );
-
-  const rightButtonStyles = cx(
-    defaultsButton,
-    sizeStyles.button,
-    "rounded-r-lg",
-    variantStyles.button,
-    variant !== "bare" && variant !== "dangerBare" ? "border-l-0" : null,
-  );
-
-  const displayStyles = cx(
-    defaultsDisplay,
-    sizeStyles.display,
-    "relative z-0",
-    variantStyles.display,
-    isStretched ? "flex-1" : null,
-  );
-
-  const effectiveDecrementIcon = decrementIcon ?? startIcon ?? "-";
-  const effectiveIncrementIcon = incrementIcon ?? endIcon ?? "+";
-
-  const [draftValue, setDraftValue] = useState(String(clampedValue));
-  const [isEditing, setIsEditing] = useState(false);
-  const inputRef = useRef(null);
-
-  useEffect(() => {
-    if (isEditing) return;
-    setDraftValue(String(clampedValue));
-  }, [clampedValue, isEditing]);
-
-  const commitDraft = useCallback(() => {
-    const trimmed = String(draftValue).trim();
-    if (trimmed === "") {
-      setDraftValue(String(clampedValue));
-      return;
-    }
-
-    const next = Number(trimmed);
-    if (!Number.isFinite(next)) {
-      setDraftValue(String(clampedValue));
-      return;
-    }
-
-    commitValue(next);
-  }, [clampedValue, commitValue, draftValue]);
-
-  return (
-    <div
-      ref={ref}
-      className={cx("inline-flex items-stretch", width, className)}
-      {...rest}
-    >
-      <button
-        {...decrementButtonProps}
-        type="button"
-        aria-label={decrementButtonProps?.["aria-label"] ?? "Decrease"}
-        aria-disabled={decrementDisabled}
-        disabled={decrementDisabled}
-        className={cx(
-          leftButtonStyles,
-          decrementDisabled && variant !== "disabled"
-            ? variants.disabled.button
-            : null,
-          decrementButtonProps?.className,
-        )}
-        onClick={(event) => {
-          decrementButtonProps?.onClick?.(event);
-          if (event.defaultPrevented) return;
-          commitValue(clampedValue - step);
-        }}
-      >
-        {effectiveDecrementIcon}
-      </button>
-
-      {isEditable && children == null ? (
-        <input
-          {...inputProps}
-          ref={inputRef}
-          type="number"
-          inputMode="numeric"
-          disabled={!!disabled}
-          aria-label={inputProps?.["aria-label"] ?? "Value"}
-          className={cx(
-            displayStyles,
-            "w-[44px] text-center outline-none bg-transparent text-fg-base",
-            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:m-0",
-            "focus:shadow-focus focus-visible:shadow-focus focus:z-15 focus-within:z-15",
-            inputProps?.className,
-          )}
-          value={draftValue}
-          onChange={(event) => {
-            inputProps?.onChange?.(event);
-            if (event.defaultPrevented) return;
-            setDraftValue(event.target.value);
-          }}
-          onFocus={(event) => {
-            inputProps?.onFocus?.(event);
-            if (event.defaultPrevented) return;
-            setIsEditing(true);
-          }}
-          onBlur={(event) => {
-            inputProps?.onBlur?.(event);
-            if (event.defaultPrevented) return;
-            setIsEditing(false);
-            commitDraft();
-          }}
-          onKeyDown={(event) => {
-            inputProps?.onKeyDown?.(event);
-            if (event.defaultPrevented) return;
-            if (event.key === "Enter") {
-              event.currentTarget.blur();
-            }
-            if (event.key === "Escape") {
-              setDraftValue(String(clampedValue));
-              event.currentTarget.blur();
-            }
-          }}
-        />
-      ) : (
-        <div className={cx(displayStyles, "select-none")}>
-          {children ?? clampedValue}
-        </div>
-      )}
-
-      <button
-        {...incrementButtonProps}
-        type="button"
-        aria-label={incrementButtonProps?.["aria-label"] ?? "Increase"}
-        aria-disabled={incrementDisabled}
-        disabled={incrementDisabled}
-        className={cx(
-          rightButtonStyles,
-          incrementDisabled && variant !== "disabled"
-            ? variants.disabled.button
-            : null,
-          incrementButtonProps?.className,
-        )}
-        onClick={(event) => {
-          incrementButtonProps?.onClick?.(event);
-          if (event.defaultPrevented) return;
-          commitValue(clampedValue + step);
-        }}
-      >
-        {effectiveIncrementIcon}
-      </button>
-    </div>
-  );
-});

package/src/elements/ButtonCounter.test.jsx

@@ -1,100 +0,0 @@
-import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { ButtonCounter } from "./ButtonCounter";
-
-describe("ButtonCounter", () => {
-  it("renders defaultValue", () => {
-    render(<ButtonCounter defaultValue={5} />);
-    expect(screen.getByText("5")).toBeInTheDocument();
-  });
-
-  it("increments and decrements", () => {
-    render(<ButtonCounter defaultValue={1} />);
-
-    fireEvent.click(screen.getByRole("button", { name: "Increase" }));
-    expect(screen.getByText("2")).toBeInTheDocument();
-
-    fireEvent.click(screen.getByRole("button", { name: "Decrease" }));
-    expect(screen.getByText("1")).toBeInTheDocument();
-  });
-
-  it("renders an editable input when isEditable=true", () => {
-    const onChange = vi.fn();
-    render(<ButtonCounter defaultValue={3} isEditable onChange={onChange} />);
-
-    const input = screen.getByRole("spinbutton", { name: "Value" });
-    expect(input).toHaveValue(3);
-
-    fireEvent.change(input, { target: { value: "7" } });
-    fireEvent.blur(input);
-
-    expect(onChange).toHaveBeenCalledWith(7);
-    expect(screen.getByRole("spinbutton", { name: "Value" })).toHaveValue(7);
-  });
-
-  it("applies medium size by default", () => {
-    render(<ButtonCounter defaultValue={1} />);
-    const buttons = screen.getAllByRole("button");
-    expect(buttons[0].className).toMatch(/h-\[44px\]/);
-    expect(buttons[1].className).toMatch(/h-\[44px\]/);
-  });
-
-  it("applies small and large sizes", () => {
-    const { rerender } = render(<ButtonCounter size="small" defaultValue={1} />);
-    expect(screen.getAllByRole("button")[0].className).toMatch(/h-\[36px\]/);
-
-    rerender(<ButtonCounter size="large" defaultValue={1} />);
-    expect(screen.getAllByRole("button")[0].className).toMatch(/h-\[56px\]/);
-  });
-
-  it("applies variants", () => {
-    const { rerender } = render(<ButtonCounter defaultValue={1} />);
-    expect(screen.getAllByRole("button")[0].className).toMatch(/bg-bg-primary-base/);
-
-    rerender(<ButtonCounter isSecondary defaultValue={1} />);
-    expect(screen.getAllByRole("button")[0].className).toMatch(/bg-bg-base/);
-
-    rerender(<ButtonCounter isDanger defaultValue={1} />);
-    expect(screen.getAllByRole("button")[0].className).toMatch(/bg-bg-danger-base/);
-
-    rerender(<ButtonCounter isDanger isBare defaultValue={1} />);
-    expect(screen.getAllByRole("button")[0].className).toMatch(/text-fg-danger-emphasis/);
-  });
-
-  it("applies disabled state", () => {
-    render(<ButtonCounter disabled defaultValue={1} />);
-    const buttons = screen.getAllByRole("button");
-    expect(buttons[0]).toBeDisabled();
-    expect(buttons[1]).toBeDisabled();
-    expect(buttons[0].className).toMatch(/bg-bg-inactive/);
-  });
-
-  it("uses stretched width when isStretched=true", () => {
-    const { container } = render(<ButtonCounter isStretched defaultValue={1} />);
-    expect(container.firstChild.className).toMatch(/w-full/);
-  });
-
-  it("logs a warning in dev mode if multiple variants are passed", () => {
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-    process.env.NODE_ENV = "development";
-
-    render(<ButtonCounter isSecondary isDanger defaultValue={1} />);
-
-    expect(warnSpy).toHaveBeenCalledWith(
-      "[ButtonCounter]: Multiple variant props passed. Using the highest priority only."
-    );
-
-    warnSpy.mockRestore();
-  });
-
-  it("does not warn for the danger bare combination", () => {
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-    process.env.NODE_ENV = "development";
-
-    render(<ButtonCounter isDanger isBare defaultValue={1} />);
-
-    expect(warnSpy).not.toHaveBeenCalled();
-
-    warnSpy.mockRestore();
-  });
-});