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

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

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

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

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

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

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

Требуется Node.js v16 или выше. Для управления версиями 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

Сборка

TODO

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

TODO

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

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

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

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

• Тесты по визуальному регрессу запускаются в pipeline при событии push, workflow называется [e2e-visual-regression]

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

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

• Обновить 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. Обновленные базовые скриншоты закоммитятся в фича-ветку