UI-кит и блоки

Прежде чем начать

Откройте загруженный проект supastack в Visual Studio Code, используя «Файл» → «Открыть папку», затем выберите «Терминал» → «Новый терминал». Корень репозитория — это папка, содержащая package.json, приложения и пакеты. Запустите команду ниже и оставьте терминал открытым. Если команда не распознается, завершите руководство по установке инструмента, прежде чем продолжить.

Сначала прочтите руководство по платформе. Сервер — это процесс приложения, который отвечает на запросы браузера или телефона. Веб читает apps/web-tanstack/.env.local, Expo читает apps/mobile/.env.local, а команды миграции базы данных читают корневой .env. Демонстрация без базы данных / панели мониторинга отделена от реальных учетных записей / аутентификации, для которых необходимо перенести Postgres. Для оформления заказа только на телефоне или компьютере требуется отдельно работающий веб-сервер.

• Установите инструменты и получите код
• Изучение команд, файлов и конфигурации
• Пройдите руководство по первому запуску в Интернете

corepack pnpm --filter @supastack/web-tanstack dev

Настройка и конфигурация

packages/ui-web содержит общие продуктовые компоненты (кнопки, поля ввода, карточки, бейджи, диалоги, части оболочки), а packages/design-tokens — источник токенов, который app-theme.css отображает в CSS-переменные. Маршрут /kit-blocks монтирует каталог блоков — составные секции, которые можно перенести в свой продукт.

apps/mobile потребляет packages/ui-native для эквивалентных нативных примитивов, так что стилизация поверхностей остаётся платформенной, а контракты — общими.

# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web-tanstack dev
# Then open http://localhost:3000/kit-blocks in your browser

# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)

Рабочий процесс внедрения

Собирайте экраны сначала из общих компонентов; прибегайте к кастомному элементу только когда кит не может выразить паттерн. Новые общие части принадлежат ui-web со стилизацией на токенах, чтобы каждый пакет темы применялся автоматически.

Держите маркетинговые компоненты (src/marketing) вне продуктовых поверхностей и наоборот — две системы каркаса намеренно разделены.

Проверка и устранение неполадок

Проверяйте новый компонент на каждом пресете density/radius/font и как минимум на одном светлом и одном тёмном пакете. Проверьте фокус с клавиатуры, разметку на 320px и reduced motion; галерея кита на /settings/appearance — самый быстрый обход.