@redneckz/wildless-cms-uni-blocks 0.14.761 → 0.14.763

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

@@ -0,0 +1,82 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
+import { type LinkProps as BaseLinkProps } from '../../model/LinkProps';
+import { getAspectsAttributes } from '../../utils/dataAttributes';
+import { style } from '../../utils/style';
+import { themeStyle as buttonThemeStyle } from '../Button/Button';
+import { type PreventableEvent } from '../PreventableEvent';
+
+const themeStyle: Record<LinkButtonVersion, string> = {
+  primary: buttonThemeStyle.primary,
+  secondary: buttonThemeStyle.secondary,
+  white:
+    'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
+  link: 'text-primary-main',
+  gray: buttonThemeStyle.secondary,
+  transparent: '',
+  '': '',
+};
+
+export interface LinkProps extends BaseLinkProps {
+  className?: string;
+  version?: LinkButtonVersion;
+  aboveText?: string;
+  rel?: string;
+  ariaLabel?: string;
+  onClick?: (ev?: PreventableEvent) => void;
+}
+
+export const Link = JSX<LinkProps>((props) => {
+  const link = useLink();
+  const {
+    className,
+    href,
+    target,
+    text,
+    aboveText,
+    version = 'link',
+    rel,
+    ariaLabel,
+    data,
+    children,
+    onClick,
+  } = link(props);
+
+  const buttonLike = version !== 'link';
+
+  return (
+    <a
+      className={style(
+        'group/btn inline-flex items-center h-fit',
+        'font-sans no-underline select-none',
+        'border border-transparent focus:border-primary-text focus:border',
+        'cursor-pointer',
+        {
+          [themeStyle[version]]: Boolean(version),
+          [aboveText ? 'px-9 py-2.5' : 'px-9 py-4']: buttonLike,
+          'rounded-md': buttonLike,
+        },
+        className,
+      )}
+      href={href}
+      target={target}
+      rel={rel}
+      aria-label={ariaLabel ?? `Ссылка на ${text}`}
+      role={href ? 'link' : 'button'}
+      onClick={onClick}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...getAspectsAttributes(data)}
+    >
+      {children ?? renderText(text, aboveText)}
+    </a>
+  );
+});
+
+const renderText = (text: string | undefined, aboveText: string | undefined) =>
+  text || aboveText ? (
+    <div className="whitespace-pre">
+      {aboveText ? <div className="font-light text-left text-xs">{aboveText}</div> : null}
+      <div className={style('text-left', { 'text-s -mt-3xs': Boolean(aboveText) })}>{text}</div>
+    </div>
+  ) : null;

package/mobile/src/ui-kit/LinkButton/ArrowButton.tsx

@@ -1,44 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { style } from '../../utils/style';
-import { Img } from '../Img/Img';
-import { LinkButton } from './LinkButton';
-import { type LinkButtonProps } from './LinkButtonProps';
+import { type ButtonProps } from '../Button/Button';
+import { IconButton } from '../Button/IconButton';
 
 /** @deprecated */
-export const ArrowButton = JSX<LinkButtonProps>(({ className, disabled, ...rest }) => (
-  <LinkButton
-    rounded
-    className={style(
-      'group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black',
-      disabled
-        ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main',
-      className,
-    )}
-    disabled={disabled}
-    {...rest}
-  >
-    <Img
-      className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border"
-      image={{ icon: 'ArrowLeftIcon', iconVersion: 'black' }}
-      imageClassName="group-hover/btn:text-primary-main"
-      width="16"
-      height="16"
-    />
-  </LinkButton>
+export const ArrowLeftButton = JSX<ButtonProps>((props) => (
+  <IconButton name="ArrowLeftIcon" version="secondary" ariaLabel="Пролистать влево" {...props} />
 ));
 
 /** @deprecated */
-export const ScrollLeftButton = JSX<LinkButtonProps>((props) => (
-  <ArrowButton {...props} ariaLabel="Пролистать влево" data-block-control="scroll-left" />
-));
-
-/** @deprecated */
-export const ScrollRightButton = JSX<LinkButtonProps>((props) => (
-  <ArrowButton
-    {...props}
-    className={`${props.className || ''} rotate-180`}
-    ariaLabel="Пролистать вправо"
-    data-block-control="scroll-right"
-  />
+export const ArrowRightButton = JSX<ButtonProps>((props) => (
+  <IconButton name="ArrowRightIcon" version="secondary" ariaLabel="Пролистать вправо" {...props} />
 ));

package/mobile/src/ui-kit/LinkButton/renderArrows.tsx

@@ -1,5 +1,5 @@
 import { style } from '../../utils/style';
-import { ArrowButton } from './ArrowButton';
+import { ArrowLeftButton, ArrowRightButton } from './ArrowButton';
 
 /** @deprecated */
 export type RenderArrowsProps = {
@@ -13,40 +13,24 @@ export type RenderArrowsProps = {
 };
 
 /** @deprecated */
-export function renderArrows({
-  dec,
-  inc,
+export const renderArrows = ({
+  className,
+  btnClass,
   canDec,
   canInc,
-  btnClass,
-  className = '',
-}: RenderArrowsProps) {
-  const isVisible = canDec || canInc;
-
-  if (!isVisible) {
-    return null;
-  }
-
-  return (
+  dec,
+  inc,
+}: RenderArrowsProps) =>
+  canDec || canInc ? (
     <div>
       {canDec ? (
-        <ArrowButton
-          className={style('absolute z-40', btnClass[0], className)}
-          onClick={dec}
-          ariaLabel="Пролистать влево"
-          data-block-control="scroll-left"
-          disabled={!canDec}
-        />
+        <ArrowLeftButton className={style('absolute z-40', btnClass[0], className)} onClick={dec} />
       ) : null}
       {canInc ? (
-        <ArrowButton
-          className={style('absolute z-40 rotate-180', btnClass[1], className)}
+        <ArrowRightButton
+          className={style('absolute z-40', btnClass[1], className)}
           onClick={inc}
-          ariaLabel="Пролистать вправо"
-          data-block-control="scroll-right"
-          disabled={!canInc}
         />
       ) : null}
     </div>
-  );
-}
+  ) : null;

package/mobile/src/ui-kit/LinkButton/useFormSubmit.ts

@@ -2,31 +2,33 @@ import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type PreventableEvent } from '../PreventableEvent';
 import { type ButtonCommonContent } from './LinkButtonContent';
 
-/** @deprecated */
 export const useFormSubmit = ({ method, href }: ButtonCommonContent) =>
-  useCallback((ev: PreventableEvent) => {
-    if (method !== 'POST' || !href) {
-      return;
-    }
+  useCallback(
+    (ev: PreventableEvent) => {
+      if (method !== 'POST' || !href) {
+        return;
+      }
 
-    ev.preventDefault();
-    ev.stopPropagation();
+      ev.preventDefault();
+      ev.stopPropagation();
 
-    const { origin, pathname, searchParams } = new URL(href || '');
-    const form = document.createElement('form');
+      const { origin, pathname, searchParams } = new URL(href || '');
+      const form = document.createElement('form');
 
-    form.setAttribute('method', 'POST');
-    form.setAttribute('action', [origin, pathname].join(''));
+      form.setAttribute('method', 'POST');
+      form.setAttribute('action', [origin, pathname].join(''));
 
-    for (const [key, value] of searchParams.entries()) {
-      const input = document.createElement('input');
-      input.setAttribute('type', 'hidden');
-      input.setAttribute('name', key);
-      input.setAttribute('value', value);
-      form.appendChild(input);
-    }
+      for (const [key, value] of searchParams.entries()) {
+        const input = document.createElement('input');
+        input.setAttribute('type', 'hidden');
+        input.setAttribute('name', key);
+        input.setAttribute('value', value);
+        form.appendChild(input);
+      }
 
-    document.body.appendChild(form);
+      document.body.appendChild(form);
 
-    form.submit();
-  }, []);
+      form.submit();
+    },
+    [method, href],
+  );

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

@@ -29,6 +29,7 @@ export const PopupManager = JSX(() => {
         ...(popup.width ? { width: `${popup.width}px` } : {}),
       }}
       role="dialog"
+      title="Всплывающее окно"
     >
       {popup.popup}
     </div>

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

@@ -1,11 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type LinkDoc } from '../../components/LinkDocs/LinkDocsContent';
-import { useRouter } from '../../external/useRouter';
 import { type Picture } from '../../model/Picture';
-import { adjustHref } from '../../utils/adjustHref';
 import { Button } from '../Button/Button';
 import { Dialog } from '../DialogManager/Dialog';
-import { LinkButton } from '../LinkButton/LinkButton';
+import { Link } from '../Link/Link';
 import { RichText } from '../RichText/RichText';
 
 export interface ReportDialogProps extends LinkDoc {
@@ -14,29 +12,26 @@ export interface ReportDialogProps extends LinkDoc {
   onClose?: () => void;
 }
 
-export const ReportDialog = JSX<ReportDialogProps>(({ href, __html, target, onClose }) => {
-  const router = useRouter();
-  const adjustedHref = adjustHref(router)(href);
-
-  return (
-    <Dialog className="my-6xl min-h-fit w-fit mx-auto" onClose={onClose}>
-      {__html ? <RichText __html={__html} /> : null}
-      <div className="flex flex-row mx-auto w-fit gap-lg py-lg">
-        <LinkButton
-          text="Я согласен"
-          version="primary"
-          target={target}
-          href={adjustedHref}
-          onClick={onClose}
-        />
-        <Button type="button" version="secondary" onClick={onClose}>
-          Я не согласен
-        </Button>
-      </div>
-      <div>
-        Нажимая кнопку «Я СОГЛАСЕН» ниже Вы принимаете данные условия. Распространение или раскрытие
-        любой части данного Заключения или любой информации, или рекомендации в нем запрещено.»
-      </div>
-    </Dialog>
-  );
-});
+export const ReportDialog = JSX<ReportDialogProps>(({ href, __html, target, onClose }) => (
+  <Dialog className="my-6xl min-h-fit w-fit mx-auto" onClose={onClose}>
+    {__html ? <RichText __html={__html} /> : null}
+    <div className="flex flex-row mx-auto w-fit gap-lg py-lg">
+      <Link
+        href={href}
+        target={target}
+        version="primary"
+        ariaLabel="Ссылка на согласие"
+        onClick={onClose}
+      >
+        Я согласен
+      </Link>
+      <Button type="button" version="secondary" onClick={onClose}>
+        Я не согласен
+      </Button>
+    </div>
+    <div>
+      Нажимая кнопку «Я СОГЛАСЕН» ниже Вы принимаете данные условия. Распространение или раскрытие
+      любой части данного Заключения или любой информации, или рекомендации в нем запрещено.»
+    </div>
+  </Dialog>
+));

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

@@ -31,9 +31,9 @@ export const Select = JSX<SelectProps>(
     isBorder = true,
     placeholder = '',
     isSearch = false,
+    disabled = false,
     iconVersion = 'black',
     onChange,
-    disabled = false,
   }) => {
     const [isOpen, { setFalse: close, setTrue: open }] = useBool();
     const [query, setQuery] = useState('');
@@ -81,10 +81,10 @@ export const Select = JSX<SelectProps>(
             <div className={style('absolute top-0 w-full z-20')}>
               <Input
                 type="text"
-                autoFocus
                 value={query}
-                onChange={setQuery}
+                autoFocus
                 disabled={isDisabled}
+                onChange={setQuery}
               />
             </div>
           ) : null}

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

@@ -41,7 +41,7 @@ const MobileTopItem = JSX<{ className?: string; item: TopMenuItemProps }>(({ cla
       >
         <ButtonTitle>
           <RoundedIcon className="shrink-0" {...item.icon} />
-          <Text size="text-h6" font="font-normal">
+          <Text size="text-h6" font="font-normal" color="text-primary-text">
             {item.text}
           </Text>
         </ButtonTitle>

package/mobile/src/ui-kit/SwipeListControl/SwipeListScrollButtons.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
-import { ScrollLeftButton, ScrollRightButton } from '../LinkButton/ArrowButton';
+import { ArrowLeftButton, ArrowRightButton } from '../LinkButton/ArrowButton';
 import { type SwipeListScrollButtonsContent } from './SwipeListControlContent';
 import { type SwipeListScroll } from './useSwipeListScroll';
 
@@ -22,13 +22,13 @@ export const SwipeListScrollButtons = JSX<SwipeListScrollButtonsProps>(
       <div className={className}>
         {hasBlur ? renderBlur(scroll) : null}
         {canScrollLeft ? (
-          <ScrollLeftButton
+          <ArrowLeftButton
             className={style(buttonStyle(isBottom), isArrowPadded ? 'left-1' : 'left-0')}
             onClick={scrollLeft}
           />
         ) : null}
         {canScrollRight ? (
-          <ScrollRightButton
+          <ArrowRightButton
             className={style(buttonStyle(isBottom), isArrowPadded ? 'right-1' : 'right-0')}
             onClick={scrollRight}
           />

package/mobile/src/ui-kit/TabsControl/ScrollableTabsControl.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style';
-import { ScrollLeftButton, ScrollRightButton } from '../LinkButton/ArrowButton';
+import { ArrowLeftButton, ArrowRightButton } from '../LinkButton/ArrowButton';
 import { SwipeListContainer } from '../SwipeListControl/SwipeListContainer';
 import { useSwipeListScroll } from '../SwipeListControl/useSwipeListScroll';
 import { renderTab } from './renderTab';
@@ -51,13 +51,13 @@ export const ScrollableTabsControl = JSX<TabsControlProps>(
           {items.map(renderTab(activeItem, onChange, tabsType))}
         </SwipeListContainer>
         {scroll.canScrollLeft ? (
-          <ScrollLeftButton
+          <ArrowLeftButton
             className={style('left-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop)}
             onClick={scroll.scrollLeft}
           />
         ) : null}
         {scroll.canScrollRight ? (
-          <ScrollRightButton
+          <ArrowRightButton
             className={style('right-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop)}
             onClick={scroll.scrollRight}
           />

package/mobile/src/ui-kit/TabsControl/TabItemInner.tsx

@@ -53,7 +53,6 @@ export const TabItemInner = JSX<TabItemInnerProps>(
           tabPaddingStyleMap[type],
           isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type],
         )}
-        role="tablist"
         aria-label="Список табов"
         onClick={onClick}
         {...link}

package/mobile/src/ui-kit/TimerCircle/Timer.tsx

@@ -1,34 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 
 interface TimerProps {
-  time: number;
-  setTime: (value: number) => void;
-  interval?: number;
   className?: string;
+  seconds: number;
 }
 
-export const Timer = JSX<TimerProps>(({ time, setTime, className }) => {
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setTime(time - 1);
-    }, 1000);
+export const Timer = JSX<TimerProps>(({ className, seconds }) => (
+  <span className={className}>{formatTimer(seconds)}</span>
+));
 
-    if (time === 0) {
-      clearInterval(timer);
-    }
+const formatTimer = (seconds: number) => {
+  const minutes = Math.floor(seconds / 60);
 
-    return () => {
-      clearInterval(timer);
-    };
-  }, [time]);
-
-  return <span className={className}>{secondsToMinSecPadded(time)}</span>;
-});
-
-const secondsToMinSecPadded = (time: number) => {
-  const minutes = `${Math.floor(time / 60)}`.padStart(2, '0');
-  const seconds = `${time % 60}`.padStart(2, '0');
-
-  return `${minutes}:${seconds}`;
+  return [minutes, seconds % 60].map((_) => String(_).padStart(2, '0')).join(':');
 };

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

@@ -1,52 +1,36 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Headline } from '../../components/Headline/Headline';
-import { style } from '../../utils/style';
-import { RichText } from '../RichText/RichText';
+import { noop } from '../../utils/noop';
 import { Timer } from './Timer';
+import { useCountDownTimer } from './useCountDownTimer';
 
 interface TimerCircleProps {
-  interval?: number;
-  intervalExpireAction?: () => void | null;
   title?: string;
-  __html?: string;
+  interval?: number; // В секундах
+  onEnd?: () => void;
 }
 
-export const TimerCircle = JSX<TimerCircleProps>(
-  ({ interval = 0, intervalExpireAction = () => null, title, __html }) => {
-    const [time, setTime] = useState(interval);
+export const TimerCircle = JSX<TimerCircleProps>(({ title, interval = 0, onEnd = noop }) => {
+  const [time, setTime] = useState(interval);
+  useCountDownTimer({ seconds: interval, onTick: setTime, onEnd });
 
-    const setTimeWithHandleExpire = (value: number) => {
-      if (value === 0) {
-        intervalExpireAction();
-      }
-      setTime(value);
-    };
+  const gradientPercentage = 100 - ((interval - time) / interval) * 100;
 
-    const gradientPercentage = 100 - ((interval - time) / interval) * 100;
-
-    return (
-      <div>
-        {title ? <Headline title={title} headlineVersion="S" /> : null}
-        <div className="flex justify-center items-center flex-col">
-          <div
-            className={style(
-              `relative flex items-center justify-center w-24 h-24 rounded-full bg-gray text-transparent mb-5`,
-            )}
-          >
-            <div
-              className="absolute inset-0 rounded-full"
-              style={{
-                background: `conic-gradient(rgb(66, 171, 68) ${gradientPercentage}%, rgb(125, 126, 127) 0deg)`,
-              }}
-            />
-            <div className="z-10 flex items-center justify-center px-4 py-2 rounded-full w-20 h-20 bg-white text-primary-text text-m">
-              <Timer interval={interval} time={time} setTime={setTimeWithHandleExpire} />
-            </div>
-          </div>
-          {__html ? <RichText __html={__html} /> : null}
+  return (
+    <div>
+      {title ? <Headline title={title} headlineVersion="S" /> : null}
+      <div className="relative flex items-center justify-center w-24 h-24 rounded-full bg-gray text-transparent mb-5">
+        <div
+          className="absolute inset-0 rounded-full"
+          style={{
+            background: `conic-gradient(rgb(66, 171, 68) ${gradientPercentage}%, rgb(125, 126, 127) 0deg)`,
+          }}
+        />
+        <div className="z-10 flex items-center justify-center w-20 h-20 rounded-full bg-white text-primary-text text-m">
+          <Timer seconds={time} />
         </div>
       </div>
-    );
-  },
-);
+    </div>
+  );
+});

package/mobile/src/ui-kit/TimerCircle/useCountDownTimer.ts

@@ -0,0 +1,38 @@
+import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useInterval } from '../../hooks/useInterval';
+
+interface CountDownOptions {
+  seconds: number;
+  period?: number;
+  onTick?: (seconds: number) => void;
+  onEnd?: () => void;
+}
+
+export function useCountDownTimer({ seconds, period = 1000, onTick, onEnd }: CountDownOptions) {
+  const counter = useRef(seconds);
+
+  const handleTick = useCallback(
+    (stop: () => void) => {
+      counter.current ||= 0;
+      counter.current = Math.max(0, counter.current - 1);
+      try {
+        onTick?.(counter.current);
+      } finally {
+        if (counter.current <= 0) {
+          stop();
+          onEnd?.();
+        }
+      }
+    },
+    [onTick, onEnd],
+  );
+
+  const { start } = useInterval(handleTick, period);
+
+  const restart = useCallback((_: number) => {
+    counter.current = _;
+    start();
+  }, []);
+
+  return restart;
+}

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

@@ -5,13 +5,15 @@ import { sendCode } from '../../api/RetailAPI/sendCode';
 import { Headline } from '../../components/Headline/Headline';
 import { formatPhone } from '../../utils/formatPhone';
 import { noop } from '../../utils/noop';
+import { Button } from '../Button/Button';
+import { ButtonTitle } from '../Button/ButtonTitle';
 import { CaptchaDialog } from '../CaptchaDialog/CaptchaDialog';
 import { Dialog } from '../DialogManager/Dialog';
 import { useDialog } from '../DialogManager/useDialog';
-import { LinkButton } from '../LinkButton/LinkButton';
 import { Loader } from '../Loader/Loader';
 import { RichText } from '../RichText/RichText';
 import { Timer } from '../TimerCircle/Timer';
+import { useCountDownTimer } from '../TimerCircle/useCountDownTimer';
 import { InputCode } from './InputCode';
 import { SubmitButton } from './SubmitButton';
 import { useVerifyPhoneDialogSubmit } from './useVerifyPhoneDialogSubmit';
@@ -54,6 +56,8 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
 
     const phoneNumber = formatPhone(phone);
 
+    const restartTimer = useCountDownTimer({ seconds: timeNextReq, onTick: setTimeNextReq });
+
     const handleSendCode = useCallback(async () => {
       const isSuccessSendCode = await sendCode({
         phoneNumber,
@@ -63,11 +67,12 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
       if (isSuccessSendCode) {
         setAttempts(0);
         setTimeNextReq(180);
+        restartTimer(180);
         setIsTimerStarted(true);
       } else {
         captchaDialog.open({ phoneNumber, sendCode: handleSendCode });
       }
-    }, [phoneNumber, onClose]);
+    }, [phoneNumber, restartTimer, onClose]);
 
     useEffect(() => {
       handleSendCode();
@@ -95,7 +100,7 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
               hasError={hasError}
             />
           ) : null}
-          {renderText(timeNextReq, setTimeNextReq, handleSendCode)}
+          {renderText(timeNextReq, handleSendCode)}
 
           {withDescription ? (
             <RichText itemSize="list-s">
@@ -120,18 +125,14 @@ const renderNextButton = (isDisabled: boolean, onClick: () => void) => (
   <SubmitButton text="Далее" isDisabled={isDisabled} onClick={onClick} />
 );
 
-const renderText = (
-  timeNextReq: number,
-  setTimeNextReq: (value: number) => void,
-  handleSendCode: () => void,
-) =>
+const renderText = (timeNextReq: number, handleSendCode: () => void) =>
   timeNextReq ? (
     <div className="flex flex-row text-l font-light text-base">
       Получить новый код можно через
-      <Timer className="text-base ml-1" time={timeNextReq} setTime={setTimeNextReq} />
+      <Timer className="ml-1" seconds={timeNextReq} />
     </div>
   ) : (
-    <LinkButton onClick={handleSendCode} className="text-primary-main">
-      Получить новый код
-    </LinkButton>
+    <Button embedded onClick={handleSendCode}>
+      <ButtonTitle>Получить новый код</ButtonTitle>
+    </Button>
   );