@redneckz/wildless-cms-uni-blocks 0.8.27 → 0.8.29

package/mobile/src/components/TextBlock/TextBlockContent.ts

@@ -1,13 +1,10 @@
+import type { BulletsProps } from '../../model/Bullets';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
-/**
- * @title Цвет блока
- * @enumNames ["Основная", "Второстепенная", "Второстепенная прозрачная"]
- */
-export type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';
-
 /**
  * @title Размер иконки
  * @enumNames ["Нет", "Маленькая", "Большая"]
@@ -17,13 +14,11 @@ type TextBlockIconVersion = 'none' | 'small' | 'big';
 /**
  * @title Текстовый блок
  */
-export type TextBlockContent = HeadlineCommonProps &
+export type TextBlockContent = UniBlockContent &
+  HeadlineCommonProps &
   RichTextProps &
-  ImageContent & {
+  ImageContent &
+  ListContent &
+  BulletsProps & {
     iconVersion?: TextBlockIconVersion;
-    blockVersion?: TextBlockVersion;
-    /** @title Буллиты */ // TODO: mobile prop
-    isDotted?: boolean;
-    /** @title Список (моб.) */ // TODO: mobile prop
-    items?: string[];
   };

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

@@ -7,7 +7,15 @@
       "format": "webp",
       "size": {
         "width": 445
-      }
+      },
+      "sources": [
+        {
+          "media": 1279,
+          "width": 276,
+          "format": "webp",
+          "alignment": "southeast"
+        }
+      ]
     },
     "isDotted": true,
     "listItemSize": "M",

package/mobile/src/components/Tile/TileContent.ts

@@ -1,7 +1,8 @@
+import type { BulletsProps } from '../../model/Bullets';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { ListItemSize } from '../../ui-kit/List/ListProps';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
@@ -15,26 +16,8 @@ export type TileContent = UniBlockContent &
   RichTextProps &
   ListContent &
   ButtonContent &
-  TagsContent & {
-    /**
-     * @default {
-     *   "format": "webp",
-     *   "size": {
-     *       "width": 320
-     *   },
-     *   "sources": [{
-     *       "media": 1279,
-     *	     "width": 192,
-     *       "format": "webp",
-     *       "alignment": "southeast"
-     *   }]
-     * }
-     */
-    image?: Picture;
-    /**
-     *  @title Буллиты
-     *  @default true
-     */
-    isDotted?: boolean;
+  TagsContent &
+  ImageContent &
+  BulletsProps & {
     listItemSize?: ListItemSize;
   };

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

@@ -1,6 +1,7 @@
 {
   "content": {
     "version": "primary",
+    "isTheme": false,
     "isPadding": false,
     "isInnerPadding": true,
     "align": "stretch",

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -24,6 +24,7 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
     isPadding = false,
     isInnerPadding = true,
     version = 'transparent',
+    isTheme = false,
     options,
     ...rest
   }) => {
@@ -39,6 +40,7 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
           className,
         )}
         version={version}
+        isTheme={isTheme}
         {...rest}
       >
         {renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } })}
@@ -47,4 +49,6 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
   },
 );
 
-VerticalLayout.childrenTypes = [];
+VerticalLayout.childrenTypes = {
+  exclude: ['Accordion', 'OtherProducts'],
+};

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

@@ -1,5 +1,11 @@
 {
   "content": {
-    "title": "Заголовок блока"
+    "title": "Заголовок блока",
+    "previewImg": {
+      "format": "webp",
+      "size": {
+        "width": 1004
+      }
+    }
   }
 }

package/mobile/src/components/Video/VideoContent.ts

@@ -2,26 +2,13 @@ import type { TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 
-/**
- * @title Блок Видео
- * @default {
- *   "title": "Заголовок блока"
- * }
- */
+/** @title Блок Видео */
 export type VideoContent = UniBlockContent &
   TitleProps & {
     /**
      * @title Ссылка на видео
      */
     url?: string;
-    /**
-     * @title Заставка в блоке
-     * @default {
-     *   "format": "webp",
-     *   "size": {
-     *       "width": 1004
-     *   },
-     * }
-     */
+    /** @title Заставка в блоке */
     previewImg?: Picture;
   };

package/mobile/src/{services/sitemap → hooks}/fallbackWCMSResource.ts

@@ -1,5 +1,5 @@
 import { readFile } from 'fs/promises';
-import type { FallbackMap } from '../../model/Fallback';
+import type { FallbackMap } from '../model/Fallback';
 
 export const fallbackWCMSResource = (filename: string): FallbackMap => ({
   [`/wcms-resources/${filename}.json`]: async () =>

package/mobile/src/hooks/useCarouselControls.ts

@@ -11,28 +11,18 @@ export interface CarouselControls {
 interface CarouselControlsProps {
   itemCount: number;
   visibleItemCount?: number;
-  isCyclic?: boolean;
-  container?: HTMLDivElement | null;
 }
 
 export const useCarouselControls = (props: CarouselControlsProps): [number, CarouselControls] => {
-  const { itemCount, visibleItemCount, isCyclic } = props;
+  const { itemCount, visibleItemCount } = props;
 
   const [activeIndex, setActiveIndex] = useState(0);
 
-  const inc = useCallback(
-    () => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemCount : Math.min(_ + 1, itemCount - 1))),
-    [isCyclic, itemCount],
-  );
-  const dec = useCallback(
-    () => setActiveIndex((_) => (isCyclic ? (itemCount + _ - 1) % itemCount : Math.max(_ - 1, 0))),
-    [isCyclic, itemCount],
-  );
+  const inc = useCallback(() => setActiveIndex((_) => Math.min(_ + 1, itemCount - 1)), [itemCount]);
+  const dec = useCallback(() => setActiveIndex((_) => Math.max(_ - 1, 0)), [itemCount]);
 
-  const canInc =
-    isCyclic ||
-    (isScrollable(activeIndex, props) && activeIndex < itemCount - (visibleItemCount || 1));
-  const canDec = isCyclic || activeIndex > 0;
+  const canInc = isScrollable(props) && activeIndex < itemCount - (visibleItemCount || 1);
+  const canDec = activeIndex > 0;
   const isScrollAvailable = canDec || canInc;
 
   return [
@@ -47,19 +37,6 @@ export const useCarouselControls = (props: CarouselControlsProps): [number, Caro
   ];
 };
 
-function isScrollable(
-  activeIndex: number,
-  { itemCount, visibleItemCount, container }: CarouselControlsProps,
-): boolean {
-  if (visibleItemCount) {
-    return itemCount > visibleItemCount;
-  }
-
-  if (container) {
-    const scrollLeft = (container.scrollWidth * activeIndex) / itemCount;
-
-    return scrollLeft + container.clientWidth < container.scrollWidth;
-  }
-
-  return false;
+function isScrollable({ itemCount, visibleItemCount }: CarouselControlsProps): boolean {
+  return Boolean(visibleItemCount && itemCount > visibleItemCount);
 }

package/mobile/src/hooks/useLink.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from '../model/LinkProps';
-import type { PreventableEvent } from '../model/PreventableEvent';
+import type { PreventableEvent } from '../ui-kit/PreventableEvent';
 import { adjustHref } from '../utils/adjustHref';
 import { isLocalURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';

package/{src/services/sitemap → mobile/src/hooks}/useSWRResource.ts

@@ -1,6 +1,6 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
-import type { Fallback } from '../../model/Fallback';
-import { fetchJSONUnsafe } from '../../utils/fetchJSON';
+import type { Fallback } from '../model/Fallback';
+import { fetchJSONUnsafe } from '../utils/fetchJSON';
 
 export function useSWRResource<Data>(filename: string, fallback: Fallback = {}): Data {
   const { data } = useAsyncData<Data>(`/wcms-resources/${filename}.json`, fetchJSONUnsafe, {

package/mobile/src/model/Bullets.ts

@@ -0,0 +1,4 @@
+export type BulletsProps = {
+  /** @title Буллиты */
+  isDotted?: boolean;
+};

package/mobile/src/model/Button.ts

@@ -0,0 +1,16 @@
+import type { ButtonProps, ButtonWithIconProps } from '../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Блок Кнопка
+ */
+export interface ButtonCommonProps {
+  /** @title Кнопка */
+  button?: ButtonProps;
+}
+/**
+ * @title Блок Кнопка
+ */
+export interface ButtonCommonIconProps {
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
+}

package/mobile/src/model/HeadlineType.ts

@@ -20,6 +20,11 @@ export type DescriptionProps = {
   description?: string;
 };
 
+export type SubtitleProps = {
+  /** @title Подзаголовок */
+  subtitle?: string;
+};
+
 export type LabelProps = {
   /** @title Название */
   label?: string;

package/mobile/src/model/Picture.ts

@@ -1,6 +1,6 @@
 import type { IconName } from '../icons/IconName';
 import type { IconVersion } from './IconVersion';
-import { ImageSize } from './ImageSize';
+import type { ImageSize } from './ImageSize';
 
 export type ImgFormats = 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
 
@@ -17,7 +17,6 @@ export type ImgFormats = 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avi
  *    "Снизу по центру",
  *    "Снизу справа"
  *  ]
- * @default "center"
  */
 export type ImgAlignment =
   | 'northwest'
@@ -33,15 +32,9 @@ export type ImgAlignment =
 export interface Img {
   /** @title Картинка */
   src?: string;
-  /**
-   * @title Альтернативный текст (alt)
-   * @default ""
-   */
+  /** @title Альтернативный текст (alt) */
   alt?: string;
-  /**
-   * @title Текст подсказки (title)
-   * @default ""
-   */
+  /** @title Текст подсказки (title) */
   title?: string;
 }
 

package/mobile/src/services/search/jaroWinklerDistance.ts

@@ -0,0 +1,98 @@
+const JARO_WINKLER_P = 0.1;
+const JARO_WINKLER_MAX_L = 4;
+
+export const jaroWinklerDistance =
+  (s1: string | undefined) =>
+  (s2: string | undefined): number => {
+    if (s1 === s2) {
+      return 1;
+    }
+
+    if (!s1 || !s2) {
+      return 0;
+    }
+
+    const { m, s1Matches, s2Matches } = computeM(s1, s2);
+
+    if (m === 0) {
+      return 0;
+    }
+
+    const t = computeT(s1, s2, { s1Matches, s2Matches });
+
+    const jaroWeight = (m / s1.length + m / s2.length + (m - t / 2) / m) / 3;
+    const winklerWeight = jaroWeight > 0.7 ? computePrefixL(s1, s2) * JARO_WINKLER_P : 0;
+
+    return jaroWeight + winklerWeight * (1 - jaroWeight);
+  };
+
+function computeM(
+  s1: string,
+  s2: string,
+): {
+  m: number;
+  s1Matches: boolean[];
+  s2Matches: boolean[];
+} {
+  const range = Math.max(0, Math.floor(Math.max(s1.length, s2.length) / 2) - 1);
+
+  const s1Matches = new Array<boolean>(s1.length);
+  const s2Matches = new Array<boolean>(s2.length);
+
+  let m = 0;
+
+  for (let i = 0; i < s1.length; i++) {
+    const low = Math.max(0, i - range);
+    const high = Math.min(i + range, s2.length - 1);
+
+    for (let j = low; j <= high; j++) {
+      if (s1Matches[i] || s2Matches[j] || s1[i] !== s2[j]) {
+        continue;
+      }
+
+      m++;
+      s1Matches[i] = true;
+      s2Matches[j] = true;
+    }
+  }
+
+  return { m, s1Matches, s2Matches };
+}
+
+function computeT(
+  s1: string,
+  s2: string,
+  { s1Matches, s2Matches }: { s1Matches: boolean[]; s2Matches: boolean[] },
+): number {
+  let t = 0;
+
+  for (let i = 0, k = 0; i < s1.length; i++) {
+    if (!s1Matches[i]) {
+      continue;
+    }
+
+    let j = k;
+    for (; j < s2.length; j++) {
+      if (s2Matches[j]) {
+        k = j + 1;
+        break;
+      }
+    }
+
+    if (s1[i] !== s2[j]) {
+      t++;
+    }
+  }
+
+  return t;
+}
+
+function computePrefixL(s1: string, s2: string): number {
+  let prefixL = 0;
+
+  while (s1[prefixL] === s2[prefixL] && prefixL < JARO_WINKLER_MAX_L) {
+    prefixL++;
+  }
+
+  return prefixL;
+}

package/mobile/src/services/search/joinMaps.ts

@@ -0,0 +1,9 @@
+export const joinMaps =
+  <K, A, B>(aggregate: (a: A, b: B) => A, emptyVal: A) =>
+  (acc: Map<K, A>, map: Map<K, B>): Map<K, A> => {
+    for (const [key, b] of map) {
+      acc.set(key, aggregate(acc.get(key) || emptyVal, b));
+    }
+
+    return acc;
+  };

package/mobile/src/services/search/search.ts

@@ -0,0 +1,73 @@
+import { compareBy, desc } from '../../utils/Comparator';
+import { zip } from '../../utils/zip';
+import { jaroWinklerDistance } from './jaroWinklerDistance';
+import { joinMaps } from './joinMaps';
+import { textRank } from './textRank';
+import { tokenize } from './tokenize';
+
+export interface CorpusItem {
+  uri?: string;
+  title?: string;
+}
+
+type Stem = string;
+type CorpusItemIndex = number;
+
+export interface SearchIndex {
+  corpus?: CorpusItem[];
+  dictionary?: Record<Stem, CorpusItemIndex[]>;
+}
+
+type Rank = number;
+type PageRanking = Map<CorpusItemIndex, Rank>;
+
+const JW_THRESHOLD = 0.8;
+const RANK_EPS = 0.001;
+
+export const search =
+  (query: string | undefined) =>
+  (searchIndex: SearchIndex | undefined): CorpusItem[] => {
+    const { corpus, dictionary } = searchIndex || {};
+    if (!query || !corpus?.length || !dictionary || !Object.keys(dictionary).length) {
+      return [];
+    }
+
+    const queryTokens = tokenize(query);
+    if (!queryTokens.length) {
+      return [];
+    }
+
+    const dictEntries = Object.entries(dictionary);
+    const pagesRanking: PageRanking = queryTokens
+      .map(computePagesRankingPerToken(dictEntries))
+      .reduce(
+        joinMaps((a, b) => a + b, 0),
+        new Map(),
+      );
+
+    const relevantPages: CorpusItem[] = [...pagesRanking.entries()]
+      .filter(([, pageRank]) => pageRank >= (JW_THRESHOLD - RANK_EPS) * queryTokens.length) // Multiplication of query tokens
+      .map(([pageIndex]) => corpus[pageIndex]);
+
+    return sortResultsByRank(queryTokens)(relevantPages);
+  };
+
+const computePagesRankingPerToken =
+  (dictEntries: Array<[Stem, CorpusItemIndex[]]>) => (qToken: string) =>
+    dictEntries
+      .map(
+        ([stem, pageIndices]) =>
+          [jaroWinklerDistance(qToken)(stem), pageIndices] as [Rank, CorpusItemIndex[]],
+      )
+      .filter(([stemRank]) => stemRank >= JW_THRESHOLD)
+      .map(([stemRank, pageIndices]) => fillMapWith(pageIndices, stemRank))
+      .reduce(joinMaps(Math.max, 0), new Map<CorpusItemIndex, Rank>());
+
+const sortResultsByRank =
+  (queryTokens: string[]) =>
+  (results: CorpusItem[]): CorpusItem[] =>
+    zip(results, results.map(({ title }) => title).map(textRank(queryTokens)))
+      .sort(desc(compareBy(([, pageTitleRank]) => pageTitleRank)))
+      .map(([corpusItem]) => corpusItem);
+
+const fillMapWith = <K, V>(keys: K[], value: V): Map<K, V> => new Map(keys.map((_) => [_, value]));

package/mobile/src/services/search/textRank.ts

@@ -0,0 +1,14 @@
+import { max } from '../../utils/maxBy';
+import { sum } from '../../utils/sum';
+import { jaroWinklerDistance } from './jaroWinklerDistance';
+import { tokenize } from './tokenize';
+
+export const textRank =
+  (queryTokens: string[]) =>
+  (text: string | undefined): number => {
+    const textTokens = tokenize(text || '');
+
+    return textTokens.length
+      ? sum(queryTokens.map((qToken) => max(textTokens.map(jaroWinklerDistance(qToken)))))
+      : 0;
+  };

package/mobile/src/services/search/tokenize.ts

@@ -0,0 +1,7 @@
+const MIN_TERM_LEN = 3;
+
+export const tokenize = (text: string) =>
+  text
+    .toLowerCase()
+    .split(/[^0-9a-zа-я-]+/)
+    .filter((token) => token.length >= MIN_TERM_LEN && !/[0-9a-z]/.test(token));

package/mobile/src/services/search/useSearch.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSON } from '../../utils/fetchJSON';
+import { joinPath } from '../../utils/url';
+import { CorpusItem, search, SearchIndex } from './search';
+
+const SEARCH_INDEX_FILENAME = 'search.index.json';
+
+export type SearchResult = Array<CorpusItem[]>; // List of pages (CorpusItem) per base path from "basePathList"
+
+export interface SearchInputProps {
+  value: string;
+  onChange: (query: string) => void;
+  onFocus: () => void;
+}
+
+export const useSearch = (
+  basePathList: string[] = ['/'],
+): [SearchResult | null, SearchInputProps] => {
+  const [query, setQuery] = useState('');
+
+  const [wasQueryFocused, setWasQueryFocused] = useState(false);
+  const handleFocus = useCallback(() => {
+    setWasQueryFocused(true);
+  }, []);
+
+  const key = useMemo(
+    () => basePathList.map((_) => (wasQueryFocused ? _ : null)), // Load search index on input focus
+    [wasQueryFocused, ...basePathList],
+  );
+
+  const { data } = useAsyncData(key, fetchSearchIndex);
+
+  const [result, setResult] = useState<SearchResult | null>(null);
+
+  useEffect(() => {
+    const timerId = setTimeout(() => {
+      if (data) {
+        setResult(data.map(search(query)));
+      }
+    }, 300);
+
+    return () => {
+      clearTimeout(timerId);
+    };
+  }, [data, query]);
+
+  return [result, { value: query, onChange: setQuery, onFocus: handleFocus }];
+};
+
+const fetchSearchIndex = async (...basePathList: (string | null)[]): Promise<SearchIndex[]> =>
+  (
+    await Promise.allSettled<SearchIndex | null>(
+      basePathList.map((basePath) => fetchJSON(joinPath(basePath, '/', SEARCH_INDEX_FILENAME))),
+    )
+  ).map((_) => (_.status === 'fulfilled' ? _.value : {}) as SearchIndex);

package/mobile/src/services/sitemap/{SitemapProps.ts → SitemapData.ts}

@@ -26,7 +26,7 @@ export interface DispositionItem extends LinkProps {
  */
 export type ForeignOffice = LinkProps & IconProps;
 
-export interface SitemapDataProps {
+export interface SitemapData {
   topItems?: TopMenuItem[];
   dispositions?: DispositionItem[];
   logo?: LogoType;

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

@@ -1,14 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../EventBus/defaultEventBus';
-import type { BlockVersion } from '../model/BlockVersion';
-import type { UniBlockProps } from '../model/JSXBlock';
 import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
 import { style } from '../utils/style';
+import type { BlockVersion } from '../model/BlockVersion';
+import type { UniBlockProps } from '../model/JSXBlock';
 
 interface BlockWrapperProps extends UniBlockProps {
   tag?: keyof HTMLElementTagNameMap;
   role?: string;
+  extraProps?: Record<string, any>;
 }
 
 export const blockStyles: Record<BlockVersion, string> = {
@@ -27,6 +28,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     tag = 'section',
     role,
     isTheme = true,
+    extraProps = {},
     children,
   }) => {
     const Tag: any = tag;
@@ -47,7 +49,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     return (
       <Tag
         className={style(
-          isTheme ? 'group' : '',
+          groupStyle(Boolean(version && isTheme)),
           blockStyles[version],
           isHidden ? 'hidden' : '',
           className,
@@ -55,9 +57,12 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
         {...(version && isTheme ? { 'data-ver': version } : {})}
         {...(block?.anchor ? { id: block.anchor, ref } : {})}
         role={role}
+        {...extraProps}
       >
         {children}
       </Tag>
     );
   },
 );
+
+const groupStyle = (isGroup: boolean): string => (isGroup ? 'group' : '');