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

package/src/services/sitemap/useSitemap.ts

@@ -0,0 +1,7 @@
+import { useSWRResource } from '../../hooks/useSWRResource';
+import type { Fallback } from '../../model/Fallback';
+import { projectSettings } from '../../ProjectSettings';
+import type { SitemapData } from './SitemapData';
+
+export const useSitemap = (fallback?: Fallback) =>
+  useSWRResource<SitemapData>(projectSettings.SITEMAP || 'sitemap', fallback);

package/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -1,12 +1,12 @@
 import type { Align } from '../../model/Align';
 import type { BulletsProps } from '../../model/Bullets';
 import type { HeadlineProps } from '../../model/HeadlineType';
-import type { ButtonContent } from '../Button/ButtonProps';
 import type { ImageContent } from '../Img/ImgProps';
 import type { ListContent } from '../List/ListContent';
 import type { RichTextProps } from '../RichText/RichTextProps';
 import type { TagsContent } from '../Tags/TagsContent';
 import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
+import type { ButtonsSectionContent } from '../Button/ButtonsSectionContent';
 
 /** @title Доп. настройки картинки */
 export interface TileImageOptions {
@@ -24,7 +24,7 @@ export type BaseProductTileContent = HeadlineProps &
   ListContent &
   BulletsProps &
   TagsContent &
-  ButtonContent &
+  ButtonsSectionContent &
   ImageContent & {
     /** @title Лейбл (моб.) */
     label?: string;

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

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import { ButtonInner } from './ButtonInner';
-import type { ButtonWithIconProps } from './ButtonProps';
 import { getDisabledButtonClasses } from './getDisabledButtonClasses';
 import { getRegularButtonClasses } from './getRegularButtonClasses';
+import type { ButtonProps } from './ButtonProps';
 
-export const Button = JSX<ButtonWithIconProps>(({ disabled, children, ...rest }) => {
+export const Button = JSX<ButtonProps>(({ disabled, children, ...rest }) => {
   const link = useLink();
   const adjustedProps = link(rest);
   const buttonInner = children ?? <ButtonInner {...adjustedProps} />;
@@ -17,7 +17,7 @@ export const Button = JSX<ButtonWithIconProps>(({ disabled, children, ...rest })
   );
 });
 
-const RegularButton = JSX<ButtonWithIconProps>(
+const RegularButton = JSX<ButtonProps>(
   ({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, children }) => (
     <a
       className={getRegularButtonClasses({ className, version, rounded })}
@@ -33,16 +33,14 @@ const RegularButton = JSX<ButtonWithIconProps>(
   ),
 );
 
-const DisabledButton = JSX<ButtonWithIconProps>(
-  ({ className, ariaLabel, version, rounded, children }) => (
-    <div
-      role="button"
-      aria-disabled="true"
-      aria-label={ariaLabel}
-      tabIndex={-1}
-      className={getDisabledButtonClasses({ className, rounded, version })}
-    >
-      {children}
-    </div>
-  ),
-);
+const DisabledButton = JSX<ButtonProps>(({ className, ariaLabel, version, rounded, children }) => (
+  <div
+    role="button"
+    aria-disabled="true"
+    aria-label={ariaLabel}
+    tabIndex={-1}
+    className={getDisabledButtonClasses({ className, rounded, version })}
+  >
+    {children}
+  </div>
+));

package/src/ui-kit/Button/ButtonContent.ts

@@ -0,0 +1,21 @@
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { LinkProps } from '../../model/LinkProps';
+import type { Picture } from '../../model/Picture';
+
+export interface ButtonCommonContent extends LinkProps {
+  version?: ButtonVersion;
+}
+
+/**
+ * @title Кнопка
+ */
+export interface ButtonContent extends ButtonCommonContent {
+  /** @title Закругленные углы */
+  rounded?: boolean;
+  /** @title Иконка слева */
+  icon?: Picture;
+  /** @title Иконка справа */
+  iconRight?: Picture;
+  /** @title Верхний текст */
+  aboveText?: string;
+}

package/src/ui-kit/Button/ButtonInner.tsx

@@ -1,14 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ButtonVersion } from '../../model/ButtonVersion';
 import { style } from '../../utils/style';
 import { iconStyleMap } from './buttonClassNameConstants';
-import type { ButtonWithIconProps } from './ButtonProps';
+import type { ButtonProps } from './ButtonProps';
+import type { ButtonContent } from './ButtonContent';
 
-interface ButtonInnerProps extends ButtonWithIconProps {
-  version?: ButtonVersion;
-}
-
-export const ButtonInner = JSX<ButtonInnerProps>((props) => {
+export const ButtonInner = JSX<ButtonProps>((props) => {
   const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
 
   return (
@@ -25,7 +21,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
   );
 });
 
-const getButtonStyle = (props: ButtonInnerProps) => {
+const getButtonStyle = (props: ButtonContent) => {
   const { version, aboveText, rounded } = props;
 
   if (version === 'link') {
@@ -41,5 +37,5 @@ const getButtonStyle = (props: ButtonInnerProps) => {
   ].join(' ');
 };
 
-const isWithText = ({ text, aboveText, appendLeft }: ButtonInnerProps) =>
+const isWithText = ({ text, aboveText, appendLeft }: ButtonProps) =>
   Boolean(text || aboveText || !appendLeft);

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

@@ -1,61 +1,16 @@
-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';
+import type { ButtonContent } from './ButtonContent';
 
 /**
- * @hidden
+ * @title Кнопка
  */
-export interface ButtonAdditionalProps {
+export interface ButtonProps extends ButtonContent {
   className?: string;
   disabled?: boolean;
   rel?: string;
   ariaLabel?: string;
-  onClick?: (ev?: PreventableEvent) => void;
-}
-
-/**
- * @title Кнопка
- */
-export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
-  /** @title Текст */
-  text?: string;
-  /** @title Закругленные углы */
-  rounded?: boolean;
-  version?: ButtonVersion;
-}
-
-/**
- * @title Кнопка
- */
-export interface ButtonWithIconProps extends ButtonProps {
-  /** @title Иконка слева */
-  icon?: Picture;
-  /** @title Иконка справа */
-  iconRight?: Picture;
-  /** @title Верхний текст */
-  aboveText?: string;
-  /** @hidden */
   appendLeft?: VNode;
-  /** @hidden */
   appendRight?: VNode;
+  onClick?: (ev?: PreventableEvent) => void;
 }
-
-export interface ButtonContent {
-  /**
-   * @title Кнопки
-   * @maxItems 4
-   */
-  buttons?: ButtonWithIconProps[];
-}
-
-export type BackwardButtonProps = ButtonProps &
-  IconProps & {
-    /** @title Верхний текст */
-    aboveText?: string;
-    /** @hidden */
-    appendLeft?: VNode;
-    /** @title Закругленные углы */
-    rounded?: boolean;
-  };

package/src/ui-kit/Button/ButtonsSectionContent.ts

@@ -0,0 +1,8 @@
+import type { ButtonContent } from './ButtonContent';
+
+export interface ButtonsSectionContent {
+  /**
+   * @title Кнопки
+   */
+  buttons?: ButtonContent[];
+}

package/src/ui-kit/Button/renderButtonsSection.tsx

@@ -2,7 +2,7 @@ import type { Picture } from '../../model/Picture';
 import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
 import { Button } from './Button';
-import type { ButtonWithIconProps } from './ButtonProps';
+import type { ButtonContent } from './ButtonContent';
 
 interface ButtonsSectionOptions {
   className?: string;
@@ -11,7 +11,7 @@ interface ButtonsSectionOptions {
 }
 
 export const renderButtonsSection = (
-  buttons?: (ButtonWithIconProps | undefined)[],
+  buttons?: (ButtonContent | undefined)[],
   { className, buttonClassName, isVertical }: ButtonsSectionOptions = {},
 ) =>
   buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (
@@ -28,7 +28,7 @@ export const renderButtonsSection = (
 
 const renderButton =
   (buttonClassName = '') =>
-  (button?: ButtonWithIconProps, index?: number) => {
+  (button?: ButtonContent, index?: number) => {
     const { text, icon, iconRight, version, ...rest } = button || {};
     const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
     const iconVersion = icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;

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/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 />,
 };