Quantity Picker

import { QuantityPicker } from "seed-design/ui/quantity-picker";

export default function QuantityPickerPreview() {
  return <QuantityPicker min={1} max={99} defaultValue={1} aria-label="상품 수량" />;
}

import { HStack, Text, VStack } from "@seed-design/react";
import { QuantityPicker } from "seed-design/ui/quantity-picker";

export default function QuantityPickerLayout() {
  return (
    <VStack width="360px" gap="x4" align="stretch">
      <VStack gap="x2" align="stretch">
        <Text>Hug (기본)</Text>
        <HStack width="full">
          <QuantityPicker
            layout="hug"
            min={1}
            max={99}
            defaultValue={1}
            aria-label="Hug 상품 수량"
          />
        </HStack>
      </VStack>

      <VStack gap="x2" align="stretch">
        <Text>Fill</Text>
        <HStack width="full">
          <QuantityPicker
            layout="fill"
            min={1}
            max={99}
            defaultValue={1}
            aria-label="Fill 상품 수량"
          />
        </HStack>
      </VStack>
    </VStack>
  );
}

import { QuantityPicker } from "seed-design/ui/quantity-picker";

export default function QuantityPickerValueText() {
  return (
    <QuantityPicker
      min={1}
      max={99}
      defaultValue={1}
      aria-label="상품 수량"
      getValueText={(valueText: string) => `${valueText}개`}
    />
  );
}

import { Text, VStack } from "@seed-design/react";
import { useState } from "react";
import { QuantityPicker } from "seed-design/ui/quantity-picker";

export default function QuantityPickerControlled() {
  const [quantity, setQuantity] = useState(2);

  return (
    <VStack gap="x3" align="center">
      <QuantityPicker
        min={1}
        max={99}
        value={quantity}
        onValueChange={setQuantity}
        aria-label="상품 수량"
      />
      <Text textStyle="t4Regular">현재 수량: {quantity}개</Text>
    </VStack>
  );
}

import { Text, VStack } from "@seed-design/react";
import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import { QuantityPicker } from "seed-design/ui/quantity-picker";

export default function QuantityPickerRemovable() {
  const [removed, setRemoved] = useState(false);

  if (removed) {
    return (
      <VStack gap="x3" align="center">
        <Text textStyle="t4Regular">상품을 삭제했습니다.</Text>
        <ActionButton variant="neutralWeak" onClick={() => setRemoved(false)}>
          되돌리기
        </ActionButton>
      </VStack>
    );
  }

  return (
    <VStack gap="x3" align="center">
      <QuantityPicker
        min={1}
        max={99}
        defaultValue={1}
        removable
        aria-label="상품 수량"
        removeAriaLabel="상품 삭제"
        onRemove={() => setRemoved(true)}
      />
      <Text textStyle="t4Regular">최소 수량에서 Decrement 버튼이 Remove 버튼으로 전환됩니다.</Text>
    </VStack>
  );
}

import { HStack, VStack } from "@seed-design/react";
import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import { QuantityPicker } from "seed-design/ui/quantity-picker";

export default function QuantityPickerLoading() {
  const [decrementLoading, setDecrementLoading] = useState(false);
  const [incrementLoading, setIncrementLoading] = useState(false);
  const allLoading = decrementLoading && incrementLoading;

  function toggleAllLoading() {
    const nextLoading = !allLoading;
    setDecrementLoading(nextLoading);
    setIncrementLoading(nextLoading);
  }

  return (
    <VStack gap="x3" align="center">
      <QuantityPicker
        min={1}
        max={99}
        defaultValue={2}
        loading={
          allLoading
            ? true
            : {
                decrement: decrementLoading,
                increment: incrementLoading,
              }
        }
        aria-label="상품 수량"
      />
      <HStack gap="x2">
        <ActionButton variant="neutralWeak" aria-pressed={allLoading} onClick={toggleAllLoading}>
          전체
        </ActionButton>
        <ActionButton
          variant="neutralWeak"
          aria-pressed={decrementLoading}
          onClick={() => setDecrementLoading((current) => !current)}
        >
          Decrement
        </ActionButton>
        <ActionButton
          variant="neutralWeak"
          aria-pressed={incrementLoading}
          onClick={() => setIncrementLoading((current) => !current)}
        >
          Increment
        </ActionButton>
      </HStack>
    </VStack>
  );
}

import { VStack } from "@seed-design/react";
import type { FormEvent } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import { QuantityPicker } from "seed-design/ui/quantity-picker";

export default function QuantityPickerForm() {
  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    window.alert(`제출한 수량: ${formData.get("quantity")}개`);
  }

  return (
    <VStack asChild gap="x3" align="center">
      <form onSubmit={handleSubmit}>
        <QuantityPicker
          min={1}
          max={99}
          defaultValue={1}
          aria-label="상품 수량"
          inputProps={{ name: "quantity" }}
        />
        <ActionButton type="submit" variant="neutralSolid">
          제출
        </ActionButton>
      </form>
    </VStack>
  );
}