@redneckz/wildless-cms-uni-blocks 0.9.2 → 0.9.4

package/src/ui-kit/{Location/Location.tsx → LocationDialog/LocationDialog.tsx}

@@ -1,26 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { Region } from '../../hooks/useRegions';
 import { useRegions } from '../../hooks/useRegions';
 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 { Dialog } from '../Dialog/Dialog';
+import { useDialogProps } from '../Dialog/useDialogProps';
 import { Img } from '../Img/Img';
+import { Text } from '../Text/Text';
 import type {
   CurrentLocationProps,
   ForeignOfficeProps,
-  LocationProps,
-  RegionLinkProps,
-} from './LocationProps';
+  LocationDialogProps,
+} from './LocationDialogProps';
 import { SearchBar } from './SearchBar';
 
 const SEARCH_TERM_MIN_LENGTH = 3;
 
-export const Location = JSX<LocationProps>(
-  ({ currentLocation, onChangeLocation, onClose, foreignOffices }) => {
+export const LOCATION_DIALOG_ID = 'location';
+
+export const LocationDialog = JSX<LocationDialogProps>(
+  ({ currentLocation, onChangeLocation, foreignOffices }) => {
+    const dialogProps = useDialogProps(LOCATION_DIALOG_ID);
+
     const [query, setQuery] = useState('');
 
     const regions: Region[] = cleanUpRegions(useRegions()).sort((a, b) =>
@@ -28,15 +32,23 @@ export const Location = JSX<LocationProps>(
     );
     const regionsGroupByLetter: Map<string, Region[]> = groupBy(regions, regionFirstLetter);
 
+    const handleChangeLocation = useCallback(
+      (region: Region) => {
+        dialogProps.onClose && dialogProps.onClose();
+        onChangeLocation && onChangeLocation(region);
+      },
+      [dialogProps.onClose, onChangeLocation],
+    );
+
     return (
       <Dialog
+        {...dialogProps}
         head={
           <div>
             <CurrentLocation currentLocation={currentLocation} />
             <SearchBar onSearch={setQuery} searchTerm={query} className="mb-7" />
           </div>
         }
-        onClose={onClose}
       >
         {query && query.length >= SEARCH_TERM_MIN_LENGTH ? (
           <div>
@@ -45,12 +57,12 @@ export const Location = JSX<LocationProps>(
                 ({ name }) =>
                   name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8,
               )
-              .map(renderRegion({ onChangeLocation, onClose }))}
+              .map(renderRegion(handleChangeLocation))}
           </div>
         ) : (
           <div className="columns-5">
             {Array.from(regionsGroupByLetter.entries()).map(
-              renderRegionGroup({ onChangeLocation, onClose }),
+              renderRegionGroup(handleChangeLocation),
             )}
           </div>
         )}
@@ -83,33 +95,30 @@ const CurrentLocation = JSX<CurrentLocationProps>(({ currentLocation }) =>
 );
 
 const renderRegionGroup =
-  ({ onChangeLocation, onClose }: RegionLinkProps & DialogProps) =>
+  (onChangeLocation?: (region: Region) => void) =>
   ([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, onClose }))}
+        {regions.map(renderRegion(onChangeLocation))}
       </div>
     );
 
-const renderRegion =
-  ({ onChangeLocation, onClose }: RegionLinkProps & DialogProps) =>
-  (region: Region) =>
-    (
-      <div key={region.id} className="mb-1">
-        <button
-          className="cursor-pointer hover:text-primary-hover"
-          onClick={() => {
-            onChangeLocation && onChangeLocation(region);
-            onClose && onClose();
-          }}
-        >
-          {region.name || ''}
-        </button>
-      </div>
-    );
+const renderRegion = (onChangeLocation?: (region: Region) => void) => (region: Region) =>
+  (
+    <div key={region.id} className="mb-1">
+      <button
+        className="cursor-pointer hover:text-primary-hover"
+        onClick={() => {
+          onChangeLocation && onChangeLocation(region);
+        }}
+      >
+        {region.name || ''}
+      </button>
+    </div>
+  );
 
 const ForeignOffices = JSX<ForeignOfficeProps>(({ foreignOffices }) =>
   foreignOffices?.length ? (

package/src/ui-kit/LocationDialog/LocationDialogProps.ts

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

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

@@ -1,109 +1,41 @@
 import { JSX } from '@redneckz/uni-jsx';
-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 { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { CloseButton } from '../Dialog/CloseButton';
-import { Dialog } from '../Dialog/Dialog';
-import { Sitemap } from '../Sitemap/Sitemap';
-import { SearchBarInput } from './SearchBarInput';
+import { useDialog } from '../Dialog/useDialog';
+import { useDialogHandlers } from '../Dialog/useDialogHandlers';
+import { SEARCH_DIALOG_ID } from '../SearchDialog/SearchDialog';
+import { SearchInput } from '../SearchDialog/SearchInput';
 
 export interface SearchBarInnerProps {
   isMobile?: boolean;
   className?: string;
-  topItems?: TopMenuItem[];
 }
 
 const MIN_QUERY_LEN = 3;
 
-export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile, topItems }) => {
-  const basePathList = topItems?.map((_) => _.href || '/');
-  const [searchResult, searchInputProps] = useSearch(basePathList);
+export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile }) => {
+  const [value, setValue] = useState('');
 
-  const { value, onChange, onFocus } = searchInputProps;
+  const resetQueryOnDialogClose = useCallback(() => setValue(''), []);
+  useDialogHandlers({ onClose: resetQueryOnDialogClose });
 
-  const searchItems = useMemo(
-    () => combineTopItemsAndSearchResult(topItems)(searchResult),
-    [topItems, searchResult],
-  );
-
-  useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
+  const { open } = useDialog(SEARCH_DIALOG_ID);
 
-  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();
+  const handleInitialInputChange = useCallback((_: string) => {
+    setValue(_);
+    if (isQueryLongEnough(_)) {
+      open(_);
     }
-  }, [value, onFocus]);
+  }, []);
 
   return (
     <div className={className}>
-      <SearchBarInput
-        isMobile={isMobile}
-        value={value}
-        onChange={handleInitialInputChange}
-        onFocus={handleInitialInputFocus}
-      />
+      <SearchInput isMobile={isMobile} value={value} onChange={handleInitialInputChange} />
       {isMobile ? (
-        <CloseButton
-          className="absolute top-2 right-3"
-          onClick={(e) => {
-            e.preventDefault();
-            onChange('');
-          }}
-        />
-      ) : null}
-      {isSearchDialogOpen ? (
-        <Dialog
-          head={
-            <SearchBarInput
-              className="my-5"
-              isMobile={isMobile}
-              autoFocus={true}
-              {...searchInputProps}
-            />
-          }
-          onClose={hideSearchDialog}
-        >
-          <Sitemap topItems={searchItems} />
-        </Dialog>
+        <CloseButton className="absolute top-2 right-3" onClick={resetQueryOnDialogClose} />
       ) : 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/src/ui-kit/SearchDialog/SearchDialog.tsx

@@ -0,0 +1,65 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import type { LinkProps } from '../../model/LinkProps';
+import { useSearch, type SearchResult } from '../../services/search/useSearch';
+import type { TopMenuItem } from '../../services/sitemap/SitemapData';
+import { joinPath } from '../../utils/url';
+import { zip } from '../../utils/zip';
+import { Dialog } from '../Dialog/Dialog';
+import { useDialogProps } from '../Dialog/useDialogProps';
+import { Sitemap } from '../Sitemap/Sitemap';
+import { SearchInput } from './SearchInput';
+
+export interface SearchDialogProps {
+  topItems?: TopMenuItem[];
+}
+
+export const SEARCH_DIALOG_ID = 'search';
+
+export const SearchDialog = JSX<SearchDialogProps>(({ topItems }) => {
+  const dialogProps = useDialogProps(SEARCH_DIALOG_ID);
+
+  const basePathList = topItems?.map((_) => _.href || '/');
+  const [searchResult, searchInputProps] = useSearch({
+    basePathList,
+    initialQuery: dialogProps.message,
+    wasOpened: dialogProps.wasOpened,
+  });
+
+  const searchItems = useMemo(
+    () => combineTopItemsAndSearchResult(topItems)(searchResult),
+    [topItems, searchResult],
+  );
+
+  useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
+
+  return (
+    <Dialog
+      {...dialogProps}
+      head={<SearchInput className="my-5" autoFocus={true} {...searchInputProps} />}
+    >
+      <Sitemap topItems={searchItems} />
+    </Dialog>
+  );
+});
+
+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: joinPath('/', 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 → src/ui-kit/SearchDialog/SearchInput.tsx}

@@ -3,7 +3,7 @@ import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
 
-export interface SearchBarInputProps {
+export interface SearchInputProps {
   className?: string;
   isMobile?: boolean;
   value?: string;
@@ -12,7 +12,7 @@ export interface SearchBarInputProps {
   onFocus?: () => void;
 }
 
-export const SearchBarInput = JSX<SearchBarInputProps>(
+export const SearchInput = JSX<SearchInputProps>(
   ({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
     const handleChange = useCallback(
       (ev: { target?: { value?: string } }) => {

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

@@ -2,7 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 import { style } from '../../utils/style';
-import type { PreventableEvent } from '../PreventableEvent';
 
 export interface TopItemContent extends LinkProps {
   active?: boolean;
@@ -12,7 +11,7 @@ export interface TopItemProps extends TopItemContent {
   className?: string;
   flat?: boolean;
   dataItemName?: string;
-  onClick?: (ev?: PreventableEvent) => void;
+  onClick?: () => void;
 }
 
 export const TopItem = JSX<TopItemProps>(({ className = '', active, flat, children, ...rest }) => {

package/src/utils/noop.ts

@@ -0,0 +1,3 @@
+export const noop = () => {
+  // Do nothing
+};

package/src/utils/useDebouncedEffect.ts

@@ -0,0 +1,14 @@
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+
+export const useDebouncedEffect = <Deps extends any[]>(
+  effect: () => void | (() => void),
+  deps: Deps,
+  delay = 300,
+) =>
+  useEffect(() => {
+    const timerId = setTimeout(effect, delay);
+
+    return () => {
+      clearTimeout(timerId);
+    };
+  }, deps);

package/bin/migration-scripts/0.4.5.js

@@ -1,109 +0,0 @@
-import { deleteEmptyProps, renameProp } from '../utils.js';
-
-export const description = 'v0.4.5';
-
-export default (unitPath, content) => {
-  if (!content?.blocks) {
-    return content;
-  }
-
-  for (const block of content.blocks) {
-    adjustNavigatorTabsBlock(block);
-    adjustGroupBlock(block);
-    adjustTariffsTableBlock(block);
-  }
-
-  return { ...content };
-};
-
-function adjustNavigatorTabsBlock(block) {
-  if (block.type !== 'NavigatorTabs') {
-    return;
-  }
-
-  block.type = 'Tabs';
-
-  if (block.content) {
-    renameProp(block.content, 'navigatorTabs', 'tabs');
-
-    for (const item in block.content.tabs) {
-      item.type = 'link';
-      Reflect.deleteProperty(item, 'label');
-    }
-  }
-}
-
-function adjustGroupBlock(block) {
-  if (block.type !== 'GroupBlock') {
-    return;
-  }
-
-  // GroupBlock переделываем в Tabs
-  // Страницы в которых есть GroupBlock credit-cards / debet-cards / deposits / loans / vse-vidy-strahovaniya1
-
-  block.type = 'Tabs';
-
-  if (block.content) {
-    renameProp(block.content, 'tabs', 'labels');
-    renameProp(block.content, 'isShowCounter', 'showCounter');
-
-    for (const item of block.content.labels) {
-      item.type = 'group';
-      renameProp(item, 'tag', 'ref');
-      Reflect.deleteProperty(item, 'index');
-    }
-
-    Reflect.deleteProperty(block.content, 'blocks');
-    Reflect.deleteProperty(block.content, 'groupBlocks');
-  }
-}
-
-function adjustTariffsTableBlock(block) {
-  if (block.type !== 'TariffsTable' || !block.content || !block.content.columns) {
-    return;
-  }
-
-  renameProp(block.content, 'columns', 'tariffsColumns');
-
-  for (const column of block.content.tariffsColumns) {
-    for (const columnInner of column.data) {
-      adjustTariffsColumnsInner(columnInner);
-    }
-  }
-}
-
-function adjustTariffsColumnsInner(columnInner) {
-  for (let index = 0; index < columnInner.length; index++) {
-    const cell = columnInner[index];
-
-    deleteEmptyProps(cell);
-
-    if (Object.keys(cell).length === 2 && cell?.label && cell.description) {
-      addCellType(cell);
-    } else if (Object.keys(cell).length < 2) {
-      addCellType(cell);
-    } else {
-      // Если типов два и более и это не labels и description то разносим по разным ячейкам
-      const newArr = [];
-      for (const key in cell) {
-        newArr.push(addCellType({ [key]: cell[key] }));
-      }
-      columnInner.splice(index, 1, ...newArr);
-    }
-  }
-}
-
-// Добавить тип в ячейку компонента TariffsTable
-function addCellType(cell) {
-  if (cell?.label || cell?.description) {
-    cell.tableCellType = 'LabelDescription';
-  }
-  if (cell?.buttons) {
-    cell.tableCellType = 'Buttons';
-  }
-  if (cell?.list) {
-    cell.tableCellType = 'List';
-  }
-
-  return cell;
-}

package/bin/migration-scripts/0.5.10.js

@@ -1,36 +0,0 @@
-export const description = 'v0.5.10';
-
-export default (unitPath, content) => {
-  if (!content?.blocks) {
-    return content;
-  }
-
-  for (const block of content.blocks) {
-    adjustBonusBlock(block);
-  }
-
-  return { ...content };
-};
-
-function adjustBonusBlock(block) {
-  if (
-    block.type !== 'Bonus' ||
-    !block.content ||
-    !block.content.bonusItems ||
-    !block.content.bonusItems.every((i) => i.bonusCount || i.bonusName)
-  ) {
-    return;
-  }
-
-  if (block.content) {
-    for (const item of block.content.bonusItems) {
-      item.bonusItemContent = {
-        bonusType: 'count',
-        bonusCount: item.bonusCount,
-        bonusName: item.bonusName,
-      };
-      Reflect.deleteProperty(item, 'bonusCount');
-      Reflect.deleteProperty(item, 'bonusName');
-    }
-  }
-}

package/bin/migration-scripts/0.6.16.js

@@ -1,90 +0,0 @@
-import { jsonCopy } from '../utils.js';
-
-export const description = 'v0.6.16';
-
-const replaceToContent = (obj, prop) => {
-  if (!obj.hasOwnProperty('content')) {
-    Object.assign(obj, { content: {} });
-  }
-  if (obj.hasOwnProperty(prop) && prop) {
-    Object.assign(obj.content, { [prop]: obj[prop] });
-    Reflect.deleteProperty(obj, prop);
-  }
-};
-
-export default (unitPath, content) => {
-  if (!content?.blocks) {
-    return content;
-  }
-
-  for (const block of content.blocks) {
-    adjustOtherProducts(block);
-    adjustAccordion(block);
-  }
-
-  return { ...content };
-};
-
-const adjustAccordionItems = (accordionItems) =>
-  accordionItems.map((item) => {
-    item.type = 'AccordionItem';
-    item.content = {};
-    replaceToContent(item, 'label');
-    replaceToContent(item, 'labelIcon');
-    replaceToContent(item, 'bordered');
-
-    if (!item?.blocks) {
-      return item;
-    }
-    item.blocks = item.blocks.map((_) => {
-      if (_?.blockListType) {
-        const { blockListType = '', style, ...rest } = _;
-
-        return {
-          content: { ...rest },
-          type: blockListType,
-          style,
-        };
-      } else {
-        return _;
-      }
-    });
-    return item;
-  });
-
-function adjustAccordion(block) {
-  if (block.type !== 'Accordion' || !block.content || !block.content?.accordionItems) {
-    return;
-  }
-  const content = block.content;
-  block.blocks = adjustAccordionItems(content.accordionItems);
-  Reflect.deleteProperty(content, 'accordionItems');
-}
-
-const adjustOtherProductsItems = (blockItems) => {
-  return blockItems.map((item) => {
-    item.type = 'OtherProductsItem';
-    replaceToContent(item, 'label');
-    if (!item?.blocks) {
-      return item;
-    }
-    item.blocks = item.blocks.map((_) => {
-      const { blockListType, style, ...rest } = _;
-
-      return {
-        content: { ...rest },
-        type: blockListType,
-        style,
-      };
-    });
-    return item;
-  });
-};
-function adjustOtherProducts(block) {
-  if (block.type !== 'OtherProducts' || !block.content || !block.content.blockItems) {
-    return;
-  }
-  const content = block.content;
-  block.blocks = adjustOtherProductsItems(content.blockItems);
-  Reflect.deleteProperty(content, 'blockItems');
-}