|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import { useState } from 'react'; |
| 4 | +import { useForm, type Resolver } from 'react-hook-form'; |
| 5 | +import { zodResolver } from '@hookform/resolvers/zod'; |
| 6 | +import { Loader2, BookPlus } from 'lucide-react'; |
| 7 | +import { |
| 8 | + courseSchema, |
| 9 | + type CourseFormData, |
| 10 | + type CourseFormDataIn, |
| 11 | + COURSE_CATEGORIES, |
| 12 | + COURSE_DIFFICULTY_LEVELS, |
| 13 | + COURSE_CURRENCIES, |
| 14 | +} from '@/lib/schemas'; |
| 15 | +import { FormField } from '@/components/forms/FormField'; |
| 16 | + |
| 17 | +export interface CourseCreationFormProps { |
| 18 | + onSubmit: (data: CourseFormData) => Promise<void>; |
| 19 | + defaultValues?: Partial<CourseFormDataIn>; |
| 20 | + submitLabel?: string; |
| 21 | +} |
| 22 | + |
| 23 | +const CATEGORY_LABELS: Record<string, string> = { |
| 24 | + blockchain: 'Blockchain', programming: 'Programming', |
| 25 | + 'data-science': 'Data Science', design: 'Design', |
| 26 | + business: 'Business', language: 'Language', |
| 27 | + mathematics: 'Mathematics', science: 'Science', |
| 28 | + arts: 'Arts & Humanities', other: 'Other', |
| 29 | +}; |
| 30 | + |
| 31 | +const DIFFICULTY_LABELS: Record<string, string> = { |
| 32 | + beginner: 'Beginner', intermediate: 'Intermediate', advanced: 'Advanced', |
| 33 | +}; |
| 34 | + |
| 35 | +const selectClasses = (hasError: boolean) => |
| 36 | + `w-full px-3 py-2 border rounded-lg bg-white dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 ${ |
| 37 | + hasError |
| 38 | + ? 'border-red-400 focus:ring-red-500' |
| 39 | + : 'border-gray-300 dark:border-slate-600 focus:ring-blue-500' |
| 40 | + }`; |
| 41 | + |
| 42 | +/** |
| 43 | + * Course creation form with real-time (onBlur) Zod validation and inline error states. |
| 44 | + */ |
| 45 | +export function CourseCreationForm({ |
| 46 | + onSubmit, |
| 47 | + defaultValues, |
| 48 | + submitLabel = 'Create course', |
| 49 | +}: CourseCreationFormProps) { |
| 50 | + const [serverError, setServerError] = useState<string | null>(null); |
| 51 | + |
| 52 | + const { |
| 53 | + register, |
| 54 | + handleSubmit, |
| 55 | + formState: { errors, isSubmitting, isValid }, |
| 56 | + watch, |
| 57 | + } = useForm<CourseFormDataIn, any, CourseFormData>({ |
| 58 | + resolver: zodResolver( |
| 59 | + courseSchema as unknown as Parameters<typeof zodResolver>[0], |
| 60 | + ) as unknown as Resolver<CourseFormDataIn, any, CourseFormData>, |
| 61 | + mode: 'onBlur', |
| 62 | + defaultValues: { |
| 63 | + price: '0', currency: 'XLM', isPublished: false, |
| 64 | + prerequisites: '', tags: '', |
| 65 | + ...defaultValues, |
| 66 | + }, |
| 67 | + }); |
| 68 | + |
| 69 | + const descLength = (watch('description') ?? '').length; |
| 70 | + |
| 71 | + const onFormSubmit = async (data: CourseFormData) => { |
| 72 | + setServerError(null); |
| 73 | + try { |
| 74 | + await onSubmit(data); |
| 75 | + } catch (error: unknown) { |
| 76 | + setServerError(error instanceof Error ? error.message : 'Failed to save course.'); |
| 77 | + } |
| 78 | + }; |
| 79 | + |
| 80 | + return ( |
| 81 | + <form onSubmit={handleSubmit(onFormSubmit)} noValidate className="space-y-6"> |
| 82 | + {/* Title */} |
| 83 | + <FormField |
| 84 | + label="Course title" |
| 85 | + type="text" |
| 86 | + required |
| 87 | + placeholder="e.g. Introduction to Stellar Blockchain" |
| 88 | + helperText="5–120 characters." |
| 89 | + error={errors.title?.message} |
| 90 | + {...register('title')} |
| 91 | + /> |
| 92 | + |
| 93 | + {/* Description */} |
| 94 | + <div className="space-y-1"> |
| 95 | + <div className="flex items-baseline justify-between"> |
| 96 | + <label htmlFor="course-desc" className="text-sm font-medium text-gray-700 dark:text-gray-300"> |
| 97 | + Description <span className="text-red-500 ml-0.5" aria-label="required">*</span> |
| 98 | + </label> |
| 99 | + <span className={`text-xs ${descLength > 2000 ? 'text-red-600' : 'text-gray-500'}`}> |
| 100 | + {descLength}/2,000 |
| 101 | + </span> |
| 102 | + </div> |
| 103 | + <textarea |
| 104 | + id="course-desc" |
| 105 | + rows={5} |
| 106 | + aria-invalid={Boolean(errors.description)} |
| 107 | + aria-describedby={errors.description ? 'course-desc-error' : undefined} |
| 108 | + placeholder="Describe what students will learn…" |
| 109 | + className={`w-full px-3 py-2 border rounded-lg resize-none bg-white dark:bg-slate-800 text-gray-900 dark:text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 ${ |
| 110 | + errors.description ? 'border-red-400 focus:ring-red-500' : 'border-gray-300 dark:border-slate-600 focus:ring-blue-500' |
| 111 | + }`} |
| 112 | + {...register('description')} |
| 113 | + /> |
| 114 | + {errors.description && ( |
| 115 | + <p id="course-desc-error" role="alert" className="text-sm text-red-600 dark:text-red-400"> |
| 116 | + {errors.description.message} |
| 117 | + </p> |
| 118 | + )} |
| 119 | + </div> |
| 120 | + |
| 121 | + {/* Category + Difficulty */} |
| 122 | + <div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
| 123 | + <div className="space-y-1"> |
| 124 | + <label htmlFor="course-category" className="text-sm font-medium text-gray-700 dark:text-gray-300"> |
| 125 | + Category <span className="text-red-500 ml-0.5" aria-label="required">*</span> |
| 126 | + </label> |
| 127 | + <select |
| 128 | + id="course-category" |
| 129 | + aria-invalid={Boolean(errors.category)} |
| 130 | + aria-describedby={errors.category ? 'course-category-error' : undefined} |
| 131 | + className={selectClasses(Boolean(errors.category))} |
| 132 | + {...register('category')} |
| 133 | + > |
| 134 | + <option value="">Select a category</option> |
| 135 | + {COURSE_CATEGORIES.map((cat) => ( |
| 136 | + <option key={cat} value={cat}>{CATEGORY_LABELS[cat] ?? cat}</option> |
| 137 | + ))} |
| 138 | + </select> |
| 139 | + {errors.category && ( |
| 140 | + <p id="course-category-error" role="alert" className="text-sm text-red-600 dark:text-red-400"> |
| 141 | + {errors.category.message} |
| 142 | + </p> |
| 143 | + )} |
| 144 | + </div> |
| 145 | + |
| 146 | + <div className="space-y-1"> |
| 147 | + <label htmlFor="course-difficulty" className="text-sm font-medium text-gray-700 dark:text-gray-300"> |
| 148 | + Difficulty <span className="text-red-500 ml-0.5" aria-label="required">*</span> |
| 149 | + </label> |
| 150 | + <select |
| 151 | + id="course-difficulty" |
| 152 | + aria-invalid={Boolean(errors.difficulty)} |
| 153 | + aria-describedby={errors.difficulty ? 'course-difficulty-error' : undefined} |
| 154 | + className={selectClasses(Boolean(errors.difficulty))} |
| 155 | + {...register('difficulty')} |
| 156 | + > |
| 157 | + <option value="">Select difficulty</option> |
| 158 | + {COURSE_DIFFICULTY_LEVELS.map((level) => ( |
| 159 | + <option key={level} value={level}>{DIFFICULTY_LABELS[level] ?? level}</option> |
| 160 | + ))} |
| 161 | + </select> |
| 162 | + {errors.difficulty && ( |
| 163 | + <p id="course-difficulty-error" role="alert" className="text-sm text-red-600 dark:text-red-400"> |
| 164 | + {errors.difficulty.message} |
| 165 | + </p> |
| 166 | + )} |
| 167 | + </div> |
| 168 | + </div> |
| 169 | + |
| 170 | + {/* Price + Currency */} |
| 171 | + <div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
| 172 | + <FormField |
| 173 | + label="Price" |
| 174 | + type="text" |
| 175 | + inputMode="decimal" |
| 176 | + required |
| 177 | + placeholder="0" |
| 178 | + helperText="Enter 0 for a free course." |
| 179 | + error={errors.price?.message} |
| 180 | + {...register('price')} |
| 181 | + /> |
| 182 | + |
| 183 | + <div className="space-y-1"> |
| 184 | + <label htmlFor="course-currency" className="text-sm font-medium text-gray-700 dark:text-gray-300"> |
| 185 | + Currency <span className="text-red-500 ml-0.5" aria-label="required">*</span> |
| 186 | + </label> |
| 187 | + <select |
| 188 | + id="course-currency" |
| 189 | + aria-invalid={Boolean(errors.currency)} |
| 190 | + aria-describedby={errors.currency ? 'course-currency-error' : undefined} |
| 191 | + className={selectClasses(Boolean(errors.currency))} |
| 192 | + {...register('currency')} |
| 193 | + > |
| 194 | + {COURSE_CURRENCIES.map((c) => ( |
| 195 | + <option key={c} value={c}>{c}</option> |
| 196 | + ))} |
| 197 | + </select> |
| 198 | + {errors.currency && ( |
| 199 | + <p id="course-currency-error" role="alert" className="text-sm text-red-600 dark:text-red-400"> |
| 200 | + {errors.currency.message} |
| 201 | + </p> |
| 202 | + )} |
| 203 | + </div> |
| 204 | + </div> |
| 205 | + |
| 206 | + {/* Duration */} |
| 207 | + <FormField |
| 208 | + label="Estimated duration" |
| 209 | + type="text" |
| 210 | + required |
| 211 | + placeholder="e.g. 8 hours, 4 weeks" |
| 212 | + helperText="Give students a realistic time estimate." |
| 213 | + error={errors.duration?.message} |
| 214 | + {...register('duration')} |
| 215 | + /> |
| 216 | + |
| 217 | + {/* Prerequisites */} |
| 218 | + <FormField |
| 219 | + label="Prerequisites" |
| 220 | + multiline |
| 221 | + rows={2} |
| 222 | + placeholder="What should students know beforehand? (optional)" |
| 223 | + error={errors.prerequisites?.message} |
| 224 | + {...register('prerequisites')} |
| 225 | + /> |
| 226 | + |
| 227 | + {/* Tags */} |
| 228 | + <FormField |
| 229 | + label="Tags" |
| 230 | + type="text" |
| 231 | + placeholder="stellar, blockchain, defi (comma-separated, optional)" |
| 232 | + helperText="Comma-separated keywords to aid discoverability." |
| 233 | + error={errors.tags?.message} |
| 234 | + {...register('tags')} |
| 235 | + /> |
| 236 | + |
| 237 | + {/* Publish toggle */} |
| 238 | + <label className="flex items-center gap-3 cursor-pointer"> |
| 239 | + <input |
| 240 | + type="checkbox" |
| 241 | + className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" |
| 242 | + {...register('isPublished')} |
| 243 | + /> |
| 244 | + <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Publish immediately</span> |
| 245 | + </label> |
| 246 | + |
| 247 | + {serverError && ( |
| 248 | + <div role="alert" aria-live="assertive" className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-3 text-sm text-red-700 dark:text-red-400"> |
| 249 | + {serverError} |
| 250 | + </div> |
| 251 | + )} |
| 252 | + |
| 253 | + <button |
| 254 | + type="submit" |
| 255 | + disabled={isSubmitting || !isValid} |
| 256 | + className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" |
| 257 | + aria-busy={isSubmitting} |
| 258 | + > |
| 259 | + {isSubmitting ? ( |
| 260 | + <><Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" /> Saving…</> |
| 261 | + ) : ( |
| 262 | + <><BookPlus className="w-4 h-4" aria-hidden="true" /> {submitLabel}</> |
| 263 | + )} |
| 264 | + </button> |
| 265 | + </form> |
| 266 | + ); |
| 267 | +} |
0 commit comments