Шаблон приложения

Каждое новое приложение рождается из шаблона xflow: проект на Vite и React с готовыми компонентами в стиле интерфейса xflow. Шаблон приходит один раз при создании приложения и дальше не обновляется.

Что можно менять

• Компоненты в src/components/ui и готовые блоки в src/components/blocks это стартовый набор: их правят, перекрашивают или удаляют.
• Любые цвета, своя палитра, одна тема без тёмной: всё разрешено.
• Пока в приложении остаётся хоть один компонент шаблона, имена цветов в :root файла src/index.css не переименовывают: компоненты красятся ими. Значения менять можно, это HSL без # (216 95% 40%). Свои цвета заводят под новыми именами.
• Картинки импортируют из src/ (import logo from './assets/logo.png'), а не кладут в public/: путь вида /logo.png ломается внутри xflow в Safari.

Что принадлежит платформе

Эти файлы остаются такими, какими пришли: через них работают вход, вызов функций и сбор ошибок.

• src/lib/platform-auth.ts, src/contexts/platform-auth-context.tsx, src/hooks/use-platform-auth.ts;
• src/lib/xflow.ts, src/utils/error-logger.ts.

Код продолжает вызывать initPlatformAuth() и initErrorLogger() и подключать index.css. Если файл изменили, сборка откажет и назовёт версию, из которой взять оригинал:

xflow pull --revision N --into ./original

Функции из приложения

Функцию проекта зовут через xflow.functions.invoke('имя', { body }), а не по адресу. Приложение должно быть среди зовущих функции, см. Функции.

Как сделать хорошо

• Сначала взять готовый блок или компонент, свой писать, когда их не хватает.
• Списки, флажки и даты через Select, Checkbox, DatePicker из src/components/ui: голый <select> в Safari и Firefox открывает системный список.
• У каждого экрана четыре состояния: загрузка, ошибка, пусто, данные. Пустой экран говорит, что здесь появится, и предлагает действие.
• Цвет только для смысла: статус, действие, ошибка. Структуру держит серый.
• В первой миграции 5-10 правдоподобных строк: пустой экран выглядит недоделанным.
• Своё название вкладки и иконка.