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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/Carousel/itemsGap.ts

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

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

@@ -4,7 +4,6 @@ import type { Picture } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
@@ -13,17 +12,16 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { style } from '../../utils/style';
-import type {
-  CarouselTariffsCardContent,
-  TariffsCardCellProps,
-} from './CarouselTariffsCardContent';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import { getPaddingStyle } from './getPaddingStyle';
+import { renderCardInfo } from './renderCardInfo';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
 const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
+  ({ className = '', title, icon, isHighlighting = false, button, cardCells = [], ...rest }) => {
     const cellsNode = cardCells.map(renderCardInfo);
     const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
@@ -31,8 +29,8 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     return (
       <BlockWrapper
         className={style(
-          'relative border border-gray p-8 flex flex-col',
-          getHitStyle(isHighlighting),
+          'relative border border-gray flex flex-col',
+          getPaddingStyle(isHighlighting),
           className,
         )}
         {...rest}
@@ -59,14 +57,10 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
 const renderIconBlock = (icon?: Picture) => (
   <div className="w-[267px] min-w-[267px] self-center">
-    {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={icon} /> : null}
+    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
-const getHitStyle = (isHighlighting?: boolean): string =>
-  isHighlighting ? 'mt-8 pt-20' : 'mt-20 pt-8';
-
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
     className="w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center"
@@ -82,24 +76,6 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
   </button>
 );
 
-const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
-  const { title, description, buttons } = cell;
-
-  return (
-    <div key={String(i)} className="py-5 border-b border-main-divider">
-      {title ? (
-        <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
-      ) : null}
-      {description ? (
-        <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
-      ) : null}
-      {buttons?.length ? (
-        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
-      ) : null}
-    </div>
-  );
-};
-
 const renderHitIcon = (): VNode => (
   <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
     <Icon iconVersion="black" name="HeartIcon" width="23" height="22" />

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

@@ -0,0 +1 @@
+export const descriptionSize = 'text-l';

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

@@ -0,0 +1,2 @@
+export const getPaddingStyle = (isHighlighting?: boolean): string =>
+  isHighlighting ? 'p-default mt-6' : 'p-default mt-6';

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

@@ -0,0 +1,31 @@
+import { VNode } from '../../model/VNode';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { Text } from '../../ui-kit/Text/Text';
+import { TariffsCardCellProps } from './CarouselTariffsCardContent';
+import { descriptionSize } from './descriptionSize';
+
+export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
+  const { title, description, buttons } = cell;
+
+  return (
+    <div key={String(i)} className="py-5 border-b border-main-divider">
+      {title ? (
+        <div className="opacity-80">
+          <Text size="text-m" color="text-secondary-text">
+            {title}
+          </Text>
+        </div>
+      ) : null}
+      {description ? (
+        <div className="mt-1">
+          <Text size={descriptionSize} color="text-primary-text">
+            {description}
+          </Text>
+        </div>
+      ) : null}
+      {buttons?.length ? (
+        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
+      ) : null}
+    </div>
+  );
+};

package/mobile/src/components/Headline/Headline.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import type { TextSize } from '../../ui-kit/Text/TextProps';
 import { style } from '../../utils/style';
-import type { HeadlineContent } from './HeadlineContent';
 import { headlineVersionStyles } from './headlineVersionStyles';
+import type { TextSize } from '../../ui-kit/Text/TextProps';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
@@ -25,10 +25,11 @@ export const Headline = JSX<HeadlineProps>(
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
     const paddingStyle = isPadding ? 'p-default' : '';
+    const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
 
     return (
       <BlockWrapper
-        className={style('flex flex-col', paddingStyle, versionStyle.wrapper, className)}
+        className={style(paddingStyle, className)}
         version={version}
         isTheme={isTheme}
         {...rest}
@@ -42,7 +43,11 @@ export const Headline = JSX<HeadlineProps>(
           />
         ) : null}
         {description ? (
-          <Paragraph size={versionStyle.descriptionSize as TextSize} align={align}>
+          <Paragraph
+            size={versionStyle.descriptionSize as TextSize}
+            align={align}
+            {...descriptionStyle}
+          >
             {description}
           </Paragraph>
         ) : null}

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -5,40 +5,40 @@ import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
 export const headlineVersionStyles: Record<
   HeadlineVersion,
   {
-    wrapper: string;
     title: HeadingCommonProps;
     descriptionSize: TextSize | TitleSize;
+    descriptionStyle: string;
   }
 > = {
   XXL: {
-    wrapper: 'gap-[18px]',
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
+    descriptionStyle: 'mt-5',
   },
   XL: {
-    wrapper: 'gap-4',
     title: { headingType: 'h1', as: 'h1' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-4',
   },
   L: {
-    wrapper: 'gap-4',
     title: { headingType: 'h2', as: 'h2' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-4',
   },
   M: {
-    wrapper: 'gap-3',
     title: { headingType: 'h3', as: 'h3' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-3',
   },
   S: {
-    wrapper: 'gap-2',
     title: { headingType: 'h4', as: 'h4' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-2',
   },
   XS: {
-    wrapper: 'gap-2',
     title: { headingType: 'h5', as: 'h5' },
     descriptionSize: 'text-l-light',
+    descriptionStyle: 'mt-2',
   },
 };
 

package/mobile/src/hooks/useForm.ts

@@ -32,22 +32,25 @@ export const useForm = <FormState extends Record<string, any>>(
 
   const handlersMap = useRef<Partial<Record<keyof FormState, (value: any) => void>>>({});
 
-  const field: FormFieldRegisterer<FormState> = (fieldName) => {
-    if (!handlersMap.current) {
-      handlersMap.current = {};
-    }
+  const field: FormFieldRegisterer<FormState> = useCallback(
+    (fieldName) => {
+      if (!handlersMap.current) {
+        handlersMap.current = {};
+      }
 
-    handlersMap.current[fieldName] ||= (value) => {
-      setFormState((prev) => ({ ...prev, [fieldName]: value }));
-      setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
-    };
+      handlersMap.current[fieldName] ||= (value) => {
+        setFormState((prev) => ({ ...prev, [fieldName]: value }));
+        setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
+      };
 
-    return {
-      value: formState[fieldName],
-      isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
-      onChange: handlersMap.current[fieldName],
-    };
-  };
+      return {
+        value: formState[fieldName],
+        isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
+        onChange: handlersMap.current[fieldName],
+      };
+    },
+    [formState, isDirtyForm, dirtyFieldsMap],
+  );
 
   const reset = useCallback(() => {
     setFormState(initialState);

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

@@ -18,10 +18,14 @@ export const Checkbox = JSX<CheckboxProps>(
   ({ className, value, text, disabled, isRadio, onChange }) => {
     const handleChange = useCallback(
       (e: PreventableEvent) => {
+        if (disabled) {
+          return;
+        }
+
         e.preventDefault();
         onChange && onChange(!value);
       },
-      [onChange, value],
+      [onChange, disabled, value],
     );
 
     const icon = isRadio ? (