@redneckz/wildless-cms-uni-blocks 0.12.11 → 0.12.12

package/mobile/src/ui-kit/SwipeListControl/useSwipeListScroll.ts

@@ -17,13 +17,11 @@ export interface SwipeListScroll {
 
 interface SwipeListScrollProps {
   itemCount: number;
-  isCyclic?: boolean;
   onVisibleIndicesChange?: (indices: number[]) => void;
 }
 
 export const useSwipeListScroll = <E extends HTMLElement>({
   itemCount,
-  isCyclic,
   onVisibleIndicesChange,
 }: SwipeListScrollProps): [containerRef: { current: E | null }, scroll: SwipeListScroll] => {
   const containerRef = useRef<E | null>(null);
@@ -51,32 +49,32 @@ export const useSwipeListScroll = <E extends HTMLElement>({
       return;
     }
 
-    if (isCyclic && !canScrollLeft) {
-      scrollToEnd(containerRef.current);
-    } else {
+    if (canScrollLeft) {
       scrollBy(containerRef.current)(itemCount, -1);
+    } else {
+      scrollToEnd(containerRef.current);
     }
-  }, [isCyclic, itemCount, canScrollLeft]);
+  }, [itemCount, canScrollLeft]);
 
   const scrollRight = useCallback(() => {
     if (!containerRef.current) {
       return;
     }
 
-    if (isCyclic && !canScrollRight) {
-      scrollToStart(containerRef.current);
-    } else {
+    if (canScrollRight) {
       scrollBy(containerRef.current)(itemCount, 1);
+    } else {
+      scrollToStart(containerRef.current);
     }
-  }, [itemCount, isCyclic, canScrollRight]);
+  }, [itemCount, canScrollRight]);
 
   return [
     containerRef,
     {
       scrollLeft,
       scrollRight,
-      canScrollLeft: isCyclic || canScrollLeft,
-      canScrollRight: isCyclic || canScrollRight,
+      canScrollLeft,
+      canScrollRight,
       visibleIndicesRange: [minIndex, maxIndex],
       handleVisibleIndicesChange,
     },

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

@@ -11,7 +11,7 @@ export const TableArrowScrollControl = JSX<TableArrowScrollControlProps>(
           inc: onNextClick,
           canDec: showPrevButton,
           canInc: showNextButton,
-          btnClass: ['top-[108px]', 'top-[44px]'],
+          btnClass: ['top-28', 'top-12'],
           className: 'right-7',
           isDisabled: true,
         })}

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

@@ -91,7 +91,7 @@ export const YandexMap = JSX<YandexMapProps>(
 
     return (
       <div id="map" className={`${isFullScreen ? '' : 'relative'} w-full ${className}`}>
-        <div className={`absolute flex left-2 top-4 w-[50%] ${zIndex}`}>
+        <div className={`absolute flex left-2 top-4 w-1/2 ${zIndex}`}>
           {showSearchField
             ? renderSearchField(mockPoints, yandexMaps, updatePointsToRender)
             : renderOpenMap(pointsCenter)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.12.11",
+  "version": "0.12.12",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -140,6 +140,7 @@
     "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-typescript": "^8.3.3",
     "@size-limit/file": "^7.0.8",
+    "@tailwindcss/container-queries": "^0.1.0",
     "@testing-library/react": "^12.1.5",
     "@types/glob": "^8.0.0",
     "@types/jest": "^28.1.5",

package/src/BlockRenderer/renderBlock.tsx

@@ -1,5 +1,6 @@
 import type { BlockAncestors } from '../model/BlockDecorator';
 import type { BlockDef } from '../model/ContentPageDef';
+import type { UniBlockProps } from '../model/JSXBlock';
 import { style } from '../utils/style';
 import type { BlockRendererOptions } from './BlockRendererOptions';
 import { defaultBlockDecorator } from './defaultBlockDecorator';
@@ -8,7 +9,7 @@ const DEFAULT_ANCESTORS: BlockAncestors = [];
 
 const defaultStyle = 'col-span-12';
 
-type ExtraProps = Partial<Record<string, any> & { className: string }>;
+export type ExtraProps = Partial<Record<string, any>> & UniBlockProps;
 
 export function renderBlock(
   block: BlockDef,
@@ -31,11 +32,7 @@ export function renderBlock(
 
   return blockDecorator(
     {
-      blockClassName: style(
-        'scroll-mt-12', // TODO scroll-mt-12 ? here?
-        className,
-        block.style || defaultStyle,
-      ),
+      blockClassName: style(block.style?.length ? block.style : defaultStyle, className),
       block,
       ancestors,
       // Adjusted by decorator block and blockClassName

package/src/BlockRenderer/renderBlockList.tsx

@@ -3,11 +3,18 @@ import { DEFAULT_SLOT_NAME } from '../model/BlockDecorator';
 import type { BlockDef } from '../model/ContentPageDef';
 import type { VNode } from '../model/VNode';
 import type { BlockRendererOptions } from './BlockRendererOptions';
-import { renderBlock } from './renderBlock';
+import { ExtraProps, renderBlock } from './renderBlock';
+
+export type ChildRenderProps = (
+  block: BlockDef,
+  options: BlockRendererOptions,
+  i?: number,
+) => VNode;
 
 export interface BlocksListRendererProps extends BlockRendererOptions {
   slotName?: SlotName;
-  renderProps?: (block: BlockDef, options: BlockRendererOptions) => VNode;
+  extraProps?: ExtraProps;
+  renderProps?: ChildRenderProps;
 }
 
 const EMPTY_ANCESTORS: BlockAncestors = [];
@@ -18,16 +25,26 @@ export const renderBlocksList = (
     key,
     ancestors = EMPTY_ANCESTORS,
     slotName = DEFAULT_SLOT_NAME,
-    renderProps = renderBlock,
+    extraProps,
+    renderProps = renderBlock as ChildRenderProps,
     ...options
   }: BlocksListRendererProps,
-): VNode[] =>
-  (blocks || []).map((_: BlockDef, j: number) =>
-    renderProps(_, {
-      ...options,
-      key: `${key ? key : _.type}-${j}`,
-      ancestors: options.parent
-        ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
-        : ancestors,
-    }),
+): VNode[] => {
+  const renderChildBlock: ChildRenderProps = extraProps
+    ? (childBlock, childOptions) => renderBlock(childBlock, childOptions, extraProps)
+    : renderProps;
+
+  return (blocks || []).map((_: BlockDef, i: number) =>
+    renderChildBlock(
+      _,
+      {
+        ...options,
+        key: `${key ? key : _.type}-${i}`,
+        ancestors: options.parent
+          ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+          : ancestors,
+      },
+      i,
+    ),
   );
+};

package/src/BlockRenderer/renderChildren.ts

@@ -1,18 +1,19 @@
-import type { BlockDef } from '../model/ContentPageDef';
 import type { UniBlockProps } from '../model/JSXBlock';
 import type { VNode } from '../model/VNode';
-import type { BlockRendererOptions } from './BlockRendererOptions';
-import { renderBlocksList } from './renderBlockList';
+import type { ExtraProps } from './renderBlock';
+import { ChildRenderProps, renderBlocksList } from './renderBlockList';
 
 interface ChildrenRendererProps extends UniBlockProps {
   children?: VNode;
-  renderProps?: (block: BlockDef, options: BlockRendererOptions) => VNode;
+  extraProps?: ExtraProps;
+  renderProps?: ChildRenderProps;
 }
 
 export function renderChildren({
-  children,
   block,
   options,
+  children,
+  extraProps,
   renderProps,
 }: ChildrenRendererProps): VNode[] | null {
   if (children) {
@@ -20,6 +21,6 @@ export function renderChildren({
   }
 
   return block && options
-    ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
+    ? renderBlocksList(block.blocks, { ...options, parent: block, extraProps, renderProps })
     : null;
 }

package/src/components/Blocks.mobile.ts

@@ -13,9 +13,11 @@ import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { HorizontalLayout } from './HorizontalLayout/HorizontalLayout';
 import { ImgBlock } from './ImgBlock/ImgBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
@@ -25,6 +27,7 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
+import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
@@ -46,6 +49,7 @@ export const Blocks: BlocksRegistry = {
   Footer,
   Header,
   Headline,
+  HorizontalLayout,
   ImgBlock,
   LinkDocs,
   MobileAppTile,
@@ -58,8 +62,10 @@ export const Blocks: BlocksRegistry = {
   TextBlock,
   RichTextBlock,
   RollupItem,
+  SafeDepositRental,
   VerticalLayout,
   CarouselRecommendationCard,
+  ExchangeRateTile,
   CarouselProgramsCard,
   ProductGallery,
   BenefitsBlock,

package/src/components/Bonus/Bonus.tsx

@@ -16,7 +16,7 @@ export const Bonus = JSX<BonusProps>((props) => {
   return (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <div className="container">
-        <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
+        <Headline title={title} description={description} headlineVersion="M" isPadding={false} />
         <div className="flex flex-wrap w-full mt-9">
           {bonusItems?.length
             ? bonusItems.map((_, i) => (

package/src/components/BonusBenefitsBlock/renderBonusBenefits.mobile.tsx

@@ -1,4 +1,5 @@
-import { AlignType } from '../../model/AlignType';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { AlignType } from '../../model/AlignType';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import { BonusBenefit, ColumnsCount } from './BonusBenefitsBlockContent';
 import { renderBonusBenefit } from './renderBonusBenefit';

package/src/components/Calculator/UnknownRate.tsx

@@ -15,7 +15,7 @@ export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) =>
     <div className="mt-2xs pt-2xs pl-lg pb-xs">
       <Icon name="PercentIcon" width="90" height="85" />
     </div>
-    <div className="w-[250px] mt-m">
+    <div className="w-64 mt-m">
       <Paragraph size="text-xl" font="font-light" color="text-primary-text">
         Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в Банк
       </Paragraph>

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

@@ -1,19 +1,19 @@
 import '../../setup-fixture';
 
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Picture } from '../../model/Picture';
 import { Blocks } from '../Blocks';
-import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
-import { Carousel } from './Carousel';
-import { CARD } from '../CarouselCard/CarouselCard.fixture.mobile';
-import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile';
-import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
+import { CARD } from '../CarouselCard/CarouselCard.fixture.mobile';
 import { CATALOG_CARD } from '../CarouselCatalogCard/CatalogCard';
 import {
   PRODUCT_CARD,
   PRODUCT_CARD_SMALL,
 } from '../CarouselProductCard/CarouselProductCard.fixture';
-import { Picture } from '../../model/Picture';
+import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
+import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile';
+import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
+import { Carousel } from './Carousel';
 
 const catalogImage: Picture = {
   src: 'pay-ring.png',
@@ -34,16 +34,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isPadding={false}
-        isCyclic={true}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: [
-            { type: 'CarouselCard', content: CARD, style: ['col-span-4'] },
-            { type: 'CarouselCard', content: CARD, style: ['col-span-4'] },
+            { type: 'CarouselCard', content: CARD },
+            { type: 'CarouselCard', content: CARD },
           ],
         }}
         options={options}
@@ -54,17 +50,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={true}
-        isPadding={true}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselCatalogCard',
             content: { ...CATALOG_CARD, image: catalogImage },
-            style: ['col-span-12'],
           }),
         }}
         options={options}
@@ -75,28 +66,21 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={0}
-        isBlur={true}
-        isCyclic={true}
         isAlignCenter={true}
-        showArrows={false}
         block={{
           type: 'Carousel',
           blocks: [
             {
               type: 'CarouselTariffsCard',
               content: TARIFFS_CARD_HIT,
-              style: ['col-span-4'],
             },
             {
               type: 'CarouselTariffsCard',
               content: TARIFFS_CARD,
-              style: ['col-span-4'],
             },
             {
               type: 'CarouselTariffsCard',
               content: TARIFFS_CARD,
-              style: ['col-span-4'],
             },
           ],
         }}
@@ -108,17 +92,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={true}
-        isPadding={false}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselProductCard',
             content: PRODUCT_CARD,
-            style: ['col-span-4'],
           }),
         }}
         options={options}
@@ -129,16 +108,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={true}
-        isPadding={false}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselProductCard',
             content: PRODUCT_CARD_SMALL,
-            style: ['col-span-4'],
           }),
         }}
         options={options}
@@ -149,17 +124,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={true}
-        isPadding={true}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselProgramsCard',
             content: BUSINESS_CARD,
-            style: ['col-span-4'],
           }),
         }}
         options={options}
@@ -170,17 +140,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isPadding={false}
-        isCyclic={true}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselRecommendationCard',
             content: CAROUSEL_RECOMMENDATION_CARD,
-            style: ['col-span-4'],
           }),
         }}
         options={options}
@@ -191,17 +156,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isPadding={false}
-        isCyclic={true}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselRecommendationCard',
             content: { version: 'secondary', ...CAROUSEL_RECOMMENDATION_CARD },
-            style: ['col-span-4'],
           }),
         }}
         options={options}
@@ -212,17 +172,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={true}
-        isPadding={false}
-        showArrows={false}
         showDots={true}
         block={{
           type: 'Carousel',
           blocks: new Array(3).fill({
             type: 'CarouselBankHistoryCard',
             content: BANK_HISTORY_CARD,
-            style: ['col-span-4'],
           }),
         }}
         options={options}

package/src/components/Carousel/Carousel.fixture.tsx

@@ -1,6 +1,7 @@
 import '../../setup-fixture';
 
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Picture } from '../../model/Picture';
 import { Blocks } from '../Blocks';
 import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
@@ -19,7 +20,6 @@ import {
 import { RICH_CARD } from '../CarouselRichTextCard/CarouselRichTextCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
-import { Picture } from '../../model/Picture';
 
 const catalogImage: Picture = {
   src: 'pay-ring.png',
@@ -41,8 +41,7 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={1}
-        isBlur={false}
-        isCyclic={true}
+        noCardBorder={true}
         block={{
           type: 'Carousel',
           blocks: [
@@ -58,14 +57,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={true}
-        isCyclic={false}
+        noCardBorder={true}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselCard',
             content: CARD_MINI,
-            style: ['col-span-3'],
           }),
         }}
         options={options}
@@ -77,7 +74,6 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={3}
-        isBlur={false}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
@@ -94,8 +90,6 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={0}
-        isBlur={true}
-        isCyclic={false}
         isAlignCenter={true}
         isGap={false}
         block={{
@@ -116,7 +110,6 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={1}
-        isBlur={true}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
@@ -133,7 +126,6 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={3}
-        isBlur={true}
         block={{
           type: 'Carousel',
           blocks: [
@@ -164,7 +156,6 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={2}
-        isBlur={false}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
@@ -180,14 +171,11 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={true}
-        isCyclic={false}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselInvestmentCard',
             content: INVESTMENT_CARD_WITH_SINGLE_COLUMN,
-            style: ['col-span-2'],
           }),
         }}
         options={options}
@@ -198,15 +186,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={false}
         visibleItemCount={0}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselRecommendationCard',
             content: CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
-            style: ['col-span-2'],
           }),
         }}
         options={options}
@@ -217,15 +202,12 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={false}
         visibleItemCount={0}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselRecommendationCard',
             content: CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
-            style: ['col-span-2'],
           }),
         }}
         options={options}
@@ -237,14 +219,11 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={false}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselEventCard',
             content: CAROUSEL_EVENT_CARD,
-            style: ['col-span-4'],
           }),
         }}
         options={options}
@@ -255,10 +234,9 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        isBlur={false}
-        isCyclic={false}
         arrowsPadded={false}
         visibleItemCount={3}
+        noCardBorder={true}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({