8c52d6a275
- Add comprehensive TDD documentation to CLAUDE.md with coverage requirements and examples - Extract reusable UI components to frontend/src/components/ui/ (Modal, FormInput, Button, Alert, etc.) - Add shared constants (schedulePresets) and utility hooks (useCrudMutation, useFormValidation) - Update frontend/CLAUDE.md with component documentation and usage examples - Refactor CreateTaskModal to use shared components and constants - Fix test assertions to be more robust and accurate across all test files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import CurrencyInput from './CurrencyInput';
|
|
|
|
interface FormCurrencyInputProps {
|
|
label?: string;
|
|
error?: string;
|
|
hint?: string;
|
|
value: number;
|
|
onChange: (cents: number) => void;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
placeholder?: string;
|
|
min?: number;
|
|
max?: number;
|
|
/** Container class name */
|
|
containerClassName?: string;
|
|
/** Input class name */
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Form wrapper for CurrencyInput that adds label, error, and hint support.
|
|
* Uses the ATM-style currency input where digits are entered as cents.
|
|
*/
|
|
export const FormCurrencyInput: React.FC<FormCurrencyInputProps> = ({
|
|
label,
|
|
error,
|
|
hint,
|
|
value,
|
|
onChange,
|
|
disabled = false,
|
|
required = false,
|
|
placeholder = '$0.00',
|
|
min,
|
|
max,
|
|
containerClassName = '',
|
|
className = '',
|
|
}) => {
|
|
const baseInputClasses =
|
|
'w-full px-3 py-2 border rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors';
|
|
|
|
const stateClasses = error
|
|
? 'border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500'
|
|
: 'border-gray-300 dark:border-gray-600';
|
|
|
|
const disabledClasses = disabled
|
|
? 'bg-gray-100 dark:bg-gray-800 cursor-not-allowed opacity-60'
|
|
: '';
|
|
|
|
return (
|
|
<div className={containerClassName}>
|
|
{label && (
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
{label}
|
|
{required && <span className="text-red-500 ml-1">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
<CurrencyInput
|
|
value={value}
|
|
onChange={onChange}
|
|
disabled={disabled}
|
|
required={required}
|
|
placeholder={placeholder}
|
|
min={min}
|
|
max={max}
|
|
className={`${baseInputClasses} ${stateClasses} ${disabledClasses} ${className}`}
|
|
/>
|
|
|
|
{error && (
|
|
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>
|
|
)}
|
|
|
|
{hint && !error && (
|
|
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{hint}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FormCurrencyInput;
|