OkulUp Form Pattern

Proje: OkulUp · Hub: OkulUp — Conventions

Form Pattern

Stack

• React Hook Form v7 + Zod v4 + @hookform/resolvers
• Türkçe hata mesajları (Zod’da .min(1, 'Alan zorunludur') vs.)

Schema Dosyası

src/components/modules/{feature}/{feature}Schema.ts

import { z } from 'zod';
export const announcementSchema = z.object({
  title: z.string().min(1, 'Başlık zorunludur'),
  content: z.string().min(1, 'İçerik zorunludur'),
});
export type AnnouncementFormData = z.infer<typeof announcementSchema>;

Form Component Props

Her form component’inde standart prop’lar:

interface Props {
  onSubmit: (data: FormData) => void;
  isLoading: boolean;
  defaultValues?: Partial<FormData>;  // edit için
}

Controller Pattern

<Controller
  control={control}
  name="title"
  render={({ field, fieldState }) => (
    <FormInput
      label="Başlık"
      value={field.value}
      onChangeText={field.onChange}
      error={fieldState.error?.message}
    />
  )}
/>

Form Bileşenleri

• FormInput — text input (label, error, helper, focus state, left/right icon)
• FormTextArea — multiline
• FormSelect — dropdown
• FormDatePicker — tarih (cross-platform)
• FormNativeDatePicker — native date picker (iOS/Android ayrı davranış)
• FormTimePicker — saat seçimi Hepsi @/components/forms’ten import.

Related

• component-architecture — form dosyalarının yeri
• service-layer-pattern — form submit’te çağrılan servis fonksiyonları