@longraf/mdesign 0.0.2

package/README.md

@@ -0,0 +1,66 @@
+# Унифицированные блоки для сайтов под управлением Wildless CMS
+
+Набор _core блоков_ для построения сайтов.
+
+_Блок_ - это композиция компонентов UI Kit и (опционально) интеграция с API. Блок по своей сути ближе к понятию _микрофронта_.
+_Блоки_ совместимы и с `React` и c `Vue3` благодаря слою совместимости [Uni JSX](https://github.com/redneckz/uni-jsx/).
+
+> Именно потому импорты из фреймворков недопустимы на уровне блоков.
+
+На низком уровне _блок_ - это совокупность следующего:
+
+- [JSX](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#typescript)
+- Стилизация на [Tailwind CSS](https://tailwindcss.com/)
+- (опционально) Логика на псевдо-хуках (`context.useState(...)` или `context.useAsyncData(...)`)
+
+## Установка пакетов
+
+Требуется Node.js v16 или выше. Для управления версиями Node.js рекомендуется использовать https://github.com/nvm-sh/nvm
+
+```
+$ npm i --force
+```
+
+## Запуск в [React Cosmos](https://github.com/react-cosmos/react-cosmos)
+
+Десктопные блоки http://localhost:5001
+
+```
+$ npm start
+```
+
+Мобильные блоки http://localhost:5002
+
+```
+$ npm run start:mobile
+```
+
+## Сборка
+
+TODO
+
+## Прочие скрипты
+
+TODO
+
+[Документация разработчика](./DEVDOC.md)
+
+Запуск автотестов для 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. Обновленные базовые скриншоты закоммитятся в фича-ветку

package/bin/migrate.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+
+import { glob } from 'glob';
+import { migrateContentUnit } from './migrateContentUnit.js';
+import { loadedScripts, migrationScripts } from './migration-scripts/index.js';
+
+const [, , fromVersion, toVersion] = process.argv;
+
+const CONTENT_DIR = './content';
+
+const fromVersionIndex = findVersionIndex(migrationScripts)(fromVersion);
+const toVersionIndex = findVersionIndex(migrationScripts)(toVersion);
+
+const requiredScripts = loadedScripts.slice(fromVersionIndex, toVersionIndex);
+
+if (requiredScripts.length) {
+  console.log(
+    'Following scripts will be applied: ',
+    requiredScripts.map(({ description }) => description),
+  );
+
+  const contentFiles = await glob(`${CONTENT_DIR}/**/*.json`);
+
+  await Promise.allSettled(contentFiles.map(migrateContentUnit(requiredScripts)));
+}
+
+console.log('Everything is up to date');
+
+function findVersionIndex(versionsList) {
+  return (version) => {
+    const index = versionsList.findIndex((_) => _ === `${version}.js`);
+
+    if (version && index === -1) {
+      throw new Error(`Version ${version} not found`);
+    }
+
+    return index !== -1 ? index : undefined;
+  };
+}

package/bin/migrateContentUnit.js

@@ -0,0 +1,23 @@
+import { readFile, writeFile } from 'fs/promises';
+
+export function migrateContentUnit(migrationScripts) {
+  const contentProcessor = migrationScripts.map((_) => _.default).reduce(composeMigrationScripts);
+
+  return async (unitPath) => {
+    console.log('Start processing of:', unitPath);
+    try {
+      const content = JSON.parse(await readFile(unitPath, 'utf-8'));
+      const result = await contentProcessor(unitPath, content);
+
+      await writeFile(unitPath, JSON.stringify(result, undefined, 2), 'utf-8');
+    } catch (ex) {
+      console.warn(ex);
+    } finally {
+      console.log('End processing of:', unitPath);
+    }
+  };
+}
+
+function composeMigrationScripts(scriptA, scriptB) {
+  return async (unitPath, content) => scriptB(unitPath, await scriptA(unitPath, content));
+}

package/bin/migration-scripts/0.11.1.js

@@ -0,0 +1,34 @@
+import { renameProp } from '../utils.js';
+
+export const description = 'v0.11.1';
+
+export default (uniPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  for (const block of content.blocks) {
+    adjustButtonBlock(block);
+  }
+
+  return { ...content };
+};
+
+function adjustButtonBlock(block) {
+  if (block.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustButtonBlock(childBlock);
+    }
+  }
+
+  if (block.type === 'ButtonBlock') {
+    block.type = 'ButtonsBlock';
+
+    const blockContent = block.content;
+
+    if (blockContent?.button) {
+      blockContent.button = [blockContent.button];
+      renameProp(blockContent, 'button', 'buttons');
+    }
+  }
+}

package/bin/migration-scripts/0.12.10.js

@@ -0,0 +1,59 @@
+export const description = 'v0.12.10';
+
+export default (uniPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  for (const block of content.blocks) {
+    adjustApplicationForm(block);
+  }
+
+  return { ...content };
+};
+
+function adjustApplicationForm(block) {
+  if (block.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustApplicationForm(childBlock);
+    }
+  }
+
+  if (block.type === 'ApplicationForm' && !block?.content?.formBlock) {
+    const blockContent = block?.content;
+    const tempFormBlock = {};
+
+    if (blockContent?.title) {
+      tempFormBlock.title = blockContent.title;
+    }
+
+    if (blockContent?.button) {
+      tempFormBlock.button = blockContent.button;
+    }
+
+    if (blockContent?.link) {
+      tempFormBlock.link = blockContent.link;
+    }
+
+    if (blockContent?.typeForm) {
+      tempFormBlock.formType = getFormType(blockContent.typeForm);
+    }
+
+    blockContent.formBlock = tempFormBlock;
+
+    Reflect.deleteProperty(blockContent, 'typeForm');
+    Reflect.deleteProperty(blockContent, 'title');
+    Reflect.deleteProperty(blockContent, 'button');
+    Reflect.deleteProperty(blockContent, 'link');
+  }
+}
+
+const FORM_TYPES_MAP = {
+  deposit: 'ApplicationFormDeposit',
+  credit: 'ApplicationFormCredit',
+  wed: 'ApplicationFormWed',
+  'business-card': 'ApplicationFormBusinessCard',
+  'acquiring-card': 'ApplicationFormAcquiring',
+};
+
+const getFormType = (typeForm) => FORM_TYPES_MAP[typeForm];

package/bin/migration-scripts/0.12.11.js

@@ -0,0 +1,28 @@
+export const description = 'v0.12.11';
+
+export default (unitPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  for (const block of content.blocks) {
+    adjustRollupItem(block);
+  }
+
+  return { ...content };
+};
+
+function adjustRollupItem(block) {
+  if (block.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustRollupItem(childBlock);
+    }
+  }
+
+  if (block.type === 'RollupItem') {
+    const blockContent = block?.content;
+
+    Reflect.deleteProperty(blockContent, 'labelIcon');
+    Reflect.deleteProperty(blockContent, 'labelIconBgVersion');
+  }
+}

package/bin/migration-scripts/0.12.12.js

@@ -0,0 +1,38 @@
+export const description = 'v0.12.12';
+
+const IGNORE_HEADLINE_TITLE = 'Другие продукты для бизнеса';
+
+export default (uniPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  adjustCarousel(content.blocks);
+
+  return content;
+};
+
+function adjustCarousel(blocks) {
+  let ignoreUpdateVersion = false;
+  for (const block of blocks) {
+    if (block.type === 'Headline' && block?.content?.title === IGNORE_HEADLINE_TITLE) {
+      ignoreUpdateVersion = true;
+    }
+    if (block.blocks && block.type === 'Carousel') {
+      if (!ignoreUpdateVersion) {
+        updateVersion(block);
+      }
+    } else if (block.blocks) {
+      adjustCarousel(block.blocks);
+    }
+  }
+}
+
+function updateVersion(block) {
+  for (const subBlock of block.blocks) {
+    if (subBlock.content && subBlock.content.version === 'secondary') {
+      block.content.version = 'secondary';
+      break;
+    }
+  }
+}

package/bin/migration-scripts/0.12.3.js

@@ -0,0 +1,24 @@
+export const description = 'v0.12.3';
+
+export default (uniPath, content) => {
+  adjustImageOptions(content);
+
+  return content;
+};
+
+function adjustImageOptions(block) {
+  if (block?.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustImageOptions(childBlock);
+    }
+  }
+
+  if (block?.content?.directionRight) {
+    block.content.imageOptions = {
+      ...block.content.imageOptions,
+      directionRight: block.content.directionRight,
+    };
+
+    Reflect.deleteProperty(block?.content, 'directionRight');
+  }
+}

package/bin/migration-scripts/0.12.7.js

@@ -0,0 +1,20 @@
+export const description = 'v0.12.7';
+
+export default (uniPath, content) => {
+  adjustHeadline(content);
+
+  return content;
+};
+
+function adjustHeadline(block) {
+  if (block?.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustHeadline(childBlock);
+    }
+  }
+
+  if (block?.type === 'Headline') {
+    Reflect.deleteProperty(block?.content, 'image');
+    Reflect.deleteProperty(block?.content, 'bgColorHeadline');
+  }
+}

package/bin/migration-scripts/0.12.8.js

@@ -0,0 +1,45 @@
+import fs from 'fs';
+import { dirname, join } from 'path';
+
+export const description = 'v0.12.6';
+
+export default (uniPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  for (const block of content.blocks) {
+    adjustLinkDocs(block, dirname(uniPath));
+  }
+
+  return { ...content };
+};
+
+function adjustLinkDocs(block, uniPathDir) {
+  if (block.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustLinkDocs(childBlock, uniPathDir);
+    }
+  }
+
+  if (block.type === 'LinkDocs') {
+    const blockDocuments = block?.content?.documents || [];
+
+    if (blockDocuments.some((doc) => Boolean(doc.docType))) {
+      return;
+    }
+
+    blockDocuments.forEach(async (doc) => {
+      if (fs.existsSync(join(uniPathDir, doc.href || ''))) {
+        doc.docType = 'Attachment';
+        doc.attachment = {
+          src: doc.href,
+        };
+        Reflect.deleteProperty(doc, 'href');
+        Reflect.deleteProperty(doc, 'fileSize');
+      } else {
+        doc.docType = 'Link';
+      }
+    });
+  }
+}

package/bin/migration-scripts/0.13.13.js

@@ -0,0 +1,34 @@
+import { renameProp } from '../utils.js';
+
+export const description = 'v0.13.13';
+
+export default (uniPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  for (const block of content.blocks) {
+    adjustErrorBlock(block);
+  }
+
+  return { ...content };
+};
+
+function adjustErrorBlock(block) {
+  if (block.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustErrorBlock(childBlock);
+    }
+  }
+
+  if (block.type === 'ErrorBlock' && block?.content) {
+    const content = block.content;
+    if (content?.subtitle) {
+      renameProp(content, 'subtitle', 'description');
+    }
+    const error = content?.error;
+    if (error) {
+      renameProp(error, 'errorContentType', 'contentType');
+    }
+  }
+}

package/bin/migration-scripts/0.13.14.js

@@ -0,0 +1,29 @@
+export const description = 'v0.13.14';
+
+export default (uniPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  for (const block of content.blocks) {
+    adjustProductBlock(block);
+  }
+
+  return { ...content };
+};
+
+function adjustProductBlock(block) {
+  if (block.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustProductBlock(childBlock);
+    }
+  }
+
+  if (
+    block.type === 'ProductBlock' &&
+    block?.content &&
+    typeof block.content.backwardButton === 'object'
+  ) {
+    block.content.backwardButton = Boolean(block.content.backwardButton?.href);
+  }
+}

package/bin/migration-scripts/0.13.15.js

@@ -0,0 +1,25 @@
+export const description = 'v0.13.15';
+
+export default (uniPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  for (const block of content.blocks) {
+    adjustCarouselBlock(block);
+  }
+
+  return { ...content };
+};
+
+function adjustCarouselBlock(block) {
+  if (block.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustCarouselBlock(childBlock);
+    }
+  }
+
+  if (block.type === 'Carousel' && block?.mobile?.content?.visibleItemCount) {
+    block.mobile.content.visibleItemCount = 0;
+  }
+}

package/bin/migration-scripts/0.13.22.js

@@ -0,0 +1,28 @@
+export const description = 'v0.13.22';
+
+export default (unitPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  for (const block of content.blocks) {
+    adjustTariffsTable(block);
+  }
+
+  return { ...content };
+};
+
+const adjustTariffsTable = (block) => {
+  if (block.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustTariffsTable(childBlock);
+    }
+  }
+
+  if (block?.type !== 'TariffsTable') {
+    return;
+  }
+  if (block?.content?.orientation) {
+    Reflect.deleteProperty(block.content, 'orientation');
+  }
+};

package/bin/migration-scripts/0.13.3.js

@@ -0,0 +1,36 @@
+import { renameProp } from '../utils.js';
+
+export const description = 'v0.13.3';
+
+export default (uniPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  for (const block of content.blocks) {
+    adjustHeadline(block);
+  }
+
+  return { ...content };
+};
+
+function adjustHeadline(block) {
+  if (block.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustHeadline(childBlock);
+    }
+  }
+
+  if (block.type === 'Headline') {
+    const blockContent = block?.content;
+
+    if ('isPadding' in blockContent) {
+      if (blockContent.isPadding) {
+        Reflect.deleteProperty(blockContent, 'isPadding');
+      } else {
+        blockContent.isPadding = true;
+        renameProp(blockContent, 'isPadding', 'isEmbedded');
+      }
+    }
+  }
+}

package/bin/migration-scripts/0.13.4.js

@@ -0,0 +1,30 @@
+export const description = 'v0.13.4';
+
+export default (uniPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  adjustCarousel(content.blocks);
+
+  return content;
+};
+
+function adjustCarousel(blocks) {
+  for (const block of blocks) {
+    if (block.blocks && block.type === 'Carousel') {
+      updateCardBorder(block);
+    } else if (block.blocks) {
+      adjustCarousel(block.blocks);
+    }
+  }
+}
+
+function updateCardBorder(block) {
+  for (const subBlock of block.blocks) {
+    if (subBlock.type && subBlock.type === 'CarouselBankHistoryCard') {
+      block.content.noCardBorder = true;
+      break;
+    }
+  }
+}

package/bin/migration-scripts/0.14.0.js

@@ -0,0 +1,26 @@
+export const description = 'v0.14.0';
+
+export default (uniPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  for (const block of content.blocks) {
+    adjustDepositFiltration(block);
+  }
+
+  return { ...content };
+};
+
+function adjustDepositFiltration(block) {
+  if (block.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustDepositFiltration(childBlock);
+    }
+  }
+
+  if (block?.content && block?.type === 'DepositFiltration') {
+    Reflect.deleteProperty(block.content?.periodInput, 'min');
+    Reflect.deleteProperty(block.content?.periodInput, 'max');
+  }
+}

package/bin/migration-scripts/0.14.1.js

@@ -0,0 +1,29 @@
+export const description = 'v0.14.1';
+
+export default (uniPath, content) => {
+  if (!content?.blocks) {
+    return content;
+  }
+
+  for (const block of content.blocks) {
+    adjustSocialMedia(block);
+  }
+
+  return { ...content };
+};
+
+function adjustSocialMedia(block) {
+  if (block.blocks) {
+    for (const childBlock of block.blocks) {
+      adjustSocialMedia(childBlock);
+    }
+  }
+
+  if (block?.content?.socialMedia) {
+    for (const item of block.content.socialMedia) {
+      if (item.text && item.text === 'Текст') {
+        Reflect.deleteProperty(block.content.socialMedia, 'text');
+      }
+    }
+  }
+}

package/bin/migration-scripts/0.14.108.js

@@ -0,0 +1,33 @@
+import { deleteEmptyProps, deleteProp, renameProp, traversePageBlocks } from '../utils.js';
+
+export const description = 'v0.14.108';
+
+export default traversePageBlocks(adjustCarouselInvestmentCard, adjustClearBlock);
+
+function adjustCarouselInvestmentCard(block) {
+  const content = block?.content;
+  if (block?.type !== 'CarouselInvestmentCard' || !content) {
+    return;
+  }
+  block.type = 'ProductBlock';
+  content.imageOptions = {
+    directionRight: true,
+  };
+  content.headlineVersion = 'S';
+  content.padding = 'p-xl';
+  if (content?.cardsList) {
+    content.__html = content.cardsList
+      .map((_) => `<p><strong>${_.parameter}</strong> ${_.parameterDescription}</p>`, '')
+      .join('');
+    deleteProp(content, 'cardsList');
+  }
+
+  renameProp(content, 'additionalDescription', 'description');
+  deleteProp(content, 'columnsMode');
+}
+
+function adjustClearBlock(block) {
+  if (block?.content) {
+    block.content = deleteEmptyProps(block?.content);
+  }
+}