Fix placeholder refactor

kamarmack · kamarmack · commit 985276f38ad4 · 2025-06-17T04:19:24.000-04:00
diff --git a/src/features/data/components/fields/DomainField.tsx b/src/features/data/components/fields/DomainField.tsx
@@ -5,6 +5,11 @@ import { Input } from '../../../../components/ui/input';
 import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps';
 import { handleDomainFieldBlur } from '../../utils/handleDomainFieldBlur';
 import { default as cn } from '../../../../lib/cn';
+import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
+import {
+	baseTranslations,
+	useLanguage,
+} from '../../../../hooks/useLocalization';
 
 /**
  * DomainField component renders an input field for handling web domain values in a form.
@@ -54,6 +59,8 @@ export const DomainField = <
 		name,
 	});
 	const required = isFieldRequired({ fieldSpec, operation });
+	const { language } = useLanguage(baseTranslations);
+	const placeholder = getPlaceholder(language, name, fieldSpec, 'example.com');
 
 	return (
 		<Input
@@ -63,7 +70,7 @@ export const DomainField = <
 				field: R.pick(['onBlur'], field),
 				setError,
 			})}
-			placeholder='example.com'
+			placeholder={placeholder}
 			required={required}
 		/>
 	);
diff --git a/src/features/data/components/fields/EmailAddressField.tsx b/src/features/data/components/fields/EmailAddressField.tsx
@@ -5,6 +5,11 @@ import { Input } from '../../../../components/ui/input';
 import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps';
 import { handleEmailAddressFieldBlur } from '../../utils/handleEmailAddressFieldBlur';
 import { default as cn } from '../../../../lib/cn';
+import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
+import {
+	baseTranslations,
+	useLanguage,
+} from '../../../../hooks/useLocalization';
 
 /**
  * EmailAddressField component renders an input field for handling email address values in a form.
@@ -54,6 +59,13 @@ export const EmailAddressField = <
 		name,
 	});
 	const required = isFieldRequired({ fieldSpec, operation });
+	const { language } = useLanguage(baseTranslations);
+	const placeholder = getPlaceholder(
+		language,
+		name,
+		fieldSpec,
+		'alice@example.com',
+	);
 
 	return (
 		<Input
@@ -63,7 +75,7 @@ export const EmailAddressField = <
 				field: R.pick(['onBlur'], field),
 				setError,
 			})}
-			placeholder='john@example.com'
+			placeholder={placeholder}
 			required={required}
 		/>
 	);
diff --git a/src/features/data/components/fields/FloatingPointNumberField.tsx b/src/features/data/components/fields/FloatingPointNumberField.tsx
@@ -5,7 +5,6 @@ import { Input } from '../../../../components/ui/input';
 import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps';
 import { handleFloatingPointFieldBlur } from '../../utils/handleFloatingPointFieldBlur';
 import { handleFloatingPointFieldKeyUp } from '../../utils/handleFloatingPointFieldKeyUp';
-// import { getGeneralizedFormFieldLabel as getLabel } from '../../utils/getGeneralizedFormFieldLabel';
 import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
 import cn from '../../../../lib/cn';
 import {
diff --git a/src/features/data/components/fields/IntegerField.tsx b/src/features/data/components/fields/IntegerField.tsx
@@ -5,7 +5,6 @@ import { Input } from '../../../../components/ui/input';
 import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps';
 import { handleIntegerFieldBlur } from '../../utils/handleIntegerFieldBlur';
 import { handleIntegerFieldKeyUp } from '../../utils/handleIntegerFieldKeyUp';
-// import { getGeneralizedFormFieldLabel as getLabel } from '../../utils/getGeneralizedFormFieldLabel';
 import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
 import { default as cn } from '../../../../lib/cn';
 import {
diff --git a/src/features/data/components/fields/InternationalPhoneNumberField.tsx b/src/features/data/components/fields/InternationalPhoneNumberField.tsx
@@ -19,6 +19,11 @@ import { default as cn } from '../../../../lib/cn';
 import { useEffect, useState } from 'react';
 import { Skeleton } from '../../../../components/ui/skeleton';
 import { baseLocalStorageUtil } from '../../../../lib/localStorage';
+import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
+import {
+	baseTranslations,
+	useLanguage,
+} from '../../../../hooks/useLocalization';
 
 /**
  * InternationalPhoneNumberField component renders an input field for handling phone numbers with a country code selector.
@@ -71,6 +76,13 @@ export const InternationalPhoneNumberField = <
 		name,
 	});
 	const required = isFieldRequired({ fieldSpec, operation });
+	const { language } = useLanguage(baseTranslations);
+	const placeholder = getPlaceholder(
+		language,
+		name,
+		fieldSpec,
+		'(813) 555-1234',
+	);
 
 	useEffect(() => {
 		const phoneNumberRegion =
@@ -145,7 +157,7 @@ export const InternationalPhoneNumberField = <
 						setError,
 						phoneNumberRegion: phoneNumberCountry.two_letter_country_code,
 					})}
-					placeholder='(813) 555-1234'
+					placeholder={placeholder}
 					required={required}
 				/>
 			</div>
diff --git a/src/features/data/components/fields/ListField.tsx b/src/features/data/components/fields/ListField.tsx
@@ -9,7 +9,6 @@ import {
 } from 'react-hook-form';
 import { v4 } from 'uuid';
 import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps';
-// import { getGeneralizedFormFieldLabel as getLabel } from '../../utils/getGeneralizedFormFieldLabel';
 import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
 import { GeneralizedFormFieldError } from '../GeneralizedFormFieldError';
 import { GoPlus, GoXCircle } from 'react-icons/go';
diff --git a/src/features/data/components/fields/LongTextField.tsx b/src/features/data/components/fields/LongTextField.tsx
@@ -2,7 +2,6 @@ import { FieldValues, useController } from 'react-hook-form';
 import { isFieldRequired } from 'ergonomic';
 import { Textarea } from '../../../../components/ui/textarea';
 import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps';
-// import { getGeneralizedFormFieldLabel as getLabel } from '../../utils/getGeneralizedFormFieldLabel';
 import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
 import { default as cn } from '../../../../lib/cn';
 import {
diff --git a/src/features/data/components/fields/PercentageField.tsx b/src/features/data/components/fields/PercentageField.tsx
@@ -3,7 +3,6 @@ import { FieldValues, useController } from 'react-hook-form';
 import { isFieldRequired } from 'ergonomic';
 import { Input } from '../../../../components/ui/input';
 import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps';
-// import { getGeneralizedFormFieldLabel as getLabel } from '../../utils/getGeneralizedFormFieldLabel';
 import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
 import { handlePercentageFieldKeyUp } from '../../utils/handlePercentageFieldKeyUp';
 import { default as cn } from '../../../../lib/cn';
diff --git a/src/features/data/components/fields/RichTextField.tsx b/src/features/data/components/fields/RichTextField.tsx
@@ -5,6 +5,11 @@ import { FieldValues, useController } from 'react-hook-form';
 import dynamic from 'next/dynamic';
 import { Skeleton } from '../../../../components/ui/skeleton';
 import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps';
+import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
+import {
+	baseTranslations,
+	useLanguage,
+} from '../../../../hooks/useLocalization';
 
 /**
  * RichTextField component renders a rich text editor
@@ -60,6 +65,13 @@ export const RichTextField = <
 		disabled,
 		name,
 	});
+	const { language } = useLanguage(baseTranslations);
+	const placeholder = getPlaceholder(
+		language,
+		name,
+		fieldSpec,
+		'Enter text here...',
+	);
 
 	// Initialize rich text
 	useEffect(() => {
@@ -97,7 +109,7 @@ export const RichTextField = <
 				}
 				setRichText(v);
 			}}
-			placeholder='Enter text here...'
+			placeholder={placeholder}
 			theme='snow'
 			value={richText}
 		/>
diff --git a/src/features/data/components/fields/SensitiveTextField.tsx b/src/features/data/components/fields/SensitiveTextField.tsx
@@ -3,6 +3,11 @@ import { FieldValues, useController } from 'react-hook-form';
 import { Input } from '../../../../components/ui/input';
 import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps';
 import { default as cn } from '../../../../lib/cn';
+import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
+import {
+	baseTranslations,
+	useLanguage,
+} from '../../../../hooks/useLocalization';
 
 /**
  * SensitiveTextField component renders a password input field for handling sensitive text values.
@@ -44,12 +49,14 @@ export const SensitiveTextField = <
 		name,
 	});
 	const required = isFieldRequired({ fieldSpec, operation });
+	const { language } = useLanguage(baseTranslations);
+	const placeholder = getPlaceholder(language, name, fieldSpec, '•••••••••••');
 
 	return (
 		<Input
 			{...field}
 			className={cn('block w-full p-2 border rounded-md bg-white', className)}
-			placeholder='•••••••••••'
+			placeholder={placeholder}
 			required={required}
 			type='password'
 		/>
diff --git a/src/features/data/components/fields/ShortTextField.tsx b/src/features/data/components/fields/ShortTextField.tsx
@@ -2,7 +2,6 @@ import { isFieldRequired } from 'ergonomic';
 import { Input } from '../../../../components/ui/input';
 import { FieldValues, useController } from 'react-hook-form';
 import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps';
-// import { getGeneralizedFormFieldLabel as getLabel } from '../../utils/getGeneralizedFormFieldLabel';
 import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
 import { default as cn } from '../../../../lib/cn';
 import {
diff --git a/src/features/data/components/fields/UnitedStatesPhoneNumberField.tsx b/src/features/data/components/fields/UnitedStatesPhoneNumberField.tsx
@@ -8,6 +8,11 @@ import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps
 import { handleUnitedStatesPhoneNumberFieldBlur } from '../../utils/handleUnitedStatesPhoneNumberFieldBlur';
 import { handleUnitedStatesPhoneNumberFieldKeyUp } from '../../utils/handleUnitedStatesPhoneNumberFieldKeyUp';
 import { default as cn } from '../../../../lib/cn';
+import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
+import {
+	baseTranslations,
+	useLanguage,
+} from '../../../../hooks/useLocalization';
 
 /**
  * UnitedStatesPhoneNumberField component renders an input field for handling phone numbers with a country code selector.
@@ -57,6 +62,13 @@ export const UnitedStatesPhoneNumberField = <
 		name,
 	});
 	const required = isFieldRequired({ fieldSpec, operation });
+	const { language } = useLanguage(baseTranslations);
+	const placeholder = getPlaceholder(
+		language,
+		name,
+		fieldSpec,
+		'(813) 555-1234',
+	);
 
 	return (
 		<div className='flex items-center space-x-2'>
@@ -93,7 +105,7 @@ export const UnitedStatesPhoneNumberField = <
 						field: R.pick(['onChange'], field),
 						setError,
 					})}
-					placeholder='(813) 555-1234'
+					placeholder={placeholder}
 					required={required}
 				/>
 			</div>
diff --git a/src/features/data/components/fields/UrlField.tsx b/src/features/data/components/fields/UrlField.tsx
@@ -5,6 +5,11 @@ import { Input } from '../../../../components/ui/input';
 import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps';
 import { handleUrlFieldBlur } from '../../utils/handleUrlFieldBlur';
 import { default as cn } from '../../../../lib/cn';
+import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
+import {
+	baseTranslations,
+	useLanguage,
+} from '../../../../hooks/useLocalization';
 
 /**
  * UrlField component renders an input field for handling URL values, with optional guidance for file storage paths.
@@ -55,6 +60,13 @@ export const UrlField = <
 		name,
 	});
 	const required = isFieldRequired({ fieldSpec, operation });
+	const { language } = useLanguage(baseTranslations);
+	const placeholder = getPlaceholder(
+		language,
+		name,
+		fieldSpec,
+		'https://example.com',
+	);
 
 	return (
 		<div>
@@ -73,7 +85,7 @@ export const UrlField = <
 					field: R.pick(['onBlur'], field),
 					setError,
 				})}
-				placeholder='https://example.com'
+				placeholder={placeholder}
 				required={required}
 			/>
 		</div>
diff --git a/src/features/data/components/fields/UsdField.tsx b/src/features/data/components/fields/UsdField.tsx
@@ -5,6 +5,11 @@ import { isFieldRequired } from 'ergonomic';
 import { Input } from '../../../../components/ui/input';
 import { GeneralizedFormFieldProps } from '../../types/GeneralizedFormFieldProps';
 import { default as cn } from '../../../../lib/cn';
+import { getGeneralizedFormFieldPlaceholder as getPlaceholder } from '../../utils/getGeneralizedFormFieldLabel';
+import {
+	baseTranslations,
+	useLanguage,
+} from '../../../../hooks/useLocalization';
 
 /**
  * UsdField component renders an input field for handling currency values, formatted in USD cents.
@@ -53,6 +58,9 @@ export const UsdField = <
 		name,
 	});
 	const required = isFieldRequired({ fieldSpec, operation });
+	const { language } = useLanguage(baseTranslations);
+	const placeholder = getPlaceholder(language, name, fieldSpec, '$0.00');
+
 	return (
 		<Input
 			{...field}
@@ -61,7 +69,7 @@ export const UsdField = <
 				field: R.pick(['onChange'], field),
 				setError,
 			})}
-			placeholder='$0.00'
+			placeholder={placeholder}
 			required={required}
 		/>
 	);
diff --git a/src/features/data/utils/getGeneralizedFormFieldLabel.ts b/src/features/data/utils/getGeneralizedFormFieldLabel.ts
@@ -15,7 +15,8 @@ export const getGeneralizedFormFieldPlaceholder = (
 	language: 'en' | 'es',
 	fieldKey: string,
 	fieldSpec: GeneralizedFieldSpec,
+	fallback = '',
 ): string =>
 	fieldSpec.meta?.localized_placeholder
 		? fieldSpec.meta.localized_placeholder[language]
-		: getGeneralizedFormFieldLabel(language, fieldKey, fieldSpec);
+		: fallback || getGeneralizedFormFieldLabel(language, fieldKey, fieldSpec);
