@redneckz/wildless-cms-uni-blocks 0.14.29 → 0.14.30

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

@@ -8,6 +8,7 @@ import { BenefitsList } from '../BenefitsList/BenefitsList';
 import { renderButtonsSection } from '../Button/renderButtonsSection';
 import { Img } from '../Img/Img';
 import { List } from '../List/List';
+import { PriceList } from '../PriceList/PriceList';
 import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
 import { type TextAlign } from '../Text/TextProps';
@@ -31,6 +32,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     isFullWidthTitle,
     items,
     isDotted = true,
+    priceList = [],
     listItemSize,
     tags = [],
     buttons,
@@ -74,6 +76,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
             <List items={items} isDotted={isDotted} listItemSize={listItemSize} />
           ) : null}
           {children}
+          {priceList?.length ? <PriceList priceList={priceList} /> : null}
           {renderTags(tags)}
         </div>
       </BaseTile>

package/mobile/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -20,6 +20,16 @@ export interface TileImageOptions {
   isImageAlwaysOnRight?: boolean;
 }
 
+export interface PriceItem {
+  label?: string;
+  amount?: number;
+  unit?: string;
+}
+
+export interface PriceListProps {
+  priceList?: PriceItem[];
+}
+
 export type BaseProductTileContent = HeadlineProps &
   BenefitsListContent &
   RichTextProps &
@@ -28,7 +38,8 @@ export type BaseProductTileContent = HeadlineProps &
   TagsContent &
   ButtonsSectionContent &
   ImageContent &
-  LabelProps & {
+  LabelProps &
+  PriceListProps & {
     imageOptions?: TileImageOptions;
     /** @title Заголовок во всю ширину */
     isFullWidthTitle?: boolean;

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

@@ -67,7 +67,9 @@ export const DatePicker = JSX<DatePickerProps>(
 
     return (
       <div className={style(className, 'relative')} ref={ref}>
-        <Text size="text-m">{label}</Text>
+        <Text size="text-m" font-weight="font-light">
+          {label}
+        </Text>
         {renderDatePickerForm(handleChangeVisibleCalendar, value, valid)}
         {showCalendar ? (
           <div className="absolute bg-white z-10 select-none">

package/mobile/src/ui-kit/Foldable/FoldableSection.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 
 export interface FoldableSectionProps {
   className?: string;
@@ -9,23 +10,27 @@ export interface FoldableSectionProps {
 export const FoldableSection = JSX<FoldableSectionProps>(
   ({ className = '', isUnfolded, children }) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
-
-    useEffect(() => {
-      if (containerRef.current) {
-        containerRef.current.style.maxHeight = isUnfolded
-          ? `${containerRef.current.scrollHeight}px`
-          : '';
-      }
-    }, [isUnfolded, children?.length]);
+    const childrenWrapperRef = useResizeObserver(
+      (childrenWrapperEl) => {
+        if (containerRef.current) {
+          containerRef.current.style.maxHeight = isUnfolded
+            ? `${childrenWrapperEl.scrollHeight}px`
+            : '';
+        }
+      },
+      [isUnfolded],
+    );
 
     return (
       <div
         ref={containerRef}
         className={`transition-max-h duration-300 overflow-hidden ${
           containerRef.current || !isUnfolded ? 'max-h-0' : ''
-        } ${className}`}
+        } `}
       >
-        {children}
+        <div className={className} ref={childrenWrapperRef}>
+          {children}
+        </div>
       </div>
     );
   },

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

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { Text } from '../Text/Text';
+import { type PriceItem, type PriceListProps } from './PriceListProps';
+
+export const PriceList = JSX<PriceListProps>(({ priceList }) =>
+  priceList?.length ? (
+    <div className="flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-xl">
+      {priceList.map(renderPriceListItem)}
+    </div>
+  ) : null,
+);
+
+const renderPriceListItem = ({ label, amount }: PriceItem) => (
+  <div className="basis-full flex flex-col-reverse sm:flex-row sm:justify-between sm:bg-main-divider sm:py-m sm:px-lg sm:rounded-md items-baseline whitespace-pre">
+    <Text font="font-light" size="text-l" color="text-secondary-text">
+      {label}
+    </Text>
+    {amount ? (
+      <span className="font-sans text-h6 sm:text-primary-main text-primary-text">
+        {toLocalNumberFormat(2)(amount)} ₽
+      </span>
+    ) : null}
+  </div>
+);

package/mobile/src/ui-kit/PriceList/PriceListProps.ts

@@ -0,0 +1,11 @@
+import { type LabelProps } from '../../model/HeadlineType';
+
+export type PriceItem = LabelProps & {
+  /** @title Значение поля */
+  amount?: number;
+};
+
+export interface PriceListProps {
+  /** @title Список цен */
+  priceList?: PriceItem[];
+}

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

@@ -51,6 +51,7 @@ export const Select = JSX<SelectProps>(
       query,
       onChange,
       onClose: handleClose,
+      iconVersion,
     });
 
     return (

package/mobile/src/ui-kit/Select/SelectPopup.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import { filterOptions } from './filterOptions';
@@ -6,42 +7,48 @@ import { formatOption } from './formatOption';
 import { type Option } from './Option';
 
 export interface SelectPopupProps {
-  popupRef?: { current: HTMLDivElement | null };
+  iconVersion?: IconVersion;
+  onChange?: (option: Option) => void;
   options?: Option[];
-  value?: Option;
+  popupRef?: { current: HTMLDivElement | null };
   query?: string;
-  onChange?: (option: Option) => void;
+  value?: Option;
 }
 
-export const SelectPopup = JSX<SelectPopupProps>(({ popupRef, options, value, query, onChange }) =>
-  options?.length ? (
-    <div
-      className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md"
-      role="listbox"
-      ref={popupRef}
-    >
-      {filterOptions(options, query).map((option) => (
-        <div
-          key={option.key}
-          className="flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative"
-          role="option"
-          aria-selected={option.key === value?.key}
-          onClick={(e) => {
-            e.stopPropagation();
-            if (onChange) {
-              onChange(option);
-            }
-          }}
-        >
-          <span className="min-h-6">{formatOption(option)}</span>
-          <Icon
-            name="DoneSimpleIcon"
-            width="16"
-            height="16"
-            className={style('absolute right-4 pt-3xs', option.key === value?.key ? '' : 'hidden')}
-          />
-        </div>
-      ))}
-    </div>
-  ) : null,
+export const SelectPopup = JSX<SelectPopupProps>(
+  ({ popupRef, options, value, query, onChange, iconVersion }) =>
+    options?.length ? (
+      <div
+        className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md"
+        role="listbox"
+        ref={popupRef}
+      >
+        {filterOptions(options, query).map((option) => (
+          <div
+            key={option.key}
+            className="flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative"
+            role="option"
+            aria-selected={option.key === value?.key}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (onChange) {
+                onChange(option);
+              }
+            }}
+          >
+            <span className="min-h-6">{formatOption(option)}</span>
+            <Icon
+              name="DoneSimpleIcon"
+              width="16"
+              height="16"
+              iconVersion={iconVersion}
+              className={style(
+                'absolute right-4 pt-3xs',
+                option.key === value?.key ? '' : 'hidden',
+              )}
+            />
+          </div>
+        ))}
+      </div>
+    ) : null,
 );

package/mobile/src/ui-kit/Select/useSelectPopup.tsx

@@ -16,6 +16,7 @@ export function useSelectPopup({
   query,
   onChange,
   onClose,
+  iconVersion,
 }: SelectPopupOptions) {
   const popup = usePopupManager();
 
@@ -50,6 +51,7 @@ export function useSelectPopup({
         value={value}
         query={query}
         onChange={handleChange}
+        iconVersion={iconVersion}
       />,
       {
         top: top + window.scrollY + height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.29",
+  "version": "0.14.30",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/common.css

@@ -8,6 +8,7 @@ html {
 * {
   --color-green: 78, 190, 81;
   --color-green-light: 131, 184, 62;
+  --color-green-more-light: 219, 242, 219;
   --color-green-dark: 66, 171, 68;
   --color-green-more-dark: 39, 148, 41;
   --color-yellow: 221, 182, 61;

package/src/components/Blocks.mobile.ts

@@ -25,7 +25,6 @@ import { ImgBlock } from './ImgBlock/ImgBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { MortgageFiltration } from './MortgageFiltration/MortgageFiltration';
-import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
@@ -69,7 +68,6 @@ export const Blocks: BlocksRegistry = {
   ImgBlock,
   LinkDocs,
   MobileAppTile,
-  PictureText,
   Placeholder,
   ProductBlock,
   ProductGallery,

package/src/components/Blocks.ts

@@ -34,7 +34,6 @@ import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { MortgageFiltration } from './MortgageFiltration/MortgageFiltration';
 import { OfficesAtmsMap } from './OfficesAtmsMap/OfficesAtmsMap';
 import { ParagraphBlock } from './ParagraphBlock/ParagraphBlock';
-import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
@@ -89,7 +88,6 @@ export const Blocks: BlocksRegistry = {
   MortgageFiltration,
   OfficesAtmsMap,
   ParagraphBlock,
-  PictureText,
   Placeholder,
   ProductBlock,
   ProductGallery,

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

@@ -85,6 +85,21 @@ export default {
             buttons: [sendRequestButton, detailsButton],
           },
         },
+        {
+          nav: {
+            title: 'Рефинансирование',
+          },
+          calculatorBlock: {
+            calcType: 'RefinancingCalculatorForm',
+            paramsViewSettings: {
+              isShowSalaryClient: true,
+              isShowInsurance: true,
+            },
+            buttons: [sendRequestButton],
+            footnote:
+              'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+          },
+        },
       ]}
     />
   ),

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -26,7 +26,7 @@ export interface CreditCalculatorProp extends CreditCalculatorProps {
 }
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
-  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings, isMobile }) => {
+  ({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
     const [userInputParams, { field }] = useForm({
       isAnnuity: true,
       isInsurance: true,
@@ -44,7 +44,8 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
     );
 
     const paymentTypeElement = renderPaymentType({
-      title: isMobile ? 'Тип платежа' : '',
+      title: '',
+      mobileTitle: 'Тип платежа',
       orientation: 'vertical',
       ...field('isAnnuity'),
     });

package/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -26,6 +26,7 @@ import {
 
 export interface RefinancingCalculatorProp extends RefinancingCalculatorProps {
   className?: string;
+  isMobile?: boolean;
 }
 
 export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
@@ -47,6 +48,13 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
       paramsViewSettings,
     );
 
+    const paymentTypeElement = renderPaymentType({
+      title: '',
+      mobileTitle: 'Тип платежа',
+      orientation: 'vertical',
+      ...field('isAnnuity'),
+    });
+
     return (
       <section className={style('flex flex-col justify-between @5xl:flex-row gap-m', className)}>
         <div className="flex flex-col gap-y-m sm:max-w-md gap-2xl">
@@ -84,12 +92,15 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
                 value: calculatorParams.moneyExtra,
               })
             : null}
+          <div className="sm:hidden pt-1 pb-4 border-b border-main-divider">
+            {paymentTypeElement}
+          </div>
         </div>
         {renderRate({
           rate: calculatorParams.rate,
           fractionDigits: 1,
         })}
-        <div className="flex flex-col gap-2xl sm:w-96">
+        <div className="flex flex-col gap-2xl mt-2 sm:w-96 sm:mt-0">
           <CalculatorValueBlock
             title={'Ежемесячный платеж'}
             value={calculatorParams.monthlyPayment}
@@ -102,7 +113,7 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
               postfix="₽"
             />
           ) : null}
-          {renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') })}
+          <div className="hidden sm:block">{paymentTypeElement}</div>
           {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
         </div>
@@ -115,7 +126,7 @@ const renderCreditParamsForm = (
   params: RefinancingCalculatorParams & RefinancingCalculatorParamsViewSettings,
   field: FormFieldRegisterer<any>,
 ) => (
-  <div className="space-y-s">
+  <div className="space-y-lg sm:space-y-s">
     {params.isShowSalaryClient ? (
       <Checkbox
         text="Получаю зарплату на счёт в Россельхозбанке"

package/src/components/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -9,6 +9,7 @@ import { style } from '../../utils/style';
 export interface BinaryRadioButtonGroupProps {
   items: [truthy: RadioButtonItem, falsy: RadioButtonItem];
   title?: string;
+  mobileTitle?: string;
   orientation?: ListOrientation;
   value?: boolean;
   radioGroupClassName?: string;
@@ -18,6 +19,7 @@ export interface BinaryRadioButtonGroupProps {
 export const renderBinaryRadioButtonGroup = ({
   items,
   title,
+  mobileTitle = title,
   orientation = 'horizontal',
   value,
   radioGroupClassName,
@@ -25,12 +27,20 @@ export const renderBinaryRadioButtonGroup = ({
 }: BinaryRadioButtonGroupProps) => (
   <div className="space-y-s">
     {title ? (
-      <div>
+      <div className="hidden @5xl:block">
         <Text color="text-secondary-text" font="font-light">
           {title}
         </Text>
       </div>
     ) : null}
+    {mobileTitle ? (
+      <div className="@5xl:hidden">
+        <Text color="text-secondary-text" font="font-light">
+          {mobileTitle}
+        </Text>
+      </div>
+    ) : null}
+
     <RadioButtonGroup
       orientation={orientation}
       items={items}

package/src/components/CarouselCard/CarouselCard.tsx

@@ -26,7 +26,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
         <div
           className={style(
             layerBaseStyle,
-            'relative p-xl sm:p-5xl bg-white border-transparent sm:border-green-light',
+            'relative p-xl sm:p-5xl bg-white border-transparent sm:border-green-more-light',
           )}
         >
           <Headline

package/src/components/Depository/Depository.tsx

@@ -5,6 +5,7 @@ import { type JSXBlock, type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { NotFound } from '../../ui-kit/NotFound/NotFound';
 import { Pagination } from '../../ui-kit/Pagination/Pagination';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { type DepositoryContent } from './DepositoryContent';
 import { DepositoryFilter } from './DepositoryFilter';
@@ -33,32 +34,48 @@ export const Depository: JSXBlock<DepositoryProps> = JSX<DepositoryProps>(
     const [itemCount, setItemCount] = useState(DEFAULT_ITEMS_COUNT);
     const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
 
-    const { totalPages = 0, items } = useDepository({
+    const { totalPages = 0, items = [] } = useDepository({
       size: itemCount,
       page: currentPage,
       ...filtrationState,
     });
 
     const handleChangePage = useCallback((page: number) => setCurrentPage(page - 1), []);
-    const handleItemCountChange = useCallback((count: number) => setItemCount(count), []);
+
+    const handleItemCountChange = useCallback((count: number) => {
+      if (itemCount !== count) {
+        setItemCount(count);
+        setCurrentPage(0);
+      } else {
+        setItemCount(count);
+      }
+    }, []);
 
     return (
-      <BlockWrapper className={style(className, 'container p-4xl')} {...rest}>
+      <BlockWrapper className={style(className, 'container p-6xl')} {...rest}>
         <DepositoryFilter filtrationState={filtrationState} field={field} onClearFilter={reset} />
         <div className="flex flex-col">
           <div className="grid grid-cols-12 pb-lg border-gray border-opacity-50 border-b">
-            <span className="col-span-2 text-gray text-m">Дата</span>
-            <span className="col-span-10 text-gray text-m">Тема</span>
+            <div className="col-span-2">
+              <Text size="text-m" color="text-secondary-text">
+                Дата
+              </Text>
+            </div>
+            <span className="col-span-10">
+              <Text size="text-m" color="text-secondary-text">
+                Тема
+              </Text>
+            </span>
           </div>
-          {items?.length ? (
-            items?.map((params) => <DepositoryItem key={String(params.publicId)} {...params} />)
+          {items.length ? (
+            items.map((params) => <DepositoryItem key={String(params.publicId)} {...params} />)
           ) : (
             <NotFound title="Ничего не найдено" description="Попробуйте очистить фильтры" />
           )}
           <Pagination
             currentPage={currentPage + 1}
             onPageChange={handleChangePage}
-            totalPages={totalPages + 1}
+            totalPages={totalPages}
             itemCount={itemCount}
             onItemCountChange={handleItemCountChange}
           />

package/src/components/Depository/DepositoryFilter.tsx

@@ -28,7 +28,7 @@ export const DepositoryFilter = JSX<DepositoryFilterProps>(
       />
       <div className="col-span-2 mt-auto">
         <button
-          className="px-m py-s rounded-md bg-main-gray text-green cursor-pointer w-full"
+          className="px-m py-s rounded-md bg-main-gray text-green hover:text-white hover:bg-primary-hover active:bg-primary-active cursor-pointer w-full"
           onClick={onClearFilter}
         >
           Очистить фильтр

package/src/components/Depository/DepositoryItem.tsx

@@ -9,8 +9,12 @@ export const DepositoryItem = ({ title, timestamp, publicId }: DepositoryDataIte
 
   return (
     <div className="grid grid-cols-12 py-lg border-gray border-opacity-50 border-b" key={publicId}>
-      <div className="col-span-2 text-m">
-        {timestamp ? <Text>{formatDate(timestamp)}</Text> : null}
+      <div className="col-span-2">
+        {timestamp ? (
+          <Text size="text-m" font-weight="font-light">
+            {formatDate(timestamp)}
+          </Text>
+        ) : null}
       </div>
       <div className="col-span-10 text-h6 hover:text-primary-active">
         <a href={href} download aria-label="Скачать">

package/src/components/Depository/useDepository.ts

@@ -19,14 +19,23 @@ interface UseDepositoryParams extends DepositoryFiltrationState {
   size: number;
   page: number;
 }
+const DEPOSITARY_URL = '/api/v1/depository';
 
 export const useDepository = ({ size, page, query, startDate, endDate }: UseDepositoryParams) => {
-  const { data } = useAsyncData<DepositoryData>(
-    `/api/v1/depository?page=${page}&size=${size}&query=${query}&timestampStart=${
-      startDate ? formatDate(startDate, true) : ''
-    }&timestampEnd=${endDate ? formatDate(endDate, true) : ''}`,
-    fetchJSONUnsafe,
-  );
+  const formatStartDate = startDate ? formatDate(startDate, true) : '';
+  const formatEndDate = endDate ? formatDate(endDate, true) : '';
+
+  const searchParams = new URLSearchParams(DEPOSITARY_URL);
+
+  searchParams.set('page', String(page));
+  searchParams.set('size', String(size));
+  searchParams.set('query', query);
+  searchParams.set('startDate', formatStartDate);
+  searchParams.set('endDate', formatEndDate);
+
+  const queryString = `?${searchParams.toString()}`;
+
+  const { data } = useAsyncData<DepositoryData>(DEPOSITARY_URL + queryString, fetchJSONUnsafe);
 
   return { items: data?.content, totalPages: data?.totalPages };
 };

package/src/components/OfficesAtmsMap/Badge.tsx

@@ -5,9 +5,9 @@ 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' },
+  green: { border: 'border-green-more-light', text: 'text-green-dark' },
   gray: { border: 'border-gray', text: 'text-secondary-text' },
-  red: { border: 'border-error', text: 'text-error' },
+  red: { border: 'border-error/30', text: 'text-error' },
 };
 
 export interface BadgeProps {