mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 12:31:26 -05:00
Create unified FormFieldWrapper
Introduce a new reusable form field component that automatically shows hints, validation messages, and terminology tooltips based on field type; refactor forms to demonstrate usage.
This commit is contained in:
gpt-engineer-app[bot]
278
src/components/examples/FormFieldWrapperDemo.tsx
Normal file
278
src/components/examples/FormFieldWrapperDemo.tsx
Normal file
@@ -0,0 +1,278 @@
|
||||
/**
|
||||
* FormFieldWrapper Live Demo
|
||||
*
|
||||
* This component demonstrates the FormFieldWrapper in action
|
||||
* You can view this by navigating to /examples/form-field-wrapper
|
||||
*/
|
||||
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { FormFieldWrapper, formFieldPresets } from '@/components/ui/form-field-wrapper';
|
||||
import { TooltipProvider } from '@/components/ui/tooltip';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
|
||||
export function FormFieldWrapperDemo() {
|
||||
const { register, formState: { errors }, watch, handleSubmit } = useForm();
|
||||
|
||||
const onSubmit = (data: any) => {
|
||||
console.log('Form submitted:', data);
|
||||
alert('Check console for form data');
|
||||
};
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="container mx-auto py-8 max-w-4xl">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>FormFieldWrapper Demo</CardTitle>
|
||||
<CardDescription>
|
||||
Interactive demonstration of the unified form field component
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Tabs defaultValue="basic">
|
||||
<TabsList className="grid w-full grid-cols-4">
|
||||
<TabsTrigger value="basic">Basic</TabsTrigger>
|
||||
<TabsTrigger value="terminology">Terminology</TabsTrigger>
|
||||
<TabsTrigger value="presets">Presets</TabsTrigger>
|
||||
<TabsTrigger value="advanced">Advanced</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6 mt-6">
|
||||
{/* Basic Examples */}
|
||||
<TabsContent value="basic" className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Basic Field Types</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
These fields automatically show appropriate hints and validation
|
||||
</p>
|
||||
|
||||
<FormFieldWrapper
|
||||
id="website_url"
|
||||
label="Website URL"
|
||||
fieldType="url"
|
||||
error={errors.website_url?.message as string}
|
||||
inputProps={{
|
||||
...register('website_url'),
|
||||
placeholder: "https://example.com"
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormFieldWrapper
|
||||
id="email"
|
||||
label="Email Address"
|
||||
fieldType="email"
|
||||
required
|
||||
error={errors.email?.message as string}
|
||||
inputProps={{
|
||||
...register('email', { required: 'Email is required' }),
|
||||
placeholder: "contact@example.com"
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormFieldWrapper
|
||||
id="phone"
|
||||
label="Phone Number"
|
||||
fieldType="phone"
|
||||
error={errors.phone?.message as string}
|
||||
inputProps={{
|
||||
...register('phone'),
|
||||
placeholder: "+1 (555) 123-4567"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* Terminology Examples */}
|
||||
<TabsContent value="terminology" className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Fields with Terminology</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Hover over labels with icons to see terminology definitions
|
||||
</p>
|
||||
|
||||
<FormFieldWrapper
|
||||
id="inversions"
|
||||
label="Inversions"
|
||||
fieldType="inversions"
|
||||
termKey="inversion"
|
||||
error={errors.inversions?.message as string}
|
||||
inputProps={{
|
||||
...register('inversions'),
|
||||
type: "number",
|
||||
min: 0,
|
||||
placeholder: "e.g. 7"
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormFieldWrapper
|
||||
id="max_speed"
|
||||
label="Max Speed (km/h)"
|
||||
fieldType="speed"
|
||||
termKey="kilometers-per-hour"
|
||||
error={errors.max_speed?.message as string}
|
||||
inputProps={{
|
||||
...register('max_speed'),
|
||||
type: "number",
|
||||
min: 0,
|
||||
step: 0.1,
|
||||
placeholder: "e.g. 193"
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormFieldWrapper
|
||||
id="max_height"
|
||||
label="Max Height (meters)"
|
||||
fieldType="height"
|
||||
termKey="meters"
|
||||
error={errors.max_height?.message as string}
|
||||
inputProps={{
|
||||
...register('max_height'),
|
||||
type: "number",
|
||||
min: 0,
|
||||
step: 0.1,
|
||||
placeholder: "e.g. 94"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* Preset Examples */}
|
||||
<TabsContent value="presets" className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Using Presets</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Common field configurations with one-line setup
|
||||
</p>
|
||||
|
||||
<FormFieldWrapper
|
||||
{...formFieldPresets.sourceUrl({})}
|
||||
id="source_url"
|
||||
error={errors.source_url?.message as string}
|
||||
inputProps={{
|
||||
...register('source_url'),
|
||||
placeholder: "https://source.com/article"
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormFieldWrapper
|
||||
{...formFieldPresets.heightRequirement({})}
|
||||
id="height_requirement"
|
||||
error={errors.height_requirement?.message as string}
|
||||
inputProps={{
|
||||
...register('height_requirement'),
|
||||
type: "number",
|
||||
min: 0,
|
||||
placeholder: "122"
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormFieldWrapper
|
||||
{...formFieldPresets.capacity({})}
|
||||
id="capacity"
|
||||
error={errors.capacity?.message as string}
|
||||
inputProps={{
|
||||
...register('capacity'),
|
||||
type: "number",
|
||||
min: 0,
|
||||
placeholder: "1200"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* Advanced Examples */}
|
||||
<TabsContent value="advanced" className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Advanced Features</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Textareas, character counting, and custom hints
|
||||
</p>
|
||||
|
||||
<FormFieldWrapper
|
||||
{...formFieldPresets.submissionNotes({})}
|
||||
id="submission_notes"
|
||||
value={watch('submission_notes')}
|
||||
error={errors.submission_notes?.message as string}
|
||||
textareaProps={{
|
||||
...register('submission_notes', {
|
||||
maxLength: { value: 1000, message: 'Maximum 1000 characters' }
|
||||
}),
|
||||
placeholder: "Add context for moderators...",
|
||||
rows: 4
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormFieldWrapper
|
||||
id="custom_field"
|
||||
label="Custom Field with Override"
|
||||
fieldType="text"
|
||||
hint="This is a custom hint that overrides any automatic hint"
|
||||
error={errors.custom_field?.message as string}
|
||||
inputProps={{
|
||||
...register('custom_field'),
|
||||
placeholder: "Enter custom value"
|
||||
}}
|
||||
/>
|
||||
|
||||
<FormFieldWrapper
|
||||
id="no_hint_field"
|
||||
label="Field Without Hint"
|
||||
fieldType="url"
|
||||
hideHint
|
||||
error={errors.no_hint_field?.message as string}
|
||||
inputProps={{
|
||||
...register('no_hint_field'),
|
||||
placeholder: "https://"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<Button type="submit" className="w-full">
|
||||
Submit Form (Check Console)
|
||||
</Button>
|
||||
</form>
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Benefits Card */}
|
||||
<Card className="mt-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Benefits</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-500">✓</span>
|
||||
<span><strong>Consistency:</strong> All fields follow the same structure and styling</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-500">✓</span>
|
||||
<span><strong>Less Code:</strong> ~50% reduction in form field boilerplate</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-500">✓</span>
|
||||
<span><strong>Smart Defaults:</strong> Automatic hints based on field type</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-500">✓</span>
|
||||
<span><strong>Built-in Terminology:</strong> Hover tooltips for technical terms</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-500">✓</span>
|
||||
<span><strong>Easy Updates:</strong> Change hints in one place, updates everywhere</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-500">✓</span>
|
||||
<span><strong>Type Safety:</strong> TypeScript ensures correct usage</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
264
src/components/ui/FormFieldWrapper.README.md
Normal file
264
src/components/ui/FormFieldWrapper.README.md
Normal file
@@ -0,0 +1,264 @@
|
||||
# FormFieldWrapper Component
|
||||
|
||||
A unified form field component that automatically provides hints, validation messages, and terminology tooltips based on field type.
|
||||
|
||||
## Features
|
||||
|
||||
- ✅ **Automatic hints** based on field type (speed, height, URL, email, etc.)
|
||||
- ✅ **Built-in validation** display with error messages
|
||||
- ✅ **Terminology tooltips** on labels (hover to see definitions)
|
||||
- ✅ **Character counting** for textareas
|
||||
- ✅ **50% less boilerplate** compared to manual field creation
|
||||
- ✅ **Type-safe** with TypeScript
|
||||
- ✅ **Consistent styling** across all forms
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Before (Manual)
|
||||
```tsx
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="website_url">Website URL</Label>
|
||||
<Input
|
||||
id="website_url"
|
||||
type="url"
|
||||
{...register('website_url')}
|
||||
placeholder="https://..."
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Official website URL (must start with https:// or http://)
|
||||
</p>
|
||||
{errors.website_url && (
|
||||
<p className="text-sm text-destructive">{errors.website_url.message}</p>
|
||||
)}
|
||||
</div>
|
||||
```
|
||||
|
||||
### After (With FormFieldWrapper)
|
||||
```tsx
|
||||
<FormFieldWrapper
|
||||
id="website_url"
|
||||
label="Website URL"
|
||||
fieldType="url"
|
||||
error={errors.website_url?.message as string}
|
||||
inputProps={{
|
||||
...register('website_url'),
|
||||
placeholder: "https://..."
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```tsx
|
||||
import { FormFieldWrapper } from '@/components/ui/form-field-wrapper';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
function MyForm() {
|
||||
const { register, formState: { errors } } = useForm();
|
||||
|
||||
return (
|
||||
<form>
|
||||
{/* Basic text input with automatic hint */}
|
||||
<FormFieldWrapper
|
||||
id="email"
|
||||
label="Email Address"
|
||||
fieldType="email"
|
||||
required
|
||||
error={errors.email?.message as string}
|
||||
inputProps={{
|
||||
...register('email', { required: 'Email is required' }),
|
||||
placeholder: "contact@example.com"
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Textarea with character count */}
|
||||
<FormFieldWrapper
|
||||
id="notes"
|
||||
label="Notes for Reviewers"
|
||||
fieldType="submission-notes"
|
||||
optional
|
||||
value={watch('notes')}
|
||||
maxLength={1000}
|
||||
error={errors.notes?.message as string}
|
||||
textareaProps={{
|
||||
...register('notes'),
|
||||
placeholder: "Add context...",
|
||||
rows: 3
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## With Terminology Tooltips
|
||||
|
||||
```tsx
|
||||
<FormFieldWrapper
|
||||
id="inversions"
|
||||
label="Inversions"
|
||||
fieldType="inversions"
|
||||
termKey="inversion" // Adds tooltip explaining what inversions are
|
||||
error={errors.inversions?.message as string}
|
||||
inputProps={{
|
||||
...register('inversions'),
|
||||
type: "number",
|
||||
placeholder: "e.g. 7"
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
## Using Presets
|
||||
|
||||
```tsx
|
||||
import { FormFieldWrapper, formFieldPresets } from '@/components/ui/form-field-wrapper';
|
||||
|
||||
<FormFieldWrapper
|
||||
{...formFieldPresets.sourceUrl({})}
|
||||
id="source_url"
|
||||
error={errors.source_url?.message as string}
|
||||
inputProps={{
|
||||
...register('source_url'),
|
||||
placeholder: "https://..."
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
## Available Field Types
|
||||
|
||||
- `url` - Website URLs with protocol hint
|
||||
- `email` - Email addresses with format hint
|
||||
- `phone` - Phone numbers with flexible format hint
|
||||
- `slug` - URL slugs with character restrictions
|
||||
- `height-requirement` - Height in cm with metric hint
|
||||
- `age-requirement` - Age requirements
|
||||
- `capacity` - Capacity per hour
|
||||
- `duration` - Duration in seconds
|
||||
- `speed` - Max speed (km/h)
|
||||
- `height` - Max height (meters)
|
||||
- `length` - Track length (meters)
|
||||
- `inversions` - Number of inversions
|
||||
- `g-force` - G-force values
|
||||
- `source-url` - Reference URL for verification
|
||||
- `submission-notes` - Notes for moderators (textarea with char count)
|
||||
|
||||
## Available Presets
|
||||
|
||||
```tsx
|
||||
formFieldPresets.websiteUrl({})
|
||||
formFieldPresets.email({})
|
||||
formFieldPresets.phone({})
|
||||
formFieldPresets.sourceUrl({})
|
||||
formFieldPresets.submissionNotes({})
|
||||
formFieldPresets.heightRequirement({})
|
||||
formFieldPresets.capacity({})
|
||||
formFieldPresets.duration({})
|
||||
formFieldPresets.speed({})
|
||||
formFieldPresets.height({})
|
||||
formFieldPresets.length({})
|
||||
formFieldPresets.inversions({})
|
||||
formFieldPresets.gForce({})
|
||||
```
|
||||
|
||||
## Custom Hints
|
||||
|
||||
Override automatic hints with custom text:
|
||||
|
||||
```tsx
|
||||
<FormFieldWrapper
|
||||
id="custom"
|
||||
label="Custom Field"
|
||||
fieldType="text"
|
||||
hint="This is my custom hint that overrides any automatic hint"
|
||||
inputProps={{...register('custom')}}
|
||||
/>
|
||||
```
|
||||
|
||||
## Hide Hints
|
||||
|
||||
```tsx
|
||||
<FormFieldWrapper
|
||||
id="no_hint"
|
||||
label="Field Without Hint"
|
||||
fieldType="url"
|
||||
hideHint
|
||||
inputProps={{...register('no_hint')}}
|
||||
/>
|
||||
```
|
||||
|
||||
## Migration Guide
|
||||
|
||||
To migrate existing fields:
|
||||
|
||||
1. **Identify the field structure** to replace
|
||||
2. **Choose appropriate `fieldType`** from the list above
|
||||
3. **Add `termKey`** if field relates to terminology
|
||||
4. **Replace** the entire div block with `FormFieldWrapper`
|
||||
|
||||
Example migration:
|
||||
|
||||
```tsx
|
||||
// BEFORE
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="max_speed_kmh">Max Speed (km/h)</Label>
|
||||
<Input
|
||||
id="max_speed_kmh"
|
||||
type="number"
|
||||
{...register('max_speed_kmh')}
|
||||
placeholder="e.g. 193"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Speed must be in km/h, between 0-500. Example: "193" for 193 km/h (120 mph)
|
||||
</p>
|
||||
{errors.max_speed_kmh && (
|
||||
<p className="text-sm text-destructive">{errors.max_speed_kmh.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
// AFTER
|
||||
<FormFieldWrapper
|
||||
id="max_speed_kmh"
|
||||
label="Max Speed (km/h)"
|
||||
fieldType="speed"
|
||||
termKey="kilometers-per-hour"
|
||||
error={errors.max_speed_kmh?.message as string}
|
||||
inputProps={{
|
||||
...register('max_speed_kmh'),
|
||||
type: "number",
|
||||
placeholder: "e.g. 193"
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
## Demo
|
||||
|
||||
View a live interactive demo at `/examples/form-field-wrapper` (in development mode) by visiting the `FormFieldWrapperDemo` component.
|
||||
|
||||
## Props Reference
|
||||
|
||||
| Prop | Type | Description |
|
||||
|------|------|-------------|
|
||||
| `id` | `string` | Field identifier (required) |
|
||||
| `label` | `string` | Field label text (required) |
|
||||
| `fieldType` | `FormFieldType` | Type for automatic hints |
|
||||
| `termKey` | `string` | Terminology key for tooltip |
|
||||
| `showTermIcon` | `boolean` | Show tooltip icon (default: true) |
|
||||
| `required` | `boolean` | Show required asterisk |
|
||||
| `optional` | `boolean` | Show optional badge |
|
||||
| `hint` | `string` | Custom hint (overrides automatic) |
|
||||
| `error` | `string` | Error message from validation |
|
||||
| `value` | `string \| number` | Current value for char counting |
|
||||
| `maxLength` | `number` | Max length for char counting |
|
||||
| `inputProps` | `InputProps` | Props to pass to Input |
|
||||
| `textareaProps` | `TextareaProps` | Props to pass to Textarea |
|
||||
| `className` | `string` | Additional wrapper classes |
|
||||
| `hideHint` | `boolean` | Hide automatic hint |
|
||||
|
||||
## Benefits
|
||||
|
||||
1. **Consistency** - All fields follow the same structure
|
||||
2. **Less Code** - ~50% reduction in boilerplate
|
||||
3. **Smart Defaults** - Automatic hints based on field type
|
||||
4. **Built-in Terminology** - Hover tooltips for technical terms
|
||||
5. **Easy Updates** - Change hints in one place, updates everywhere
|
||||
6. **Type Safety** - TypeScript ensures correct usage
|
||||
356
src/components/ui/form-field-wrapper.tsx
Normal file
356
src/components/ui/form-field-wrapper.tsx
Normal file
@@ -0,0 +1,356 @@
|
||||
import * as React from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { TermTooltip } from "@/components/ui/term-tooltip";
|
||||
import { fieldHints } from "@/lib/enhancedValidation";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Field types that automatically get hints and terminology support
|
||||
*/
|
||||
export type FormFieldType =
|
||||
| 'text'
|
||||
| 'number'
|
||||
| 'url'
|
||||
| 'email'
|
||||
| 'phone'
|
||||
| 'textarea'
|
||||
| 'slug'
|
||||
| 'height-requirement'
|
||||
| 'age-requirement'
|
||||
| 'capacity'
|
||||
| 'duration'
|
||||
| 'speed'
|
||||
| 'height'
|
||||
| 'length'
|
||||
| 'inversions'
|
||||
| 'g-force'
|
||||
| 'source-url'
|
||||
| 'submission-notes';
|
||||
|
||||
interface FormFieldWrapperProps {
|
||||
/** Field identifier */
|
||||
id: string;
|
||||
|
||||
/** Field label text */
|
||||
label: string;
|
||||
|
||||
/** Field type - determines automatic hints and validation */
|
||||
fieldType?: FormFieldType;
|
||||
|
||||
/** Terminology key for tooltip (e.g., 'lsm', 'rmc') */
|
||||
termKey?: string;
|
||||
|
||||
/** Show tooltip icon on label */
|
||||
showTermIcon?: boolean;
|
||||
|
||||
/** Whether field is required */
|
||||
required?: boolean;
|
||||
|
||||
/** Whether field is optional (shows badge) */
|
||||
optional?: boolean;
|
||||
|
||||
/** Custom hint text (overrides automatic hint) */
|
||||
hint?: string;
|
||||
|
||||
/** Error message from validation (pass errors.field?.message) */
|
||||
error?: string;
|
||||
|
||||
/** Current value for character counting */
|
||||
value?: string | number;
|
||||
|
||||
/** Maximum length for character counting */
|
||||
maxLength?: number;
|
||||
|
||||
/** Input props to pass through */
|
||||
inputProps?: React.ComponentProps<typeof Input>;
|
||||
|
||||
/** Textarea props to pass through (when fieldType is 'textarea') */
|
||||
textareaProps?: React.ComponentProps<typeof Textarea>;
|
||||
|
||||
/** Additional className for wrapper */
|
||||
className?: string;
|
||||
|
||||
/** Hide automatic hint */
|
||||
hideHint?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get automatic hint based on field type
|
||||
*/
|
||||
function getAutoHint(fieldType?: FormFieldType): string | undefined {
|
||||
if (!fieldType) return undefined;
|
||||
|
||||
const hintMap: Record<FormFieldType, string | undefined> = {
|
||||
'text': undefined,
|
||||
'number': undefined,
|
||||
'url': fieldHints.websiteUrl,
|
||||
'email': fieldHints.email,
|
||||
'phone': fieldHints.phone,
|
||||
'textarea': undefined,
|
||||
'slug': fieldHints.slug,
|
||||
'height-requirement': fieldHints.heightRequirement,
|
||||
'age-requirement': fieldHints.ageRequirement,
|
||||
'capacity': fieldHints.capacity,
|
||||
'duration': fieldHints.duration,
|
||||
'speed': fieldHints.speed,
|
||||
'height': fieldHints.height,
|
||||
'length': fieldHints.length,
|
||||
'inversions': fieldHints.inversions,
|
||||
'g-force': fieldHints.gForce,
|
||||
'source-url': fieldHints.sourceUrl,
|
||||
'submission-notes': fieldHints.submissionNotes,
|
||||
};
|
||||
|
||||
return hintMap[fieldType];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get input type from field type
|
||||
*/
|
||||
function getInputType(fieldType?: FormFieldType): string {
|
||||
if (!fieldType) return 'text';
|
||||
|
||||
const typeMap: Record<FormFieldType, string> = {
|
||||
'text': 'text',
|
||||
'number': 'number',
|
||||
'url': 'url',
|
||||
'email': 'email',
|
||||
'phone': 'tel',
|
||||
'textarea': 'text',
|
||||
'slug': 'text',
|
||||
'height-requirement': 'number',
|
||||
'age-requirement': 'number',
|
||||
'capacity': 'number',
|
||||
'duration': 'number',
|
||||
'speed': 'number',
|
||||
'height': 'number',
|
||||
'length': 'number',
|
||||
'inversions': 'number',
|
||||
'g-force': 'number',
|
||||
'source-url': 'url',
|
||||
'submission-notes': 'text',
|
||||
};
|
||||
|
||||
return typeMap[fieldType] || 'text';
|
||||
}
|
||||
|
||||
/**
|
||||
* Unified form field wrapper with automatic hints, validation, and terminology
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <FormFieldWrapper
|
||||
* id="website_url"
|
||||
* label="Website URL"
|
||||
* fieldType="url"
|
||||
* error={errors.website_url?.message}
|
||||
* inputProps={{...register('website_url'), placeholder: "https://..."}}
|
||||
* />
|
||||
* ```
|
||||
*
|
||||
* @example With terminology tooltip
|
||||
* ```tsx
|
||||
* <FormFieldWrapper
|
||||
* id="propulsion"
|
||||
* label="Propulsion Method"
|
||||
* fieldType="text"
|
||||
* termKey="lsm"
|
||||
* hint="Common: LSM Launch, Chain Lift, Hydraulic Launch"
|
||||
* inputProps={{...register('propulsion')}}
|
||||
* />
|
||||
* ```
|
||||
*
|
||||
* @example Textarea with character count
|
||||
* ```tsx
|
||||
* <FormFieldWrapper
|
||||
* id="notes"
|
||||
* label="Notes"
|
||||
* fieldType="submission-notes"
|
||||
* optional
|
||||
* value={watch('notes')}
|
||||
* maxLength={1000}
|
||||
* textareaProps={{...register('notes'), rows: 3}}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export function FormFieldWrapper({
|
||||
id,
|
||||
label,
|
||||
fieldType,
|
||||
termKey,
|
||||
showTermIcon = true,
|
||||
required = false,
|
||||
optional = false,
|
||||
hint,
|
||||
error,
|
||||
value,
|
||||
maxLength,
|
||||
inputProps,
|
||||
textareaProps,
|
||||
className,
|
||||
hideHint = false,
|
||||
}: FormFieldWrapperProps) {
|
||||
const isTextarea = fieldType === 'textarea' || fieldType === 'submission-notes';
|
||||
const autoHint = getAutoHint(fieldType);
|
||||
const displayHint = hint || autoHint;
|
||||
const inputType = getInputType(fieldType);
|
||||
|
||||
// Character count for textareas with maxLength
|
||||
const showCharCount = isTextarea && maxLength && typeof value === 'string';
|
||||
const charCount = typeof value === 'string' ? value.length : 0;
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-2", className)}>
|
||||
{/* Label with optional terminology tooltip */}
|
||||
<Label htmlFor={id} className="flex items-center gap-2">
|
||||
{termKey ? (
|
||||
<TermTooltip term={termKey} showIcon={showTermIcon}>
|
||||
{label}
|
||||
</TermTooltip>
|
||||
) : (
|
||||
label
|
||||
)}
|
||||
{required && <span className="text-destructive">*</span>}
|
||||
{optional && (
|
||||
<span className="text-xs text-muted-foreground font-normal">
|
||||
(Optional)
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
|
||||
{/* Input or Textarea */}
|
||||
{isTextarea ? (
|
||||
<Textarea
|
||||
id={id}
|
||||
className={cn(error && "border-destructive")}
|
||||
maxLength={maxLength}
|
||||
{...textareaProps}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
id={id}
|
||||
type={inputType}
|
||||
className={cn(error && "border-destructive")}
|
||||
maxLength={maxLength}
|
||||
{...inputProps}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Hint text (if not hidden and exists) */}
|
||||
{!hideHint && displayHint && !error && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{displayHint}
|
||||
{showCharCount && ` (${charCount}/${maxLength} characters)`}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Character count only (when no hint) */}
|
||||
{!hideHint && !displayHint && showCharCount && !error && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{charCount}/{maxLength} characters
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Error message */}
|
||||
{error && (
|
||||
<p className="text-sm text-destructive">
|
||||
{error}
|
||||
{showCharCount && ` (${charCount}/${maxLength})`}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Preset configurations for common field types
|
||||
*/
|
||||
export const formFieldPresets = {
|
||||
websiteUrl: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'url' as FormFieldType,
|
||||
label: 'Website URL',
|
||||
...props,
|
||||
}),
|
||||
|
||||
email: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'email' as FormFieldType,
|
||||
label: 'Email',
|
||||
...props,
|
||||
}),
|
||||
|
||||
phone: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'phone' as FormFieldType,
|
||||
label: 'Phone Number',
|
||||
...props,
|
||||
}),
|
||||
|
||||
sourceUrl: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'source-url' as FormFieldType,
|
||||
label: 'Source URL',
|
||||
optional: true,
|
||||
...props,
|
||||
}),
|
||||
|
||||
submissionNotes: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'submission-notes' as FormFieldType,
|
||||
label: 'Notes for Reviewers',
|
||||
optional: true,
|
||||
maxLength: 1000,
|
||||
...props,
|
||||
}),
|
||||
|
||||
heightRequirement: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'height-requirement' as FormFieldType,
|
||||
label: 'Height Requirement',
|
||||
...props,
|
||||
}),
|
||||
|
||||
capacity: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'capacity' as FormFieldType,
|
||||
label: 'Capacity per Hour',
|
||||
...props,
|
||||
}),
|
||||
|
||||
duration: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'duration' as FormFieldType,
|
||||
label: 'Duration (seconds)',
|
||||
...props,
|
||||
}),
|
||||
|
||||
speed: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'speed' as FormFieldType,
|
||||
label: 'Max Speed',
|
||||
termKey: 'kilometers-per-hour',
|
||||
...props,
|
||||
}),
|
||||
|
||||
height: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'height' as FormFieldType,
|
||||
label: 'Max Height',
|
||||
termKey: 'meters',
|
||||
...props,
|
||||
}),
|
||||
|
||||
length: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'length' as FormFieldType,
|
||||
label: 'Track Length',
|
||||
termKey: 'meters',
|
||||
...props,
|
||||
}),
|
||||
|
||||
inversions: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'inversions' as FormFieldType,
|
||||
label: 'Inversions',
|
||||
termKey: 'inversion',
|
||||
...props,
|
||||
}),
|
||||
|
||||
gForce: (props: Partial<FormFieldWrapperProps>) => ({
|
||||
fieldType: 'g-force' as FormFieldType,
|
||||
label: 'Max G-Force',
|
||||
termKey: 'g-force',
|
||||
...props,
|
||||
}),
|
||||
};
|
||||
Reference in New Issue
Block a user