@redneckz/wildless-cms-uni-blocks 0.2.111 → 0.2.112

package/mobile/src/icons/VKIcon.svg

@@ -0,0 +1,7 @@
+<svg id="icon" width="24" height="12" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M23.45.813c.166-.468 0-.813-.796-.813H20.03c-.668 0-.976.297-1.143.626 0 0-1.335 2.74-3.226 4.519-.612.516-.89.68-1.224.68-.167 0-.418-.164-.418-.633V.812c0-.562-.184-.812-.74-.812H9.15c-.417 0-.668.26-.668.508 0 .533.946.656 1.043 2.154v3.256c0 .714-.153.843-.487.843-.89 0-3.055-2.752-4.34-5.901C4.449.247 4.198 0 3.527 0H.9C.15 0 0 .297 0 .626c0 .584.89 3.488 4.145 7.33C6.315 10.577 9.37 12 12.153 12c1.669 0 1.875-.315 1.875-.86V9.158c0-.632.158-.758.687-.758.39 0 1.057.165 2.615 1.429C19.11 11.328 19.403 12 20.405 12h2.624c.75 0 1.127-.315.91-.94-.238-.62-1.087-1.52-2.215-2.59-.611-.608-1.53-1.264-1.808-1.592-.39-.421-.278-.609 0-.983 0 0 3.2-3.794 3.532-5.082h.002Z"
+  />
+</svg>

package/mobile/src/icons/VisaIcon.svg

@@ -0,0 +1 @@
+<svg id="icon" width="52" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.37 16.407 21 .729h4.206l-2.632 15.678h-4.205ZM37.77 1.067C36.939.75 35.633.41 34 .41c-4.156 0-7.084 2.126-7.109 5.173-.023 2.253 2.09 3.51 3.686 4.26 1.638.768 2.188 1.258 2.18 1.944-.01 1.051-1.307 1.531-2.516 1.531-1.684 0-2.579-.238-3.96-.823l-.542-.249-.59 3.51c.982.437 2.799.816 4.685.836 4.422 0 7.293-2.102 7.325-5.356.016-1.784-1.105-3.14-3.532-4.26-1.47-.725-2.37-1.209-2.36-1.943 0-.652.762-1.349 2.408-1.349a7.655 7.655 0 0 1 3.149.601l.377.18.57-3.397ZM48.595.729h-3.25c-1.007 0-1.761.28-2.203 1.3l-6.248 14.367h4.418s.722-1.932.885-2.356l5.388.007c.126.549.511 2.35.511 2.35H52L48.595.728Zm-5.157 10.123c.348-.903 1.676-4.382 1.676-4.382-.025.041.345-.908.558-1.497l.284 1.352.974 4.527h-3.492ZM.054.73 0 1.055c1.663.409 3.148 1 4.448 1.737l3.733 13.589 4.45-.005L19.255.729h-4.456L10.68 11.42l-.439-2.172a7.126 7.126 0 0 0-.066-.202L8.744 2.053C8.489 1.06 7.75.764 6.837.729H.054Z" fill="#0E4595"/></svg>

package/mobile/src/icons/WalletAdd2Icon.svg

@@ -0,0 +1 @@
+<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.19 7.06C6.45 7.02 6.72 7 7 7h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-.87.17-1.66.48-2.33" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 19c0 .75-.21 1.46-.58 2.06A3.97 3.97 0 0 1 5 23a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 1 19c0-2.21 1.79-4 4-4s4 1.79 4 4ZM6.49 18.98H3.51M5 17.52v2.99" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/WalletAddIcon.svg

@@ -0,0 +1 @@
+<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 15.44h-5M12 13v5" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22H8.1c-.24 0-.48-.02-.71-.05-3.18-.21-4.88-1.91-5.09-5.09-.03-.23-.05-.47-.05-.71V14.2c0-2.01 1.22-3.74 2.96-4.49.6-.25 1.24-.39 1.92-.39h9.76c.49 0 .97.07 1.41.2 2 .6 3.46 2.47 3.46 4.67v1.95c0 .2-.01.4-.02.6-.19 3.5-2.14 5.26-5.84 5.26" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m12.9 2.52-.03.07-2.9 6.73H7.12c-.68 0-1.33.14-1.92.39l1.75-4.18.04-.1.07-.16c.02-.06.04-.12.07-.17 1.31-3.03 2.79-3.72 5.77-2.58Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.29 9.52c-.45-.14-.93-.2-1.41-.2H9.97l2.9-6.73.03-.07c.15.05.29.12.44.18l2.21.93c1.23.51 2.09 1.04 2.61 1.68.1.12.18.23.25.36.09.14.16.28.2.43.04.09.07.18.09.26.27.84.11 1.87-.41 3.16ZM6.95 5.53 5.2 9.71a4.894 4.894 0 0 0-2.96 4.49v-2.93c0-2.84 2.02-5.21 4.71-5.74Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.76 11.27v2.93c0-2.2-1.46-4.07-3.46-4.67.52-1.3.67-2.32.42-3.17-.02-.09-.05-.18-.09-.26 1.86.96 3.13 2.93 3.13 5.17Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/WalletIcon.svg

@@ -0,0 +1 @@
+<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 16.86v2.03c0 1.72-1.6 3.11-3.57 3.11-1.97 0-3.58-1.39-3.58-3.11v-2.03c0 1.72 1.6 2.94 3.58 2.94 1.97 0 3.57-1.23 3.57-2.94Z" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11c0 .5-.14.96-.38 1.36-.59.97-1.8 1.58-3.2 1.58-1.4 0-2.61-.62-3.2-1.58-.24-.4-.38-.86-.38-1.36 0-.86.4-1.63 1.04-2.19.65-.57 1.54-.91 2.53-.91.99 0 1.88.35 2.53.91.66.55 1.06 1.33 1.06 2.19Z" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11v2.75c0 1.72-1.6 2.94-3.57 2.94-1.97 0-3.58-1.23-3.58-2.94v-2.75C3.6 12.39 5.2 11 7.18 11c.99 0 1.88.35 2.53.91.64.56 1.04 1.34 1.04 2.2Z" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 10.97v2.06c0 .55-.44 1-1 1.02h-1.96c-1.08 0-2.07-.79-2.16-1.87-.06-.63.18-1.22.6-1.63.37-.38.88-.6 1.44-.6H21c.56.02 1 .47 1 1.02Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 3.5c.26 0 .51.01.75.05C19.33 3.85 21 5.76 21 8.5v1.45h-2.08c-.56 0-1.07.22-1.44.6-.42.41-.66 1-.6 1.63.09 1.08 1.08 1.87 2.16 1.87H21v1.45c0 3-2 5-5 5h-2.5M2 10.5v-2c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h5" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/WalletWithMoneyIcon.svg

@@ -0,0 +1 @@
+<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 12.063V11a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1.063" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m5 7 8.571-5L15 4.308M10 7l8-4 2 2.91" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.56 18H21a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v3" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/></svg>

package/mobile/src/index.ts

@@ -0,0 +1,34 @@
+export { setup } from '@redneckz/uni-jsx';
+export { DaDataAPI } from './api/DaDataAPI';
+export { LikeAPI } from './api/LikeAPI';
+export type { BlockContent } from './components/BlockContent';
+export { Blocks } from './components/Blocks';
+export { ContentPage } from './components/ContentPage/ContentPage';
+export type { BlockDecorator } from './components/ContentPage/ContentPage';
+export type {
+  AsyncDataHook,
+  ContentPageContext,
+  GeolocationHook,
+  HandlerDecorator,
+  LikeService,
+  Router,
+  Search,
+} from './components/ContentPage/ContentPageContext';
+export { ContentPageHead } from './components/ContentPage/ContentPageHead';
+export { toMobilePage } from './components/ContentPage/toMobilePage';
+export { Header } from './components/Header/Header';
+export type { Img, ImgSource, Picture } from './model/Picture';
+export { projectSettings } from './ProjectSettings';
+export type { ProjectSettings } from './ProjectSettings';
+export type { SitemapProps as SitemapContent } from './services/sitemap/SitemapProps';
+export type {
+  BlockDef,
+  ContentPageDef,
+  ContentPageMeta,
+  Slot,
+  SlotsMap,
+  UniBlockProps,
+} from './types';
+export { Icon } from './ui-kit/Icon/Icon';
+export { joinList } from './utils/joinList';
+export * as url from './utils/url';

package/mobile/src/model/BgColorVersion.ts

@@ -0,0 +1,8 @@
+/**
+ * @title Цвет фона
+ * @enumNames [
+ *    "Прозрачный",
+ *    "Белый"
+ * ]
+ */
+export type BgColorVersion = 'transparent' | 'bg-white';

package/mobile/src/model/BlockVersion.ts

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

package/mobile/src/model/ButtonVersion.ts

@@ -0,0 +1,6 @@
+/**
+ * @title Цвет кнопки
+ * @default primary
+ * @enumNames ["Основная", "Второстепенная"]
+ */
+export type ButtonVersion = 'primary' | 'secondary';

package/mobile/src/model/GalleryVersion.ts

@@ -0,0 +1 @@
+export type GalleryVersion = 'normal' | 'mini';

package/mobile/src/model/LinkProps.ts

@@ -0,0 +1,23 @@
+/**
+ * @title Таргет (target)
+ * @enumNames [
+ *    "",
+ *    "self (текущее окно или фрейм)",
+ *    "blank (новое окно)",
+ *    "parent (фрейм-родитель)",
+ *    "top (текущее окно)"
+ *  ]
+ */
+export type Target = '' | '_self' | '_blank' | '_parent' | '_top';
+
+/**
+ * @title Ссылка
+ * @required ["text", "href"]
+ */
+export interface LinkProps {
+  /** @title Текст */
+  text?: string;
+  /** @title URL (href) */
+  href?: string;
+  target?: Target;
+}

package/mobile/src/model/Picture.ts

@@ -0,0 +1,30 @@
+export interface Img {
+  /** @title Картинка */
+  src: string;
+  /** @title Альтернативный текст (alt) */
+  alt?: string;
+  /** @title Текст подсказки (title) */
+  title?: string;
+}
+
+export interface ImgSource {
+  /** @title Картинка */
+  src: string;
+  /** @title Формат */
+  format?: 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
+  /** @hidden */
+  options?: Record<string, any>;
+  /** @title Размер изображения */
+  size?: {
+    /** @title Ширина */
+    width?: number;
+    /** @title Высота */
+    height?: number;
+  };
+}
+
+/** @title Изображение */
+export interface Picture extends Img, ImgSource {
+  /** @title Другие форматы */
+  sources?: ImgSource[];
+}

package/mobile/src/model/SitemapProps.ts

@@ -0,0 +1,15 @@
+import type { LinkProps } from './LinkProps';
+
+/**
+ * @title Меню
+ * @required ["text", "href"]
+ */
+export interface TopMenuItem extends LinkProps {
+  /** @title Ссылки */
+  items?: LinkProps[];
+}
+
+export interface SitemapProps {
+  /** @title Дополнительное меню */
+  topItems?: TopMenuItem[];
+}

package/mobile/src/model/SizeVersion.ts

@@ -0,0 +1,8 @@
+/**
+ * @title Размер
+ * @enumNames [
+ *    "Обычный",
+ *    "Уменьшенный"
+ * ]
+ */
+export type SizeVersion = 'normal' | 'small';

package/mobile/src/model/TableVersion.ts

@@ -0,0 +1 @@
+export type TableVersion = 'comparison' | 'tariff';

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

@@ -0,0 +1,15 @@
+import type { LinkProps } from '../../model/LinkProps';
+
+/**
+ * @title Ссылка
+ * @required ["text", "href"]
+ */
+export interface TopMenuItem extends LinkProps {
+  /** @hidden */
+  items?: LinkProps[];
+}
+
+export interface SitemapProps {
+  /** @title Дополнительное меню */
+  topItems?: TopMenuItem[];
+}

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

@@ -0,0 +1,14 @@
+import type { Router } from '../../components/ContentPage/ContentPageContext';
+import type { LinkProps } from '../../model/LinkProps';
+import { maxBy } from '../../utils/maxBy';
+import { isSubItemActive } from './isSubItemActive';
+
+export const findActiveSubItem =
+  (router: Router) =>
+  <T extends LinkProps>(items: T[] = []): T | null => {
+    const possibleActiveSubItems = items?.filter(isSubItemActive(router));
+    const activeSubItem = possibleActiveSubItems?.length
+      ? maxBy((_: T) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
+      : null;
+    return activeSubItem;
+  };

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

@@ -0,0 +1,13 @@
+import { isURL, withoutQuery } from '../../utils/url';
+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),
+) => {
+  return cmp(
+    withoutQuery(href),
+    withoutMobilePath(withoutQuery(isURL(href) ? router.href : router.pathname)),
+  );
+};

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

@@ -0,0 +1,8 @@
+import type { Router } from '../../components/ContentPage/ContentPageContext';
+import type { LinkProps } from '../../model/LinkProps';
+import { isHrefActive } from './isHrefActive';
+
+export const isSubItemActive =
+  (router: Router) =>
+  (subItem: LinkProps): boolean =>
+    isHrefActive(subItem.href, router);

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

@@ -0,0 +1,9 @@
+import type { Router } from '../../components/ContentPage/ContentPageContext';
+import { isHrefActive } from './isHrefActive';
+import { isSubItemActive } from './isSubItemActive';
+import { TopMenuItem } from './SitemapProps';
+
+export const isTopItemActive =
+  (router: Router) =>
+  (topItem: TopMenuItem): boolean =>
+    topItem.items?.some(isSubItemActive(router)) || isHrefActive(topItem.href, router);

package/mobile/src/services/sitemap/mergeTopItems.spec.ts

@@ -0,0 +1,20 @@
+import { mergeTopItems } from './mergeTopItems';
+
+describe('mergeTopItems', () => {
+  it('should return original items if no extra items provided', () => {
+    const items = [{ href: '/' }];
+    expect(mergeTopItems(items)).toEqual(items);
+  });
+
+  it('should append extra items to original ones', () => {
+    const items = [{ href: '/' }];
+    const extraItems = [{ href: '/foo' }, { href: '/bar' }];
+    expect(mergeTopItems(items, extraItems)).toEqual(items.concat(extraItems));
+  });
+
+  it('should replace original items with duplicating extra items (by href)', () => {
+    const items = [{ href: '/foo' }];
+    const extraItems = [{ href: '/foo', text: 'foo' }, { href: '/bar' }];
+    expect(mergeTopItems(items, extraItems)).toEqual(extraItems);
+  });
+});

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

@@ -0,0 +1,12 @@
+import type { LinkProps } from '../../model/LinkProps';
+
+const cmp = (a?: LinkProps) => (b?: LinkProps) => a?.href === b?.href;
+
+const substitute = <L extends LinkProps>(items?: L[], substitution?: L[]): L[] =>
+  (items || []).map((_) => substitution?.find(cmp(_)) || _);
+
+const subtract = <L extends LinkProps>(minuend?: L[], subtrahend?: L[]): L[] =>
+  (minuend || []).filter((_) => !subtrahend?.find(cmp(_)));
+
+export const mergeTopItems = <L extends LinkProps>(left?: L[], right?: L[]): L[] =>
+  substitute(left, right).concat(subtract(right, left));

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

@@ -0,0 +1,17 @@
+import type { AsyncDataHook } from '../../components/ContentPage/ContentPageContext';
+import type { HeaderContent } from '../../components/Header/HeaderContent';
+import { projectSettings } from '../../ProjectSettings';
+
+export function useSitemap(useAsyncData: AsyncDataHook): HeaderContent {
+  const { data } = useAsyncData(sitemapURL(), fetchSitemap);
+  return data || {};
+}
+
+async function fetchSitemap(): Promise<HeaderContent> {
+  const response = await fetch(sitemapURL());
+  return await response.json();
+}
+
+function sitemapURL() {
+  return `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`;
+}

package/mobile/src/setup-fixture.ts

@@ -0,0 +1,83 @@
+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';
+
+setup(jsx, jsxs);
+
+const TEST_ORIGIN = 'http://localhost:5001';
+
+const DaData = DaDataAPI('https://10.80.4.9');
+
+export const context: ContentPageContext = {
+  useState,
+  useRouter: () => ({
+    href: `${TEST_ORIGIN}/credits`,
+    pathname: '/credits',
+    query: {},
+    push: (url: string) => {
+      console.log(url);
+    },
+  }),
+  useAsyncData: (key, fetcher) => {
+    const [data, setData] = useState();
+    useEffect(() => {
+      fetcher().then((_) => {
+        setData(_);
+      });
+    }, [key, fetcher]);
+    return { data };
+  },
+  useGeolocation: (defaultLocation) => {
+    const [city, setCity] = useState(
+      globalThis.localStorage.getItem('location') || defaultLocation,
+    );
+
+    const getCity = () => {
+      DaData.getFetcherAddress().then((_) => {
+        const location = _ || defaultLocation;
+        globalThis.localStorage.setItem('location', location);
+        setCity(location);
+      });
+    };
+
+    return [city, getCity];
+  },
+  useLikeService: () => ({
+    likeCount: 0,
+    like: () => {
+      console.log('like');
+    },
+    dislike: () => {
+      console.log('dislike');
+    },
+  }),
+  handlerDecorator:
+    (handler, targetContent): any =>
+    (ev) => {
+      ev.preventDefault();
+      console.log(ev.target, ev, targetContent);
+    },
+  useSearch: () => {
+    const [term, setTerm] = useState('');
+
+    return {
+      term,
+      setTerm: (text: string) => setTerm(text),
+    };
+  },
+};
+
+export const mobileContext: ContentPageContext = {
+  ...context,
+  useRouter: () => ({
+    href: `${TEST_ORIGIN}/mobile/credits`,
+    pathname: '/mobile/credits',
+    query: {},
+    push: (url: string) => {
+      console.log(url);
+    },
+  }),
+};

package/mobile/src/types.ts

@@ -0,0 +1,61 @@
+import type { BlockContent } from './components/BlockContent';
+import type { ContentPageContext } from './components/ContentPage/ContentPageContext';
+import type { BlockVersion } from './model/BlockVersion';
+
+export type ColorPalette = 'pc' | 'bc' | 'eo' | 'eo2' | 'eo3' | 'eo4';
+
+export interface BlockDef {
+  type: string;
+  style?: string[];
+  content?: BlockContent;
+  version?: BlockVersion;
+  blocks?: BlockDef[];
+  mobile?: Pick<BlockDef, 'content' | 'style'> & {
+    hidden?: boolean;
+  };
+}
+
+export interface Slot {
+  style?: string[];
+  blocks?: BlockDef[];
+}
+
+export interface SlotsMap {
+  header?: Slot;
+}
+
+export interface ContentPageMeta {
+  title: string;
+  slug: string;
+  description?: string;
+  keywords?: string[];
+  robots?: string[];
+  og?: Record<string, string>;
+}
+
+export interface ContentPageDef extends ContentPageMeta {
+  style?: string[];
+  blocks?: BlockDef[]; //! for compatibility
+  slots?: SlotsMap;
+  likeControl?: boolean;
+  colorPalette?: ColorPalette;
+}
+
+export interface UniBlockProps {
+  className?: string;
+  context: ContentPageContext;
+}
+
+export interface DaDataResult {
+  suggestions?: DaDataSuggestion<DaDataAddress>[];
+}
+
+export interface DaDataSuggestion<T> {
+  value?: string;
+  unrestricted_value?: string;
+  data?: T;
+}
+
+export interface DaDataAddress {
+  city?: string | null;
+}

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

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { BlockItemProps, BlockItemVersion } from './BlockItemProps';
+
+const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
+
+const TEXT_STYLE_MAP: Record<BlockItemVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-secondary-text',
+};
+
+const LIST_STYLE_MAP: Record<BlockItemVersion, string> = {
+  primary: 'bg-primary-main',
+  secondary: 'bg-secondary-text',
+};
+
+export const BlockItem = JSX<BlockItemProps>(
+  ({ className = '', isDotted = true, text, children, version = 'primary', white }) => {
+    return (
+      <div className={`font-sans inline-block flex items-baseline ${className}`} role="listitem">
+        {isDotted && <div className={getListStyle(version, white)} />}
+        <span className={white ? 'text-white' : TEXT_STYLE_MAP[version]}>{text || children}</span>
+      </div>
+    );
+  },
+);
+
+const getListStyle = (version: BlockVersion, white?: boolean) => {
+  const color = white ? 'bg-white' : LIST_STYLE_MAP[version];
+  const size =
+    version === 'primary'
+      ? 'w-[8px] h-[8px] min-w-[8px] min-h-[8px] mt-2'
+      : 'w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5';
+
+  return `${LIST_STYLE_CLASSES} ${color} ${size}`;
+};

package/mobile/src/ui-kit/BlockItem/BlockItemProps.ts

@@ -0,0 +1,23 @@
+/**
+ * @title Версия списка
+ */
+export type BlockItemVersion = 'primary' | 'secondary';
+
+/**
+ * @title Содержимое элемента блока
+ */
+export interface BlockItemContent {
+  /** @title Текст */
+  text?: string;
+}
+
+/**
+ * @title Параметры элемента блока
+ */
+export interface BlockItemProps extends BlockItemContent {
+  className?: string;
+  version?: BlockItemVersion;
+  white?: boolean;
+  /** @title Маркер */
+  isDotted?: boolean;
+}

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

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../model/LinkProps';
+
+export interface BreadcrumbProps extends LinkProps {
+  className?: string;
+  onClick?: (ev: MouseEvent) => any;
+}
+
+export const Breadcrumb = JSX<BreadcrumbProps>(
+  ({ text, href, target, onClick, className, children }) => {
+    if (href) {
+      return (
+        <a
+          className={`no-underline ${className || ''}`}
+          href={href}
+          target={target}
+          onClick={onClick}
+        >
+          <span className={`${className || ''}`}>{text || children}</span>
+        </a>
+      );
+    } else {
+      return <span className={`${className || ''}`}>{text || children}</span>;
+    }
+  },
+);

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

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from './Button';
+import { ButtonProps } from './ButtonProps';
+import { SVG } from '../SVG';
+
+const ARROW_PATHS = [
+  {
+    d: 'm9 12 4-4-4-4',
+    stroke: 'currentColor',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    fill: 'none',
+  },
+  {
+    d: 'M2 9a1 1 0 0 1 0-2v2Zm6-2a1 1 0 0 1 0 2V7ZM2 7h6v2H2V7Z',
+  },
+];
+
+export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
+  <Button
+    rounded
+    className={`shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${
+      disabled
+        ? 'bg-secondary-light text-secondary-text'
+        : 'bg-white text-primary-text hover:text-primary-main'
+    } ${className || ''}`}
+    disabled={disabled}
+    {...rest}
+  >
+    <SVG paths={ARROW_PATHS} viewBox="0 0 16 16" fill="none" width="16" height="16" />
+  </Button>
+));

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

@@ -0,0 +1,94 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
+
+const buttonStyleMap: Record<ButtonVersion, string> = {
+  primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
+  secondary:
+    'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
+};
+
+const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
+  primary: 'bg-secondary-dark text-secondary-text',
+  secondary: 'bg-secondary-light text-secondary-text',
+};
+
+const styleButton = 'inline-block text-center font-sans select-none';
+
+export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
+
+export type ButtonInner = Pick<ButtonCommonProps, 'text' | 'aboveText' | 'appendLeft' | 'rounded'>;
+
+export const Button = JSX<ButtonCommonProps>(
+  ({
+    className,
+    text,
+    aboveText,
+    appendLeft,
+    href,
+    target,
+    onClick,
+    children,
+    disabled,
+    rounded,
+    version = 'none',
+    ariaLabel,
+    ...rest
+  }) => {
+    const buttonInner = children ?? (
+      <ButtonInner text={text} aboveText={aboveText} appendLeft={appendLeft} rounded={rounded} />
+    );
+
+    if (disabled) {
+      return (
+        <div
+          role="button"
+          aria-disabled="true"
+          aria-label={ariaLabel}
+          tabIndex="-1"
+          className={`${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
+            rounded ? 'rounded-full' : 'rounded-md'
+          } ${className || ''}`}
+        >
+          {buttonInner}
+        </div>
+      );
+    }
+
+    return (
+      <a
+        className={`${styleButton} cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${
+          rounded ? 'rounded-full' : 'rounded-md'
+        } ${className || ''}`}
+        href={href}
+        target={target}
+        onClick={onClick}
+        aria-label={ariaLabel}
+        role={!href ? 'button' : 'link'}
+        {...rest}
+      >
+        {buttonInner}
+      </a>
+    );
+  },
+);
+
+export const ButtonInner = JSX<ButtonInner>(({ text, aboveText, appendLeft, rounded }) => {
+  const withoutText = !text && !aboveText && Boolean(appendLeft);
+
+  const buttonInnerClasses = `flex items-center justify-center ${
+    withoutText ? 'h-12 w-12 min-h-12 min-w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[13px]'}`
+  } ${rounded ? 'rounded-full' : ''}`;
+
+  return (
+    <div className={buttonInnerClasses}>
+      {appendLeft ? appendLeft : null}
+      {!withoutText ? (
+        <div>
+          <div className="text-2xs text-left">{aboveText}</div>
+          <div className="text-sm font-medium text-left">{text}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+});