@redneckz/wildless-cms-uni-blocks 0.15.341 → 0.16.1

package/src/components/Header/HeaderTop.tsx

@@ -4,80 +4,62 @@ import { useRouter } from '../../hooks/useRouter';
 import { type BgColorVersion } from '../../model/BgColorVersion';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type LogoType } from '../../model/LogoType';
-import { projectSettings } from '../../ProjectSettings';
-import { Img } from '../../ui-kit/Img/Img';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import { Logo } from '../../ui-kit/Logo/Logo';
-import { style } from '../../utils/style';
+import { type InternetButtonProps } from './HeaderProps';
+import { InternetBankButton } from './InternetBankButton';
 
 export interface HeaderTopProps {
   bgColor?: BgColorVersion;
   logo?: LogoType;
   alwaysShowLogo?: boolean;
-  internetBankUrl?: string;
+  backwardButton?: string;
   version?: BlockVersion;
+  internetBankButton?: InternetButtonProps;
 }
 
-const BUTTON_STYLE = {
-  default: 'px-5 bg-main-divider rounded hover:text-primary-main',
-  transparent: 'text-white hover:text-primary-hover',
-};
-
 export const HeaderTop = JSX<HeaderTopProps>(
-  ({ bgColor, logo, alwaysShowLogo, internetBankUrl, version }) => {
+  ({ bgColor, logo, alwaysShowLogo, internetBankButton, version, backwardButton }) => {
     const router = useRouter();
-    const isRootLocation = projectSettings.BASE_PATH?.startsWith(router.pathname);
+    const isRootLocation = router.pathname === '/';
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { dataFooter, dataHeader, ...logoProps } = logo ?? {};
+
     const onClick = useCallback(() => {
       router.back();
-    }, []);
+    }, [router]);
 
     return (
       <div className="flex items-center justify-between w-full">
         {alwaysShowLogo || isRootLocation ? (
           <div>
-            <Logo className="my-2xs" bgColor={bgColor} logo={logo} />
+            <Logo
+              className="my-2xs"
+              bgColor={bgColor}
+              logo={logoProps}
+              data={dataHeader}
+              showTitle={false}
+            />
           </div>
         ) : (
-          renderBackButton(onClick)
+          renderBackButton(onClick, backwardButton)
         )}
-        {internetBankUrl ? (
-          <div>
-            <LinkButton
-              href={internetBankUrl}
-              ariaLabel="Войти"
-              target="_blank"
-              className={style(
-                'p-s text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
-                BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
-              )}
-            >
-              Войти
-            </LinkButton>
-          </div>
-        ) : null}
+        <InternetBankButton version={version} {...internetBankButton} />
       </div>
     );
   },
 );
 
-const renderBackButton = (onClick: () => void) => (
-  <div>
+const renderBackButton = (onClick: () => void, text?: string) =>
+  text ? (
     <button
       className="flex items-center text-l my-2xs"
-      aria-label="Вернуться назад"
       onClick={onClick}
       type="button"
+      aria-label="Кнопка назад"
     >
-      <Img
-        className="w-6 h-6"
-        image={{
-          icon: 'ChevronLeftIcon',
-          iconVersion: 'black',
-        }}
-        width="24"
-        height="24"
-      />
-      Вернуться назад
+      <Icon name="ChevronLeftIcon" iconVersion="black" width="24" height="24" />
+      {text}
     </button>
-  </div>
-);
+  ) : null;

package/src/components/Header/HeaderTopMenu.tsx

@@ -0,0 +1,107 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type SearchHeaderProps } from '../../data/CommonData';
+import { type HeaderData } from '../../data/HeaderData';
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import { type TopMenuItemProps } from '../../data/NavigationData';
+import { type IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
+import { type BgColorVersion } from '../../model/BgColorVersion';
+import { type BlockVersion } from '../../model/BlockVersion';
+import { type LogoType } from '../../model/LogoType';
+import { Logo } from '../../ui-kit/Logo/Logo';
+import { DropdownMenu } from './DropdownMenu';
+import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
+import { HeaderTopMenuItem } from './HeaderTopMenuItem';
+
+export interface HeaderMenuProps {
+  className?: string;
+  navigationItems?: TopMenuItemProps[];
+  activeTopItem?: TopMenuItemProps;
+  dropdownMenuAriaLabel?: string;
+  version?: BlockVersion;
+  search?: SearchHeaderProps;
+  headerData?: JSONRefObject & HeaderData;
+  bgColor?: BgColorVersion;
+  logo?: LogoType;
+}
+
+export const HeaderTopMenu = JSX<HeaderMenuProps>(
+  ({
+    navigationItems = [],
+    activeTopItem,
+    dropdownMenuAriaLabel,
+    version,
+    headerData,
+    search,
+    bgColor,
+    logo,
+  }) => {
+    const [visibleItemsCount, setVisibleItemsCount] = useState(navigationItems.length);
+
+    const dropDownMenuItems = navigationItems.slice(visibleItemsCount);
+
+    const topItemsListRef = useRef<HTMLDivElement | null>(null);
+    const observerOptions: IntersectionObserverOptions = { rootRef: topItemsListRef };
+    const topItemsVisibilityHandlers = useMemo(
+      () =>
+        navigationItems.map((_, index) => (isIntersecting: boolean) => {
+          setVisibleItemsCount(
+            isIntersecting
+              ? handleIntersectionActivation(index)
+              : handleIntersectionDeactivation(index),
+          );
+        }),
+      [navigationItems],
+    );
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { dataFooter, dataHeader, ...logoProps } = logo ?? {};
+
+    return (
+      <div className="flex items-center justify-between">
+        <Logo
+          className="mr-3xl"
+          bgColor={bgColor}
+          logo={logoProps}
+          data={dataHeader}
+          showTitle={false}
+        />
+        <div
+          ref={topItemsListRef}
+          className="overflow-hidden min-w-[160px] pb-xs mt-xs"
+          role="menu"
+        >
+          {navigationItems.map((_, i) => (
+            <HeaderTopMenuItem
+              key={String(i)}
+              className={visibleItemsCount - 1 < i ? 'invisible' : ''}
+              active={_ === activeTopItem}
+              observerOptions={observerOptions}
+              onVisibilityChange={topItemsVisibilityHandlers[i]}
+              data={_.dataHeader}
+              {..._}
+            />
+          ))}
+        </div>
+        {dropDownMenuItems.length ? (
+          <DropdownMenu
+            className="mx-xs"
+            items={dropDownMenuItems}
+            activeItem={activeTopItem}
+            ariaLabel={dropdownMenuAriaLabel}
+          />
+        ) : null}
+        <HeaderSecondaryMenu
+          version={version}
+          className="ml-auto"
+          search={search}
+          navigationItems={navigationItems}
+          {...headerData}
+        />
+      </div>
+    );
+  },
+);
+
+const handleIntersectionActivation = (index: number) => (prev: number) => Math.max(prev, index + 1);
+const handleIntersectionDeactivation = (index: number) => (prev: number) => Math.min(prev, index);

package/src/components/Header/HeaderTopMenuItem.tsx

@@ -0,0 +1,40 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import {
+  useIntersectionObserver,
+  type IntersectionObserverOptions,
+} from '../../hooks/useIntersectionObserver';
+import { type LinkProps } from '../../model/LinkProps';
+import { TopItem } from '../../ui-kit/TopItem/TopItem';
+
+export interface HeaderTopMenuItemProps extends LinkProps {
+  className?: string;
+  active?: boolean;
+  observerOptions?: IntersectionObserverOptions;
+  onVisibilityChange?: (isIntersecting: boolean) => void;
+}
+
+export const HeaderTopMenuItem = JSX<HeaderTopMenuItemProps>(
+  ({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
+    const observerCallback = useCallback(
+      (entries: IntersectionObserverEntry[]) => {
+        if (!entries.length || !onVisibilityChange) {
+          return;
+        }
+
+        // Assumption about entries order (by time)
+        const entry = entries[entries.length - 1];
+
+        onVisibilityChange(entry.isIntersecting);
+      },
+      [onVisibilityChange],
+    );
+    const ref = useIntersectionObserver<HTMLSpanElement>(observerCallback, observerOptions);
+
+    return (
+      <span ref={ref} className={className} role="menuitem">
+        <TopItem {...rest}>{children}</TopItem>
+      </span>
+    );
+  },
+);

package/src/components/Header/InternetBankButton.tsx

@@ -1,30 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type BlockVersion } from '../../model/BlockVersion';
+import { useMobileMode } from '../../hooks/useMobileMode';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { style } from '../../utils/style';
-
-interface InternetBankButtonProps {
-  version?: BlockVersion;
-  internetBankUrl?: string;
-}
+import { type InternetButtonProps } from './HeaderProps';
 
 const BUTTON_STYLE = {
-  default: 'px-lg bg-main-divider rounded hover:text-primary-main',
-  transparent: 'text-white hover:text-primary-hover',
+  default: 'bg-main-divider text-primary-main rounded hover:text-primary-main',
+  transparent: 'backdrop-opacity-30 bg-white/30 hover:text-primary-hover text-white',
 };
 
-export const InternetBankButton = JSX<InternetBankButtonProps>(({ version, internetBankUrl }) =>
-  internetBankUrl ? (
-    <LinkButton
-      href={internetBankUrl}
-      ariaLabel="Интернет-банк"
-      target="_blank"
-      className={style(
-        'py-s ml-s text-l font-light whitespace-nowrap hover:text-primary-main',
-        BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
-      )}
-    >
-      Интернет-банк
-    </LinkButton>
-  ) : null,
+export const InternetBankButton = JSX<InternetButtonProps>(
+  ({ version, text, mobileText, ...rest }) => {
+    const isMobileMode = useMobileMode();
+
+    const buttonText = isMobileMode ? mobileText : text;
+
+    return buttonText ? (
+      <LinkButton
+        className={style(
+          'py-s px-lg font-light whitespace-nowrap',
+          BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
+        )}
+        {...rest}
+      >
+        {buttonText}
+      </LinkButton>
+    ) : null;
+  },
 );

package/src/components/Headline/Headline.tsx

@@ -28,7 +28,7 @@ export const Headline = JSX<HeadlineProps>(
 
     return (
       <BlockWrapper
-        className={style(isEmbedded ? '@container-normal' : '', className)}
+        className={style({ '@container-normal': isEmbedded }, className)}
         defaultPadding={isEmbedded ? '' : 'p-6xl'}
         version={version}
         isTheme={isTheme}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.example.json

@@ -74,8 +74,7 @@
                 "height": 70
               },
               "icon": "ActualBalanceIcon"
-            },
-            "href": ""
+            }
           }
         ]
       }

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -73,7 +73,7 @@ function renderNavButton({ title, i, isActive, onClick }: NavButtonProps) {
       type="button"
       key={String(i)}
       onClick={onClick}
-      aria-label={title}
+      aria-label={`Кнопка ${title}`}
       className={`box-border px-m py-s text-m font-light ${btnClassName}`}
     >
       {title}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -43,7 +43,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
 
     return (
       <section role="listitem" className={`min-w-full text-center ${className}`}>
-        <div className="relative overflow-hidden">
+        <div className="relative overflow-hidden" aria-label="Страховые программы">
           {galleryLength
             ? renderGallery({
                 activeIndex,

package/src/components/InvestmentInfo/InvestmentInfo.example.json

@@ -2,7 +2,7 @@
   "content": {
     "version": "primary",
     "padding": "",
-    "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
+    "__html": "<ul><li>Пункт 1</li><li>Пункт 2</li><li>Пункт 3</li></ul>",
     "isDotted": true,
     "investmentZeroColumn": {
       "title": "Название 1"

package/src/components/InvestmentInfo/InvestmentInfo.fixture.tsx

@@ -4,11 +4,13 @@ import { InvestmentInfo } from './InvestmentInfo';
 import { type InvestmentInfoContent } from './InvestmentInfoContent';
 
 export const INVESTMENT_INFO: InvestmentInfoContent = {
-  items: [
-    'Пример с ежегодным взносом 400 000 ₽',
-    'Срок использования ИИС вы определяете сами. Но для получения налоговых вычетов он должен быть открыт не менее 3 лет',
-    'Вы можете возвращать до 52 000 ₽ каждый год',
-  ],
+  __html: `
+    <ul>
+      <li>Пример с ежегодным взносом 400 000 ₽</li>
+      <li>Срок использования ИИС вы определяете сами. Но для получения налоговых вычетов он должен быть открыт не менее 3 лет</li>
+      <li>Вы можете возвращать до 52 000 ₽ каждый год</li>
+    </ul>
+  `,
   investmentZeroColumn: {
     title: 'Открытие ИИС',
   },

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { List } from '../../ui-kit/List/List';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { joinList } from '../../utils/joinList';
@@ -33,7 +33,7 @@ export interface InvestmentInfoProps extends InvestmentInfoContent, UniBlockProp
 export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
   const {
     className = '',
-    items,
+    __html,
     isDotted,
     investmentZeroColumn,
     investmentColumns,
@@ -59,9 +59,10 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
             </div>
           </div>
         ) : null}
-
-        {items?.length ? (
-          <List className="max-w-[657px]" items={items} isDotted={isDotted} listItemSize="M" />
+        {__html ? (
+          <div className="max-w-2xl font-light text-base">
+            <RichText __html={__html} isDotted={isDotted} itemSize="list-s" />
+          </div>
         ) : null}
       </div>
     </BlockWrapper>
@@ -84,7 +85,7 @@ const renderInvestmentColumn = (
       {column.cells?.length ? (
         <div
           className={`w-full ${
-            isLastColumn ? 'border-4 border-green-more-dark p-2xs min-w-72' : ''
+            isLastColumn ? 'border-4 border-green-more-dark p-1.5 min-w-72' : ''
           }`}
         >
           {column.cells.reverse().map(renderInvestmentCell)}
@@ -123,7 +124,7 @@ const renderInvestmentCell = (cell: InvestmentCell, i: number) => {
 
 const renderInvestmentColumnTitle = (column: InvestmentColumn | InvestmentZeroColumn, i: number) =>
   column?.title ? (
-    <div key={`title_${i}`} className={`flex-1 max-w-[180px] text-center px-xs last:pr-3xl`}>
+    <div key={`title_${i}`} className="flex-1 max-w-44 text-center px-xs last:pr-4xl last:max-w-52">
       {column.title}
     </div>
   ) : null;

package/src/components/InvestmentInfo/InvestmentInfo.ui.json

@@ -1,5 +1,9 @@
 {
-  "content": {},
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    }
+  },
   "style": {
     "ui:options": {
       "minCols": 12,

package/src/components/InvestmentInfo/InvestmentInfoContent.ts

@@ -1,6 +1,6 @@
 import { type BulletsProps } from '../../model/Bullets';
 import { type TextProps, type TitleProps } from '../../model/HeadlineType';
-import { type ListContent } from '../../ui-kit/List/ListContent';
+import { type RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
 /**
@@ -42,7 +42,7 @@ export type InvestmentColumn = TitleProps & {
  * @title Блок инвестиций
  */
 export type InvestmentInfoContent = UniBlockContent &
-  ListContent &
+  RichTextProps &
   BulletsProps & {
     /** @title Элемент данных 1 */
     investmentZeroColumn?: InvestmentZeroColumn;

package/src/components/LinkDocs/LinkDocs.fixture.tsx

@@ -1,4 +1,5 @@
 import '../../setup-fixture';
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
 
 import { LinkDocs } from './LinkDocs';
 import { linkDocsContentExample } from './linkDocsContentExample';
@@ -7,11 +8,13 @@ export default {
   'two columns (default)': (
     <div className="container grid grid-cols-12">
       <LinkDocs className="col-span-12" {...linkDocsContentExample} />
+      <DialogManager />
     </div>
   ),
   'one column': (
     <div className="container grid grid-cols-12">
       <LinkDocs className="col-span-12" {...linkDocsContentExample} columnsMode="single" />
+      <DialogManager />
     </div>
   ),
   'custom icon': (
@@ -21,11 +24,13 @@ export default {
         {...linkDocsContentExample}
         icon={{ src: 'GlassIcon.svg', iconVersion: 'normal', size: { width: 24 } }}
       />
+      <DialogManager />
     </div>
   ),
   'no icon': (
     <div className="container grid grid-cols-12">
       <LinkDocs className="col-span-12" {...linkDocsContentExample} icon={{ icon: '' }} />
+      <DialogManager />
     </div>
   ),
 };

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,16 +1,20 @@
-import { JSX } from '@redneckz/uni-jsx';
 import { useRouter, type Router } from '../../hooks/useRouter';
 import { type Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Img } from '../../ui-kit/Img/Img';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { adjustHref } from '../../utils/adjustHref';
-import { formatBytes } from '../../utils/formatBytes';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import { LinkDocItem } from './LinkDocItem';
-import { type DocBlockDef, type LinkColumnsMode, type LinkDocsContent } from './LinkDocsContent';
-import { linkIconStyle } from './linkIconStyle';
+import {
+  type AttachmentDocDef,
+  type DocBlockDef,
+  type LinkColumnsMode,
+  type LinkDocDef,
+  type LinkDocsContent,
+} from './LinkDocsContent';
+import { renderDefaultItem } from './renderDefaultItem';
+import { ReportDialogButton } from './RepordDialogButton';
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
   double: 'sm:flex-wrap sm:flex-row',
@@ -19,7 +23,7 @@ const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
-export const LinkDocs = JSX<LinkDocsProps>(
+export const LinkDocs = UniBlock<LinkDocsProps>(
   ({
     className = '',
     title,
@@ -61,46 +65,35 @@ export const LinkDocs = JSX<LinkDocsProps>(
 
 const renderLinkDocItem =
   (router: Router, icon: Picture) => (docBlockDef: DocBlockDef, i: number) => {
-    if (docBlockDef?.docType === '') {
+    const docType = docBlockDef?.docType;
+
+    if (docType === '') {
       return null;
     }
 
-    const href = adjustHref(router)(
-      docBlockDef?.docType === 'Attachment' ? docBlockDef?.attachment?.src : docBlockDef?.href,
-    );
-
-    const fileSize =
-      docBlockDef?.docType === 'Attachment'
-        ? formatBytes(docBlockDef?.attachment?.fileSize || 0)
-        : docBlockDef?.fileSize;
-
-    const fileFormat =
-      docBlockDef?.docType === 'Attachment' ? getExtFromHref(href) : docBlockDef?.fileFormat;
+    if ('reportSource' in docBlockDef && docBlockDef?.reportSource?.__html) {
+      return renderModalItem(docBlockDef, i);
+    }
 
-    return (
-      <div key={String(i)} role="listitem">
-        <LinkDocItem
-          text={docBlockDef?.text}
-          target={docBlockDef?.target}
-          href={href}
-          fileFormat={fileFormat}
-          fileSize={fileSize}
-          icon={icon ? <Img className={linkIconStyle} image={icon} width="24" height="24" /> : null}
-          data={docBlockDef?.data}
-        />
-      </div>
-    );
+    return renderDefaultItem(router, icon)(docBlockDef, i);
   };
 
-const getExtFromHref = (href?: string) => {
-  if (!href) {
-    return '';
-  }
-
-  const index = href.lastIndexOf('.');
-  const regexp = new RegExp(/\/(.*)/);
-
-  const docFormat = index !== -1 ? href.substring(index + 1) : '';
+const renderModalItem = (props: LinkDocDef | AttachmentDocDef, i: number) => {
+  const commonProps = {
+    text: props.text,
+    target: props.target,
+    __html: props.reportSource?.__html,
+  };
 
-  return docFormat.includes('/') ? docFormat.replace(regexp, '') : docFormat;
+  return props.reportSource?.__html && props.text ? (
+    <div role="listitem" key={String(i)}>
+      <ReportDialogButton
+        {...commonProps}
+        href={isLinkDoc(props) ? props?.href : props?.attachment?.src}
+      />
+      <RichText __html={props?.__html} />
+    </div>
+  ) : null;
 };
+
+const isLinkDoc = (data: LinkDocDef | AttachmentDocDef): data is LinkDocDef => 'href' in data;

package/src/components/LinkDocs/LinkDocs.ui.json

@@ -12,6 +12,9 @@
           "fileSize": {
             "ui:widget": "hidden"
           }
+        },
+        "__html": {
+          "ui:widget": "html"
         }
       }
     }