@redneckz/wildless-cms-uni-blocks 0.3.56 → 0.3.58

package/src/components/GroupBlock/GroupBlock.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { GroupBlockContent, GroupBlockTab } from './GroupBlockContent';
+import { GroupBlockTabs } from './GroupBlockTabs';
+import { GroupBlocksItem } from './GroupBlocksItem';
+import { filterBlocksByTag } from './filterBlocksByTag';
+
+export interface TabsItemProps extends GroupBlockTab {
+  count?: number;
+}
+
+export interface GroupBlockProps extends GroupBlockContent, UniBlockProps {
+  tabs?: TabsItemProps[];
+}
+
+export const GroupBlock = JSX<GroupBlockProps>(
+  ({ className = '', tabs, context, anchor = null, groupBlocks = [] }) => {
+    const [currentTag, setCurrentTag] = context.useState(tabs?.[0]?.tag);
+
+    const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
+
+    const tabsNewMap = tabs?.map((tab) => {
+      const count = tab.tag
+        ? groupBlocks.filter((block) => block?.tags?.includes(`${tab.tag}`)).length
+        : groupBlocks.length;
+
+      return { ...tab, count };
+    });
+
+    return (
+      <section id={anchor} className={`box-border gap-1 h-12 ${className}`}>
+        {tabsNewMap?.length ? (
+          <GroupBlockTabs currentTag={currentTag} onTabClick={setCurrentTag} tabs={tabsNewMap} />
+        ) : null}
+        {groupBlocks.length ? (
+          <div className="list-none">
+            <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/components/GroupBlock/GroupBlockContent.ts

@@ -0,0 +1,23 @@
+import type { GroupBlockDef } from './BlocksTypeProps';
+
+/**
+ *  @title Таб
+ */
+export interface GroupBlockTab {
+  /** @title Название */
+  title?: string;
+  /** @title Tег */
+  tag?: string;
+}
+
+/**
+ * @title Блок-группировки
+ */
+export interface GroupBlockContent {
+  /** @title Блоки */
+  groupBlocks?: GroupBlockDef[];
+  /** @title Табы */
+  tabs?: GroupBlockTab[];
+  /** @title Показывать счетчик блоков во вкладках */
+  isShowCounter?: boolean;
+}

package/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -0,0 +1,54 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { TabsItemProps } from './GroupBlock';
+
+export type TabClickHandler = (tag) => void;
+
+export interface GroupBlockTabsProps {
+  onTabClick: TabClickHandler;
+  currentTag?: string;
+  className?: string;
+  tabs?: TabsItemProps[];
+  isShowCounter?: boolean;
+}
+
+export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
+  const { tabs, currentTag, onTabClick, className = '', isShowCounter = true } = props;
+
+  return (
+    <div className={`mb-2 box-border flex gap-x-1 h-12 ${className}`} role="tablist">
+      {tabs?.map(renderTab(onTabClick, isShowCounter, currentTag))}
+    </div>
+  );
+});
+
+const badgeStyle = 'w-[22px] h-[22px] rounded-full text-m-sm';
+
+const renderTab =
+  (onTabClick: TabClickHandler, isShowCounter: boolean, currentTag?: string) =>
+  (tab: TabsItemProps, i: number) => {
+    const isActive = currentTag === tab.tag;
+    const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
+    const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
+    const counterBlockStyle = `${badgeStyle} 
+      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-text/10 text-secondary-text'}`;
+
+    return (
+      <div
+        key={String(i)}
+        className={`flex h-full w-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`}
+        role="tab"
+        onClick={() => onTabClick(tab.tag)}
+        aria-selected={String(isActive)}
+        tag={tab?.tag}
+      >
+        <div className="flex flex-1 items-center justify-center">
+          {tab?.title ? <h3 className={`mr-8 ${tabText}`}>{tab?.title}</h3> : null}
+          {isShowCounter ? (
+            <div className={`flex items-center justify-center ${counterBlockStyle}`}>
+              <span>{tab.count}</span>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  };

package/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { JSXBlock } from '../../components/ContentPage/ContentPage';
+import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { UniBlockProps } from '../../types';
+import { style2className } from '../../utils/style2className';
+import type { GroupBlockDef } from './BlocksTypeProps';
+import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks';
+import { GroupBlockContent } from './GroupBlockContent';
+
+export interface GroupBlocksProps extends GroupBlockContent, UniBlockProps {}
+
+export const GroupBlocksItem = JSX<GroupBlocksProps>(({ groupBlocks, context }) => {
+  return (
+    <div className={'grid grid-cols-12 gap-2 box-border'}>
+      {groupBlocks?.length ? groupBlocks.map(renderBlock(context)) : null}
+    </div>
+  );
+});
+
+export const renderBlock = (context: ContentPageContext) => (block: GroupBlockDef, i: number) => {
+  const type = block?.blockType;
+  if (!type || !(type in EmbeddableGroupBlocks)) {
+    return null;
+  }
+  const classNameBlock = style2className(block?.style);
+  const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+  return (
+    <EmbeddedBlock key={`block_${i}`} context={context} {...block} className={classNameBlock} />
+  );
+};

package/src/components/GroupBlock/filterBlocksByTag.ts

@@ -0,0 +1,5 @@
+import { GroupBlockDef } from './BlocksTypeProps';
+
+export const filterBlocksByTag = (blocks: GroupBlockDef[], tag?: string) => {
+  return tag ? blocks.filter((block) => block?.tags?.includes(tag)) : blocks;
+};

package/src/components/GroupBlock/renderBlocksTypes.tsx

@@ -0,0 +1,27 @@
+import type { JSXBlock } from '../../components/ContentPage/ContentPage';
+import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { GroupBlockDef } from './BlocksTypeProps';
+import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks';
+import { style2className } from '../../utils/style2className';
+
+type EmbeddableBlocksProps = {
+  groupBlocks?: GroupBlockDef[];
+  context: ContentPageContext;
+  className?: string;
+};
+
+export const renderBlock =
+  ({ context, className }: EmbeddableBlocksProps) =>
+  (block: GroupBlockDef, i: number) => {
+    const type = block?.blockType;
+    if (!type || !(type in EmbeddableGroupBlocks)) {
+      return null;
+    }
+    const classNameBlock = style2className(block?.style);
+    const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+    return (
+      <div className={className} key={`block_${i}`}>
+        <EmbeddedBlock context={context} {...block} className={classNameBlock} />
+      </div>
+    );
+  };

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -14,7 +14,10 @@ export interface BlockItemCommonProps {
    * @title Отображать в раскрытом виде
    */
   isExpanded?: boolean;
-  /** @title Блоки */
+  /**
+   * @title Блоки
+   * @maxItems 10
+   */
   blocks?: BlockDef[];
   columns?: ColumnsCount;
 }
@@ -27,7 +30,6 @@ export interface OtherProductsContent {
   title?: string;
   /**
    * @title Список
-   * @maxItems 10
    */
   blockItems?: BlockItemCommonProps[];
   colorPalette?: ColorPalette;

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

@@ -1,7 +1,7 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
-import { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 const title = 'Кредит до 5 000 000 Р\nбез залога и поручителей';

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -60,7 +60,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             ) : null}
           </BaseTile>
         </div>
-        {image?.src && <Img className="mt-auto" image={image} />}
+        {image?.src && <Img className="mt-[-50px]" image={image} />}
       </div>
     );
   },

package/src/components/ProductGallery/ProductGallery.example.json

@@ -10,14 +10,13 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 234,
-            "height": 234
+            "width": 608,
+            "height": 299
           }
         },
+        "version": "primary",
         "description": "Описание",
-        "isDotted": "true",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
-        "version": "primary"
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
       }
     },
     {
@@ -30,14 +29,13 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 234,
-            "height": 234
+            "width": 608,
+            "height": 299
           }
         },
+        "version": "primary",
         "description": "Описание",
-        "isDotted": "true",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
-        "version": "primary"
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
       }
     }
   ]

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -1,16 +1,16 @@
 import { context } from '../../setup-fixture';
 import { ProductGallery } from './ProductGallery';
 import type { Picture } from '../../model/Picture';
-import type { ProductSlide } from './ProductGalleryContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
-const moneyImage: Picture = {
-  src: 'money-1.png',
+const percentImage: Picture = {
+  src: '3-6-percent.png',
   format: 'webp',
   size: {
-    width: 234,
-    height: 234,
+    width: 338,
+    height: 420,
   },
-  alt: 'Варианты потребительского кредита',
+  alt: 'Ставка от 3,6% годовых',
 };
 
 const worker: Picture = {
@@ -31,113 +31,155 @@ const creditCard: Picture = {
   },
 };
 
-const slides: ProductSlide[] = [
-  {
-    nav: {
-      title: 'Деньги на любые цели',
-      description: 'Ставка от 12,5% годовых на срок до 5 лет',
-    },
-    productBlock: {
-      title: 'Ставка от 12,5% годовых на срок до 5 лет!',
-      headingType: 'h2',
-      items: [
-        'Потребительский кредит по специальной процентной ставке',
-        'Получите деньги без залога и поручительства',
-        'Кредитный лимит до 5 млн рублей',
-      ],
-      buttons: [
-        {
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'primary',
-        },
-      ],
-      version: 'primary',
-      image: moneyImage,
-    },
-  },
-  {
-    nav: {
-      title: 'Для людей в возрасте',
-      description: 'Ставка от 12,5% годовых на срок до 3 лет',
-    },
-    productBlock: {
-      title: 'Ставка от 12,5% годовых на срок до 3 лет!',
-      headingType: 'h2',
-      items: [
-        'Потребительский кредит по специальной процентной ставке',
-        'Получите деньги без залога и поручительства',
-        'Кредитный лимит до 5 млн рублей',
-      ],
-      buttons: [
-        {
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'primary',
-        },
-      ],
-      version: 'secondary',
-      image: worker,
-    },
-  },
+const items = [
+  'Потребительский кредит по специальной процентной ставке',
+  'Получите деньги без залога и поручительства',
+  'Кредитный лимит до 5 млн рублей',
+];
+const buttons: ButtonWithIconProps[] = [
   {
-    nav: {
-      title: 'Выгодно покупать',
-      description: 'Дополнительные бонусные баллы за покупки',
-    },
-    productBlock: {
-      title: 'Дополнительные бонусные баллы за покупки!',
-      headingType: 'h2',
-      items: [
-        'Потребительский кредит по специальной процентной ставке',
-        'Получите деньги без залога и поручительства',
-        'Кредитный лимит до 5 млн рублей',
-      ],
-      buttons: [
-        {
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'primary',
-        },
-      ],
-      version: 'primary',
-      image: creditCard,
-    },
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'primary',
   },
+];
+
+const buttonsSecondary: ButtonWithIconProps[] = [
   {
-    nav: {
-      title: 'Карты Unionpay',
-      description: 'Кэшбэк до 20% у партнеров',
-    },
-    productBlock: {
-      title: 'Карты Unionpay',
-      headingType: 'h2',
-      items: [
-        'Потребительский кредит по специальной процентной ставке',
-        'Получите деньги без залога и поручительства',
-        'Кредитный лимит до 5 млн рублей',
-      ],
-      buttons: [
-        {
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'primary',
-        },
-      ],
-      version: 'secondary',
-      image: creditCard,
-    },
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
   },
 ];
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <ProductGallery className="col-span-12" context={context} slides={slides} />
+      <ProductGallery
+        className="col-span-12"
+        context={context}
+        slides={[
+          {
+            nav: {
+              title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
+            },
+            productBlock: {
+              title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: percentImage,
+            },
+          },
+          {
+            nav: {
+              title: 'Для людей в возрасте',
+              description: 'Ставка до 7% годовых',
+            },
+            productBlock: {
+              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: worker,
+            },
+          },
+          {
+            nav: {
+              title: 'Выгодно покупать',
+              description: 'Ставка от 5% годовых',
+            },
+            productBlock: {
+              title: 'Дополнительные бонусные баллы за покупки!',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: creditCard,
+            },
+          },
+          {
+            nav: {
+              title: 'Карты Unionpay',
+              description: '120 дней льготный период',
+            },
+            productBlock: {
+              title: 'Карты Unionpay',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: creditCard,
+            },
+          },
+        ]}
+      />
+    </div>
+  ),
+  primary: (
+    <div className="container grid grid-cols-12">
+      <ProductGallery
+        className="col-span-12"
+        context={context}
+        version={'secondary'}
+        slides={[
+          {
+            nav: {
+              title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
+            },
+            productBlock: {
+              title: 'Кредит по одному документу',
+              description: 'Кредит наличными без залога и поручительства, только по паспорту',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: percentImage,
+            },
+          },
+          {
+            nav: {
+              title: 'Для людей в возрасте',
+              description: 'Ставка до 7% годовых',
+            },
+            productBlock: {
+              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: worker,
+            },
+          },
+          {
+            nav: {
+              title: 'Выгодно покупать',
+              description: 'Ставка от 5% годовых',
+            },
+            productBlock: {
+              title: 'Дополнительные бонусные баллы за покупки!',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: creditCard,
+            },
+          },
+          {
+            nav: {
+              title: 'Карты Unionpay',
+              description: '120 дней льготный период',
+            },
+            productBlock: {
+              title: 'Карты Unionpay',
+              headingType: 'h2',
+              items,
+              buttons: buttonsSecondary,
+              image: creditCard,
+            },
+          },
+        ]}
+      />
     </div>
   ),
 };