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

package/mobile/src/ui-kit/Button/ButtonProps.ts

@@ -2,6 +2,7 @@ import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconProps, Picture } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
+import type { PreventableEvent } from '../PreventableEvent';
 
 /**
  * @hidden
@@ -11,23 +12,23 @@ export interface ButtonAdditionalProps {
   disabled?: boolean;
   rel?: string;
   ariaLabel?: string;
-  onClick?: (ev?: { preventDefault: () => void }) => void;
+  onClick?: (ev?: PreventableEvent) => void;
 }
 
 /**
  * @title Кнопка
  */
 export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
-  /**
-   * @title Текст
-   * @default Кнопка
-   */
+  /** @title Текст */
   text?: string;
   /** @title Закругленные углы */
   rounded?: boolean;
   version?: ButtonVersion;
 }
 
+/**
+ * @title Кнопка
+ */
 export interface ButtonWithIconProps extends ButtonProps {
   /** @title Иконка слева */
   icon?: Picture;

package/mobile/src/ui-kit/Dialog/CloseButton.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Img } from '../Img/Img';
+import type { PreventableEvent } from '../PreventableEvent';
+
+interface CloseButtonProps {
+  className?: string;
+  onClick?: (ev: PreventableEvent) => void;
+}
+
+export const CloseButton = JSX<CloseButtonProps>(({ className, onClick }) => (
+  <button
+    className={style(
+      'visible peer-placeholder-shown:invisible w-6 h-6 p-1 bg-transparent border-none',
+      className,
+    )}
+    onClick={onClick}
+    title="Закрыть"
+  >
+    <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
+  </button>
+));

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

@@ -0,0 +1,54 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import type { VNode } from '../../model/VNode';
+import { style } from '../../utils/style';
+import type { PreventableEvent } from '../PreventableEvent';
+import { CloseButton } from './CloseButton';
+
+export interface DialogProps {
+  className?: string;
+  head?: VNode;
+  onClose?: () => void;
+}
+
+export const Dialog = JSX<DialogProps>(({ className, head, children, onClose }) => {
+  const handleClose = useCallback(
+    (ev: PreventableEvent) => {
+      ev.preventDefault();
+      onClose && onClose();
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    const handleEscape = ({ key }: { key: string }) => {
+      if (key === 'Escape') {
+        onClose && onClose();
+      }
+    };
+
+    globalThis.document?.addEventListener('keydown', handleEscape);
+
+    return () => {
+      globalThis.document?.removeEventListener('keydown', handleEscape);
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      className={style(
+        'fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar',
+        className,
+      )}
+      role="dialog"
+    >
+      <div className="relative container pb-12 min-h-full">
+        <div className="sticky bg-white pt-6 top-0">
+          <CloseButton className="absolute top-3 -right-6" onClick={handleClose} />
+          {head}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+});

package/mobile/src/ui-kit/InputRange/InputRangeProps.ts

@@ -1,4 +1,6 @@
-export interface InputRangeProps {
+import type { ListContent } from '../List/ListContent';
+
+export interface InputRangeProps extends ListContent {
   className?: string;
   items?: string[];
   min?: number;

package/mobile/src/ui-kit/List/ListProps.ts

@@ -1,3 +1,4 @@
+import type { BulletsProps } from '../../model/Bullets';
 import type { ListContent } from './ListContent';
 
 /**
@@ -9,14 +10,13 @@ export type ListItemSize = 'S' | 'M' | 'L';
 /**
  * @title Содержимое списка
  */
-export interface ListProps extends ListContent {
-  /** @hidden */
-  className?: string;
-  /** @title Отступ */
-  hasIndent?: boolean;
-  /** @hidden */
-  itemClassName?: string;
-  /** @title Буллиты */
-  isDotted?: boolean;
-  listItemSize?: ListItemSize;
-}
+export type ListProps = ListContent &
+  BulletsProps & {
+    /** @hidden */
+    className?: string;
+    /** @title Отступ */
+    hasIndent?: boolean;
+    /** @hidden */
+    itemClassName?: string;
+    listItemSize?: ListItemSize;
+  };

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

@@ -1,45 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { Region } from '../../hooks/useRegions';
 import { useRegions } from '../../hooks/useRegions';
-import { useSearch } from '../../hooks/useSearch';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { ForeignOffice } from '../../services/sitemap/SitemapProps';
+import { jaroWinklerDistance } from '../../services/search/jaroWinklerDistance';
+import type { ForeignOffice } from '../../services/sitemap/SitemapData';
 import { Text } from '../../ui-kit/Text/Text';
 import { groupBy } from '../../utils/groupBy';
+import { Dialog, type DialogProps } from '../Dialog/Dialog';
 import { Img } from '../Img/Img';
+import type {
+  CurrentLocationProps,
+  ForeignOfficeProps,
+  LocationProps,
+  RegionLinkProps,
+} from './LocationProps';
 import { SearchBar } from './SearchBar';
 
 const SEARCH_TERM_MIN_LENGTH = 3;
 
-interface RegionLinkProps {
-  onChangeLocation?: (region: Region) => void;
-}
-
-interface CloseButtonProps {
-  close?: () => void;
-}
-
-interface CurrentLocationProps {
-  currentLocation?: Region;
-}
-
-interface ForeignOfficeProps {
-  foreignOffices?: ForeignOffice[];
-}
-
-export type LocationProps = ForeignOfficeProps &
-  CloseButtonProps &
-  RegionLinkProps &
-  CurrentLocationProps &
-  UniBlockProps;
-
 export const Location = JSX<LocationProps>(
-  ({ currentLocation, onChangeLocation, close, foreignOffices }) => {
-    const { term, setTerm } = useSearch();
-
-    const handleSearch = useCallback((_: string) => setTerm(_), []);
+  ({ currentLocation, onChangeLocation, onClose, foreignOffices }) => {
+    const [query, setQuery] = useState('');
 
     const regions: Region[] = cleanUpRegions(useRegions()).sort((a, b) =>
       a.name.localeCompare(b.name),
@@ -47,29 +29,34 @@ export const Location = JSX<LocationProps>(
     const regionsGroupByLetter: Map<string, Region[]> = groupBy(regions, regionFirstLetter);
 
     return (
-      <div className="absolute h-full w-full inset-0 bg-white text-l-light z-50">
-        <CloseButton close={close} />
-        <div className="container py-12">
-          <CurrentLocation currentLocation={currentLocation} />
-          <SearchBar onSearch={handleSearch} searchTerm={term} className="mb-7" />
-
-          {term && term.length >= SEARCH_TERM_MIN_LENGTH ? (
-            <div>
-              {regions
-                .filter((region) => region.name?.startsWith(term))
-                .map(renderRegion({ onChangeLocation, close }))}
-            </div>
-          ) : (
-            <div className="columns-5">
-              {Array.from(regionsGroupByLetter.entries()).map(
-                renderRegionGroup({ onChangeLocation, close }),
-              )}
-            </div>
-          )}
-
-          <ForeignOffices foreignOffices={foreignOffices} />
-        </div>
-      </div>
+      <Dialog
+        head={
+          <div>
+            <CurrentLocation currentLocation={currentLocation} />
+            <SearchBar onSearch={setQuery} searchTerm={query} className="mb-7" />
+          </div>
+        }
+        onClose={onClose}
+      >
+        {query && query.length >= SEARCH_TERM_MIN_LENGTH ? (
+          <div>
+            {regions
+              .filter(
+                ({ name }) =>
+                  name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8,
+              )
+              .map(renderRegion({ onChangeLocation, onClose }))}
+          </div>
+        ) : (
+          <div className="columns-5">
+            {Array.from(regionsGroupByLetter.entries()).map(
+              renderRegionGroup({ onChangeLocation, onClose }),
+            )}
+          </div>
+        )}
+
+        <ForeignOffices foreignOffices={foreignOffices} />
+      </Dialog>
     );
   },
 );
@@ -89,38 +76,26 @@ const CurrentLocation = JSX<CurrentLocationProps>(({ currentLocation }) =>
         Сейчас выбран:&nbsp;
       </Text>
       <button className="cursor-pointer" onClick={close}>
-        <Text color="text-green">{currentLocation.name}</Text>
+        <Text color="text-primary-main">{currentLocation.name}</Text>
       </button>
     </div>
   ) : null,
 );
 
-const CloseButton = JSX<CloseButtonProps>(({ close }) => (
-  <button
-    className="visible peer-placeholder-shown:invisible absolute top-6 right-6 w-6 h-6 p-1 bg-transparent cursor-pointer border-none"
-    onClick={(e) => {
-      e.preventDefault();
-      close && close();
-    }}
-  >
-    <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
-  </button>
-));
-
 const renderRegionGroup =
-  ({ onChangeLocation, close }: RegionLinkProps & CloseButtonProps) =>
+  ({ onChangeLocation, onClose }: RegionLinkProps & DialogProps) =>
   ([letter, regions]: [string, Region[]]) =>
     (
       <div key={letter} className="break-inside-avoid mb-7 w-[224px]">
         <div className="mb-2.5">
           <Text size="text-h6">{letter}</Text>
         </div>
-        {regions.map(renderRegion({ onChangeLocation, close }))}
+        {regions.map(renderRegion({ onChangeLocation, onClose }))}
       </div>
     );
 
 const renderRegion =
-  ({ onChangeLocation, close }: RegionLinkProps & CloseButtonProps) =>
+  ({ onChangeLocation, onClose }: RegionLinkProps & DialogProps) =>
   (region: Region) =>
     (
       <div key={region.id} className="mb-1">
@@ -128,7 +103,7 @@ const renderRegion =
           className="cursor-pointer hover:text-primary-hover"
           onClick={() => {
             onChangeLocation && onChangeLocation(region);
-            close && close();
+            onClose && onClose();
           }}
         >
           {region.name || ''}

package/mobile/src/ui-kit/Location/LocationProps.ts

@@ -0,0 +1,25 @@
+import { Region } from '../../hooks/useRegions';
+import { UniBlockProps } from '../../model/JSXBlock';
+import { ForeignOffice } from '../../services/sitemap/SitemapData';
+
+export interface RegionLinkProps {
+  onChangeLocation?: (region: Region) => void;
+}
+
+export interface CloseButtonProps {
+  onClose?: () => void;
+}
+
+export interface CurrentLocationProps {
+  currentLocation?: Region;
+}
+
+export interface ForeignOfficeProps {
+  foreignOffices?: ForeignOffice[];
+}
+
+export type LocationProps = ForeignOfficeProps &
+  CloseButtonProps &
+  RegionLinkProps &
+  CurrentLocationProps &
+  UniBlockProps;

package/mobile/src/ui-kit/Location/SearchBar.tsx

@@ -21,7 +21,7 @@ export const SearchBar = JSX<SearchBarInnerProps>(({ className, searchTerm, onSe
         className={`h-12 pl-4 w-full peer text-l text-black border border-solid rounded-md box-border
               outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`}
         value={searchTerm}
-        onChange={(e) => onSearch(e.target.value as string)}
+        onChange={(e) => onSearch(e.target.value.toLowerCase() as string)}
         type="text"
         name="location-search-bar-input"
       />

package/mobile/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -1,69 +1,109 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useSearch } from '../../hooks/useSearch';
-import { Button } from '../Button/Button';
-import { Img } from '../Img/Img';
+import { useCallback, useEffect, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '../../hooks/useBool';
+import type { LinkProps } from '../../model/LinkProps';
+import { useSearch, type SearchResult } from '../../services/search/useSearch';
+import type { TopMenuItem } from '../../services/sitemap/SitemapData';
+import { zip } from '../../utils/zip';
+import { CloseButton } from '../Dialog/CloseButton';
+import { Dialog } from '../Dialog/Dialog';
+import { Sitemap } from '../Sitemap/Sitemap';
+import { SearchBarInput } from './SearchBarInput';
 
 export interface SearchBarInnerProps {
   isMobile?: boolean;
   className?: string;
+  topItems?: TopMenuItem[];
 }
 
-export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile = false }) => {
-  const { term, setTerm } = useSearch();
+const MIN_QUERY_LEN = 3;
 
-  const LoupeIconClassName = isMobile ? 'w-5 h-5' : 'w-6 h-6';
-  const SearchBarLabelClassName = isMobile ? 'text-s' : 'text-l-light';
-  const SearchBarInputClassName = isMobile ? ' placeholder-transparent' : 'h-full';
-  const inputPlaceholder = isMobile ? 'some search' : undefined;
+export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile, topItems }) => {
+  const basePathList = topItems?.map((_) => _.href || '/');
+  const [searchResult, searchInputProps] = useSearch(basePathList);
+
+  const { value, onChange, onFocus } = searchInputProps;
+
+  const searchItems = useMemo(
+    () => combineTopItemsAndSearchResult(topItems)(searchResult),
+    [topItems, searchResult],
+  );
+
+  useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
+
+  const [isSearchDialogOpen, { setTrue: openSearchDialog, setFalse: hideSearchDialog }] = useBool();
+
+  const handleInitialInputChange = useCallback(
+    (_: string) => {
+      onChange(_);
+      if (isQueryLongEnough(_)) {
+        openSearchDialog();
+      }
+    },
+    [onChange, isQueryLongEnough],
+  );
+  const handleInitialInputFocus = useCallback(() => {
+    onFocus();
+    if (isQueryLongEnough(value)) {
+      openSearchDialog();
+    }
+  }, [value, onFocus]);
 
   return (
-    <form className={`font-sans relative ${className}`}>
-      <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
-        <div className={LoupeIconClassName}>
-          <Img image={{ icon: 'LoupeIcon' }} width="24" height="24" />
-        </div>
-        {term ? null : (
-          <label
-            htmlFor="search-bar-input"
-            className={`text-secondary-text ${SearchBarLabelClassName}`}
-          >
-            Поиск по сайту
-          </label>
-        )}
-      </div>
-      <input
-        id="search-bar-input"
-        className={`h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none pr-[6%] border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`}
-        value={term}
-        onChange={(e) => setTerm(e.target.value as string)}
-        type="text"
-        name="search-bar-input"
-        placeholder={inputPlaceholder}
+    <div className={className}>
+      <SearchBarInput
+        isMobile={isMobile}
+        value={value}
+        onChange={handleInitialInputChange}
+        onFocus={handleInitialInputFocus}
       />
       {isMobile ? (
-        <button
-          className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none"
+        <CloseButton
+          className="absolute top-2 right-3"
           onClick={(e) => {
             e.preventDefault();
-            setTerm('');
+            onChange('');
           }}
+        />
+      ) : null}
+      {isSearchDialogOpen ? (
+        <Dialog
+          head={
+            <SearchBarInput
+              className="my-5"
+              isMobile={isMobile}
+              autoFocus={true}
+              {...searchInputProps}
+            />
+          }
+          onClose={hideSearchDialog}
         >
-          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
-        </button>
-      ) : (
-        <Button
-          version="primary"
-          text="Найти"
-          className="invisible peer-focus:visible absolute top-[3px] right-1"
-          onClick={(ev) => {
-            ev?.preventDefault();
-            console.log('click');
-          }}
-        >
-          <div className="text-s px-9 py-2.5">Найти</div>
-        </Button>
-      )}
-    </form>
+          <Sitemap topItems={searchItems} />
+        </Dialog>
+      ) : null}
+    </div>
   );
 });
+
+const isQueryLongEnough = (_: string) => _ && _.length >= MIN_QUERY_LEN;
+
+const combineTopItemsAndSearchResult =
+  (topItems: TopMenuItem[] | undefined) =>
+  (searchResult: SearchResult | null | undefined): TopMenuItem[] =>
+    topItems?.length && searchResult?.length
+      ? zip(topItems, searchResult).map(([_, portalSearchResult]) => ({
+          ..._,
+          items: portalSearchResult?.map(
+            ({ title, uri }): LinkProps => ({ text: title, href: uri }),
+          ),
+        }))
+      : [];
+
+// Temp
+function printSearchItems(topItems: TopMenuItem[]) {
+  for (const _ of topItems.filter(({ items }) => items?.length)) {
+    console.group(_.text);
+    console.table(_.items, ['text', 'href']);
+    console.groupEnd();
+  }
+}

package/mobile/src/ui-kit/SearchBar/SearchBarInput.tsx

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { style } from '../../utils/style';
+import { Img } from '../Img/Img';
+
+export interface SearchBarInputProps {
+  className?: string;
+  isMobile?: boolean;
+  value?: string;
+  autoFocus?: boolean;
+  onChange?: (value: string) => void;
+  onFocus?: () => void;
+}
+
+export const SearchBarInput = JSX<SearchBarInputProps>(
+  ({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
+    const handleChange = useCallback(
+      (ev: { target?: { value?: string } }) => {
+        onChange && onChange(ev.target?.value || '');
+      },
+      [onChange],
+    );
+
+    return (
+      <div className={style('font-sans relative', className)} role="form">
+        <div className="absolute h-full flex items-center pl-4 pointer-events-none">
+          <Img image={{ icon: 'LoupeIcon' }} width="24" height="24" />
+        </div>
+        <input
+          className={style(
+            'h-12 pl-12 w-full text-l text-black outline-none box-border',
+            'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text',
+            isMobile ? '' : 'h-full',
+          )}
+          value={value}
+          type="text"
+          name="search-bar-input"
+          placeholder="Поиск по сайту"
+          autoFocus={autoFocus}
+          onChange={handleChange}
+          onFocus={onFocus}
+        />
+      </div>
+    );
+  },
+);

package/mobile/src/{components/Footer → ui-kit/Sitemap}/Sitemap.tsx

@@ -1,24 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { Fallback } from '../../model/Fallback';
 import type { LinkProps } from '../../model/LinkProps';
 import { projectSettings } from '../../ProjectSettings';
-import type { SitemapDataProps, TopMenuItem } from '../../services/sitemap/SitemapProps';
-import { useSWRResource } from '../../services/sitemap/useSWRResource';
+import type { TopMenuItem } from '../../services/sitemap/SitemapData';
+import { style } from '../../utils/style';
 import { joinPath } from '../../utils/url';
 
 export interface SitemapProps {
   className?: string;
-  fallback?: Fallback;
+  topItems?: TopMenuItem[];
 }
 
-export const Sitemap = JSX<SitemapProps>(({ className = '', fallback }) => {
+export const Sitemap = JSX<SitemapProps>(({ className, topItems }) => {
   const link = useLink(true);
-  const sitemap = useSWRResource<SitemapDataProps>(projectSettings.SITEMAP || 'sitemap', fallback);
 
   return (
-    <div className={`flex flex-grow items-start justify-between gap-[54px] xl:gap-5 ${className}`}>
-      {sitemap.topItems?.map((_, i) => renderColumn(link(_), i))}
+    <div className={style('flex items-start justify-between', className)}>
+      {topItems?.map(link).map(renderColumn)}
     </div>
   );
 });
@@ -27,9 +25,9 @@ const renderColumn = (menuItem: TopMenuItem & { onClick: () => void }, index: nu
   const { text, items, href, target, onClick } = menuItem;
 
   return (
-    <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-3.5">
+    <div key={String(index)} className="flex flex-col gap-3.5 w-1/4">
       <a
-        className="block leading-5 text-l text-primary-text hover:text-primary-main no-underline"
+        className="leading-5 text-l text-primary-text hover:text-primary-main no-underline"
         href={href}
         target={target || '_self'}
         onClick={onClick}
@@ -57,7 +55,10 @@ const ColumnItem = JSX<ColumnItemProps>(({ text, index, basePath, ...rest }) =>
 
   return (
     <a
-      className="block text-l-light text-secondary-text hover:text-primary-main no-underline"
+      className={style(
+        'text-l-light text-secondary-text hover:text-primary-main no-underline',
+        'overflow-x-hidden overflow-ellipsis whitespace-nowrap',
+      )}
       href={isAnotherPortal ? joinPath(basePath, href) : href}
       target={target || '_self'}
       onClick={onClick}

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
-import type { PreventableEvent } from '../../model/PreventableEvent';
 import { style } from '../../utils/style';
+import type { PreventableEvent } from '../PreventableEvent';
 
 export interface TopItemContent extends LinkProps {
   active?: boolean;

package/mobile/src/utils/Comparator.ts

@@ -0,0 +1,14 @@
+export type Comparator<T> = (a: T, b: T) => number;
+
+export const compareBy =
+  <T>(indexOf: (a: T) => number): Comparator<T> =>
+  (a, b) =>
+    indexOf(a) - indexOf(b);
+
+export const desc =
+  <T>(cmp: Comparator<T>): Comparator<T> =>
+  (a, b) =>
+    -cmp(a, b);
+
+export const combineCmps = <T>(comparators: Comparator<T>[], eps = 0): Comparator<T> =>
+  comparators.reduce((cmp1, cmp2) => (a, b) => cmp1(a, b) >= eps ? cmp1(a, b) : cmp2(a, b));

package/mobile/src/utils/fetchJSON.ts

@@ -3,7 +3,7 @@ export async function fetchJSON<R = unknown>(
   options?: RequestInit,
 ): Promise<R | null> {
   try {
-    return await fetchJSONUnsafe(url, options);
+    return url ? await fetchJSONUnsafe(url, options) : null;
   } catch (err) {
     console.error(err);
   }