@redneckz/wildless-cms-uni-blocks 0.6.42 → 0.6.44

package/mobile/lib/ui-kit/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/ui-kit/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAUxC,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAY,CAAC,KAAK,EAAE,EAAE;IAC3C,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,WAAW,GAAG,aAAa,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;IAElE,OAAO,eAAM,SAAS,EAAE,WAAW,YAAG,QAAQ,GAAQ,CAAC;AACzD,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/ui-kit/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAUxC,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7E,eAAM,SAAS,EAAE,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAC/E,QAAQ,GACJ,CACR,CAAC,CAAC"}

package/mobile/lib/utils/normalizeURLPath.d.ts

@@ -0,0 +1 @@
+export declare const normalizeURLPath: (href?: string) => string | undefined;

package/mobile/lib/utils/normalizeURLPath.js

@@ -0,0 +1,9 @@
+import { projectSettings } from '../ProjectSettings.js';
+import { isURL } from './url.js';
+export const normalizeURLPath = (href) => {
+    if (isURL(href) || href?.startsWith('/')) {
+        return href;
+    }
+    return `${projectSettings.BASE_PATH || ''}${href}`;
+};
+//# sourceMappingURL=normalizeURLPath.js.map

package/mobile/lib/utils/normalizeURLPath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeURLPath.js","sourceRoot":"","sources":["../../src/utils/normalizeURLPath.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAa,EAAE,EAAE;IAChD,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE;QACxC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,GAAG,eAAe,CAAC,SAAS,IAAI,EAAE,GAAG,IAAI,EAAE,CAAC;AACrD,CAAC,CAAC"}

package/mobile/lib/utils/url.d.ts

@@ -1,5 +1,6 @@
 export declare const isURL: (href?: string) => boolean | undefined;
 export declare const withoutQuery: (href?: string) => string;
 export declare const getOrigin: (href?: string) => string | undefined;
+export declare const getPathname: (href?: string) => string | undefined;
 export declare const getHash: (href?: string) => string | undefined;
 export declare const isHash: (href?: string) => boolean | undefined;

package/mobile/lib/utils/url.js

@@ -10,6 +10,13 @@ export const getOrigin = (href) => {
     const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
     return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
 };
+export const getPathname = (href) => {
+    if (!href || !isURL(href)) {
+        return undefined;
+    }
+    const url = new URL(href);
+    return url.pathname;
+};
 export const getHash = (href) => {
     if (!href || !isURL(href)) {
         return undefined;

package/mobile/lib/utils/url.js.map

@@ -1 +1 @@
-{"version":3,"file":"url.js","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;AAE7D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;AAEnF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAa,EAAE,EAAE;IACzC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QACzB,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,GAAG,GAAG,IAAI,CAAC;IACjB,MAAM,cAAc,GAAG,IAAI,CAAC;IAC5B,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IAC/C,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,UAAU,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IAEzE,OAAO,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAClE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,IAAa,EAAE,EAAE;IACvC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QACzB,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEpC,OAAO,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAC/E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"url.js","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;AAE7D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;AAEnF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAa,EAAE,EAAE;IACzC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QACzB,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,GAAG,GAAG,IAAI,CAAC;IACjB,MAAM,cAAc,GAAG,IAAI,CAAC;IAC5B,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IAC/C,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,UAAU,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IAEzE,OAAO,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAClE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAa,EAAE,EAAE;IAC3C,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QACzB,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;IAE1B,OAAO,GAAG,CAAC,QAAQ,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,IAAa,EAAE,EAAE;IACvC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QACzB,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEpC,OAAO,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAC/E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC"}

package/mobile/lib/wlc.json

@@ -1,5 +1,7 @@
 {
     "PROD_BRANCH": "master",
     "FORCED_DRAFT_FLOW": false,
-    "YANDEX_MAP_API_KEY": "f4b40c1e-1891-45f2-b307-90c481af210b"
+    "YANDEX_MAP_API_KEY": "f4b40c1e-1891-45f2-b307-90c481af210b",
+    "BASE_PATH": "/natural/",
+    "SITEMAP": "sayt-rshb"
 }

package/mobile/src/ProjectSettings.ts

@@ -7,6 +7,7 @@ export interface ProjectSettings {
   SITEMAP?: string;
   FOOTER?: string;
   CDN?: string; // Should ends with "/"
+  BASE_PATH?: string; // Should ends with "/"
   YANDEX_MAP_API_KEY?: string;
   YANDEX_METRIKA_ID?: string;
 }
@@ -45,6 +46,11 @@ export const projectSettings = new (class implements ProjectSettings {
   get CDN() {
     return this._.CDN;
   }
+  get BASE_PATH() {
+    return this._.BASE_PATH && !this._.BASE_PATH.endsWith('/')
+      ? `${this._.BASE_PATH}/`
+      : this._.BASE_PATH;
+  }
   get YANDEX_MAP_API_KEY() {
     return this._.YANDEX_MAP_API_KEY;
   }

package/mobile/src/api/LikeAPI.ts

@@ -114,7 +114,7 @@ export function LikeAPI() {
 
   async function auth(): Promise<UserData> {
     try {
-      const userData: UserData = JSON.parse(globalThis.localStorage.getItem(STORAGE_KEY) || '');
+      const userData: UserData = JSON.parse(globalThis.localStorage?.getItem(STORAGE_KEY) || '');
       if (userData?.token) {
         return userData;
       }
@@ -136,7 +136,7 @@ export function LikeAPI() {
 
       const { token, name } = await response.json();
 
-      globalThis.localStorage.setItem(STORAGE_KEY, JSON.stringify({ token, name }));
+      globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify({ token, name }));
 
       return { token, name } as UserData;
     } catch (e) {

package/mobile/src/common.css

@@ -151,6 +151,56 @@ html {
   }
 }
 
+@layer components {
+  .md-container .h1 {
+    @apply text-h1;
+  }
+
+  .md-container .h2 {
+    @apply text-h2;
+  }
+
+  .md-container .h3 {
+    @apply text-h3;
+  }
+
+  .md-container .h4 {
+    @apply text-h4;
+  }
+
+  .md-container .h5 {
+    @apply text-h5;
+  }
+
+  .md-container .h6 {
+    @apply text-h6;
+  }
+
+  .md-container ul {
+    @apply list-inside list-disc;
+  }
+
+  .md-container ol {
+    @apply list-inside list-decimal;
+  }
+
+  .md-container p {
+    @apply text-l font-light;
+  }
+
+  .md-container li {
+    @apply text-l font-light;
+  }
+
+  .md-container li > p {
+    @apply inline;
+  }
+
+  .md-container a {
+    @apply text-primary-main;
+  }
+}
+
 /*
   Styling Yandex Map element
  */

package/mobile/src/components/ProductTile/ProductTile.example.json

@@ -12,14 +12,17 @@
     "version": "primary",
     "benefits": [
       {
+        "type": "default",
         "label": "Преимущество 1",
         "description": "Описание"
       },
       {
+        "type": "default",
         "label": "Преимущество 2",
         "description": "Описание"
       },
       {
+        "type": "default",
         "label": "Преимущество 3",
         "description": "Описание"
       }

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -1,14 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionAdditionalStyleMap, VersionStyleMap } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Img } from '../../ui-kit/Img/Img';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
-import type { ProductTileContent, TextBenefit } from './ProductTileContent';
+import type { Benefit, ProductTileContent } from './ProductTileContent';
+import { renderAdditionalDescription } from './renderAdditionalDescription';
+import { renderBenefit } from './renderBenefit';
+import { renderImage } from './renderImage';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
@@ -43,7 +45,7 @@ export const ProductTile = JSX<ProductTileProps>(
           {...rest}
         />
         {renderBenefits(benefits, version, image)}
-        {additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null}
+        {renderAdditionalDescription(additionalDescription, image)}
         {buttons?.length ? (
           <ButtonSection buttons={buttons} className="mt-5 gap-4 z-10 text-l" />
         ) : null}
@@ -53,53 +55,20 @@ export const ProductTile = JSX<ProductTileProps>(
   ),
 );
 
-function renderBenefits(benefits: TextBenefit[], version: BlockVersion, image?: Picture) {
+function renderBenefits(benefits: Benefit[], version: BlockVersion, image?: Picture) {
+  if (!benefits.length) {
+    return null;
+  }
+
   // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-  const BENEFITS_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
+  const benefitsWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
 
   return (
     <div
       className={`z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline
-        ${BENEFITS_WIDTH}`}
+        ${benefitsWidth}`}
     >
       {benefits.length ? benefits.map(renderBenefit(version)) : null}
     </div>
   );
 }
-
-const renderBenefit =
-  (version: BlockVersion = 'primary') =>
-  (benefit: TextBenefit, i: number) => {
-    const { label = '', description = '' } = benefit;
-
-    return [
-      <div key={`label-${i}`} className="text-h6">
-        {label}
-      </div>,
-      <div key={`desc-${i}`} className={`text-m-light ${VersionAdditionalStyleMap[version]}`}>
-        {description}
-      </div>,
-    ];
-  };
-
-function renderAdditionalDescription(additionalDescription: string, image?: Picture) {
-  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-  const DESCRIPTION_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-
-  return (
-    <div className={`text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH}`}>{additionalDescription}</div>
-  );
-}
-
-function renderImage(image?: Picture, isImageOnRightSide?: boolean) {
-  if (!image?.src) {
-    return null;
-  }
-
-  return (
-    <Img
-      className={`absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`}
-      image={image}
-    />
-  );
-}

package/mobile/src/components/ProductTile/ProductTile.ui.json

@@ -1 +1,14 @@
-{}
+{
+  "content": {
+    "benefits": {
+      "items": {
+        "md": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
+    }
+  }
+}

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -2,8 +2,32 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { DescriptionProps, HeadlineProps, LabelProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { MarkdownTextProps } from '../../ui-kit/MarkdownText/MarkdownTextProps';
 
-export type TextBenefit = DescriptionProps & LabelProps;
+/**
+ * @title Стандартный
+ */
+type TextBenefit = DescriptionProps &
+  LabelProps & {
+    /** @default default */
+    type: 'default';
+  };
+
+/**
+ * @title Форматированный текст
+ */
+type MarkdownTextContent = MarkdownTextProps & {
+  /** @default md */
+  type: 'md';
+};
+
+/**
+ * @title Преимущество
+ * @default{
+ *  "type": "default"
+ * }
+ */
+export type Benefit = TextBenefit | MarkdownTextContent;
 
 /**
  * @title Продуктовая плитка
@@ -30,7 +54,7 @@ export type ProductTileContent = HeadlineProps &
      * @title Преимущества
      * @maxItems 7
      */
-    benefits?: TextBenefit[];
+    benefits?: Benefit[];
     /** @title Дополнительное описание */
     additionalDescription?: string;
     /** @title Картинка справа/текст слева */

package/mobile/src/components/ProductTile/renderAdditionalDescription.tsx

@@ -0,0 +1,30 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+
+const DESCRIPTION_STYLE_MAP: Record<BlockVersion, TextColor> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
+export function renderAdditionalDescription(
+  additionalDescription?: string,
+  image?: Picture,
+  version: BlockVersion = 'primary',
+) {
+  if (!additionalDescription) {
+    return null;
+  }
+
+  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+  const descriptionWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
+
+  return (
+    <div className={`mt-2.5 z-10 ${descriptionWidth}`}>
+      <Paragraph size="text-m" font="font-light" color={DESCRIPTION_STYLE_MAP[version]}>
+        {additionalDescription}
+      </Paragraph>
+    </div>
+  );
+}

package/mobile/src/components/ProductTile/renderBenefit.tsx

@@ -0,0 +1,39 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import { MarkdownText } from '../../ui-kit/MarkdownText/MarkdownText';
+import { Text } from '../../ui-kit/Text/Text';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+import type { Benefit } from './ProductTileContent';
+
+const LABEL_STYLE_MAP: Record<BlockVersion, TextColor> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
+export const renderBenefit =
+  (version: BlockVersion = 'primary') =>
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
+  (benefit: Benefit, i: number) => {
+    const { type } = benefit;
+
+    if (!(type === 'default' || type === 'md')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return [
+          <Text key={`label-${i}`} size="text-h6">
+            {benefit.label}
+          </Text>,
+          <Text key={`desc-${i}`} size="text-m-light" color={LABEL_STYLE_MAP[version]}>
+            {benefit.description}
+          </Text>,
+        ];
+      case 'md':
+        return <MarkdownText md={benefit.md} />;
+      default:
+        assertUnreachable(benefit);
+    }
+  };

package/mobile/src/components/ProductTile/renderImage.tsx

@@ -0,0 +1,15 @@
+import type { Picture } from '../../model/Picture';
+import { Img } from '../../ui-kit/Img/Img';
+
+export function renderImage(image?: Picture, isImageOnRightSide?: boolean) {
+  if (!image?.src) {
+    return null;
+  }
+
+  return (
+    <Img
+      className={`absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`}
+      image={image}
+    />
+  );
+}

package/mobile/src/content-page-repository/transformImg.ts

@@ -1,13 +1,13 @@
 import fs from 'fs';
 import path from 'path';
-import util from 'util';
-import sharp from 'sharp';
 import type { ResizeOptions, Sharp } from 'sharp';
+import sharp from 'sharp';
+import util from 'util';
 import type { ImageSize } from '../model/ImageSize';
-import type { TransformationOptions } from './TransformationOptions';
 import type { ImgAlignment, ImgSource, Picture } from '../model/Picture';
-import { transformSrc } from './transformSrc';
 import { isPictureSizeEmpty } from '../utils/isPictureSizeEmpty';
+import type { TransformationOptions } from './TransformationOptions';
+import { transformSrc } from './transformSrc';
 
 const mkdir = util.promisify(fs.mkdir);
 
@@ -126,20 +126,12 @@ function getCompositionResizeSize(
   const { width, height } = size;
   const { width: containerWidth, height: containerHeight } = containerSize;
 
-  let widthRatio = 0;
-  let heightRatio = 0;
-
   if (!(width || height)) {
     return undefined;
   }
 
-  if (width) {
-    widthRatio = containerWidth / width;
-  }
-
-  if (height) {
-    heightRatio = containerHeight / height;
-  }
+  const widthRatio = width ? containerWidth / width : 0;
+  const heightRatio = height ? containerHeight / height : 0;
 
   return widthRatio > heightRatio
     ? { width: Math.min(Number(width), containerWidth) }

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

@@ -1,6 +1,6 @@
-import { unified } from 'unified';
-import remarkParse from 'remark-parse';
 import remarkHtml from 'remark-html';
+import remarkParse from 'remark-parse';
+import { unified } from 'unified';
 
 export async function transformMarkdown(markdown: string | null | undefined): Promise<string> {
   if (!markdown) {
@@ -9,5 +9,5 @@ export async function transformMarkdown(markdown: string | null | undefined): Pr
 
   const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
 
-  return result.toString('utf-8');
+  return result.toString('utf-8').replaceAll(/<h(\d)>([^<]*)<\/h\d>/g, '<p class="h$1">$2</p>');
 }

package/mobile/src/hooks/useLink.ts

@@ -1,4 +1,4 @@
-import type { LinkProps } from '../model/LinkProps';
+import type { LinkProps, Target } from '../model/LinkProps';
 import { useBlockRouter } from '../services/BlockRouter/useBlockRouter';
 import { adjustHref } from '../utils/adjustHref';
 import { isHash, isURL } from '../utils/url';
@@ -25,11 +25,7 @@ export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
       onClick: handlerDecorator((ev?: { preventDefault: () => void }) => {
         props.onClick && props.onClick(ev);
 
-        const isLocalHref = href && !isURL(href);
-        const isLocalTarget = !props.target || props.target === '_self';
-
-        if (!isLocalHref || !isLocalTarget) {
-          // Default handle
+        if (isRemoteHref(href, props.target)) {
           return;
         }
 
@@ -37,9 +33,12 @@ export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
         if (isHash(href)) {
           blockRouter.goto(href);
         } else {
-          router.push(href);
+          href && router.push(href);
         }
       }, props),
     };
   };
 }
+
+const isRemoteHref = (href?: string, target?: Target) =>
+  isURL(href) || (target && target !== '_self') || href?.startsWith('/');

package/mobile/src/hooks/useLocation.ts

@@ -15,14 +15,10 @@ interface LocationStorageData {
   region: RegionData;
 }
 
-const localStorageLocation = globalThis?.localStorage.getItem('location');
-const currentLocation: LocationStorageData | null = localStorageLocation
-  ? JSON.parse(localStorageLocation)
-  : null;
-
 export function useLocation(
   defaultLocation: string,
 ): [RegionData, (newLocation: RegionData) => void] {
+  const currentLocation = getLocalStorageLocation();
   const [location, setLocation] = useState<RegionData>(
     currentLocation?.region ?? { name: defaultLocation },
   );
@@ -38,7 +34,7 @@ export function useLocation(
 
   const onChangeLocation = useCallback(
     (region: RegionData) => {
-      globalThis?.localStorage.setItem('location', JSON.stringify({ manual: true, region }));
+      globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
       setLocation(region);
     },
     [setLocation],
@@ -46,3 +42,13 @@ export function useLocation(
 
   return [location, onChangeLocation];
 }
+
+const getLocalStorageLocation = (): LocationStorageData | null => {
+  const localStorageLocation = globalThis.localStorage?.getItem('location');
+
+  try {
+    return localStorageLocation ? JSON.parse(localStorageLocation) : null;
+  } catch (_) {
+    return null;
+  }
+};

package/mobile/src/services/BlockRouter/BlockRouter.ts

@@ -29,7 +29,7 @@ export class BlockRouter {
     }
   }
 
-  goto(rawAnchor: string) {
+  goto(rawAnchor?: string) {
     const anchor = normalizeAnchor(rawAnchor);
     if (anchor) {
       this.push(anchor);

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

@@ -1,6 +1,7 @@
+import type { Router } from '../../hooks/useRouter';
 import { getOrigin } from '../../utils/url';
 
-export const checkIsHrefSameOrigin = (
-  href: string | undefined,
-  router: { pathname?: string; href?: string },
-) => getOrigin(href) === getOrigin(router.href);
+export const checkIsHrefSameOrigin = (href: string | undefined, router: Router) =>
+  [getOrigin(href), getOrigin(router.href)].every(
+    (link, _, arr) => Boolean(link) && link === arr[0],
+  );

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

@@ -1,10 +1,13 @@
-import { isURL, withoutQuery } from '../../utils/url';
+import { normalizeURLPath } from '../../utils/normalizeURLPath';
+import { getPathname, isURL, withoutQuery } from '../../utils/url';
 
 export const isHrefActive = (
   href: string | undefined,
   router: { pathname?: string; href?: string },
   cmp: (targetHref: string, baseHref: string) => boolean = (targetHref, baseHref) =>
     baseHref.startsWith(targetHref),
-) => {
-  return cmp(withoutQuery(href), withoutQuery(isURL(href) ? router.href : router.pathname));
-};
+) =>
+  cmp(
+    withoutQuery(normalizeURLPath(href)),
+    withoutQuery(isURL(href) ? router.href : getPathname(router.href)),
+  );

package/mobile/src/setup-fixture.ts

@@ -8,11 +8,11 @@ import wlc from './wlc.json';
 projectSettings.setup(wlc);
 
 useRouter.setup(() => {
-  const [href, setHref] = useState<string>(globalThis.location.href);
+  const [, setHref] = useState<string>(globalThis.location.href);
 
   return {
-    href: href,
-    pathname: '/credits',
+    href: `${globalThis.location.origin}${projectSettings.BASE_PATH}cards-credit`, //for header active links
+    pathname: '/cards-credit',
     query: {},
     push: (url: string) => {
       globalThis.history.pushState(null, '', url);

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

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { MarkdownTextProps } from './MarkdownTextProps';
+
+export const MarkdownText = JSX<MarkdownTextProps>((props) => {
+  const { md = '' } = props;
+
+  return <div className="md-container" dangerouslySetInnerHTML={{ __html: md }} />;
+});

package/mobile/src/ui-kit/MarkdownText/MarkdownTextProps.ts

@@ -0,0 +1,6 @@
+type Markdown = string;
+
+export interface MarkdownTextProps {
+  /** @title Текст */
+  md?: Markdown;
+}

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

@@ -8,10 +8,8 @@ interface TextProps {
   font?: FontWeight;
 }
 
-export const Text = JSX<TextProps>((props) => {
-  const { size = '', color = '', align = '', font = '', children } = props;
-
-  const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
-
-  return <span className={textClasses}>{children}</span>;
-});
+export const Text = JSX<TextProps>(({ size, color, align, font, children }) => (
+  <span className={['font-sans', size, color, align, font].filter(Boolean).join(' ')}>
+    {children}
+  </span>
+));

package/mobile/src/utils/normalizeURLPath.ts

@@ -0,0 +1,10 @@
+import { projectSettings } from '../ProjectSettings';
+import { isURL } from './url';
+
+export const normalizeURLPath = (href?: string) => {
+  if (isURL(href) || href?.startsWith('/')) {
+    return href;
+  }
+
+  return `${projectSettings.BASE_PATH || ''}${href}`;
+};