@redneckz/wildless-cms-uni-blocks 0.3.9 → 0.3.12

package/src/components/ProductBlock/ProductBlock.example.json

@@ -14,5 +14,15 @@
       "version": "secondary"
     }
   ],
-  "version": "primary"
+  "version": "primary",
+  "benefits": [
+    {
+      "label": "Преимущество №1",
+      "icon": "ClockIcon"
+    },
+    {
+      "label": "Преимущество №2",
+      "icon": "SignDocsIcon"
+    }
+  ]
 }

package/src/components/ProductBlock/ProductBlock.fixture.mobile.tsx

@@ -1,6 +1,8 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
+import { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -18,45 +20,68 @@ const image: Picture = {
   ],
 };
 
+const benefits = [
+  {
+    label: 'До 5 млн ₽',
+    description: 'Кредитный лимит',
+    icon: 'EmptyWalletIcon',
+  },
+  {
+    label: 'От 16,9%',
+    description: 'Ставка по кредиту',
+    icon: 'PercentageSquareIcon',
+  },
+  {
+    label: 'До 5 лет',
+    description: 'Срок кредитования',
+    icon: 'CalendarIcon',
+  },
+];
+
+const buttons = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Оформить карту',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+] as ButtonWithIconProps;
+
+const items = [
+  'Совершайте любые личные покупки',
+  'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
+  'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
+];
+
 export default {
-  primary: (
+  default: (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        title={'Кредит до 5 000 000 Р\nбез залога и поручителей'}
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits as Benefit[]}
+        buttons={buttons as ButtonWithIconProps[]}
+        image={image}
+      />
+    </div>
+  ),
+  items: (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
         title={'Кредит до 5 000 000 Р\nбез залога и поручителей'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        benefits={[
-          {
-            label: 'До 5 млн ₽',
-            description: 'Кредитный лимит',
-            icon: 'EmptyWalletIcon',
-          },
-          {
-            label: 'От 16,9%',
-            description: 'Ставка по кредиту',
-            icon: 'PercentageSquareIcon',
-          },
-          {
-            label: 'До 5 лет',
-            description: 'Срок кредитования',
-            icon: 'CalendarIcon',
-          },
-        ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Оформить карту',
-            target: '_blank',
-            version: 'primary',
-          },
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
+        items={items}
+        buttons={buttons as ButtonWithIconProps[]}
         image={image}
       />
     </div>

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -1,6 +1,8 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -12,6 +14,53 @@ const image: Picture = {
   },
 };
 
+const breadcrumbs = [
+  {
+    text: 'Главная',
+    href: '/',
+  },
+  {
+    text: 'Кредитные карты',
+    href: '/credit',
+  },
+  {
+    text: 'Кредитная карта Своя Union Pay',
+  },
+];
+
+const benefits = [
+  {
+    label: 'До 5 млн ₽',
+    description: 'Кредитный лимит',
+    icon: 'EmptyWalletIcon',
+  },
+  {
+    label: 'От 16,9%',
+    description: 'Ставка по кредиту',
+    icon: 'PercentageSquareIcon',
+  },
+  {
+    label: 'До 5 лет',
+    description: 'Срок кредитования',
+    icon: 'CalendarIcon',
+  },
+];
+
+const buttons = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Оформить карту',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -21,50 +70,9 @@ export default {
         title={'Потребительский кредит наличными'}
         headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        breadcrumbs={[
-          {
-            text: 'Главная',
-            href: '/',
-          },
-          {
-            text: 'Кредитные карты',
-            href: '/credit',
-          },
-          {
-            text: 'Кредитная карта Своя Union Pay',
-          },
-        ]}
-        benefits={[
-          {
-            label: 'До 5 млн ₽',
-            description: 'Кредитный лимит',
-            icon: 'EmptyWalletIcon',
-          },
-          {
-            label: 'От 16,9%',
-            description: 'Ставка по кредиту',
-            icon: 'PercentageSquareIcon',
-          },
-          {
-            label: 'До 5 лет',
-            description: 'Срок кредитования',
-            icon: 'CalendarIcon',
-          },
-        ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Оформить карту',
-            target: '_blank',
-            version: 'primary',
-          },
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
+        breadcrumbs={breadcrumbs}
+        benefits={benefits as Benefit[]}
+        buttons={buttons as ButtonWithIconProps[]}
         image={image}
       />
     </div>
@@ -78,51 +86,9 @@ export default {
         headingType="h2"
         version={'secondary'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        breadcrumbs={[
-          {
-            text: 'Главная',
-            href: '/',
-          },
-          {
-            text: 'Кредитные карты',
-            href: '/credit',
-          },
-          {
-            text: 'Кредитная карта Своя Union Pay',
-            href: '#',
-          },
-        ]}
-        benefits={[
-          {
-            label: 'До 5 млн ₽',
-            description: 'Кредитный лимит',
-            icon: 'EmptyWalletWhiteIcon',
-          },
-          {
-            label: 'От 16,9%',
-            description: 'Ставка по кредиту',
-            icon: 'PercentageSquareWhiteIcon',
-          },
-          {
-            label: 'До 5 лет',
-            description: 'Срок кредитования',
-            icon: 'CalendarWhiteIcon',
-          },
-        ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Оформить карту',
-            target: '_blank',
-            version: 'secondary',
-          },
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'primary',
-          },
-        ]}
+        breadcrumbs={breadcrumbs}
+        benefits={benefits as Benefit[]}
+        buttons={buttons as ButtonWithIconProps[]}
         image={image}
       />
     </div>
@@ -134,27 +100,14 @@ export default {
         context={context}
         title={'Оплата проходит \nв 180 странах мира'}
         headingType="h2"
-        breadcrumbs={[]}
+        breadcrumbs={breadcrumbs}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         items={[
           'Совершайте любые личные покупки',
           'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
           'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
         ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Оформить карту',
-            target: '_blank',
-            version: 'primary',
-          },
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
+        buttons={buttons as ButtonWithIconProps[]}
         image={image}
       />
     </div>

package/src/components/ProductBlock/ProductBlockInner.mobile.tsx

@@ -34,7 +34,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
                 <Heading
                   headingType={headingType}
                   title={title}
-                  className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}`}
+                  className="whitespace-pre-wrap max-w-[600px]"
                 />
               )
             }
@@ -48,11 +48,11 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               ) : null
             }
           >
-            {description ? <Description className="mb-5" description={description} /> : null}
-            {benefits?.length ? (
-              <div className="mt-5">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
+            {description ? <Description className="mt-3" description={description} /> : null}
+            {benefits?.filter((items) => items.label)?.length ? (
+              <div className="mt-3">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
             ) : null}
-            {items?.length ? <List items={items} /> : null}
+            {items?.length ? <List className="mt-3" items={items} /> : null}
           </BaseTile>
         </div>
         {renderImage(image)}

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -34,7 +34,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
                 <Heading
                   headingType={headingType}
                   title={title}
-                  className={`whitespace-pre-wrap mb-4 max-w-[600px]`}
+                  className="whitespace-pre-wrap max-w-[600px]"
                 />
               )
             }
@@ -45,10 +45,10 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             }
           >
             {description && (
-              <Description className="text-m-base max-w-[600px]" description={description} />
+              <Description className="text-m-base mt-4 max-w-[600px]" description={description} />
             )}
-            {benefits?.length ? (
-              <div className="flex gap-6 mt-6 mb-3.5">
+            {benefits?.filter((items) => items.label)?.length ? (
+              <div className="flex gap-6 mt-6">
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}

package/src/hooks/useCreditCalculatorData.ts

@@ -5,16 +5,12 @@ export function useCreditCalculatorData(
   useAsyncData: AsyncDataHook,
   directoryName: string | undefined,
 ): CreditCalculatorData {
-  const { data } = useAsyncData(creditCalculatorUrl(directoryName), () =>
-    fetchCreditCalculatorData(directoryName),
-  );
+  const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
   return data || {};
 }
 
-async function fetchCreditCalculatorData(
-  directoryName: string | undefined,
-): Promise<CreditCalculatorData> {
-  const response = await fetch(creditCalculatorUrl(directoryName));
+async function fetchCreditCalculatorData(url: string): Promise<CreditCalculatorData> {
+  const response = await fetch(url);
   return await response.json();
 }
 

package/src/hooks/useExchangeRates.ts

@@ -0,0 +1,25 @@
+import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
+import { ExchangeCurrencyItem } from '../components/ExchangeRateTile/ExchangeRateTileContent';
+
+interface ExchangeRatesData {
+  exchangeRate?: {
+    currencies?: ExchangeCurrencyItem[];
+  };
+}
+
+export function useExchangeRates(useAsyncData: AsyncDataHook): ExchangeRatesData {
+  const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
+
+  return data || {};
+}
+
+async function fetchExchangeRates(): Promise<ExchangeRatesData | undefined> {
+  try {
+    const response = await fetch(EXCHANGE_RATES_URL);
+    return await response.json();
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+const EXCHANGE_RATES_URL = '/api/v1/exchangerates.json';

package/src/icons/GpsIcon.svg

@@ -0,0 +1,8 @@
+<svg title="Gps" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.35107 5.45074C10.3959 4.89842 11.587 4.58569 12.8511 4.58569C16.9932 4.58569 20.3511 7.94356 20.3511 12.0857C20.3511 16.2278 16.9932 19.5857 12.8511 19.5857C8.70894 19.5857 5.35107 16.2278 5.35107 12.0857C5.35107 10.8216 5.66381 9.63055 6.21612 8.58569" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8511 15.0857C14.5079 15.0857 15.8511 13.7425 15.8511 12.0857C15.8511 10.4288 14.5079 9.08569 12.8511 9.08569C11.1942 9.08569 9.85107 10.4288 9.85107 12.0857C9.85107 13.7425 11.1942 15.0857 12.8511 15.0857Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8511 4.08569V2.08569" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.85107 12.0857H2.85107" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8511 20.0857V22.0857" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.8511 12.0857H22.8511" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/IconName.ts

@@ -2,7 +2,7 @@
 // Generated. Do not touch
 
 export enum IconMap {
-  ActualBalanceIcon = "ActualBalanceIcon", AppleIcon = "AppleIcon", AtmIcon = "AtmIcon", BankIcon = "BankIcon", BurgerIcon = "BurgerIcon", BurgerIconWhite = "BurgerIconWhite", Calendar2Icon = "Calendar2Icon", CalendarCircleIcon = "CalendarCircleIcon", CalendarIcon = "CalendarIcon", CalendarTickIcon = "CalendarTickIcon", CalendarWhiteIcon = "CalendarWhiteIcon", CardIcon = "CardIcon", CardPosIcon = "CardPosIcon", CardTickIcon = "CardTickIcon", CardWithGemIcon = "CardWithGemIcon", ChartSquareIcon = "ChartSquareIcon", ClockIcon = "ClockIcon", CloseIcon = "CloseIcon", ComfortableCompIcon = "ComfortableCompIcon", CreditCardsIcon = "CreditCardsIcon", DiscountShapeIcon = "DiscountShapeIcon", DocIcon = "DocIcon", DocIconMonoColor = "DocIconMonoColor", DocumentTextIcon = "DocumentTextIcon", DollarIcon = "DollarIcon", EarthIcon = "EarthIcon", EmptyWalletChangeIcon = "EmptyWalletChangeIcon", EmptyWalletIcon = "EmptyWalletIcon", EmptyWalletWhiteIcon = "EmptyWalletWhiteIcon", EuroIcon = "EuroIcon", GeolocationIcon = "GeolocationIcon", GlassIcon = "GlassIcon", GlobalIcon = "GlobalIcon", GridIcon = "GridIcon", GridIconWhite = "GridIconWhite", InterestGrowthIcon = "InterestGrowthIcon", InterestIcon = "InterestIcon", JCBIcon = "JCBIcon", LoupeIcon = "LoupeIcon", MasterCardIcon = "MasterCardIcon", MinusIcon = "MinusIcon", MirIcon = "MirIcon", MoneyIcon = "MoneyIcon", MoneyInsuranceIcon = "MoneyInsuranceIcon", MonitorMobileIcon = "MonitorMobileIcon", NewDocIcon = "NewDocIcon", OfficeIcon = "OfficeIcon", OkIcon = "OkIcon", PassSendIcon = "PassSendIcon", PercentageRoundIcon = "PercentageRoundIcon", PercentageSquareIcon = "PercentageSquareIcon", PercentageSquareWhiteIcon = "PercentageSquareWhiteIcon", PersonalCardIcon = "PersonalCardIcon", PlayMarketIcon = "PlayMarketIcon", PlusIcon = "PlusIcon", Profile2UserIcon = "Profile2UserIcon", ProfileIcon = "ProfileIcon", RoundRubleIcon = "RoundRubleIcon", SafeIcon = "SafeIcon", ShieldTickIcon = "ShieldTickIcon", SignDocsIcon = "SignDocsIcon", SmallClockIcon = "SmallClockIcon", TelegramIcon = "TelegramIcon", UnionPayIcon = "UnionPayIcon", UserTickIcon = "UserTickIcon", VisaIcon = "VisaIcon", VKIcon = "VKIcon", WalletAdd2Icon = "WalletAdd2Icon", WalletAddIcon = "WalletAddIcon", WalletIcon = "WalletIcon", WalletWithMoneyIcon = "WalletWithMoneyIcon"
+  ActualBalanceIcon = "ActualBalanceIcon", AppleIcon = "AppleIcon", AtmIcon = "AtmIcon", BankIcon = "BankIcon", BurgerIcon = "BurgerIcon", BurgerIconWhite = "BurgerIconWhite", Calendar2Icon = "Calendar2Icon", CalendarCircleIcon = "CalendarCircleIcon", CalendarIcon = "CalendarIcon", CalendarTickIcon = "CalendarTickIcon", CalendarWhiteIcon = "CalendarWhiteIcon", CardIcon = "CardIcon", CardPosIcon = "CardPosIcon", CardTickIcon = "CardTickIcon", CardWithGemIcon = "CardWithGemIcon", ChartSquareIcon = "ChartSquareIcon", ClockIcon = "ClockIcon", CloseIcon = "CloseIcon", ComfortableCompIcon = "ComfortableCompIcon", CreditCardsIcon = "CreditCardsIcon", DiscountShapeIcon = "DiscountShapeIcon", DocIcon = "DocIcon", DocIconMonoColor = "DocIconMonoColor", DocumentTextIcon = "DocumentTextIcon", DollarIcon = "DollarIcon", EarthIcon = "EarthIcon", EmptyWalletChangeIcon = "EmptyWalletChangeIcon", EmptyWalletIcon = "EmptyWalletIcon", EmptyWalletWhiteIcon = "EmptyWalletWhiteIcon", EuroIcon = "EuroIcon", GeolocationIcon = "GeolocationIcon", GlassIcon = "GlassIcon", GlobalIcon = "GlobalIcon", GpsIcon = "GpsIcon", GridIcon = "GridIcon", GridIconWhite = "GridIconWhite", InterestGrowthIcon = "InterestGrowthIcon", InterestIcon = "InterestIcon", JCBIcon = "JCBIcon", LoupeIcon = "LoupeIcon", MasterCardIcon = "MasterCardIcon", MinusIcon = "MinusIcon", MirIcon = "MirIcon", MoneyIcon = "MoneyIcon", MoneyInsuranceIcon = "MoneyInsuranceIcon", MonitorMobileIcon = "MonitorMobileIcon", NewDocIcon = "NewDocIcon", OfficeIcon = "OfficeIcon", OkIcon = "OkIcon", PassSendIcon = "PassSendIcon", PercentageRoundIcon = "PercentageRoundIcon", PercentageSquareIcon = "PercentageSquareIcon", PercentageSquareWhiteIcon = "PercentageSquareWhiteIcon", PersonalCardIcon = "PersonalCardIcon", PlayMarketIcon = "PlayMarketIcon", PlusIcon = "PlusIcon", Profile2UserIcon = "Profile2UserIcon", ProfileIcon = "ProfileIcon", RoundRubleIcon = "RoundRubleIcon", SafeIcon = "SafeIcon", ShieldTickIcon = "ShieldTickIcon", SignDocsIcon = "SignDocsIcon", SmallClockIcon = "SmallClockIcon", TelegramIcon = "TelegramIcon", UnionPayIcon = "UnionPayIcon", UserTickIcon = "UserTickIcon", VisaIcon = "VisaIcon", VKIcon = "VKIcon", WalletAdd2Icon = "WalletAdd2Icon", WalletAddIcon = "WalletAddIcon", WalletIcon = "WalletIcon", WalletWithMoneyIcon = "WalletWithMoneyIcon"
 }
 
 /**
@@ -10,7 +10,7 @@ export enum IconMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   "Деньги", "Лого «Apple»", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
+ *   "Деньги", "Лого «Apple»", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
  * ]
  */
-export type IconName = "" | "ActualBalanceIcon" | "AppleIcon" | "AtmIcon" | "BankIcon" | "BurgerIcon" | "BurgerIconWhite" | "Calendar2Icon" | "CalendarCircleIcon" | "CalendarIcon" | "CalendarTickIcon" | "CalendarWhiteIcon" | "CardIcon" | "CardPosIcon" | "CardTickIcon" | "CardWithGemIcon" | "ChartSquareIcon" | "ClockIcon" | "CloseIcon" | "ComfortableCompIcon" | "CreditCardsIcon" | "DiscountShapeIcon" | "DocIcon" | "DocIconMonoColor" | "DocumentTextIcon" | "DollarIcon" | "EarthIcon" | "EmptyWalletChangeIcon" | "EmptyWalletIcon" | "EmptyWalletWhiteIcon" | "EuroIcon" | "GeolocationIcon" | "GlassIcon" | "GlobalIcon" | "GridIcon" | "GridIconWhite" | "InterestGrowthIcon" | "InterestIcon" | "JCBIcon" | "LoupeIcon" | "MasterCardIcon" | "MinusIcon" | "MirIcon" | "MoneyIcon" | "MoneyInsuranceIcon" | "MonitorMobileIcon" | "NewDocIcon" | "OfficeIcon" | "OkIcon" | "PassSendIcon" | "PercentageRoundIcon" | "PercentageSquareIcon" | "PercentageSquareWhiteIcon" | "PersonalCardIcon" | "PlayMarketIcon" | "PlusIcon" | "Profile2UserIcon" | "ProfileIcon" | "RoundRubleIcon" | "SafeIcon" | "ShieldTickIcon" | "SignDocsIcon" | "SmallClockIcon" | "TelegramIcon" | "UnionPayIcon" | "UserTickIcon" | "VisaIcon" | "VKIcon" | "WalletAdd2Icon" | "WalletAddIcon" | "WalletIcon" | "WalletWithMoneyIcon";
+export type IconName = "" | "ActualBalanceIcon" | "AppleIcon" | "AtmIcon" | "BankIcon" | "BurgerIcon" | "BurgerIconWhite" | "Calendar2Icon" | "CalendarCircleIcon" | "CalendarIcon" | "CalendarTickIcon" | "CalendarWhiteIcon" | "CardIcon" | "CardPosIcon" | "CardTickIcon" | "CardWithGemIcon" | "ChartSquareIcon" | "ClockIcon" | "CloseIcon" | "ComfortableCompIcon" | "CreditCardsIcon" | "DiscountShapeIcon" | "DocIcon" | "DocIconMonoColor" | "DocumentTextIcon" | "DollarIcon" | "EarthIcon" | "EmptyWalletChangeIcon" | "EmptyWalletIcon" | "EmptyWalletWhiteIcon" | "EuroIcon" | "GeolocationIcon" | "GlassIcon" | "GlobalIcon" | "GpsIcon" | "GridIcon" | "GridIconWhite" | "InterestGrowthIcon" | "InterestIcon" | "JCBIcon" | "LoupeIcon" | "MasterCardIcon" | "MinusIcon" | "MirIcon" | "MoneyIcon" | "MoneyInsuranceIcon" | "MonitorMobileIcon" | "NewDocIcon" | "OfficeIcon" | "OkIcon" | "PassSendIcon" | "PercentageRoundIcon" | "PercentageSquareIcon" | "PercentageSquareWhiteIcon" | "PersonalCardIcon" | "PlayMarketIcon" | "PlusIcon" | "Profile2UserIcon" | "ProfileIcon" | "RoundRubleIcon" | "SafeIcon" | "ShieldTickIcon" | "SignDocsIcon" | "SmallClockIcon" | "TelegramIcon" | "UnionPayIcon" | "UserTickIcon" | "VisaIcon" | "VKIcon" | "WalletAdd2Icon" | "WalletAddIcon" | "WalletIcon" | "WalletWithMoneyIcon";

package/src/model/InputTypes.ts

@@ -0,0 +1 @@
+export type InputTypes = 'text' | 'number';

package/src/setup-fixture.ts

@@ -24,7 +24,7 @@ export const context: ContentPageContext = {
   useAsyncData: (key, fetcher) => {
     const [data, setData] = useState();
     useEffect(() => {
-      fetcher().then((_) => {
+      fetcher(key).then((_) => {
         setData(_);
       });
     }, [key, fetcher]);

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

@@ -9,12 +9,8 @@ export default {
         <p>Private clients</p>
         <div className="flex gap-6" data-theme="pc">
           <Button href="https://www.rshb.ru/" target="_blank" text="Primary" version="primary" />
-          <Button
-            href="https://www.rshb.ru/"
-            target="_blank"
-            text="Secondary"
-            version="secondary"
-          />
+          <Button href="https://www.rshb.ru/" target="_blank" text="Link" version="secondary" />
+          <Button href="https://www.rshb.ru/" target="_blank" text="Secondary" version="link" />
         </div>
       </div>
       <div>

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

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputProps } from './InputProps';
+
+export const Input = JSX<InputProps>(({ className = '', id, name, type = 'text', placeholder }) => {
+  return (
+    <input className={className} id={id} name={name || id} type={type} placeholder={placeholder} />
+  );
+});

package/src/ui-kit/Input/InputProps.ts

@@ -0,0 +1,9 @@
+import type { InputTypes } from '../../model/InputTypes';
+
+export interface InputProps {
+  className?: string;
+  id?: string;
+  name?: string;
+  type?: InputTypes;
+  placeholder?: string;
+}

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

@@ -0,0 +1,15 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface SelectProps {
+  className?: string;
+  id?: string;
+  name?: string;
+}
+
+export const Select = JSX<SelectProps>(({ className = '', id, name, children }) => {
+  return (
+    <select className={className} id={id} name={name || id}>
+      {children}
+    </select>
+  );
+});

package/src/ui-kit/Select/SelectOption.tsx

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface SelectOptionProps {
+  className?: string;
+  value?: string;
+}
+
+export const SelectOption = JSX<SelectOptionProps>(({ className = '', value, children }) => {
+  return (
+    <option className={className} value={`${value}`}>
+      {children}
+    </option>
+  );
+});

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

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeListControlDots } from './SwipeListControlDots';
+import { SwipeListControlList } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
-import { getScrollPoints } from './utils/getScrollPoints';
 import { getIndexParts } from './utils/getIndexParts';
-import { SwipeListControlList } from './SwipeListControlList';
-import { SwipeListControlDots } from './SwipeListControlDots';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { getScrollPoints } from './utils/getScrollPoints';
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -14,6 +14,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
+    onSlideChange,
   }) => {
     const [activeIndex, setActiveIndex] = context.useState<number>(0);
     const [indexFraction, setIndexFraction] = context.useState<number>(0);
@@ -35,28 +36,35 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
       });
 
       const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+      if (index !== activeIndex && onSlideChange) {
+        onSlideChange();
+      }
       setActiveIndex(index);
       setIndexFraction(fraction);
     };
 
     return (
       <div className={className}>
-        <SwipeListControlList
-          gap={gap}
-          padding={padding}
-          activeIndex={activeIndex}
-          onScroll={handleScroll}
-        >
-          {children}
-        </SwipeListControlList>
-        <SwipeListControlDots
-          activeIndex={activeIndex}
-          indexFraction={indexFraction}
-          showDots={showDots}
-        >
-          {children}
-        </SwipeListControlDots>
+        {renderSwipeList({ gap, padding, activeIndex, handleScroll, children })}
+        {renderSwipelistDots({ activeIndex, indexFraction, showDots, children })}
       </div>
     );
   },
 );
+
+const renderSwipeList = ({ gap, padding, activeIndex, handleScroll, children }) => (
+  <SwipeListControlList
+    gap={gap}
+    padding={padding}
+    activeIndex={activeIndex}
+    onScroll={handleScroll}
+  >
+    {children}
+  </SwipeListControlList>
+);
+
+const renderSwipelistDots = ({ activeIndex, indexFraction, showDots, children }) => (
+  <SwipeListControlDots activeIndex={activeIndex} indexFraction={indexFraction} showDots={showDots}>
+    {children}
+  </SwipeListControlDots>
+);

package/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -16,4 +16,5 @@ export interface SwipeContainer {
 export interface SwipeListControlProps extends SwipeContainer, UniBlockProps {
   /** @title Точки-индикаторы */
   showDots?: boolean;
+  onSlideChange?: () => void;
 }