@redneckz/wildless-cms-uni-blocks 0.2.112 → 0.2.115

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -2,35 +2,33 @@ import { context } from '../../setup-fixture';
 
 import { MobileAppTile } from './MobileAppTile';
 
-export default {
-  default: (
-    <div className="container grid grid-cols-12">
-      <MobileAppTile
-        context={context}
-        className="col-span-4"
-        qr={{
-          href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
-          src: 'data:image/png;base64,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',
-        }}
-        buttons={[
-          {
-            aboveText: 'Загрузите в',
-            text: 'App Store',
-            icon: 'AppleIcon',
-            href: '#',
-            asSVG: true,
-            version: 'secondary',
-          },
-          {
-            aboveText: 'Доступно в',
-            text: 'Google Play',
-            icon: 'PlayMarketIcon',
-            href: '#',
-            asSVG: true,
-            version: 'secondary',
-          },
-        ]}
-      />
-    </div>
-  ),
-};
+export default (
+  <div className="container grid grid-cols-12">
+    <MobileAppTile
+      context={context}
+      className="col-span-4"
+      qr={{
+        href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
+        src: 'data:image/png;base64,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',
+      }}
+      buttons={[
+        {
+          aboveText: 'Загрузите в',
+          text: 'App Store',
+          icon: 'AppleIcon',
+          href: '#',
+          asSVG: true,
+          version: 'secondary',
+        },
+        {
+          aboveText: 'Доступно в',
+          text: 'Google Play',
+          icon: 'PlayMarketIcon',
+          href: '#',
+          asSVG: true,
+          version: 'secondary',
+        },
+      ]}
+    />
+  </div>
+);

package/src/components/MobileAppTile/MobileAppTile.mobile.tsx

@@ -0,0 +1,31 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { MobileAppTileContent } from './MobileAppTileContent';
+import type { UniBlockProps } from '../../types';
+
+import { Logo } from '../../ui-kit/Logo/Logo';
+
+export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
+
+export const MobileAppTile = JSX<MobileAppTileProps>(
+  ({ className, title = 'Мобильное приложение', description, href = '#' }) => {
+    return (
+      <div
+        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${
+          className || ''
+        }`}
+      >
+        {href ? (
+          <div className="flex">
+            <div className="flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]">
+              <Logo className="w-[33px]" bgColor="transparent" hideTitle />
+            </div>
+            <a href={href} target="_blank" className="flex flex-col justify-center pl-3">
+              <div className="text-sm font-medium">{title}</div>
+              <div className="text-xs text-secondary-text">{description}</div>
+            </a>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -13,6 +13,10 @@ export interface QRCode {
 /**
  * @title Мобильное приложение
  */
-export interface MobileAppTileContent extends Pick<BaseTileCommonProps, 'title' | 'buttons'> {
+export interface MobileAppTileContent
+  extends Pick<BaseTileCommonProps, 'title' | 'buttons' | 'description'> {
+  // TODO: description для мобильной версии
   qr?: QRCode;
+  /** @title Ссылка */
+  href?: string; // TODO: для мобильной версии
 }

package/src/components/Placeholder/Placeholder.mobile.tsx

@@ -0,0 +1,35 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Tile } from '../Tile/Tile';
+import type { PlaceholderContent } from './PlaceholderContent';
+
+export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
+  className?: string;
+}
+
+const GOLDEN_RATIO = 1.618;
+
+export const Placeholder = JSX<PlaceholderProps>(({ className = '', context, title }) => {
+  return (
+    <Tile
+      className={`pr-0 min-h-0 ${className}`}
+      context={context}
+      title={title}
+      description="Блок в разработке..."
+    >
+      <figure className="m-0">{renderShimmer()}</figure>
+    </Tile>
+  );
+});
+
+const renderShimmer = (size = 3) =>
+  goldenSequence(100, size)
+    .map((_) => Math.floor(_))
+    .map(renderShimmerItem);
+
+const renderShimmerItem = (width = 100, index: number) => (
+  <div key={String(index)} style={{ width: `${width}%` }} className="h-4 mt-2 bg-secondary-light" />
+);
+
+const goldenSequence = (first: number, size: number): number[] =>
+  [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { Picture } from '../../model/Picture';
+import { context } from '../../setup-fixture';
+import { ProductBlock } from './ProductBlock';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  alt: 'Потребительский кредит наличными',
+  size: {
+    width: 280,
+    height: 280,
+  },
+};
+
+export default {
+  primary: (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        title={'Кредит до 5 000 000 Р\nбез залога и поручителей'}
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={[
+          {
+            label: 'До 5 млн ₽',
+            description: 'Кредитный лимит',
+            icon: 'EmptyWalletIcon',
+          },
+          {
+            label: 'От 16,9%',
+            description: 'Ставка по кредиту',
+            icon: 'PercentageSquareIcon',
+          },
+          {
+            label: 'До 5 лет',
+            description: 'Срок кредитования',
+            icon: 'CalendarIcon',
+          },
+        ]}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Оформить карту',
+            target: '_blank',
+            version: 'primary',
+          },
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={image}
+      />
+    </div>
+  ),
+};

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

@@ -1,6 +1,6 @@
-import { context } from '../../setup-fixture';
-
+import React from 'react';
 import type { Picture } from '../../model/Picture';
+import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
 
 const image: Picture = {

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

@@ -7,13 +7,11 @@ export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
 export const ProductBlock = JSX<ProductBlockProps>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ({ titleSize, image, benefits, ...props } /* Get rid of image and benefits */) => {
+  (props /* Get rid of image and benefits */) => {
     const { className } = props;
     return (
-      <section
-        className={`font-sans bg-white pt-10 pl-[50px] pb-[50px] pr-[7.5rem] ${className || ''}`}
-      >
-        <ProductBlockInner {...props} titleSize="L" />
+      <section className={`font-sans bg-white px-4 py-6 ${className || ''}`}>
+        <ProductBlockInner {...props} />
       </section>
     );
   },

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

@@ -0,0 +1,49 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
+import { renderBenefit } from './renderBenefit';
+
+export interface ProductBlockInnerProps extends ProductBlockInnerCommonProps, UniBlockProps {}
+
+export const ProductBlockInner = JSX<ProductBlockInnerProps>(
+  ({
+    className,
+    context,
+    title,
+    titleSize,
+    description,
+    benefits,
+    buttons,
+    image,
+    items,
+    version = 'primary',
+  }) => {
+    return (
+      <div className={`${className || ''}`}>
+        <div>
+          <BaseTile
+            context={context}
+            title={title}
+            titleSize={titleSize || 'XL'}
+            description={description}
+            items={items}
+            buttons={buttons}
+          >
+            {benefits?.length ? (
+              <div className="mt-[19px]">
+                {benefits.map((_, i) => renderBenefit(_, i, version))}
+              </div>
+            ) : null}
+          </BaseTile>
+        </div>
+        {image?.src && (
+          <div className="mt-5">
+            <Img image={{ className: 'block', ...image }} />
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -1,27 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img';
 import { BaseTile } from '../BaseTile/BaseTile';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
+import { renderBenefit } from './renderBenefit';
 
 export interface ProductBlockInnerProps extends ProductBlockInnerCommonProps, UniBlockProps {}
 
-const benefitIconBgStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-main',
-  secondary: 'bg-white/30',
-};
-const benefitTitleStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-};
-const benefitDescStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white',
-};
-
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({
     className,
@@ -59,28 +44,3 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     );
   },
 );
-
-function renderBenefit(benefit: Benefit, i: number, version: string) {
-  return (
-    <div key={String(i)} className="flex gap-4 items-center">
-      {benefit.icon && (
-        <Icon
-          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`}
-          name={benefit.icon}
-          width="24"
-          height="24"
-        />
-      )}
-      <div className="flex gap-1 flex-col h-full max-w-[149px]">
-        <h4 className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
-          {benefit.label}
-        </h4>
-        {benefit.description && (
-          <div className={`font-normal text-sm ${benefitDescStyleMap[version]}`}>
-            {benefit.description}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -0,0 +1,35 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+const benefitTitleStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+};
+const benefitDescStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
+export function renderBenefit(benefit: Benefit, i: number, version: string) {
+  return (
+    <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
+      {benefit.icon && (
+        <Icon
+          className="w-[25px] h-[25px] rounded-full box-border"
+          name={benefit.icon}
+          width="24"
+          height="24"
+        />
+      )}
+      <h4 className={`font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`}>
+        {benefit.label}
+      </h4>
+      {benefit.description && (
+        <div className={`font-normal text-m-sm ${benefitDescStyleMap[version]}`}>
+          {benefit.description}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ProductBlock/renderBenefit.tsx

@@ -0,0 +1,41 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+const benefitIconBgStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-main',
+  secondary: 'bg-white/30',
+};
+const benefitTitleStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+};
+const benefitDescStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
+export function renderBenefit(benefit: Benefit, i: number, version: string) {
+  return (
+    <div key={String(i)} className="flex gap-4 items-center">
+      {benefit.icon && (
+        <Icon
+          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`}
+          name={benefit.icon}
+          width="24"
+          height="24"
+        />
+      )}
+      <div className="flex gap-1 flex-col h-full max-w-[149px]">
+        <h4 className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
+          {benefit.label}
+        </h4>
+        {benefit.description && (
+          <div className={`font-normal text-sm ${benefitDescStyleMap[version]}`}>
+            {benefit.description}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,127 @@
+import React from 'react';
+import type { Picture } from '../../model/Picture';
+import { context } from '../../setup-fixture';
+import { ProductGallery } from './ProductGallery';
+
+const moneyImage: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 280,
+    height: 280,
+  },
+  alt: 'Варианты потребительского кредита',
+};
+
+const worker: Picture = {
+  src: 'money-2.png',
+  format: 'webp',
+  size: {
+    width: 280,
+    height: 280,
+  },
+};
+
+const creditCard: Picture = {
+  src: 'credit-card-1.png',
+  format: 'webp',
+  size: {
+    width: 280,
+    height: 280,
+  },
+};
+
+export default {
+  primary: (
+    <div className="p-2">
+      <div className="container grid grid-cols-12">
+        <ProductGallery
+          className="col-span-12"
+          context={context}
+          slides={[
+            {
+              productBlock: {
+                title: 'Акция «Кредит на все, что хочется!»',
+                items: [
+                  'Потребительский кредит по специальной процентной ставке',
+                  'Получите деньги без залога и поручительства',
+                  'Кредитный лимит до 5 млн рублей',
+                ],
+                buttons: [
+                  {
+                    href: 'https://rshb.ru',
+                    text: 'Подробнее',
+                    target: '_blank',
+                    version: 'primary',
+                  },
+                ],
+                image: moneyImage,
+              },
+            },
+            {
+              productBlock: {
+                title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+                items: [
+                  'Потребительский кредит по специальной процентной ставке',
+                  'Получите деньги без залога и поручительства',
+                  'Кредитный лимит до 5 млн рублей',
+                ],
+                buttons: [
+                  {
+                    href: 'https://rshb.ru',
+                    text: 'Подробнее',
+                    target: '_blank',
+                    version: 'primary',
+                  },
+                ],
+                image: worker,
+              },
+            },
+            {
+              nav: {
+                title: 'Выгодно покупать',
+                desc: 'Дополнительные бонусные баллы за покупки',
+              },
+              productBlock: {
+                title: 'Дополнительные бонусные баллы за покупки!',
+                items: [
+                  'Потребительский кредит по специальной процентной ставке',
+                  'Получите деньги без залога и поручительства',
+                  'Кредитный лимит до 5 млн рублей',
+                ],
+                buttons: [
+                  {
+                    href: 'https://rshb.ru',
+                    text: 'Подробнее',
+                    target: '_blank',
+                    version: 'primary',
+                  },
+                ],
+                image: creditCard,
+              },
+            },
+            {
+              productBlock: {
+                title: 'Карты Unionpay',
+                items: [
+                  'Потребительский кредит по специальной процентной ставке',
+                  'Получите деньги без залога и поручительства',
+                  'Кредитный лимит до 5 млн рублей',
+                ],
+                buttons: [
+                  {
+                    href: 'https://rshb.ru',
+                    text: 'Подробнее',
+                    target: '_blank',
+                    version: 'primary',
+                  },
+                ],
+                image: creditCard,
+              },
+            },
+          ]}
+        />
+      </div>
+    </div>
+  ),
+};

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { context } from '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
@@ -43,7 +44,7 @@ export default (
             desc: 'Ставка от 12,5% годовых на срок до 5 лет',
           },
           productBlock: {
-            title: 'Ставка от 12,5% годовых на срок до 5 лет!»',
+            title: 'Ставка от 12,5% годовых на срок до 5 лет!',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',
@@ -66,7 +67,7 @@ export default (
             desc: 'Ставка от 12,5% годовых на срок до 3 лет',
           },
           productBlock: {
-            title: 'Ставка от 12,5% годовых на срок до 3 лет!»',
+            title: 'Ставка от 12,5% годовых на срок до 3 лет!',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',
@@ -89,7 +90,7 @@ export default (
             desc: 'Дополнительные бонусные баллы за покупки',
           },
           productBlock: {
-            title: 'Дополнительные бонусные баллы за покупки!»',
+            title: 'Дополнительные бонусные баллы за покупки!',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',
@@ -112,7 +113,7 @@ export default (
             desc: 'Кэшбэк до 20% у партнеров',
           },
           productBlock: {
-            title: 'Карты Unionpay»',
+            title: 'Карты Unionpay',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',

package/src/components/ProductGallery/ProductGallery.mobile.tsx

@@ -0,0 +1,56 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { ProductGalleryBlock } from './ProductGalleryBlock';
+import type { ProductGalleryContent } from './ProductGalleryContent';
+
+export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
+
+export const ProductGallery = JSX<ProductGalleryProps>(
+  ({ className, context, duration = 0, slides = [] }) => {
+    const galleryBlocks = slides.map((s) => s.productBlock);
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+
+    return (
+      <section className={`font-sans bg-white overflow-hidden w-100 ${className || ''}`}>
+        <div
+          className={`flex duration-1000`}
+          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          role="list"
+        >
+          {galleryBlocks.map((block, i) => (
+            <ProductGalleryBlock key={String(i)} block={block} context={context} />
+          ))}
+        </div>
+
+        <div className="flex px-4 py-6">
+          {slides.map((_, i) =>
+            renderNavButton({
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+              duration,
+            }),
+          )}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderNavButton({ i, activeSlideIndex, onClick, duration }) {
+  const isActiveBtn = i === activeSlideIndex;
+  const progressBarClassName = isActiveBtn ? 'animate-slide bg-primary-main' : 'bg-main-divider';
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      className={`relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`}
+    >
+      <div
+        className={`absolute bottom-0 left-0 w-full h-[3px] ${progressBarClassName}`}
+        style={{ animationDuration: `${duration}s`, animationFillMode: 'forwards' }}
+      ></div>
+    </button>
+  );
+}