@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

package/src/react/ui/modals/_internal/components/quantityInput/__tests__/index.test.tsx

@@ -1,12 +1,13 @@
-import { observable } from '@legendapp/state';
 import { fireEvent, render, screen } from '@test';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import QuantityInput from '..';
 
 describe('QuantityInput', () => {
 	const defaultProps = {
-		$quantity: observable<string>('1'),
-		$invalidQuantity: observable<boolean>(false),
+		quantity: '1',
+		invalidQuantity: false,
+		onQuantityChange: vi.fn(),
+		onInvalidQuantityChange: vi.fn(),
 		decimals: 1,
 		maxQuantity: '10',
 	};
@@ -19,51 +20,52 @@ describe('QuantityInput', () => {
 	});
 
 	it('should display current quantity value', () => {
-		const quantity$ = observable<string>('5');
-		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+		render(<QuantityInput {...defaultProps} quantity="5" />);
 
 		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
 		expect(input).toHaveValue('5');
 	});
 
 	it('should handle quantity changes', () => {
-		const quantity$ = observable<string>('1');
-		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+		const onQuantityChange = vi.fn();
+		render(
+			<QuantityInput {...defaultProps} onQuantityChange={onQuantityChange} />,
+		);
 
 		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
 		fireEvent.change(input, { target: { value: '5' } });
 
-		expect(quantity$.get()).toBe('5');
+		expect(onQuantityChange).toHaveBeenCalledWith('5');
 	});
 
 	it('should not allow values greater than maxQuantity', () => {
-		const quantity$ = observable<string>('1');
-		const invalidQuantity$ = observable<boolean>(false);
+		const onQuantityChange = vi.fn();
+		const onInvalidQuantityChange = vi.fn();
 
 		render(
 			<QuantityInput
 				{...defaultProps}
-				$quantity={quantity$}
-				$invalidQuantity={invalidQuantity$}
+				onQuantityChange={onQuantityChange}
+				onInvalidQuantityChange={onInvalidQuantityChange}
 			/>,
 		);
 
 		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
 		fireEvent.change(input, { target: { value: '15' } });
 
-		expect(quantity$.get()).toBe('10'); // Now capped at max instead of invalid
-		expect(invalidQuantity$.get()).toBe(false);
+		expect(onQuantityChange).toHaveBeenCalledWith('10'); // Capped at max
+		expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
 	});
 
 	it('should handle decimal values correctly based on decimal prop', () => {
-		const quantity$ = observable<string>('1');
-		const invalidQuantity$ = observable<boolean>(false);
+		const onQuantityChange = vi.fn();
+		const onInvalidQuantityChange = vi.fn();
 
 		render(
 			<QuantityInput
 				{...defaultProps}
-				$quantity={quantity$}
-				$invalidQuantity={invalidQuantity$}
+				onQuantityChange={onQuantityChange}
+				onInvalidQuantityChange={onInvalidQuantityChange}
 				decimals={2}
 			/>,
 		);
@@ -71,18 +73,18 @@ describe('QuantityInput', () => {
 		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
 		fireEvent.change(input, { target: { value: '1.234' } });
 
-		expect(quantity$.get()).toBe('1.23'); // Should truncate to 2 decimals
+		expect(onQuantityChange).toHaveBeenCalledWith('1.23'); // Should truncate to 2 decimals
 	});
 
 	it('should validate and mark invalid quantities', () => {
-		const quantity$ = observable<string>('1');
-		const invalidQuantity$ = observable<boolean>(false);
+		const onQuantityChange = vi.fn();
+		const onInvalidQuantityChange = vi.fn();
 
 		render(
 			<QuantityInput
 				{...defaultProps}
-				$quantity={quantity$}
-				$invalidQuantity={invalidQuantity$}
+				onQuantityChange={onQuantityChange}
+				onInvalidQuantityChange={onInvalidQuantityChange}
 			/>,
 		);
 
@@ -90,88 +92,105 @@ describe('QuantityInput', () => {
 
 		// Test less than min value (should set invalidQuantity to true)
 		fireEvent.change(input, { target: { value: '0' } });
-		expect(invalidQuantity$.get()).toBe(true);
+		expect(onInvalidQuantityChange).toHaveBeenCalledWith(true);
 
 		// Test empty value (should set invalidQuantity to true)
 		fireEvent.change(input, { target: { value: '' } });
-		expect(invalidQuantity$.get()).toBe(true);
+		expect(onInvalidQuantityChange).toHaveBeenCalledWith(true);
 
 		// Reset to valid value
 		fireEvent.change(input, { target: { value: '1' } });
-		expect(invalidQuantity$.get()).toBe(false);
+		expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
 	});
 
 	it('should increment quantity when increment button is clicked', () => {
-		const quantity$ = observable<string>('5');
+		const onQuantityChange = vi.fn();
 
-		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+		render(
+			<QuantityInput
+				{...defaultProps}
+				quantity="5"
+				decimals={0} // Set decimals to 0 for whole number increments
+				onQuantityChange={onQuantityChange}
+			/>,
+		);
 
 		const incrementButton = screen.getAllByRole('button')[1]; // The second button is the increment button
 		fireEvent.click(incrementButton);
 
-		expect(quantity$.get()).toBe('6');
+		expect(onQuantityChange).toHaveBeenCalledWith('6');
 	});
 
 	it('should decrement quantity when decrement button is clicked', () => {
-		const quantity$ = observable<string>('5');
+		const onQuantityChange = vi.fn();
 
-		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+		render(
+			<QuantityInput
+				{...defaultProps}
+				quantity="5"
+				decimals={0} // Set decimals to 0 for whole number decrements
+				onQuantityChange={onQuantityChange}
+			/>,
+		);
 
 		const decrementButton = screen.getAllByRole('button')[0]; // The first button is the decrement button
 		fireEvent.click(decrementButton);
 
-		expect(quantity$.get()).toBe('4');
+		expect(onQuantityChange).toHaveBeenCalledWith('4');
 	});
 
 	it('should disable decrement button when quantity is minimum value', () => {
-		const quantity$ = observable<string>('0.1');
-
-		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+		render(<QuantityInput {...defaultProps} quantity="0.1" />);
 
 		const decrementButton = screen.getAllByRole('button')[0]; // The first button is the decrement button
 		expect(decrementButton).toBeDisabled();
 	});
 
 	it('should disable increment button when quantity is maximum value', () => {
-		const quantity$ = observable<string>('10');
-
-		render(<QuantityInput {...defaultProps} $quantity={quantity$} />);
+		render(<QuantityInput {...defaultProps} quantity="10" />);
 
 		const incrementButton = screen.getAllByRole('button')[1]; // The second button is the increment button
 		expect(incrementButton).toBeDisabled();
 	});
 
 	it('should properly handle non-zero decimals for minimum values', () => {
-		const quantity$ = observable<string>('1');
+		const onQuantityChange = vi.fn();
 
 		render(
-			<QuantityInput {...defaultProps} $quantity={quantity$} decimals={1} />,
+			<QuantityInput
+				{...defaultProps}
+				quantity="1"
+				onQuantityChange={onQuantityChange}
+				decimals={1}
+			/>,
 		);
 
-		// Set to 1 first
-		const input = screen.getByRole('textbox', { name: /Enter quantity/i });
-		fireEvent.change(input, { target: { value: '1' } });
-
-		// Click decrement button, should go to minimum value
-		const decrementButton = screen.getAllByRole('button')[0]; // The first button is the decrement button
+		// Click decrement button multiple times to reach minimum value
+		const decrementButton = screen.getAllByRole('button')[0];
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
+		fireEvent.click(decrementButton);
 		fireEvent.click(decrementButton);
 
 		// For decimals=1, the min value should be 0.1
-		expect(quantity$.get()).toBe('0.1');
-
-		// Clicking again shouldn't reduce below minimum
-		fireEvent.click(decrementButton);
-		expect(quantity$.get()).toBe('0.1');
+		expect(onQuantityChange).toHaveBeenLastCalledWith('0.1');
 	});
 
 	it('should cap quantity to maxQuantity when incrementing past the maximum', () => {
-		const quantity$ = observable<string>('9');
+		const onQuantityChange = vi.fn();
 		const maxQuantity = '10';
 
 		render(
 			<QuantityInput
 				{...defaultProps}
-				$quantity={quantity$}
+				quantity="9"
+				decimals={0} // Set decimals to 0 for whole number increments
+				onQuantityChange={onQuantityChange}
 				maxQuantity={maxQuantity}
 			/>,
 		);
@@ -181,23 +200,20 @@ describe('QuantityInput', () => {
 		fireEvent.click(incrementButton);
 
 		// Value should be 10
-		expect(quantity$.get()).toBe('10');
-
-		// Click increment again - should still be capped at 10
-		fireEvent.click(incrementButton);
-		expect(quantity$.get()).toBe('10');
+		expect(onQuantityChange).toHaveBeenCalledWith('10');
 	});
 
 	it('should set quantity to maxQuantity when direct input exceeds max', () => {
-		const quantity$ = observable<string>('5');
-		const invalidQuantity$ = observable<boolean>(false);
+		const onQuantityChange = vi.fn();
+		const onInvalidQuantityChange = vi.fn();
 		const maxQuantity = '10';
 
 		render(
 			<QuantityInput
 				{...defaultProps}
-				$quantity={quantity$}
-				$invalidQuantity={invalidQuantity$}
+				quantity="5"
+				onQuantityChange={onQuantityChange}
+				onInvalidQuantityChange={onInvalidQuantityChange}
 				maxQuantity={maxQuantity}
 			/>,
 		);
@@ -206,7 +222,90 @@ describe('QuantityInput', () => {
 		fireEvent.change(input, { target: { value: '15' } });
 
 		// Value should be capped at max
-		expect(quantity$.get()).toBe('10');
-		expect(invalidQuantity$.get()).toBe(false);
+		expect(onQuantityChange).toHaveBeenCalledWith('10');
+		expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
+	});
+
+	describe('with 2 decimals', () => {
+		const defaultPropsDecimals2 = {
+			...defaultProps,
+			decimals: 2,
+			quantity: '1.00',
+			maxQuantity: '10.00',
+		};
+
+		it('should handle increment with 2 decimal places', () => {
+			const onQuantityChange = vi.fn();
+			render(
+				<QuantityInput
+					{...defaultPropsDecimals2}
+					quantity="1.50"
+					onQuantityChange={onQuantityChange}
+				/>,
+			);
+
+			const incrementButton = screen.getAllByRole('button')[1];
+			fireEvent.click(incrementButton);
+
+			expect(onQuantityChange).toHaveBeenCalledWith('1.51');
+		});
+
+		it('should handle decrement with 2 decimal places', () => {
+			const onQuantityChange = vi.fn();
+			render(
+				<QuantityInput
+					{...defaultPropsDecimals2}
+					quantity="1.50"
+					onQuantityChange={onQuantityChange}
+				/>,
+			);
+
+			const decrementButton = screen.getAllByRole('button')[0];
+			fireEvent.click(decrementButton);
+
+			expect(onQuantityChange).toHaveBeenCalledWith('1.49');
+		});
+
+		it('should enforce minimum value with 2 decimal places', () => {
+			const onQuantityChange = vi.fn();
+			render(
+				<QuantityInput
+					{...defaultPropsDecimals2}
+					quantity="0.02"
+					onQuantityChange={onQuantityChange}
+				/>,
+			);
+
+			const decrementButton = screen.getAllByRole('button')[0];
+			fireEvent.click(decrementButton);
+
+			expect(onQuantityChange).toHaveBeenCalledWith('0.01');
+			expect(decrementButton).toBeDisabled();
+		});
+
+		it('should handle direct input with 2 decimal places', () => {
+			const onQuantityChange = vi.fn();
+			const onInvalidQuantityChange = vi.fn();
+
+			render(
+				<QuantityInput
+					{...defaultPropsDecimals2}
+					onQuantityChange={onQuantityChange}
+					onInvalidQuantityChange={onInvalidQuantityChange}
+				/>,
+			);
+
+			const input = screen.getByRole('textbox', { name: /Enter quantity/i });
+
+			// Test valid input
+			fireEvent.change(input, { target: { value: '1.23' } });
+			expect(onQuantityChange).toHaveBeenCalledWith('1.23');
+			expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
+
+			// Test too many decimal places
+			fireEvent.change(input, { target: { value: '1.234' } });
+			expect(onQuantityChange).toHaveBeenCalledWith('1.23');
+			expect(onInvalidQuantityChange).toHaveBeenCalledWith(false);
+		});
 	});
 });

package/src/react/ui/modals/_internal/components/quantityInput/index.tsx

@@ -1,37 +1,191 @@
 'use client';
 
-import type { Observable } from '@legendapp/state';
-import { observer } from '@legendapp/state/react';
-import { QuantityInputBase } from './QuantityInputBase';
+import {
+	AddIcon,
+	IconButton,
+	NumericInput,
+	SubtractIcon,
+} from '@0xsequence/design-system';
+import * as dn from 'dnum';
+import { useEffect, useState } from 'react';
+import { cn } from '../../../../../../utils';
 
 type QuantityInputProps = {
-	$quantity: Observable<string>;
-	$invalidQuantity: Observable<boolean>;
+	quantity: string;
+	invalidQuantity: boolean;
+	onQuantityChange: (quantity: string) => void;
+	onInvalidQuantityChange: (invalid: boolean) => void;
 	decimals: number;
 	maxQuantity: string;
 	className?: string;
 	disabled?: boolean;
 };
 
-// Using observer to ensure re-render on observable changes
-export default observer(function QuantityInput({
-	$quantity,
-	$invalidQuantity,
+export default function QuantityInput({
+	quantity,
+	invalidQuantity,
+	onQuantityChange,
+	onInvalidQuantityChange,
 	decimals,
 	maxQuantity,
 	className,
 	disabled,
 }: QuantityInputProps) {
+	const dnMaxQuantity = dn.from(maxQuantity, decimals);
+	const minIncrement = decimals > 0 ? `0.${'1'.padStart(decimals, '0')}` : '1';
+	const dnIncrement = dn.from(minIncrement, decimals);
+	const min = decimals > 0 ? minIncrement : '0';
+	const dnMin = dn.from(min, decimals);
+
+	const [dnQuantity, setDnQuantity] = useState(dn.from(quantity, decimals));
+	const [localQuantity, setLocalQuantity] = useState(quantity);
+
+	// Sync internal state with external prop changes and validate initial quantity
+	useEffect(() => {
+		const dnInitialQuantity = dn.from(quantity, decimals);
+		const dnMaxQuantity = dn.from(maxQuantity, decimals);
+
+		// Check if initial quantity exceeds max quantity
+		if (dn.greaterThan(dnInitialQuantity, dnMaxQuantity)) {
+			// If initial quantity is too high, set it to max quantity
+			const validQuantity = dn.toString(dnMaxQuantity, decimals);
+			setLocalQuantity(validQuantity);
+			setDnQuantity(dnMaxQuantity);
+			onQuantityChange(validQuantity);
+			onInvalidQuantityChange(false);
+		} else {
+			setLocalQuantity(quantity);
+			setDnQuantity(dnInitialQuantity);
+		}
+	}, [
+		quantity,
+		decimals,
+		maxQuantity,
+		onQuantityChange,
+		onInvalidQuantityChange,
+	]);
+
+	const setQuantity = ({
+		value,
+		isValid,
+	}: {
+		value: string;
+		isValid: boolean;
+	}) => {
+		setLocalQuantity(value);
+		if (isValid) {
+			onQuantityChange(value);
+			setDnQuantity(dn.from(value, decimals));
+			onInvalidQuantityChange(false);
+		} else {
+			onInvalidQuantityChange(true);
+		}
+	};
+
+	function handleChangeQuantity(value: string) {
+		if (!value || Number.isNaN(Number(value)) || value.endsWith('.')) {
+			setQuantity({
+				value: value,
+				isValid: false,
+			});
+			return;
+		}
+		const dnValue = dn.from(value, decimals);
+		const isBiggerThanMax = dn.greaterThan(dnValue, dnMaxQuantity);
+		const isLessThanMin = dn.lessThan(dnValue, dnMin);
+
+		if (isLessThanMin) {
+			setQuantity({
+				value: value, // Trying to enter fraction starting with 0
+				isValid: false,
+			});
+			return;
+		}
+
+		if (isBiggerThanMax) {
+			setQuantity({
+				value: maxQuantity,
+				isValid: true, // Is vaid is true because we override the value
+			});
+			return;
+		}
+
+		setQuantity({
+			value: dn.toString(dnValue, decimals),
+			isValid: true,
+		});
+	}
+
+	function handleIncrement() {
+		const newValue = dn.add(dnQuantity, dnIncrement);
+		if (dn.greaterThanOrEqual(newValue, dnMaxQuantity)) {
+			setQuantity({
+				value: dn.toString(dnMaxQuantity, decimals),
+				isValid: true,
+			});
+		} else {
+			setQuantity({
+				value: dn.toString(newValue, decimals),
+				isValid: true,
+			});
+		}
+	}
+
+	function handleDecrement() {
+		const newValue = dn.subtract(dnQuantity, dnIncrement);
+		if (dn.lessThanOrEqual(newValue, dnMin)) {
+			setQuantity({
+				value: dn.toString(dnMin, decimals),
+				isValid: true,
+			});
+		} else {
+			setQuantity({
+				value: dn.toString(newValue, decimals),
+				isValid: true,
+			});
+		}
+	}
+
 	return (
-		<QuantityInputBase
-			value={$quantity.get()}
-			onChange={(value) => $quantity.set(value)}
-			isInvalid={$invalidQuantity.get()}
-			onInvalidChange={(isInvalid) => $invalidQuantity.set(isInvalid)}
-			decimals={decimals}
-			maxQuantity={maxQuantity}
-			className={className}
-			disabled={disabled}
-		/>
+		<div
+			className={cn(
+				'flex w-full flex-col [&>label>div>div>div:has(:disabled):hover]:opacity-100 [&>label>div>div>div:has(:disabled)]:opacity-100 [&>label>div>div>div>input]:text-xs [&>label>div>div>div]:h-9 [&>label>div>div>div]:rounded [&>label>div>div>div]:pr-0 [&>label>div>div>div]:pl-3 [&>label>div>div>div]:text-xs [&>label]:gap-[2px]',
+				className,
+				disabled && 'pointer-events-none opacity-50',
+			)}
+		>
+			<NumericInput
+				className="w-full pl-1"
+				name={'quantity'}
+				decimals={decimals || 0}
+				label={'Enter quantity'}
+				labelLocation="top"
+				controls={
+					<div className="mr-2 flex items-center gap-1">
+						<IconButton
+							disabled={dn.lessThanOrEqual(dnQuantity, dnMin)}
+							onClick={handleDecrement}
+							size="xs"
+							icon={SubtractIcon}
+						/>
+
+						<IconButton
+							disabled={dn.greaterThanOrEqual(dnQuantity, dnMaxQuantity)}
+							onClick={handleIncrement}
+							size="xs"
+							icon={AddIcon}
+						/>
+					</div>
+				}
+				value={localQuantity}
+				onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+					handleChangeQuantity(e.target.value)
+				}
+				width={'full'}
+			/>
+			{invalidQuantity && (
+				<div className="text-negative text-sm">Invalid quantity</div>
+			)}
+		</div>
 	);
-});
+}