@redneckz/wildless-cms-uni-blocks 0.6.39 → 0.6.41

package/mobile/src/services/sitemap/SitemapProps.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
+import type { LogoType } from '../../model/LogoType';
 import type { Picture } from '../../model/Picture';
 
 /**
@@ -22,10 +23,7 @@ export interface DispositionItem extends LinkProps {
 export interface SitemapDataProps {
   topItems?: TopMenuItem[];
   dispositions?: DispositionItem[];
-  logo?: {
-    image?: Picture;
-    title?: string;
-  };
+  logo?: LogoType;
   defaultLocation?: string;
   officesLink?: string;
 }

package/mobile/src/ui-kit/Button/ButtonSection.tsx

@@ -22,23 +22,23 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ className = '', buttons
 );
 
 export function renderButton({ button, buttonClassName, index }: RenderButtonProps) {
-  const { icon, iconRight, version, ...rest } = button;
+  const { icon, iconRight, version, text, ...rest } = button;
 
   const iconVersion = version === 'secondary' ? 'color' : 'white';
-
   const leftIcon = renderButtonIcon({ ...icon, iconVersion: iconVersion } as Picture);
   const rightIcon = renderButtonIcon({ ...iconRight, iconVersion: iconVersion } as Picture);
 
-  return (
+  return text ? (
     <Button
       key={index ? String(index) : ''}
       className={buttonClassName}
       appendLeft={leftIcon}
       appendRight={rightIcon}
       version={version}
+      text={text}
       {...rest}
     />
-  );
+  ) : null;
 }
 
 const renderButtonIcon = (icon: Picture) => {

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BgColorVersion } from '../../model/BgColorVersion';
-import { Img } from '../Img/Img';
+import type { LogoType } from '../../model/LogoType';
+import { renderImage } from './renderImage';
+import { renderTitle } from './renderTitle';
 
 export interface LogoProps {
   className: string;
@@ -8,44 +9,28 @@ export interface LogoProps {
   targetBlank: boolean;
   bgColor?: string;
   showTitle?: boolean;
+  logo?: LogoType;
 }
 
-const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'color',
-  transparent: 'white',
-};
-
-const SVG_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-primary-main',
-  transparent: 'text-white',
-};
-
-const TEXT_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-black',
-  transparent: 'text-white',
-};
-
 export const Logo = JSX<Partial<LogoProps>>(
-  ({ className = '', href, children, targetBlank, bgColor = 'bg-white', showTitle = true }) => {
+  ({
+    bgColor = 'bg-white',
+    children,
+    className = '',
+    href,
+    logo,
+    showTitle = true,
+    targetBlank,
+  }) => {
     return (
       <a
         className={`inline-flex items-center font-sans no-underline ${className}`}
         href={href || 'https://rshb.ru/'}
         target={targetBlank ? '_blank' : '_self'}
-        aria-label="Россельхозбанк"
+        aria-label={logo?.title || 'Россельхозбанк'}
       >
-        <Img
-          image={{ icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }}
-          className={`${SVG_COLOR[bgColor]}`}
-          width="34"
-          height="34"
-          asSVG
-        />
-        {showTitle ? (
-          <span className={`${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`}>
-            {children || 'Россельхозбанк'}
-          </span>
-        ) : null}
+        {renderImage(bgColor, logo?.image, { width: '34', height: '34' })}
+        {showTitle ? renderTitle(children || logo?.title, bgColor, 'text-s') : null}
       </a>
     );
   },

package/mobile/src/ui-kit/Logo/renderImage.tsx

@@ -0,0 +1,40 @@
+import { BgColorVersion } from '../../model/BgColorVersion';
+import type { Picture } from '../../model/Picture';
+import { Img } from '../Img/Img';
+
+const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'color',
+  transparent: 'white',
+};
+
+const SVG_COLOR: Record<BgColorVersion, string> = {
+  'bg-white': 'text-primary-main',
+  transparent: 'text-white',
+};
+
+export const renderImage = (
+  bgColor: string,
+  image?: Picture,
+  size?: { width: string; height: string },
+) => {
+  return image?.src ? (
+    <Img
+      image={image}
+      className={SVG_COLOR[bgColor]}
+      width={size?.width}
+      height={size?.height}
+      asSVG
+    />
+  ) : (
+    <Img
+      image={{
+        icon: image?.icon || 'LogoIcon',
+        iconVersion: ICON_VERSION_MAP[bgColor],
+      }}
+      className={SVG_COLOR[bgColor]}
+      width={size?.width}
+      height={size?.height}
+      asSVG
+    />
+  );
+};

package/mobile/src/ui-kit/Logo/renderTitle.tsx

@@ -0,0 +1,15 @@
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { VNode } from '../../model/VNode';
+
+const TEXT_COLOR: Record<BgColorVersion, string> = {
+  'bg-white': 'text-primary-text',
+  transparent: 'text-white',
+};
+
+export const renderTitle = (title: VNode, bgColor: string, className?: string) => {
+  return (
+    <span className={`${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`}>
+      {title || 'Россельхозбанк'}
+    </span>
+  );
+};

package/mobile/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -16,13 +16,13 @@ interface SwipeListContainerProps extends SwipeContainerProps {
   className?: string;
   containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
-  visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3;
+  visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3 | 4;
   snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
   onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
   onVisibleIndicesChange?: (indices: number[]) => void;
 }
 
-const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]'];
+const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
 
 export const SwipeListContainer = JSX<SwipeListContainerProps>(
   ({

package/package.json

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

package/src/BlockRenderer/BlockRendererOptions.ts

@@ -9,4 +9,5 @@ export interface BlockRendererOptions {
   blocksRegistry?: BlocksRegistry;
   parent?: Slot;
   ancestors?: BlockAncestors;
+  className?: string;
 }

package/src/BlockRenderer/renderBlock.tsx

@@ -13,6 +13,7 @@ export function renderBlock(block: BlockDef, options: BlockRendererOptions) {
     blockDecorator = defaultBlockDecorator,
     blocksRegistry = {},
     ancestors = DEFAULT_ANCESTORS,
+    className = '',
   } = options;
   const { type } = block;
 
@@ -24,7 +25,7 @@ export function renderBlock(block: BlockDef, options: BlockRendererOptions) {
 
   return blockDecorator(
     {
-      blockClassName: `scroll-mt-12 ${style2className(block.style || DEFAULT_STYLE)}`, // TODO scroll-mt-12 ? here?
+      blockClassName: `scroll-mt-12 ${className} ${style2className(block.style || DEFAULT_STYLE)}`, // TODO scroll-mt-12 ? here?
       block,
       ancestors,
       // Adjusted by decorator block and blockClassName

package/src/components/Blocks.ts

@@ -5,11 +5,15 @@ import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { BusinessBlock } from './BusinessBlock/BusinessBlock';
+import { ButtonBlock } from './ButtonBlock/ButtonBlock';
 import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselCard } from './CarouselCard/CarouselCard';
+import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
+import { CarouselInvestmentCard } from './CarouselInvestmentCard/CarouselInvestmentCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
+import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
 import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { Catalog } from './Catalog/Catalog';
@@ -49,20 +53,23 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 import { Video } from './Video/Video';
-import { CarouselInvestmentCard } from './CarouselInvestmentCard/CarouselInvestmentCard';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
   BenefitsBlock,
   BusinessBlock,
+  ButtonBlock,
   Bonus,
   BonusBenefitsBlock,
   CardTransfer,
   Calculator,
   Carousel,
   CarouselCard,
+  CarouselCatalogCard,
+  CarouselInvestmentCard,
   CarouselLinks,
+  CarouselProductCard,
   CarouselProgramsCard,
   CarouselTariffsCard,
   Catalog,
@@ -102,5 +109,4 @@ export const Blocks: BlocksRegistry = {
   Tile,
   VerticalLayout,
   Video,
-  CarouselInvestmentCard,
 };

package/src/components/ButtonBlock/ButtonBlock.example.json

@@ -0,0 +1,10 @@
+{
+  "content": {
+    "button": {
+      "href": "/credit-cards",
+      "text": "Подробнее",
+      "target": "_blank",
+      "version": "primary"
+    }
+  }
+}

package/src/components/ButtonBlock/ButtonBlock.fixture.tsx

@@ -0,0 +1,18 @@
+import '../../setup-fixture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { ButtonBlock } from './ButtonBlock';
+
+const button: ButtonWithIconProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'primary',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12 p-4">
+      <ButtonBlock className="col-span-12" button={button} />
+    </div>
+  ),
+};

package/src/components/ButtonBlock/ButtonBlock.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import type { ButtonBlockContent } from './ButtonBlockContent';
+
+interface ButtonBlockProps extends ButtonBlockContent, UniBlockProps {}
+
+export const ButtonBlock = JSX<ButtonBlockProps>((props) => {
+  const { className, button, ...rest } = props;
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      {button ? renderButton({ button }) : null}
+    </BlockWrapper>
+  );
+});

package/src/components/ButtonBlock/ButtonBlock.ui.json

@@ -0,0 +1,12 @@
+{
+  "content": {
+    "button": {
+      "icon": {
+        "ui:field": "icon"
+      },
+      "iconRight": {
+        "ui:field": "icon"
+      }
+    }
+  }
+}

package/src/components/ButtonBlock/ButtonBlockContent.ts

@@ -0,0 +1,9 @@
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Блок Кнопка
+ */
+export interface ButtonBlockContent {
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
+}

package/src/components/Calculator/constants.ts

@@ -18,7 +18,7 @@ export const DEFAULT_CREDIT_CALCULATOR_PARAMS: CreditCalculatorSourceBookParams
   maxSum: DEFAULT_MAX_SUM,
   minMonths: DEFAULT_MIN_MONTHS,
   maxMonths: DEFAULT_MAX_MONTHS,
-  rateBottomRange: 10,
+  rateBottomRange: 12,
   rateTopRange: 7,
   isSalaryClient: true,
   isStateEmployee: true,

package/src/components/Carousel/Carousel.example.json

@@ -1,5 +1,4 @@
 {
-  "cardWidth": 1200,
   "isBlur": false,
   "visibleItemCount": 1,
   "isCycle": false

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

@@ -1,11 +1,13 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
-import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
+import { CATALOG_CARD } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
+import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
+import { PRODUCT_CARD } from '../CarouselProductCard/CarouselProductCard.fixture';
 import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
+import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
-import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 
 const options = {
   blocksRegistry: Blocks,
@@ -30,7 +32,7 @@ export default {
       />
     </div>
   ),
-  'carousel with mini cards': (
+  'mini cards': (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
@@ -48,6 +50,25 @@ export default {
       />
     </div>
   ),
+  catalog: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={3}
+        isBlur={false}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6)
+            .fill({
+              type: 'CarouselCatalogCard',
+              content: CATALOG_CARD,
+            })
+            .map((_, i) => (i === 1 ? { ..._, content: CATALOG_CARD } : _)),
+        }}
+        options={options}
+      />
+    </div>
+  ),
   tariffs: (
     <div className="container grid grid-cols-12">
       <Carousel
@@ -68,6 +89,45 @@ export default {
       />
     </div>
   ),
+  product: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={3}
+        isBlur={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6)
+            .fill({
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD,
+            })
+            .map((_, i) => (i === 1 ? { ..._, content: PRODUCT_CARD } : _)),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+  'mini-product': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={4}
+        isBlur={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6)
+            .fill({
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD,
+            })
+            .map((_, i) => (i === 1 ? { ..._, content: PRODUCT_CARD } : _)),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+
   program: (
     <div className="container grid grid-cols-12">
       <Carousel

package/src/components/Carousel/Carousel.tsx

@@ -30,23 +30,25 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     });
 
     return (
-      <BlockWrapper className={`relative font-sans ${className}`} {...rest}>
-        <SwipeListContainer
-          containerRef={containerRef}
-          visibleItemCount={visibleItemCount}
-          snapAlign="snap-start"
-          gap={ITEMS_GAP}
-          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
-        >
-          {renderChildren(rest)}
-        </SwipeListContainer>
-        {(scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
-          <div>
-            <div className={`${blurBaseStyle} left-0 bg-opacity-from-white`} />
-            <div className={`${blurBaseStyle} right-0 bg-opacity-to-white`} />
-          </div>
-        ) : null}
-        {renderScrollButtons(scroll)}
+      <BlockWrapper className={`font-sans p-12 ${className}`} {...rest}>
+        <div className="relative max-w-full">
+          <SwipeListContainer
+            containerRef={containerRef}
+            visibleItemCount={visibleItemCount}
+            snapAlign="snap-start"
+            gap={ITEMS_GAP}
+            onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+          >
+            {renderChildren(rest)}
+          </SwipeListContainer>
+          {(scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
+            <div>
+              <div className={`${blurBaseStyle} left-0 bg-opacity-from-white`} />
+              <div className={`${blurBaseStyle} right-0 bg-opacity-to-white`} />
+            </div>
+          ) : null}
+          {renderScrollButtons(scroll)}
+        </div>
       </BlockWrapper>
     );
   },
@@ -54,8 +56,9 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
 
 Carousel.childrenTypes = [
   'CarouselCard',
+  'CarouselCatalogCard',
   'CarouselTariffsCard',
-  'CarouselLinks',
+  'CarouselProductCard',
   'CarouselProgramsCard',
   'CarouselInvestmentCard',
 ];

package/src/components/Carousel/CarouselContent.ts

@@ -6,7 +6,7 @@ export interface CarouselContent {
    * @title Количество видимых карточек
    * @enumNames ["auto", "1", "2", "3"]
    */
-  visibleItemCount?: 0 | 1 | 2 | 3;
+  visibleItemCount?: 0 | 1 | 2 | 3 | 4;
   /** @title Добавление  блюра */
   isBlur?: boolean;
   /** @title Цикличность */

package/src/components/CarouselCatalogCard/CarouselCatalogCard.example.json

@@ -0,0 +1,17 @@
+{
+  "title": "Заголовок карточки 1",
+  "description": "Описание карточки",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 230,
+      "height": 230
+    }
+  },
+  "button": {
+    "href": "",
+    "text": "Подробнее",
+    "target": "_self",
+    "version": "primary"
+  }
+}

package/src/components/CarouselCatalogCard/CarouselCatalogCard.fixture.tsx

@@ -0,0 +1,43 @@
+import type { Picture } from '../../model/Picture';
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { CarouselCatalogCard } from './CarouselCatalogCard';
+
+const payRing: Picture = {
+  src: 'pay-ring.png',
+  format: 'webp',
+  size: {
+    width: 230,
+    height: 230,
+  },
+  title: 'pay-ring',
+};
+
+const colors: ProductColorVersion[] = ['black', 'white'];
+
+const buttonPrimary: ButtonWithIconProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'primary',
+  icon: {
+    icon: 'AppleIcon',
+  },
+};
+
+export const CATALOG_CARD = {
+  title: 'SATURN S-VI',
+  description: 'Керамическое кольцо с глянцевой поверхностью и огранкой по внешним контурам',
+  image: payRing,
+  price: 5600,
+  colors: colors,
+  button: buttonPrimary,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CarouselCatalogCard {...CATALOG_CARD} />
+    </div>
+  ),
+};

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -0,0 +1,62 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+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 type { CarouselCatalogCardContent } from './CarouselCatalogCardContent';
+
+export interface CarouselCatalogCardProps extends CarouselCatalogCardContent {
+  className?: string;
+  version?: BlockVersion;
+}
+
+const cardStyleMap: Record<ProductColorVersion, string> = {
+  black: 'bg-black',
+  white: 'bg-white',
+};
+
+export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
+  ({ className = '', title, description, image, price, button, colors, version = 'primary' }) => (
+    <section
+      className={`border box-border border-main-stroke p-7 min-w-[392px] flex flex-col justify-left ${VersionStyleMap[version]} ${className}`}
+      role="listitem"
+    >
+      {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}
+      {colors?.length ? (
+        <div className="flex mb-4 text-s-light text-secondary-text">
+          <div className="mr-1.5">
+            <Text>Доступные цвета: </Text>
+          </div>
+          {colors.map(renderColorOption)}
+        </div>
+      ) : null}
+      {price ? (
+        <Text size="text-h3" align="text-left">
+          {price}&nbsp;₽
+        </Text>
+      ) : null}
+      {button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null}
+    </section>
+  ),
+);
+
+const renderColorOption = (color: ProductColorVersion, i: number) => (
+  <span
+    key={String(i)}
+    className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
+  />
+);

package/src/components/CarouselCatalogCard/CarouselCatalogCard.ui.json

@@ -0,0 +1,10 @@
+{
+  "content": {
+    "image": {
+      "ui:field": "picture"
+    },
+    "price": {
+      "ui:field": "number"
+    }
+  }
+}