@redneckz/wildless-cms-uni-blocks 0.6.22 → 0.6.24

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

@@ -19,11 +19,11 @@ const renderButtonsCellData = ({ buttons }: ButtonContent) =>
         renderButton({
           button: { rounded, icon, ...buttonProps },
           buttonClassName: `mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`,
+          index: idx,
         }),
       )}
     </div>
   ) : null;
-
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
   const labelClassName = `text-xl font-medium m-0 ${description ? 'mb-1' : ''}`;
 

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

@@ -1,94 +1,96 @@
 {
-  "title": "Заголовок",
-  "description": "Описание",
-  "orientation": "vertical",
-  "rowHeaders": [
-    {
-      "title": "Параметр 1",
-      "icon": {
-        "icon": "MoneyIcon"
+  "content": {
+    "title": "Заголовок",
+    "description": "Описание",
+    "orientation": "vertical",
+    "rowHeaders": [
+      {
+        "title": "Параметр 1",
+        "icon": {
+          "icon": "MoneyIcon"
+        }
+      },
+      {
+        "title": "Параметр 2",
+        "icon": {
+          "icon": "DollarIcon"
+        }
+      },
+      {
+        "title": "Параметр 3"
+      },
+      {
+        "title": "Параметр 4"
       }
-    },
-    {
-      "title": "Параметр 2",
-      "icon": {
-        "icon": "DollarIcon"
-      }
-    },
-    {
-      "title": "Параметр 3"
-    },
-    {
-      "title": "Параметр 4"
-    }
-  ],
-  "tariffsColumns": [
-    {
-      "data": [
-        [
-          {
-            "tableCellType": "LabelDescription",
-            "label": "Ячейка 1-1",
-            "description": "Описание для ячейки 2-1"
-          },
-          {
-            "tableCellType": "List",
-            "isDotted": true,
-            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
-          },
-          {
-            "label": "Ячейка 1-2",
-            "tableCellType": "LabelDescription",
-            "description": "Описание"
-          },
-          {
-            "tableCellType": "List",
-            "isDotted": false,
-            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
-          }
-        ],
-        [
-          {
-            "tableCellType": "LabelDescription",
-            "label": "Ячейка 2-1"
-          },
-          {
-            "tableCellType": "List",
-            "isDotted": true,
-            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
-          }
-        ],
-        [
-          {
-            "label": "Ячейка 3-1",
-            "tableCellType": "LabelDescription"
-          },
-          {
-            "tableCellType": "Button",
-            "buttons": [
-              {
-                "icon": {
-                  "icon": "AppleIcon"
-                },
-                "rounded": true,
-                "version": "secondary",
-                "href": "/",
-                "target": "_blank"
-              },
-              {
-                "icon": {
-                  "icon": "PlayMarketIcon"
+    ],
+    "tariffsColumns": [
+      {
+        "data": [
+          [
+            {
+              "tableCellType": "LabelDescription",
+              "label": "Ячейка 1-1",
+              "description": "Описание для ячейки 2-1"
+            },
+            {
+              "tableCellType": "List",
+              "isDotted": true,
+              "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+            },
+            {
+              "label": "Ячейка 1-2",
+              "tableCellType": "LabelDescription",
+              "description": "Описание"
+            },
+            {
+              "tableCellType": "List",
+              "isDotted": false,
+              "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+            }
+          ],
+          [
+            {
+              "tableCellType": "LabelDescription",
+              "label": "Ячейка 2-1"
+            },
+            {
+              "tableCellType": "List",
+              "isDotted": true,
+              "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+            }
+          ],
+          [
+            {
+              "label": "Ячейка 3-1",
+              "tableCellType": "LabelDescription"
+            },
+            {
+              "tableCellType": "Button",
+              "buttons": [
+                {
+                  "icon": {
+                    "icon": "AppleIcon"
+                  },
+                  "rounded": true,
+                  "version": "secondary",
+                  "href": "/",
+                  "target": "_blank"
                 },
-                "rounded": true,
-                "version": "secondary",
-                "href": "/",
-                "target": "_blank"
-              }
-            ]
-          }
+                {
+                  "icon": {
+                    "icon": "PlayMarketIcon"
+                  },
+                  "rounded": true,
+                  "version": "secondary",
+                  "href": "/",
+                  "target": "_blank"
+                }
+              ]
+            }
+          ]
         ]
-      ]
-    }
-  ],
-  "hiddenRowsNum": 2
+      }
+    ],
+    "hiddenRowsNum": 2
+  }
 }

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -8,6 +8,7 @@ import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
 import { TariffsTableCell } from './TariffsTableCell';
 import type { Data } from './TariffsTableContent';
 import { TariffsTableRowContainer } from './TariffsTableRowContainer';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface TariffsTableRowProps extends UniBlockProps {
   row: Data;
@@ -33,7 +34,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
             {header?.icon ? (
               <Img
                 className="mr-[14px] max-w-6 max-h-6"
-                image={header.icon}
+                image={getIconWithVersion(header.icon)}
                 width="24px"
                 height="24px"
                 asSVG

package/src/components/TextBlock/TextBlock.example.json

@@ -1,14 +1,16 @@
 {
-  "title": "Текстовый блок",
-  "description": "Описание",
-  "blockVersion": "primary",
-  "iconVersion": "small",
-  "image": {
-    "format": "webp",
-    "size": {
-      "width": 43,
-      "height": 43
-    }
-  },
-  "isDotted": true
+  "content": {
+    "title": "Текстовый блок",
+    "description": "Описание",
+    "blockVersion": "primary",
+    "iconVersion": "small",
+    "image": {
+      "format": "webp",
+      "size": {
+        "width": 43,
+        "height": 43
+      }
+    },
+    "isDotted": true
+  }
 }

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

@@ -1,21 +1,23 @@
 {
-  "title": "Плитка",
-  "headingType": "h3",
-  "description": "Описание",
-  "image": {
-    "format": "webp",
-    "size": {
-      "width": 445
-    }
-  },
-  "isDotted": true,
-  "listItemSize": "M",
-  "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
-  "buttons": [
-    {
-      "text": "Кнопка",
-      "version": "primary"
-    }
-  ],
-  "version": "primary"
+  "content": {
+    "title": "Плитка",
+    "headingType": "h3",
+    "description": "Описание",
+    "image": {
+      "format": "webp",
+      "size": {
+        "width": 445
+      }
+    },
+    "isDotted": true,
+    "listItemSize": "M",
+    "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
+    "buttons": [
+      {
+        "text": "Кнопка",
+        "version": "primary"
+      }
+    ],
+    "version": "primary"
+  }
 }

package/src/components/Tile/Tile.fixture.tsx

@@ -59,6 +59,8 @@ export const TILE_PREMIUM: TileContent = {
   image: image3,
 };
 
+const tags = ['Tag #1', 'Tag #2', 'Tag #3'];
+
 export default {
   credit: (
     <div className="container grid grid-cols-12">
@@ -140,4 +142,9 @@ export default {
       />
     </div>
   ),
+  tags: (
+    <div className="container grid grid-cols-12">
+      <Tile context={context} className="col-span-8" {...TILE} tags={tags} />
+    </div>
+  ),
 };

package/src/components/Tile/Tile.tsx

@@ -8,6 +8,7 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
+import { Tags } from '../../ui-kit/Tags/Tags';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
@@ -31,6 +32,7 @@ export const Tile = JSX<TileProps>((props) => {
     listItemSize = 'M',
     className = '',
     version = 'primary',
+    tags,
     ...rest
   } = props;
   const headingClassName = version === 'primary' ? 'text-primary-text' : '';
@@ -71,6 +73,7 @@ export const Tile = JSX<TileProps>((props) => {
         ) : null}
         {children}
         {renderList({ version, isDotted, listItemSize }, items)}
+        {tags?.length ? <Tags tags={tags} className="mt-5" /> : null}
       </BaseTile>
     </BlockWrapper>
   );

package/src/components/Tile/TileContent.ts

@@ -5,6 +5,7 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { ListItemSize } from '../../ui-kit/List/ListProps';
+import type { TagsContent } from '../../ui-kit/Tags/TagsContent';
 
 /**
  * @title Плитка
@@ -12,7 +13,8 @@ import type { ListItemSize } from '../../ui-kit/List/ListProps';
 export type TileContent = HeadingCommonProps &
   DescriptionProps &
   ListContent &
-  ButtonContent & {
+  ButtonContent &
+  TagsContent & {
     /**
      * @default {
      *   "format": "webp",

package/src/hooks/useIntersectionObserver.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useIntersectionObserver<R extends Element>(
+  observerCallback: IntersectionObserverCallback,
+  observerOptions?: IntersectionObserverInit,
+) {
+  const ref = useRef<R | null>(null);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return undefined;
+    }
+
+    const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
+    intersectionObserver.observe(ref.current);
+
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, [observerCallback, observerOptions]);
+
+  return ref;
+}

package/src/hooks/useOutsideClick.ts

@@ -1,25 +1,25 @@
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 
-interface Ref {
-  current: HTMLInputElement | null;
-}
+export function useOutsideClick<R extends Node>(onClick: () => void) {
+  const targetRef = useRef<R | null>(null);
 
-export function useOutsideClick(wrapperRef: Ref, setIsOpen: (_: boolean) => void) {
   useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
+    const handleClickOutside = (event: { target?: any }) => {
       if (
-        wrapperRef &&
-        wrapperRef.current &&
-        event.target instanceof HTMLElement &&
-        !wrapperRef.current.contains(event.target)
+        targetRef &&
+        targetRef.current &&
+        event.target instanceof Node &&
+        !targetRef.current.contains(event.target)
       ) {
-        setIsOpen(false);
+        onClick();
       }
-    }
+    };
     document.addEventListener('click', handleClickOutside);
 
     return () => {
       document.removeEventListener('click', handleClickOutside);
     };
-  }, []);
+  }, [onClick]);
+
+  return targetRef;
 }

package/src/index.ts

@@ -7,4 +7,4 @@ export { ContentPage } from './components/ContentPage/ContentPage';
 export { projectSettings } from './ProjectSettings';
 export { joinList } from './utils/joinList';
 export * as url from './utils/url';
-export const packageVersion = process.env.UNI_BLOCKS_VERSION;
+export const packageVersion = globalThis.process?.env?.UNI_BLOCKS_VERSION;

package/src/model/IconVersion.ts

@@ -1,9 +1,12 @@
 /**
  * @title Цвет иконки
+ * @default normal
  * @enumNames [
- *    "Нормальный",
+ *    "по умолчанию",
+ *    "Цветной",
  *    "Белый",
  *    "Чёрный"
  * ]
  */
-export type IconVersion = 'normal' | 'white' | 'black';
+
+export type IconVersion = 'normal' | 'color' | 'white' | 'black';

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

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
-import type { Picture } from '../../model/Picture';
 import { Img } from '../Img/Img';
 import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
@@ -25,16 +25,14 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
     version = 'primary',
     benefitsVersion = 'normal',
   } = props;
-
-  const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
   const listItemAlign = description ? 'items-start' : 'items-center';
-  const iconVersion = getIconVersion(isIconWhite, icon);
+  const calcVersion = benefitsVersion === 'white' ? 'secondary' : 'primary';
 
   return (
     <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
         <div className={renderBenefitIconBgStyle(version, benefitsVersion)}>
-          <Img className="w-6 h-6" image={{ ...icon, iconVersion }} asSVG />
+          <Img className="w-6 h-6" image={getIconWithVersion(icon, calcVersion)} asSVG />
         </div>
       ) : null}
       <div className="gap-0.5">
@@ -58,6 +56,3 @@ function renderBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVe
 
   return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
 }
-
-const getIconVersion = (isIconWhite: boolean, icon?: Picture) =>
-  icon?.iconVersion || isIconWhite ? 'white' : 'normal';

package/src/ui-kit/BlockWrapper.tsx

@@ -2,9 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
 import { EventBus } from '../EventBus/EventBus';
+import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
 import type { UniBlockProps } from '../model/JSXBlock';
 import { changeHashOnObserve } from '../utils/changeHashOnObserve';
-import { IntersectionObserverTag } from './IntersectionObserverTag';
 
 interface BlockWrapperProps extends UniBlockProps, Record<string, any> {
   anchor?: string;
@@ -21,57 +21,45 @@ const OBSERVER_OPTIONS = {
 };
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ anchor, className, children, tag = 'section', labels }) => {
+  ({ anchor, className, children, tag = 'section', labels, role }) => {
     const Tag: any = tag;
 
-    const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
+    const [isVisible, setVisible] = useState(true);
     const anchorClickRef = useRef<AnchorClickScrollingEvent>({});
 
     const observerCallback = useMemo(
       () => changeHashOnObserve({ anchor, anchorClickRef }),
       [anchor],
     );
+    const ref = useIntersectionObserver(observerCallback, OBSERVER_OPTIONS);
 
-    useEffect(() => {
-      const anchorClickCleanup = EventBus.inst.subscribe('anchorClick', (e) => {
-        setShouldRenderBlock(true);
-        anchorClickRef.current = e;
-      });
-      const tabCleanup = EventBus.inst.subscribe('tab', (event) => {
-        if (event.type === 'group') {
-          const blockHasSettgins = labels?.length || anchor;
-          setShouldRenderBlock(
-            event.label ? !blockHasSettgins || Boolean(labels?.includes(event.label)) : true,
-          );
-        } else {
-          changeHash(event.label);
-          setShouldRenderBlock(true);
-        }
-      });
-
-      return () => {
-        anchorClickCleanup();
-        tabCleanup();
-      };
-    }, []);
-
-    if (!shouldRenderBlock) {
-      return null;
-    }
+    useEffect(
+      () =>
+        EventBus.inst.subscribe('anchorClick', (e) => {
+          setVisible(true);
+          anchorClickRef.current = e;
+        }),
+      [],
+    );
+    useEffect(
+      () =>
+        EventBus.inst.subscribe('tab', (event) => {
+          if (event.type === 'group') {
+            const hasSettings = labels?.length || anchor;
+            setVisible(event.label ? !hasSettings || Boolean(labels?.includes(event.label)) : true);
+          } else {
+            changeHash(event.label);
+            setVisible(true);
+          }
+        }),
+      [],
+    );
 
-    return anchor ? (
-      <IntersectionObserverTag
-        tag={tag}
-        className={className}
-        observerCallback={observerCallback}
-        observerOptions={OBSERVER_OPTIONS}
-        anchor={anchor}
-      >
+    return isVisible ? (
+      <Tag className={className} role={role} {...(anchor ? { id: anchor, ref } : {})}>
         {children}
-      </IntersectionObserverTag>
-    ) : (
-      <Tag className={className}>{children}</Tag>
-    );
+      </Tag>
+    ) : null;
   },
 );
 

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

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../Img/Img';
@@ -14,12 +13,6 @@ interface RenderButtonProps {
   buttonClassName?: string;
   index?: number;
 }
-
-interface RenderButtonIconProps {
-  icon?: Picture;
-  iconVersion?: IconVersion;
-}
-
 export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
   const { handlerDecorator } = context;
   const router = context.useRouter();
@@ -36,10 +29,10 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
 export function renderButton({ button, buttonClassName, index }: RenderButtonProps) {
   const { icon, iconRight, version, ...rest } = button;
 
-  const iconVersion = version === 'secondary' ? 'normal' : 'white';
+  const iconVersion = version === 'secondary' ? 'color' : 'white';
 
-  const leftIcon = renderButtonIcon({ icon, iconVersion });
-  const rightIcon = renderButtonIcon({ icon: iconRight, iconVersion });
+  const leftIcon = renderButtonIcon({ ...icon, iconVersion: iconVersion } as Picture);
+  const rightIcon = renderButtonIcon({ ...iconRight, iconVersion: iconVersion } as Picture);
 
   return (
     <Button
@@ -53,11 +46,11 @@ export function renderButton({ button, buttonClassName, index }: RenderButtonPro
   );
 }
 
-const renderButtonIcon = ({ icon, iconVersion }: RenderButtonIconProps) => {
+const renderButtonIcon = (icon: Picture) => {
   if (!icon?.icon && !icon?.src) {
     return null;
   }
   const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
 
-  return <Img image={{ ...icon, iconVersion: iconVersion }} width={iconWidth} height="24" asSVG />;
+  return <Img image={{ ...icon }} width={iconWidth} height="24" asSVG />;
 };

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

@@ -12,17 +12,17 @@ export const HeaderItem = JSX<TopItemProps>(
     href,
     target,
     active,
-    onClick,
-    children,
     bgColor = 'bg-white',
     dataItemName,
+    children,
+    onClick,
   }) => (
     <a
       className={`relative inline-block bg-transparent text-center no-underline ${className}`}
       href={href}
       target={target}
-      onClick={onClick}
       data-item-name={dataItemName}
+      onClick={onClick}
     >
       <span className={getTextClasses(bgColor, active)}>{text || children}</span>
       {active ? <div className={getBorderClasses(bgColor, active)} /> : null}