الگوهای فرم

'use client'
import { useForm } from 'react-hook-form'
import { Input, Switch, TagInput, toast } from '@partodata/ui'
import { Form, FormField } from '@partodata/ui/form'
import { FormPage, FormRow } from '@partodata/ui/templates'

type WeeklyReport = {
  title: string
  keywords: string[]
  email: boolean
}

// The app's save request; simulated here (a short wait) — replace it with the API call.
async function saveWeeklyReport(values: WeeklyReport): Promise<WeeklyReport> {
  await new Promise((resolve) => setTimeout(resolve, 700))
  return values
}

// «گزارش هفتگی» has its own menu item: no `back`, and «انصراف» discards the changes.
export function WeeklyReportScreen() {
  const form = useForm<WeeklyReport>({
    defaultValues: { title: '', keywords: [], email: false },
    mode: 'onTouched',
  })

  // A failed save is the form's root error: FormPage shows it above the form, and the next submit clears it.
  const save = form.handleSubmit(async (values) => {
    try {
      form.reset(await saveWeeklyReport(values))
      toast.success('گزارش هفتگی ذخیره شد')
    } catch {
      form.setError('root', { message: 'ذخیره انجام نشد؛ لحظه‌ای بعد دوباره تلاش کنید.' })
    }
  })

  return (
    <Form {...form}>
      <FormPage
        title="گزارش هفتگی"
        onSubmit={save}
        onCancel={() => form.reset()}
        submitLabel="ذخیره"
        submitting={form.formState.isSubmitting}
        error={form.formState.errors.root?.message}
      >
        <FormField
          control={form.control}
          name="title"
          rules={{ required: 'عنوان گزارش را وارد کنید' }}
          render={({ field, fieldState }) => (
            <FormRow label="عنوان گزارش" required error={fieldState.error?.message}>
              <Input placeholder="گفتمان درباره برند" {...field} />
            </FormRow>
          )}
        />
        <FormField
          control={form.control}
          name="keywords"
          rules={{ validate: (value) => value.length > 0 || 'دست‌کم یک کلیدواژه وارد کنید' }}
          render={({ field, fieldState }) => (
            <FormRow
              label="کلیدواژه‌ها"
              required
              description="هر کلیدواژه را بنویسید و Enter بزنید."
              error={fieldState.error?.message}
            >
              <TagInput value={field.value} onChange={field.onChange} placeholder="رونمایی محصول جدید" />
            </FormRow>
          )}
        />
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormRow label="ارسال ایمیل" description="گزارش هر هفته به ایمیل اعضا هم فرستاده می‌شود.">
              <Switch checked={field.value} onCheckedChange={field.onChange} />
            </FormRow>
          )}
        />
      </FormPage>
    </Form>
  )
}

import { useState } from 'react'
import { useForm } from 'react-hook-form'
// Form* ship from their own subpath entry, not the main barrel (RSC compatibility).
import { Form, FormField } from '@partodata/ui/form'
import { FormRow } from '@partodata/ui/templates'
import { Button, Input, Step, Stepper } from '@partodata/ui'

interface SignupFormValues {
  name: string
  email: string
}

export function MultiStepForm() {
  // Stepper is 0-based: 0 = «اطلاعات پایه».
  const [step, setStep] = useState(0)
  const form = useForm<SignupFormValues>({
    mode: 'onTouched',
    defaultValues: { name: '', email: '' },
  })

  function onSubmit(values: SignupFormValues) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <Stepper activeStep={step}>
          <Step label="اطلاعات پایه" />
          <Step label="اطلاعات تماس" />
          <Step label="بازبینی" />
        </Stepper>

        {/* مرحله 1 */}
        {step === 0 && (
          <div className="space-y-4">
            <h2 className="text-heading">اطلاعات پایه</h2>
            <FormField
              control={form.control}
              name="name"
              rules={{ required: 'نام را وارد کنید' }}
              render={({ field, fieldState }) => (
                <FormRow label="نام" required error={fieldState.error?.message}>
                  <Input placeholder="نام خود را وارد کنید" {...field} />
                </FormRow>
              )}
            />
            {/* htmlType defaults to "button", so a step change never submits the form */}
            <Button variant="primary" onClick={() => setStep(1)}>
              مرحله بعد
            </Button>
          </div>
        )}

        {/* مرحله 2 */}
        {step === 1 && (
          <div className="space-y-4">
            <h2 className="text-heading">اطلاعات تماس</h2>
            <FormField
              control={form.control}
              name="email"
              rules={{ required: 'نشانی ایمیل را وارد کنید' }}
              render={({ field, fieldState }) => (
                <FormRow label="نشانی ایمیل" required error={fieldState.error?.message}>
                  <Input kind="email" {...field} />
                </FormRow>
              )}
            />
            <div className="flex gap-2">
              <Button variant="default" onClick={() => setStep(0)}>
                قبلی
              </Button>
              <Button variant="primary" onClick={() => setStep(2)}>
                مرحله بعد
              </Button>
            </div>
          </div>
        )}

        {/* مرحله 3 — ارسال */}
        {step === 2 && (
          <div className="flex gap-2">
            <Button variant="default" onClick={() => setStep(1)}>
              قبلی
            </Button>
            <Button htmlType="submit" variant="primary" isLoading={form.formState.isSubmitting}>
              ثبت
            </Button>
          </div>
        )}
      </form>
    </Form>
  )
}

// Form* ship from their own subpath entry, not the main barrel (RSC compatibility).
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@partodata/ui/form'
import { Input, Button } from '@partodata/ui'
import { useForm } from 'react-hook-form'

interface ExampleFormValues {
  username: string
}

export function ExampleForm() {
  const form = useForm<ExampleFormValues>({ defaultValues: { username: '' } })

  function onSubmit(values: ExampleFormValues) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="username"
          rules={{ required: 'نام کاربری را وارد کنید' }}
          render={({ field }) => (
            <FormItem>
              <FormLabel>نام کاربری</FormLabel>
              <FormControl>
                <Input placeholder="نام کاربری خود را وارد کنید" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <Button variant="primary" htmlType="submit">
          ثبت
        </Button>
      </form>
    </Form>
  )
}