@letar/forms — Declarative Form Components for React

Обзор

@letar/forms/offline обеспечивает поддержку офлайн-форм для Progressive Web Apps. Формы, отправленные офлайн, сохраняются в локальную очередь и синхронизируются при восстановлении соединения.

Установка

import { useOfflineForm, FormOfflineIndicator, FormSyncStatus } from '@letar/forms/offline'

Базовое использование

<Form
  schema={Schema}
  initialValue={data}
  offline={{
    actionType: 'UPDATE_PROFILE',
    onQueued: () => toast.info('Сохранено локально — синхронизируется при подключении'),
    onSynced: () => toast.success('Синхронизировано с сервером!'),
  }}
  onSubmit={handleSubmit}
>
  <Form.OfflineIndicator />
  <Form.Field.String name="name" />
  <Form.Field.String name="email" />
  <Form.SyncStatus />
  <Form.Button.Submit />
</Form>

Как это работает

Онлайн — форма отправляется как обычно через onSubmit
Офлайн — данные формы сохраняются в очередь IndexedDB/localStorage
Снова онлайн — отложенные отправки воспроизводятся по порядку
Конфликты — настраиваемая стратегия слияния

Компоненты

FormOfflineIndicator

Отображает текущий статус подключения:

<Form.OfflineIndicator />
// Показывает: 🟢 Онлайн или 🔴 Офлайн

FormSyncStatus

Показывает статус очереди синхронизации:

<Form.SyncStatus />
// Показывает: "3 изменения ожидают синхронизации"

Хуки

useOfflineForm

Низкоуровневый хук для кастомной офлайн-логики:

const { isOnline, queue, processQueue } = useOfflineForm({
  actionType: 'CREATE_ORDER',
  onQueued: (item) => console.log('В очереди:', item),
  onSynced: (item) => console.log('Синхронизировано:', item),
})

useOfflineStatus

Простой статус подключения:

const { isOnline } = useOfflineStatus()

useSyncQueue

Доступ и управление очередью синхронизации:

const { items, clear, retry } = useSyncQueue()

Офлайн режим