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

package/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
-import { Img } from '../Img/Img';
-import { LinkButton } from '../LinkButton/LinkButton';
+import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
 import { type TariffsTableInnerContent } from './InnerTableProps';
 
 export interface InnerTableButtonProps
@@ -14,13 +13,12 @@ export interface InnerTableButtonProps
 
 export const TableInnerButton = JSX<InnerTableButtonProps>(
   ({ className = '', isOpen, onClick }) => (
-    <LinkButton
+    <DefaultFoldButton
       className={className}
-      appendRight={
-        <Img image={{ icon: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon' }} width="24" height="24" />
-      }
-      text={isOpen ? 'Скрыть' : 'Показать'}
-      version="gray"
+      label={isOpen ? 'Скрыть' : 'Показать'}
+      isUnfolded={isOpen}
+      version="secondary"
+      short
       onClick={onClick}
     />
   ),

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

@@ -9,7 +9,7 @@ export const Input = JSX<InputProps>(
   // eslint-disable-next-line max-lines-per-function
   ({
     key,
-    className = '',
+    className,
     id,
     name,
     type = 'text',
@@ -17,20 +17,20 @@ export const Input = JSX<InputProps>(
     placeholder,
     value = '',
     valid = true,
-    children,
-    onChange,
-    onFocus,
-    onBlur,
     pattern,
     autoFocus = false,
     isTextarea = false,
     disabled = false,
+    children,
+    onChange,
+    onFocus,
+    onBlur,
   }) => {
     const inputRef = useRef<HTMLInputElement | null>(null);
 
     const handleChange = useCallback(
       (e: { target?: { value?: string } }) => {
-        const valueWithoutSpace = (e.target?.value || '').trimStart();
+        const valueWithoutSpace = (e.target?.value ?? '').trimStart();
         onChange && onChange(valueWithoutSpace);
       },
       [onChange],
@@ -45,6 +45,8 @@ export const Input = JSX<InputProps>(
     const paddingStyle = children ? 'pr-3xl' : '';
     const validStyle = getValidStyle(valid);
 
+    const ariaLabel = label ?? name ?? id;
+
     return (
       <div className={style('relative', className)}>
         <label className="space-y-xs">
@@ -52,31 +54,33 @@ export const Input = JSX<InputProps>(
           {isTextarea ? (
             <textarea
               className={style('block resize-y min-h-24', defaultStyle, validStyle)}
-              key={key}
               id={style('textarea', id)}
+              key={key}
+              value={value}
               name={name || id}
               placeholder={placeholder}
-              value={value}
+              disabled={disabled}
+              aria-label={ariaLabel}
               onChange={handleChange}
               onFocus={onFocus}
               onBlur={onBlur}
-              disabled={disabled}
             />
           ) : (
             <input
-              type={type}
-              className={style('h-14', defaultStyle, paddingStyle, validStyle)}
               ref={inputRef}
-              key={key}
+              className={style('h-14', defaultStyle, paddingStyle, validStyle)}
               id={id}
+              key={key}
+              type={type}
+              value={value}
               name={name || id}
               placeholder={placeholder}
-              value={value}
+              pattern={pattern}
+              disabled={disabled}
+              aria-label={ariaLabel}
               onChange={handleChange}
               onFocus={onFocus}
               onBlur={onBlur}
-              pattern={pattern}
-              disabled={disabled}
             />
           )}
         </label>

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

@@ -5,12 +5,7 @@ import { TimerCircle } from './TimerCircle';
 export default {
   default: (
     <div>
-      <TimerCircle
-        interval={100}
-        title="Заявка в обработке"
-        __html="<p>Нам нужно больше времени для обработки вашей заявки.</p>
-       <p> Как только заявка будет обработана, мы пришлём вам СМС</p>"
-      />
+      <TimerCircle interval={100} title="Заявка в обработке" />
     </div>
   ),
 };