@redneckz/wildless-cms-uni-blocks 0.2.44 → 0.2.47

package/src/ProductBlockInner.tsx

@@ -0,0 +1,110 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { EmptyWalletIcon, PercentageSquareIcon, CalendarIcon } from './Icons/index';
+import { Img } from './Img';
+import type { Picture, UniBlockProps, Benefit } from './types';
+import { BlockItem } from './ui-kit/BlockItem';
+import type { ButtonProps } from './ui-kit/Button';
+import { Button } from './ui-kit/Button';
+import { Breadcrumb, BreadcrumbProps } from './ui-kit/Breadcrumb';
+import { useLink } from './useLink';
+
+const ICONS = { EmptyWalletIcon, PercentageSquareIcon, CalendarIcon };
+
+export interface ProductBlockInnerContent {
+  title?: string;
+  description?: string;
+  breadcrumbs?: BreadcrumbProps[];
+  image?: Picture;
+  benefits?: Benefit[];
+  items?: string[];
+  buttons?: ButtonProps[];
+}
+
+export interface ProductBlockInnerProps extends ProductBlockInnerContent, UniBlockProps {}
+
+export const ProductBlockInner = JSX<ProductBlockInnerProps>(
+  ({ className, context, title, description, breadcrumbs, benefits, buttons, image, items }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+
+    return (
+      <div className={`font-sans flex justify-between items-stretch ${className || ''}`}>
+        <div className="flex flex-col">
+          {breadcrumbs?.length ? (
+            <div className="text-xs mb-6">
+              {join(<span className="text-secondary-text mx-2">/</span>)(
+                breadcrumbs.map((breadcrumb, i) => (
+                  <Breadcrumb
+                    key={String(i)}
+                    {...useLink(
+                      { router, handlerDecorator },
+                      { className: 'text-secondary-text', ...breadcrumb },
+                    )}
+                  />
+                )),
+              )}
+            </div>
+          ) : null}
+          {title && (
+            <h1 className="font-medium text-title-lg m-0 whitespace-pre-wrap max-w-[600px]">
+              {title}
+            </h1>
+          )}
+          {description && (
+            <div className="font-normal text-base max-w-[600px] mt-4">{description}</div>
+          )}
+          {benefits?.length ? (
+            <div className="flex gap-6 mt-7">{benefits.map(renderBenefit)}</div>
+          ) : null}
+          {items?.length ? (
+            <section className="space-y-2.5 mt-5" role="list">
+              {items.map((_, i) => (
+                <BlockItem key={String(i)} text={_} />
+              ))}
+            </section>
+          ) : null}
+          {buttons?.length ? (
+            <div className="flex mt-auto gap-4">
+              {buttons.map((button, index) =>
+                renderButton(useLink({ router, handlerDecorator }, button), index),
+              )}
+            </div>
+          ) : null}
+        </div>
+        {image?.src && <Img image={image} className="mt-auto" />}
+      </div>
+    );
+  },
+);
+
+function renderBenefit(benefit: Benefit, i: number) {
+  return (
+    <div key={String(i)} className="flex gap-4 items-center">
+      {benefit.icon && (
+        <div className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] bg-main rounded-full p-[10px] box-border">
+          {ICONS[benefit.icon as keyof typeof ICONS]?.()}
+        </div>
+      )}
+      <div className="flex gap-1 flex-col h-full">
+        <h4 className="font-medium text-xl m-0">{benefit.label}</h4>
+        {benefit.description && (
+          <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function renderButton(button: ButtonProps, i: number) {
+  return button?.text ? (
+    <Button key={String(i)} {...button} className="mt-8" version={button.version} />
+  ) : null;
+}
+
+function join<E>(sep: E): (list: E[]) => E[] {
+  return (list) =>
+    list.reduce(
+      (acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]),
+      [] as E[],
+    );
+}

package/src/ProductGallery.fixture.tsx

@@ -0,0 +1,138 @@
+import { context } from './setup-fixture';
+
+import { ProductGallery } from './ProductGallery';
+import { Picture } from './types';
+
+const moneyImage: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 300,
+    height: 300,
+  },
+};
+
+const worker: Picture = {
+  src: 'worker.png',
+  format: 'webp',
+  size: {
+    width: 300,
+    height: 300,
+  },
+};
+
+const creditCard: Picture = {
+  src: 'credit-card-1.png',
+  format: 'webp',
+  size: {
+    width: 300,
+    height: 300,
+  },
+};
+
+export default (
+  <ProductGallery
+    context={context}
+    slides={[
+      {
+        nav: {
+          title: 'Деньги на любые цели',
+          desc: 'Ставка от 12,5% годовых на срок до 5 лет',
+        },
+        productBlock: {
+          title: 'Ставка от 12,5% годовых на срок до 5 лет!»',
+          description:
+            'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
+          items: [
+            'Потребительский кредит по специальной процентной ставке',
+            'Получите деньги без залога и поручительства',
+            'Кредитный лимит до 5 млн рублей',
+          ],
+          buttons: [
+            {
+              href: 'https://rshb.ru',
+              text: 'Подробнее',
+              target: '_blank',
+              version: 'primary',
+            },
+          ],
+          image: moneyImage,
+        },
+      },
+      {
+        nav: {
+          title: 'Для людей в возрасте',
+          desc: 'Ставка от 12,5% годовых на срок до 3 лет',
+        },
+        productBlock: {
+          title: 'Ставка от 12,5% годовых на срок до 3 лет!»',
+          description:
+            'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
+          items: [
+            'Потребительский кредит по специальной процентной ставке',
+            'Получите деньги без залога и поручительства',
+            'Кредитный лимит до 5 млн рублей',
+          ],
+          buttons: [
+            {
+              href: 'https://rshb.ru',
+              text: 'Подробнее',
+              target: '_blank',
+              version: 'primary',
+            },
+          ],
+          image: worker,
+        },
+      },
+      {
+        nav: {
+          title: 'Выгодно покупать',
+          desc: 'Дополнительные бонусные баллы за покупки',
+        },
+        productBlock: {
+          title: 'Дополнительные бонусные баллы за покупки!»',
+          description:
+            'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
+          items: [
+            'Потребительский кредит по специальной процентной ставке',
+            'Получите деньги без залога и поручительства',
+            'Кредитный лимит до 5 млн рублей',
+          ],
+          buttons: [
+            {
+              href: 'https://rshb.ru',
+              text: 'Подробнее',
+              target: '_blank',
+              version: 'primary',
+            },
+          ],
+          image: creditCard,
+        },
+      },
+      {
+        nav: {
+          title: 'Карты Unionpay',
+          desc: 'Кэшбэк до 20% у партнеров',
+        },
+        productBlock: {
+          title: 'Карты Unionpay»',
+          description: 'Кэшбэк до 20% у партнеров',
+          items: [
+            'Потребительский кредит по специальной процентной ставке',
+            'Получите деньги без залога и поручительства',
+            'Кредитный лимит до 5 млн рублей',
+          ],
+          buttons: [
+            {
+              href: 'https://rshb.ru',
+              text: 'Подробнее',
+              target: '_blank',
+              version: 'primary',
+            },
+          ],
+          image: creditCard,
+        },
+      },
+    ]}
+  />
+);

package/src/ProductGallery.tsx

@@ -0,0 +1,90 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ProductBlockInnerContent } from './ProductBlockInner';
+import { ProductBlockInner } from './ProductBlockInner';
+import type { UniBlockProps } from './types';
+
+interface ProductGalleryNav {
+  title: string;
+  desc: string;
+}
+
+export interface ProductSlideContent {
+  nav: ProductGalleryNav;
+  productBlock: ProductBlockInnerContent;
+}
+
+export interface ProductGalleryContent {
+  duration?: number;
+  slides?: ProductSlideContent[];
+}
+
+export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
+
+export const ProductGallery = JSX<ProductGalleryProps>(
+  ({ className, context, duration = 0, slides = [] }) => {
+    const galleryNav = slides.map((s) => s.nav);
+    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 transition duration-1000`}
+          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          role="list"
+        >
+          {galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
+        </div>
+
+        <div
+          className={`border-0 border-t border-solid border-main-divider grid grid-cols-${galleryNav.length}`}
+        >
+          {galleryNav.map((slide, i) =>
+            renderNavButton({
+              slide,
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+              duration,
+            }),
+          )}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
+  return (
+    <section key={String(i)} className="grow-0 shrink-0 basis-full" role="listitem">
+      <div className="p-11 pr-[7.5rem] ">
+        <ProductBlockInner context={context} {...block} />
+      </div>
+    </section>
+  );
+}
+
+function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
+  const isActiveBtn = i === activeSlideIndex;
+  const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
+  const btnTitleClassName = isActiveBtn ? 'text-primary-text' : 'text-secondary-text';
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      className={`group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 py-4`}
+    >
+      <div className="border-0 border-r border-solid border-main-divider px-6">
+        <div className={`text-sm font-medium group-hover:text-primary-text ${btnTitleClassName}`}>
+          {slide?.title}
+        </div>
+        <div className="text-xs text-secondary-text">{slide.desc}</div>
+      </div>
+      <div
+        className={`absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`}
+        style={{ animationDuration: `${duration}s` }}
+      ></div>
+    </button>
+  );
+}

package/src/ProjectSettings.ts

@@ -0,0 +1,38 @@
+export interface ProjectSettings {
+  TEST_BRANCH?: string;
+  RC_BRANCH?: string;
+  PROD_BRANCH: string;
+  FORCED_DRAFT_FLOW: boolean;
+  ENABLE_ASSIST?: boolean;
+  SITEMAP?: string;
+}
+
+export const projectSettings = new (class implements ProjectSettings {
+  _: ProjectSettings = {
+    PROD_BRANCH: 'master',
+    FORCED_DRAFT_FLOW: false,
+  };
+
+  setup(_: ProjectSettings) {
+    this._ = _;
+  }
+
+  get TEST_BRANCH() {
+    return this._.TEST_BRANCH;
+  }
+  get RC_BRANCH() {
+    return this._.RC_BRANCH;
+  }
+  get PROD_BRANCH() {
+    return this._.PROD_BRANCH;
+  }
+  get FORCED_DRAFT_FLOW() {
+    return this._.FORCED_DRAFT_FLOW;
+  }
+  get ENABLE_ASSIST() {
+    return this._.ENABLE_ASSIST;
+  }
+  get SITEMAP() {
+    return this._.SITEMAP;
+  }
+})();

package/src/StepsBlock.fixture.tsx

@@ -0,0 +1,23 @@
+import { context } from './setup-fixture';
+import { StepsBlock } from './StepsBlock';
+
+export default (
+  <StepsBlock
+    context={context}
+    title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+    steps={[
+      {
+        label: 'Заявка на кредит',
+        description: 'Оставьте онлайн-заявку на потребительский кредит',
+      },
+      {
+        label: 'В случае одобрения',
+        description: 'Менеджер свяжется с вами и согласует встречу',
+      },
+      {
+        label: 'Получение наличных',
+        description: 'Получите наличные в отделении банка',
+      },
+    ]}
+  />
+);

package/src/StepsBlock.tsx

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { NewDocIcon, PassSendIcon, ActualBalanceIcon } from './Icons/index';
+import type { UniBlockProps } from './types';
+
+const ICONS = { NewDocIcon, PassSendIcon, ActualBalanceIcon };
+export interface Step {
+  label: string;
+  description?: string;
+  icon?: keyof typeof ICONS;
+}
+
+export interface StepsBlockContent {
+  title?: string;
+  steps?: Step[];
+}
+
+export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+
+export const StepsBlock = JSX<StepsBlockProps>(({ className, title, steps }) => {
+  return (
+    <section
+      className={`font-sans text-primary-text bg-white px-12 py-12 flex flex-col items-center ${
+        className || ''
+      }`}
+    >
+      <h2 className="font-medium text-title m-0 max-w-[47rem] text-center">{title}</h2>
+      {steps?.length ? <div className="flex mt-9">{steps.map(renderStep)}</div> : null}
+    </section>
+  );
+});
+
+const renderStep = (step: Step, i: number) => {
+  return (
+    <div
+      key={String(i)}
+      className="flex flex-col items-center text-center px-12 relative after:content-[''] last:after:content-none after:bg-secondary-light after:absolute after:top-[50px] after:h-0.5 after:w-full after:right-[-50%]"
+    >
+      <div className="h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10">
+        {(step.icon && ICONS[step.icon]?.({ width: 48, height: 48 })) || (
+          <span className="font-medium text-title-sm text-secondary-text">{i + 1}</span>
+        )}
+      </div>
+      <div className="max-w-min">
+        <h5 className="font-medium text-xl m-0 mt-4 whitespace-nowrap px-3">{step.label}</h5>
+        {step.description && (
+          <div className="font-normal text-sm text-secondary-text mt-2">{step.description}</div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/Tile.fixture.tsx

@@ -0,0 +1,124 @@
+import { context } from './setup-fixture';
+
+import { Tile } from './Tile';
+import { Picture } from './types';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+};
+
+const image2: Picture = {
+  src: 'credit-card-1.png',
+  format: 'webp',
+};
+
+const image3: Picture = {
+  src: 'column-1.png',
+  format: 'webp',
+};
+
+const image4: Picture = {
+  src: 'globe-1.png',
+  format: 'webp',
+};
+
+export default {
+  credit: (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        className="col-span-8"
+        title="Кредиты"
+        items={[
+          'Кредитный лимит до 10 млн ₽',
+          'Кредиты наличными на любые цели',
+          'Получите деньги без залога и поручителей',
+        ]}
+        button={{
+          text: 'Подробнее',
+          href: '/credit-cards',
+          version: 'secondary',
+        }}
+        image={image}
+      />
+    </div>
+  ),
+  mortgage: (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        version="secondary"
+        className="col-span-4"
+        title="Ипотека"
+        description={
+          'Широкий выбор ипотечных программ с государственной поддержкой. Специальные предложения от 12,2 %'
+        }
+        button={{
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'secondary',
+        }}
+      />
+    </div>
+  ),
+  'credit-card': (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        className="col-span-6"
+        title="Банковские пластиковые карты"
+        items={['Счета в разных валютах', 'Бесплатное обслуживание', 'Кэшбэк до 15% от покупок']}
+        button={{
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'secondary',
+        }}
+        image={image2}
+      />
+    </div>
+  ),
+  premium: (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        className="col-span-6"
+        title="Премиальные продукты"
+        description={
+          'Выделенные зоны обслуживания и персональный финансовый консультант. Полный спектр премиальных продуктов, подчеркивающих ваш статус'
+        }
+        button={{
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'secondary',
+        }}
+        image={image3}
+      />
+    </div>
+  ),
+  ecosystem: (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        className="col-span-12 pr-28"
+        title="Экосистема «СВОЕ», созданная для людей"
+        items={[
+          'Качественные фермерские продукты напрямую от производителей',
+          'Самая большая база сельских туров по России',
+          'Площадки для создания комфортной жизни за городом',
+          'Подробная база вакансий для жителей сельской местности',
+        ]}
+        button={{
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'secondary',
+        }}
+        image={image4}
+      />
+    </div>
+  ),
+};

package/src/Tile.tsx

@@ -0,0 +1,89 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Img } from './Img';
+import type { BlockVersion, Picture, UniBlockProps } from './types';
+import { BlockItem } from './ui-kit/BlockItem';
+import type { ButtonProps } from './ui-kit/Button';
+import { Button } from './ui-kit/Button';
+import { useLink } from './useLink';
+
+export interface TileContent {
+  title?: string;
+  description?: string;
+  image?: Picture;
+  items?: string[];
+  button?: ButtonProps;
+  version?: BlockVersion;
+}
+
+export interface TileProps extends TileContent, UniBlockProps {}
+
+const tileStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+const TITLE_CLASSES = 'font-medium m-0 whitespace-pre-wrap max-w-[600px]';
+
+export const Tile = JSX<TileProps>(
+  ({
+    className,
+    context,
+    title,
+    description,
+    children,
+    button,
+    image,
+    items,
+    version = 'primary',
+  }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+    return (
+      <section
+        className={`flex flex-col font-sans p-9 ${className || ''} ${tileStyleMap[version]}`}
+      >
+        {title && renderTitle(title, className)}
+        <div className="grow flex justify-between mt-6">
+          <div className="flex flex-col justify-between items-start">
+            {description || children ? (
+              <div className="font-normal text-base max-w-[600px]">{description || children}</div>
+            ) : (
+              renderItems(items, version)
+            )}
+            {button?.text && (
+              <Button
+                className="mt-6"
+                {...useLink({ router, handlerDecorator }, button)}
+                version="secondary"
+              />
+            )}
+          </div>
+          {image?.src && <Img className="mt-auto h-[220px] w-[220px]" image={image} />}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderTitle(title: string, className: string = '') {
+  const colSpanPrefix = 'col-span-';
+  const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
+  const colSpan = colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
+  if (colSpan <= 4) {
+    return <h3 className={`${TITLE_CLASSES} text-title-xs`}>{title}</h3>;
+  } else if (colSpan <= 8) {
+    return <h3 className={`${TITLE_CLASSES} text-title-sm`}>{title}</h3>;
+  } else {
+    return <h2 className={`${TITLE_CLASSES} text-title`}>{title}</h2>;
+  }
+}
+
+function renderItems(items?: string[], version?: BlockVersion) {
+  return items?.length ? (
+    <section className="max-w-[600px]" role="list">
+      {items.map((_, i) => (
+        <BlockItem key={String(i)} className={i ? 'mt-2.5' : ''} text={_} version={version} />
+      ))}
+    </section>
+  ) : null;
+}