@redneckz/wildless-cms-uni-blocks 0.3.70 → 0.3.71

package/mobile/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -11,7 +11,7 @@ export interface GroupBlocksProps extends GroupBlockContent, UniBlockProps {}
 
 export const GroupBlocksItem = JSX<GroupBlocksProps>(({ groupBlocks, context }) => {
   return (
-    <div className={'grid grid-cols-12 gap-2 box-border'}>
+    <div className="grid grid-cols-12 gap-2 box-border">
       {groupBlocks?.length ? groupBlocks.map(renderBlock(context)) : null}
     </div>
   );

package/mobile/src/components/Header/DropdownMenu.tsx

@@ -0,0 +1,72 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { LinkProps } from '../../model/LinkProps';
+import type { UniBlockProps } from '../../types';
+import type {
+  ContentPageContext,
+  HandlerDecorator,
+  Router,
+} from '../ContentPage/ContentPageContext';
+
+const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'bg-primary-text',
+  transparent: 'bg-white',
+};
+
+interface DropdownMenuProps extends UniBlockProps {
+  menuVisible: boolean;
+  toggleMenu: () => void;
+  menuItems: LinkProps[];
+  bgColor?: BgColorVersion;
+  context: ContentPageContext;
+}
+
+export const DropdownMenu = JSX<DropdownMenuProps>((props) => {
+  const { menuVisible, toggleMenu, menuItems, bgColor, context } = props;
+
+  const { useRouter, handlerDecorator } = context;
+
+  const router = useRouter();
+
+  return (
+    <div
+      className={`absolute w-52 -top-4 right-0 pt-4 z-40 ${
+        menuVisible ? 'bg-white rounded-md shadow-blue-gray/24' : ''
+      }`}
+    >
+      <button
+        className="flex justify-between items-center cursor-pointer h-6 ml-6"
+        onClick={toggleMenu}
+        aria-label={`${menuVisible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+      >
+        {Array(3).fill(bgColor).map(renderDot)}
+      </button>
+      <div
+        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`}
+        aria-hidden={!menuVisible}
+      >
+        {renderDotsSubMenuItems(menuItems, router, handlerDecorator)}
+      </div>
+    </div>
+  );
+});
+
+const renderDotsSubMenuItems = (
+  menuItems: LinkProps[],
+  router: Router,
+  handlerDecorator: HandlerDecorator | undefined,
+) =>
+  menuItems?.map((_) => (
+    <a
+      key={_.href}
+      {...useLink({ router, handlerDecorator }, _)}
+      className="text-base font-light pb-4 hover:text-primary-main"
+    >
+      {_.text}
+    </a>
+  ));
+
+const renderDot = (bgColor: BgColorVersion, i: number) => (
+  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
+);

package/mobile/src/components/Header/HeaderSubMenu.tsx

@@ -4,14 +4,8 @@ import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import { isSSR } from '../../utils/isSSR';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import { headerSubMenuObserver } from './HeaderSubMenuObserver';
-
-const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'bg-primary-text',
-  transparent: 'bg-white',
-};
+import { DropdownMenu } from './DropdownMenu';
 
 export interface HeaderSubMenuProps {
   context: ContentPageContext;
@@ -19,95 +13,59 @@ export interface HeaderSubMenuProps {
   bgColor?: BgColorVersion;
 }
 
-export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems, bgColor }) => {
-  const [subMenuIsShow, setHiddenMenuIsShow] = context.useState(false);
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
+  const [menuVisible, setMenuVisible] = context.useState(false);
   const router = context.useRouter();
-  const { handlerDecorator } = context;
+  const { handlerDecorator, IntersectionObserverTag } = context;
+
+  const [visibleItemsCount, setVisibleItemsCount] = context.useState<number>(subItems.length);
+  const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
-  setTimeout(() => {
-    if (isSSR()) {
+  const activeSubItem = findActiveSubItem(router)(subItems);
+  const toggleMenu = () => setMenuVisible(!menuVisible);
+
+  const observerCallback = (itemIndex: number) => (entries: IntersectionObserverEntry[]) => {
+    if (!entries.length) {
       return;
     }
 
-    const headerSubMenu = globalThis.document.querySelectorAll('[data-item-name=header-submenu]');
-    headerSubMenu.forEach((_) => {
-      headerSubMenuObserver?.observe(_);
-    });
-  }, 200);
-
-  const activeSubItem = findActiveSubItem(router)(subItems);
-  const toggleSubMenu = () => setHiddenMenuIsShow(!subMenuIsShow);
+    const entry = entries[0];
 
-  const subMenu = subItems?.map((_) => (
-    <HeaderItem
-      key={_.href}
-      className="mr-8"
-      active={_ === activeSubItem}
-      {...useLink({ router, handlerDecorator }, _)}
-      dataItemName="header-submenu"
-      bgColor={bgColor}
-    />
-  ));
+    if (entry.intersectionRatio < 1) {
+      setVisibleItemsCount((prev) => Math.min(prev, itemIndex));
+    } else {
+      setVisibleItemsCount((prev) => Math.max(prev, itemIndex + 1));
+    }
+  };
 
   return (
     <nav className="relative mt-5">
-      <div className="overflow-hidden whitespace-nowrap mr-52">{subMenu}</div>
-      {renderDotsSubMenu({
-        subMenuIsShow,
-        toggleSubMenu,
-        subItems,
-        bgColor,
-        router,
-        handlerDecorator,
-      })}
+      <div className="overflow-hidden whitespace-nowrap mr-52">
+        {subItems.map((_, i) => (
+          <IntersectionObserverTag
+            Tag="span"
+            observerCallback={observerCallback(i)}
+            observerOptions={{ threshold: 1 }}
+            key={String(i)}
+          >
+            <HeaderItem
+              className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
+              active={_ === activeSubItem}
+              {...useLink({ router, handlerDecorator }, _)}
+              bgColor={bgColor}
+            />
+          </IntersectionObserverTag>
+        ))}
+      </div>
+      {dropDownMenuItems.length ? (
+        <DropdownMenu
+          context={context}
+          menuVisible={menuVisible}
+          toggleMenu={toggleMenu}
+          menuItems={dropDownMenuItems}
+          bgColor={bgColor}
+        />
+      ) : null}
     </nav>
   );
 });
-
-// TODO: add types
-const renderDotsSubMenu = ({
-  subMenuIsShow,
-  toggleSubMenu,
-  subItems,
-  bgColor,
-  router,
-  handlerDecorator,
-}) => (
-  <div
-    className={`absolute w-52 -top-4 right-0 pt-4 z-40 ${
-      subMenuIsShow ? 'bg-white rounded-md shadow-blue-gray/24' : ''
-    }`}
-    data-header-submenu-visible="toggled"
-  >
-    <button
-      className="flex justify-between items-center cursor-pointer h-6 ml-6"
-      onClick={toggleSubMenu}
-      aria-label={`${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
-    >
-      {Array(3).fill(bgColor).map(renderDot)}
-    </button>
-    <div
-      className={`flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`}
-      aria-hidden={!subMenuIsShow}
-    >
-      {renderDotsSubMenuItems(subItems, router, handlerDecorator)}
-    </div>
-  </div>
-);
-
-// TODO: add types
-const renderDotsSubMenuItems = (subItems, router, handlerDecorator) =>
-  subItems?.map((_) => (
-    <a
-      key={_.href}
-      {...useLink({ router, handlerDecorator }, _)}
-      data-item-name="dots-header-submenu"
-      className="text-base font-light pb-4 hover:text-primary-main"
-    >
-      {_.text}
-    </a>
-  ));
-
-const renderDot = (bgColor: BgColorVersion, i: number) => (
-  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
-);

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps, FuncReturnVoid } from '../../types';
 import type { InsuranceAmountBlockTabs, cardItem } from './InsuranceAmountBlockContent';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {}
 
@@ -22,9 +22,6 @@ type InsuranceSlideProps = {
   onClick: FuncReturnVoid<MouseEvent>;
 };
 
-const arrowBtnStyle =
-  'absolute w-12 h-12 min-h-12 max-h-12 top-1 z-10 mt-[25px] bg-white rounded-full text-primary-text';
-
 export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
   ({ className = '', context, cards = [], anchor = null }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
@@ -52,27 +49,17 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
                 setActiveSlideIndex,
               })
             : null}
+          {renderArrows({
+            handler: [handlePrevClick, handleNextClick],
+            isShown: [showPrevButton, showNextButton],
+            btnClass: ['left-[50px]', 'right-[50px]'],
+            className: 'top-[62px]',
+          })}
           {showPrevButton ? (
-            <div>
-              <ArrowButton
-                className={`${arrowBtnStyle} left-0 top-9`}
-                onClick={handlePrevClick}
-                ariaLabel="Пролистать влево"
-                data-block-control="scroll-left"
-              />
-              <div className="absolute top-0 left-0 h-[168px] w-[84px] bg-opacity-from-white" />
-            </div>
+            <div className="absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" />
           ) : null}
           {showNextButton ? (
-            <div>
-              <ArrowButton
-                className={`${arrowBtnStyle} right-0 top-9 rotate-180`}
-                onClick={handleNextClick}
-                ariaLabel="Пролистать вправо"
-                data-block-control="scroll-right"
-              />
-              <div className="absolute top-0 right-0 h-[168px] w-[100px] bg-opacity-to-white" />
-            </div>
+            <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
           ) : null}
         </div>
       </section>
@@ -89,8 +76,11 @@ function renderGallery({
 }: InsuranceGalleryProps) {
   const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
   return (
-    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000">
-      <div className="w-full flex flex-nowrap gap-3.5 pb-[38px] px-[50px]">
+    <div
+      style={{ transform: `translateX(-${tabsShiftWidth}px)` }}
+      className="duration-1000 px-[50px]"
+    >
+      <div className="w-full flex flex-nowrap gap-3.5 pb-[38px]">
         {cards.map((slide, i) =>
           renderSlide({
             slide,

package/mobile/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -44,7 +44,9 @@ const formatSuffix = (ext?: string, fileSize?: string) => {
 };
 
 const getExtFromHref = (href: string) => {
-  if (!href) return '';
+  if (!href) {
+    return '';
+  }
 
   const index = href.lastIndexOf('.');
   return index !== -1 ? href.substring(index + 1) : '';

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -50,8 +50,12 @@ const renderShimmer = (size = 3) =>
     .map((_) => Math.floor(_))
     .map(renderShimmerItem);
 
-const renderShimmerItem = (width = 100, index: number) => (
-  <div key={String(index)} style={{ width: `${width}%` }} className="h-4 mt-2 bg-secondary-light" />
+const renderShimmerItem = (width: number, index: number) => (
+  <div
+    key={String(index)}
+    style={{ width: `${width || 100}%` }}
+    className="h-4 mt-2 bg-secondary-light"
+  />
 );
 
 const goldenSequence = (first: number, size: number): number[] =>

package/mobile/src/components/ProductBlock/ProductBlock.example.json

@@ -16,11 +16,7 @@
     "alt": "",
     "title": ""
   },
-  "items": [
-    "Элемент списка 1",
-    "Элемент списка 2",
-    "Элемент списка 3"
-  ],
+  "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
   "isDotted": true,
   "buttons": [
     {

package/mobile/src/components/ProductBlock/ProductBlockInner.tsx

@@ -56,7 +56,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             {description ? (
               <Description className="mt-3 text-m-md" description={description} />
             ) : null}
-            {benefits?.filter((items) => items.label)?.length ? (
+            {benefits?.filter((_) => _.label)?.length ? (
               <div className="mt-3">
                 {benefits.map((benefit, i) =>
                   renderBenefit({ benefit, version, benefitsVersion }, i),

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -61,7 +61,7 @@ export const ProductTile = JSX<ProductTileProps>(
           {description ? (
             <Description className="mt-4 max-w-[600px]" description={description} />
           ) : null}
-          {renderBenefits(benefits, version)}
+          {renderBenefits(benefits || [], version)}
 
           {additionalDescription
             ? renderAdditionalDescription(additionalDescription, version)
@@ -72,7 +72,7 @@ export const ProductTile = JSX<ProductTileProps>(
   },
 );
 
-function renderBenefits(benefits: TextBenefit[] = [], version: BlockVersion) {
+function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
     <div className="flex mt-5 mb-1">
       {benefits.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}

package/mobile/src/components/Recommendation/Recommendation.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { RecommendationCard } from './RecommendationCard';
 import type { RecommendationCardTypes, RecommendationContent } from './RecommendationContent';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
 const CARD_FULL_VIEW_COUNT = 2;
@@ -87,20 +87,12 @@ const renderNavButtons = ({
 
   return (
     <div>
-      {showPrevButton ? (
-        <ArrowButton
-          className="absolute top-1/2 left-8 z-10 mt-6"
-          onClick={handlePrevClick}
-          ariaLabel="Пролистать влево"
-        />
-      ) : null}
-      {showNextButton ? (
-        <ArrowButton
-          className="absolute top-1/2 right-8 z-10 mt-6 rotate-180"
-          onClick={handleNextClick}
-          ariaLabel="Пролистать вправо"
-        />
-      ) : null}
+      {renderArrows({
+        handler: [handlePrevClick, handleNextClick],
+        isShown: [showPrevButton, showNextButton],
+        btnClass: ['left-8', 'right-8'],
+        className: 'top-1/2 mt-6',
+      })}
     </div>
   );
 };

package/mobile/src/components/TariffsTable/TariffsTable.example.json

@@ -83,11 +83,7 @@
           },
           {
             "list": {
-              "items": [
-                "item 1",
-                "item 2",
-                "item 3"
-              ]
+              "items": ["item 1", "item 2", "item 3"]
             }
           }
         ]

package/mobile/src/components/Tile/Tile.example.json

@@ -11,6 +11,7 @@
     "alt": "",
     "title": ""
   },
+  "isDotted": true,
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
     {

package/mobile/src/components/Tile/Tile.tsx

@@ -30,6 +30,7 @@ export const Tile = JSX<TileProps>((props) => {
     children,
     buttons,
     image,
+    isDotted = true,
     className = '',
     version = 'primary',
     role,
@@ -75,16 +76,17 @@ export const Tile = JSX<TileProps>((props) => {
           />
         ) : null}
         {children}
-        {renderList(items, version)}
+        {renderList(items, version, isDotted)}
       </BaseTile>
     </section>
   );
 });
 
-function renderList(items, version) {
+function renderList(items, version, isDotted: boolean) {
   return items?.length ? (
     <List
       items={items}
+      isDotted={isDotted}
       itemClassName="text-title-2xs font-light mt-2"
       version={version === 'primary' ? 'tile' : 'tile-white'}
     />

package/mobile/src/components/Tile/TileContent.ts

@@ -14,5 +14,10 @@ export type TileContent = HeadingContent &
   ListContent &
   ButtonContent &
   ImageContent & {
+    /**
+     *  @title Буллиты
+     *  @default true
+     */
+    isDotted?: boolean;
     version?: BlockVersion;
   };

package/mobile/src/content-page-repository/mapJSON.ts

@@ -1,23 +1,27 @@
 export async function mapJSON<T>(
   data: T,
   mapper: <In, Out = In>(value: In, key: string[]) => Promise<Out>,
-  key: string[] = [],
+  keyParts: string[] = [],
 ): Promise<T> {
-  if (data === null || data === undefined) return data;
+  if (data === null || data === undefined) {
+    return data;
+  }
 
-  const mappedData = await mapper(data, key);
-  if (mappedData !== data) return mappedData as T;
+  const mappedData = await mapper(data, keyParts);
+  if (mappedData !== data) {
+    return mappedData as T;
+  }
 
   if (Array.isArray(data)) {
-    const values = data.map((_, i) => mapJSON(_, mapper, [String(i)].concat(key)));
+    const values = data.map((_, i) => mapJSON(_, mapper, [String(i)].concat(keyParts)));
     return Promise.all(values) as any;
   } else if (typeof data === 'object' && (data as any).toString() === '[object Object]') {
     const subKeys = Object.keys(data as any);
-    const values = subKeys.map((k) => mapJSON(data[k], mapper, [k].concat(key)));
+    const values = subKeys.map((k) => mapJSON(data[k], mapper, [k].concat(keyParts)));
     const pairs = (await Promise.all(values)).map((_, i) => ({
       [subKeys[i]]: _,
     }));
     return Object.assign({}, ...pairs);
   }
-  return mapper<T>(data, key);
+  return mapper<T>(data, keyParts);
 }

package/mobile/src/content-page-repository/transformMarkdown.ts

@@ -3,7 +3,9 @@ import remarkParse from 'remark-parse';
 import remarkHtml from 'remark-html';
 
 export async function transformMarkdown(markdown: string | null | undefined): Promise<string> {
-  if (!markdown) return '';
+  if (!markdown) {
+    return '';
+  }
 
   const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
   return result.toString('utf-8');

package/mobile/src/content-page-repository/transformPicture.ts

@@ -36,12 +36,15 @@ async function transformImg(
 
   const imgPath = `${path.dirname(pagePath)}/${src}`;
   let chain = sharp(imgPath);
-  if (size)
+  if (size) {
     chain = chain.resize(size?.width, size?.height, {
       fit: sharp.fit.contain,
       background: [0, 0, 0, 0],
     });
-  if (format) chain = chain.toFormat(format, options);
+  }
+  if (format) {
+    chain = chain.toFormat(format, options);
+  }
 
   const transformedSrc = transformSrc(src, transformationOptions);
   const transformedImgPath = `${publicDir}/${path.relative(
@@ -62,7 +65,9 @@ async function transformImg(
 
 function transformSrc(src: string, { format, size }: TransformationOptions & ImgSource): string {
   const noTransform = !format && !size;
-  if (noTransform) return src;
+  if (noTransform) {
+    return src;
+  }
 
   const suffix = [size?.width, size?.height].filter(Boolean).join('-');
   return `${path.basename(src, path.extname(src))}${suffix ? `-${suffix}` : ''}.${

package/mobile/src/hooks/useCreditCalculatorData.ts

@@ -1,15 +1,14 @@
 import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
-import { CreditCalculatorData } from '../components/CreditCalculator/CreditCalculatorContent';
 
 export function useCreditCalculatorData(
   useAsyncData: AsyncDataHook,
   directoryName: string | undefined,
-): CreditCalculatorData {
+): any {
   const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
   return data || {};
 }
 
-async function fetchCreditCalculatorData(url: string): Promise<CreditCalculatorData> {
+async function fetchCreditCalculatorData(url: string): Promise<any> {
   const response = await fetch(url);
   return await response.json();
 }