Fork: 0
root / vmk-ui-kit
Transfer to URL with SHA Find file
Newer
Older
vmk-ui-kit / PROJECT_NOTES.md
@Eugene Sukhodolskiy Eugene Sukhodolskiy 1 day ago 7 KB Sync tokens and components with Figma variables and frames
Raw Blame History

Рабочие заметки по VMK UI Kit

Контекст и цель

Создать UI kit vmk-ui-kit на основе Figma-макета, с сохранением API-совместимости с gnexus-ui-kit. Существующие проекты, использующие gnexus-ui-kit, должны иметь возможность мигрировать без массовой переписки кода.

Согласованные решения

  • Пакет: новый пакет vmk-ui-kit, а не drop-in replacement. API импортов и компонентов повторяет gnexus-ui-kit, но имя пакета своё.
  • Билд-стек: Gulp 5 + Dart Sass (@use/@forward) + PostCSS/autoprefixer + clean-css + esbuild + BrowserSync. Максимальная близость к reference для простоты совместимости.
  • Playwright: добавлен @playwright/test для визуального сравнения и точной подгонки компонентов под дизайн.
  • Коммиты: без Co-Authored-By и прочего соавторства.
  • Документация: ведём PROJECT_NOTES.md для внутреннего состояния; публичная документация разработчика и демо-страницы компонентов — в docs/ и demo/, как в gnexus-ui-kit.
  • Порядок работы:
    1. Общие стили и токены.
    2. Компоненты, общие для нового и старого наборов.
    3. Компоненты из gnexus-ui-kit, отсутствующие в новом дизайне, — перерисовать в новом стиле.
    4. Новые компоненты, есть только в новом наборе.
  • Figma-токен: сохранён вне репозитория (memory-файл), в .gitignore добавлен .figma-token.
  • Иконки: пользователь предоставил Icons_svg.zip с SVG-иконками. Архив распакован в public/assets/icons/svg/, все stroke="black" заменены на currentColor, создан index.json для поиска по имени, добавлен icon-helper.js для загрузки SVG inline.

Ссылки

Текущее состояние

Что сделано

  • Созданы package.json, gulpfile.js, .gitignore.
  • Добавлены npm-скрипты: build, build:vue, dev, start, test:e2e, test:visual, test:vue-adapter, build:example:vue.
  • Playwright добавлен в devDependencies; Chromium установлен; smoke test проходит.
  • Создана структура исходников и документации.
  • Токены из Figma выгружены и применены:
    • figma design parts/vars/ — JSON-экспорт variables (global, Mode 1, borderWidth, radius).
    • src/scss/_palette-colors.scss — primitive scales (neutral с шагом 25, lavender, mint, yellow) и semantic primitives.
    • src/scss/_design-tokens.scss — semantic surfaces, borders, полный radius scale (xs/sm/md/lg/xl/2xl/full).
    • src/scss/_fonts.scss — Plus Jakarta Sans + полная типографическая шкала.
    • docs/style-guide.md — актуальная документация по токенам.
  • Иконки подключены:
    • 967 SVG-иконок распакованы в public/assets/icons/svg/.
    • Все stroke="black"/fill="black" заменены на currentColor.
    • public/assets/icons/index.json — карта имя → путь.
    • src/js/components/icon-helper.js — асинхронная загрузка и рендер SVG inline.
    • src/scss/components/_icons.scss — базовые стили для inline-иконок.
  • Button + Vue-адаптер реализованы:
    • src/scss/components/_buttons.scss — варианты primary/secondary/tertiary/accent/success/warning/info/danger/error, размеры lg/md/sm/xs/xxs, состояния disabled/loading, destructive secondary/tertiary.
    • src/vue/components/GnButton.js — API-совместим с gnexus-ui-kit (variant, size, icon, loading, disabled, type).
    • src/vue/components/Icon.js — асинхронный inline SVG.
    • src/vue/utils.js — cx, normalizeVariant, normalizeSize, iconNode, trapFocus с поддержкой legacy ph- имён.
    • demo/partials/buttons.html — визуальные примеры.
  • Overlay-компоненты реализованы:
    • src/scss/components/_modals.scss + src/vue/components/GnModal.js — фокус-трап, Escape, клик по backdrop, телепорт в body.
    • src/scss/components/_drawer.scss + src/vue/components/GnDrawer.js — выдвижная панель справа/слева.
    • src/scss/components/_toasts.scss + src/js/components/toasts.js + src/vue/components/GnToastProvider.js + src/vue/composables/useToast.js — тосты с прогресс-баром и lifetime.
    • demo/partials/modals.html, drawer.html, toasts.html — демо-примеры.
  • Проверены команды:
    • npm run build — проходит.
    • npm run build:example:vue / npm run test:vue-adapter — проходят.
    • npm run test:e2e — проходит.

Что нужно сделать

  1. Уточнить radius-токены — зафиксированы по radius.tokens.json.
  2. Зафиксировать spacing scale (если в Figma есть отдельная страница — найти; иначе оставить текущую).
  3. Реализовать foundation-компоненты demo: Typography, Palette, Utilities.
  4. Реализовать базовые компоненты и Vue-адаптеры (Input, Badge, Alert и т.д.).
  5. Обновить docs/component-coverage.md по мере добавления компонентов.
  6. Создать визуальные Playwright-тесты для сравнения компонентов с PNG-экспортами в figma design parts/frames/.

Заметки по reference

  • gnexus-ui-kit публикует browser API в window.GNexusUIKit и одновременно в window (Helper, Toasts, Modals и т.д.).
  • Vue adapter — render-function .js файлы, без .vue SFC.
  • CSS entry src/scss/kit.scss импортирует все компоненты и базовые стили.
  • Иконки — Phosphor Icons, обязательный base class ph.
  • Варианты: primary, secondary, accent, success, warning, danger, error, info.

Риски и открытые вопросы

  • Figma REST API ограничен на бесплатном аккаунте (Tier 1 — 6 запросов /files в месяц для View/Collab). Переменные выгружены через UI-экспорт (figma design parts/vars/), что надёжнее API.
  • Plus Jakarta Sans подключён через Google Fonts в demo; можно заменить на self-hosted при необходимости.
  • Нужно ли сохранять dist/js/vmk-ui-kit.js global namespace как VMKUIKit или дублировать под GNexusUIKit для совместимости? (Пока выбран VMKUIKit, потому что пакет новый.)