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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/ui-kit/Button/ButtonsSectionContent.ts

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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/ui-kit/LinkButton/LinkButton.tsx

@@ -2,9 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 import { Img } from '../Img/Img';
+import { style } from '../../utils/style';
 
-const LINK_CLASS_NAME = `absolute border border-primary-main ml-s px-xl py-lg
-  text-l font-light bg-white text-primary-text flex w-80
+const LINK_CLASS_NAME = `absolute border border-primary-main px-xl py-lg
+  text-l font-light bg-white text-primary-text flex
   justify-between items-center group-hover/link:text-primary-main z-10`;
 
 const LINK_BORDER_CLASS_NAME =
@@ -20,12 +21,24 @@ export const LinkButton = JSX<LinkButtonProps>(
     const adjustedProps = link({ href, target });
 
     return text ? (
-      <div className={`relative group/link cursor-pointer w-[328px] h-[82px] ${className}`}>
-        <a className={LINK_CLASS_NAME} role="link" {...adjustedProps}>
-          <div className="p-3xs">{text}</div>
-          <div className="w-6 h-6">
+      <div
+        className={style(
+          'flex max-w-sm relative group/link cursor-pointer w-64 h-16 sm:w-[47%] sm:h-20 sm:mr-m',
+          className,
+        )}
+      >
+        <a
+          className={style(
+            LINK_CLASS_NAME,
+            'rounded-md sm:rounded-none w-full h-12 sm:ml-s sm:w-full sm:h-auto',
+          )}
+          role="link"
+          {...adjustedProps}
+        >
+          <div className="p-0.5">{text}</div>
+          <div className="w-6 h-6 hidden sm:block">
             <Img
-              className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100"
+              className="w-4 h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100"
               image={{ icon: 'ArrowRightIcon', iconVersion: 'black' }}
               imageClassName="group-hover/link:text-primary-main"
               width="24"
@@ -33,8 +46,8 @@ export const LinkButton = JSX<LinkButtonProps>(
             />
           </div>
         </a>
-        <div className={`${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5`} />
-        <div className={`${LINK_BORDER_CLASS_NAME} mt-3 mr-3`} />
+        <div className={LINK_BORDER_CLASS_NAME + ' hidden sm:block mx-1.5 mt-1.5'} />
+        <div className={LINK_BORDER_CLASS_NAME + ' hidden sm:block mt-3 mr-3'} />
       </div>
     ) : null;
   },

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

@@ -6,7 +6,7 @@ import { linkListStyles } from './linkListStyles';
 
 export const LinkList = JSX<LinkListProps>(({ className = '', items }) =>
   items?.length ? (
-    <ul className={style('flex flex-col p-0 gap-m sm:gap-xl', linkListStyles, className)}>
+    <ul className={style('flex flex-col', linkListStyles, className)}>
       {items.map(renderLinkListItem)}
     </ul>
   ) : null,
@@ -16,8 +16,8 @@ const renderLinkListItem = (item: LinkProps, i: number) => {
   const { text, ...linkProps } = item;
 
   return (
-    <li key={`list_item_${String(i)}`} className="list-none">
-      <a className="hover:text-primary-main sm:font-light" role="link" {...linkProps}>
+    <li key={`list_item_${String(i)}`} className="list-none my-xs">
+      <a className="hover:text-primary-main font-light" role="link" {...linkProps}>
         {text ? text : null}
       </a>
     </li>