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

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

@@ -1,15 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderBlock } from '../../BlockRenderer/renderBlock';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 import type { CarouselContent } from './CarouselContent';
+import { CarouselScrollButtons } from './CarouselScrollButtons';
 import { ITEMS_GAP } from './itemsGap';
-import { renderControlButtons } from './renderControlButtons';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -18,36 +19,36 @@ export interface CarouselProps extends CarouselContent, UniBlockProps {
 
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
-    className = '',
+    className,
     itemCount,
     visibleItemCount = 0,
-    isBlur = true,
-    isCyclic = false,
+    noCardBorder,
+    isAlignCenter,
+    showDots,
     arrowsPadded = true,
-    isPadding = true,
-    showDots = false,
-    isAlignCenter = false,
-    showArrows = true,
     isGap = true,
     ...rest
   }) => {
     const { blocks: childBlocks = [] } = rest.block || {};
     const count = itemCount || childBlocks?.length;
 
-    const [activeIndex, setActiveIndex] = useState(Math.floor(visibleItemCount / 2));
-    const increaseActiveIndex = useCallback(() => setActiveIndex((_) => _ + 1), []);
-    const decreaseActiveIndex = useCallback(() => setActiveIndex((_) => _ - 1), []);
+    const [activeIndex, { inc: increaseActiveIndex, dec: decreaseActiveIndex }] =
+      useCarouselControls(
+        {
+          itemCount: count,
+          visibleItemCount,
+        },
+        Math.floor(visibleItemCount / 2),
+      );
 
-    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
-      itemCount: count,
-      isCyclic,
-    });
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({ itemCount: count });
     const [dotsActiveIndex] = scroll.visibleIndicesRange;
+    // TODO Remove
     const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
 
     return (
-      <BlockWrapper className={className} defaultPadding={getPaddingStyle(isPadding)} {...rest}>
-        <div className={style(getAlignStyle(isAlignCenter), 'relative max-w-full')}>
+      <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
+        <div className={style(isAlignCenter ? 'flex justify-center' : '', 'relative max-w-full')}>
           <SwipeListContainer
             containerRef={containerRef}
             visibleItemCount={visibleItemCount}
@@ -57,30 +58,36 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
           >
             {renderChildren({
               ...rest,
-              renderProps: isBankHistoryCarousel
-                ? (block, options) =>
-                    renderBlock(block, options, {
-                      blocksLength: childBlocks?.length,
-                      activeIndex: activeIndex,
-                    })
-                : renderBlock,
+              renderProps: (block, options, blockIndex) =>
+                renderBlock(block, options, {
+                  className: style(
+                    'h-full min-w-80 sm:min-w-96',
+                    noCardBorder
+                      ? ''
+                      : 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
+                  ),
+                  blockIndex,
+                  isActive: activeIndex === blockIndex,
+                }),
             })}
           </SwipeListContainer>
-          {renderControlButtons({
-            showArrows,
-            showDots,
-            scrollButtonsProps: {
-              scroll,
-              arrowsPadded,
-              isBlur,
-              onScrollLeft: decreaseActiveIndex,
-              onScrollRight: increaseActiveIndex,
-              hasEdgeBlocks: isBankHistoryCarousel,
-              activeIndex,
-              itemCount: count,
-            },
-            dotsProps: { containerRef, activeIndex: dotsActiveIndex, dotCount: count },
-          })}
+          <CarouselScrollButtons
+            scroll={scroll}
+            arrowsPadded={arrowsPadded}
+            onScrollLeft={decreaseActiveIndex}
+            onScrollRight={increaseActiveIndex}
+            hasEdgeBlocks={isBankHistoryCarousel}
+            activeIndex={activeIndex}
+            itemCount={count}
+          />
+          {showDots ? (
+            <SwipeListControlDots
+              containerRef={containerRef}
+              activeIndex={dotsActiveIndex}
+              dotCount={count}
+              listType="horizontal-list"
+            />
+          ) : null}
         </div>
       </BlockWrapper>
     );
@@ -100,8 +107,3 @@ Carousel.childrenTypes = [
   'CarouselInvestmentCard',
   'CarouselEventCard',
 ];
-
-const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-default' : '');
-
-const getAlignStyle = (isAlignCenter: boolean): string =>
-  isAlignCenter ? 'flex justify-center' : '';

package/mobile/src/components/Carousel/CarouselContent.ts

@@ -9,18 +9,12 @@ export type CarouselContent = UniBlockContent & {
    * @enumNames ["auto", "1", "2", "3", "4"]
    */
   visibleItemCount?: 0 | 1 | 2 | 3 | 4;
-  /** @title Добавление блюра на стрелках*/
-  isBlur?: boolean;
   /** @title Добавление отступа на стрелках */
   arrowsPadded?: boolean;
-  /** @title Цикличность */
-  isCyclic?: boolean;
-  /** @title Внутренний отступ  */
-  isPadding?: boolean;
   /** @title Выравнивать по центру  */
   isAlignCenter?: boolean;
-  /** @title отображение кнопок-стрелок*/
-  showArrows?: boolean;
-  /** @title отсупы между карточками*/
+  /** @title Отступы между карточками */
   isGap?: boolean;
+  /** @title Не показывать контур на карточках */
+  noCardBorder?: boolean;
 };

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

@@ -1,33 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
-import { SwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import type { SwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 
 export interface CarouselScrollButtonsProps {
   scroll: SwipeListScroll;
-  arrowsPadded: boolean;
-  isBlur: boolean;
-  onScrollLeft: () => void;
-  onScrollRight: () => void;
-  hasEdgeBlocks?: boolean;
   activeIndex: number;
   itemCount: number;
+  arrowsPadded?: boolean;
+  hasEdgeBlocks?: boolean;
+  onScrollLeft: () => void;
+  onScrollRight: () => void;
 }
 
 const scrollButtonStyle = 'absolute top-[calc(50%-24px)] z-40';
-const blurBaseStyle = 'absolute top-0 bottom-0 z-40 w-[84px] pointer-events-none';
+const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
 
 export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
   ({
     scroll,
+    activeIndex,
+    itemCount,
     arrowsPadded,
-    isBlur,
+    hasEdgeBlocks,
     onScrollLeft,
     onScrollRight,
-    hasEdgeBlocks,
-    activeIndex,
-    itemCount,
   }) => {
     const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
 
@@ -54,16 +52,16 @@ export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
 
     return (
       <div>
-        {renderBlur(isBlur, scroll)}
+        {renderBlur(scroll)}
         {canMoveLeft ? (
           <ScrollLeftButton
-            className={style(scrollButtonStyle, arrowsPadded ? 'left-8' : 'left-0')}
+            className={style(scrollButtonStyle, arrowsPadded ? 'left-1 @lg:left-8' : 'left-0')}
             onClick={handleScrollLeft}
           />
         ) : null}
         {canMoveRight ? (
           <ScrollRightButton
-            className={style(scrollButtonStyle, arrowsPadded ? 'right-8' : 'right-0')}
+            className={style(scrollButtonStyle, arrowsPadded ? 'right-1 @lg:right-8' : 'right-0')}
             onClick={handleScrollRight}
           />
         ) : null}
@@ -72,14 +70,13 @@ export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
   },
 );
 
-const renderBlur = (isBlur: boolean, scroll: SwipeListScroll) =>
-  isBlur ? (
-    <div>
-      {scroll.canScrollLeft ? (
-        <div className={style(blurBaseStyle, 'left-0 bg-opacity-from-white')} />
-      ) : null}
-      {scroll.canScrollRight ? (
-        <div className={style(blurBaseStyle, 'right-0 bg-opacity-to-white')} />
-      ) : null}
-    </div>
-  ) : null;
+const renderBlur = (scroll: SwipeListScroll) => (
+  <div>
+    {scroll.canScrollLeft ? (
+      <div className={style(blurBaseStyle, 'left-0 bg-opacity-from-white')} />
+    ) : null}
+    {scroll.canScrollRight ? (
+      <div className={style(blurBaseStyle, 'right-0 bg-opacity-to-white')} />
+    ) : null}
+  </div>
+);

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

@@ -1,24 +1,22 @@
-import { CarouselScrollButtons, CarouselScrollButtonsProps } from './CarouselScrollButtons';
 import {
   SwipeListControlDots,
   SwipeListControlDotsProps,
 } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
+import { CarouselScrollButtons, CarouselScrollButtonsProps } from './CarouselScrollButtons';
 
 interface renderControlButtonsProps {
-  showArrows: boolean;
   showDots: boolean;
   scrollButtonsProps: CarouselScrollButtonsProps;
   dotsProps: SwipeListControlDotsProps;
 }
 
 export const renderControlButtons = ({
-  showArrows,
   showDots,
   scrollButtonsProps,
   dotsProps,
 }: renderControlButtonsProps) => {
   return [
-    showArrows ? <CarouselScrollButtons key="0" {...scrollButtonsProps} /> : null,
+    <CarouselScrollButtons key="0" {...scrollButtonsProps} />,
     showDots ? <SwipeListControlDots key="1" {...dotsProps} listType="horizontal-list" /> : null,
   ];
 };

package/mobile/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
 
@@ -9,7 +8,7 @@ interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, U
 
 export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
   ({ title, description, className }) => (
-    <BlockWrapper className={style(className)} defaultPadding="p-default">
+    <BlockWrapper className={className} defaultPadding="p-6xl">
       <Headline
         headlineVersion="S"
         title={title}

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -1,44 +1,38 @@
-import type { CarouselCardContent } from './CarouselCardContent';
-import { Headline } from '../Headline/Headline';
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { getCardWidth } from './getCardWidth';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+import type { CarouselCardContent } from './CarouselCardContent';
 import { titleSize } from './titleSize';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full sm:hidden';
+const layerBaseStyle = 'z-10 border border-solid w-full h-full';
+const layerStyle = style(layerBaseStyle, 'absolute hidden sm:block border-transparent');
 
 export const CarouselCard = JSX<CarouselCardProps>(
-  ({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (
-    <section
-      className={style(
-        'flex pb-9 pl-12 sm:p-5 border-box h-full sm:max-w-[375px]',
-        getCardWidth(className, carouselVersion),
-        className,
-      )}
-    >
-      <div className="relative w-full">
-        <div className={`${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark`} />
-        <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
-        <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
-        <div className="relative h-full bg-white z-10 p-10 border border-solid border-green-light">
+  ({ className, title, description, button, ...rest }) => (
+    <BlockWrapper className={style('sm:pl-12 sm:pb-9', className)} defaultPadding="p-0" {...rest}>
+      <div className="relative">
+        <div className={style(layerStyle, 'top-9 right-12 bg-green-dark')} />
+        <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
+        <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />
+        <div className={style(layerBaseStyle, 'relative p-10 bg-white border-green-light')}>
           <Headline
-            className="!p-0"
             title={title}
             description={description}
             headlineVersion={titleSize}
             align="text-left"
-            version={version}
+            isPadding={false}
           />
           {renderButtonsSection([button], {
-            className: 'mt-14 sm:justify-center',
+            className: 'mt-6xl sm:justify-center',
             isVertical: true,
           })}
         </div>
       </div>
-    </section>
+    </BlockWrapper>
   ),
 );

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

@@ -1,8 +1,8 @@
 import type { SizeVersion } from '../../model/SizeVersion';
 
 export const cardStyleMap: Record<SizeVersion, string> = {
-  normal: 'min-w-[100%] justify-center items-center m-7 col-span-12',
-  small: 'min-w-auto justify-center items-center m-9 col-span-4',
+  normal: 'min-w-full justify-center items-center m-2xl col-span-12',
+  small: 'min-w-auto justify-center items-center m-4xl col-span-4',
 };
 
 export const cardWidthMap: Record<SizeVersion, string> = {

package/mobile/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -3,11 +3,10 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
 import type { CarouselCatalogCardContent } from './CarouselCatalogCardContent';
 
 export interface CarouselCatalogCardProps extends CarouselCatalogCardContent, UniBlockProps {}
@@ -20,26 +19,21 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
-      className={style(
-        'border box-border border-gray p-default sm:p-7 h-full flex flex-col justify-left',
-        className,
-      )}
+      className={style('flex flex-col justify-left gap-m', className)}
+      defaultPadding="p-6xl sm:p-7"
       {...rest}
     >
-      {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}
-      {title ? (
-        <Heading headingType="h6" as="h4" className="text-left mb-1.5" title={title} />
-      ) : null}
-      {description ? (
-        <div className="mb-4">
-          <Paragraph size="text-m" align="text-left" font="font-light">
-            {description}
-          </Paragraph>
-        </div>
-      ) : null}
+      {image?.src ? <Img className="flex justify-center" image={image} /> : null}
+      <Headline
+        title={title}
+        description={description}
+        headlineVersion="XS"
+        isPadding={false}
+        align="text-left"
+      />
       {colors?.length ? (
-        <div className="flex mb-4 text-secondary-text">
-          <div className="mr-1.5">
+        <div className="flex text-secondary-text">
+          <div className="mr-xs">
             <Text size="text-s" align="text-left" font="font-light">
               Цвета:
             </Text>
@@ -52,7 +46,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
           {price}&nbsp;₽
         </Text>
       ) : null}
-      {renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })}
+      {renderButtonsSection([button], { buttonClassName: 'w-full' })}
     </BlockWrapper>
   ),
 );

package/mobile/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -5,7 +5,6 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { Text } from '../../ui-kit/Text/Text';
-import { style } from '../../utils/style';
 import type { CarouselEventCardContent } from './CarouselEventCardContent';
 
 export interface CarouselEventCardProps extends CarouselEventCardContent, UniBlockProps {}
@@ -13,15 +12,15 @@ export interface CarouselEventCardProps extends CarouselEventCardContent, UniBlo
 export const CarouselEventCard = JSX<CarouselEventCardProps>(
   ({ className = '', icon, title, description, href, target, ...rest }) => {
     return (
-      <BlockWrapper className={style('w-[365px]', className)} defaultPadding="p-0" {...rest}>
+      <BlockWrapper className={className} defaultPadding="p-0" {...rest}>
         <LinkWrapper className="flex flex-col" href={href} target={target}>
           {icon?.icon ? <Img image={icon} /> : null}
           {icon?.src ? <Img image={icon} /> : null}
           {title ? (
-            <Heading headingType="h6" as="h4" className="text-left pt-3 mb-2" title={title} />
+            <Heading headingType="h6" as="h4" className="text-left mt-s ml-s mb-xs" title={title} />
           ) : null}
           {description ? (
-            <div className="mb-4">
+            <div className="ml-s mb-m">
               <Text font="font-light" size="text-m" color="text-secondary-text">
                 {description}
               </Text>

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -33,21 +33,13 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
     title,
     ...rest
   }) => (
-    <BlockWrapper
-      className={style(
-        'box-border text-left w-[697px]',
-        'border border-solid border-gray group-data-secondary:border-white/50',
-        className,
-      )}
-      padding="p-0"
-      {...rest}
-    >
+    <BlockWrapper className={style('text-left', className)} padding="p-0" {...rest}>
       <BaseTile
         className="h-full"
-        defaultPadding="p-m"
+        defaultPadding="p-xl"
         padding={padding}
         title={
-          title ? <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} /> : null
+          title ? <Heading headingType="h4" as="h3" className="mb-m z-10" title={title} /> : null
         }
         backImage={image?.src ? <Img image={image} /> : null}
       >

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -14,11 +14,8 @@ const MAX_LINKS_COUNT = 10;
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
   ({ className, additionalDescription, description, links, title, ...rest }) => (
-    <BlockWrapper
-      className={style('flex w-full overflow-hidden justify-between', className)}
-      {...rest}
-    >
-      <div className="flex flex-col max-w-96 pr-m text-white text-xl font-light">
+    <BlockWrapper className={style('flex w-full overflow-hidden', className)} {...rest}>
+      <div className="mr-xl flex-auto">
         <Headline
           isPadding={false}
           title={title}
@@ -28,7 +25,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
         />
         {additionalDescription ? (
           <Headline
-            className="pt-s"
+            className="pt-m"
             description={additionalDescription}
             align="text-left"
             isPadding={false}
@@ -47,8 +44,6 @@ const renderLinks = (links: LinkProps[]) => {
     <Carousel
       className="min-w-[832px] w-[832px]"
       version=""
-      isBlur={false}
-      isCyclic={true}
       itemCount={itemCount}
       arrowsPadded={false}
       showDots={true}