@redneckz/wildless-cms-uni-blocks

Унифицированные блоки для сайтов под управлением Wildless CMS

Набор core блоков для построения сайтов.

Блок - это композиция компонентов UI Kit и (опционально) интеграция с API. Блок по своей сути ближе к понятию микрофронта. Блоки совместимы и с React и c Vue3 благодаря слою совместимости Uni JSX.

Именно потому импорты из фреймворков недопустимы на уровне блоков.

На низком уровне блок - это совокупность следующего:

• JSX
• Стилизация на Tailwind CSS
• (опционально) Логика на псевдо-хуках (context.useState(...) или context.useAsyncData(...))

Установка пакетов

Требуется Node.js v20 или выше. Для управления версиями Node.js рекомендуется использовать https://github.com/nvm-sh/nvm

$ npm i --force

Запуск в React Cosmos

Десктопные блоки http://localhost:5001

$ npm start

Мобильные блоки http://localhost:5002

$ npm run start:mobile

Коммиты

• На один мердж-реквест делаем один коммит
• В случае необходимости внесения правок в уже существующий коммит использовать команду git commit --amend --no-edit
• Коммит должен начинаться с заглавной буквы

Сборка

TODO

Прочие скрипты

TODO

Документация разработчика

Запуск автотестов для Visual Regression блоков:

• Базовые скриншоты блоков, с которыми будет производится сравнение, находятся в папке cypress/snapshots/base

• При выполнении тестов будут создаваться скриншоты блоков в папках cypress/snapshots/actual, cypress/snapshots/diff (в том числе по успешно пройденным)

• Тесты по визуальному регрессу запускаются вместе с pipeline

• Если тест не отработает успешно:

  1. В строке с pipeline в артефактах будет архив со скриншотами, там можно увидеть отличия между компонентами (https://github.com/redneckz/wildless-cms-uni-blocks/blob/main/cosmos-static/snapshotDiff.png)

• Обновить snapshots можно в gitlab

  1. Перейти во вкладку Overview найти строку с Pipeline (https://gitlab.sz.rshbcloud.ru/core-team/cms/design/-/raw/master/cosmos-static/snapshots_gitlab.jpg)
  2. Нажать на стрелочку "Run" и дождаться прохождения всех пайплайнов (https://gitlab.sz.rshbcloud.ru/core-team/cms/design/-/raw/master/cosmos-static/snapshots_gitlab_2.jpg)

• Обновить snapshots можно в github

  1. Во вкладке actions необходимо выбрать вкладку e2e-update-snapshots (https://github.com/redneckz/wildless-cms-uni-blocks/blob/main/cosmos-static/readme-snapshots-3.png)
  2. Нажать кнопку Run workflow и выбрать ветку, в которой нужно проапдейтить snapshots (https://github.com/redneckz/wildless-cms-uni-blocks/blob/main/cosmos-static/readme-snapshots.png)
  3. Нажать кнопку Run workflow, после чего запустится обновление snapshots (https://github.com/redneckz/wildless-cms-uni-blocks/blob/main/cosmos-static/readme-snapshots-2.png)
  4. После успешного обновления snapshots в pull request автоматически запустится проверка e2e-visual-regression / visual-regression (push).

• После скачивания архива в папке cypress/snapshots/actual можно посмотреть скриншот с ошибкой теста, в папке cypress/snapshots/diff скриншот, на котором выделена разница в изображении

• Если изменения корректны, то необходимо обновить базовые скриншоты - запустить в ручном режиме workflow [e2e-update-snapshots]:

  1. Перед запуском необходимо выбрать свою фича-ветку
  2. Обновленные базовые скриншоты закоммитятся в фича-ветку