Формы как state manager: фильтры, URL-синхронизация, панели настроек

// Типичный код управления фильтрами
const [search, setSearch] = useState('')
const [category, setCategory] = useState('all')
const [minPrice, setMinPrice] = useState(0)
const [maxPrice, setMaxPrice] = useState(100000)
const [status, setStatus] = useState<string[]>([])

// URL-синхронизация — ещё 30 строк
useEffect(() => {
  const params = new URLSearchParams()
  if (search) params.set('search', search)
  if (category !== 'all') params.set('category', category)
  // ...
  router.replace(`?${params}`)
}, [search, category, minPrice, maxPrice, status])

// Инициализация из URL — ещё 20 строк
useEffect(() => {
  const params = new URLSearchParams(window.location.search)
  setSearch(params.get('search') ?? '')
  setCategory(params.get('category') ?? 'all')
  // ...
}, [])

// Сброс — ещё 10 строк
function resetFilters() {
  setSearch('')
  setCategory('all')
  setMinPrice(0)
  setMaxPrice(100000)
  setStatus([])
}

import { FilterSchema } from './_schemas/filter.schema'

const defaultFilters = {
  search: '',
  category: 'all',
  minPrice: 0,
  maxPrice: 100000,
  status: [] as string[],
}

function CatalogPage() {
  return (
    <Form
      schema={FilterSchema}
      initialValue={defaultFilters}
      onSubmit={async () => {}} // форма без реального submit
    >
      <HStack mb={4}>
        <Form.Field.String name="search" placeholder="Поиск..." />
        <Form.Select.Category name="category" />
        <Form.Field.RangeSlider name="minPrice" min={0} max={100000} />
        <Form.Field.MultiSelect name="status" options={statusOptions} />
        <Form.Button.Reset>Сбросить</Form.Button.Reset>
      </HStack>

      {/* ProductList получает актуальные фильтры при каждом изменении */}
      <Form.Subscribe>
        {(filters) => <ProductList filters={filters} />}
      </Form.Subscribe>
    </Form>
  )
}

<Form.Subscribe>
  {(values) => (
    <Text>
      Найдено товаров в категории «{values.category}»: {/* запрос к API */}
    </Text>
  )}
</Form.Subscribe>

function ActiveFiltersBar() {
  const { value } = useTypedFormSubscribe(['search', 'category', 'status'])

  const activeCount = [
    value.search !== '',
    value.category !== 'all',
    value.status.length > 0,
  ].filter(Boolean).length

  if (activeCount === 0) return null

  return (
    <Badge colorScheme="blue">
      Фильтры активны: {activeCount}
    </Badge>
  )
}

function CatalogPage() {
  const [debouncedSearch, setDebouncedSearch] = useState('')

  return (
    <Form schema={FilterSchema} initialValue={defaultFilters} onSubmit={async () => {}}>
      <Form.Field.String name="search" placeholder="Поиск..." />

      {/* Дебаунс через Form.Watch */}
      <Form.Watch
        field="search"
        onChange={(value) => {
          clearTimeout((window as any).__searchTimer)
          ;(window as any).__searchTimer = setTimeout(() => {
            setDebouncedSearch(String(value))
          }, 300)
        }}
      />

      <Form.Subscribe>
        {(filters) => <ProductList filters={{ ...filters, search: debouncedSearch }} />}
      </Form.Subscribe>
    </Form>
  )
}

import { useUrlPrefill } from '@letar/forms'

function CatalogPage() {
  const prefilled = useUrlPrefill({
    fields: ['search', 'category', 'minPrice', 'maxPrice', 'status'],
    schema: FilterSchema, // валидация значений из URL
  })

  return (
    <Form
      schema={FilterSchema}
      initialValue={{ ...defaultFilters, ...prefilled }}
      onSubmit={async () => {}}
    >
      {/* ... */}
    </Form>
  )
}

import { useRouter } from 'next/navigation'

function FilterUrlSync() {
  const router = useRouter()

  return (
    <Form.Subscribe>
      {(values) => {
        // Синхронизируем URL при изменении фильтров
        const params = new URLSearchParams()
        if (values.search) params.set('search', String(values.search))
        if (values.category !== 'all') params.set('category', String(values.category))
        if (values.minPrice !== 0) params.set('minPrice', String(values.minPrice))
        if (values.status?.length) {
          ;(values.status as string[]).forEach((s) => params.append('status', s))
        }

        // Используем useEffect через render trick
        useEffect(() => {
          router.replace(`?${params}`, { scroll: false })
        }, [params.toString()])

        return null
      }}
    </Form.Subscribe>
  )
}

// Использование:
<Form schema={FilterSchema} initialValue={{ ...defaultFilters, ...prefilled }} onSubmit={async () => {}}>
  <FilterUrlSync />
  {/* поля */}
</Form>

interface AppSettings {
  theme: 'light' | 'dark' | 'system'
  language: 'ru' | 'en'
  notifications: boolean
  itemsPerPage: number
}

function SettingsPanel({ settings, onSave }: {
  settings: AppSettings
  onSave: (s: AppSettings) => void
}) {
  return (
    <Form
      schema={SettingsSchema}
      initialValue={settings}
      onSubmit={async (values) => {
        // Здесь submit нужен — применяем настройки
        await onSave(values)
        toast.success('Настройки сохранены')
      }}
    >
      <Form.Field.NativeSelect
        name="theme"
        label="Тема"
        options={[
          { value: 'light', label: 'Светлая' },
          { value: 'dark', label: 'Тёмная' },
          { value: 'system', label: 'Системная' },
        ]}
      />
      <Form.Field.NativeSelect
        name="language"
        label="Язык"
        options={[{ value: 'ru', label: 'Русский' }, { value: 'en', label: 'English' }]}
      />
      <Form.Field.Switch name="notifications" label="Уведомления" />
      <Form.Field.Number name="itemsPerPage" label="Элементов на странице" min={10} max={100} step={10} />

      {/* isDirty показывает, есть ли несохранённые изменения */}
      <Form.Subscribe>
        {(_, formState) => (
          <HStack mt={4}>
            <Form.Button.Submit isDisabled={!formState.isDirty}>
              Применить
            </Form.Button.Submit>
            <Form.Button.Reset isDisabled={!formState.isDirty}>
              Отмена
            </Form.Button.Reset>
          </HStack>
        )}
      </Form.Subscribe>
    </Form>
  )
}

const DashboardControls = z.object({
  period: z.enum(['day', 'week', 'month', 'quarter', 'year']),
  groupBy: z.enum(['day', 'week', 'month']),
  metrics: z.array(z.enum(['revenue', 'orders', 'users', 'conversion'])),
  compareWith: z.enum(['previous_period', 'previous_year', 'none']),
})

function DashboardPage() {
  const prefilled = useUrlPrefill({
    fields: ['period', 'groupBy', 'metrics', 'compareWith'],
    schema: DashboardControls,
  })

  return (
    <Form
      schema={DashboardControls}
      initialValue={{ period: 'month', groupBy: 'day', metrics: ['revenue'], compareWith: 'none', ...prefilled }}
      onSubmit={async () => {}}
    >
      <HStack wrap="wrap" mb={6}>
        <Form.Field.SegmentedControl
          name="period"
          options={periodOptions}
        />
        <Form.Field.NativeSelect name="groupBy" label="Группировать по" options={groupByOptions} />
        <Form.Field.CheckboxGroup name="metrics" options={metricOptions} />
        <Form.Field.NativeSelect name="compareWith" label="Сравнить с" options={compareOptions} />
      </HStack>

      <Form.Subscribe>
        {(controls) => <DashboardCharts controls={controls} />}
      </Form.Subscribe>
    </Form>
  )
}