pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 06:31:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add FormDescription hints across fields

Browse Source 
Enhance forms by adding descriptive hints (with examples) to all fields (website URLs, heights, speeds, lengths, etc.) using the existing enhanced validation system. Includes updating ParkForm and RideForm to display field-specific guidance (and field hints for URLs, measurements, and submission notes), leveraging field hints generated from enhancedValidation.
This commit is contained in:
gpt-engineer-app[bot]
2025-11-11 23:29:10 +00:00
parent 985454f0d9
commit 42f26acb49
2 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/admin/ParkForm.tsx
View File

@@ -617,6 +617,7 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
{...register('website_url')} {...register('website_url')}
placeholder="https://..." placeholder="https://..."
/> />
<p className="text-xs text-muted-foreground">{fieldHints.websiteUrl}</p>
{errors.website_url && ( {errors.website_url && (
<p className="text-sm text-destructive">{errors.website_url.message}</p> <p className="text-sm text-destructive">{errors.website_url.message}</p>
)} )}
@@ -629,6 +630,7 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
{...register('phone')} {...register('phone')}
placeholder="+1 (555) 123-4567" placeholder="+1 (555) 123-4567"
/> />
<p className="text-xs text-muted-foreground">{fieldHints.phone}</p>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@@ -639,6 +641,7 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
{...register('email')} {...register('email')}
placeholder="contact@park.com" placeholder="contact@park.com"
/> />
<p className="text-xs text-muted-foreground">{fieldHints.email}</p>
{errors.email && ( {errors.email && (
<p className="text-sm text-destructive">{errors.email.message}</p> <p className="text-sm text-destructive">{errors.email.message}</p>
)} )}
@@ -670,7 +673,7 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
placeholder="https://example.com/article" placeholder="https://example.com/article"
/> />
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
Where did you find this information? (e.g., official website, news article, press release) {fieldHints.sourceUrl}
</p> </p>
{errors.source_url && ( {errors.source_url && (
<p className="text-sm text-destructive">{errors.source_url.message}</p> <p className="text-sm text-destructive">{errors.source_url.message}</p>
@@ -692,7 +695,7 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
maxLength={1000} maxLength={1000}
/> />
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{watch('submission_notes')?.length || 0}/1000 characters {fieldHints.submissionNotes} ({watch('submission_notes')?.length || 0}/1000 characters)
</p> </p>
{errors.submission_notes && ( {errors.submission_notes && (
<p className="text-sm text-destructive">{errors.submission_notes.message}</p> <p className="text-sm text-destructive">{errors.submission_notes.message}</p>

13
src/components/admin/RideForm.tsx
View File

@@ -775,10 +775,7 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
{...register('height_requirement', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })} {...register('height_requirement', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
placeholder={measurementSystem === 'imperial' ? 'e.g. 47' : 'e.g. 120'} placeholder={measurementSystem === 'imperial' ? 'e.g. 47' : 'e.g. 120'}
/> />
<div className="flex items-start gap-2 text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">{fieldHints.heightRequirement}</p>
<Info className="h-3.5 w-3.5 mt-0.5 flex-shrink-0" />
<p>Minimum height to ride. Values automatically convert to {measurementSystem === 'imperial' ? 'inches' : 'cm'}.</p>
</div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@@ -1370,6 +1367,7 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
{...register('capacity_per_hour', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })} {...register('capacity_per_hour', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
placeholder="e.g. 1200" placeholder="e.g. 1200"
/> />
<p className="text-xs text-muted-foreground">{fieldHints.capacity}</p>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@@ -1381,6 +1379,7 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
{...register('duration_seconds', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })} {...register('duration_seconds', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
placeholder="e.g. 180" placeholder="e.g. 180"
/> />
<p className="text-xs text-muted-foreground">{fieldHints.duration}</p>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@@ -1393,6 +1392,7 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
{...register('max_speed_kmh', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })} {...register('max_speed_kmh', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
placeholder={measurementSystem === 'imperial' ? 'e.g. 50' : 'e.g. 80.5'} placeholder={measurementSystem === 'imperial' ? 'e.g. 50' : 'e.g. 80.5'}
/> />
<p className="text-xs text-muted-foreground">{fieldHints.speed}</p>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@@ -1428,6 +1428,7 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
{...register('inversions', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })} {...register('inversions', { setValueAs: (v) => v === "" ? undefined : parseFloat(v) })}
placeholder="e.g. 7" placeholder="e.g. 7"
/> />
<p className="text-xs text-muted-foreground">{fieldHints.inversions}</p>
</div> </div>
</div> </div>
</div> </div>
@@ -1481,7 +1482,7 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
placeholder="https://example.com/article" placeholder="https://example.com/article"
/> />
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
Where did you find this information? (e.g., official website, news article, press release) {fieldHints.sourceUrl}
</p> </p>
{errors.source_url && ( {errors.source_url && (
<p className="text-sm text-destructive">{errors.source_url.message}</p> <p className="text-sm text-destructive">{errors.source_url.message}</p>
@@ -1503,7 +1504,7 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
maxLength={1000} maxLength={1000}
/> />
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{watch('submission_notes')?.length || 0}/1000 characters {fieldHints.submissionNotes} ({watch('submission_notes')?.length || 0}/1000 characters)
</p> </p>
{errors.submission_notes && ( {errors.submission_notes && (
<p className="text-sm text-destructive">{errors.submission_notes.message}</p> <p className="text-sm text-destructive">{errors.submission_notes.message}</p>