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

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/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/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/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.5",
   "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",

package/src/components/BenefitsBlock/BenefitsBlock.example.json

@@ -1,5 +1,6 @@
 {
   "title": "Преимущества",
+  "benefitsBlockVersion": "primary",
   "benefitList": [
     {
       "label": "Преимущество №1",

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -61,6 +61,7 @@ export default {
             icon: image,
           },
         ]}
+        benefitsBlockVersion="primary"
       />
     </div>
   ),
@@ -104,10 +105,10 @@ export default {
             icon: { icon: 'GlobalIcon' },
           },
         ]}
+        benefitsBlockVersion="primary"
       />
     </div>
   ),
-
   list: (
     <div className="container grid grid-cols-12">
       <BenefitsBlock
@@ -155,4 +156,96 @@ export default {
       />
     </div>
   ),
+  'list-green': (
+    <div className="container grid grid-cols-12">
+      <BenefitsBlock
+        context={context}
+        className="col-span-12"
+        title="Преимущества кредита"
+        benefitList={[
+          {
+            label: 'Без комиссии',
+            icon: { icon: 'ClockIcon' },
+            description: {
+              bullets: true,
+              items: itemsList,
+              benefitType: 'list',
+            },
+          },
+          {
+            label: 'Оформление по паспорту',
+            description: {
+              bullets: true,
+              items: itemsList,
+              benefitType: 'list',
+            },
+            icon: { icon: 'SignDocsIcon' },
+          },
+          {
+            label: 'Без залога и поручительства',
+            description: {
+              bullets: true,
+              items: itemsList,
+              benefitType: 'list',
+            },
+            icon: { icon: 'ComfortableCompIcon' },
+          },
+          {
+            label: 'Деньги за 3 дня',
+            description: {
+              bullets: true,
+              items: itemsList,
+              benefitType: 'list',
+            },
+            icon: { icon: 'ActualBalanceIcon' },
+          },
+        ]}
+        benefitsBlockVersion="secondary"
+      />
+    </div>
+  ),
+  'desc-icon-green': (
+    <div className="container grid grid-cols-12">
+      <BenefitsBlock
+        context={context}
+        className="col-span-12"
+        title="Преимущества кредита"
+        benefitList={[
+          {
+            label: 'Без комиссии',
+            description: {
+              name: 'Комиссия за выдачу ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'MoneyIcon' },
+          },
+          {
+            label: 'Оформление',
+            description: {
+              name: 'Обеспечение ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'PersonalCardIcon' },
+          },
+          {
+            label: 'Без залога ',
+            description: {
+              name: 'Единовременное перечисление ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'CalendarTickIcon' },
+          },
+          {
+            label: 'Деньги за 3 дня',
+            description: {
+              name: 'Рассмотрение  ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'GlobalIcon' },
+          },
+        ]}
+        benefitsBlockVersion="secondary"
+      />
+    </div>
+  ),
 };

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -3,64 +3,114 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import type { BenefitItemProps, BenefitsBlockContent } from './BenefitsBlockContent';
-import { DescriptionDef, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
+import type { BenefitsBlockContent, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
+import {
+  BenefitBlockItemProps,
+  BenefitsBlockVersion,
+  DescriptionDef,
+} from './BenefitsBlockContent';
+import { Picture } from '../../model/Picture';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
+const benefitsBlockStyleMap = {
+  primary: 'bg-white',
+  secondary: 'bg-primary-main',
+};
+
+const benefitsTextStyleMap = {
+  primary: '',
+  secondary: 'text-white',
+};
+
+const benefitsDescriptionStyleMap = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white opacity-80',
+};
+
+const benefitsIconStyleMap = {
+  primary: 'bg-main-divider text-primary-main',
+  secondary: 'bg-white/30 text-black',
+};
+
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, benefitList, ...rest }) => {
+  ({ className = '', title, benefitList, benefitsBlockVersion = 'primary', ...rest }) => {
     return (
       <BlockWrapper
-        className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className}`}
+        className={`font-sans text-primary-text p-12 flex flex-col items-center ${className} ${benefitsBlockStyleMap[benefitsBlockVersion]}`}
         {...rest}
       >
         {title ? (
-          <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
+          <Heading
+            headingType="h3"
+            as="h2"
+            className={`max-w-[47rem] text-center ${benefitsTextStyleMap[benefitsBlockVersion]}`}
+            title={title}
+          />
         ) : null}
-        {benefitList?.length ? renderBenefits(benefitList) : null}
+        {benefitList?.length ? renderBenefits(benefitList, benefitsBlockVersion) : null}
       </BlockWrapper>
     );
   },
 );
 
-const renderBenefits = (benefits: BenefitItemProps[]) => {
+const renderBenefits = (
+  benefitList: BenefitBlockItemProps[],
+  benefitsBlockVersion: BenefitsBlockVersion,
+) => {
   return (
     <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
-      {benefits.map(renderStep)}
+      {benefitList.map(renderStep(benefitsBlockVersion))}
     </div>
   );
 };
 
-const renderStep = (benefit: BenefitItemProps, i: number) => {
-  const description = benefit?.description || undefined;
+const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BenefitsBlockVersion) => {
+  if (!benefitIcon.icon) {
+    return benefitIcon;
+  }
+  benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';
 
-  return (
-    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
-      {benefit?.icon?.icon ? (
-        <Img
-          className="w-[50px] h-[50px] min-w-[50px] p-3 rounded-full bg-main-divider"
-          image={benefit.icon}
-          asSVG
-        />
-      ) : null}
-      {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
-      <div className="ml-5">
-        {benefit?.label ? <h3 className="text-h6 m-0">{benefit.label}</h3> : null}
-        {renderDescription(description)}
-      </div>
-    </div>
-  );
+  return benefitIcon;
 };
 
-const renderDescription = (description?: DescriptionDef) => {
+const renderStep =
+  (benefitsBlockVersion: BenefitsBlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
+    const description = (benefit?.description || undefined) as DescriptionDef;
+
+    return (
+      <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
+        {benefit?.icon?.icon ? (
+          <Img
+            className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[benefitsBlockVersion]}`}
+            image={setIconVersion(benefit.icon, benefitsBlockVersion)}
+            asSVG
+          />
+        ) : null}
+        {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
+        <div className="ml-5">
+          {benefit?.label ? (
+            <h3 className={`text-h6 m-0 ${benefitsTextStyleMap[benefitsBlockVersion]}`}>
+              {benefit.label}
+            </h3>
+          ) : null}
+          {renderDescription(description, benefitsBlockVersion)}
+        </div>
+      </div>
+    );
+  };
+
+const renderDescription = (
+  description: DescriptionDef,
+  benefitsBlockVersion: BenefitsBlockVersion,
+) => {
   const benefitType = description ? description?.benefitType : null;
   if (!benefitType) {
     return null;
   }
 
   return description ? (
-    <div className="text-l-light text-secondary-text mt-2">
+    <div className={`text-l-light mt-2 ${benefitsDescriptionStyleMap[benefitsBlockVersion]}`}>
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -37,7 +37,7 @@ export type DescriptionDef = EmptyOption | TextBenefitDef | ListBenefitDef;
 /**
  * @title Преимущество
  */
-export interface BenefitItemProps {
+export interface BenefitBlockItemProps {
   /** @title Название */
   label?: string;
   /** @title Описание */
@@ -45,6 +45,12 @@ export interface BenefitItemProps {
   icon?: Picture;
 }
 
+/**
+ * @title Цвет блока
+ * @enumNames ["Основная", "Второстепенная"]
+ */
+export type BenefitsBlockVersion = 'primary' | 'secondary';
+
 /**
  * @title Блок преимущества
  */
@@ -53,5 +59,7 @@ export type BenefitsBlockContent = TitleProps & {
    * @title Список преимуществ
    * @maxItems 6
    */
-  benefitList?: BenefitItemProps[];
+  benefitList?: BenefitBlockItemProps[];
+  /** @default primary */
+  benefitsBlockVersion?: BenefitsBlockVersion;
 };

package/src/components/ContentPage/ContentPage.page.json

@@ -1914,8 +1914,7 @@
           "alt": "Варианты потребительского кредита",
           "format": "webp",
           "size": {
-            "width": 400,
-            "height": 300
+            "width": 300
           }
         }
       }

package/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`Blocks Accordion should render block "Accordion" without content 1`] =
 
 exports[`Blocks BenefitsBlock should render block "BenefitsBlock" without content 1`] = `
 <section
-  class="font-sans text-primary-text bg-white p-12 flex flex-col items-center "
+  class="font-sans text-primary-text p-12 flex flex-col items-center  bg-white"
 />
 `;
 

package/src/content-page-repository/transformContentPage.ts

@@ -18,11 +18,16 @@ export async function transformContentPage(
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   return mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
     const isMarkdown = typeof value === 'string' && key?.endsWith('__md');
-    const isPicture = value && isLocalPath(value?.src);
+
     if (isMarkdown) {
       return await transformMarkdown(value);
-    } else if (isPicture) {
-      return await transformPicture(pagePath, value as Picture, options);
+    } else if (isPicture(value)) {
+      try {
+        return await transformPicture(pagePath, value, options);
+      } catch (ex) {
+        console.warn('Error while transforming picture on page: %s', pagePath);
+        console.error(ex);
+      }
     }
 
     return value;
@@ -34,3 +39,5 @@ const isLocalPath = (_: any): boolean => isString(_) && _.length < 512 && !isURL
 const isString = (_: any): _ is string => Boolean(_ && typeof _ === 'string');
 
 const isURL = (src: string) => ['data:', 'https:', 'http:'].some((proto) => src.startsWith(proto));
+
+const isPicture = (_: any): _ is Picture => Boolean(_ && isLocalPath(_?.src));