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

package/mobile/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/mobile/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/mobile/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/mobile/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/{src/ui-kit/SearchBar/SearchBarInput.tsx → mobile/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/mobile/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/mobile/src/utils/noop.ts

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

package/mobile/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/EventBus/defaultEventBus.ts

@@ -1,9 +1,10 @@
-import type { TabActivationEvent } from '../components/Tabs/Tabs';
+import type { TabActivationEvent } from '../components/Tabs/TabActivationEvent';
+import type { DialogAction } from '../ui-kit/Dialog/DialogAction';
 import { EventBus } from './EventBus';
 
 interface GlobalEventMap {
   tab: TabActivationEvent;
-  setPageOverflowHidden: boolean;
+  dialog: DialogAction;
 }
 
 export const defaultEventBus = new EventBus<GlobalEventMap>();

package/src/components/ApplicationForm/renderBankOffices.tsx

@@ -1,4 +1,4 @@
-import { Branch } from '../../hooks/useSafeBoxes';
+import type { Branch } from '../SafeDepositRental/useSafeBoxes';
 import type { CreditFormState } from './ApplicationFormCredit';
 import type { HandleFormStateChange, Select } from './models';
 import { WrapperSelect } from './WrapperSelect';

package/src/components/Blocks.mobile.ts

@@ -1,5 +1,4 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
-import { Accordion } from './Accordion/Accordion';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
@@ -16,7 +15,6 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
-  Accordion,
   ComparisonTable,
   Footer,
   Header,
@@ -25,10 +23,10 @@ export const Blocks: BlocksRegistry = {
   LinkList,
   MobileAppTile,
   ProductBlock,
-  RollupItem,
   StepsBlock,
   TariffsTable,
   TextBlock,
   Placeholder,
+  RollupItem,
   VerticalLayout,
 };

package/src/components/Blocks.ts

@@ -1,5 +1,4 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
-import { Accordion } from './Accordion/Accordion';
 import { ApplicationForm } from './ApplicationForm/ApplicationForm';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
@@ -57,7 +56,6 @@ import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 import { Video } from './Video/Video';
 
 export const Blocks: BlocksRegistry = {
-  Accordion,
   ApplicationForm,
   BenefitsBlock,
   Bonus,

package/src/components/ContentPage/ContentPage.tsx

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
+import { useBool } from '../../hooks/useBool';
 import type { BlockDecorator } from '../../model/BlockDecorator';
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { ContentPageDef } from '../../model/ContentPageDef';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { useBlockRouterProvider } from '../../services/BlockRouter/useBlockRouterProvider';
+import { useDialogHandlers } from '../../ui-kit/Dialog/useDialogHandlers';
 import { style } from '../../utils/style';
 import { LikeControl } from '../LikeControl/LikeControl';
-import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 
 interface ContentPageProps extends UniBlockProps {
   blocksRegistry: BlocksRegistry;
@@ -22,8 +22,6 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>((pr
 
   const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
 
-  const [overflowStyle, setOverflowStyle] = useState<string>('');
-
   const options: BlockRendererOptions = {
     key: '',
     page: data,
@@ -34,17 +32,22 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>((pr
 
   useBlockRouterProvider();
 
-  useEffect(
-    () =>
-      defaultEventBus.subscribe('setPageOverflowHidden', (isHidden) => {
-        setOverflowStyle(isHidden ? 'overflow-hidden h-screen' : '');
-      }),
-    [],
-  );
+  const [isSomeDialogOpened, { setTrue: setSomeDialogOpened, setFalse: resetSomeDialogOpened }] =
+    useBool();
+
+  useDialogHandlers({
+    onOpen: setSomeDialogOpened,
+    onClose: resetSomeDialogOpened,
+  });
 
   return (
     <section
-      className={style('relative', pageStyle, className, overflowStyle)}
+      className={style(
+        'relative',
+        pageStyle,
+        className,
+        isSomeDialogOpened ? 'overflow-hidden h-screen' : '',
+      )}
       data-theme={colorPalette}
     >
       {slots?.header ? (

package/src/components/Footer/Footer.fixture.tsx

@@ -1,10 +1,27 @@
 import '../../setup-fixture';
+import { SearchDialog } from '../../ui-kit/SearchDialog/SearchDialog';
 import { Footer } from './Footer';
 
+const topItems = [
+  {
+    href: '/natural',
+    text: 'Частным клиентам',
+  },
+  {
+    text: 'Бизнес клиентам',
+    href: '/business',
+  },
+  {
+    text: 'Экосистема Своё',
+    href: '/svoe',
+  },
+];
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <Footer className="col-span-12" />
+      <SearchDialog topItems={topItems} />
     </div>
   ),
 };

package/src/components/Footer/Footer.mobile.tsx

@@ -37,7 +37,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
           </RollupItem>
         ))}
       </div>
-      <div>{sitemap?.dispositions?.map(renderSubMenuItem)}</div>
+      <div className="mt-4">{sitemap?.dispositions?.map(renderSubMenuItem)}</div>
       <MobileAppTile
         title="Мобильное приложение"
         description="Загрузить для IOS и Android"

package/src/components/Footer/Footer.tsx

@@ -29,7 +29,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
     <BlockWrapper tag="footer" className={`p-9 ${className}`} {...rest}>
       <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">
         <Logo className={LEFT_COL_WIDTH_FULL_HD} logo={logo} />
-        <SearchBar className="grow" topItems={sitemap?.topItems} />
+        <SearchBar className="grow" />
       </div>
       <div className="flex items-stretch gap-[54px] xl:gap-8">
         <div className={`${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`}>

package/src/components/Header/Header.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLocation } from '../../hooks/useLocation';
 import { useRouter } from '../../hooks/useRouter';
 import { useSWRResource } from '../../hooks/useSWRResource';
 import type { BgColorVersion } from '../../model/BgColorVersion';
@@ -8,7 +9,9 @@ import { projectSettings } from '../../ProjectSettings';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { LocationDialog } from '../../ui-kit/LocationDialog/LocationDialog';
 import { Logo } from '../../ui-kit/Logo/Logo';
+import { SearchDialog } from '../../ui-kit/SearchDialog/SearchDialog';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
 import type { HeaderContent } from './HeaderContent';
@@ -40,6 +43,8 @@ export const Header = JSX<HeaderProps>(
 
     const activeTopItem = topItems?.find(isTopItemActive(router));
 
+    const [location, onChangeLocation] = useLocation(defaultLocation);
+
     return (
       <BlockWrapper
         tag="header"
@@ -60,8 +65,7 @@ export const Header = JSX<HeaderProps>(
             <HeaderSecondaryMenu
               version={version}
               className="ml-auto"
-              foreignOffices={foreignOffices}
-              defaultLocation={defaultLocation}
+              locationName={location.name}
               officesLink={officesLink}
             />
           </div>
@@ -75,6 +79,12 @@ export const Header = JSX<HeaderProps>(
             <HeaderSubMenu subItems={activeTopItem.items} />
           ) : null}
         </div>
+        <SearchDialog topItems={topItems} />
+        <LocationDialog
+          currentLocation={location}
+          foreignOffices={foreignOffices}
+          onChangeLocation={onChangeLocation}
+        />
       </BlockWrapper>
     );
   },