@redneckz/wildless-cms-uni-blocks 0.10.5 → 0.10.7

package/src/components/Calculator/renderInterestPayment.tsx

@@ -1,52 +1,13 @@
-import { ListOrientation } from '../../model/ListOrientation';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { Text } from '../../ui-kit/Text/Text';
-
-const EVERY_MONTH = 'everyMonth';
-const AT_END_TERM = 'atEndTerm';
-
-const depositTypeItems = [
-  {
-    id: EVERY_MONTH,
-    text: 'Ежемесячно',
-  },
-  {
-    id: AT_END_TERM,
-    text: 'В конце срока',
-  },
-];
-
-interface InterestPaymentProps {
-  isMonthlyInterestPayment: boolean;
-  callback?: (value: boolean) => void;
-  title?: string;
-  orientation?: ListOrientation;
-}
-
-export function renderInterestPayment({
-  isMonthlyInterestPayment,
-  callback,
-  title,
-  orientation = 'horizontal',
-}: InterestPaymentProps) {
-  return (
-    <div>
-      {title ? (
-        <div className="mb-3">
-          <Text color="text-secondary-text" font="font-light">
-            {title}
-          </Text>
-        </div>
-      ) : null}
-
-      <div>
-        <RadioButtonGroup
-          orientation={orientation}
-          items={depositTypeItems}
-          checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
-          onChange={(text: string) => callback && callback(text === EVERY_MONTH)}
-        />
-      </div>
-    </div>
-  );
-}
+import {
+  BinaryRadioButtonGroupProps,
+  renderBinaryRadioButtonGroup,
+} from './renderBinaryRadioButtonGroup';
+
+export const renderInterestPayment = (props: Partial<BinaryRadioButtonGroupProps>) =>
+  renderBinaryRadioButtonGroup({
+    ...props,
+    items: [
+      { id: 'everyMonth', text: 'Ежемесячно' },
+      { id: 'atEndTerm', text: 'В конце срока' },
+    ],
+  });

package/src/components/Calculator/renderMonthsInput.tsx

@@ -1,47 +1,25 @@
-import { InputListRange } from '../../ui-kit/InputListRange/InputListRange';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { clamp } from '../../utils/clamp';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 
 const STEP_MONTHS = 1;
 
-interface RenderMonthsInputParams {
-  minMonths: number;
-  maxMonths: number;
-  monthsValue: number;
+interface MonthsInputParams extends InputRangeProps {
   availableMonths?: Array<number>;
 }
 
-export function renderMonthsInput(
-  title: string,
-  params: RenderMonthsInputParams,
-  callback?: (value: number) => void,
-) {
-  const { minMonths, maxMonths, monthsValue, availableMonths } = params;
-  const monthText = (month: number) => {
-    const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
+export const renderMonthsInput = ({
+  min = 0,
+  max = 0,
+  availableMonths,
+  ...rest
+}: MonthsInputParams) => (
+  <InputRange
+    className="mt-7"
+    items={[`От ${monthText(min)}`, `До ${monthText(max)}`]}
+    step={STEP_MONTHS}
+    {...(availableMonths?.length ? { list: availableMonths } : { min, max })}
+    {...rest}
+  />
+);
 
-    return `${month} ${text}`;
-  };
-
-  return availableMonths?.length ? (
-    <InputListRange
-      className="mt-7"
-      title={title}
-      items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
-      list={availableMonths}
-      value={clamp(monthsValue, minMonths, maxMonths)}
-      onChange={callback}
-    />
-  ) : (
-    <InputRange
-      className="mt-7"
-      title={title}
-      items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
-      min={minMonths}
-      max={maxMonths}
-      step={STEP_MONTHS}
-      value={clamp(monthsValue, minMonths, maxMonths)}
-      onChange={callback}
-    />
-  );
-}
+const monthText = (month: number) => `${month} ${Number(month) % 10 === 1 ? 'месяца' : 'месяцев'}`;

package/src/components/Calculator/renderPaymentType.tsx

@@ -1,49 +1,13 @@
-import { ListOrientation } from '../../model/ListOrientation';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { Text } from '../../ui-kit/Text/Text';
-
-export const ANNUITY = 'annuity';
-export const DIFFERENTIAL = 'differential';
-
-const paymentTypeItems = [
-  {
-    id: ANNUITY,
-    text: 'Аннуитетный',
-  },
-  {
-    id: DIFFERENTIAL,
-    text: 'Дифференцированный',
-  },
-];
-
-interface PaymentTypeProps {
-  isAnnuity: boolean;
-  callback?: (value: boolean) => void;
-  title?: string;
-  orientation?: ListOrientation;
-}
-
-export function renderPaymentType({
-  isAnnuity,
-  callback,
-  title,
-  orientation = 'horizontal',
-}: PaymentTypeProps) {
-  return (
-    <div>
-      {title ? (
-        <div className="mb-3">
-          <Text color="text-secondary-text" font="font-light">
-            {title}
-          </Text>
-        </div>
-      ) : null}
-      <RadioButtonGroup
-        orientation={orientation}
-        items={paymentTypeItems}
-        checkedItem={isAnnuity ? ANNUITY : DIFFERENTIAL}
-        onChange={(text: string) => callback && callback(text === ANNUITY)}
-      />
-    </div>
-  );
-}
+import {
+  BinaryRadioButtonGroupProps,
+  renderBinaryRadioButtonGroup,
+} from './renderBinaryRadioButtonGroup';
+
+export const renderPaymentType = (props: Partial<BinaryRadioButtonGroupProps>) =>
+  renderBinaryRadioButtonGroup({
+    ...props,
+    items: [
+      { id: 'annuity', text: 'Аннуитетный' },
+      { id: 'differential', text: 'Дифференцированный' },
+    ],
+  });

package/src/components/Calculator/renderRegistrationType.tsx

@@ -1,51 +1,13 @@
-import { ListOrientation } from '../../model/ListOrientation';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { Text } from '../../ui-kit/Text/Text';
-
-const REMOTE_REGISTRATION = 'remote';
-const OFFICE_REGISTRATION = 'office';
-
-const registrationTypeItems = [
-  {
-    id: OFFICE_REGISTRATION,
-    text: 'Офис Банка',
-  },
-  {
-    id: REMOTE_REGISTRATION,
-    text: 'Дистанционно',
-  },
-];
-
-interface RegistrationTypeProps {
-  isRemoteRegistration: boolean;
-  callback?: (value: boolean) => void;
-  title?: string;
-  orientation?: ListOrientation;
-}
-
-export function renderRegistrationType({
-  isRemoteRegistration,
-  callback,
-  title,
-  orientation = 'horizontal',
-}: RegistrationTypeProps) {
-  return (
-    <div>
-      {title ? (
-        <div className="mb-3">
-          <Text color="text-secondary-text" font="font-light">
-            {title}
-          </Text>
-        </div>
-      ) : null}
-      <div>
-        <RadioButtonGroup
-          orientation={orientation}
-          items={registrationTypeItems}
-          checkedItem={isRemoteRegistration ? REMOTE_REGISTRATION : OFFICE_REGISTRATION}
-          onChange={(text: string) => callback && callback(text === REMOTE_REGISTRATION)}
-        />
-      </div>
-    </div>
-  );
-}
+import {
+  BinaryRadioButtonGroupProps,
+  renderBinaryRadioButtonGroup,
+} from './renderBinaryRadioButtonGroup';
+
+export const renderRegistrationType = (props: Partial<BinaryRadioButtonGroupProps>) =>
+  renderBinaryRadioButtonGroup({
+    ...props,
+    items: [
+      { id: 'remote', text: 'Дистанционно' },
+      { id: 'office', text: 'Офис Банка' },
+    ],
+  });

package/src/components/Calculator/renderWantedSumInput.tsx

@@ -1,39 +1,22 @@
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { clamp } from '../../utils/clamp';
 
 const DEFAULT_MONEY_STEP = 1000;
 
-interface RenderWantedSumParams {
-  minSum: number;
-  maxSum: number;
-  moneyValue: number;
-  className?: string;
-  step?: number;
+interface RenderWantedSumParams extends InputRangeProps {
   isShowItems?: boolean;
 }
 
-export function renderWantedSumInput(
-  title: string,
-  params: RenderWantedSumParams,
-  callback?: (value: number) => void,
-) {
-  const { moneyValue, minSum, maxSum, step = DEFAULT_MONEY_STEP, isShowItems = true } = params;
-
+export function renderWantedSumInput({
+  isShowItems = true,
+  step = DEFAULT_MONEY_STEP,
+  ...rest
+}: RenderWantedSumParams) {
   const items = [
-    `От ${addSpacesBetweenNumbers(minSum)} ₽`,
-    `До ${addSpacesBetweenNumbers(maxSum)} ₽`,
+    `От ${addSpacesBetweenNumbers(rest.min || 0)} ₽`,
+    `До ${addSpacesBetweenNumbers(rest.max || 0)} ₽`,
   ];
 
-  return (
-    <InputRange
-      title={title}
-      items={isShowItems ? items : []}
-      min={minSum}
-      max={maxSum}
-      step={step}
-      value={clamp(moneyValue, minSum, maxSum)}
-      onChange={callback}
-    />
-  );
+  return <InputRange items={isShowItems ? items : []} step={step} {...rest} />;
 }

package/src/components/Calculator/useDepositCalculatorParams.ts

@@ -45,7 +45,7 @@ export const useDepositCalculatorParams = (
   const data = useCalculatorParams<DepositCalculatorData>(
     sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
   );
-  const defaultMonth = data?.rateRows[0]
+  const defaultMonth = data?.rateRows?.[0]
     ? getMiddleMonth(data.rateRows[0].minMonths, data.rateRows[0].maxMonths)
     : 1;
   const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;

package/src/components/CardTransfer/CardTransfer.tsx

@@ -37,7 +37,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     const link = useLink();
 
     return (
-      <BlockWrapper className={`p-12 flex flex-col items-center ${className}`} {...rest}>
+      <BlockWrapper className={`p-default flex flex-col items-center ${className}`} {...rest}>
         {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
         <form className="w-[468px]" method="POST" action={FORM_URL}>
           <CurrencyInput

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

@@ -0,0 +1,93 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
+import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
+import { Carousel } from './Carousel';
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
+
+const carouselBlock = {
+  type: 'Carousel',
+  blocks: new Array(6)
+    .fill({
+      type: 'CarouselTariffsCard',
+      content: TARIFFS_CARD,
+    })
+    .map((_, i) => (i === 1 ? { ..._, content: TARIFFS_CARD_HIT } : _)),
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Carousel className="col-span-12" block={carouselBlock} options={options} />
+    </div>
+  ),
+  'arrowsPadded with cyclic': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        block={carouselBlock}
+        options={options}
+        arrowsPadded={false}
+        isCyclic={true}
+      />
+    </div>
+  ),
+
+  'no-blur with cyclic': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isCyclic={true}
+        block={carouselBlock}
+        options={options}
+      />
+    </div>
+  ),
+  'one visible cards with dots': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={1}
+        showDots={true}
+        block={carouselBlock}
+        options={options}
+      />
+    </div>
+  ),
+  'only one cards align center': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        block={{
+          type: 'Carousel',
+          blocks: new Array(1)
+            .fill({
+              type: 'CarouselTariffsCard',
+              content: TARIFFS_CARD,
+            })
+            .map((_, i) => (i === 1 ? { ..._, content: TARIFFS_CARD_HIT } : _)),
+        }}
+        options={options}
+        isAlignCenter={true}
+      />
+    </div>
+  ),
+
+  tariffs: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={0}
+        isBlur={true}
+        isCyclic={false}
+        isAlignCenter={true}
+        block={carouselBlock}
+        options={options}
+      />
+    </div>
+  ),
+};

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

@@ -102,7 +102,7 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={3}
+        visibleItemCount={1}
         isBlur={true}
         block={{
           type: 'Carousel',

package/src/components/Carousel/Carousel.tsx

@@ -10,14 +10,13 @@ import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListSc
 import { style } from '../../utils/style';
 import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
+import { ITEMS_GAP } from './itemsGap';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
   showDots?: boolean;
 }
 
-const ITEMS_GAP = 4;
-
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
     className = '',
@@ -83,7 +82,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             activeIndex={activeIndex}
             itemCount={count}
           />
-          {showDots ? renderDots(containerRef, dotsActiveIndex, itemCount) : null}
+          {showDots ? renderDots(containerRef, dotsActiveIndex, count) : null}
         </div>
       </BlockWrapper>
     );
@@ -104,7 +103,7 @@ Carousel.childrenTypes = [
   'CarouselEventCard',
 ];
 
-const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-12' : '');
+const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-default' : '');
 
 const getAlignStyle = (isAlignCenter: boolean): string =>
   isAlignCenter ? 'flex justify-center' : '';

package/src/components/Carousel/CarouselScrollButtons.tsx

@@ -73,9 +73,13 @@ export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
 );
 
 const renderBlur = (isBlur: boolean, scroll: SwipeListScroll) =>
-  (scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
+  isBlur ? (
     <div>
-      <div className={style(blurBaseStyle, 'left-0 bg-opacity-from-white')} />
-      <div className={style(blurBaseStyle, 'right-0 bg-opacity-to-white')} />
+      {scroll.canScrollLeft ? (
+        <div className={style(blurBaseStyle, 'left-0 bg-opacity-from-white')} />
+      ) : null}
+      {scroll.canScrollRight ? (
+        <div className={style(blurBaseStyle, 'right-0 bg-opacity-to-white')} />
+      ) : null}
     </div>
   ) : null;

package/src/components/Carousel/itemsGap.mobile.ts

@@ -0,0 +1 @@
+export const ITEMS_GAP = 16;

package/src/components/Carousel/itemsGap.ts

@@ -0,0 +1 @@
+export const ITEMS_GAP = 4;

package/src/components/CarouselProductCard/CarouselProductCard.example.json

@@ -26,6 +26,7 @@
       { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
       { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
     ],
-    "align": "text-center"
+    "align": "text-center",
+    "isFullWidth": true
   }
 }

package/src/components/CarouselProductCard/CarouselProductCard.fixture.tsx

@@ -51,6 +51,7 @@ export const PRODUCT_CARD_SMALL: CarouselProductCardContent = {
   icon: image,
   button: buttonPrimary,
   isDotted,
+  isFullWidth: false,
 };
 
 const CAROUSEL_PRODUCT_CARD = <CarouselProductCard {...PRODUCT_CARD} />;

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -52,8 +52,8 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
           {renderAdditionalDescription(additionalDescription)}
         </LinkWrapper>
         {renderButtonsSection([button], {
-          className: style('p-6 pt-0', isFullWidth ? '' : 'justify-center'),
-          isVertical: isFullWidth ? true : false,
+          className: style('p-6 pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
+          isVertical: isFullWidth,
         })}
       </BlockWrapper>
     );

package/src/components/CarouselRichTextCard/CarouselRichTextCard.tsx

@@ -9,7 +9,7 @@ export interface CarouselRichTextCardProps extends CarouselRichTextCardContent,
 
 export const CarouselRichTextCard = JSX<CarouselRichTextCardProps>(
   ({ className = '', __html, richVersion = 'striped', ...rest }) => (
-    <BlockWrapper className={style('p-9 border border-gray min-w-96', className)} {...rest}>
+    <BlockWrapper className={style('p-9 border border-gray h-full min-w-96', className)} {...rest}>
       <RichText __html={__html} richVersion={richVersion} />
     </BlockWrapper>
   ),

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

@@ -0,0 +1,74 @@
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { CarouselTariffsCard } from './CarouselTariffsCard';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+
+const imageMonth: Picture = {
+  src: 'monthly-payment.png',
+  format: 'webp',
+  size: {
+    width: 190,
+    height: 54,
+  },
+  title: 'money',
+};
+
+const button: ButtonProps = {
+  href: '/',
+  text: 'Открыть расчетный счет',
+  target: '_blank',
+  version: 'primary',
+};
+
+const buttonSecondary: ButtonProps = {
+  href: '/',
+  text: 'Открыть расчетный счет',
+  target: '_blank',
+  version: 'secondary',
+};
+
+const buttonIcon: ButtonWithIconProps = {
+  text: 'App Store',
+  icon: { icon: 'DocIconMonoColor', iconVersion: 'color' },
+  href: 'rshb.ru',
+  version: 'link',
+};
+
+const cardCells = [
+  { title: 'Открытие расчетного счета', description: 'Бесплатно' },
+  { title: 'Внутрибанковские платежи', description: '0 ₽' },
+  { title: 'Внешние платежи, до 10 шт.', description: '0 ₽' },
+  { title: 'От 11 платежей', description: '50 ₽/шт.' },
+  {
+    title: 'Внесение наличных',
+    description: '0% - до 100 000 ₽/мес., далее согласно п.2.4. Тарифов Банка',
+  },
+  { title: 'Зарплатный проект', description: 'Бесплатно' },
+  { buttons: [buttonIcon] },
+];
+
+export const TARIFFS_CARD: CarouselTariffsCardContent = {
+  title: 'Расчётный эконом',
+  icon: imageMonth,
+  button: buttonSecondary,
+  cardCells,
+};
+
+export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {
+  icon: imageMonth,
+  title: 'Расчётный эконом',
+  button,
+  cardCells,
+  isHighlighting: true,
+};
+
+const CAROUSEL_TARIFFS_CARD = <CarouselTariffsCard className="col-span-12" {...TARIFFS_CARD} />;
+
+const CAROUSEL_TARIFFS_CARD_HIT = (
+  <CarouselTariffsCard className="col-span-12" {...TARIFFS_CARD_HIT} />
+);
+
+export default {
+  default: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD}</div>,
+  hit: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD_HIT}</div>,
+};