FTS в React: форма и таблица из одной модели

В браузере используйте отдельный entrypoint. Он не тянет Node crypto и не принимает строгих certificate decisions:

import { compile } from "@digitable/fts/browser"

const document = compile(source)

Готовый Digitable-компонент

import { useMemo, useState } from "react"
import { compile } from "@digitable/fts/browser"
import { FtsForm } from "@digitable-lol/ui-components"

export function PurchaseForm({ source }: { source: string }) {
  const document = useMemo(() => compile(source), [source])
  const [value, setValue] = useState({ сумма: 0, "постоянный клиент": false })

  return (
    <FtsForm
      document={document}
      objectName="Покупка"
      value={value}
      onChange={setValue}
      onSubmit={(purchase) => sendToServer(purchase)}
      submitLabel="Рассчитать"
    />
  )
}

FtsForm переводит Строка, Число, Деньги, Дата, Признак и optional-тип в подходящие controls. Он controlled: состояние принадлежит приложению.

Таблица

Адаптер колонок использует ту же структуру:

const structure = document.structures.find(({ name }) => name === "Покупка")
const columns = structure?.fields.map((field) => ({
  id: field.name,
  header: field.name,
  accessorKey: field.name,
  format: field.type === "Деньги" ? "currency" : "plain",
}))

Чего модель не должна решать

FTS знает, что поле — дата, но не знает локаль date picker. Он знает обязательность, но не текст ошибки и не момент её показа. Он не определяет responsive layout, focus management и серверную уникальность. Эти решения остаются в design system и приложении.

Server authority

Frontend-компиляция нужна для UI и preview. Финальное бизнес-решение повторно выполняется на сервере: клиентский JS можно изменить. Для строгих сертификатов browser entrypoint намеренно недостаточен.

Упражнение

Добавьте поле «дата покупки» является датой и optional-комментарий. Проверьте, что форма меняется без правки JSX. Затем добавьте component test: дата создаёт input[type=date], optional-поле не получает required.

Дальше: DDD