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

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

@@ -5,21 +5,20 @@ import { type AspectsDef } from '../../model/AspectsProps';
 import { type ButtonVersion } from '../../model/ButtonVersion';
 import { type ColorPalette } from '../../model/ContentPageBase';
 import { getAspectsAttributes } from '../../utils/dataAttributes';
+import { noop } from '../../utils/noop';
 import { style } from '../../utils/style';
 import { type ARIAProps } from '../ARIAProps';
 import { type ControlStateProps } from '../ControlStateProps';
 import { type PreventableEvent } from '../PreventableEvent';
 
-const buttonStyleMap: Record<ButtonVersion, string> = {
+export const themeStyle: Record<ButtonVersion, string> = {
   primary: style(
-    'justify-center px-9 py-4',
     'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
     'group-data-secondary:text-primary-main group-data-secondary:bg-white',
     'group-data-secondary:hover:text-white group-data-secondary:hover:bg-primary-hover',
     'group-data-secondary:active:bg-primary-active',
   ),
   secondary: style(
-    'justify-center px-9 py-4',
     'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
     'group-data-secondary:text-white group-data-secondary:bg-white/20',
     'group-data-secondary:hover:bg-primary-hover',
@@ -29,17 +28,19 @@ const buttonStyleMap: Record<ButtonVersion, string> = {
 
 const embeddedStyle = style(
   'group/btn-embedded',
-  'justify-between p-0',
   'bg-transparent border border-transparent outline-none',
 );
 
+const disabledStyle = style('bg-main-gray text-main-disabled cursor-not-allowed');
+
 export interface ButtonProps extends ControlStateProps, ARIAProps {
   className?: string;
   type?: 'button' | 'submit' | 'reset';
   version?: ButtonVersion;
+  shape?: 'default' | 'round' | 'square';
   embedded?: boolean;
-  rounded?: boolean;
   role?: string;
+  ariaLabel?: string;
   data?: AspectsDef[];
   dataTheme?: ColorPalette;
   onClick?: (ev: PreventableEvent) => void;
@@ -50,37 +51,46 @@ export const Button = JSX<ButtonProps>(
     className,
     type = 'button',
     version = 'primary',
+    shape = 'default',
     embedded,
-    rounded = true,
     disabled,
     role,
+    ariaLabel,
     data,
     dataTheme,
     children,
-    onClick,
+    onClick = noop,
   }) => {
-    const handleClick = useCallback(
-      handlerDecorator((ev: PreventableEvent) => {
-        !disabled && onClick?.(ev);
-      }),
-      [disabled, onClick],
-    );
+    const handleClick = useCallback(role !== 'tab' ? handlerDecorator(onClick) : onClick, [
+      role,
+      onClick,
+    ]);
     const aspectsAttrs = useMemo(() => getAspectsAttributes(data), [data]);
 
+    const isRound = shape === 'round';
+
     return (
       <button
         className={style(
-          'font-sans flex items-center gap-xs relative',
-          !disabled && !embedded && buttonStyleMap[version],
+          'font-sans flex items-center gap-xs',
           {
+            [themeStyle[version]]: !disabled && !embedded,
             [embeddedStyle]: embedded,
-            'rounded-md': rounded,
-            'bg-main-gray text-main-disabled cursor-not-allowed': disabled,
+            [disabledStyle]: disabled,
+          },
+          embedded ? 'justify-between' : 'justify-center',
+          embedded || isRound ? 'p-0' : 'px-9 py-4',
+          {
+            'rounded-md': shape === 'default',
+            'rounded-full': isRound,
           },
           className,
         )}
         type={type}
         role={role}
+        aria-label={ariaLabel}
+        disabled={disabled}
+        aria-disabled={disabled ? 'true' : undefined}
         data-theme={dataTheme}
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...aspectsAttrs}

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

@@ -8,7 +8,7 @@ interface ButtonTitleProps {
 export const ButtonTitle = JSX<ButtonTitleProps>(({ className, children }) => (
   <span
     className={style(
-      'inline-flex items-center text-start gap-s group-hover/btn-embedded:text-primary-main',
+      'inline-flex items-center text-start gap-s group-[]/btn-embedded:text-primary-main',
       className,
     )}
   >

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

@@ -0,0 +1,15 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type IconName } from '../../icons/IconName';
+import { style } from '../../utils/style';
+import { Icon } from '../Icon/Icon';
+import { Button, type ButtonProps } from './Button';
+
+export interface IconButtonProps extends ButtonProps {
+  name: IconName;
+}
+
+export const IconButton = JSX<IconButtonProps>(({ className, name, ...props }) => (
+  <Button className={style('w-12 h-12 min-w-12 min-h-12', className)} shape="round" {...props}>
+    <Icon name={name} iconVersion="" size="small" />
+  </Button>
+));

package/src/ui-kit/Checkbox/CheckboxWithDoc.tsx

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../Button/Button';
+import { ButtonTitle } from '../Button/ButtonTitle';
 import { useDocumentDialog } from '../DocumentDialog/useDocumentDialog';
 import { renderErrorText } from '../Input/renderErrorText';
-import { LinkButton } from '../LinkButton/LinkButton';
-import { Text } from '../Text/Text';
 import { Checkbox } from './Checkbox';
 import { type CheckboxProps } from './CheckboxProps';
 
-const OPEN_DOC_BUTTON_TEXT = 'Ознакомиться';
-
 interface CheckboxWithDocProps extends CheckboxProps {
   docId?: number;
 }
@@ -21,9 +19,9 @@ export const CheckboxWithDoc = JSX<CheckboxWithDocProps>(
         <div className="flex flex-wrap gap-x-m">
           <Checkbox {...props} />
           {docId ? (
-            <LinkButton className="text-primary-main" onClick={openDocument}>
-              <Text>{OPEN_DOC_BUTTON_TEXT}</Text>
-            </LinkButton>
+            <Button embedded onClick={openDocument}>
+              <ButtonTitle>Ознакомиться</ButtonTitle>
+            </Button>
           ) : null}
         </div>
         {renderErrorText(error)}

package/src/ui-kit/DatePicker/Calendar.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { noop } from '../../utils/noop';
 import { renderCalendarCells } from './renderCalendarCells';
 
@@ -12,16 +12,10 @@ interface CalendarProps {
   min?: Date;
   max?: Date;
   onDateSelect?: (date: Date) => void;
-  setValue?: (value: boolean) => void;
 }
 
 export const Calendar = JSX<CalendarProps>(
-  ({ today, currentMonth, currentYear, min, max, onDateSelect = noop, setValue = noop }) => {
-    const handleDateClick = useCallback((date: Date) => {
-      onDateSelect(date);
-      setValue(false);
-    }, []);
-
+  ({ today, currentMonth, currentYear, min, max, onDateSelect = noop }) => {
     const { firstDayOfWeek, totalDays } = useMemo(
       () => ({
         firstDayOfWeek: new Date(currentYear, currentMonth, 1).getDay() - 1,
@@ -50,7 +44,7 @@ export const Calendar = JSX<CalendarProps>(
             currentMonth,
             min,
             max,
-            onDateClick: handleDateClick,
+            onDateClick: onDateSelect,
           })}
         </tbody>
       </table>

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useElementSpace } from '../../hooks/useElementSpace';
 import { type LabelProps } from '../../model/HeadlineType';
@@ -39,10 +39,18 @@ interface DatePickerProps extends ControlProps<Date>, LabelProps {
 export const DatePicker = JSX<DatePickerProps>(
   // eslint-disable-next-line max-lines-per-function
   ({ className = '', label = '', value, valid = true, minDate, maxDate, disabled, onChange }) => {
-    const [showCalendar, { setValue }] = useBool(false);
+    const [isCalendarVisible, { setValue, setFalse: hideCalendar }] = useBool(false);
     const [selectedMonth, setSelectedMonth] = useState(value?.getMonth() || new Date().getMonth());
     const [selectedYear, setSelectedYear] = useState(
-      value?.getFullYear() || new Date().getFullYear(),
+      value?.getFullYear() ?? new Date().getFullYear(),
+    );
+
+    const handleDateSelect = useCallback(
+      (date: Date) => {
+        onChange?.(date);
+        hideCalendar();
+      },
+      [onChange],
     );
 
     const {
@@ -60,7 +68,7 @@ export const DatePicker = JSX<DatePickerProps>(
       onShowCalendar: setValue,
       selectedYear,
       selectedMonth,
-      showCalendar,
+      showCalendar: isCalendarVisible,
       onChange,
       value,
     });
@@ -80,7 +88,7 @@ export const DatePicker = JSX<DatePickerProps>(
             setSelectedMonth,
             setSelectedYear,
           })}
-          {showCalendar && !disabled ? (
+          {isCalendarVisible && !disabled ? (
             <div
               className={style('absolute bg-white z-20 select-none', {
                 'bottom-full': spaceAbove,
@@ -110,10 +118,9 @@ export const DatePicker = JSX<DatePickerProps>(
                 today={value}
                 currentMonth={selectedMonth}
                 currentYear={selectedYear}
-                onDateSelect={onChange}
                 min={minDate}
                 max={maxDate}
-                setValue={setValue}
+                onDateSelect={handleDateSelect}
               />
             </div>
           ) : null}

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

@@ -12,7 +12,12 @@ export interface DialogProps {
 }
 
 export const Dialog = JSX<DialogProps>(({ className, head, children, onClose, onClick }) => (
-  <div className={style('relative bg-white pt-0 p-lg', className)} role="dialog" onClick={onClick}>
+  <div
+    className={style('relative bg-white pt-0 p-lg', className)}
+    role="dialog"
+    title="Диалог"
+    onClick={onClick}
+  >
     <div className="sticky py-xl top-0 bg-white z-10">
       <CloseButton className="absolute top-0 right-0" onClose={onClose} />
       <div className="container">{head}</div>

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

@@ -19,7 +19,7 @@ export const DialogManager = JSX(() => {
   }, [hasDialogs]);
 
   return hasDialogs ? (
-    <div className="fixed inset-0 z-50" role="dialog">
+    <div className="fixed inset-0 z-50">
       {dialogs.map(({ dialog, id }, i) => (
         <div
           key={String(id || i)}

package/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -6,15 +6,25 @@ import { ToggleIcon } from '../Icon/ToggleIcon';
 
 interface DefaultFoldButtonProps extends ButtonProps {
   isUnfolded?: boolean;
+  short?: boolean;
   label?: string;
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
-  ({ className, isUnfolded, label = isUnfolded ? 'Скрыть' : 'Развернуть', embedded, ...rest }) => (
+  ({
+    className,
+    isUnfolded,
+    short,
+    label = isUnfolded ? 'Скрыть' : 'Развернуть',
+    embedded,
+    ...rest
+  }) => (
     <Button
-      className={style({ 'text-h4': !embedded }, className)}
-      rounded={false}
+      className={style({ 'w-full': !short }, className)}
       embedded={embedded}
+      shape={short ? 'default' : 'square'}
+      role="tab"
+      aria-label="Кнопка сворачивающейся секции"
       {...rest}
     >
       <ButtonTitle>{label}</ButtonTitle>

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

@@ -7,7 +7,7 @@ export interface FoldableProps extends ARIAProps {
 }
 
 // TODO Не особо полезно, в итоге
-export const Foldable = JSX<FoldableProps>(({ className, role = 'group', children }) => (
+export const Foldable = JSX<FoldableProps>(({ className, role = 'tablist', children }) => (
   <div className={style(className)} role={role}>
     {children}
   </div>

package/src/ui-kit/Foldable/FoldableSection.tsx

@@ -1,37 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { style } from '../../utils/style';
 
 export interface FoldableSectionProps {
   className?: string;
   isUnfolded?: boolean;
 }
 
-export const FoldableSection = JSX<FoldableSectionProps>(
-  ({ className = '', isUnfolded, children }) => {
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    const childrenWrapperRef = useResizeObserver(
-      (childrenWrapperEl) => {
-        if (containerRef.current) {
-          containerRef.current.style.maxHeight = isUnfolded
-            ? `${childrenWrapperEl.scrollHeight}px`
-            : '';
-        }
-      },
-      [isUnfolded],
-    );
+export const FoldableSection = JSX<FoldableSectionProps>(({ className, isUnfolded, children }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const childrenWrapperRef = useResizeObserver(
+    (childrenWrapperEl) => {
+      if (containerRef.current) {
+        containerRef.current.style.maxHeight = isUnfolded
+          ? `${childrenWrapperEl.scrollHeight}px`
+          : '';
+      }
+    },
+    [isUnfolded],
+  );
 
-    return (
-      <div
-        ref={containerRef}
-        className={`transition-max-h duration-300 overflow-hidden ${
-          containerRef.current || !isUnfolded ? 'max-h-0' : ''
-        } `}
-      >
-        <div className={className} ref={childrenWrapperRef}>
-          {children}
-        </div>
+  return (
+    <div
+      ref={containerRef}
+      className={style('transition-max-h duration-300 overflow-hidden', {
+        'max-h-0': Boolean(containerRef.current || !isUnfolded),
+      })}
+      role="tabpanel"
+      aria-label="Сворачивающаяся секция"
+    >
+      <div className={className} ref={childrenWrapperRef}>
+        {children}
       </div>
-    );
-  },
-);
+    </div>
+  );
+});

package/src/ui-kit/Icon/RoundedIcon.tsx

@@ -6,10 +6,11 @@ import { type IconBgVersion } from './IconProps';
 
 export interface RoundedIconProps extends Picture {
   iconBgVersion?: IconBgVersion;
-  defaultIconSize?: number;
 }
 
-const iconBgStyles: Record<IconBgVersion, string> = {
+const DEFAULT_ICON_SIZE = 44;
+
+const iconStyleMap: Record<IconBgVersion, string> = {
   '': 'bg-main-divider group-data-secondary:bg-white/30',
   primary: 'bg-main-divider',
   secondary: 'bg-secondary-light',
@@ -17,22 +18,20 @@ const iconBgStyles: Record<IconBgVersion, string> = {
 };
 
 export const RoundedIcon = JSX<RoundedIconProps>(
-  ({ className, defaultIconSize = 44, iconBgVersion = 'primary', size, icon, ...rest }) => {
-    const widthAndHeight = String(size?.width || defaultIconSize);
+  ({ className, iconBgVersion = 'primary', size, icon, ...rest }) => {
+    const width = `${size?.width ?? DEFAULT_ICON_SIZE}px`;
 
     return icon ? (
       <div
-        style={{
-          width: `${widthAndHeight}px`,
-          height: `${widthAndHeight}px`,
-        }}
         className={style(
           'rounded-icon object-fit flex justify-center items-center',
-          iconBgStyles[iconBgVersion],
+          iconStyleMap[iconBgVersion],
           className,
         )}
+        style={{ width, height: width }}
+        role="figure"
       >
-        <Icon {...rest} width="54%" name={icon} />
+        <Icon name={icon} width="54%" {...rest} />
       </div>
     ) : null;
   },

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

@@ -2,26 +2,22 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type IconVersion } from '../../model/IconVersion';
 import { Icon } from '../Icon/Icon';
 import { type IconName } from '../Icon/IconProps';
-import { LinkButton } from '../LinkButton/LinkButton';
-import { type LinkButtonProps } from '../LinkButton/LinkButtonProps';
 import { RichText } from '../RichText/RichText';
 
 export interface InfoCardProps {
   __html?: string;
   icon?: IconName;
   iconVersion?: IconVersion;
-  link?: LinkButtonProps;
 }
 
 export const InfoCard = JSX<InfoCardProps>(
-  ({ __html, icon = 'InfoCircleIcon', iconVersion = 'black', link }) => (
+  ({ __html, icon = 'InfoCircleIcon', iconVersion = 'black' }) => (
     <div className="flex flex-row items-center w-full min-h-14 bg-main-gray rounded-lg gap-m p-m">
       <div className="rounded-full bg-white p-xs">
         <Icon name={icon} width="24" height="24" iconVersion={iconVersion} />
       </div>
       <div className="">
         <RichText __html={__html} />
-        {link?.text ? <LinkButton className="text-primary-main">{link.text}</LinkButton> : null}
       </div>
     </div>
   ),

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;