@redneckz/wildless-cms-uni-blocks 0.13.24 → 0.14.1

package/mobile/src/components/ComparisonTable/TableRow.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { TitleProps } from '../../model/HeadlineType';
 import type { CellData } from './ComparisonTableContent';
-import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { COLUMN_WIDTH, dividerStyle, firstCellStyle } from './constants';
 import { TableCarouselContainer } from './TableCarouselContainer';
 import { TableCell } from './TableCell';
 import { TableRowContainer } from './TableRowContainer';
+import { style } from '../../utils/style';
 
 export interface Row {
   header: TitleProps;
@@ -20,9 +21,7 @@ export interface TableRowProps {
 }
 
 const titleStyle = (isLastRow = false) =>
-  `text-s py-2xl ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
-    isLastRow ? 'border-b-0' : 'border-solid'
-  }`;
+  style('text-s py-2xl', dividerStyle, firstCellStyle, isLastRow ? 'border-b-0' : 'border-solid');
 
 export const TableRow = JSX<TableRowProps>(
   ({ row: { header, data }, activeIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (

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

@@ -1,6 +1,6 @@
-export const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
-export const BORDER_CLASSES = 'border-gray border-solid border';
-export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
-export const FIRST_CELL_CLASSES = 'w-52';
+export const gradientStyle = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
+export const borderStyle = 'border-gray border-solid border';
+export const dividerStyle = 'border-main-divider border-b';
+export const firstCellStyle = 'w-52';
 export const COLS_LENGTH_FOR_SCROLL = 3;
 export const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px

package/mobile/src/components/ContentPage/ContentPage.tsx

@@ -9,6 +9,7 @@ import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { useBlockRouterProvider } from '../../services/BlockRouter/useBlockRouterProvider';
 import { CookiePopup } from '../../ui-kit/CookiePopup/CookiePopup';
 import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { style } from '../../utils/style';
 import { LikeControl } from '../LikeControl/LikeControl';
 import { StickyBottomMenu } from '../StickyBottomMenu/StickyBottomMenu';
@@ -49,6 +50,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
         </section>
         <StickyBottomMenu />
         <DialogManager />
+        <PopupManager />
         <CookiePopup
           termLink={{ href: '/pd-policy#cookie', target: '_blank' }}
           personalDataPolicyLink={{ href: '/pd-policy', target: '_blank' }}

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

@@ -57,8 +57,12 @@
         }
       }
     },
-    "sumInput": { "title": "Сумма" },
-    "periodInput": { "title": "Срок, месяцев", "min": 3, "max": 36 },
+    "sumInput": {
+      "title": "Сумма"
+    },
+    "periodInput": {
+      "title": "Срок, месяцев"
+    },
     "resetButton": {
       "text": "Очистить фильтры",
       "version": "secondary"

package/mobile/src/components/DepositFiltration/DepositFiltration.tsx

@@ -1,19 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { JSONSchema7Definition } from 'json-schema';
 import { useForm } from '../../hooks/useForm';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
+import { getBlocksToRender } from '../../ui-kit/BaseFiltration/getBlocksToRender';
 import { renderFiltrationForm } from '../../ui-kit/BaseFiltration/renderFiltrationForm';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
 import { style } from '../../utils/style';
 import type { DepositFiltrationContent } from './DepositFiltrationContent';
+import { getPeriod } from './getPeriod';
+import { useDepositsPeriods } from './useDepositsPeriods';
 
 interface DepositFiltrationProps extends DepositFiltrationContent, UniBlockProps {}
 
-const DEFAULT_MIN_MONTHS = 3;
-const DEFAULT_MAX_MONTHS = 60;
-
 const DEFAULT_MIN_SUM = 500;
 const DEFAULT_MAX_SUM = 1000000000;
 
@@ -22,17 +23,18 @@ const initialFiltrationState = {
     min: 10000,
     max: DEFAULT_MAX_SUM,
   },
-  period: {
-    min: 3,
-    max: 36,
-  },
+  period: 3,
 };
 
 export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFiltrationProps>(
   ({ className, filtrationSchema = {}, resetButton, sumInput, periodInput, ...rest }) => {
+    const { source, months } = useDepositsPeriods(rest.block?.blocks);
     const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
 
-    const maxPeriodValue = periodInput?.max || DEFAULT_MAX_MONTHS;
+    const blocksToRender = getBlocksToRender(
+      rest.block?.blocks,
+      filtrationState,
+    )((content) => ({ ...content, period: getPeriod(source, content || {}) || [] }));
 
     const Inputs = (
       <div>
@@ -48,12 +50,8 @@ export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFi
         <InputRange
           title={periodInput?.title}
           items={['От 3 мес', 'До 5 лет']}
-          min={periodInput?.min || DEFAULT_MIN_MONTHS}
-          max={maxPeriodValue}
-          {...field('period', {
-            parse: (min) => ({ min, max: maxPeriodValue }),
-            format: ({ min }) => min,
-          })}
+          list={months}
+          {...field('period')}
         />
       </div>
     );
@@ -66,12 +64,19 @@ export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFi
         {...rest}
       >
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton, children: Inputs })}
-        <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
+        <BaseFiltrationInner blocksToRender={blocksToRender} {...rest} />
       </BlockWrapper>
     );
   },
 );
 
+const sourceBookSchema: JSONSchema7Definition = {
+  type: 'string',
+  title: 'Адрес справочника',
+};
+
 DepositFiltration.childrenTypes = ['ProductTile'];
-DepositFiltration.childSchema = (content?: DepositFiltrationContent) =>
-  content?.filtrationSchema || {};
+DepositFiltration.childSchema = (content?: DepositFiltrationContent) => ({
+  ...(content?.filtrationSchema || {}),
+  sourceBook: sourceBookSchema,
+});

package/mobile/src/components/DepositFiltration/getChildSourceBook.ts

@@ -0,0 +1,7 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+
+export const getChildSourceBook = (blocks: BlockDef[] | undefined) =>
+  blocks?.filter(hasSourceBook).map(({ content: { sourceBook } }) => sourceBook);
+
+const hasSourceBook = (block: BlockDef): block is BlockDef & { content: { sourceBook: string } } =>
+  Boolean(block && block.content && typeof block.content.sourceBook === 'string');

package/mobile/src/components/DepositFiltration/getPeriod.ts

@@ -0,0 +1,10 @@
+export interface SourceItem {
+  rateRows: Array<{ minMonths?: number; maxMonths?: number }>;
+}
+
+type Source = Record<string, SourceItem>;
+
+export const getPeriod = (source: Source, content: Record<string, any>): number[] =>
+  source[content?.sourceBook]?.rateRows
+    .map((el) => el.minMonths)
+    .filter((minMonths): minMonths is number => minMonths !== undefined);

package/mobile/src/components/DepositFiltration/useDepositsPeriods.ts

@@ -0,0 +1,34 @@
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import type { BlockDef } from '../../model/ContentPageDef';
+import { fetchMultitudeJSON } from '../../utils/fetchMultitudeJSON';
+import { unique } from '../../utils/unique';
+import { zip } from '../../utils/zip';
+import { getChildSourceBook } from './getChildSourceBook';
+import type { SourceItem } from './getPeriod';
+
+export function useDepositsPeriods(blocks: BlockDef[] | undefined) {
+  const { dirs = [], source = [] } = useMemo(() => {
+    const sourceBooks = getChildSourceBook(blocks);
+
+    return { dirs: sourceBooks?.map((url) => `/wcms-resources/${url}.json`), source: sourceBooks };
+  }, [blocks]);
+
+  const { data = [] } = useAsyncData<(SourceItem | null)[], any, string[]>(
+    dirs,
+    fetchMultitudeJSON,
+  );
+
+  return {
+    source: Object.fromEntries(
+      zip(source, data as SourceItem[]).filter(([, sourceData]) => Boolean(sourceData)),
+    ),
+    months:
+      unique(
+        data
+          .flatMap((item) => item?.rateRows || [])
+          .filter((row) => typeof row.minMonths === 'number' && row.minMonths === row.maxMonths)
+          .map((row) => row.minMonths as number),
+      ).sort((a, b) => a - b) || [],
+  };
+}

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -15,7 +15,11 @@ const renderErrorContent = (error: ErrorBlockContent['error']) => {
   }
 
   if (error?.contentType === 'Code' && error.code) {
-    return <div className="font-mohave text-title-extra gradient-color-text">{error.code}</div>;
+    return (
+      <div className="font-mohave text-title-large sm:text-title-extra gradient-color-text">
+        {error.code}
+      </div>
+    );
   }
 
   return null;
@@ -24,13 +28,19 @@ const renderErrorContent = (error: ErrorBlockContent['error']) => {
 export const ErrorBlock = JSX<ErrorBlockProps>(
   ({ className = '', title, description, error, button, ...rest }) => (
     <BlockWrapper
-      className={style('flex flex-col gap-2xl justify-center items-center', className)}
+      className={style('flex flex-col justify-center items-center', className)}
       defaultPadding={style('p-6xl')}
       version="transparent"
       {...rest}
     >
       <div className="flex justify-center">{renderErrorContent(error)}</div>
-      <Headline title={title} description={description} headlineVersion="XL" isEmbedded={true} />
+      <Headline
+        title={title}
+        description={description}
+        headlineVersion="XL"
+        isEmbedded={true}
+        className="mb-2xl last:mb-0"
+      />
       {button?.text ? <Button version={button?.version} text={button?.text} {...button} /> : null}
     </BlockWrapper>
   ),

package/mobile/src/components/ExchangeRateTile/renderInput.tsx

@@ -1,5 +1,5 @@
 import { Input } from '../../ui-kit/Input/Input';
-import type { Option } from '../../ui-kit/Select/Select';
+import type { Option } from '../../ui-kit/Select/Option';
 import { Select } from '../../ui-kit/Select/Select';
 import type { Currency } from './CurrencyProps';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';

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

@@ -29,7 +29,7 @@ export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
   } = useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', { fallback });
 
   return (
-    <BlockWrapper tag="footer" className={className} {...rest}>
+    <BlockWrapper tag="footer" className={className} defaultPadding="p-4xl" {...rest}>
       <div className="mb-lg pb-xs border-b border-main-divider">
         {topItems?.map((item, i) => (
           <RollupItem key={String(i)} label={item?.text} labelIcon={item?.icon}>

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

@@ -13,7 +13,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
         {title}
       </Text>
       {links?.length ? (
-        <div className="flex flex-col gap-lg mt-lg">
+        <div className="flex flex-col gap-lg">
           {links.map((_, i) => (
             <HorizontalNavigationLink
               className="text-l font-light"

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

@@ -29,7 +29,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ buttonSize = 'default', icon
         'hover:bg-primary-main hover:text-black',
         'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover',
         'group-data-gray:border-green',
-        'py-m group/media flex items-center justify-center box-border',
+        'p-m min-h-14 group/media flex items-center justify-center box-border',
         buttonSizeStyle[buttonSize],
       )}
       aria-label={label}

package/mobile/src/components/Header/DropdownMenu.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
 import { useLink } from '../../hooks/useLink';
-import { useOutsideClick } from '../../hooks/useOutsideClick';
-import { style } from '../../utils/style';
 import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
 
 interface DropdownMenuProps {
   className?: string;

package/mobile/src/components/Header/HeaderChatBotButton.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useBool } from '../../hooks/useBool';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import type { IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';

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

@@ -8,7 +8,6 @@
         "height": 345
       }
     },
-    "alignTitle": "left",
     "qr": null,
     "buttons": [
       {

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -17,12 +16,13 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
   ({
     className,
     padding,
-    alignTitle = 'left',
+    align = 'text-left',
     buttons = [],
     description,
     headingType = 'h4',
     image,
     items,
+    listItemSize,
     qr,
     title = 'Мобильное приложение',
     version = 'primary',
@@ -46,7 +46,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               <Heading
                 headingType={headingType}
                 title={title}
-                className={style('whitespace-pre-wrap', AlignText[alignTitle])}
+                className={style('whitespace-pre-wrap', align)}
               />
             ) : null
           }
@@ -60,7 +60,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                 <Img className="w-fit" image={qr} />
               </div>
             ) : null}
-            {renderList(items)}
+            {renderList(items, listItemSize)}
             {image?.src ? <Img className="lg:hidden" image={image} /> : null}
           </div>
         </BaseTile>

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,4 +1,3 @@
-import type { AlignType } from '../../model/AlignType';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
@@ -16,11 +15,7 @@ export type MobileAppTileContent = UniBlockContent &
   ButtonsSectionContent &
   ListContent &
   ImageContent & {
-    /** @title Выравнивание заголовка */
-    alignTitle?: AlignType;
     // TODO: description для мобильной версии
     /** @title QR-код */
     qr?: Picture;
-    /** @title Ссылка */
-    href?: string; // TODO: для мобильной версии
   };

package/mobile/src/components/MobileAppTile/renderDescription.tsx

@@ -3,7 +3,7 @@ import { Text } from '../../ui-kit/Text/Text';
 export const renderDescription = (description?: string) =>
   description ? (
     <div className="mb-lg pt-3xs">
-      <Text size="text-xl" font-weight="light">
+      <Text size="text-xl" font-weight="font-light">
         {description}
       </Text>
     </div>

package/mobile/src/components/MobileAppTile/renderList.tsx

@@ -1,8 +1,9 @@
 import { List } from '../../ui-kit/List/List';
+import type { ListItemSize } from '../../ui-kit/List/ListContent';
 
-export const renderList = (items?: string[]) => {
+export const renderList = (items?: string[], listItemSize?: ListItemSize) => {
   return items?.length ? (
-    <List items={items} className="text-l font-light" />
+    <List items={items} listItemSize={listItemSize} className="text-l font-light" />
   ) : (
     <span className="text-m font-light text-secondary-text">
       Наведите камеру телефона на QR-код и скачайте приложение

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

@@ -53,7 +53,9 @@
       }
     },
     "hotFilters": [
-      { "text": "Все программы" },
+      {
+        "text": "Все программы"
+      },
       {
         "text": "Льготные программы",
         "filter": {
@@ -74,7 +76,12 @@
       },
       {
         "text": "Готовое жилье",
-        "filter": { "stage": ["built"], "categories": [], "extraOptions": [], "propertyType": [] }
+        "filter": {
+          "stage": ["built"],
+          "categories": [],
+          "extraOptions": [],
+          "propertyType": []
+        }
       },
       {
         "text": "Загородная недвижимость",

package/mobile/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -1,13 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
-import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
 import { renderFiltrationForm } from '../../ui-kit/BaseFiltration/renderFiltrationForm';
 import { useHotFilters } from '../../ui-kit/BaseFiltration/useHotFilters';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
 import { style } from '../../utils/style';
+import { getBlocksToRender } from '../../ui-kit/BaseFiltration/getBlocksToRender';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import type {
   MortgageFiltrationContent,
   MortgageFiltrationSchema,
@@ -29,6 +30,8 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
     const [filtrationState, { field, reset, update: replaceFiltrationState }] =
       useForm(initialFiltrationState);
 
+    const blocksToRender = getBlocksToRender(rest.block?.blocks, filtrationState)();
+
     const handleFiltrationStateChange = useCallback(
       (_: MortgageFiltrationState = initialFiltrationState) => replaceFiltrationState(_),
       [],
@@ -50,7 +53,7 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
       >
         <TabsControl {...tabsControlProps} />
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}
-        <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
+        <BaseFiltrationInner blocksToRender={blocksToRender} {...rest} />
       </BlockWrapper>
     );
   },

package/mobile/src/components/OfficesAtmsMap/Badge.tsx

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+import { style } from '../../utils/style';
+
+const colorStyle: Record<string, { border: string; text: TextColor }> = {
+  yellow: { border: 'border-yellow-light', text: 'text-yellow' },
+  green: { border: 'border-green-light', text: 'text-green-dark' },
+  gray: { border: 'border-gray', text: 'text-secondary-text' },
+  red: { border: 'border-error', text: 'text-error' },
+};
+
+export interface BadgeProps {
+  className?: string;
+  color?: keyof typeof colorStyle;
+}
+
+export const Badge = JSX<BadgeProps>(({ className, children, color = 'gray' }) => (
+  <div
+    className={style(
+      'p-s border border-gray rounded-md flex items-center',
+      colorStyle[color].border,
+      className,
+    )}
+  >
+    <Text size="text-m" color={colorStyle[color].text}>
+      {children}
+    </Text>
+  </div>
+));

package/mobile/src/components/OfficesAtmsMap/CardCell.tsx

@@ -0,0 +1,40 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+import { style } from '../../utils/style';
+
+export interface CardCellProps {
+  className?: string;
+  label?: string;
+  value?: string;
+  subText?: string;
+  subColor?: TextColor;
+}
+
+export const CardCell = JSX<CardCellProps>(({ className, label, value, subText, subColor }) => {
+  const textItems = value?.split(',') ?? [];
+
+  if (!textItems.length && !subText) {
+    return null;
+  }
+
+  return (
+    <div className={style('flex gap-2xs flex-col h-full max-w-[300px]', className)}>
+      {label ? (
+        <Text color="text-secondary-text" font="font-light" size="text-m">
+          {label}
+        </Text>
+      ) : null}
+      {textItems.filter(Boolean).map((text, i) => (
+        <Text key={String(i)} size="text-l">
+          {text.trim()}
+        </Text>
+      ))}
+      {subText ? (
+        <Text color={subColor} size="text-m">
+          {subText}
+        </Text>
+      ) : null}
+    </div>
+  );
+});

package/mobile/src/components/OfficesAtmsMap/CardRow.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+
+export interface CardRowProps {
+  className?: string;
+}
+
+export const CardRow = JSX<CardRowProps>(({ className, children }) => (
+  <div
+    className={style(
+      'flex border-t border-solid border-main-divider py-xl gap-x-6xl gap-y-xl',
+      className,
+    )}
+  >
+    {children}
+  </div>
+));