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

package/mobile/src/ui-kit/InputRange/InputRange.tsx

@@ -1,60 +1,72 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { clamp } from '../../utils/clamp';
-import { getSanitizedValue } from '../../utils/getSanitizedValue';
+import { style } from '../../utils/style';
+import { Text } from '../Text/Text';
 import type { InputRangeProps } from './InputRangeProps';
+import { parseDecimal } from './parseDecimal';
+import { renderRangeWithTicks } from './renderRangeWithTicks';
 
 const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
 
+const DEFAULT_MIN = 1;
+const DEFAULT_MAX = 100;
+
 export const InputRange = JSX<InputRangeProps>(
   ({
     className,
     title,
     items = [],
-    min = 1,
-    max = 100,
+    list = [],
+    min = list.length ? 0 : DEFAULT_MIN,
+    max = list.length ? list.length - 1 : DEFAULT_MAX,
     step = 1,
-    value = min,
+    value = list[0] || min,
     disabled = false,
     onChange,
   }) => {
-    const handleChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {
-      if (!onChange) {
-        return;
-      }
+    const [isFocused, setFocused] = useState(false);
+
+    const handleChange = useCallback(
+      (e: { target?: { value?: string } }) => {
+        onChange && onChange(parseDecimal(e.target?.value));
+      },
+      [onChange],
+    );
 
-      onChange(clamp(Number(getSanitizedValue(e.target.value as string)), min, max));
-    };
+    const handleFocus = useCallback(() => {
+      setFocused(true);
+    }, []);
 
-    const inputStyle = {
-      backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
-    };
+    const handleBlur = useCallback(() => {
+      setFocused(false);
+      onChange && onChange(list.length ? closestValue(list)(value) : clamp(value || 0, min, max));
+    }, [onChange, value]);
 
     return (
       <div className={className}>
         <label className="block relative">
-          {title ? <span className="text-m-light text-primary-text">{title}</span> : null}
+          {title ? (
+            <Text size="text-m" font="font-light" color="text-primary-text">
+              {title}
+            </Text>
+          ) : null}
           <input
-            className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-gray rounded-md
-            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-text ${DISABLED_INPUT_CLASSES}`}
-            value={addSpacesBetweenNumbers(value)}
+            className={style(
+              'm-0 mt-2 font-sans text-h3 w-full h-14',
+              'border border-solid border-gray rounded-md outline-none',
+              'p-0 pl-4 box-border',
+              'text-primary-text hover:border-primary-hover focus:border-primary-text',
+              DISABLED_INPUT_CLASSES,
+            )}
+            value={isFocused ? value : addSpacesBetweenNumbers(value)}
             disabled={disabled}
-            onChange={handleChange}
-            onBlur={handleChange}
+            onInput={handleChange as any}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
           />
-          <div className="absolute inset-x-0 -bottom-1 px-4 leading-[18px]">
-            <input
-              className="box-border w-full m-0 cursor-pointer slider"
-              type="range"
-              min={min}
-              max={max}
-              step={step}
-              value={value}
-              disabled={disabled}
-              onChange={handleChange}
-              style={inputStyle}
-            />
-          </div>
+          {renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })}
         </label>
         {renderRangeCaption(items)}
       </div>
@@ -62,14 +74,15 @@ export const InputRange = JSX<InputRangeProps>(
   },
 );
 
-function renderRangeCaption(items: string[]) {
-  return (
-    <div className="flex justify-between my-2">
-      {items.map((item, i) => (
-        <span key={String(i)} className="text-s-light text-secondary-text">
-          {item}
-        </span>
-      ))}
-    </div>
-  );
-}
+const closestValue = (list: number[]) => (_: number) =>
+  list.reduce((prev, curr) => (Math.abs(curr - _) < Math.abs(prev - _) ? curr : prev));
+
+const renderRangeCaption = (items: string[]) => (
+  <div className="flex justify-between my-2">
+    {items.map((item, i) => (
+      <Text key={String(i)} size="text-s-light" color="text-secondary-text">
+        {item}
+      </Text>
+    ))}
+  </div>
+);

package/mobile/src/ui-kit/InputRange/InputRangeProps.ts

@@ -5,6 +5,7 @@ export interface InputRangeProps extends ListContent {
   items?: string[];
   min?: number;
   max?: number;
+  list?: number[];
   step?: number;
   value?: number;
   title?: string;

package/mobile/src/ui-kit/InputRange/parseDecimal.ts

@@ -0,0 +1,6 @@
+export function parseDecimal(value?: string) {
+  const rawValue = (value || '').replace(/\D/g, '');
+  const unsafeDecimal = parseInt(rawValue, 10);
+
+  return Number.isNaN(unsafeDecimal) ? 0 : unsafeDecimal;
+}

package/mobile/src/ui-kit/InputRange/renderRangeWithTicks.tsx

@@ -0,0 +1,62 @@
+import { parseDecimal } from './parseDecimal';
+
+interface RangeWithTicksProps {
+  list: number[];
+  min: number;
+  max: number;
+  step: number;
+  disabled?: boolean;
+  value?: number;
+  onChange?: (value: number) => void;
+}
+
+export function renderRangeWithTicks({
+  list = [],
+  min,
+  max,
+  step,
+  value = list[0] || min,
+  disabled,
+  onChange,
+}: RangeWithTicksProps) {
+  const rangeValue = list.length ? list.indexOf(value) : value;
+  const inputStyle = {
+    backgroundSize: `${(((rangeValue - min) * 100) / (max - min)).toFixed(2)}% 100%`,
+  };
+
+  return (
+    <div>
+      {list.length ? (
+        <div className="absolute w-full flex justify-between -bottom-[3px] px-4">
+          {list.map((_, i) => (
+            <div
+              key={String(i)}
+              className={`w-2 h-2 rounded-full ${
+                rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main'
+              }`}
+            />
+          ))}
+        </div>
+      ) : null}
+      <div className="absolute inset-x-0 -bottom-1 px-4 leading-[18px]">
+        <input
+          className="box-border w-full m-0 cursor-pointer slider relative z-10"
+          style={inputStyle}
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={rangeValue}
+          disabled={disabled}
+          onInput={
+            ((e: { target?: { value?: string } }) => {
+              const rawValue = parseDecimal(e.target?.value);
+              const newValue = list.length ? list[rawValue] : rawValue;
+              onChange && onChange(newValue || 0);
+            }) as any
+          }
+        />
+      </div>
+    </div>
+  );
+}

package/mobile/src/utils/getSanitizedValue.ts

@@ -1 +1 @@
-export const getSanitizedValue = (_: string): string => _.split(/\s+/).join('');
+export const getSanitizedValue = (_: string): string => _.replace(/\s/g, '');

package/mobile/src/wlc.json

@@ -3,6 +3,5 @@
   "FORCED_DRAFT_FLOW": false,
   "YANDEX_MAP_API_KEY": "f4b40c1e-1891-45f2-b307-90c481af210b",
   "SITEMAP": "sayt-rshb",
-  "CHAT_BOT": "personal",
-  "BASE_PATH": "/natural/"
+  "CHAT_BOT": "personal"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.10.6",
+  "version": "0.10.7",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -39,7 +39,7 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   }, []);
 
   return (
-    <BlockWrapper className={style('font-sans bg-white p-12 pb-9', className)} {...rest}>
+    <BlockWrapper className={style('font-sans bg-white p-default pb-9', className)} {...rest}>
       <div className="container max-w-[978px]">
         {title ? <Heading headingType="h3" title={title} className="text-center mb-8" /> : null}
         {COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit })}

package/src/components/Blocks.mobile.ts

@@ -1,4 +1,6 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
+import { Carousel } from './Carousel/Carousel';
+import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
@@ -17,6 +19,8 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
+  Carousel,
+  CarouselTariffsCard,
   ComparisonTable,
   Footer,
   Header,

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
 import type { CommonCalculatorProps } from './CalculatorContent';
@@ -16,47 +16,43 @@ export interface BonusCalculatorProps extends CommonCalculatorProps {
 
 export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
   ({ className = '', sourceBookDir = '', buttons, footnote }) => {
-    const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
-    const handleTravelExpenseValue = useCallback((_: number) => setTravelExpenseValue(_), []);
-    const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
-    const handleRestExpenseValue = useCallback((_: number) => setRestExpenseValue(_), []);
-    const userInputParams = {
-      travelExpenseValue,
-      restExpenseValue,
-    };
+    const [userInputParams, { field }] = useForm({
+      travelExpenseValue: DEFAULT_TRAVEL_MIN_SUM,
+      restExpenseValue: DEFAULT_REST_MIN_SUM,
+    });
+
     const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } =
       useBonusCalculatorParams(userInputParams, sourceBookDir);
 
     return (
       <section className={style('flex justify-between', className)}>
         <div className="w-[468px]">
-          {renderWantedSumInput(
-            'Сумма покупок в категории путешествия, ₽',
-            {
-              minSum: minSumTravel,
-              maxSum: maxSumTravel,
-              moneyValue: travelExpenseValue,
-              step: 500,
-              isShowItems: false,
-            },
-            handleTravelExpenseValue,
-          )}
-          {renderWantedSumInput(
-            'Сумма покупок в остальных категориях, ₽',
-            {
-              className: 'mt-7',
-              minSum: minSumOther,
-              maxSum: maxSumOther,
-              moneyValue: restExpenseValue,
-              step: 500,
-              isShowItems: false,
-            },
-            handleRestExpenseValue,
-          )}
+          {renderWantedSumInput({
+            title: 'Сумма покупок в категории путешествия, ₽',
+            min: minSumTravel,
+            max: maxSumTravel,
+            step: 500,
+            isShowItems: false,
+            ...field('travelExpenseValue'),
+          })}
+          {renderWantedSumInput({
+            title: 'Сумма покупок в остальных категориях, ₽',
+            className: 'mt-7',
+            min: minSumOther,
+            max: maxSumOther,
+            step: 500,
+            isShowItems: false,
+            ...field('restExpenseValue'),
+          })}
         </div>
         <div>
           {monthBonus >= 0 ? (
-            <Rate title="Баллов за месяц" rate={monthBonus} rateBlockClassName="tracking-[-14px]" />
+            <Rate
+              title="Баллов за месяц"
+              rate={monthBonus}
+              rateBlockClassName="tracking-[-14px]"
+              fractionDigits={0}
+            />
           ) : null}
         </div>
         <div className="w-full max-w-[350px]">

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import type { BusinessDepositCalculatorProps } from './CalculatorContent';
@@ -22,29 +22,14 @@ export interface BusinessDepositCalculatorProp extends BusinessDepositCalculator
 
 export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
   ({ className = '', sourceBookDir, buttons, footnote, bottomFootnote, isShowDepositeName }) => {
-    const [moneyValue, setMoneyValue] = useState(BUSINESS_DEFAULT_SUM);
-    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
-    const [daysValue, setDaysValue] = useState(BUSINESS_DEFAULT_DAYS);
-    const handleDaysValue = useCallback((_: number) => setDaysValue(_), []);
-    const [isReplenished, toggleIsReplenished] = useState(false);
-    const handleIsReplenished = useCallback((_: boolean) => toggleIsReplenished(_), []);
-    const [isPartialWithdrawal, toggleIsPartialWithdrawal] = useState(false);
-    const handleIsPartialWithdrawal = useCallback((_: boolean) => toggleIsPartialWithdrawal(_), []);
-    const [isSmallBusiness, toggleIsSmallBusiness] = useState(false);
-    const handleIsSmallBusiness = useCallback((_: boolean) => toggleIsSmallBusiness(_), []);
-    const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
-    const handleIsMonthlyInterestPayment = useCallback(
-      (_: boolean) => toggleIsMonthlyInterestPayment(_),
-      [],
-    );
-    const userInputParams = {
-      moneyValue,
-      daysValue,
-      isReplenished,
-      isPartialWithdrawal,
-      isSmallBusiness,
-      isMonthlyInterestPayment,
-    };
+    const [userInputParams, { field }] = useForm({
+      moneyValue: BUSINESS_DEFAULT_SUM,
+      daysValue: BUSINESS_DEFAULT_DAYS,
+      isReplenished: false,
+      isPartialWithdrawal: false,
+      isSmallBusiness: false,
+      isMonthlyInterestPayment: false,
+    });
 
     const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
     const { income, finalSum, rate, depositeName, isShowUnknownRate } = calculatorParams;
@@ -53,20 +38,26 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
       <section className={className}>
         <div className="flex justify-between">
           <div className="w-[486px]">
-            {renderWantedSumInput('Сумма вклада, ₽', calculatorParams, handleMoneyValue)}
-            {renderDaysInput('Срок вклада, дни', calculatorParams, handleDaysValue)}
+            {renderWantedSumInput({
+              title: 'Сумма вклада, ₽',
+              min: calculatorParams.minSum,
+              max: calculatorParams.maxSum,
+              ...field('moneyValue'),
+              value: calculatorParams.moneyValue,
+            })}
+            {renderDaysInput({
+              title: 'Срок вклада, дни',
+              min: calculatorParams.minDays,
+              max: calculatorParams.maxDays,
+              ...field('daysValue'),
+              value: calculatorParams.daysValue,
+            })}
             <div className="mt-7 flex justify-between">
-              {renderBusinessDepositParamsForm({
-                ...calculatorParams,
-                handleIsReplenished,
-                handleIsPartialWithdrawal,
-                handleIsSmallBusiness,
-              })}
+              {renderBusinessDepositParamsForm(calculatorParams, field)}
               {renderInterestPayment({
-                isMonthlyInterestPayment,
-                callback: handleIsMonthlyInterestPayment,
                 title: 'Выплата процентов',
                 orientation: 'vertical',
+                ...field('isMonthlyInterestPayment'),
               })}
             </div>
           </div>
@@ -95,40 +86,29 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
   },
 );
 
-interface BusinessDepositParamsFormProps extends BusinessDepositCalculatorParams {
-  handleIsReplenished?: (value: boolean) => void;
-  handleIsPartialWithdrawal?: (value: boolean) => void;
-  handleIsSmallBusiness?: (value: boolean) => void;
-}
-
-const renderBusinessDepositParamsForm = ({
-  isDisabledOperatingDeposit,
-  isReplenished,
-  isPartialWithdrawal,
-  isSmallBusiness,
-  handleIsReplenished,
-  handleIsPartialWithdrawal,
-  handleIsSmallBusiness,
-}: BusinessDepositParamsFormProps) => (
+const renderBusinessDepositParamsForm = (
+  calculatorParams: BusinessDepositCalculatorParams,
+  field: FormFieldRegisterer<any>,
+) => (
   <div>
     <Checkbox
       text="Пополнение"
-      disabled={isDisabledOperatingDeposit}
-      value={isReplenished}
-      onChange={handleIsReplenished}
+      disabled={calculatorParams.isDisabledOperatingDeposit}
+      {...field('isReplenished')}
+      value={calculatorParams.isReplenished}
     />
     <Checkbox
       className="mt-3"
-      disabled={isDisabledOperatingDeposit}
+      disabled={calculatorParams.isDisabledOperatingDeposit}
       text="Частичное снятие"
-      value={isPartialWithdrawal}
-      onChange={handleIsPartialWithdrawal}
+      {...field('isPartialWithdrawal')}
+      value={calculatorParams.isPartialWithdrawal}
     />
     <Checkbox
       className="mt-3"
       text="Являюсь малым предприятием"
-      value={isSmallBusiness}
-      onChange={handleIsSmallBusiness}
+      {...field('isSmallBusiness')}
+      value={calculatorParams.isSmallBusiness}
     />
   </div>
 );

package/src/components/Calculator/Calculator.tsx

@@ -5,6 +5,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
+import { style } from '../../utils/style';
 import type { CalculatorBlockDef, CalculatorContent, CalculatorNav } from './CalculatorContent';
 import { renderCalculatorBlock } from './renderCalculatorBlock';
 
@@ -40,7 +41,10 @@ export const Calculator = JSX<CalculatorProps>(
     });
 
     return (
-      <BlockWrapper className={`box-border overflow-hidden relative w-100 ${className}`} {...rest}>
+      <BlockWrapper
+        className={style('box-border overflow-hidden relative w-100', className)}
+        {...rest}
+      >
         <div className="bg-white">
           {tabsNav.length > 1
             ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
@@ -81,8 +85,10 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
       key={String(i)}
       onClick={onClick}
       aria-label={tab?.title}
-      className={`box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]
-      ${btnClassName}`}
+      className={style(
+        'box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]',
+        btnClassName,
+      )}
     >
       <Img
         className={`h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`}
@@ -94,8 +100,8 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
         height="24"
       />
       <div className="border-0">
-        <div className={`${btnTitleClassName}`}>{tab?.title}</div>
-        <div className={`${btnDescClassName}`}>{tab.description}</div>
+        <div className={btnTitleClassName}>{tab?.title}</div>
+        <div className={btnDescClassName}>{tab.description}</div>
       </div>
     </button>
   );