@redneckz/wildless-cms-uni-blocks 0.12.13 → 0.13.0

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

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '../../hooks/useBool';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import { style } from '../../utils/style';
 import { useDebouncedEffect } from '../../utils/useDebouncedEffect';
-import { CloseButton } from '../Dialog/CloseButton';
-import { useDialogProps } from '../Dialog/useDialogProps';
+import { CloseButton } from '../DialogManager/CloseButton';
 import { LinkWrapper } from '../LinkWrapper/LinkWrapper';
 import { Paragraph } from '../Paragraph/Paragraph';
 
@@ -17,7 +17,7 @@ const COOKIE_DIALOG_ID = 'cookie';
 const DIALOG_INITIAL_DELAY = 3 * 1000;
 
 export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicyLink }) => {
-  const { isOpened, open, close } = useDialogProps(COOKIE_DIALOG_ID);
+  const [opened, { setTrue: open, setFalse: close }] = useBool();
 
   useDebouncedEffect(
     () => {
@@ -31,28 +31,23 @@ export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicy
 
   const handleClose = useCallback(() => {
     globalThis.localStorage?.setItem(COOKIE_DIALOG_ID, 'true');
-
     close();
-  }, [close]);
+  }, []);
 
-  return isOpened ? (
-    <div className="container z-40 fixed bottom-0 left-0 right-0 pointer-events-none">
-      <div className="bg-white m-5 p-5 sm:m-6 sm:p-6 rounded-md flex sm:items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+  return opened ? (
+    <div className="container fixed left-0 right-0 bottom-0 z-50">
+      <div className="bg-white m-xl p-xl rounded-md flex sm:items-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
         <div className="sm:flex-1">
           <Paragraph size="text-s" font="font-light" color="text-primary-text">
             АО «Россельхозбанк» использует
-            <LinkWrapper
-              isRemote
-              className={style(getStyleLinkWrapper(termLink?.href))}
-              {...termLink}
-            >
+            <LinkWrapper isRemote className={linkWrapperStyle(termLink?.href)} {...termLink}>
               cookie
             </LinkWrapper>
             (файлы с данными о прошлых посещениях сайта) для персонализации сервисов и удобства
             пользователей. Вы можете запретить сохранение cookie в настройках своего браузера.
             <LinkWrapper
               isRemote
-              className={style(getStyleLinkWrapper(personalDataPolicyLink?.href))}
+              className={linkWrapperStyle(personalDataPolicyLink?.href)}
               {...personalDataPolicyLink}
             >
               Обработка Ваших персональных данных
@@ -61,12 +56,12 @@ export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicy
             персональных данных».
           </Paragraph>
         </div>
-        <div className="ml-3 sm:ml-0 w-24 flex justify-end">
-          <CloseButton className="bg-main-gray rounded-md" onClick={handleClose} />
+        <div className="ml-s sm:ml-0 w-24 flex justify-end">
+          <CloseButton className="bg-main-gray rounded-md" onClose={handleClose} />
         </div>
       </div>
     </div>
   ) : null;
 });
 
-const getStyleLinkWrapper = (href?: string) => ['inline mx-1', href ? 'text-green-dark' : ''];
+const linkWrapperStyle = (href?: string) => style('inline mx-1', href ? 'text-green-dark' : '');

package/src/ui-kit/{Dialog → DialogManager}/CloseButton.tsx

@@ -5,16 +5,16 @@ import type { PreventableEvent } from '../PreventableEvent';
 
 interface CloseButtonProps {
   className?: string;
-  onClick?: (ev: PreventableEvent) => void;
+  onClose?: (ev: PreventableEvent) => void;
 }
 
-export const CloseButton = JSX<CloseButtonProps>(({ className, onClick }) => (
+export const CloseButton = JSX<CloseButtonProps>(({ className, onClose }) => (
   <button
     className={style(
       'flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none',
       className,
     )}
-    onClick={onClick}
+    onClick={onClose}
     title="Закрыть"
   >
     <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />

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

@@ -0,0 +1,31 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { VNode } from '../../model/VNode';
+import { style } from '../../utils/style';
+import { CloseButton } from './CloseButton';
+import { useDialogManager } from './useDialogManager';
+
+export interface DialogProps {
+  className?: string;
+  head?: VNode;
+  onClose?: () => void;
+}
+
+export const Dialog = JSX<DialogProps>(({ className, head, children, onClose }) => {
+  const { close } = useDialogManager();
+
+  const handleClose = useCallback(() => {
+    close();
+    onClose && onClose();
+  }, [onClose]);
+
+  return (
+    <div className={style('relative min-h-full bg-white', className)}>
+      <div className="sticky py-xl top-0 bg-white">
+        <CloseButton className="absolute top-0 right-0" onClose={handleClose} />
+        <div className="container">{head}</div>
+      </div>
+      <div className="container pb-6xl">{children}</div>
+    </div>
+  );
+});

package/src/ui-kit/DialogManager/DialogAction.ts

@@ -0,0 +1,15 @@
+import type { VNode } from '../../model/VNode';
+
+export type DialogAction = DialogOpenAction | DialogCloseAction;
+
+export interface DialogOpenAction {
+  type: 'open';
+  id?: string; // Singleton
+  dialog: VNode;
+  onClose?: () => void;
+}
+
+export interface DialogCloseAction {
+  type: 'close';
+  all?: boolean;
+}

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

@@ -0,0 +1,85 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import { useList } from '../../hooks/useList';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+import { style } from '../../utils/style';
+import type { DialogOpenAction } from './DialogAction';
+
+export const DialogManager = JSX(() => {
+  const [dialogs, { push, pop, clear }] = useList<DialogOpenAction>();
+
+  const closeAll = useCallback(() => {
+    for (const _ of dialogs) {
+      _.onClose && _.onClose();
+    }
+
+    clear();
+  }, [dialogs]);
+
+  const close = useCallback(() => {
+    const _ = dialogs[dialogs.length - 1];
+    _?.onClose && _.onClose();
+
+    pop();
+  }, [dialogs]);
+
+  useEffect(
+    () =>
+      defaultEventBus.subscribe('dialog', (action) => {
+        switch (action.type) {
+          case 'open':
+            push(action);
+            break;
+          case 'close':
+            if (action.all) {
+              closeAll();
+            } else {
+              close();
+            }
+            break;
+          default:
+            assertUnreachable(action);
+        }
+      }),
+    [closeAll, close],
+  );
+
+  useEffect(() => {
+    const handleEscape = ({ key }: { key: string }) => {
+      if (key === 'Escape') {
+        close();
+      }
+    };
+
+    globalThis.document?.addEventListener('keydown', handleEscape);
+
+    return () => {
+      globalThis.document?.removeEventListener('keydown', handleEscape);
+    };
+  }, [close]);
+
+  useEffect(() => {
+    if (dialogs.length) {
+      globalThis.document?.body.classList.add('no-scrollbar');
+    } else {
+      globalThis.document?.body.classList.remove('no-scrollbar');
+    }
+  }, [dialogs]);
+
+  return dialogs.length ? (
+    <div className="fixed inset-0 z-50" role="dialog">
+      {dialogs.map(({ dialog, id }, i) => (
+        <div
+          key={String(id || i)}
+          className={style(
+            'absolute inset-0 overflow-x-hidden overflow-y-scroll no-scrollbar',
+            i === dialogs.length - 1 ? '' : 'hidden',
+          )}
+        >
+          {dialog}
+        </div>
+      ))}
+    </div>
+  ) : null;
+});

package/src/ui-kit/DialogManager/useDialogManager.ts

@@ -0,0 +1,14 @@
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import type { VNode } from '../../model/VNode';
+
+export interface DialogOptions {
+  id?: string;
+  onClose?: () => void;
+}
+
+export const useDialogManager = () => ({
+  open: (dialog: VNode, options: DialogOptions = {}) =>
+    defaultEventBus.fire('dialog', { type: 'open', dialog, ...options }),
+  close: () => defaultEventBus.fire('dialog', { type: 'close' }),
+  closeAll: () => defaultEventBus.fire('dialog', { type: 'close', all: true }),
+});

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

@@ -9,4 +9,5 @@ export interface InputRangeProps extends ListContent, InputProps<number> {
   step?: number;
   title?: string;
   disabled?: boolean;
+  onChange?: (value: number) => void;
 }

package/src/ui-kit/ListControlProps.ts

@@ -0,0 +1,5 @@
+import type { ControlProps } from './ControlProps';
+
+export interface ListControlProps<T> extends ControlProps<T> {
+  items: T[];
+}

package/src/ui-kit/LocationDialog/LocationDialog.fixture.tsx

@@ -1,80 +1,7 @@
 import '../../setup-fixture';
 
-import type { Picture } from '../../model/Picture';
-import type { ForeignOffice } from '../../services/sitemap/SitemapData';
 import { LocationDialog } from './LocationDialog';
 
-const belarus: Picture = {
-  src: 'belarus.png',
-  format: 'webp',
-  size: {
-    width: 24,
-    height: 24,
-  },
-};
-
-const kazakhstan: Picture = {
-  src: 'kazakhstan.png',
-  format: 'webp',
-  size: {
-    width: 24,
-    height: 24,
-  },
-};
-
-const armenia: Picture = {
-  src: 'armenia.png',
-  format: 'webp',
-  size: {
-    width: 24,
-    height: 24,
-  },
-};
-
-const china: Picture = {
-  src: 'china.png',
-  format: 'webp',
-  size: {
-    width: 24,
-    height: 24,
-  },
-};
-
-const FOREIGN_OFFICES: ForeignOffice[] = [
-  {
-    text: 'Республика Беларусь',
-    href: '#',
-    icon: belarus,
-  },
-  {
-    text: 'Республика Казахстан',
-    href: '#',
-    icon: kazakhstan,
-  },
-  {
-    text: 'Республика Армения',
-    href: '#',
-    icon: armenia,
-  },
-  {
-    text: 'Китайская Народная Республика',
-    href: '#',
-    icon: china,
-  },
-];
-
-const onChangeLocation = () => ({});
-
-const currentLocation = {
-  name: 'Москва',
-};
-
 export default {
-  default: (
-    <LocationDialog
-      onChangeLocation={onChangeLocation}
-      currentLocation={currentLocation}
-      foreignOffices={FOREIGN_OFFICES}
-    />
-  ),
+  default: <LocationDialog />,
 };

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

@@ -1,79 +1,75 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useLink } from '../../hooks/useLink';
+import { useLocation } from '../../hooks/useLocation';
 import type { Region } from '../../hooks/useRegions';
 import { useRegions } from '../../hooks/useRegions';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { jaroWinklerDistance } from '../../services/search/jaroWinklerDistance';
-import type { ForeignOffice } from '../../services/sitemap/SitemapData';
+import { useSitemap } from '../../services/sitemap/useSitemap';
 import { groupBy } from '../../utils/groupBy';
-import { Dialog } from '../Dialog/Dialog';
-import { useDialogProps } from '../Dialog/useDialogProps';
-import { Img } from '../Img/Img';
+import { Dialog } from '../DialogManager/Dialog';
+import { useDialogManager } from '../DialogManager/useDialogManager';
 import { Text } from '../Text/Text';
-import type {
-  CurrentLocationProps,
-  ForeignOfficeProps,
-  LocationDialogProps,
-} from './LocationDialogProps';
+import { renderForeignOffices } from './renderForeignOffices';
+import { renderRegion } from './renderRegion';
+import { renderRegionGroup } from './renderRegionGroup';
 import { SearchBar } from './SearchBar';
 
 const SEARCH_TERM_MIN_LENGTH = 3;
 
-export const LOCATION_DIALOG_ID = 'location';
+export const LocationDialog = JSX<UniBlockProps>(() => {
+  const { defaultLocation, foreignOffices } = useSitemap();
+  const [currentLocation, selectCurrentLocation] = useLocation(defaultLocation);
 
-export const LocationDialog = JSX<LocationDialogProps>(
-  ({ currentLocation, onChangeLocation, foreignOffices }) => {
-    const dialogProps = useDialogProps(LOCATION_DIALOG_ID);
+  const [query, setQuery] = useState('');
 
-    const [query, setQuery] = useState('');
-
-    const regions: Region[] = cleanUpRegions(useRegions()).sort((a, b) =>
-      a.name.localeCompare(b.name),
-    );
-    const regionsGroupByLetter: Map<string, Region[]> = groupBy(regions, regionFirstLetter);
+  const regions: Region[] = cleanUpRegions(useRegions()).sort((a, b) =>
+    a.name.localeCompare(b.name),
+  );
+  const regionsGroupByLetter: Map<string, Region[]> = groupBy(regions, regionFirstLetter);
 
-    const handleChangeLocation = useCallback(
-      (region: Region) => {
-        dialogProps.onClose && dialogProps.onClose();
-        onChangeLocation && onChangeLocation(region);
-      },
-      [dialogProps.onClose, onChangeLocation],
-    );
+  const { close } = useDialogManager();
+  const handleChangeLocation = useCallback((region: Region) => {
+    selectCurrentLocation(region);
+    close();
+  }, []);
 
-    return (
-      <Dialog
-        {...dialogProps}
-        head={
-          <div>
-            <CurrentLocation
-              currentLocation={currentLocation}
-              onChangeLocation={handleChangeLocation}
-            />
-            <SearchBar onSearch={setQuery} searchTerm={query} />
-          </div>
-        }
-      >
-        {query && query.length >= SEARCH_TERM_MIN_LENGTH ? (
-          <div>
-            {regions
-              .filter(
-                ({ name }) =>
-                  name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8,
-              )
-              .map(renderRegion(handleChangeLocation))}
-          </div>
-        ) : (
-          <div className="columns-5">
-            {Array.from(regionsGroupByLetter.entries()).map(
-              renderRegionGroup(handleChangeLocation),
-            )}
-          </div>
-        )}
-        <ForeignOffices foreignOffices={foreignOffices} />
-      </Dialog>
-    );
-  },
-);
+  return (
+    <Dialog
+      head={
+        <div>
+          {currentLocation ? (
+            <div className="mb-s">
+              <Text size="text-l" font="font-light">
+                Сейчас выбран:&nbsp;
+              </Text>
+              <button onClick={() => selectCurrentLocation(currentLocation)}>
+                <Text color="text-primary-main">{currentLocation.name}</Text>
+              </button>
+            </div>
+          ) : null}
+          <SearchBar onSearch={setQuery} searchTerm={query} />
+        </div>
+      }
+    >
+      {query && query.length >= SEARCH_TERM_MIN_LENGTH ? (
+        <div>
+          {regions
+            .filter(
+              ({ name }) =>
+                name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8,
+            )
+            .map(renderRegion(handleChangeLocation))}
+        </div>
+      ) : (
+        <div className="columns-5">
+          {Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation))}
+        </div>
+      )}
+      {renderForeignOffices(foreignOffices)}
+    </Dialog>
+  );
+});
 
 const regionFirstLetter = (region: Region) => region.name?.charAt(0) || '';
 
@@ -82,80 +78,3 @@ const cleanUpRegions = (regions: Region[]) =>
     ...region,
     name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
   }));
-
-const CurrentLocation = JSX<CurrentLocationProps>(({ currentLocation, onChangeLocation }) =>
-  currentLocation ? (
-    <div className="mb-4">
-      <Text size="text-l" font="font-light">
-        Сейчас выбран:&nbsp;
-      </Text>
-      <button
-        className="cursor-pointer"
-        onClick={() => {
-          onChangeLocation && onChangeLocation(currentLocation);
-        }}
-      >
-        <Text color="text-primary-main">{currentLocation.name}</Text>
-      </button>
-    </div>
-  ) : null,
-);
-
-const renderRegionGroup =
-  (onChangeLocation?: (region: Region) => void) =>
-  ([letter, regions]: [string, Region[]]) =>
-    (
-      <div key={letter} className="break-inside-avoid mb-2xl w-56">
-        <div className="mb-s">
-          <Text size="text-h6">{letter}</Text>
-        </div>
-        {regions.map(renderRegion(onChangeLocation))}
-      </div>
-    );
-
-const renderRegion = (onChangeLocation?: (region: Region) => void) => (region: Region) =>
-  (
-    <div key={region.id} className="mb-2xs">
-      <button
-        className="cursor-pointer hover:text-primary-hover"
-        onClick={() => {
-          onChangeLocation && onChangeLocation(region);
-        }}
-      >
-        {region.name || ''}
-      </button>
-    </div>
-  );
-
-const ForeignOffices = JSX<ForeignOfficeProps>(({ foreignOffices }) =>
-  foreignOffices?.length ? (
-    <div className="border-t border-main-divider mt-2xs pt-2xs">
-      <div className="mb-m">
-        <Text size="text-m" font="font-light" color="text-secondary-text">
-          Представительства за рубежом:
-        </Text>
-      </div>
-      <div className="flex gap-10">
-        {foreignOffices.map((office, i: number) => (
-          <ForeignOffice key={String(i)} {...office} />
-        ))}
-      </div>
-    </div>
-  ) : null,
-);
-
-const ForeignOffice = JSX<ForeignOffice>(({ icon, ...rest }) => {
-  const link = useLink();
-  const { text, target, href, onClick } = link(rest);
-
-  return (
-    <div className="flex gap-x-3">
-      {icon ? <Img pathPrefix="/wcms-resources/" image={icon} /> : null}
-      {text ? (
-        <a className="hover:text-primary-hover" href={href} target={target} onClick={onClick}>
-          {text}
-        </a>
-      ) : null}
-    </div>
-  );
-});

package/src/ui-kit/LocationDialog/renderForeignOffices.tsx

@@ -0,0 +1,37 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { ForeignOffice } from '../../services/sitemap/SitemapData';
+import { Img } from '../Img/Img';
+import { Text } from '../Text/Text';
+
+export const renderForeignOffices = (foreignOffices: ForeignOffice[] | undefined) =>
+  foreignOffices?.length ? (
+    <div className="border-t border-main-divider mt-2xs pt-2xs">
+      <div className="mb-m">
+        <Text size="text-m" font="font-light" color="text-secondary-text">
+          Представительства за рубежом:
+        </Text>
+      </div>
+      <div className="flex gap-10">
+        {foreignOffices.map((office, i: number) => (
+          <ForeignOffice key={String(i)} {...office} />
+        ))}
+      </div>
+    </div>
+  ) : null;
+
+const ForeignOffice = JSX<ForeignOffice>(({ icon, ...rest }) => {
+  const link = useLink();
+  const { text, target, href, onClick } = link(rest);
+
+  return (
+    <div className="flex gap-x-3">
+      {icon ? <Img pathPrefix="/wcms-resources/" image={icon} /> : null}
+      {text ? (
+        <a className="hover:text-primary-hover" href={href} target={target} onClick={onClick}>
+          {text}
+        </a>
+      ) : null}
+    </div>
+  );
+});

package/src/ui-kit/LocationDialog/renderRegion.tsx

@@ -0,0 +1,15 @@
+import type { Region } from '../../hooks/useRegions';
+
+export const renderRegion = (onChangeLocation?: (region: Region) => void) => (region: Region) =>
+  (
+    <div key={region.id} className="mb-2xs">
+      <button
+        className="cursor-pointer hover:text-primary-hover"
+        onClick={() => {
+          onChangeLocation && onChangeLocation(region);
+        }}
+      >
+        {region.name || ''}
+      </button>
+    </div>
+  );

package/src/ui-kit/LocationDialog/renderRegionGroup.tsx

@@ -0,0 +1,15 @@
+import type { Region } from '../../hooks/useRegions';
+import { Text } from '../Text/Text';
+import { renderRegion } from './renderRegion';
+
+export const renderRegionGroup =
+  (onChangeLocation?: (region: Region) => void) =>
+  ([letter, regions]: [string, Region[]]) =>
+    (
+      <div key={letter} className="break-inside-avoid mb-2xl w-56">
+        <div className="mb-s">
+          <Text size="text-h6">{letter}</Text>
+        </div>
+        {regions.map(renderRegion(onChangeLocation))}
+      </div>
+    );

package/src/ui-kit/LocationDialog/useLocationDialog.tsx

@@ -0,0 +1,11 @@
+import { DialogOptions, useDialogManager } from '../DialogManager/useDialogManager';
+import { LocationDialog } from './LocationDialog';
+
+export const useLocationDialog = () => {
+  const { open, close } = useDialogManager();
+
+  return {
+    open: (options: DialogOptions = {}) => open(<LocationDialog />, options),
+    close,
+  };
+};

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ListOrientation } from '../../model/ListOrientation';
 import { Checkbox } from '../Checkbox/Checkbox';
+import { style } from '../../utils/style';
 
 export interface RadioButtonItem {
   id: string;
@@ -10,6 +11,7 @@ export interface RadioButtonItem {
 interface RadioButtonGroupProps {
   items?: RadioButtonItem[];
   checkedItem?: string;
+  className?: string;
   onChange?: (id: string) => void;
   orientation?: ListOrientation;
 }
@@ -20,8 +22,14 @@ const orientationStyleMap: Record<ListOrientation, string> = {
 };
 
 export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
-  ({ items, checkedItem, onChange: onChangeCheckedItem, orientation = 'horizontal' }) => (
-    <div className={`flex ${orientationStyleMap[orientation]}`}>
+  ({
+    items,
+    checkedItem,
+    className,
+    onChange: onChangeCheckedItem,
+    orientation = 'horizontal',
+  }) => (
+    <div className={style(`flex ${orientationStyleMap[orientation]}`, className)}>
       {items?.map(({ id, text }) => (
         <Checkbox
           key={String(id)}