@purpurds/quantity-selector 0.0.1

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-quantity-selector_lzxe3_1 [class*=_purpur-text-field__field-row]{position:relative;height:44px}._purpur-quantity-selector_lzxe3_1 [class*=_purpur-text-field__input-container]{width:56px}._purpur-quantity-selector_lzxe3_1 [class*=_purpur-text-field__input-container] input{text-align:center}._purpur-quantity-selector_lzxe3_1 [class*=_purpur-text-field__input-container] input::-webkit-outer-spin-button,._purpur-quantity-selector_lzxe3_1 [class*=_purpur-text-field__input-container] input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._purpur-quantity-selector_lzxe3_1 [class*=_purpur-text-field__input-container] input[type=number]{-moz-appearance:textfield}._purpur-quantity-selector--full-width_lzxe3_21,._purpur-quantity-selector--full-width_lzxe3_21 [class*=_purpur-text-field__input-container]{width:100%}._purpur-quantity-selector--loading_lzxe3_27 [class*=_purpur-text-field__input-container]>input{display:none}._purpur-quantity-selector--no-gap_lzxe3_30 [class*=_purpur-text-field__frame]{border-radius:0;border-left:none;border-right:none}._purpur-quantity-selector--no-gap-disabled-left_lzxe3_35 [class*=_purpur-text-field__frame]{border-radius:0;border-right:none}._purpur-quantity-selector--no-gap-disabled-right_lzxe3_39 [class*=_purpur-text-field__frame]{border-radius:0;border-left:none}._purpur-quantity-selector--no-gap-disabled_lzxe3_35 [class*=_purpur-text-field__frame]{border-radius:0}._purpur-quantity-selector__spinner_lzxe3_46{position:absolute;z-index:1;top:50%;left:60px;transform:translateY(-50%)}._purpur-quantity-selector__spinner--full-width_lzxe3_53{left:50%;transform:translate(-50%,-50%)}._purpur-quantity-selector__spinner--separated_lzxe3_57{left:68px}._purpur-quantity-selector-button_qjlbs_1._purpur-quantity-selector-button_qjlbs_1._purpur-quantity-selector-button_qjlbs_1{padding:var(--purpur-spacing-100) calc(var(--purpur-spacing-150) + var(--purpur-spacing-25))}._purpur-quantity-selector-button_qjlbs_1._purpur-quantity-selector-button_qjlbs_1._purpur-quantity-selector-button--gap-left_qjlbs_4{margin-right:var(--purpur-spacing-100)}._purpur-quantity-selector-button_qjlbs_1._purpur-quantity-selector-button_qjlbs_1._purpur-quantity-selector-button--gap-right_qjlbs_7{margin-left:var(--purpur-spacing-100)}._purpur-quantity-selector-button_qjlbs_1._purpur-quantity-selector-button_qjlbs_1._purpur-quantity-selector-button--no-gap-right_qjlbs_10{border-radius:0 var(--purpur-border-radius-md) var(--purpur-border-radius-md) 0}._purpur-quantity-selector-button_qjlbs_1._purpur-quantity-selector-button_qjlbs_1._purpur-quantity-selector-button--no-gap-left_qjlbs_13{border-radius:var(--purpur-border-radius-md) 0 0 var(--purpur-border-radius-md)}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@purpurds/quantity-selector",
+  "version": "0.0.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/quantity-selector.cjs.js",
+  "types": "./dist/quantity-selector.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/quantity-selector.cjs.js",
+      "types": "./dist/quantity-selector.d.ts",
+      "default": "./dist/quantity-selector.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/quantity-selector.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/button": "5.23.0",
+    "@purpurds/spinner": "5.23.0",
+    "@purpurds/icon": "5.23.0",
+    "@purpurds/text-field": "5.23.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/preview-api": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.4.0",
+    "@testing-library/react": "~14.3.0",
+    "@types/node": "20.12.12",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "^8.57.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "storybook": "^8.3.5",
+    "typescript": "^5.6.3",
+    "vite": "5.4.8",
+    "vitest": "^2.1.2",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/quantity-selector-button.module.scss

@@ -0,0 +1,23 @@
+.purpur-quantity-selector-button {
+  $root: &;
+
+  &#{$root}#{$root} {
+    padding: var(--purpur-spacing-100) calc(var(--purpur-spacing-150) + var(--purpur-spacing-25));
+
+    &--gap-left {
+      margin-right: var(--purpur-spacing-100);
+    }
+
+    &--gap-right {
+      margin-left: var(--purpur-spacing-100);
+    }
+
+    &--no-gap-right {
+      border-radius: 0 var(--purpur-border-radius-md) var(--purpur-border-radius-md) 0;
+    }
+
+    &--no-gap-left {
+      border-radius: var(--purpur-border-radius-md) 0 0 var(--purpur-border-radius-md);
+    }
+  }
+}

package/src/quantity-selector-button.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Button } from "@purpurds/button";
+import { IconMinus, IconPlus } from "@purpurds/icon";
+import c from "classnames/bind";
+
+import styles from "./quantity-selector-button.module.scss";
+
+type variant = "primary" | "secondary";
+type buttonType = "increment" | "decrement";
+
+type QuantitySelectorButtonProps = {
+  ["data-testid"]?: string;
+  disabled?: boolean;
+  hasGap: boolean;
+  variant: variant;
+  buttonType: buttonType;
+  onClick: (buttonType: buttonType) => void;
+};
+
+const cx = c.bind(styles);
+const rootClassName = "purpur-quantity-selector-button";
+
+export const QuantitySelectorButton = ({
+  ["data-testid"]: dataTestid,
+  disabled,
+  hasGap,
+  variant,
+  buttonType,
+  onClick,
+}: QuantitySelectorButtonProps) => {
+  const classes = cx([
+    rootClassName,
+    {
+      [`${rootClassName}--gap-left`]: hasGap && buttonType === "decrement",
+      [`${rootClassName}--gap-right`]: hasGap && buttonType === "increment",
+      [`${rootClassName}--no-gap-left`]: !hasGap && buttonType === "decrement",
+      [`${rootClassName}--no-gap-right`]: !hasGap && buttonType === "increment",
+    },
+  ]);
+
+  return (
+    <Button
+      data-testid={dataTestid}
+      className={classes}
+      size="sm"
+      type="submit"
+      variant={variant}
+      onClick={() => onClick(buttonType)}
+      iconOnly={true}
+      disabled={disabled}
+      tabIndex={-1}
+    >
+      {buttonType === "increment" ? <IconPlus size="xs" /> : <IconMinus size="xs" />}
+    </Button>
+  );
+};

package/src/quantity-selector.module.scss

@@ -0,0 +1,83 @@
+.purpur-quantity-selector {
+  $root: &;
+
+  [class*="_purpur-text-field__field-row"] {
+    position: relative;
+    height: 44px;
+  }
+
+  [class*="_purpur-text-field__input-container"] {
+    width: 56px;
+    input {
+      text-align: center;
+    }
+
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    /* Firefox */
+    input[type=number] {
+      -moz-appearance: textfield;
+    }
+  }
+
+  &--full-width {
+    width: 100%;
+    [class*="_purpur-text-field__input-container"] {
+      width: 100%;
+    }
+  }
+
+  &--loading {
+    [class*="_purpur-text-field__input-container"] > input {
+      display: none;
+    }
+  }
+
+  &--no-gap {
+    [class*="_purpur-text-field__frame"] {
+      border-radius: 0;
+      border-left: none;
+      border-right: none;
+    }
+  }
+
+  &--no-gap-disabled-left {
+    [class*="_purpur-text-field__frame"] {
+      border-radius: 0;
+      border-right: none;
+    }
+  }
+
+  &--no-gap-disabled-right {
+    [class*="_purpur-text-field__frame"] {
+      border-radius: 0;
+      border-left: none;
+    }
+  }
+
+  &--no-gap-disabled {
+    [class*="_purpur-text-field__frame"] {
+      border-radius: 0;
+    }
+  }
+
+  &__spinner {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: 60px;
+    transform: translate(0%, -50%);
+    &--full-width {
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    &--separated {
+      left: 68px;
+    }
+  }
+}

package/src/quantity-selector.stories.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { useArgs } from "@storybook/preview-api";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/text-field/styles";
+import "@purpurds/button/styles";
+import "@purpurds/icon/styles";
+import "@purpurds/spinner/styles";
+import {
+  QuantitySelector,
+  quantitySelectorButtonVariants,
+  quantitySelectorVariants,
+} from "./quantity-selector";
+
+const meta = {
+  title: "Inputs/QuantitySelector",
+  component: QuantitySelector,
+  args: {
+    variant: "attached",
+    buttonVariant: "primary",
+    errorText: "",
+    disabled: false,
+    loading: false,
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: quantitySelectorVariants,
+      table: { type: { summary: quantitySelectorVariants.map((x) => `"${x}"`).join(" | ") } },
+    },
+    buttonVariant: {
+      control: "select",
+      options: quantitySelectorButtonVariants,
+      table: { type: { summary: quantitySelectorButtonVariants.map((x) => `"${x}"`).join(" | ") } },
+    },
+  },
+  parameters: {
+    design: [
+      {
+        name: "QuantitySelector",
+        type: "figma",
+        url: "https://www.figma.com/design/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=56156-3059",
+      },
+    ],
+  },
+  render: ({ ...args }) => {
+    const [{ value }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+
+    const handleOnChange = (value: number) => {
+      updateArgs({ value });
+    };
+
+    return <QuantitySelector {...args} value={value} onChange={handleOnChange} />;
+  },
+} satisfies Meta<typeof QuantitySelector>;
+
+export default meta;
+type Story = StoryObj<typeof QuantitySelector>;
+
+export const Showcase: Story = {
+  args: {
+    variant: "attached",
+    buttonVariant: "primary",
+  },
+};
+
+export const Seperated: Story = {
+  args: {
+    variant: "separated",
+    buttonVariant: "secondary",
+  },
+};

package/src/quantity-selector.test.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { QuantitySelector, QuantitySelectorProps } from "./quantity-selector";
+
+expect.extend(matchers);
+
+const testid = "quantity-selector";
+
+const props: QuantitySelectorProps = {
+  ["data-testid"]: testid,
+  variant: "attached",
+  buttonVariant: "secondary",
+  onChange: vi.fn(),
+};
+
+describe("QuantitySelector", () => {
+  afterEach(cleanup);
+
+  it("should render component with primary attached buttons", () => {
+    render(<QuantitySelector {...props} variant="attached" buttonVariant="primary" />);
+    expect(screen.queryByTestId(testid + "-input")).toBeInTheDocument();
+    expect(screen.queryByTestId(testid + "-button-increment")).toBeInTheDocument();
+    expect(screen.queryByTestId(testid + "-button-decrement")).toBeInTheDocument();
+  });
+
+  it("should render component with secondary separated buttons", () => {
+    render(<QuantitySelector {...props} variant="separated" buttonVariant="secondary" />);
+    expect(screen.queryByTestId(testid + "-input")).toBeInTheDocument();
+    expect(screen.queryByTestId(testid + "-button-increment")).toBeInTheDocument();
+    expect(screen.queryByTestId(testid + "-button-decrement")).toBeInTheDocument();
+  });
+
+  it("should increment value when pressing increment button", () => {
+    const onChangeMock = vi.fn();
+    render(<QuantitySelector {...props} onChange={onChangeMock} />);
+
+    const button = screen.getByTestId(testid + "-button-increment");
+    fireEvent.click(button);
+
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    expect(onChangeMock).toHaveBeenCalledWith(1);
+  });
+
+  it("should decrease value when pressing decrement button", () => {
+    const onChangeMock = vi.fn();
+    render(<QuantitySelector {...props} value={5} onChange={onChangeMock} />);
+
+    const button = screen.getByTestId(testid + "-button-decrement");
+    fireEvent.click(button);
+
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    expect(onChangeMock).toHaveBeenCalledWith(4);
+  });
+
+  it("should not decrease value below zero when pressing decrement button", () => {
+    const onChangeMock = vi.fn();
+    render(<QuantitySelector {...props} value={0} onChange={onChangeMock} />);
+
+    const button = screen.getByTestId(testid + "-button-decrement");
+    fireEvent.click(button);
+
+    expect(onChangeMock).toHaveBeenCalledTimes(0);
+  });
+
+  it("should update value when entering a number in input", async () => {
+    const onChangeMock = vi.fn();
+    render(<QuantitySelector {...props} onChange={onChangeMock} />);
+
+    const input = screen.getByTestId(testid + "-input");
+    fireEvent.change(input, { target: { value: "5" } });
+
+    await waitFor(() => expect(onChangeMock).toHaveBeenCalledTimes(1));
+    expect(onChangeMock).toHaveBeenCalledWith(5);
+  });
+});

package/src/quantity-selector.tsx

@@ -0,0 +1,174 @@
+import React, { ChangeEvent, ForwardedRef, forwardRef, useEffect, useState } from "react";
+import { Spinner } from "@purpurds/spinner";
+import { TextField } from "@purpurds/text-field";
+import c from "classnames/bind";
+
+import styles from "./quantity-selector.module.scss";
+import { QuantitySelectorButton } from "./quantity-selector-button";
+
+const cx = c.bind(styles);
+
+export const quantitySelectorVariants = ["attached", "separated"] as const;
+export const quantitySelectorButtonVariants = ["primary", "secondary"] as const;
+
+type Variant = (typeof quantitySelectorVariants)[number];
+type ButtonVariant = (typeof quantitySelectorButtonVariants)[number];
+
+export type QuantitySelectorProps = {
+  ["data-testid"]?: string;
+  className?: string;
+  variant: Variant;
+  buttonVariant: ButtonVariant;
+  onChange: (value: number) => void;
+  value?: number;
+  minValue?: number;
+  maxValue?: number;
+  label?: string;
+  errorText?: string;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+};
+
+const rootClassName = "purpur-quantity-selector";
+
+export const QuantitySelector = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId,
+      className,
+      variant,
+      buttonVariant,
+      onChange,
+      value: defaultValue,
+      fullWidth,
+      disabled,
+      loading,
+      minValue,
+      maxValue,
+      ...props
+    }: QuantitySelectorProps,
+    ref: ForwardedRef<HTMLInputElement>
+  ) => {
+    const [value, setValue] = useState(defaultValue ?? 0);
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);
+    const isDisabled = disabled || loading;
+    const min = Math.max(minValue ?? 0, 0);
+    const max = maxValue ?? Number.MAX_SAFE_INTEGER;
+    const incrementDisabled = value === max;
+    const decrementDisabled = value === min;
+
+    useEffect(() => {
+      if (debouncedValue === value) {
+        return;
+      }
+      const timer = setTimeout(() => {
+        setValue(debouncedValue);
+        onChange(debouncedValue);
+      }, 300);
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }, [debouncedValue, value, onChange]);
+
+    const classes = cx([
+      className,
+      rootClassName,
+      {
+        [`${rootClassName}--no-gap`]:
+          variant === "attached" && !isDisabled && !decrementDisabled && !incrementDisabled,
+        [`${rootClassName}--no-gap-disabled-left`]:
+          variant === "attached" && !isDisabled && !incrementDisabled && decrementDisabled,
+        [`${rootClassName}--no-gap-disabled-right`]:
+          variant === "attached" && !isDisabled && !decrementDisabled && incrementDisabled,
+        [`${rootClassName}--no-gap-disabled`]:
+          variant === "attached" && (isDisabled || (incrementDisabled && decrementDisabled)),
+        [`${rootClassName}--full-width`]: fullWidth,
+        [`${rootClassName}--loading`]: loading,
+      },
+    ]);
+
+    const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const numericRegex = /^[0-9]*$/;
+      if (!numericRegex.test(e.target.value)) {
+        return;
+      }
+      const val = +e.target.value;
+      if (val < min || val > max) {
+        return;
+      }
+      setDebouncedValue(val);
+    };
+
+    const handleOnClick = (adjustmentType: "increment" | "decrement") => {
+      const adjustedValue = adjustmentType === "increment" ? value + 1 : value - 1;
+      if (adjustedValue < 0) {
+        return;
+      }
+      setValue(adjustedValue);
+      setDebouncedValue(adjustedValue);
+      onChange(adjustedValue);
+    };
+
+    const adjustmentButton = (adjustmentType: "increment" | "decrement") => {
+      const buttonDisabled =
+        (adjustmentType === "increment" && incrementDisabled) ||
+        (adjustmentType === "decrement" && decrementDisabled);
+      return (
+        <QuantitySelectorButton
+          data-testid={getTestId("button-" + adjustmentType)}
+          variant={buttonVariant}
+          buttonType={adjustmentType}
+          hasGap={variant === "separated"}
+          onClick={handleOnClick}
+          disabled={isDisabled || buttonDisabled}
+        />
+      );
+    };
+
+    const beforeField = (
+      <>
+        {loading && (
+          <div
+            className={cx([
+              `${rootClassName}__spinner`,
+              {
+                [`${rootClassName}__spinner--full-width`]: fullWidth,
+                [`${rootClassName}__spinner--separated`]: !fullWidth && variant === "separated",
+              },
+            ])}
+          >
+            <Spinner
+              key="spinner"
+              disabled={isDisabled}
+              size="xs"
+              data-testid={getTestId("spinner")}
+            />
+          </div>
+        )}
+        {adjustmentButton("decrement")}
+      </>
+    );
+
+    return (
+      <TextField
+        value={debouncedValue}
+        type="number"
+        ref={ref}
+        className={classes}
+        data-testid={dataTestId}
+        onChange={handleOnChange}
+        beforeField={beforeField}
+        afterField={adjustmentButton("increment")}
+        disabled={isDisabled}
+        min={min}
+        max={max}
+        {...props}
+      />
+    );
+  }
+);
+
+QuantitySelector.displayName = "QuantitySelector";

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@purpurds/component-rig",
+  "compilerOptions": {
+    "rootDir": "src",
+  },
+  "include": ["src"]
+}

package/tsconfig.types.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@purpurds/component-rig/tsconfig.types.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["**/*.test.*", "**/*.stories.*"]
+}

package/vite.config.mts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+import { getConfig } from "@purpurds/component-rig/vite.config";
+import pkg from "./package.json";
+
+export default defineConfig(getConfig(pkg));