@redneckz/wildless-cms-uni-blocks 0.9.11 → 0.9.13

package/mobile/src/components/Calculator/DepositCalculatorForm.tsx

@@ -4,7 +4,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
-import { CommonCalculatorProps } from './CalculatorContent';
+import { DepositCalculatorParamsViewSettings, DepositCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
@@ -13,14 +13,14 @@ import { renderInterestPayment } from './renderInterestPayment';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderRegistrationType } from './renderRegistrationType';
 import { renderWantedSumInput } from './renderWantedSumInput';
-import { useDepositCalculatorParams } from './useDepositCalculatorParams';
+import { DepositCalculatorParams, useDepositCalculatorParams } from './useDepositCalculatorParams';
 
-export interface DepositCalculatorProp extends CommonCalculatorProps {
+export interface DepositCalculatorProp extends DepositCalculatorProps {
   className?: string;
 }
 
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
-  ({ className = '', sourceBookDir, buttons, footnote }) => {
+  ({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
     const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
@@ -42,7 +42,11 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
     };
     const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
 
-    const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
+    const calculatorParams = useDepositCalculatorParams(
+      userInputParams,
+      sourceBookDir,
+      paramsViewSettings,
+    );
     const { income, finalSum, rate } = calculatorParams;
 
     return (
@@ -62,16 +66,12 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             },
             handleMonthsValue,
           )}
-          <div className="mt-7 flex flex-col  gap-y-7">
-            {renderInterestPayment({
-              isMonthlyInterestPayment,
-              callback: handleIsMonthlyInterestPayment,
-              title: 'Выплата процентов',
-            })}
-            {renderRegistrationType({
-              isRemoteRegistration,
-              callback: handleIsRemoteRegistration,
-              title: 'Оформление',
+          <div className="mt-7">
+            {renderDepositParamsForm({
+              ...calculatorParams,
+              ...paramsViewSettings,
+              handleIsMonthlyInterestPayment,
+              handleIsRemoteRegistration,
             })}
           </div>
         </div>
@@ -86,3 +86,36 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
     );
   },
 );
+
+interface DepositParamsFormProps
+  extends DepositCalculatorParams,
+    DepositCalculatorParamsViewSettings {
+  handleIsMonthlyInterestPayment?: (value: boolean) => void;
+  handleIsRemoteRegistration?: (value: boolean) => void;
+}
+
+const renderDepositParamsForm = ({
+  isMonthlyInterestPayment,
+  isRemoteRegistration,
+  isShowMonthlyInterestPayment,
+  isShowRemoteRegistration,
+  handleIsMonthlyInterestPayment,
+  handleIsRemoteRegistration,
+}: DepositParamsFormProps) => (
+  <div className="flex flex-col gap-y-7">
+    {isShowMonthlyInterestPayment
+      ? renderInterestPayment({
+          isMonthlyInterestPayment,
+          callback: handleIsMonthlyInterestPayment,
+          title: 'Выплата процентов',
+        })
+      : null}
+    {isShowRemoteRegistration
+      ? renderRegistrationType({
+          isRemoteRegistration,
+          callback: handleIsRemoteRegistration,
+          title: 'Оформление',
+        })
+      : null}
+  </div>
+);

package/mobile/src/components/Calculator/constants.ts

@@ -52,7 +52,7 @@ export const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParam
   minSum: 50000,
   maxSum: 5000000,
   minMonths: 2,
-  maxMonths: 120,
+  maxMonths: 10,
   rate: 0,
   isMonthlyInterestPayment: true,
   isRemoteRegistration: true,

package/mobile/src/components/Calculator/rangeHelpers.ts

@@ -1,4 +1,5 @@
 import { maxBy } from '../../utils/maxBy';
+import { mergeIntervals } from '../../utils/mergeIntervals';
 import { minBy } from '../../utils/minBy';
 
 export const getRangeByKeys = <
@@ -13,6 +14,15 @@ export const getRangeByKeys = <
   [maxKey]: rows.length ? maxBy()(rows.map((row) => row[maxKey])) : 0,
 });
 
+export const getMergeRangesByKeys = <
+  MinKey extends string,
+  MaxKey extends string,
+  T extends Record<MinKey | MaxKey, number>,
+>(
+  [minKey, maxKey]: [MinKey, MaxKey],
+  rows: T[] = [],
+) => mergeIntervals(rows.map((row) => [row[minKey], row[maxKey]]));
+
 export const checkRangeByKeys = <
   MinKey extends string,
   MaxKey extends string,

package/mobile/src/components/Calculator/renderMonthsInput.tsx

@@ -1,3 +1,4 @@
+import { InputListRange } from '../../ui-kit/InputListRange/InputListRange';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
 import { clamp } from '../../utils/clamp';
 
@@ -7,6 +8,7 @@ interface RenderMonthsInputParams {
   minMonths: number;
   maxMonths: number;
   monthsValue: number;
+  availableMonths?: Array<number>;
 }
 
 export function renderMonthsInput(
@@ -14,14 +16,23 @@ export function renderMonthsInput(
   params: RenderMonthsInputParams,
   callback?: (value: number) => void,
 ) {
-  const { minMonths, maxMonths, monthsValue } = params;
+  const { minMonths, maxMonths, monthsValue, availableMonths } = params;
   const monthText = (month: number) => {
     const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
 
     return `${month} ${text}`;
   };
 
-  return (
+  return availableMonths?.length ? (
+    <InputListRange
+      className="mt-7"
+      title={title}
+      items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
+      list={availableMonths}
+      value={clamp(monthsValue, minMonths, maxMonths)}
+      onChange={callback}
+    />
+  ) : (
     <InputRange
       className="mt-7"
       title={title}

package/mobile/src/components/Calculator/useCreditCalculatorParams.ts

@@ -41,14 +41,13 @@ export const useCreditCalculatorParams = (
 ): CreditCalculatorParams => {
   const { moneyValue, monthsValue } = userInputParams;
   const data = useCalculatorParams<CreditCalculatorData>(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
+  const isExcludeSalaryClient = !paramsViewSettings?.isShowSalaryClient;
+  const isExcludeStateEmployee = !paramsViewSettings?.isShowStateEmployee;
+  const isExcludePensionClient = !paramsViewSettings?.isShowPensionClient;
+  const isExcludeInsurance = !paramsViewSettings?.isShowInsurance;
   const creditCalculatorSourceBookParams =
-    data?.rows?.find((row) => {
-      const isExcludeSalaryClient = !paramsViewSettings?.isShowSalaryClient;
-      const isExcludeStateEmployee = !paramsViewSettings?.isShowStateEmployee;
-      const isExcludePensionClient = !paramsViewSettings?.isShowPensionClient;
-      const isExcludeInsurance = !paramsViewSettings?.isShowInsurance;
-
-      return (
+    data?.rows?.find(
+      (row) =>
         checkRowByParam({
           row,
           userInputParams,
@@ -74,9 +73,8 @@ export const useCreditCalculatorParams = (
           isExclude: isExcludeInsurance,
         }) &&
         checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
-        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)
-      );
-    }) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
+        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row),
+    ) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
 
   const { rate } = creditCalculatorSourceBookParams;
   const monthlyPayment = getMonthlyPayment(rate, userInputParams);

package/mobile/src/components/Calculator/useDepositCalculatorParams.ts

@@ -1,3 +1,6 @@
+import { arrayByRange } from '../../utils/arrayByRange';
+import { mergeIntervals } from '../../utils/mergeIntervals';
+import { DepositCalculatorParamsViewSettings } from './CalculatorContent';
 import { DEFAULT_DEPOSIT_CALCULATOR_PARAMS, DEPOSIT_CALC_DEFAULT_DIR } from './constants';
 import { checkRangeByKeys, getRangeByKeys } from './rangeHelpers';
 import { useCalculatorParams } from './useCalculatorParams';
@@ -23,6 +26,7 @@ export interface DepositCalculatorUserInputParams extends CommonDepositParams {
 export interface DepositCalculatorParams
   extends DepositCalculatorSourceBookParams,
     DepositCalculatorUserInputParams {
+  availableMonths: number[];
   income: number;
   finalSum: number;
 }
@@ -34,21 +38,31 @@ export type DepositCalculatorData = {
 export const useDepositCalculatorParams = (
   userInputParams: DepositCalculatorUserInputParams,
   sourceBookDir?: string,
+  paramsViewSettings?: DepositCalculatorParamsViewSettings,
 ): DepositCalculatorParams => {
-  const { isMonthlyInterestPayment, isRemoteRegistration, moneyValue, monthsValue } =
-    userInputParams;
-
+  const { moneyValue, monthsValue } = userInputParams;
   const data = useCalculatorParams<DepositCalculatorData>(
     sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
   );
-
+  const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;
+  const isExcludeRemoteRegistration = !paramsViewSettings?.isShowRemoteRegistration;
   const depositCalculatorSourceBookParams =
     data?.rows?.find(
-      (_) =>
-        isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
-        isRemoteRegistration === _.isRemoteRegistration &&
-        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
-        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], _),
+      (row) =>
+        checkRowByParam({
+          row,
+          userInputParams,
+          paramKey: 'isMonthlyInterestPayment',
+          isExclude: isExcludeMonthlyInterestPayment,
+        }) &&
+        checkRowByParam({
+          row,
+          userInputParams,
+          paramKey: 'isRemoteRegistration',
+          isExclude: isExcludeRemoteRegistration,
+        }) &&
+        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row),
     ) || DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
 
   const { rate } = depositCalculatorSourceBookParams;
@@ -60,6 +74,9 @@ export const useDepositCalculatorParams = (
     ...depositCalculatorSourceBookParams,
     ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
     ...getRangeByKeys(['minMonths', 'maxMonths'], sourceBookRows),
+    availableMonths: mergeIntervals(
+      sourceBookRows.map((row) => [row['minMonths'], row['maxMonths']]),
+    ).flatMap(([start, end]) => arrayByRange(start, end)),
     ...userInputParams,
     income,
     finalSum,
@@ -78,3 +95,13 @@ const getDepositIncome = (rate: number, userInputParams: DepositCalculatorUserIn
     return Math.round((moneyValue * rate * 30 * monthsValue) / 365 / 100);
   }
 };
+
+interface CheckRowByParamProps {
+  row: DepositCalculatorSourceBookParams;
+  userInputParams: DepositCalculatorUserInputParams;
+  paramKey: string;
+  isExclude: boolean;
+}
+
+const checkRowByParam = ({ row, userInputParams, paramKey, isExclude }: CheckRowByParamProps) =>
+  isExclude || userInputParams[paramKey] === row[paramKey];

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

@@ -27,8 +27,7 @@
         "target": "_blank",
         "version": "gray",
         "rounded": false,
-        "aboveText": "Доступно в",
-        "text": "Telegram"
+        "text": "Текст"
       }
     ],
     "version": "primary"

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,18 +1,12 @@
-import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
-export type RecommendationSocialMedia = LinkCommonProps &
-  IconProps &
-  ButtonWithIconProps & {
-    version: ButtonVersion;
-    rounded?: boolean;
-  };
+export type RecommendationSocialMedia = LinkCommonProps & IconProps & ButtonProps;
 
 /**
  * @title Карточка рекомендаций

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/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');