@redneckz/wildless-cms-uni-blocks 0.13.6 → 0.13.8

package/src/components/Calculator/useRefinancingCalculatorParams.ts

@@ -1,12 +1,11 @@
 import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import { clamp } from '../../utils/clamp';
-import { DEFAULT_REFINANCING_CALCULATOR_PARAMS, REFINANCING_CALC_DEFAULT_DIR } from './constants';
-import { getLimitRangeByKeys } from './rangeHelpers';
-import { useCalculatorParams } from './useCalculatorParams';
 import { RefinancingCalculatorParamsViewSettings } from './CalculatorContent';
+import { DEFAULT_REFINANCING_CALCULATOR_PARAMS, REFINANCING_CALC_DEFAULT_DIR } from './constants';
+import { getMonthlyPayment } from './getMonthlyPayment';
 import { getRefinancingCalculatorLimitParams } from './getRefinancingCalculatorLimitParams';
 import { getRefinancingCalculatorRateParams } from './getRefinancingCalculatorRateParams';
-import { getMonthlyPayment } from './getMonthlyPayment';
+import { getLimitRangeByKeys } from './rangeHelpers';
+import { useCalculatorParams } from './useCalculatorParams';
 
 export interface CommonRefinancingParams {
   isSalaryClient: boolean;
@@ -61,7 +60,7 @@ export const useRefinancingCalculatorParams = (
   sourceBookDir?: string,
   paramsViewSettings?: RefinancingCalculatorParamsViewSettings,
 ): RefinancingCalculatorParams => {
-  let { moneyValue, monthsValue, oldMonthlyPayment, moneyExtra } = userInputParams;
+  const { moneyValue, monthsValue, oldMonthlyPayment, moneyExtra } = userInputParams;
   const data = useCalculatorParams<RefinancingCalculatorData>(
     sourceBookDir || REFINANCING_CALC_DEFAULT_DIR,
   );
@@ -79,29 +78,12 @@ export const useRefinancingCalculatorParams = (
     rateRows,
   );
 
-  const { minSumOld, maxSumOld } = getLimitRangeByKeys(
-    ['minSumOld', 'maxSumOld'],
-    sourceBookLimitParams,
-    rateRows,
-  );
-
-  const { minSumExtra, maxSumExtra } = getLimitRangeByKeys(
-    ['minSumExtra', 'maxSumExtra'],
-    sourceBookLimitParams,
-    rateRows,
-  );
-
   const { minMonths, maxMonths } = getLimitRangeByKeys(
     ['minMonths', 'maxMonths'],
     sourceBookLimitParams,
     rateRows,
   );
 
-  moneyValue = clamp(moneyValue, minSum, maxSum);
-  oldMonthlyPayment = clamp(oldMonthlyPayment, minSumOld, maxSumOld);
-  moneyExtra = clamp(moneyExtra, minSumExtra, maxSumExtra);
-  monthsValue = clamp(monthsValue, minMonths, maxMonths);
-
   const refinancingCalculatorSourceBookRateParams = getRefinancingCalculatorRateParams({
     rateRows,
     userInputParams,

package/src/components/Carousel/CarouselContent.ts

@@ -2,9 +2,9 @@ import type { UniBlockContent } from '../../model/JSXBlock';
 
 /**
  * @title Размер карточек
- * @enumNames ["Нормальный", "Большой"]
+ * @enumNames ["Маленький", "Нормальный", "Большой"]
  */
-export type CardSizeMode = 'normal' | 'big';
+export type CardSizeMode = 'small' | 'normal' | 'big';
 
 /**
  * @title Карусель

package/src/components/Carousel/renderCarouselCards.tsx

@@ -10,6 +10,7 @@ import type { CardSizeMode } from './CarouselContent';
 const cardBaseStyle = 'relative h-full';
 
 const CARD_SIZE_MAP: Record<CardSizeMode, string> = {
+  small: 'sm:min-w-64',
   normal: 'sm:min-w-96',
   big: 'sm:min-w-[515px]',
 };

package/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -1,11 +1,10 @@
 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 { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
-import { Text } from '../../ui-kit/Text/Text';
 import type { CarouselEventCardContent } from './CarouselEventCardContent';
+import { Headline } from '../Headline/Headline';
 
 export interface CarouselEventCardProps extends CarouselEventCardContent, UniBlockProps {}
 
@@ -16,16 +15,15 @@ export const CarouselEventCard = JSX<CarouselEventCardProps>(
         <LinkWrapper className="flex flex-col" href={href} target={target}>
           {icon?.icon ? <Img image={icon} /> : null}
           {icon?.src ? <Img image={icon} /> : null}
-          {title ? (
-            <Heading headingType="h6" as="h4" className="text-left mt-s ml-s mb-xs" title={title} />
-          ) : null}
-          {description ? (
-            <div className="ml-s mb-m">
-              <Text font="font-light" size="text-m" color="text-secondary-text">
-                {description}
-              </Text>
-            </div>
-          ) : null}
+          <div className="p-s">
+            <Headline
+              title={title}
+              description={description}
+              headlineVersion="XS"
+              isEmbedded={true}
+              align="text-left"
+            />
+          </div>
         </LinkWrapper>
       </BlockWrapper>
     );

package/src/components/ErrorBlock/ErrorBlock.tsx

@@ -1,12 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { Text } from '../../ui-kit/Text/Text';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import type { ErrorBlockContent } from './ErrorBlockContent';
+import { Headline } from '../Headline/Headline';
 
 export interface ErrorBlockProps extends ErrorBlockContent, UniBlockProps {}
 
@@ -33,14 +32,7 @@ export const ErrorBlock = JSX<ErrorBlockProps>(
       {...rest}
     >
       <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
-      {title ? <Heading headingType="h1" className="text-left" title={title} /> : null}
-      {subtitle ? (
-        <div className="max-w-[613px] text-center">
-          <Text size="text-xl" font="font-light">
-            {subtitle}
-          </Text>
-        </div>
-      ) : null}
+      <Headline title={title} description={subtitle} headlineVersion="XL" isEmbedded={true} />
       {button?.text ? (
         <Button className="py-4 px-9" version={button?.version} {...button}>
           {button.text}

package/src/components/Footer/TextInformation.tsx

@@ -2,16 +2,17 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Text } from '../../ui-kit/Text/Text';
 import type { FooterLink } from './FooterLink';
 import { TextInformationLink } from './TextInformationLink';
+import { style } from '../../utils/style';
 
 export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
-  <div className={className}>
+  <div className={style('@container', className)}>
     <div className="pt-lg">
       <Text size="text-xs" font="font-light" color="text-secondary-text">
         {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
       </Text>
     </div>
     {links?.length ? (
-      <div className="flex flex-col sm:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg">
+      <div className="flex flex-col @lg:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg">
         {links.map((_, i) => (
           <TextInformationLink key={String(i)} index={i} {..._} />
         ))}

package/src/components/HorizontalLayout/HorizontalLayout.fixture.tsx

@@ -82,4 +82,25 @@ export default {
       />
     </div>
   ),
+  'with card border': (
+    <div className="container grid grid-cols-12">
+      <HorizontalLayout
+        className="col-span-12"
+        isCardBorder={true}
+        block={{
+          type: 'HorizontalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+            { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+          ],
+        }}
+        options={options}
+        version="primary"
+      />
+    </div>
+  ),
 };

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -6,7 +6,7 @@ import { style } from '../../utils/style';
 import { gapStyles } from './gapStyles';
 import type { HorizontalLayoutContent } from './HorizontalLayoutContent';
 
-export interface HorizontalLayoutProps extends HorizontalLayoutContent, UniBlockProps {}
+interface HorizontalLayoutProps extends HorizontalLayoutContent, UniBlockProps {}
 
 export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalLayoutProps>(
   ({
@@ -15,6 +15,7 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
     isPadding = false,
     version = 'transparent',
     isTheme = false,
+    isCardBorder,
     ...rest
   }) => (
     <BlockWrapper
@@ -24,7 +25,14 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
       isTheme={isTheme}
       {...rest}
     >
-      {renderChildren(rest)}
+      {renderChildren({
+        ...rest,
+        extraProps: {
+          className: isCardBorder
+            ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
+            : '',
+        },
+      })}
     </BlockWrapper>
   ),
 );

package/src/components/HorizontalLayout/HorizontalLayoutContent.ts

@@ -13,6 +13,8 @@ export type GapVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS' | '';
 export type HorizontalLayoutContent = UniBlockContent & {
   colorPalette?: ColorPalette;
   gap?: GapVersion;
+  /** @title контур на дочерних элементах */
+  isCardBorder?: boolean;
   /** @title Внутренний отступ компоновщика */
   isPadding?: boolean;
 };

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -83,7 +83,7 @@ const renderInvestmentColumn = (
       {column.cells?.length ? (
         <div
           className={`w-full ${
-            isLastColumn ? 'border-4 border-green-more-dark p-2xs min-w-[292px]' : ''
+            isLastColumn ? 'border-4 border-green-more-dark p-2xs min-w-72' : ''
           }`}
         >
           {column.cells.reverse().map(renderInvestmentCell)}

package/src/components/MortgageFiltration/MortgageFiltration.fixture.tsx

@@ -4,7 +4,10 @@ import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOpti
 import { Blocks } from '../Blocks';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
 import { MortgageFiltration } from './MortgageFiltration';
-import type { HotFilterButton, MortgageFiltrationContent } from './MortgageFiltrationContent';
+import type {
+  MortgageFiltrationContent,
+  MortgageFiltrationHotFilter,
+} from './MortgageFiltrationContent';
 
 const PROPERTY_APARTMENT = {
   propertyType: ['apartment'],
@@ -101,7 +104,7 @@ const SCHEMA: MortgageFiltrationContent['filtrationSchema'] = {
   },
 };
 
-const HOT_FILTERS: HotFilterButton[] = [
+const HOT_FILTERS: MortgageFiltrationHotFilter[] = [
   { text: 'Все программы' },
   {
     text: 'Льготные программы',

package/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -1,60 +1,45 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
 import { renderFiltrationForm } from '../../ui-kit/BaseFiltration/renderFiltrationForm';
+import { useHotFilters } from '../../ui-kit/BaseFiltration/useHotFilters';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { TabItemBase } from '../../ui-kit/TabsControl/TabItem';
 import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
 import { style } from '../../utils/style';
-import { hotFilterRecordCmp } from './HotFilterRecord';
 import type {
   MortgageFiltrationContent,
   MortgageFiltrationSchema,
 } from './MortgageFiltrationContent';
 
-interface MortgageFiltrationProps extends MortgageFiltrationContent, UniBlockProps {}
+type MortgageFiltrationState = Partial<Record<keyof MortgageFiltrationSchema, string[]>>;
 
-const initialFiltrationState: Partial<Record<keyof MortgageFiltrationSchema, string[]>> = {
+const initialFiltrationState: MortgageFiltrationState = {
   categories: [],
   extraOptions: [],
   propertyType: [],
   stage: [],
 };
 
+interface MortgageFiltrationProps extends MortgageFiltrationContent, UniBlockProps {}
+
 export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<MortgageFiltrationProps>(
-  ({ className, hotFilters = [], filtrationSchema = {}, resetButton, ...rest }) => {
+  ({ className, hotFilters, filtrationSchema = {}, resetButton, ...rest }) => {
     const [filtrationState, { field, reset, update: replaceFiltrationState }] =
       useForm(initialFiltrationState);
 
-    const tabsControlItems: TabItemBase[] = useMemo(
-      () =>
-        hotFilters.map(({ text }) => ({
-          text,
-        })),
-      [hotFilters],
+    const handleFiltrationStateChange = useCallback(
+      (_: MortgageFiltrationState = initialFiltrationState) => replaceFiltrationState(_),
+      [],
     );
 
-    const [hotFilterIndex, setHotFilterIndex] = useState(0);
-
-    const handleHotFilterSelect = useCallback(
-      (_: TabItemBase) => {
-        setHotFilterIndex(tabsControlItems.indexOf(_));
-        replaceFiltrationState(
-          hotFilters[tabsControlItems.indexOf(_)].filter || initialFiltrationState,
-        );
-      },
-      [hotFilters, tabsControlItems],
-    );
-
-    useEffect(() => {
-      const suggestedHotFilterIndex = hotFilters.findIndex((_) =>
-        hotFilterRecordCmp(_.filter, filtrationState),
-      );
-
-      setHotFilterIndex(suggestedHotFilterIndex !== -1 ? suggestedHotFilterIndex : 0);
-    }, [hotFilters, filtrationState]);
+    const tabsControlProps = useHotFilters({
+      hotFilters,
+      filtrationState,
+      blocks: rest.block?.blocks,
+      onFiltrationStateChange: handleFiltrationStateChange,
+    });
 
     return (
       <BlockWrapper
@@ -63,12 +48,7 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
         version="transparent"
         {...rest}
       >
-        <TabsControl
-          className="mb-2xs"
-          items={tabsControlItems}
-          value={tabsControlItems[hotFilterIndex]}
-          onChange={handleHotFilterSelect}
-        />
+        <TabsControl {...tabsControlProps} />
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}
         <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
       </BlockWrapper>

package/src/components/MortgageFiltration/MortgageFiltrationContent.ts

@@ -2,7 +2,7 @@ import type {
   BaseFiltrationInnerContent,
   StringArray,
 } from '../../ui-kit/BaseFiltration/BaseFiltrationContent';
-import type { HotFilterRecord } from './HotFilterRecord';
+import type { HotFilterBase } from '../../ui-kit/BaseFiltration/HotFilterBase';
 
 export type MortgageFiltrationSchema = {
   /** @title Тип недвижимости */
@@ -15,14 +15,18 @@ export type MortgageFiltrationSchema = {
   extraOptions?: StringArray;
 };
 
-/**
- * @title Кнопка фильтрации
- */
-export interface HotFilterButton {
-  /** @title Текст */
-  text?: string;
+export interface MortgageFiltrationHotFilter extends HotFilterBase {
   /** @title Применяемые фильтры */
-  filter?: HotFilterRecord;
+  filter?: {
+    /** @title Тип недвижимости */
+    propertyType?: string[];
+    /** @title Этап строительства */
+    stage?: string[];
+    /** @title Категории */
+    categories?: string[];
+    /** @title Дополнительно */
+    extraOptions?: string[];
+  };
 }
 
 /**
@@ -32,5 +36,5 @@ export interface MortgageFiltrationContent extends BaseFiltrationInnerContent {
   /** @title Параметры фильтрации */
   filtrationSchema?: MortgageFiltrationSchema;
   /** @title Горячие фильтры */
-  hotFilters?: HotFilterButton[];
+  hotFilters?: MortgageFiltrationHotFilter[];
 }

package/src/ui-kit/Badge/Badge.fixture.tsx

@@ -0,0 +1,24 @@
+import '../../setup-fixture';
+
+import { Badge } from './Badge';
+
+export default {
+  default: (
+    <div className="container grid-cols-12">
+      <section className="col-span-12 bg-white p-6xl">
+        <button className="p-xs border-2 border-green rounded-md flex justify-center w-52 mb-3xs">
+          <div className="mr-2xs">
+            <span>Какой-то текст</span>
+          </div>
+          <Badge count={3} />
+        </button>
+        <button className="p-xs border-2 border-green bg-green rounded-md flex justify-center w-52 text-white">
+          <div className="mr-2xs">
+            <span>Какой-то текст</span>
+          </div>
+          <Badge count={3} version="primary" />
+        </button>
+      </section>
+    </div>
+  ),
+};

package/src/ui-kit/Badge/Badge.tsx

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Text } from '../Text/Text';
+import type { TextColor } from '../Text/TextProps';
+
+interface BadgeProps {
+  count?: number;
+  version?: 'primary' | 'secondary';
+}
+
+const badgeBgStyleMap: Record<string, string> = {
+  primary: 'bg-white/30',
+  secondary: 'bg-main-divider',
+};
+
+const badgeTextColorStyleMap: Record<string, TextColor> = {
+  primary: 'text-white',
+  secondary: 'text-secondary-text',
+};
+
+export const Badge = JSX<BadgeProps>(({ count, version = 'secondary' }) => {
+  return (
+    <div
+      className={style(
+        'w-6 h-6 rounded-full flex items-center justify-center',
+        badgeBgStyleMap[version],
+      )}
+    >
+      <Text size="text-xs" color={badgeTextColorStyleMap[version]}>
+        {count}
+      </Text>
+    </div>
+  );
+});

package/src/ui-kit/BaseFiltration/BaseFiltrationInner.tsx

@@ -8,8 +8,7 @@ import { checkShouldRenderBlock } from '../BaseFiltration/checkShouldRenderBlock
 import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
 import { Foldable } from '../Foldable/Foldable';
 import { FoldableSection } from '../Foldable/FoldableSection';
-import { Paragraph } from '../Paragraph/Paragraph';
-import { Text } from '../Text/Text';
+import { Headline } from '../../components/Headline/Headline';
 
 const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
@@ -34,17 +33,14 @@ export const BaseFiltrationInner = JSX<BaseFiltrationInnerProps>(
         <div className={style(blocksToRender.length ? 'hidden' : 'block')}>
           {notFound ? renderNotFound(notFound) : null}
         </div>
-        <div className={style(blocksToRender.length ? '' : 'hidden')}>
-          <div className={style('mb-2xs', resultsGridStyle)}>
+        <div className={style('space-y-2xs', blocksToRender.length ? '' : 'hidden')}>
+          <div className={style(resultsGridStyle)}>
             {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
           </div>
           <Foldable
             renderFoldableSection={({ isUnfolded }) => {
               return (
-                <FoldableSection
-                  className={style(resultsGridStyle, isUnfolded ? 'mb-2xs' : '')}
-                  isUnfolded={isUnfolded}
-                >
+                <FoldableSection className={style(resultsGridStyle)} isUnfolded={isUnfolded}>
                   {renderBlocksList(hiddenBlocks, { ...rest.options, parent: block })}
                 </FoldableSection>
               );
@@ -69,18 +65,7 @@ export const BaseFiltrationInner = JSX<BaseFiltrationInnerProps>(
 function renderNotFound({ title, description }: NotFound) {
   return (
     <div className="bg-white py-20">
-      {title ? (
-        <div className="mb-xs">
-          <Paragraph align="text-center">
-            <Text size="text-h4">{title}</Text>
-          </Paragraph>
-        </div>
-      ) : null}
-      {description ? (
-        <Paragraph size="text-xl" font="font-light" align="text-center">
-          {description}
-        </Paragraph>
-      ) : null}
+      <Headline title={title} description={description} headlineVersion="S" isEmbedded={true} />
     </div>
   );
 }

package/src/ui-kit/BaseFiltration/HotFilterBase.ts

@@ -0,0 +1,7 @@
+/**
+ * @title Кнопка фильтрации
+ */
+export interface HotFilterBase {
+  /** @title Текст */
+  text?: string;
+}

package/src/ui-kit/BaseFiltration/getBadgeCount.ts

@@ -0,0 +1,6 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+import { checkShouldRenderBlock } from '../../ui-kit/BaseFiltration/checkShouldRenderBlock';
+import type { BaseFilter } from './useHotFilters';
+
+export const getBadgeCount = (blocks: BlockDef[] = [], filter: BaseFilter = {}) =>
+  blocks.filter(({ content = {} }) => checkShouldRenderBlock(filter, content)).length;

package/src/ui-kit/BaseFiltration/hotFilterRecordCmp.ts

@@ -0,0 +1,3 @@
+import { arrCmp, combineBoolCmps, objCmp, scalarCmp } from '../../utils/BoolComparator';
+
+export const hotFilterRecordCmp = objCmp<string[]>(combineBoolCmps(scalarCmp, arrCmp()));

package/src/ui-kit/BaseFiltration/renderFiltrationForm.tsx

@@ -29,7 +29,7 @@ export const renderFiltrationForm = ({
   resetButton,
   children,
 }: RenderFiltrationFormProps) => (
-  <form className="flex justify-between bg-white p-4xl mb-2xs">
+  <form className="flex justify-between bg-white p-4xl">
     <div className="flex gap-5xl">
       {children}
       {Object.entries(filtrationSchema).map(renderFormItem(field))}

package/src/ui-kit/BaseFiltration/useHotFilters.tsx

@@ -0,0 +1,65 @@
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import type { BlockDef } from '../../model/ContentPageDef';
+import { Badge } from '../Badge/Badge';
+import type { TabItemBase } from '../TabsControl/TabItem';
+import type { TabsControlProps } from '../TabsControl/TabsControlProps';
+import { getBadgeCount } from './getBadgeCount';
+import { HotFilterBase } from './HotFilterBase';
+import { hotFilterRecordCmp } from './hotFilterRecordCmp';
+
+const EMPTY_ARR = [];
+const EMPTY_OBJ = {};
+
+export type BaseFilter = HotFilterBase & {
+  filter?: Record<string, string[]>;
+};
+
+interface UseHotFiltersParams {
+  hotFilters?: BaseFilter[];
+  filtrationState?: Record<string, string[]>;
+  blocks?: BlockDef[];
+  onFiltrationStateChange: (_?: Record<string, string[]>) => void;
+}
+
+export const useHotFilters = ({
+  hotFilters = EMPTY_ARR,
+  filtrationState = EMPTY_OBJ,
+  blocks = EMPTY_ARR,
+  onFiltrationStateChange,
+}: UseHotFiltersParams): TabsControlProps => {
+  const activeItemIndex = useMemo(
+    () =>
+      Math.max(
+        0,
+        hotFilters.findIndex((_) => hotFilterRecordCmp(_.filter, filtrationState)),
+      ),
+    [hotFilters, filtrationState],
+  );
+
+  const items: TabItemBase[] = useMemo(
+    () =>
+      hotFilters.map((_) => ({
+        text: _.text,
+        appendRight: (
+          <Badge
+            version={_ === hotFilters[activeItemIndex] ? 'primary' : 'secondary'}
+            count={getBadgeCount(blocks, _.filter)}
+          />
+        ),
+      })),
+    [hotFilters, blocks, activeItemIndex],
+  );
+
+  const handleChange = useCallback(
+    (_: TabItemBase) => {
+      onFiltrationStateChange(hotFilters[items.indexOf(_)].filter);
+    },
+    [hotFilters, items],
+  );
+
+  return {
+    value: items[activeItemIndex],
+    items: items,
+    onChange: handleChange,
+  };
+};

package/src/ui-kit/BaseTile/BaseTile.tsx

@@ -66,20 +66,11 @@ export const BaseTile = JSX<BaseTileProps>(
 const renderImageContainer = (
   image: VNode | undefined,
   { className, imageAlign }: { className?: string; imageAlign?: Align },
-) => {
-  //TODO Спорное решение
-  const fullWidth = image?.props?.image?.size?.width > 400;
-
-  return image ? (
+) =>
+  image ? (
     <div
-      className={style(
-        'flex-shrink-0',
-        fullWidth ? 'w-full @xl:w-auto' : '',
-        imageAlign && imageAlignmentMap[imageAlign],
-        className,
-      )}
+      className={style('md:flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className)}
     >
       {image}
     </div>
   ) : null;
-};

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

@@ -20,8 +20,9 @@ export function renderRangeWithTicks({
   onChange,
 }: RangeWithTicksProps) {
   const rangeValue = list.length ? list.indexOf(value) : value;
+  const rangeValueShift = rangeValue > min ? rangeValue - min : 0;
   const inputStyle = {
-    backgroundSize: `${(((rangeValue - min) * 100) / (max - min)).toFixed(2)}% 100%`,
+    backgroundSize: `${((rangeValueShift * 100) / (max - min)).toFixed(2)}% 100%`,
   };
 
   return (