@redneckz/wildless-cms-uni-blocks 0.9.10 → 0.9.12

package/mobile/src/components/Filtration/Filtration.example.json

@@ -3,35 +3,55 @@
     "filtrationSchema": {
       "propertyType": {
         "title": "Тип недвижимости",
-        "type": "string",
-        "enum": ["flat", "apartment", "house", "storeRoom", "parkingSpace"],
-        "enumNames": ["Квартира", "Апартаменты", "Жилой дом", "Кладовая", "Машино-место"]
+        "type": "array",
+        "items": {
+          "type": "string",
+          "enum": ["flat", "apartment", "house", "storeRoom", "parkingSpace"],
+          "enumNames": ["Квартира", "Апартаменты", "Жилой дом", "Кладовая", "Машино-место"]
+        }
       },
       "stage": {
         "title": "Этап строительства",
-        "type": "string",
-        "enum": ["built", "inProgress"],
-        "enumNames": ["Готовое жильё", "Строящиеся"]
+        "type": "array",
+        "items": {
+          "type": "string",
+          "enum": ["built", "inProgress"],
+          "enumNames": ["Готовое жильё", "Строящиеся"]
+        }
       },
       "categories": {
         "title": "Категории",
-        "type": "string",
-        "enum": ["salaryClient", "IT", "youngFamily", "military", "medicalWorker", "scientist"],
-        "enumNames": [
-          "Зарплатный клиент",
-          "IT-специалист",
-          "Молодая семья",
-          "Военнослужащий",
-          "Медицинский работник",
-          "Научный сотрудник"
-        ]
+        "type": "array",
+        "items": {
+          "type": "string",
+          "enum": ["salaryClient", "IT", "youngFamily", "military", "medicalWorker", "scientist"],
+          "enumNames": [
+            "Зарплатный клиент",
+            "IT-специалист",
+            "Молодая семья",
+            "Военнослужащий",
+            "Медицинский работник",
+            "Научный сотрудник"
+          ]
+        }
       },
       "extraOptions": {
         "title": "Дополнительно",
-        "type": "string",
-        "enum": ["preferentialMortgage", "children"],
-        "enumNames": ["Льготная ипотека", "Дети"]
+        "type": "array",
+        "items": {
+          "type": "string",
+          "enum": ["preferentialMortgage", "children"],
+          "enumNames": ["Льготная ипотека", "Дети"]
+        }
       }
+    },
+    "resetButton": {
+      "text": "Очистить фильтры",
+      "version": "secondary"
+    },
+    "notFound": {
+      "title": "Нет подходящей ипотечной программы",
+      "description": "Попробуйте очистить фильтры"
     }
   }
 }

package/mobile/src/components/Filtration/Filtration.tsx

@@ -15,19 +15,14 @@ export const Filtration: JSXBlock<FiltrationProps> = JSX<FiltrationProps>(
     const { formState, register, resetForm } = useForm();
 
     return (
-      <BlockWrapper className={style('p-9', className)} {...rest}>
-        <form className="flex justify-between">
+      <BlockWrapper className={style(className)} version="transparent" {...rest}>
+        <form className="flex justify-between bg-white p-9 mb-1">
           <div className="flex gap-11">
             {Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, register))}
           </div>
           {resetButton ? (
             <div>
-              <Button
-                className="w-72"
-                text={resetButton.text}
-                version={resetButton.buttonVersion}
-                onClick={resetForm}
-              />
+              <Button className="w-72" onClick={resetForm} {...resetButton} />
             </div>
           ) : null}
         </form>

package/mobile/src/components/Filtration/FiltrationContent.ts

@@ -1,4 +1,5 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { DescriptionProps, TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Заголовок
@@ -33,6 +34,7 @@ export type StringArray = {
    * @hidden
    */
   type?: 'array';
+  /** @title */
   items?: {
     /**
      * @default string
@@ -47,13 +49,13 @@ export type StringArray = {
 // TODO: Make customizable to implement arbitrary filtration blocks
 export type FiltrationSchema = {
   /** @title Тип недвижимости */
-  propertyType?: StringEnum;
+  propertyType?: StringArray;
   /** @title Этап строительства */
-  stage?: StringEnum;
+  stage?: StringArray;
   /** @title Категории */
-  categories?: StringEnum;
+  categories?: StringArray;
   /** @title Дополнительно */
-  extraOptions?: StringEnum;
+  extraOptions?: StringArray;
 };
 
 /**
@@ -67,14 +69,24 @@ export type ResetButton = {
   /**
    * @title Цвет кнопки
    */
-  buttonVersion: ButtonVersion;
+  version: ButtonVersion;
 };
 
+/**
+ * @title Плитка "Не найдено"
+ */
+export type NotFound = TitleProps & DescriptionProps;
+
 export interface FiltrationInnerContent {
-  /** @title Название кнопки */
+  /** @title Название сворачивающейся кнопки */
   label?: string;
-  /** @title Количество отображаемых предметов */
+  /**
+   * @title Количество отображаемых предметов
+   * @minimum 1
+   */
   topItemsCount?: number;
+  resetButton?: ResetButton;
+  notFound?: NotFound;
 }
 
 /**
@@ -83,5 +95,4 @@ export interface FiltrationInnerContent {
 export interface FiltrationContent extends FiltrationInnerContent {
   /** @title Параметры фильтрации */
   filtrationSchema?: FiltrationSchema;
-  resetButton?: ResetButton;
 }

package/mobile/src/components/Filtration/FiltrationInner.tsx

@@ -5,10 +5,11 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
-import { ErrorBlock } from '../ErrorBlock/ErrorBlock';
 import { checkShouldRenderBlock } from './checkShouldRenderBlock';
-import type { FiltrationInnerContent } from './FiltrationContent';
+import type { FiltrationInnerContent, NotFound } from './FiltrationContent';
 
 const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
@@ -19,7 +20,7 @@ interface FiltrationInnerProps extends FiltrationInnerContent, UniBlockProps {
 }
 
 export const FiltrationInner = JSX<FiltrationInnerProps>(
-  ({ label = '', filtrationState = {}, topItemsCount = 0, block, ...rest }) => {
+  ({ label = '', filtrationState = {}, topItemsCount = 0, block, notFound, ...rest }) => {
     const blocksToRender =
       block?.blocks?.filter((b) => checkShouldRenderBlock(filtrationState, b.content || {})) || [];
 
@@ -30,28 +31,27 @@ export const FiltrationInner = JSX<FiltrationInnerProps>(
 
     return (
       <div>
-        <div className={style(blocksToRender.length ? 'hidden' : '')}>
-          <ErrorBlock
-            error={{ errorContentType: 'Image' }}
-            title="Нет подходящей ипотечной программы"
-            subtitle="Попробуйте очистить фильтры"
-          />
+        <div className={style(blocksToRender.length ? 'hidden' : 'block')}>
+          {notFound ? renderNotFound(notFound) : null}
         </div>
         <div className={style(blocksToRender.length ? '' : 'hidden')}>
-          <div className={resultsGridStyle}>
+          <div className={style('mb-1', resultsGridStyle)}>
             {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
           </div>
           <Foldable
             renderFoldableSection={({ isUnfolded }) => {
               return (
-                <FoldableSection className={resultsGridStyle} isUnfolded={isUnfolded}>
+                <FoldableSection
+                  className={style(resultsGridStyle, isUnfolded ? 'mb-1' : '')}
+                  isUnfolded={isUnfolded}
+                >
                   {renderBlocksList(hiddenBlocks, { ...rest.options, parent: block })}
                 </FoldableSection>
               );
             }}
             renderFoldButton={({ isUnfolded, onToggle }) => (
               <DefaultFoldButton
-                className={style('mt-11', topItemsCount < 1 ? 'hidden' : '')}
+                className={style(topItemsCount < 1 ? 'hidden' : '')}
                 disabled={!hiddenBlocks?.length}
                 label={label}
                 icon={ICONS[Number(isUnfolded)]}
@@ -65,3 +65,22 @@ export const FiltrationInner = JSX<FiltrationInnerProps>(
     );
   },
 );
+
+function renderNotFound({ title, description }: NotFound) {
+  return (
+    <div className="bg-white py-20">
+      {title ? (
+        <div className="mb-2">
+          <Paragraph align="text-center">
+            <Text size="text-h4">{title}</Text>
+          </Paragraph>
+        </div>
+      ) : null}
+      {description ? (
+        <Paragraph size="text-xl" font="font-light" align="text-center">
+          {description}
+        </Paragraph>
+      ) : null}
+    </div>
+  );
+}

package/mobile/src/components/Filtration/renderFormItem.tsx

@@ -1,7 +1,7 @@
 import type { FormElementRegisterer } from '../../hooks/useForm';
 import { SlideCheckboxGroup } from '../../ui-kit/SlideCheckboxGroup/SlideCheckboxGroup';
 import { Text } from '../../ui-kit/Text/Text';
-import type { FiltrationSchema, StringEnum } from './FiltrationContent';
+import type { FiltrationSchema, StringArray } from './FiltrationContent';
 
 export const renderFormItem =
   (filtrationSchema: FiltrationSchema, register: FormElementRegisterer) => (key: string) => {
@@ -9,28 +9,28 @@ export const renderFormItem =
     const type = item?.type;
 
     switch (type) {
-      case 'string':
-        return renderRadioButtons(key, register)(item);
+      case 'array':
+        return renderCheckboxes(key, register)(item);
       default:
         return null;
     }
   };
 
-const renderRadioButtons =
-  (key: string, register: FormElementRegisterer) => (item?: StringEnum) => {
-    const options =
-      item?.enum?.map((e, i) => ({ value: e, title: item?.enumNames?.[i] || '' })) || [];
+const renderCheckboxes = (key: string, register: FormElementRegisterer) => (item?: StringArray) => {
+  const options =
+    item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
+    [];
 
-    return (
-      <div role="radiogroup" key={key}>
-        {item?.title ? (
-          <div className="mb-4">
-            <Text size="text-m" font="font-light" color="text-secondary-text">
-              {item.title}
-            </Text>
-          </div>
-        ) : null}
-        <SlideCheckboxGroup items={options} multiple={false} {...register(key)} />
-      </div>
-    );
-  };
+  return (
+    <div key={key}>
+      {item?.title ? (
+        <div className="mb-4">
+          <Text size="text-m" font="font-light" color="text-secondary-text">
+            {item.title}
+          </Text>
+        </div>
+      ) : null}
+      <SlideCheckboxGroup items={options} multiple {...register(key)} />
+    </div>
+  );
+};

package/mobile/src/components/Footer/MediaButton.tsx

@@ -1,8 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconVersion } from '../../model/IconVersion';
-import type { Picture } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
@@ -46,8 +45,7 @@ const ICONS_MAP: Array<{
 
 export type ButtonSize = 'default' | 'small';
 
-interface MediaButtonProps extends ButtonWithIconProps {
-  iconVersion?: IconVersion;
+interface MediaButtonProps extends ButtonProps, IconProps {
   buttonSize?: ButtonSize;
 }
 

package/mobile/src/components/RichTextBlock/RichTextBlock.example.json

@@ -1,5 +1,5 @@
 {
   "content": {
-    "__html": "<p class=\"h1\">Заголовок 1</p>\n<p class=\"h2\">Заголовок 2</p>\n<p class=\"h3\">Заголовок 3</p>\n<p class=\"h4\">Заголовок 4</p>\n<p class=\"h5\">Заголовок 5</p>\n<p class=\"h6\">Заголовок 6</p>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n"
+    "__html": "<h1>Заголовок 1</h1>\n<h2>Заголовок 2</h2>\n<h3>Заголовок 3</h3>\n<h4>Заголовок 4</h4>\n<h5>Заголовок 5</h5>\n<h6>Заголовок 6</h6>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n"
   }
 }

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

@@ -1,26 +1,16 @@
+import fs from 'fs';
 import glob from 'glob';
 import util from 'util';
 import type { ContentPageDef } from '../model/ContentPageDef';
 import type { TransformationOptions } from './TransformationOptions';
-import { transformContentPage } from './transformContentPage';
+import { generatedPagePath, transformContentPage } from './transformContentPage';
 
-const INDEX_PAGE_SLUG = 'index';
 const find = util.promisify(glob);
-
-const bySlug = (slug: string) => (content: ContentPageDef) => content.slug === slug;
-const byCustomPageType = (type?: string) => (content: ContentPageDef) =>
-  type ? content._customPageType === type : !content._customPageType;
-
-const not =
-  <Arg>(predicate: (_: Arg) => boolean) =>
-  (_: Arg) =>
-    !predicate(_);
+const readFile = util.promisify(fs.readFile);
 
 export class ContentPageRepository {
   public static readonly inst = new ContentPageRepository();
 
-  private cache: Record<string, ContentPageDef> = {};
-
   constructor(
     private readonly options: TransformationOptions = {
       contentDir: 'content',
@@ -28,37 +18,15 @@ export class ContentPageRepository {
     },
   ) {}
 
-  async listAllContentPages(): Promise<string[]> {
+  listAllContentPages(): Promise<string[]> {
     return find(`${this.options.contentDir}/**/*.page.json`);
   }
 
-  async getAllContentPages(): Promise<ContentPageDef[]> {
-    const pagePaths = await this.listAllContentPages();
-
-    return Promise.all(pagePaths.map((_) => this.readPage(_)));
-  }
-
-  async getSecondaryContentPages(customPageType?: string): Promise<ContentPageDef[]> {
-    const pages = await this.getAllContentPages();
-
-    return pages.filter(not(bySlug(INDEX_PAGE_SLUG))).filter(byCustomPageType(customPageType));
-  }
-
-  async getContentPageBySlug(slug: string): Promise<ContentPageDef | undefined> {
-    const pages = await this.getAllContentPages();
-
-    return pages.find(bySlug(slug));
-  }
-
-  async getIndexPage(): Promise<ContentPageDef | undefined> {
-    return this.getContentPageBySlug(INDEX_PAGE_SLUG);
-  }
-
   async readPage(filePath: string): Promise<ContentPageDef> {
-    if (!(filePath in this.cache)) {
-      this.cache[filePath] = await transformContentPage(filePath, this.options);
-    }
+    return JSON.parse(await readFile(generatedPagePath(filePath), 'utf-8'));
+  }
 
-    return this.cache[filePath];
+  generatePage(filePath: string): Promise<ContentPageDef> {
+    return transformContentPage(filePath, this.options);
   }
 }

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

@@ -0,0 +1,32 @@
+import type { Sharp } from 'sharp';
+import sharp from 'sharp';
+import type { ImageSize } from '../model/ImageSize';
+import type { ImgAlignment } from '../model/Picture';
+
+interface ImgAlignmentParams {
+  containerSize?: Partial<ImageSize>;
+  alignment?: ImgAlignment;
+}
+
+export const alignImg =
+  ({ containerSize, alignment }: ImgAlignmentParams) =>
+  async (chain: Sharp): Promise<Sharp> =>
+    containerSize?.width && containerSize?.height && alignment
+      ? createTransparentBack(containerSize as ImageSize).composite([
+          {
+            input: await toBuffer(chain),
+            gravity: alignment,
+          },
+        ])
+      : chain;
+
+const toBuffer = async (chain: Sharp) => (await chain.toBuffer({ resolveWithObject: true })).data;
+
+function createTransparentBack({ width, height }: ImageSize) {
+  const channels = 4;
+  const rgbaColor = 0x00000000;
+
+  const canvas = Buffer.alloc(width * height * channels, rgbaColor);
+
+  return sharp(canvas, { raw: { width, height, channels } });
+}

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

@@ -0,0 +1,20 @@
+import path from 'path';
+import type { ImgSource } from '../model/Picture';
+import type { TransformationOptions } from './TransformationOptions';
+
+export function computeImgOutputPath(
+  imgInputPath: string,
+  { contentDir, publicDir, format, size, alignment }: TransformationOptions & ImgSource,
+): string {
+  const imgRelativePath = path.relative(contentDir, imgInputPath);
+
+  const imgDir = path.dirname(imgRelativePath);
+
+  const inputExt = path.extname(imgRelativePath);
+  const fileName = path.basename(imgRelativePath, inputExt);
+  const suffixParts = [size?.width, size?.height, alignment].filter(Boolean);
+  const suffix = suffixParts.length ? `-${suffixParts.join('-')}` : '';
+  const ext = format ? `.${format}` : inputExt;
+
+  return path.join(publicDir, imgDir, `${fileName}${suffix}${ext}`);
+}

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

@@ -0,0 +1,18 @@
+import type { ResizeOptions, Sharp } from 'sharp';
+import sharp from 'sharp';
+import type { ImageSize } from '../model/ImageSize';
+
+export const resizeImg =
+  (size?: Partial<ImageSize>, options?: ResizeOptions) =>
+  (chain: Sharp): Sharp =>
+    size
+      ? chain.resize(size.width || null, size.height || null, {
+          /*
+           * 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)
+           */
+          fit: size.width && size.height ? sharp.fit.fill : sharp.fit.contain,
+          background: { r: 0, g: 0, b: 0, alpha: 0 },
+          ...options,
+        })
+      : chain;

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

@@ -9,6 +9,9 @@ import { transformMarkdown } from './transformMarkdown';
 import { transformPicture } from './transformPicture';
 
 const readFile = util.promisify(fs.readFile);
+const writeFile = util.promisify(fs.writeFile);
+
+const OUTPUT_SUFFIX = '.static';
 
 export async function transformContentPage(
   pagePath: string,
@@ -17,31 +20,35 @@ export async function transformContentPage(
   const content = await readFile(pagePath, 'utf8');
 
   // 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 isHTML = typeof value === 'string' && key?.endsWith('__html');
-
-    if (isMarkdown) {
-      return await transformMarkdown(value);
-    } else if (isHTML) {
-      return await transformHTML(value);
-    } 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);
+  const result = await mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
+    const isMarkdown = isString(value) && key?.endsWith('__md');
+    const isHTML = isString(value) && key?.endsWith('__html');
+
+    try {
+      if (isMarkdown) {
+        return await transformMarkdown(value);
+      } else if (isHTML) {
+        return await transformHTML(value);
+      } else if (isPicture(value)) {
+        return await transformPicture(value, pagePath, options);
       }
+    } catch (ex) {
+      console.warn(`Error while transforming field "${key}" on page: ${pagePath}`);
+      console.error(ex);
     }
 
     return value;
   });
-}
 
-const isLocalPath = (_: any): boolean => isString(_) && _.length < 512 && !isURL(_);
+  await writeFile(generatedPagePath(pagePath), JSON.stringify(result), 'utf-8');
 
-const isString = (_: any): _ is string => Boolean(_ && typeof _ === 'string');
+  return result;
+}
 
-const isURL = (src: string) => ['data:', 'https:', 'http:'].some((proto) => src.startsWith(proto));
+export const generatedPagePath = (pagePath: string) => `${pagePath}${OUTPUT_SUFFIX}`;
 
 const isPicture = (_: any): _ is Picture => Boolean(_ && isLocalPath(_?.src));
+const isLocalPath = (_: any): boolean => isString(_) && _.length < 1024 && !isURL(_);
+const isURL = (src: string) => ['data:', 'https:', 'http:'].some((proto) => src.startsWith(proto));
+
+const isString = (_: any): _ is string => Boolean(_ && typeof _ === 'string');