@redneckz/wildless-cms-uni-blocks 0.4.4 → 0.4.6

package/mobile/src/content-page-repository/transformImg.ts

@@ -0,0 +1,157 @@
+import fs from 'fs';
+import path from 'path';
+import util from 'util';
+import sharp from 'sharp';
+import type { ResizeOptions, Sharp } from 'sharp';
+import type { ImageSize } from '../model/ImageSize';
+import type { TransformationOptions } from './TransformationOptions';
+import type { ImgAlignment, ImgSource, Picture } from '../model/Picture';
+import { transformSrc } from './transformSrc';
+import { isPictureSizeEmpty } from '../utils/isPictureSizeEmpty';
+
+const mkdir = util.promisify(fs.mkdir);
+
+type TransformImgParams = {
+  pagePath: string;
+  src: string;
+  containerSize?: ImageSize;
+  transformationOptions: TransformationOptions & ImgSource;
+};
+
+export async function transformImg({
+  pagePath,
+  src,
+  containerSize,
+  transformationOptions,
+}: TransformImgParams): Promise<string> {
+  if (!src) {
+    return '';
+  }
+
+  const { contentDir, publicDir, format, options, size, alignment } = transformationOptions;
+
+  const pageDir = path.dirname(pagePath);
+  const imgPath = `${pageDir}/${src}`;
+  let chain = sharp(imgPath);
+
+  const targetSize = getPictureSize(size, containerSize);
+
+  if (targetSize) {
+    chain = resizeImg(chain, targetSize, getResizeFit(targetSize));
+  }
+
+  if (containerSize) {
+    chain = resizeImg(chain, containerSize);
+
+    // Save intermediate transform result to modify further
+    const { data } = await chain.toBuffer({ resolveWithObject: true });
+
+    chain = resizeImg(
+      sharp(data),
+      getCompositionResizeSize(containerSize, targetSize),
+      getResizeFit(targetSize),
+    );
+
+    chain = await compositeImg({ chain, containerSize, alignment });
+  }
+
+  if (format) {
+    chain = chain.toFormat(format, options);
+  }
+
+  const transformedSrc = transformSrc(src, transformationOptions);
+  const transformedImgPath = `${publicDir}/${path.relative(
+    contentDir,
+    `${path.dirname(pagePath)}/${transformedSrc}`,
+  )}`;
+
+  await mkdir(path.dirname(transformedImgPath), { recursive: true });
+
+  try {
+    await chain.toFile(transformedImgPath);
+  } catch (e) {
+    console.error(e);
+  }
+
+  return transformedSrc;
+}
+
+function createBackgroundImageChain({ width, height }: ImageSize) {
+  const channels = 4;
+  const rgbaColor = 0x00000000;
+
+  const canvas = Buffer.alloc(width * height * channels, rgbaColor);
+
+  return sharp(canvas, { raw: { width, height, channels } });
+}
+
+function resizeImg(chain: Sharp, size: Picture['size'], options?: ResizeOptions) {
+  return chain.resize(size?.width, size?.height, {
+    fit: sharp.fit.fill,
+    background: { r: 0, g: 0, b: 0, alpha: 0 },
+    ...options,
+  });
+}
+
+type CompositeImgParams = {
+  chain: Sharp;
+  containerSize: ImageSize;
+  alignment?: ImgAlignment;
+};
+
+async function compositeImg({
+  chain,
+  containerSize,
+  alignment,
+}: CompositeImgParams): Promise<Sharp> {
+  const { data } = await chain.toBuffer({ resolveWithObject: true });
+
+  return createBackgroundImageChain(containerSize).composite([
+    {
+      input: data,
+      gravity: alignment,
+    },
+  ]);
+}
+
+function getPictureSize(size: Picture['size'], containerSize?: ImageSize) {
+  // If containerSize is undefined intrinsic dimensions of image will be used then.
+  return isPictureSizeEmpty(size) ? containerSize : size;
+}
+
+function getCompositionResizeSize(
+  containerSize: ImageSize,
+  size: Picture['size'] = {},
+): Picture['size'] {
+  const { width, height } = size;
+  const { width: containerWidth, height: containerHeight } = containerSize;
+
+  let widthRatio = 0;
+  let heightRatio = 0;
+
+  if (!(width || height)) {
+    return undefined;
+  }
+
+  if (width) {
+    widthRatio = containerWidth / width;
+  }
+
+  if (height) {
+    heightRatio = containerHeight / height;
+  }
+
+  return widthRatio > heightRatio
+    ? { width: Math.min(Number(width), containerWidth) }
+    : { height: Math.min(Number(height), containerHeight) };
+}
+
+function getResizeFit(size: Picture['size']): ResizeOptions {
+  /*
+    Editor behaviour with one dimension present: resize by given dimension maintaining aspect ratio. (fit: contain)
+    With two dimensions present: resize trying to fill given dimensions (fit: fill)
+   */
+  return {
+    fit: size?.width && size?.height ? sharp.fit.fill : sharp.fit.contain,
+  };
+}

package/mobile/src/content-page-repository/transformPicture.ts

@@ -1,11 +1,8 @@
-import fs from 'fs';
 import path from 'path';
 import sharp from 'sharp';
-import util from 'util';
-import type { ImgSource, Picture } from '../model/Picture';
+import type { Picture } from '../model/Picture';
 import type { TransformationOptions } from './TransformationOptions';
-
-const mkdir = util.promisify(fs.mkdir);
+import { transformImg } from './transformImg';
 
 export async function transformPicture(
   pagePath: string,
@@ -14,8 +11,27 @@ export async function transformPicture(
 ): Promise<Picture> {
   const sources = picture.sources || [];
   const src = picture?.src || '';
-  const [transformedPicture, ...transformedSources] = await Promise.all(
-    [picture].concat(sources).map((_) => transformImg(pagePath, src, { ...options, ..._ })),
+
+  const transformedPicture = await transformImg({
+    pagePath,
+    src,
+    transformationOptions: { ...options, ...picture },
+  });
+
+  const { width, height } = await sharp(
+    path.resolve(options.publicDir, transformedPicture),
+  ).metadata();
+  const containerSize = width && height ? { width, height } : undefined;
+
+  const transformedSources = await Promise.all(
+    sources.map((_) =>
+      transformImg({
+        pagePath,
+        src,
+        containerSize,
+        transformationOptions: { ...options, ..._ },
+      }),
+    ),
   );
 
   return {
@@ -24,57 +40,7 @@ export async function transformPicture(
     sources: transformedSources.map((_, i) => ({
       ...sources[i],
       src: _,
+      size: { width, height },
     })),
   };
 }
-
-async function transformImg(
-  pagePath: string,
-  src: string,
-  transformationOptions: TransformationOptions & ImgSource,
-): Promise<string> {
-  const { contentDir, publicDir, format, options, size } = transformationOptions;
-
-  const pageDir = path.dirname(pagePath);
-  const imgPath = `${pageDir}/${src}`;
-  let chain = sharp(imgPath);
-  if (size) {
-    chain = chain.resize(size?.width, size?.height, {
-      fit: sharp.fit.contain,
-      background: [0, 0, 0, 0],
-    });
-  }
-  if (format) {
-    chain = chain.toFormat(format, options);
-  }
-
-  const transformedSrc = transformSrc(src, transformationOptions);
-  const transformedImgPath = `${publicDir}/${path.relative(
-    contentDir,
-    `${path.dirname(pagePath)}/${transformedSrc}`,
-  )}`;
-
-  await mkdir(path.dirname(transformedImgPath), { recursive: true });
-
-  try {
-    await chain.toFile(transformedImgPath);
-  } catch (e) {
-    console.error(e);
-  }
-
-  return transformedSrc;
-}
-
-function transformSrc(src: string, { format, size }: TransformationOptions & ImgSource): string {
-  const noTransform = !format && !size;
-  if (noTransform) {
-    return src;
-  }
-
-  const fileName = path.basename(src, path.extname(src));
-  const fileSizes = [size?.width, size?.height].filter(Boolean);
-  const suffix = fileSizes.length ? `-${fileSizes.join('-')}` : '';
-  const ext = String(format) || path.extname(src);
-
-  return `${fileName}${suffix}.${ext}`;
-}

package/mobile/src/content-page-repository/transformSrc.ts

@@ -0,0 +1,21 @@
+import path from 'path';
+import type { ImgSource } from '../model/Picture';
+import type { TransformationOptions } from './TransformationOptions';
+import { isPictureSizeEmpty } from '../utils/isPictureSizeEmpty';
+
+export function transformSrc(
+  src: string,
+  { format, size }: TransformationOptions & ImgSource,
+): string {
+  const noTransform = isPictureSizeEmpty(size) && !format;
+  if (noTransform) {
+    return src;
+  }
+
+  const fileName = path.basename(src, path.extname(src));
+  const fileSizes = [size?.width, size?.height].filter(Boolean);
+  const suffix = fileSizes.length ? `-${fileSizes.join('-')}` : '';
+  const ext = format ? String(format) : 'webp';
+
+  return `${fileName}${suffix}.${ext}`;
+}

package/mobile/src/icons/IconName.ts

@@ -2,11 +2,11 @@
 // Generated. Do not touch
 /* eslint-disable max-len, max-lines */
 export enum IconMap {
-  ActualBalanceIcon = 'ActualBalanceIcon', AirPlane = 'AirPlane', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowUpIcon = 'ArrowUpIcon', AtmIcon = 'AtmIcon', BankIcon = 'BankIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', CinemaIcon = 'CinemaIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownload = 'DocDownload', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', Logo = 'Logo', LoupeIcon = 'LoupeIcon', MasterCardIcon = 'MasterCardIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4 = 'PackA4', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PersonalCardIcon = 'PersonalCardIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StateMortgageIcon = 'StateMortgageIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCan = 'WateringCan'
+  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowUpIcon = 'ArrowUpIcon', AtmIcon = 'AtmIcon', BankIcon = 'BankIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', CinemaIcon = 'CinemaIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownloadIcon = 'DocDownloadIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LogoIcon = 'LogoIcon', LoupeIcon = 'LoupeIcon', MasterCardIcon = 'MasterCardIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4Icon = 'PackA4Icon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PersonalCardIcon = 'PersonalCardIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StateMortgageIcon = 'StateMortgageIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCanIcon = 'WateringCanIcon'
 }
 
 export enum IconTitleMap {
-  ActualBalanceIcon = 'Деньги', AirPlane = 'Самолет', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка', ArrowUpIcon = 'Стрелка вверх', AtmIcon = 'Банкомат', BankIcon = 'Банк', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', CinemaIcon = 'Кино', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocDownload = 'Скачать документ', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', Logo = 'Logo', LoupeIcon = 'Лупа', MasterCardIcon = 'MasterCard', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PackA4 = 'PackA4', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PersonalCardIcon = 'Персональная карта', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', StateMortgageIcon = 'StateMortgageIcon', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCan = 'Добавить продукт'
+  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолет', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка', ArrowUpIcon = 'Стрелка вверх', AtmIcon = 'Банкомат', BankIcon = 'Банк', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', CinemaIcon = 'Кино', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocDownloadIcon = 'Скачать документ', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LogoIcon = 'Logo', LoupeIcon = 'Лупа', MasterCardIcon = 'MasterCard', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PackA4Icon = 'PackA4Icon', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PersonalCardIcon = 'Персональная карта', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', StateMortgageIcon = 'StateMortgageIcon', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCanIcon = 'Добавить продукт'
 }
 
 /**
@@ -14,7 +14,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'PackA4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'StateMortgageIcon', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'PackA4Icon', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'StateMortgageIcon', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
-export type IconName = '' | 'ActualBalanceIcon' | 'AirPlane' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowUpIcon' | 'AtmIcon' | 'BankIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'CinemaIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocDownload' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'Logo' | 'LoupeIcon' | 'MasterCardIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PackA4' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PersonalCardIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'StateMortgageIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCan';
+export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowUpIcon' | 'AtmIcon' | 'BankIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'CinemaIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocDownloadIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LogoIcon' | 'LoupeIcon' | 'MasterCardIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PackA4Icon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PersonalCardIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'StateMortgageIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCanIcon';

package/mobile/src/model/ImageSize.ts

@@ -0,0 +1,6 @@
+export type ImageSize = {
+  /** @title Ширина */
+  width: number;
+  /** @title Высота */
+  height: number;
+};

package/mobile/src/model/Picture.ts

@@ -1,8 +1,35 @@
 import type { IconName } from '../icons/IconName';
 import type { IconVersion } from './IconVersion';
+import { ImageSize } from './ImageSize';
 
 export type ImgFormats = 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
 
+/**
+ * @title Позиционирование
+ * @enumNames [
+ *    "Сверху слева",
+ *    "Сверху по центру",
+ *    "Сверху справа",
+ *    "Посередине слева",
+ *    "Посередине по центру",
+ *    "Посередине справа",
+ *    "Снизу слева",
+ *    "Снизу по центру",
+ *    "Снизу справа"
+ *  ]
+ * @default "center"
+ */
+export type ImgAlignment =
+  | 'northwest'
+  | 'north'
+  | 'northeast'
+  | 'west'
+  | 'center'
+  | 'east'
+  | 'southwest'
+  | 'south'
+  | 'southeast';
+
 export interface Img {
   /** @title Картинка */
   src?: string;
@@ -19,6 +46,7 @@ export interface Img {
 export type MediaQuery = 1919 | 1439 | 1279;
 
 export interface ImgSource {
+  alignment?: ImgAlignment;
   /** @title Иконка */
   icon?: IconName;
   iconVersion?: IconVersion;
@@ -30,12 +58,7 @@ export interface ImgSource {
   options?: Record<string, any>;
   media?: MediaQuery;
   /** @title Размер изображения */
-  size?: {
-    /** @title Ширина */
-    width?: number;
-    /** @title Высота */
-    height?: number;
-  };
+  size?: Partial<ImageSize>;
 }
 
 /** @title Изображение */

package/mobile/src/ui-kit/Button/GetButtonClassParams.ts

@@ -0,0 +1,7 @@
+import type { ButtonVersion } from '../../model/ButtonVersion';
+
+export type GetButtonClassParams = {
+  className?: string;
+  rounded?: boolean;
+  version?: ButtonVersion;
+};

package/mobile/src/ui-kit/Button/buttonClassNameConstants.ts

@@ -0,0 +1,16 @@
+import type { ButtonVersion } from '../../model/ButtonVersion';
+
+export const buttonStyleMap: Record<ButtonVersion, string> = {
+  primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
+  secondary:
+    'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
+  link: '',
+};
+
+export const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
+  primary: 'bg-secondary-dark text-secondary-text',
+  secondary: 'bg-secondary-light text-secondary-text',
+  link: '',
+};
+
+export const buttonStyle = 'text-center font-sans select-none';

package/mobile/src/ui-kit/Button/getDisabledButtonClasses.ts

@@ -0,0 +1,15 @@
+import type { GetButtonClassParams } from './GetButtonClassParams';
+import { buttonDisabledStyleMap, buttonStyle } from './buttonClassNameConstants';
+
+export const getDisabledButtonClasses = ({
+  className,
+  rounded,
+  version,
+}: GetButtonClassParams): string =>
+  [
+    'inline-block',
+    buttonStyle,
+    version ? buttonDisabledStyleMap[version] : '',
+    rounded ? 'rounded-full' : 'rounded-md',
+    className,
+  ].join(' ');

package/mobile/src/ui-kit/Button/getRegularButtonClasses.ts

@@ -0,0 +1,15 @@
+import type { GetButtonClassParams } from './GetButtonClassParams';
+import { buttonStyle, buttonStyleMap } from './buttonClassNameConstants';
+
+export const getRegularButtonClasses = ({
+  className,
+  rounded,
+  version,
+}: GetButtonClassParams): string =>
+  [
+    buttonStyle,
+    'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border',
+    version ? buttonStyleMap[version] : '',
+    rounded ? 'rounded-full' : 'rounded-md',
+    className,
+  ].join(' ');

package/mobile/src/ui-kit/CurrencyInput/CurrencyInput.tsx

@@ -0,0 +1,70 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { clamp } from '../../utils/clamp';
+
+// ISO 4217 codes
+/**
+ * @title Валюта
+ * @enumNames ["Рубль", "Доллар", "Евро"]
+ * @default "RUB"
+ */
+type Currency = 'RUB' | 'USD' | 'EUR';
+
+const CurrencyMap: Record<Currency, string> = {
+  RUB: '₽',
+  USD: '$',
+  EUR: '€',
+};
+
+type CurrencyInputProps = {
+  className?: string;
+  label?: string;
+  currency?: Currency;
+  onChange?: (value: string) => void;
+  name?: string;
+  value?: string;
+  placeholder?: string;
+  minValue?: number;
+  maxValue?: number;
+};
+
+export const CurrencyInput = JSX<CurrencyInputProps>(
+  ({
+    className = '',
+    label,
+    currency = 'RUB',
+    onChange,
+    value = '',
+    minValue = 0,
+    maxValue = 300000,
+    ...inputProps
+  }) => {
+    const handleChange = (e: any) => {
+      if (!onChange) {
+        return;
+      }
+
+      const newValue =
+        e.target.value === '' ? '' : String(clamp(e.target.value as number, minValue, maxValue));
+
+      onChange(newValue);
+    };
+
+    return (
+      <div className={className}>
+        {label ? <label className="block text-m-light mb-2">{label}</label> : null}
+        <div className="h-[56px] relative flex items-center">
+          <input
+            type="number"
+            className="text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke"
+            onChange={handleChange}
+            value={value}
+            min={minValue}
+            max={maxValue}
+            {...inputProps}
+          />
+          <span className="text-xl-light absolute right-4">{CurrencyMap[currency]}</span>
+        </div>
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/Img/ImgAsPicture.tsx

@@ -23,13 +23,13 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
         {image?.sources?.length
           ? image.sources
               .sort(sourcesComparator)
-              .map(({ src, format, media, size }, index) => (
+              .map(({ src, format, media }, index) => (
                 <source
                   key={`${index}_${src}`}
                   srcSet={src}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
-                  {...size}
+                  {...image.size}
                 />
               ))
           : null}
@@ -40,6 +40,11 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
 );
 
 const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
+  const style = {
+    width: image.size?.width ? `${image.size?.width}px` : '100%',
+    height: image.size?.height ? `${image.size?.height}px` : '100%',
+  };
+
   const title = image.title || '';
   const alt = image.alt || image.title;
   const imgStyle = isMobile ? 'm-auto' : 'm-0';
@@ -50,6 +55,7 @@ const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
       className={`${imgStyle} ${imageClassName}`}
       alt={alt}
       title={title}
+      style={style}
       {...image.size}
     />
   );

package/mobile/src/ui-kit/InnerTable/InnerTable.tsx

@@ -18,7 +18,7 @@ export const InnerTable = JSX<InnerTableProps>(({ context, dataUrl, pdfUrl }) =>
   const currencies = tableData?.map((item) => item.currency ?? '');
 
   return tableData ? (
-    <div className="bg-white z-10 pr-[50px]">
+    <div className="bg-white z-10">
       <InnerTableHeader
         currencies={currencies}
         activeTabIndex={activeTabIndex}

package/mobile/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -10,9 +10,9 @@ export interface TableInnerButtonProps extends TariffsTableInnerEvent, UniBlockP
 }
 
 export const TableInnerButton = JSX<TableInnerButtonProps>(
-  ({ isOpen, dataUrl, rowIdx, cellIdx, fieldIdx }) => {
+  ({ isOpen, dataUrl, pdfUrl, rowIdx, cellIdx, fieldIdx }) => {
     const handleClick = () => {
-      EventBus.inst.fire('tariffInnerTable', { dataUrl, rowIdx, cellIdx, fieldIdx });
+      EventBus.inst.fire('tariffInnerTable', { dataUrl, pdfUrl, rowIdx, cellIdx, fieldIdx });
     };
 
     return (

package/mobile/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -33,7 +33,7 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
           version="secondary"
           className="flex justify-center items-center text-l-light text-primary-main px-8"
         >
-          <Img image="DocDownload" className="mr-[10px]" width="24" height="24" asSVG />
+          <Img image="DocDownloadIcon" className="mr-[10px]" width="24" height="24" asSVG />
           <span>Скачать в PDF</span>
         </Button>
       ) : null}

package/mobile/src/ui-kit/Logo/Logo.tsx

@@ -28,7 +28,7 @@ export const Logo = JSX<Partial<LogoProps>>(
         target={targetBlank ? '_blank' : '_self'}
         aria-label="Россельхозбанк"
       >
-        <Img image={{ icon: 'Logo' }} className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`} asSVG />
+        <Img image={{ icon: 'LogoIcon' }} className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`} asSVG />
         {hideTitle ? null : (
           <span className={`${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`}>
             {children || 'Россельхозбанк'}

package/mobile/src/utils/isPictureSizeEmpty.ts

@@ -0,0 +1,5 @@
+import type { Picture } from '../model/Picture';
+
+export function isPictureSizeEmpty(size: Picture['size']): boolean {
+  return !(size?.width || size?.height);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -127,6 +127,7 @@
     "@testing-library/react": "^12.1.5",
     "@types/glob": "^8.0.0",
     "@types/jest": "^28.1.5",
+    "@types/sharp": "^0.31.0",
     "@typescript-eslint/eslint-plugin": "^5.30.6",
     "@typescript-eslint/experimental-utils": "^5.30.6",
     "@typescript-eslint/parser": "^5.30.6",