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

package/src/components/TariffsTable/EmbeddableCellData.mobile.tsx

@@ -1,10 +1,11 @@
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 import type { LabelDescriptionCell } from './TariffsTableContent';
+import type { ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
 
 export type EmbeddableCellDataType =
   | ButtonContent
@@ -12,7 +13,7 @@ export type EmbeddableCellDataType =
   | ImageContent
   | ListProps;
 
-const renderButtonsCellData = ({ buttons }: ButtonContent) =>
+const renderButtonsCellData = ({ buttons }: ButtonsSectionContent) =>
   renderButtonsSection(buttons, {
     className: 'mt-3',
     buttonClassName: 'w-12 h-12',

package/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -11,6 +11,7 @@ import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTabl
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 import type { LabelDescriptionCell } from './TariffsTableContent';
+import type { ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
 
 export type EmbeddableCellDataType =
   | LabelDescriptionCell
@@ -24,7 +25,7 @@ interface TableCellDataProps extends TableInnerButtonProps {
   displayTable: (props: TariffsTableInnerContent) => void;
 }
 
-const renderButtonsCellData = ({ buttons }: ButtonContent) => renderButtonsSection(buttons);
+const renderButtonsCellData = ({ buttons }: ButtonsSectionContent) => renderButtonsSection(buttons);
 
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
   const labelClassName = `text-h6 m-0 ${description ? 'mb-1' : ''}`;

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -3,10 +3,10 @@ import type { DescriptionProps, LabelProps, TitleProps } from '../../model/Headl
 import type { UniBlockContent, UniBlockProps } from '../../model/JSXBlock';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { IconProps } from '../../model/Picture';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import type { ListProps } from '../../ui-kit/List/ListProps';
+import type { ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
 
 /**
  * @hidden
@@ -56,7 +56,7 @@ export type ImageCellDef = ImageContent & {
 /**
  * @title Кнопки
  */
-export type ButtonsCellDef = ButtonContent & {
+export type ButtonsCellDef = ButtonsSectionContent & {
   /** @default Buttons */
   tableCellType: 'Buttons';
 };

package/src/hooks/useForm.ts

@@ -25,6 +25,7 @@ export const useForm = <FormState extends Record<string, any>>(
   {
     isDirty: boolean;
     field: FormFieldRegisterer<FormState>;
+    update: (_: FormState) => void;
     reset: () => void;
     onSubmit: (e: PreventableEvent) => void;
   },
@@ -60,6 +61,11 @@ export const useForm = <FormState extends Record<string, any>>(
     [formState, isDirtyForm, dirtyFieldsMap],
   );
 
+  const update = useCallback((_: FormState) => {
+    setFormState(_);
+    setDirtyFieldsMap(_);
+  }, []);
+
   const reset = useCallback(() => {
     setFormState(initialState);
     setDirtyForm(false);
@@ -81,6 +87,7 @@ export const useForm = <FormState extends Record<string, any>>(
     {
       isDirty: isDirtyForm || Object.values(dirtyFieldsMap).some(Boolean),
       field,
+      update,
       reset,
       onSubmit: handleSubmit,
     },

package/src/hooks/useLink.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from '../model/LinkProps';
-import { useDialog } from '../ui-kit/Dialog/useDialog';
+import { useDialogManager } from '../ui-kit/DialogManager/useDialogManager';
 import type { PreventableEvent } from '../ui-kit/PreventableEvent';
 import { adjustHref } from '../utils/adjustHref';
 import { isLocalURL } from '../utils/url';
@@ -19,7 +19,7 @@ export function useLink(params: UseLinkParams = {}) {
   const { isRemote, basePath } = params;
 
   const router = useRouter();
-  const { close } = useDialog();
+  const { closeAll } = useDialogManager();
 
   return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => ({
     ...props,
@@ -37,7 +37,7 @@ export function useLink(params: UseLinkParams = {}) {
         return;
       }
 
-      close();
+      closeAll();
 
       // Client routing
       ev?.preventDefault();

package/src/hooks/useList.ts

@@ -0,0 +1,24 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useList<T>(initialList: T[] = []): [
+  T[],
+  {
+    setList: (_: T[]) => void;
+    push: (item: T) => void;
+    pop: () => void;
+    remove: (item: T) => void;
+    clear: () => void;
+  },
+] {
+  const [list, setList] = useState<T[]>(initialList);
+
+  const push = useCallback((item: T) => setList((_) => [..._, item]), []);
+  const pop = useCallback(() => setList((_) => _.slice(0, -1)), []);
+  const remove = useCallback(
+    (item: T) => setList((_) => _.filter((currentItem) => currentItem !== item)),
+    [],
+  );
+  const clear = useCallback(() => setList([]), []);
+
+  return [list, { setList, push, pop, remove, clear }];
+}

package/src/hooks/useLocation.ts

@@ -1,6 +1,8 @@
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { defaultEventBus } from '../EventBus/defaultEventBus';
+import { useLatestEvent } from '../EventBus/useLatestEvent';
 import { fetchJSONUnsafe } from '../utils/fetchJSON';
-import { useCachedAsyncData } from './useCachedAsyncData';
 
 const REGION_URL = '/api/v1/region';
 
@@ -10,42 +12,46 @@ export interface RegionData {
   name?: string;
 }
 
-interface LocationStorageData {
-  manual?: boolean;
-  region: RegionData;
-}
+const LOCATION_STORAGE_KEY = 'location';
 
-export function useLocation(
-  defaultLocation = 'Москва',
-): [RegionData, (newLocation: RegionData) => void] {
-  const currentLocation = getLocalStorageLocation();
-  const [location, setLocation] = useState<RegionData>(
-    currentLocation?.region ?? { name: defaultLocation },
+export function useLocation(defaultLocation = 'Москва'): [RegionData, (_: RegionData) => void] {
+  const [currentLocation, fireCurrentLocation] = useLatestEvent(
+    defaultEventBus,
+    'location',
+    restoreLocation() ?? { name: defaultLocation },
   );
-  const { data } = useCachedAsyncData<RegionData>(REGION_URL, fetchJSONUnsafe);
 
+  const selectCurrentLocation = useCallback((_: RegionData) => {
+    storeLocation(_);
+    fireCurrentLocation(_);
+  }, []);
+
+  const { data } = useAsyncData<RegionData>(REGION_URL, fetchJSONUnsafe);
   useEffect(() => {
-    setLocation(
-      currentLocation?.region && currentLocation?.manual
-        ? currentLocation.region
-        : data || { name: defaultLocation },
-    );
+    if (data && !hasStoredLocation()) {
+      fireCurrentLocation(data);
+    }
   }, [data]);
 
-  const onChangeLocation = useCallback((region: RegionData) => {
-    globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
-    setLocation(region);
-  }, []);
-
-  return [location, onChangeLocation];
+  return [currentLocation ?? { name: defaultLocation }, selectCurrentLocation];
 }
 
-const getLocalStorageLocation = (): LocationStorageData | null => {
-  const localStorageLocation = globalThis.localStorage?.getItem('location');
+const hasStoredLocation = () => Boolean(globalThis.localStorage?.getItem(LOCATION_STORAGE_KEY));
 
+const restoreLocation = (): RegionData | null => {
   try {
-    return localStorageLocation ? JSON.parse(localStorageLocation) : null;
-  } catch (_) {
+    const data = globalThis.localStorage?.getItem(LOCATION_STORAGE_KEY);
+
+    return data && JSON.parse(data);
+  } catch (ex) {
     return null;
   }
 };
+
+const storeLocation = (_: RegionData) => {
+  try {
+    globalThis.localStorage?.setItem(LOCATION_STORAGE_KEY, JSON.stringify(_));
+  } catch (ex) {
+    // Do nothing
+  }
+};

package/src/hooks/useSWRResource.ts

@@ -4,10 +4,15 @@ import { fetchJSONUnsafe } from '../utils/fetchJSON';
 
 const EMPTY_VALUE = {};
 
-export function useSWRResource<Data>(filename: string, fallback: Fallback = {}): Data {
-  const { data } = useAsyncData<Data>(`/wcms-resources/${filename}.json`, fetchJSONUnsafe, {
-    fallback,
-  });
+export function useSWRResource<Data>(
+  filename: string | null | undefined,
+  fallback: Fallback = EMPTY_VALUE,
+): Data {
+  const { data } = useAsyncData<Data, any, string | null>(
+    filename ? `/wcms-resources/${filename}.json` : null,
+    fetchJSONUnsafe,
+    { fallback },
+  );
 
   return data || (EMPTY_VALUE as Data);
 }

package/src/icons/ArrowDownSolidIcon.svg

@@ -1 +1 @@
-<svg title="Стрелка сплошная 'Вниз'" isInverse="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 25"><path fill="#C8CCD0" d="M6.293 9.457a1 1 0 0 1 1.414 0L12 13.75l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 0-1.414Z"/></svg>
+<svg title="Стрелка сплошная 'Вниз'" isInverse="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 25"><path fill="currentColor" d="M6.293 9.457a1 1 0 0 1 1.414 0L12 13.75l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 0-1.414Z"/></svg>

package/src/icons/ArrowUpSolidIcon.svg

@@ -1 +1 @@
-<svg title="Стрелка сплошная 'Вверх'" isInverse="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 25"><path fill="#C8CCD0" d="M17.707 14.871a1 1 0 0 1-1.414 0L12 10.578l-4.293 4.293a1 1 0 0 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414Z"/></svg>
+<svg title="Стрелка сплошная 'Вверх'" isInverse="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 25"><path fill="currentColor" d="M17.707 14.871a1 1 0 0 1-1.414 0L12 10.578l-4.293 4.293a1 1 0 0 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414Z"/></svg>

package/src/icons/IconName.ts

@@ -9,7 +9,7 @@ export const IconsWithoutInversion = new Set([
   'BriefcaseIcon',
   'CardWithGemIcon',
   'CarIcon',
-  'ChevronLeft',
+  'ChevronLeftIcon',
   'CinemaIcon',
   'ClientIcon',
   'ClockIcon',
@@ -80,7 +80,7 @@ export enum IconMap {
   CardWithGemIcon = 'CardWithGemIcon',
   CarIcon = 'CarIcon',
   ChartSquareIcon = 'ChartSquareIcon',
-  ChevronLeft = 'ChevronLeft',
+  ChevronLeftIcon = 'ChevronLeftIcon',
   CinemaIcon = 'CinemaIcon',
   ClientIcon = 'ClientIcon',
   ClockIcon = 'ClockIcon',
@@ -195,7 +195,7 @@ export enum IconTitleMap {
   CardWithGemIcon = 'Карта с драгоценностями',
   CarIcon = 'Машина',
   ChartSquareIcon = 'Деньги внутри кошелька',
-  ChevronLeft = "Стрелка 'Влево'",
+  ChevronLeftIcon = "Стрелка 'Влево'",
   CinemaIcon = 'Кинотеатр',
   ClientIcon = 'Клиент',
   ClockIcon = 'Часы',
@@ -319,7 +319,7 @@ export type IconName =
   | 'CardWithGemIcon'
   | 'CarIcon'
   | 'ChartSquareIcon'
-  | 'ChevronLeft'
+  | 'ChevronLeftIcon'
   | 'CinemaIcon'
   | 'ClientIcon'
   | 'ClockIcon'

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/BaseFiltration/BaseFiltrationInner.tsx

@@ -35,14 +35,14 @@ export const BaseFiltrationInner = JSX<BaseFiltrationInnerProps>(
           {notFound ? renderNotFound(notFound) : null}
         </div>
         <div className={style(blocksToRender.length ? '' : 'hidden')}>
-          <div className={style('mb-1', resultsGridStyle)}>
+          <div className={style('mb-2xs', resultsGridStyle)}>
             {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
           </div>
           <Foldable
             renderFoldableSection={({ isUnfolded }) => {
               return (
                 <FoldableSection
-                  className={style(resultsGridStyle, isUnfolded ? 'mb-1' : '')}
+                  className={style(resultsGridStyle, isUnfolded ? 'mb-2xs' : '')}
                   isUnfolded={isUnfolded}
                 >
                   {renderBlocksList(hiddenBlocks, { ...rest.options, parent: block })}

package/src/ui-kit/BaseFiltration/renderFiltrationForm.tsx

@@ -29,14 +29,14 @@ export const renderFiltrationForm = ({
   resetButton,
   children,
 }: RenderFiltrationFormProps) => (
-  <form className="flex justify-between bg-white p-9 mb-1">
-    <div className="flex gap-11">
+  <form className="flex justify-between bg-white p-4xl mb-2xs">
+    <div className="flex gap-5xl">
       {children}
       {Object.entries(filtrationSchema).map(renderFormItem(field))}
     </div>
     {resetButton ? (
       <div>
-        <Button className="w-72 ml-3" onClick={reset} {...resetButton} />
+        <Button className="w-72 ml-s" onClick={reset} {...resetButton} />
       </div>
     ) : null}
   </form>
@@ -63,7 +63,7 @@ const renderCheckboxes = (key: string, field: FormFieldRegisterer<any>) => (item
   return (
     <div key={key}>
       {item?.title ? (
-        <div className="mb-4">
+        <div className="mb-m">
           <Text size="text-m" font="font-light" color="text-secondary-text">
             {item.title}
           </Text>

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/BaseTile/BaseTile.tsx

@@ -42,7 +42,7 @@ export const BaseTile = JSX<BaseTileProps>(
       )}
     >
       {title ? <div className="relative">{title}</div> : null}
-      <div className="grow relative flex flex-wrap @xl:flex-nowrap justify-between items-stretch gap-3xl">
+      <div className="grow relative flex flex-wrap @xl:flex-nowrap justify-around @xl:justify-between items-stretch gap-3xl">
         {renderImageContainer(leftImage, { imageAlign })}
         <div
           className={style(

package/src/ui-kit/BenefitsList/DefaultBenefitsList.tsx

@@ -9,19 +9,24 @@ const MAX_BENEFITS_LEN_DEVIATION = 16;
 
 const benefitLength = (_: ComplexBenefitContent) =>
   _.type === 'rte'
-    ? _.__html?.length || 0
-    : Math.max(_.label?.length || 0, _.description?.length || 0);
+    ? _?.__html?.length || 0
+    : Math.max(_?.label?.length || 0, _?.description?.length || 0);
 
 const isDistortedBenefits = (benefits: ComplexBenefitContent[]) =>
   deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
 
+const hasIcon = (_: ComplexBenefitContent) =>
+  _ && 'icon' in _ && _.icon && (_.icon.icon || _.icon.src);
+
+const isTextualBenefits = (benefits: ComplexBenefitContent[]) => !benefits.some(hasIcon);
+
 export const DefaultBenefitsList = JSX<BenefitsListProps>(
   ({ className, benefitsVersion = 'normal', benefits }) =>
     benefits?.length ? (
       <div
         className={style(
           'flex gap-x-m gap-y-s',
-          isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap',
+          isDistortedBenefits(benefits) || isTextualBenefits(benefits) ? 'flex-col' : 'flex-wrap',
           className,
         )}
       >

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;