@redneckz/wildless-cms-uni-blocks 0.3.69 → 0.3.71

package/src/components/TextBlock/TextBlock.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { TextBlock } from './TextBlock';
 import { TextBlockContent } from './TextBlockContent';
 
@@ -19,96 +19,74 @@ export const TEXT_BLOCK: TextBlockContent = {
 };
 
 export default {
-  default: (
+  'private clients': (
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
-        <div>
-          <p>Private clients</p>
-          <div className="flex flex-col gap-6" data-theme="pc">
-            <TextBlock
-              context={context}
-              {...TEXT_BLOCK}
-              blockVersion="primary"
-              iconVersion="small"
-            />
-            <TextBlock
-              context={context}
-              {...TEXT_BLOCK}
-              blockVersion="primary"
-              iconVersion="big"
-              image={image}
-            />
-            <TextBlock
-              context={context}
-              {...TEXT_BLOCK}
-              blockVersion="primary"
-              iconVersion="none"
-            />
-            <TextBlock
-              context={context}
-              {...TEXT_BLOCK}
-              blockVersion="primary"
-              iconVersion="small"
-            />
-            <TextBlock
-              context={context}
-              {...TEXT_BLOCK}
-              blockVersion="secondary"
-              iconVersion="small"
-            />
-            <TextBlock
-              context={context}
-              {...TEXT_BLOCK}
-              blockVersion="secondary-light"
-              iconVersion="small"
-            />
-          </div>
+        <div className="flex flex-col gap-6" data-theme="pc">
+          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+          <TextBlock
+            context={context}
+            {...TEXT_BLOCK}
+            blockVersion="primary"
+            iconVersion="big"
+            image={image}
+          />
+          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
+          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+          <TextBlock
+            context={context}
+            {...TEXT_BLOCK}
+            blockVersion="secondary"
+            iconVersion="small"
+          />
+          <TextBlock
+            context={context}
+            {...TEXT_BLOCK}
+            blockVersion="secondary-light"
+            iconVersion="small"
+          />
         </div>
-        <div>
-          <p>Business clients</p>
-          <div className="flex flex-col gap-6" data-theme="bc">
-            <TextBlock
-              context={context}
-              {...TEXT_BLOCK}
-              blockVersion="primary"
-              iconVersion="small"
-            />
-            <TextBlock
-              context={context}
-              {...TEXT_BLOCK}
-              blockVersion="secondary"
-              iconVersion="small"
-            />
-            <TextBlock
-              context={context}
-              {...TEXT_BLOCK}
-              blockVersion="secondary-light"
-              iconVersion="small"
-            />
-          </div>
+      </div>
+    </div>
+  ),
+  'business clients': (
+    <div className="container grid grid-cols-12">
+      <div className="font-sans overflow-hidden col-span-12">
+        <div className="flex flex-col gap-6" data-theme="bc">
+          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+          <TextBlock
+            context={context}
+            {...TEXT_BLOCK}
+            blockVersion="secondary"
+            iconVersion="small"
+          />
+          <TextBlock
+            context={context}
+            {...TEXT_BLOCK}
+            blockVersion="secondary-light"
+            iconVersion="small"
+          />
         </div>
-        <div>
-          <p>Ecosystem own</p>
-          <div className="flex flex-col gap-6" data-theme="eo">
-            <TextBlock
-              context={context}
-              {...TEXT_BLOCK}
-              blockVersion="primary"
-              iconVersion="small"
-            />
-            <TextBlock
-              context={context}
-              {...TEXT_BLOCK}
-              blockVersion="secondary"
-              iconVersion="small"
-            />
-            <TextBlock
-              context={context}
-              {...TEXT_BLOCK}
-              blockVersion="secondary-light"
-              iconVersion="small"
-            />
-          </div>
+      </div>
+    </div>
+  ),
+  'ecosystem own': (
+    <div className="container grid grid-cols-12">
+      <div className="font-sans overflow-hidden col-span-12">
+        <div className="flex flex-col gap-6" data-theme="eo">
+          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+          <TextBlock
+            context={context}
+            {...TEXT_BLOCK}
+            blockVersion="secondary"
+            iconVersion="small"
+          />
+          <TextBlock
+            context={context}
+            {...TEXT_BLOCK}
+            blockVersion="secondary-light"
+            iconVersion="small"
+          />
         </div>
       </div>
     </div>

package/src/components/Tile/Tile.example.json

@@ -11,6 +11,7 @@
     "alt": "",
     "title": ""
   },
+  "isDotted": true,
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
     {

package/src/components/Tile/Tile.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Tile } from './Tile';
 import type { TileContent } from './TileContent';
 
@@ -30,6 +30,7 @@ const image4: Picture = {
 export const TILE: TileContent = {
   title: 'Кредиты',
   headingType: 'h3',
+  isDotted: false,
   items: ['До 3 млн ₽', 'до 5 лет'],
   buttons: [
     {

package/src/components/Tile/Tile.tsx

@@ -30,6 +30,7 @@ export const Tile = JSX<TileProps>((props) => {
     children,
     buttons,
     image,
+    isDotted = true,
     className = '',
     version = 'primary',
     role,
@@ -75,16 +76,17 @@ export const Tile = JSX<TileProps>((props) => {
           />
         ) : null}
         {children}
-        {renderList(items, version)}
+        {renderList(items, version, isDotted)}
       </BaseTile>
     </section>
   );
 });
 
-function renderList(items, version) {
+function renderList(items, version, isDotted: boolean) {
   return items?.length ? (
     <List
       items={items}
+      isDotted={isDotted}
       itemClassName="text-title-2xs font-light mt-2"
       version={version === 'primary' ? 'tile' : 'tile-white'}
     />

package/src/components/Tile/TileContent.ts

@@ -14,5 +14,10 @@ export type TileContent = HeadingContent &
   ListContent &
   ButtonContent &
   ImageContent & {
+    /**
+     *  @title Буллиты
+     *  @default true
+     */
+    isDotted?: boolean;
     version?: BlockVersion;
   };

package/src/content-page-repository/mapJSON.ts

@@ -1,23 +1,27 @@
 export async function mapJSON<T>(
   data: T,
   mapper: <In, Out = In>(value: In, key: string[]) => Promise<Out>,
-  key: string[] = [],
+  keyParts: string[] = [],
 ): Promise<T> {
-  if (data === null || data === undefined) return data;
+  if (data === null || data === undefined) {
+    return data;
+  }
 
-  const mappedData = await mapper(data, key);
-  if (mappedData !== data) return mappedData as T;
+  const mappedData = await mapper(data, keyParts);
+  if (mappedData !== data) {
+    return mappedData as T;
+  }
 
   if (Array.isArray(data)) {
-    const values = data.map((_, i) => mapJSON(_, mapper, [String(i)].concat(key)));
+    const values = data.map((_, i) => mapJSON(_, mapper, [String(i)].concat(keyParts)));
     return Promise.all(values) as any;
   } else if (typeof data === 'object' && (data as any).toString() === '[object Object]') {
     const subKeys = Object.keys(data as any);
-    const values = subKeys.map((k) => mapJSON(data[k], mapper, [k].concat(key)));
+    const values = subKeys.map((k) => mapJSON(data[k], mapper, [k].concat(keyParts)));
     const pairs = (await Promise.all(values)).map((_, i) => ({
       [subKeys[i]]: _,
     }));
     return Object.assign({}, ...pairs);
   }
-  return mapper<T>(data, key);
+  return mapper<T>(data, keyParts);
 }

package/src/content-page-repository/transformMarkdown.ts

@@ -3,7 +3,9 @@ import remarkParse from 'remark-parse';
 import remarkHtml from 'remark-html';
 
 export async function transformMarkdown(markdown: string | null | undefined): Promise<string> {
-  if (!markdown) return '';
+  if (!markdown) {
+    return '';
+  }
 
   const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
   return result.toString('utf-8');

package/src/content-page-repository/transformPicture.ts

@@ -36,12 +36,15 @@ async function transformImg(
 
   const imgPath = `${path.dirname(pagePath)}/${src}`;
   let chain = sharp(imgPath);
-  if (size)
+  if (size) {
     chain = chain.resize(size?.width, size?.height, {
       fit: sharp.fit.contain,
       background: [0, 0, 0, 0],
     });
-  if (format) chain = chain.toFormat(format, options);
+  }
+  if (format) {
+    chain = chain.toFormat(format, options);
+  }
 
   const transformedSrc = transformSrc(src, transformationOptions);
   const transformedImgPath = `${publicDir}/${path.relative(
@@ -62,7 +65,9 @@ async function transformImg(
 
 function transformSrc(src: string, { format, size }: TransformationOptions & ImgSource): string {
   const noTransform = !format && !size;
-  if (noTransform) return src;
+  if (noTransform) {
+    return src;
+  }
 
   const suffix = [size?.width, size?.height].filter(Boolean).join('-');
   return `${path.basename(src, path.extname(src))}${suffix ? `-${suffix}` : ''}.${

package/src/hooks/useCreditCalculatorData.ts

@@ -1,15 +1,14 @@
 import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
-import { CreditCalculatorData } from '../components/CreditCalculator/CreditCalculatorContent';
 
 export function useCreditCalculatorData(
   useAsyncData: AsyncDataHook,
   directoryName: string | undefined,
-): CreditCalculatorData {
+): any {
   const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
   return data || {};
 }
 
-async function fetchCreditCalculatorData(url: string): Promise<CreditCalculatorData> {
+async function fetchCreditCalculatorData(url: string): Promise<any> {
   const response = await fetch(url);
   return await response.json();
 }

package/src/hooks/useExchangeRates.ts

@@ -1,25 +1,85 @@
 import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
-import { ExchangeCurrencyItem } from '../components/ExchangeRateTile/ExchangeRateTileContent';
+import type { ExchangeCurrencyItem } from '../components/ExchangeRateTile/ExchangeCurrencyCalculator';
 
-interface ExchangeRatesData {
-  exchangeRate?: {
-    currencies?: ExchangeCurrencyItem[];
-  };
+interface RatesData {
+  code: string;
+  rate_buy: number;
+  rate_sell: number;
 }
 
-export function useExchangeRates(useAsyncData: AsyncDataHook): ExchangeRatesData {
+export function useExchangeRates(useAsyncData: AsyncDataHook): ExchangeCurrencyItem[] {
   const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
 
-  return data || {};
+  const result = data?.hits?.hits?.map((_) => _._source) || [];
+  return result.length ? getCurrencyListByRate(result) : result;
 }
 
-async function fetchExchangeRates(): Promise<ExchangeRatesData | undefined> {
+async function fetchExchangeRates(): Promise<any | undefined> {
   try {
-    const response = await fetch(EXCHANGE_RATES_URL);
+    const response = await fetch(EXCHANGE_RATES_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(EXCHANGE_RATES_BODY),
+    });
     return await response.json();
   } catch (err) {
     console.error(err);
   }
 }
 
-const EXCHANGE_RATES_URL = '/api/v1/exchangerates.json';
+const EXCHANGE_RATES_URL =
+  'https://coins.rshb.ru/api/catalog/vue_storefront_magento_1_currency_rates_average/currency_rates_average/_search?size=10000';
+
+const EXCHANGE_RATES_BODY = {
+  query: {
+    bool: {
+      must: [
+        {
+          term: {
+            // eslint-disable-next-line camelcase
+            russian_region_code: '77',
+          },
+        },
+        {
+          term: {
+            // eslint-disable-next-line camelcase
+            from_volume: '0',
+          },
+        },
+        {
+          terms: {
+            // eslint-disable-next-line camelcase
+            currency_pair: ['USD/RUB', 'EUR/RUB'],
+          },
+        },
+      ],
+    },
+  },
+};
+
+interface FormatRatesData {
+  code: string;
+  buy?: number;
+  sell?: number;
+}
+
+const getCurrencyListByRate = (currencyRates: RatesData[]) =>
+  currencyRates.reduce((result: FormatRatesData[], _) => {
+    const currencyInfo = _['currency_first'];
+    if (!validateRate(_['rate_buy']) && !validateRate(_['rate_sell'])) {
+      return result;
+    }
+    const currencyCode = currencyInfo.code;
+    if (!result.some((i) => i.code === currencyCode)) {
+      result.push({
+        code: currencyCode,
+        buy: Number(_.rate_buy),
+        sell: Number(_.rate_sell),
+      });
+    }
+    return result;
+  }, []);
+
+const validateRate = (value) => Math.round(value) > 0;

package/src/hooks/useTableArrowScrollControl.ts

@@ -11,12 +11,12 @@ export const useTableArrowScrollControl = ({
   activeCardIndex: number;
   setActiveCardIndex: (_: number) => void;
 }): Required<TableArrowScrollControlProps> => {
-  const onNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-  const onPrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
 
   const isScrollAvailable = columnsLength > colsLengthForScroll;
   const showNextButton = isScrollAvailable && columnsLength - activeCardIndex > colsLengthForScroll;
   const showPrevButton = Boolean(isScrollAvailable && activeCardIndex > 0);
 
-  return { onNextClick, onPrevClick, isScrollAvailable, showNextButton, showPrevButton };
+  return { handleNextClick, handlePrevClick, isScrollAvailable, showNextButton, showPrevButton };
 };

package/src/icons/DoneIcon.svg

@@ -0,0 +1,4 @@
+<svg title="Зелёная 'галочка'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" fill="#42AB44"/>
+<path d="M7 13.0047L9.7242 16L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/IconName.ts

@@ -32,6 +32,7 @@ export enum IconMap {
   DocsIcon = 'DocsIcon',
   DocumentTextIcon = 'DocumentTextIcon',
   DollarIcon = 'DollarIcon',
+  DoneIcon = 'DoneIcon',
   EarthIcon = 'EarthIcon',
   EmptyWalletChangeIcon = 'EmptyWalletChangeIcon',
   EmptyWalletIcon = 'EmptyWalletIcon',
@@ -113,6 +114,7 @@ export enum IconTitleMap {
   DocsIcon = 'Документы',
   DocumentTextIcon = 'Документ с текстом',
   DollarIcon = 'Доллар',
+  DoneIcon = "Зелёная 'галочка'",
   EarthIcon = 'Земля',
   EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом',
   EmptyWalletIcon = 'Пустой кошелёк',
@@ -168,7 +170,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
 export type IconName =
@@ -203,6 +205,7 @@ export type IconName =
   | 'DocsIcon'
   | 'DocumentTextIcon'
   | 'DollarIcon'
+  | 'DoneIcon'
   | 'EarthIcon'
   | 'EmptyWalletChangeIcon'
   | 'EmptyWalletIcon'

package/src/model/Insurance.ts

@@ -0,0 +1,6 @@
+export interface InsuranceProps {
+  /** @title Ежемесячный лимит */
+  monthLimit?: number;
+  /** @title Страховая сумма */
+  sum?: number;
+}

package/src/react/IntersectionObserverTag.tsx

@@ -0,0 +1,23 @@
+import { FC, useCallback, useRef } from 'react';
+import { IntersectionObserverTagProps } from '../components/ContentPage/ContentPageContext';
+
+export const IntersectionObserverTag: FC<IntersectionObserverTagProps> = (props) => {
+  const { Tag, observerCallback, observerOptions, children, ...rest } = props;
+
+  const intersectionObserver = useRef<IntersectionObserver>();
+  const ref = useCallback(
+    (tag: HTMLElement | null | undefined) => {
+      if (tag && !intersectionObserver.current) {
+        intersectionObserver.current = new IntersectionObserver(observerCallback, observerOptions);
+        intersectionObserver.current.observe(tag);
+      }
+    },
+    [observerCallback, observerOptions],
+  );
+
+  return (
+    <Tag ref={ref} {...rest}>
+      {children}
+    </Tag>
+  );
+};

package/src/{setup-fixture.ts → react/setup-fixture.ts}

@@ -2,8 +2,9 @@ import { setup } from '@redneckz/uni-jsx';
 
 import { useEffect, useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { DaDataAPI } from './api/DaDataAPI';
-import type { ContentPageContext } from './components/ContentPage/ContentPageContext';
+import { DaDataAPI } from '../api/DaDataAPI';
+import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
+import { IntersectionObserverTag } from './IntersectionObserverTag';
 
 setup(jsx, jsxs);
 
@@ -28,6 +29,7 @@ const Router = () => {
     },
   };
 };
+
 export const context: ContentPageContext = {
   useState,
   useRouter: Router,
@@ -78,6 +80,7 @@ export const context: ContentPageContext = {
       setTerm: (text: string) => setTerm(text),
     };
   },
+  IntersectionObserverTag,
 };
 
 export const mobileContext: ContentPageContext = {

package/src/services/sitemap/isHrefActive.ts

@@ -4,7 +4,8 @@ import { withoutMobilePath } from '../../utils/withoutMobilePath';
 export const isHrefActive = (
   href: string | undefined,
   router: { pathname?: string; href?: string },
-  cmp: (href: string, baseHref: string) => boolean = (href, baseHref) => baseHref.startsWith(href),
+  cmp: (targetHref: string, baseHref: string) => boolean = (targetHref, baseHref) =>
+    baseHref.startsWith(targetHref),
 ) => {
   return cmp(
     withoutQuery(href),

package/src/ui-kit/Button/ArrowButton.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonProps } from './ButtonProps';
 import { Button } from './Button';
-import { ButtonProps } from './ButtonProps';
 import { Img } from '../Img/Img';
 
 export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (

package/src/ui-kit/Button/Button.fixture.mobile.tsx

@@ -1,4 +1,4 @@
-import '../../setup-fixture';
+import '../../react/setup-fixture';
 
 import { Button } from './Button';
 

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

@@ -1,4 +1,4 @@
-import '../../setup-fixture';
+import '../../react/setup-fixture';
 import { Img } from '../Img/Img';
 import { Button } from './Button';
 

package/src/ui-kit/Button/ButtonSection.tsx

@@ -20,7 +20,9 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
 });
 
 function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
-  if (!button?.text) return;
+  if (!button?.text) {
+    return;
+  }
 
   return icon ? (
     <Button

package/src/ui-kit/Button/renderArrows.tsx

@@ -0,0 +1,41 @@
+import { ArrowButton } from './ArrowButton';
+import type { FuncReturnVoid } from '../../types';
+
+type renderArrowsProps = {
+  handler: FuncReturnVoid<MouseEvent>[];
+  isShown: [boolean, boolean];
+  btnClass: [string, string];
+  className?: string;
+  isDisabled?: boolean;
+};
+
+export function renderArrows({
+  handler,
+  isShown,
+  btnClass,
+  className = '',
+  isDisabled = false,
+}: renderArrowsProps) {
+  return (
+    <div>
+      {isShown[0] || isDisabled ? (
+        <ArrowButton
+          className={`absolute z-10 ${btnClass[0]} ${className}`}
+          onClick={handler[0]}
+          ariaLabel="Пролистать влево"
+          data-block-control="scroll-left"
+          disabled={!isShown[0]}
+        />
+      ) : null}
+      {isShown[1] || isDisabled ? (
+        <ArrowButton
+          className={`absolute z-10 rotate-180 ${btnClass[1]} ${className}`}
+          onClick={handler[1]}
+          ariaLabel="Пролистать вправо"
+          data-block-control="scroll-right"
+          disabled={!isShown[1]}
+        />
+      ) : null}
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import '../../setup-fixture';
+import '../../react/setup-fixture';
 
 import { HeaderItem } from './HeaderItem';
 

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

@@ -1,6 +1,6 @@
-import '../../setup-fixture';
-import { Icon } from './Icon';
 import { IconMap } from '../../icons/IconName';
+import '../../react/setup-fixture';
+import { Icon } from './Icon';
 
 export default {
   'all (as img)': (