@redneckz/wildless-cms-uni-blocks 0.10.6 → 0.10.8

package/src/components/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -0,0 +1,35 @@
+import { ListOrientation } from '../../model/ListOrientation';
+import { RadioButtonGroup, RadioButtonItem } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { Text } from '../../ui-kit/Text/Text';
+
+export interface BinaryRadioButtonGroupProps {
+  items: [truthy: RadioButtonItem, falsy: RadioButtonItem];
+  title?: string;
+  orientation?: ListOrientation;
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+}
+
+export const renderBinaryRadioButtonGroup = ({
+  items,
+  title,
+  orientation = 'horizontal',
+  value,
+  onChange,
+}: BinaryRadioButtonGroupProps) => (
+  <div>
+    {title ? (
+      <div className="mb-3">
+        <Text color="text-secondary-text" font="font-light">
+          {title}
+        </Text>
+      </div>
+    ) : null}
+    <RadioButtonGroup
+      orientation={orientation}
+      items={items}
+      checkedItem={items[value ? 0 : 1].id}
+      onChange={(_) => onChange && onChange(_ === items[0].id)}
+    />
+  </div>
+);

package/src/components/Calculator/renderDaysInput.tsx

@@ -1,36 +1,15 @@
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { clamp } from '../../utils/clamp';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 
 const STEP_DAYS = 1;
 
-interface RenderDaysInputParams {
-  minDays: number;
-  maxDays: number;
-  daysValue: number;
-}
+export const renderDaysInput = (props: InputRangeProps) => (
+  <InputRange
+    className="mt-7"
+    items={[`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`]}
+    step={STEP_DAYS}
+    {...props}
+  />
+);
 
-export function renderDaysInput(
-  title: string,
-  params: RenderDaysInputParams,
-  callback?: (value: number) => void,
-) {
-  const { minDays, maxDays, daysValue } = params;
-  const daysText = (days: number) => {
-    const text = Number(days) % 10 === 1 ? 'дня' : 'дней';
-
-    return `${days} ${text}`;
-  };
-
-  return (
-    <InputRange
-      className="mt-7"
-      title={title}
-      items={[`От ${daysText(minDays)}`, `До ${daysText(maxDays)}`]}
-      min={minDays}
-      max={maxDays}
-      step={STEP_DAYS}
-      value={clamp(daysValue, minDays, maxDays)}
-      onChange={callback}
-    />
-  );
-}
+const daysText = (days: number) => `${days} ${Number(days) % 10 === 1 ? 'дня' : 'дней'}`;

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/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.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>
     );

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/CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile.tsx

@@ -0,0 +1,148 @@
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard';
+import type {
+  CarouselRecommendationCardContent,
+  RecommendationSocialMedia,
+} from './CarouselRecommendationCardContent';
+
+const icon: Picture = {
+  src: 'product-basket.png',
+  format: 'webp',
+  size: {
+    width: 290,
+    height: 290,
+  },
+  title: 'product-basket',
+};
+
+const commonProps: RecommendationSocialMedia = {
+  target: '_blank',
+  version: 'gray',
+  rounded: false,
+};
+
+const socialMediaWithText: RecommendationSocialMedia[] = [
+  {
+    href: 'https://t.me',
+    text: 'Telegram',
+    ...commonProps,
+  },
+  {
+    href: 'https://vk.com',
+    text: 'Telegram',
+    ...commonProps,
+  },
+  {
+    href: 'https://ok.ru',
+    text: 'Telegram',
+    ...commonProps,
+  },
+];
+
+const socialMediaWithoutText: RecommendationSocialMedia[] = [
+  {
+    href: 'https://t.me',
+    ...commonProps,
+  },
+  {
+    href: 'https://vk.com',
+    ...commonProps,
+  },
+  {
+    href: 'https://ok.ru',
+    ...commonProps,
+  },
+];
+
+const items = [
+  'Бесплатное подключение и обслуживание',
+  'Вход и подписание документов по биометрии',
+  'Работа со счетами, шаблонами и выпиской',
+];
+
+export const CAROUSEL_RECOMMENDATION_CARD: CarouselRecommendationCardContent = {
+  title: 'Подключаем мобильный банк для управления бизнесом',
+  description: 'Все возможности банка для бизнеса в вашем смартфоне',
+  items,
+  icon,
+  socialMedia: socialMediaWithText,
+};
+
+export const CAROUSEL_RECOMMENDATION_CARD_SIMPLE: CarouselRecommendationCardContent = {
+  title: 'Подключаем мобильный банк для управления бизнесом',
+  description: 'Все возможности банка для бизнеса в вашем смартфоне',
+  items,
+  icon,
+  socialMedia: socialMediaWithoutText,
+};
+export const CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST: CarouselRecommendationCardContent = {
+  title: 'Подключаем мобильный банк для управления бизнесом',
+  description: 'Все возможности банка для бизнеса в вашем смартфоне',
+  icon,
+  socialMedia: socialMediaWithoutText,
+};
+
+export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardContent = {
+  title: 'Россельхозбанк',
+  description: 'Описание',
+  align: 'text-left',
+  icon,
+  items: ['Свежие новости', 'Акции и предложенияа', 'Ставки и катировки'],
+  version: 'secondary',
+  socialMedia: socialMediaWithoutText,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard className="col-span-12" {...CAROUSEL_RECOMMENDATION_CARD} />
+    </div>
+  ),
+  secondary: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="secondary"
+        {...CAROUSEL_RECOMMENDATION_CARD}
+      />
+    </div>
+  ),
+  secondaryCenter: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="secondary"
+        align="text-center"
+        {...CAROUSEL_RECOMMENDATION_CARD_SECONDARY}
+      />
+    </div>
+  ),
+  gray: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="gray"
+        {...CAROUSEL_RECOMMENDATION_CARD}
+      />
+    </div>
+  ),
+  socialMediaWithoutText: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="gray"
+        {...CAROUSEL_RECOMMENDATION_CARD_SIMPLE}
+      />
+    </div>
+  ),
+  cardWithoutList: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="gray"
+        {...CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST}
+      />
+    </div>
+  ),
+};