Extract NumberInput component with auto-repeat nudge buttons

[benmosher]

Summary

Refactored the number input UI pattern into a reusable NumberInput component to reduce code duplication and improve maintainability.

Key Changes

• Created new NumberInput component (src/NumberInput.tsx) that encapsulates:

  • A number input field with min/max/step validation
  • Auto-repeat increment/decrement buttons (nudge up/down)
  • The useAutoRepeat hook logic for button interactions

• Refactored BarComputer component to use the new NumberInput component:

  • Removed inline nudge button logic and useAutoRepeat hook calls
  • Replaced 48 lines of JSX with a single <NumberInput /> component call
  • Simplified state management by delegating to the component's onChange prop

• Refactored MaxEditor component to use NumberInput:

  • Replaced basic number input with NumberInput for consistency
  • Added step validation (step of 5) and min constraint (0)

• Updated imports in App.tsx:

  • Removed useAutoRepeat import (now internal to NumberInput)
  • Added NumberInput import

Implementation Details

• The NumberInput component accepts flexible props via spread operator, allowing customization of standard HTML input attributes
• Nudge buttons only render when a step value is provided
• The component maintains the same visual styling and behavior as the original implementation
• Type-safe prop handling with proper TypeScript generics to exclude conflicting props

https://claude.ai/code/session_01GRvYTjGFpp5DbYqZNtfkFP