@redneckz/wildless-cms-uni-blocks 0.3.11 → 0.3.14

package/mobile/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -0,0 +1,61 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { TableTileHeader } from './TableTileHeader';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Img } from '../../ui-kit/Img/Img';
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { TariffsTableCellData, TariffsTableTileCellProps } from './TariffsTableContent';
+
+export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ header, data }) => {
+  return (
+    <div className="rounded-md border-main-stroke h-full box-border border p-4">
+      <TableTileHeader {...header} />
+      {data?.length ? data.map(renderCellInner) : null}
+    </div>
+  );
+});
+
+const renderCellInner = (
+  { label, description, list, image, buttons }: TariffsTableCellData,
+  i: number,
+) => (
+  <div key={String(i)}>
+    {i > 0 && (
+      <div className="border-main-divider border border-solid border-t-0 border-x-0 my-2" />
+    )}
+    {label ? <div className="text-m-sm m-0">{label}</div> : null}
+    {description ? (
+      <div className="text-m-sm text-secondary-text mt-[3px]">{description}</div>
+    ) : null}
+    {list?.items?.length ? (
+      <div className="flex flex-col justify-between items-start">
+        <div role="list">
+          {list.items.map((text, idx) => (
+            <BlockItem
+              className="text-m-sm"
+              key={String(idx)}
+              text={text}
+              version="gray"
+              isDotted={list.isDotted ?? true}
+            />
+          ))}
+        </div>
+      </div>
+    ) : null}
+    {image && <Img image={{ ...image, className: 'm-0' }} />}
+    {buttons?.length ? (
+      <div>
+        {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
+          <Button
+            className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
+            key={String(idx)}
+            rounded={rounded}
+            appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
+            {...buttonProps}
+            aria-label={icon}
+          />
+        ))}
+      </div>
+    ) : null}
+  </div>
+);

package/mobile/src/components/TariffsTable/TariffsTableVertical.tsx

@@ -0,0 +1,11 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { TariffsTableTileCell } from './TariffsTableTileCell';
+import type { TariffsTableTileCellProps } from './TariffsTableContent';
+
+export const TariffsTableVertical = JSX<{ tiles: TariffsTableTileCellProps[] }>(({ tiles }) => (
+  <div className="flex flex-col gap-3.5">
+    {tiles.map((tile, i) => (
+      <TariffsTableTileCell key={String(i)} {...tile} />
+    ))}
+  </div>
+));

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -55,10 +55,10 @@ export const TextBlock = JSX<TextBlockProps>(
           ) : null}
           {items?.length ? (
             <List
+              className="mt-1"
               items={items}
               isDotted={isDotted}
-              version="gray"
-              className="mt-1 text-m-sm text-secondary-text"
+              version={blockVersion.indexOf('secondary') !== -1 ? 'secondary' : 'gray'}
             />
           ) : null}
         </div>

package/mobile/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/mobile/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/mobile/src/hooks/useTableArrowScrollControl.ts

@@ -0,0 +1,22 @@
+import type { TableArrowScrollControlProps } from '../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
+
+export const useTableArrowScrollControl = ({
+  columnsLength,
+  colsLengthForScroll,
+  activeCardIndex,
+  setActiveCardIndex,
+}: {
+  columnsLength: number;
+  colsLengthForScroll: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (_: number) => void;
+}): Required<TableArrowScrollControlProps> => {
+  const onNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const onPrevClick = () => 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 };
+};

package/mobile/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/mobile/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/mobile/src/model/BlockVersion.ts

@@ -1,5 +1,11 @@
 /**
- * @title Цвет плитки
+ * @title Цвет блока
  * @enumNames ["Основная", "Второстепенная"]
  */
 export type BlockVersion = 'primary' | 'secondary';
+
+/**
+ * @title Цвет блока
+ * @enumNames ["Прозрачная", Основная", "Второстепенная"]
+ */
+export type BlockVersionWithTransparent = 'transparent' | 'primary' | 'secondary';

package/mobile/src/model/InputTypes.ts

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

package/mobile/src/model/ListOrientation.ts

@@ -0,0 +1,8 @@
+/**
+ * @title Направление списка
+ * @enumNames [
+ *    "Вертикально",
+ *    "Горизонтально",
+ *    ]
+ */
+export type ListOrientation = 'vertical' | 'horizontal';

package/mobile/src/model/SitemapProps.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from './LinkProps';
+import { IconName } from '../icons/IconName';
 
 /**
  * @title Меню
@@ -9,7 +10,18 @@ export interface TopMenuItem extends LinkProps {
   items?: LinkProps[];
 }
 
+/**
+ * @title Ссылка дополнительного меню
+ * @required ["text", "href"]
+ */
+export interface DispositionItem extends LinkProps {
+  /** @hidden */
+  icon?: IconName;
+}
+
 export interface SitemapProps {
   /** @title Дополнительное меню */
   topItems?: TopMenuItem[];
+  /** @title Дополнительное меню */
+  dispositions?: DispositionItem[];
 }

package/mobile/src/services/sitemap/SitemapProps.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
+import { IconName } from '../../icons/IconName';
 
 /**
  * @title Ссылка
@@ -9,7 +10,18 @@ export interface TopMenuItem extends LinkProps {
   items?: LinkProps[];
 }
 
+/**
+ * @title Ссылка дополнительного меню
+ * @required ["text", "href"]
+ */
+export interface DispositionItem extends LinkProps {
+  /** @hidden */
+  icon?: IconName;
+}
+
 export interface SitemapProps {
-  /** @title Дополнительное меню */
+  /** @title Основное меню */
   topItems?: TopMenuItem[];
+  /** @title Дополнительное меню */
+  dispositions?: DispositionItem[];
 }

package/mobile/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/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -6,32 +6,36 @@ interface ButtonInnerProps extends ButtonWithIconProps {
   version?: ButtonVersion;
 }
 
-export const ButtonInner = JSX<ButtonInnerProps>(
-  ({ text, aboveText, appendLeft, rounded, version }) => {
-    const withoutText = !text && !aboveText && Boolean(appendLeft);
-
-    const buttonInnerClasses =
-      version !== 'link'
-        ? `flex items-center justify-center
-          ${withoutText ? 'h-12 w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`} ${
-            rounded ? 'rounded-full' : ''
-          }`
-        : null;
-
-    return renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text });
-  },
-);
-
-function renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text }) {
+export const ButtonInner = JSX<ButtonInnerProps>((props) => {
+  const { text, aboveText, appendLeft } = props;
   return (
-    <div className={buttonInnerClasses}>
+    <div className={getButtonStyle(props)}>
       {appendLeft ? appendLeft : null}
-      {withoutText ? null : (
+      {isWithText(props) ? (
         <div>
           <div className="text-m-2xs text-left">{aboveText}</div>
           <div className="text-m-button font-medium text-left">{text}</div>
         </div>
-      )}
+      ) : null}
     </div>
   );
-}
+});
+
+const getButtonStyle = (props: ButtonInnerProps) => {
+  const { version, aboveText, rounded } = props;
+
+  if (version === 'link') {
+    return '';
+  }
+
+  const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`;
+
+  return [
+    'flex items-center justify-center',
+    isWithText(props) ? withTextStyle : 'h-12 w-12',
+    rounded ? 'rounded-full' : '',
+  ].join(' ');
+};
+
+const isWithText = ({ text, aboveText, appendLeft }: ButtonInnerProps) =>
+  Boolean(text || aboveText || !appendLeft);

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

@@ -8,5 +8,5 @@ export interface DescriptionProps extends DescriptionContent {
 export const Description = JSX<DescriptionProps>((props) => {
   const { className = '', description } = props;
 
-  return <div className={`font-normal text-m-md ${className}`}>{description}</div>;
+  return <div className={`font-normal text-base ${className}`}>{description}</div>;
 });

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

@@ -1,15 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ImgSource } from '../../model/Picture';
-import { ImageProps } from './ImgProps';
+import type { Picture, ImgSource } from '../../model/Picture';
 
-export const Img = JSX<ImageProps>(({ className = '', image }) => {
+export interface ImageProps {
+  className?: string;
+  imageClassName?: string;
+  image: Picture;
+}
+
+export const Img = JSX<ImageProps>(({ className = '', image, imageClassName }) => {
   if (!image) {
     return null;
   }
-  const style = {
-    width: image.size?.width ? `${image.size?.width}px` : '100%',
-    height: image.size?.height ? `${image.size?.height}px` : '100%',
-  };
 
   return (
     <picture className={className}>
@@ -18,18 +19,31 @@ export const Img = JSX<ImageProps>(({ className = '', image }) => {
             <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
           ))
         : null}
-      <img
-        src={image.src}
-        className={`m-auto ${image.className || ''}`}
-        alt={image.alt || image.title}
-        title={image.title}
-        style={style}
-        {...image.size}
-      />
+      {renderImg(image, imageClassName)}
     </picture>
   );
 });
 
+const renderImg = (image, imageClassName = '') => {
+  const style = {
+    width: image.size?.width ? `${image.size?.width}px` : '100%',
+    height: image.size?.height ? `${image.size?.height}px` : '100%',
+  };
+  const title = image.title || '';
+  const alt = image.alt || image.title;
+
+  return (
+    <img
+      src={image.src}
+      className={`m-auto ${imageClassName}`}
+      alt={alt}
+      title={title}
+      style={style}
+      {...image.size}
+    />
+  );
+};
+
 export function formatToMimeType(format: ImgSource['format']): string | undefined {
   return format ? `image/${String(format)}` : undefined;
 }

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/ui-kit/SwipeListControl/SwipeListControl.tsx

@@ -2,9 +2,9 @@ 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 { getIndexParts } from './utils/getIndexParts';
 import { getScrollPoints } from './utils/getScrollPoints';
+import type { SwipeListControlProps } from './SwipeListControlProps';
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -19,6 +19,13 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     const [activeIndex, setActiveIndex] = context.useState<number>(0);
     const [indexFraction, setIndexFraction] = context.useState<number>(0);
 
+    const dotsProps = {
+      activeIndex,
+      indexFraction,
+      showDots,
+      children,
+    };
+
     const handleScroll = (e: UIEvent) => {
       const { scrollLeft, clientWidth, childElementCount, scrollWidth, children } =
         e.currentTarget as HTMLElement;
@@ -45,26 +52,16 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
 
     return (
       <div className={className}>
-        {renderSwipeList({ gap, padding, activeIndex, handleScroll, children })}
-        {renderSwipelistDots({ activeIndex, indexFraction, showDots, children })}
+        <SwipeListControlList
+          gap={gap}
+          padding={padding}
+          activeIndex={activeIndex}
+          onScroll={handleScroll}
+        >
+          {children}
+        </SwipeListControlList>
+        <SwipeListControlDots {...dotsProps} />
       </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/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -14,11 +14,23 @@ export interface SwipeListControlDotsProps {
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
   ({ children, activeIndex, indexFraction, showDots }) => {
+    const handleClick = (idx: number) => (e: Event) => {
+      if (idx === activeIndex) {
+        return;
+      }
+
+      const contentContainer = (e.currentTarget as HTMLElement).parentElement
+        ?.previousElementSibling;
+
+      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth' });
+    };
+
     return showDots && children?.length ? (
       <div className="flex gap-2 mx-auto mt-5 w-fit">
         {children?.map((_, idx) => (
           <div
             key={String(idx)}
+            onClick={handleClick(idx)}
             className={`${DOT_STYLES}`}
             style={getDotStyles(idx, activeIndex, indexFraction)}
             aria-hidden

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

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ArrowButton } from '../Button/ArrowButton';
+import type { TableArrowScrollControlProps } from './TableArrowScrollControlProps';
+
+export const TableArrowScrollControl = JSX<TableArrowScrollControlProps>(
+  ({ isScrollAvailable, onNextClick, onPrevClick, showNextButton, showPrevButton }) => {
+    return isScrollAvailable ? (
+      <div>
+        <div className="absolute top-7 right-7 z-10">
+          <ArrowButton
+            onClick={onNextClick}
+            disabled={!showNextButton}
+            ariaLabel="Пролистать вправо"
+            data-block-control="scroll-right"
+          />
+          <ArrowButton
+            className="mt-4 rotate-180"
+            onClick={onPrevClick}
+            disabled={!showPrevButton}
+            ariaLabel="Пролистать влево"
+            data-block-control="scroll-left"
+          />
+        </div>
+      </div>
+    ) : null;
+  },
+);

package/mobile/src/ui-kit/TableArrowScrollControl/TableArrowScrollControlProps.ts

@@ -0,0 +1,7 @@
+export interface TableArrowScrollControlProps {
+  isScrollAvailable?: boolean;
+  onNextClick?: (ev?: MouseEvent) => void;
+  onPrevClick?: (ev?: MouseEvent) => void;
+  showNextButton?: boolean;
+  showPrevButton?: boolean;
+}