From 05ddafcdea9e10ab35e93f0e3c3c25003631d252 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jun 2025 22:14:10 -0400
Subject: [PATCH] refactor: merge FormField and FormFieldWrapper components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add children prop to FormField to support wrapper mode
- Update components using FormFieldWrapper to use FormField
- Remove redundant FormFieldWrapper component
- Maintain all existing functionality with unified API

This reduces code duplication and simplifies the form component hierarchy.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 prd/PRD-codebase-cleanup-refactoring.md       |  2 +-
 src/lib/components/admin/FormField.svelte     | 45 ++++++++----
 .../components/admin/FormFieldWrapper.svelte  | 73 -------------------
 .../admin/SegmentedControlField.svelte        |  6 +-
 src/lib/components/admin/SelectField.svelte   |  6 +-
 5 files changed, 37 insertions(+), 95 deletions(-)
 delete mode 100644 src/lib/components/admin/FormFieldWrapper.svelte

diff --git a/prd/PRD-codebase-cleanup-refactoring.md b/prd/PRD-codebase-cleanup-refactoring.md
index c58cc5d..e2c51dc 100644
--- a/prd/PRD-codebase-cleanup-refactoring.md
+++ b/prd/PRD-codebase-cleanup-refactoring.md
@@ -97,7 +97,7 @@ Refactor components to reduce duplication and complexity.
 - [-] **Create base components**
   - [x] Extract `BaseModal` component for shared modal logic
   - [x] Create `BaseDropdown` for dropdown patterns
-  - [ ] Merge `FormField` and `FormFieldWrapper`
+  - [x] Merge `FormField` and `FormFieldWrapper`
   - [ ] Create `BaseSegmentedController` for shared logic
 
 - [ ] **Refactor photo grids**
diff --git a/src/lib/components/admin/FormField.svelte b/src/lib/components/admin/FormField.svelte
index 16523f9..4bba7b8 100644
--- a/src/lib/components/admin/FormField.svelte
+++ b/src/lib/components/admin/FormField.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	interface Props {
 		label: string
-		name: string
+		name?: string
 		type?: string
 		value?: any
 		placeholder?: string
@@ -10,11 +10,12 @@
 		helpText?: string
 		disabled?: boolean
 		onchange?: (e: Event) => void
+		children?: any
 	}
 
 	let {
 		label,
-		name,
+		name = '',
 		type = 'text',
 		value = $bindable(),
 		placeholder = '',
@@ -22,9 +23,13 @@
 		error = '',
 		helpText = '',
 		disabled = false,
-		onchange
+		onchange,
+		children
 	}: Props = $props()
 
+	// If children are provided, this is a wrapper mode
+	const isWrapper = $derived(!!children)
+
 	function handleChange(e: Event) {
 		const target = e.target as HTMLInputElement | HTMLTextAreaElement
 		value = target.value
@@ -33,14 +38,16 @@
 </script>
 
 <div class="form-field" class:has-error={!!error}>
-	<label for={name}>
+	<label for={!isWrapper ? name : undefined}>
 		{label}
 		{#if required}
 			<span class="required">*</span>
 		{/if}
 	</label>
 
-	{#if type === 'textarea'}
+	{#if isWrapper}
+		{@render children()}
+	{:else if type === 'textarea'}
 		<textarea
 			id={name}
 			{name}
@@ -75,10 +82,17 @@
 	.form-field {
 		margin-bottom: $unit-4x;
 
+		&:last-child {
+			margin-bottom: 0;
+		}
+
 		&.has-error {
 			input,
-			textarea {
-				border-color: #c33;
+			textarea,
+			:global(input),
+			:global(textarea),
+			:global(select) {
+				border-color: $red-error;
 			}
 		}
 	}
@@ -88,9 +102,10 @@
 		margin-bottom: $unit;
 		font-weight: 500;
 		color: $gray-20;
+		font-size: 0.925rem;
 
 		.required {
-			color: #c33;
+			color: $red-error;
 			margin-left: 2px;
 		}
 	}
@@ -100,11 +115,11 @@
 		width: 100%;
 		padding: $unit-2x $unit-3x;
 		border: 1px solid $gray-80;
-		border-radius: 6px;
+		border-radius: $corner-radius-sm;
 		font-size: 1rem;
 		font-family: inherit;
-		transition: border-color 0.2s ease;
-		background-color: white;
+		transition: border-color $transition-normal ease;
+		background-color: $white;
 
 		&:focus {
 			outline: none;
@@ -124,13 +139,13 @@
 
 	.error-text {
 		margin-top: $unit;
-		color: #c33;
-		font-size: 0.875rem;
+		color: $red-error;
+		font-size: $font-size-small;
 	}
 
 	.help-text {
 		margin-top: $unit;
 		color: $gray-40;
-		font-size: 0.875rem;
+		font-size: $font-size-small;
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/lib/components/admin/FormFieldWrapper.svelte b/src/lib/components/admin/FormFieldWrapper.svelte
deleted file mode 100644
index 89dcb34..0000000
--- a/src/lib/components/admin/FormFieldWrapper.svelte
+++ /dev/null
@@ -1,73 +0,0 @@
-<script lang="ts">
-	interface Props {
-		label: string
-		required?: boolean
-		helpText?: string
-		error?: string
-		children?: any
-	}
-
-	let { label, required = false, helpText, error, children }: Props = $props()
-</script>
-
-<div class="form-field" class:has-error={!!error}>
-	<label>
-		{label}
-		{#if required}
-			<span class="required">*</span>
-		{/if}
-	</label>
-
-	{@render children?.()}
-
-	{#if helpText}
-		<p class="help-text">{helpText}</p>
-	{/if}
-
-	{#if error}
-		<p class="error-text">{error}</p>
-	{/if}
-</div>
-
-<style lang="scss">
-	.form-field {
-		margin-bottom: $unit-3x;
-
-		&:last-child {
-			margin-bottom: 0;
-		}
-
-		&.has-error {
-			:global(input),
-			:global(textarea),
-			:global(select) {
-				border-color: #c33;
-			}
-		}
-	}
-
-	label {
-		display: block;
-		margin-bottom: $unit;
-		font-weight: 500;
-		color: $gray-20;
-		font-size: 0.925rem;
-
-		.required {
-			color: #c33;
-			margin-left: 2px;
-		}
-	}
-
-	.error-text {
-		margin-top: $unit;
-		color: #c33;
-		font-size: 0.875rem;
-	}
-
-	.help-text {
-		margin-top: $unit;
-		color: $gray-40;
-		font-size: 0.875rem;
-	}
-</style>
diff --git a/src/lib/components/admin/SegmentedControlField.svelte b/src/lib/components/admin/SegmentedControlField.svelte
index 2861496..e2197e5 100644
--- a/src/lib/components/admin/SegmentedControlField.svelte
+++ b/src/lib/components/admin/SegmentedControlField.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import FormFieldWrapper from './FormFieldWrapper.svelte'
+	import FormField from './FormField.svelte'
 
 	interface Option {
 		value: string
@@ -31,7 +31,7 @@
 	}
 </script>
 
-<FormFieldWrapper {label} {required} {helpText} {error}>
+<FormField {label} {required} {helpText} {error}>
 	{#snippet children()}
 		<div class="segmented-control-wrapper" class:full-width={fullWidth}>
 			<div class="segmented-control">
@@ -48,7 +48,7 @@
 			</div>
 		</div>
 	{/snippet}
-</FormFieldWrapper>
+</FormField>
 
 <style lang="scss">
 	.segmented-control-wrapper {
diff --git a/src/lib/components/admin/SelectField.svelte b/src/lib/components/admin/SelectField.svelte
index e747cfe..089e321 100644
--- a/src/lib/components/admin/SelectField.svelte
+++ b/src/lib/components/admin/SelectField.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Select from './Select.svelte'
-	import FormFieldWrapper from './FormFieldWrapper.svelte'
+	import FormField from './FormField.svelte'
 	import type { HTMLSelectAttributes } from 'svelte/elements'
 
 	interface Option {
@@ -36,11 +36,11 @@
 	}: Props = $props()
 </script>
 
-<FormFieldWrapper {label} {required} {helpText} {error}>
+<FormField {label} {required} {helpText} {error}>
 	{#snippet children()}
 		<Select bind:value {options} {size} {variant} {fullWidth} {pill} {...restProps} />
 	{/snippet}
-</FormFieldWrapper>
+</FormField>
 
 <style lang="scss">
 	// Ensure proper spacing for select fields