@redneckz/wildless-cms-uni-blocks 0.2.111 → 0.2.114

package/mobile/src/components/PictureText/PictureText.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { PictureTextContent } from './PictureTextContent';
+
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img';
+import { Title } from '../../ui-kit/Title/Title';
+import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
+
+export const PictureText = JSX<PictureTextProps>(({ className, title, image, benefits }) => {
+  return (
+    <section className={`relative font-sans text-primary-text bg-white p-14 ${className}`}>
+      <Title className="font-medium m-0 text-center">{title}</Title>
+      <div className={'flex justify-center mt-9'}>
+        {image?.src && <Img className="mr-6" image={image} />}
+        {benefits?.length ? (
+          <div className="flex flex-col">{benefits.map(renderBenefit)}</div>
+        ) : null}
+      </div>
+    </section>
+  );
+});
+
+function renderBenefit(benefit: Benefit, i: number) {
+  return (
+    <div key={String(i)} className="flex flex-row mb-8">
+      {benefit.icon && (
+        <Icon
+          className="w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]"
+          name={benefit.icon}
+          width="48"
+          height="48"
+        />
+      )}
+      <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
+        {benefit.label && (
+          <div className="font-medium text-primary-text text-xl m-0">{benefit.label}</div>
+        )}
+        {benefit.description && (
+          <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/mobile/src/components/PictureText/PictureTextContent.ts

@@ -0,0 +1,10 @@
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+/**
+ * @title Картинка с текстом
+ */
+export interface PictureTextContent extends Pick<BaseTileCommonProps, 'title' | 'image'> {
+  /** @title Список преимуществ */
+  benefits?: Benefit[];
+}

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

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
+import { Tile } from '../Tile/Tile';
+import type { UniBlockProps } from '../../types';
+
+export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
+  className?: string;
+}
+
+const GOLDEN_RATIO = 1.618;
+
+export const Placeholder = JSX<PlaceholderProps>(({ className, context, title }) => {
+  return (
+    <Tile className={className} context={context} title={title} description="Блок в разработке...">
+      <figure className="m-0 min-w-[600px]">{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/mobile/src/components/Placeholder/PlaceholderContent.ts

@@ -0,0 +1,6 @@
+/**
+ * @hidden
+ */
+export interface PlaceholderContent {
+  title?: string;
+}

package/mobile/src/components/ProductBlock/ProductBlock.example.json

@@ -0,0 +1,17 @@
+{
+  "title": "Продукт",
+  "description": "Описание",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 300
+    }
+  },
+  "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+  "buttons": [
+    {
+      "text": "Кнопка",
+      "version": "secondary"
+    }
+  ]
+}

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

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { ProductBlockContent } from './ProductBlockContent';
+import { ProductBlockInner } from './ProductBlockInner';
+
+export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
+
+export const ProductBlock = JSX<ProductBlockProps>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (props /* Get rid of image and benefits */) => {
+    const { className } = props;
+    return (
+      <section className={`font-sans bg-white px-4 py-6 ${className || ''}`}>
+        <ProductBlockInner {...props} />
+      </section>
+    );
+  },
+);

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -0,0 +1,28 @@
+import type { LinkProps } from '../../model/LinkProps';
+import type { TitleSize } from '../../ui-kit/Title/TitleProps';
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+export interface ProductBlockInnerCommonProps
+  extends Omit<BaseTileCommonProps, 'align' | 'titleSize'> {
+  /**
+   * @title Размер заголовка
+   * @default M
+   * @hidden
+   */
+  titleSize?: TitleSize;
+  /**
+   * @title Преимущества
+   * @minItems 2
+   * @maxItems 3
+   */
+  benefits?: Benefit[];
+}
+
+/**
+ * @title Продуктовый блок
+ */
+export interface ProductBlockContent extends ProductBlockInnerCommonProps {
+  /** @title Хлебные крошки */
+  breadcrumbs?: LinkProps[];
+}

package/mobile/src/components/ProductBlock/ProductBlockInner.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/mobile/src/components/ProductBlock/renderBenefit.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/mobile/src/components/ProductGallery/ProductGallery.example.json

@@ -0,0 +1,21 @@
+{
+  "slides": [
+    {
+      "nav": {
+        "title": "Заголовок",
+        "desc": "Описание"
+      },
+      "productBlock": {
+        "title": "Продуктовая галерея",
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 280
+          }
+        },
+        "description": "Описание",
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      }
+    }
+  ]
+}

package/mobile/src/components/ProductGallery/ProductGallery.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>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { TitleSize } from '../../ui-kit/Title/TitleProps';
+import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+
+export interface ProductGalleryBlockProps extends UniBlockProps {
+  titleSize?: TitleSize;
+  block?: ProductBlockInnerCommonProps;
+}
+
+export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
+  ({ block, titleSize, context }) => {
+    return (
+      <section className="flex grow-0 shrink-0 basis-full px-4 py-6" role="listitem">
+        <div className="flex grow">
+          <ProductBlockInner context={context} titleSize={titleSize} {...block} />
+        </div>
+      </section>
+    );
+  },
+);

package/mobile/src/components/ProductGallery/ProductGalleryContent.ts

@@ -0,0 +1,32 @@
+import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+
+/** @title Кнопка под слайдом */
+interface ProductGalleryNav {
+  /** @title Заголовок */
+  title: string;
+  /** @title Описание */
+  desc: string;
+}
+
+/**
+ * @title Слайд
+ */
+export interface ProductSlide {
+  /** @title Превью содержимого слайда на навигации */
+  nav?: ProductGalleryNav;
+  /** @title Содержимое слайда */
+  productBlock: ProductBlockInnerCommonProps;
+}
+
+/**
+ * @title Продуктовая галерея
+ */
+export interface ProductGalleryContent {
+  /**
+   * @title Задержка
+   * @hidden //! temporary not used
+   */
+  duration?: number;
+  /** @title Слайды */
+  slides?: ProductSlide[];
+}

package/mobile/src/components/ProductTile/ProductTile.example.json

@@ -0,0 +1,30 @@
+{
+  "title": "Продуктовая плитка",
+  "description": "Описание",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 300
+    }
+  },
+  "benefits": [
+    {
+      "label": "Преимущество 1",
+      "description": "Описание"
+    },
+    {
+      "label": "Преимущество 2",
+      "description": "Описание"
+    },
+    {
+      "label": "Преимущество 3",
+      "description": "Описание"
+    }
+  ],
+  "buttons": [
+    {
+      "text": "Кнопка",
+      "version": "primary"
+    }
+  ]
+}

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { Tile } from '../Tile/Tile';
+import type { ProductTileContent } from './ProductTileContent';
+
+export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
+
+export const ProductTile = JSX<ProductTileProps>((props) => {
+  const { benefits, version } = props;
+  return (
+    <Tile {...props}>
+      <div className="flex mt-5 mb-1">
+        {benefits?.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}
+        {benefits?.length ? (
+          <div className="pt-1">
+            {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
+          </div>
+        ) : null}
+      </div>
+    </Tile>
+  );
+});
+
+function renderBenefitLabel(benefit: Benefit, i: number) {
+  return (
+    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
+      {benefit.label}
+    </div>
+  );
+}
+
+function renderBenefitDescription(benefit: Benefit, i: number, version = 'primary') {
+  const labelStyleMap: Record<BlockVersion, string> = {
+    primary: 'text-secondary-text',
+    secondary: 'text-white',
+  };
+  return (
+    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+      {benefit.description}
+    </div>
+  );
+}

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -0,0 +1,13 @@
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+/**
+ * @title Продуктовая плитка
+ */
+export interface ProductTileContent extends Omit<BaseTileCommonProps, 'align'> {
+  /**
+   * @title Преимущества
+   * @maxItems 7
+   */
+  benefits?: Omit<Benefit, 'icon'>[];
+}

package/mobile/src/components/PromoTile/PromoTile.example.json

@@ -0,0 +1,13 @@
+{
+  "title": "Акции и спецпредложения",
+  "date": "2022-04-16",
+  "description": "Пенсионный кредит по специальной процентной ставке",
+  "buttons": [
+    {
+      "text": "Все акции",
+      "href": "/credits",
+      "version": "secondary"
+    }
+  ],
+  "version": "secondary"
+}

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Tile } from '../Tile/Tile';
+import type { PromoTileContent } from './PromoTileContent';
+
+export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
+
+export const PromoTile = JSX<PromoTileProps>(
+  ({
+    className,
+    context,
+    title = 'Акции и спецпредложения',
+    date,
+    description,
+    buttons = [],
+    version,
+  }) => {
+    return (
+      <Tile
+        className={className}
+        context={context}
+        title={title}
+        buttons={buttons}
+        version={version}
+      >
+        <div className="mt-1.5">
+          {date && <div className="text-sm mb-2">{formatDate(date)}</div>}
+          <div className="text-base">{description}</div>
+        </div>
+      </Tile>
+    );
+  },
+);
+
+function formatDate(date: string) {
+  const dateObj = new Date(date);
+  const dateFormat: Intl.DateTimeFormatOptions = {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  };
+  return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
+}

package/mobile/src/components/PromoTile/PromoTileContent.ts

@@ -0,0 +1,9 @@
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+
+/**
+ * @title Акции
+ */
+export interface PromoTileContent extends BaseTileCommonProps {
+  /** @title Дата публикации */
+  date?: string;
+}

package/mobile/src/components/StepsBlock/StepsBlock.example.json

@@ -0,0 +1,20 @@
+{
+  "title": "Шаги",
+  "description": "Описание",
+  "showLines": true,
+  "steps": [
+    {
+      "label": "Шаг №1",
+      "description": "Описание шага №1",
+      "icon": "NewDocIcon"
+    },
+    {
+      "label": "Шаг №2",
+      "icon": "PassSendIcon"
+    },
+    {
+      "description": "Шаг №3 без заголовка",
+      "icon": "ActualBalanceIcon"
+    }
+  ]
+}

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -0,0 +1,93 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { SizeVersion } from '../../model/SizeVersion';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Title } from '../../ui-kit/Title/Title';
+import type { Step, StepsBlockContent } from './StepsBlockContent';
+
+export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+
+export const StepsBlock = JSX<StepsBlockProps>(
+  ({ className, title, description, steps, size = 'normal' }) => {
+    return (
+      <section
+        className={`box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${
+          className || ''
+        }`}
+      >
+        {title && (
+          <Title size="M" className="font-medium m-0 text-center">
+            {title}
+          </Title>
+        )}
+        {description && <p className={`text-m-md text-center ${title && 'mt-2'}`}>{description}</p>}
+        {steps?.length ? (
+          <div className={`box-border py-0.5 mb-0.5 mt-5`}>
+            <div className="flex flex-col justify-between gap-x-[101px]">
+              {steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length }))}
+            </div>
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);
+
+interface RenderStepTitleParams {
+  step: Step;
+  size: SizeVersion;
+  i: number;
+  length: number;
+}
+
+const renderStepTitle = (params: RenderStepTitleParams) => {
+  const { step, size, i, length } = params;
+
+  const isLastStep = length - 1 === i;
+  const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
+
+  return (
+    <div key={String(i)}>
+      <div key={String(i)} className="flex flex-row text-center relative">
+        <div>
+          {renderIconArea(step, size, i)}
+          {!isLastStep && <div className={`min-h-8 h-full w-[2px] bg-secondary-light ${margin}`} />}
+        </div>
+        <div className="flex flex-col justify-center relative">
+          {step.label && (
+            <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
+          )}
+          {step.description && (
+            <div
+              className={`font-normal text-sm text-secondary-text text-left ${
+                step.label ? 'mt-1' : ''
+              }`}
+            >
+              {step.description}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const renderIconArea = (step: Step, size: SizeVersion, i: number) => {
+  const iconAreaSize =
+    size === 'normal'
+      ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
+      : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
+
+  const iconSize = size === 'normal' ? '38' : '27';
+  const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
+
+  return (
+    <div
+      className={`${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`}
+    >
+      <span className={`font-medium text-secondary-text self-center ${iconTextSize}`}>
+        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} />) || i + 1}
+      </span>
+    </div>
+  );
+};