@redneckz/wildless-cms-uni-blocks 0.8.26 → 0.8.28

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,23 +1,15 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { BulletsProps } from '../../model/Bullets';
+import type { ButtonCommonIconProps } from '../../model/Button';
 import type { DefaultListItemType } from '../../model/DefaultListItemType';
 import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
 import type { RichTextItem } from '../../model/RichTextItem';
 import type { SizeVersion } from '../../model/SizeVersion';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 
-type StepCommonProps = IconProps & {
-  /** @title Кнопка */
-  button?: ButtonWithIconProps;
-  /**
-   * @title Буллиты
-   * @default true
-   */
-  isDotted?: boolean;
-  /** @title Список */
-  items?: string[];
-};
+type StepCommonProps = IconProps & ButtonCommonIconProps & BulletsProps & ListContent & {};
 
 /**
  * @title Стандартный
@@ -37,24 +29,18 @@ export type Step = DefaultStep | RichTextStep;
 /**
  * @title Блок шаги
  */
-export type StepsBlockContent = UniBlockContent & HeadlineCommonProps & {
-  /**
-   * @title Линии
-   * @default true
-   */
-  showLines?: boolean;
-  /**
-   * @title Шаги
-   * @minItems 2
-   * @maxItems 5
-   */
-  steps?: Step[];
-  stepVersion?: BlockVersion;
-  /** @title Кнопка */
-  button?: ButtonWithIconProps;
-  /**
-   * @title Размер шагов
-   * @default normal
-   */
-  size?: SizeVersion; // TODO: mobile content
-};
+export type StepsBlockContent = UniBlockContent &
+  HeadlineCommonProps &
+  ButtonCommonIconProps & {
+    /** @title Линии */
+    showLines?: boolean;
+    /**
+     * @title Шаги
+     * @minItems 2
+     * @maxItems 5
+     */
+    steps?: Step[];
+    stepVersion?: BlockVersion;
+    /** @title Размер шагов */
+    size?: SizeVersion; // TODO: mobile content
+  };

package/src/components/Tabs/Tabs.example.json

@@ -17,6 +17,7 @@
         "ref": "tab3",
         "title": "Вкладка 3"
       }
-    ]
+    ],
+    "tabsMode": "wideScreen"
   }
 }

package/src/components/Tabs/TabsContent.ts

@@ -46,9 +46,6 @@ export type TabsContent = UniBlockContent & {
   isSticky?: boolean;
   /** @title Показывать счетчик блоков во вкладках */
   showCounter?: boolean;
-  /**
-   * @title Режим вкладок
-   * @default "wideScreen"
-   */
+  /** @title Режим вкладок */
   tabsMode?: TabsMode;
 };

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -2,8 +2,9 @@ import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ListOrientation } from '../../model/ListOrientation';
-import type { Picture } from '../../model/Picture';
+import type { IconProps } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 
@@ -42,19 +43,14 @@ export type Data = {
 /**
  * @title Параметр
  */
-export type TariffsTableRowHeader = TitleProps & {
-  /** @default { "format": "webp", "size": { "width": 24, "height": 24 } } */
-  icon?: Picture;
-};
+export type TariffsTableRowHeader = TitleProps & IconProps & {};
 
 /**
  * @title Изображение
  */
-export type ImageCellDef = {
+export type ImageCellDef = ImageContent & {
   /** @default Img */
   tableCellType: 'Img';
-  /** @default { "format": "webp", "size": { "width": 24, "height": 24 } } */
-  image?: Picture;
 };
 
 /**
@@ -80,7 +76,6 @@ export type LabelDescriptionCellDef = LabelDescriptionCell & {
 
 /**
  * @title Список
- * @default { "listItemSize": "M", "isDotted": true  }
  */
 export type ListBlockDef = ListProps & {
   /** @default List */

package/src/components/TextBlock/TextBlockContent.ts

@@ -1,5 +1,7 @@
+import type { BulletsProps } from '../../model/Bullets';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
 /**
@@ -19,11 +21,9 @@ type TextBlockIconVersion = 'none' | 'small' | 'big';
  */
 export type TextBlockContent = HeadlineCommonProps &
   RichTextProps &
-  ImageContent & {
+  ImageContent &
+  ListContent &
+  BulletsProps & {
     iconVersion?: TextBlockIconVersion;
     blockVersion?: TextBlockVersion;
-    /** @title Буллиты */ // TODO: mobile prop
-    isDotted?: boolean;
-    /** @title Список (моб.) */ // TODO: mobile prop
-    items?: string[];
   };

package/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/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/src/components/VerticalLayout/VerticalLayout.example.json

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

package/src/components/VerticalLayout/VerticalLayout.fixture.tsx

@@ -202,6 +202,7 @@ export default {
                 align: 'center',
                 bgColorHeadline: 'transparent',
                 headlineVersion: 'M',
+                version: 'primary',
               },
               style: ['col-span-12'],
               type: 'Headline',

package/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/src/components/Video/Video.example.json

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

package/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/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/src/{services/sitemap → 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/src/model/Bullets.ts

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

package/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/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/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/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/src/services/sitemap/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/src/services/sitemap/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/src/services/sitemap/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/src/services/sitemap/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/src/services/sitemap/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));