@redneckz/wildless-cms-uni-blocks 0.14.147 → 0.14.149

package/mobile/src/ui-kit/SwipeListControl/SwipeListItem.tsx

@@ -4,6 +4,7 @@ import {
   useIntersectionObserver,
   type IntersectionObserverOptions,
 } from '../../hooks/useIntersectionObserver';
+import { style } from '../../utils/style';
 
 /**
  * @title Элемент списка
@@ -18,7 +19,15 @@ interface SwipeListControlItemProps {
 }
 
 export const SwipeListItem = JSX<SwipeListControlItemProps>(
-  ({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
+  ({
+    className,
+    style: inlineStyle,
+    idx,
+    activeIndex,
+    observerOptions,
+    children,
+    onIntersection,
+  }) => {
     const observerCallback = useCallback(
       (entries: IntersectionObserverEntry[]) => {
         if (entries.length && onIntersection) {
@@ -31,8 +40,8 @@ export const SwipeListItem = JSX<SwipeListControlItemProps>(
 
     return (
       <div
-        className={`inline-block snap-always box-border ${className}`}
-        style={style}
+        className={style('inline-block snap-always box-border', className)}
+        style={inlineStyle}
         aria-current={Boolean(idx === activeIndex)}
         ref={ref}
       >

package/mobile/src/ui-kit/SwipeListControl/useSwipeListScroll.ts

@@ -9,7 +9,7 @@ import { scrollToStart } from './scrollToStart';
 export interface SwipeListScroll {
   scrollLeft: () => void;
   scrollRight: () => void;
-  scrollTo: (idx: number) => void;
+  scrollTo: (idx: number, options?: ScrollIntoViewOptions) => void;
   canScrollLeft: boolean;
   canScrollRight: boolean;
   visibleIndicesRange: [number, number];
@@ -70,13 +70,16 @@ export const useSwipeListScroll = <E extends HTMLElement>({
   }, [itemCount, canScrollRight]);
 
   const scrollTo = useCallback(
-    (idx: number) => {
+    (
+      idx: number,
+      options = {
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'center',
+      } as ScrollIntoViewOptions,
+    ) => {
       if (containerRef?.current) {
-        containerRef.current.children[idx]?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'center',
-        });
+        containerRef.current.children[idx]?.scrollIntoView(options);
       }
     },
     [containerRef],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.147",
+  "version": "0.14.149",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -209,7 +209,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "63 kB",
+      "limit": "64 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/Blocks.mobile.ts

@@ -36,6 +36,7 @@ import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { Tabs } from './Tabs/Tabs';
+import { TabsLayout } from './TabsLayout/TabsLayout';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { UnitBlock } from './UnitBlock/UnitBlock';
@@ -72,14 +73,15 @@ export const Blocks: BlocksRegistry = {
   Placeholder,
   ProductBlock,
   ProductGallery,
-  UnitBlock,
   RepresentativeOfficeInfo,
   RichTextBlock,
   RollupItem,
   SafeDepositRental,
   StepsBlock,
   Tabs,
+  TabsLayout,
   TariffsTable,
   TextBlock,
+  UnitBlock,
   VerticalLayout,
 };

package/src/components/Blocks.ts

@@ -42,6 +42,7 @@ import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { SwipeListControlBlock } from './SwipeListControlBlock/SwipeListControlBlock';
 import { Tabs } from './Tabs/Tabs';
+import { TabsLayout } from './TabsLayout/TabsLayout';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { UnitBlock } from './UnitBlock/UnitBlock';
@@ -84,7 +85,6 @@ export const Blocks: BlocksRegistry = {
   Placeholder,
   ProductBlock,
   ProductGallery,
-  UnitBlock,
   RepresentativeOfficeInfo,
   RichTextBlock,
   RollupItem,
@@ -92,8 +92,10 @@ export const Blocks: BlocksRegistry = {
   StepsBlock,
   SwipeListControlBlock,
   Tabs,
+  TabsLayout,
   TariffsTable,
   TextBlock,
+  UnitBlock,
   VerticalLayout,
   Video,
 };

package/src/components/ContentPage/ContentPage.page.json

@@ -28,43 +28,6 @@
         "type": "Footer",
         "style": ["col-span-12"]
       }
-    ],
-    "stickyBottomMenu": [
-      {
-        "type": "StickyBottomMenu",
-        "content": {
-          "menuItems": [
-            {
-              "title": "Кредиты",
-              "url": "#EmptyWalletIcon",
-              "icon": {
-                "icon": "EmptyWalletIcon"
-              }
-            },
-            {
-              "title": "Карты",
-              "url": "#CardIcon",
-              "icon": {
-                "icon": "CardIcon"
-              }
-            },
-            {
-              "title": "Вклады",
-              "url": "#SafeIcon",
-              "icon": {
-                "icon": "SafeIcon"
-              }
-            },
-            {
-              "title": "Инвестиции",
-              "url": "#ChartIcon",
-              "icon": {
-                "icon": "ChartIcon"
-              }
-            }
-          ]
-        }
-      }
     ]
   },
   "blocks": []

package/src/components/OfficesAtmsMap/OfficesAtmsMap.fixture.mobile.tsx

@@ -12,8 +12,10 @@ const OFFICE_MAP: OfficesAtmsMapContent = {
 const ATM_MAP: OfficesAtmsMapContent = {
   data: {
     dataType: 'atms',
-    description:
-      'Держатели платежных карт Visa, MasterCard и МИР АО «Россельхозбанк» могут снимать без дополнительных комиссий наличные денежные средства в банкоматах банков-партнеров:',
+    __html:
+      '<p>' +
+      'Держатели платежных карт Visa, MasterCard и МИР АО «Россельхозбанк» могут снимать без дополнительных комиссий наличные денежные средства в банкоматах банков-партнеров:' +
+      '</p>',
     list: [
       {
         text: 'ПАО «Промсвязьбанк»',

package/src/components/OfficesAtmsMap/OfficesAtmsMap.fixture.tsx

@@ -12,8 +12,10 @@ const OFFICE_MAP: OfficesAtmsMapContent = {
 const ATM_MAP: OfficesAtmsMapContent = {
   data: {
     dataType: 'atms',
-    description:
-      'Держатели платежных карт Visa, MasterCard и МИР АО «Россельхозбанк» могут снимать без дополнительных комиссий наличные денежные средства в банкоматах банков-партнеров:',
+    __html:
+      '<p>' +
+      'Держатели платежных карт Visa, MasterCard и МИР АО «Россельхозбанк» могут снимать без дополнительных комиссий наличные денежные средства в банкоматах банков-партнеров:' +
+      '</p>',
     list: [
       { text: 'АО «Альфа-Банк»', image: { src: 'alphabank.svg', size: { width: 24, height: 24 } } },
       {

package/src/components/OfficesAtmsMap/OfficesAtmsMap.ui.json

@@ -4,6 +4,9 @@
       "dataType": {
         "ui:widget": "hidden"
       },
+      "__html": {
+        "ui:widget": "html"
+      },
       "list": {
         "items": {
           "image": {

package/src/components/OfficesAtmsMap/OfficesAtmsMapContent.ts

@@ -1,5 +1,6 @@
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type Picture } from '../../model/Picture';
+import { type RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
 /**
  * @title Пункт
@@ -22,10 +23,8 @@ export type OfficesDef = {
  * @title Банкоматам
  * @default {"dataType": "atms"}
  */
-export type AtmsDef = {
+export type AtmsDef = RichTextProps & {
   dataType: 'atms';
-  /** @title Описание */
-  description: string;
   /** @title Список */
   list?: ItemList[];
 };

package/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -5,7 +5,7 @@ import { type VNode } from '../../model/VNode';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
 import { style } from '../../utils/style';
@@ -75,14 +75,10 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm>>
   },
 );
 
-const renderDescriptionBlock = ({ description, list }: AtmsDef) =>
-  description || list?.length ? (
+const renderDescriptionBlock = ({ __html, list }: AtmsDef) =>
+  __html || list?.length ? (
     <div className="p-xl mb-2xl border-b sm:border border-main-divider sm:rounded-md">
-      {description ? (
-        <Paragraph size="text-l" font="font-light">
-          {description}
-        </Paragraph>
-      ) : null}
+      {__html ? <RichText __html={__html} /> : null}
       {list?.length ? (
         <div className="flex flex-col sm:flex-row gap-2xl sm:flex-wrap pt-xs">
           {list.map((item, i) => (

package/src/components/Placeholder/Placeholder.tsx

@@ -1,14 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Shimmer } from '../../ui-kit/Shimmer/Shimmer';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import { type PlaceholderContent } from './PlaceholderContent';
 
 export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {}
 
-const GOLDEN_RATIO = 1.618;
-
 export const Placeholder = JSX<PlaceholderProps>(
   ({ className, title, description = 'Блок в разработке...', ...rest }) => (
     <BlockWrapper className={style('box-border', className)} {...rest}>
@@ -20,23 +19,7 @@ export const Placeholder = JSX<PlaceholderProps>(
         align="text-left"
         isEmbedded={true}
       />
-      <figure className="m-0 mt-xl min-w-[80%]">{renderShimmer()}</figure>
+      <Shimmer />
     </BlockWrapper>
   ),
 );
-
-const renderShimmer = (size = 3) =>
-  goldenSequence(100, size)
-    .map((_) => Math.floor(_))
-    .map(renderShimmerItem);
-
-const renderShimmerItem = (width: number, index: number) => (
-  <div
-    key={String(index)}
-    style={{ width: `${width || 100}%` }}
-    className="h-4 mt-xs bg-secondary-light"
-  />
-);
-
-const goldenSequence = (first: number, size: number): number[] =>
-  [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);

package/src/components/TabsLayout/TabsLayout.example.json

@@ -0,0 +1,8 @@
+{
+  "content": {
+    "tabs": [
+      { "title": "Первый таб", "description": "Описание первого таба" },
+      { "title": "Второй таб", "description": "Описание второго таба" }
+    ]
+  }
+}

package/src/components/TabsLayout/TabsLayout.fixture.mobile.tsx

@@ -0,0 +1,53 @@
+import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
+import { TabsLayout } from './TabsLayout';
+import example from './TabsLayout.example.json';
+
+const options: BlockRendererOptions = {
+  blocksRegistry: Blocks,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={example.content.tabs}
+        options={options}
+        block={{
+          slots: {
+            'Первый таб': [
+              {
+                type: 'TextBlock',
+                content: {
+                  title: 'Текстовый блок',
+                  description: 'Описание',
+                },
+                style: ['col-span-12'],
+              },
+              {
+                type: 'TextBlock',
+                content: {
+                  title: 'Текстовый блок',
+                  description: 'Описание',
+                },
+                style: ['col-span-12'],
+              },
+            ],
+            'Второй таб': [
+              {
+                type: 'TextBlock',
+                content: {
+                  title: 'Текстовый блок',
+                  description: 'Описание',
+                },
+                style: ['col-span-12'],
+              },
+            ],
+          },
+        }}
+      />
+    </div>
+  ),
+};

package/src/components/TabsLayout/TabsLayout.fixture.tsx

@@ -0,0 +1,53 @@
+import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
+import { TabsLayout } from './TabsLayout';
+import example from './TabsLayout.example.json';
+
+const options: BlockRendererOptions = {
+  blocksRegistry: Blocks,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={example.content.tabs}
+        options={options}
+        block={{
+          slots: {
+            'Первый таб': [
+              {
+                type: 'TextBlock',
+                content: {
+                  title: 'Текстовый блок',
+                  description: 'Описание',
+                },
+                style: ['col-span-12'],
+              },
+              {
+                type: 'TextBlock',
+                content: {
+                  title: 'Текстовый блок',
+                  description: 'Описание',
+                },
+                style: ['col-span-12'],
+              },
+            ],
+            'Второй таб': [
+              {
+                type: 'TextBlock',
+                content: {
+                  title: 'Текстовый блок',
+                  description: 'Описание',
+                },
+                style: ['col-span-12'],
+              },
+            ],
+          },
+        }}
+      />
+    </div>
+  ),
+};

package/src/components/TabsLayout/TabsLayout.tsx

@@ -0,0 +1,88 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
+import { type Align } from '../../model/Align';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { style } from '../../utils/style';
+import { CarouselScrollButtons } from '../Carousel/CarouselScrollButtons';
+import { alignTabStyle } from './alignTabStyle';
+import { TabsLayoutButton } from './TabsLayoutButton';
+import { type Tab, type TabsLayoutContent } from './TabsLayoutContent';
+import { TabsLayoutRedirectTab } from './TabsLayoutRedirectTab';
+
+export interface TabsLayoutProps extends TabsLayoutContent, UniBlockProps {}
+
+export const TabsLayout: JSXBlock<TabsLayoutProps> = JSX<TabsLayoutProps>(
+  ({ className = '', tabs = [], block, tabAlign, ...rest }) => {
+    const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
+
+    const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
+
+    const itemCount = tabs.length;
+
+    const [activeSlideIndex, { inc: incActiveSlideIndex, dec: decActiveSlideIndex }] =
+      useCarouselControls({ itemCount }, activeTabIndex);
+
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({ itemCount });
+
+    useEffect(() => {
+      scroll.scrollTo(activeTabIndex, { behavior: 'auto' });
+    }, []);
+
+    return (
+      <BlockWrapper className={style(className)} defaultPadding="p-0" {...rest}>
+        <div className="relative border-b-8 border-primary-main">
+          <SwipeListContainer
+            itemClassName="flex"
+            containerRef={containerRef}
+            snapAlign="snap-end"
+            gap={8}
+            onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+          >
+            {tabs.map(renderTabButton(activeTabIndex, setActiveTabIndex, tabAlign))}
+          </SwipeListContainer>
+          <CarouselScrollButtons
+            scroll={scroll}
+            arrowsPadded={true}
+            onScrollLeft={decActiveSlideIndex}
+            onScrollRight={incActiveSlideIndex}
+            activeIndex={activeSlideIndex}
+            itemCount={itemCount}
+          />
+        </div>
+        <div className="space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs">
+          {tabs[activeTabIndex]?.href ? (
+            <TabsLayoutRedirectTab tab={tabs[activeTabIndex]} />
+          ) : (
+            renderBlocksList(block?.slots?.[slotName], { ...rest?.options, slotName })
+          )}
+        </div>
+      </BlockWrapper>
+    );
+  },
+);
+
+TabsLayout.slots = ({ tabs }) => tabs?.filter((_) => !_.href).map(getSlotName) || [];
+TabsLayout.childrenTypes = { exclude: ['TabsLayout'] };
+
+const getSlotName = (tab: Tab, index: number): string => tab?.title || `Слот №${index}`;
+
+const getInitSelectedIndex = (tabs: Tab[]) =>
+  tabs.reduce((selectedIndex, tab, i) => (tab.selected ? i : selectedIndex), 0);
+
+const renderTabButton =
+  (activeTabIndex: number, onClick: (i: number) => void, tabAlign: Align = 'start') =>
+  (tab: Tab, i: number) =>
+    (
+      <TabsLayoutButton
+        key={String(i)}
+        className={alignTabStyle[tabAlign]}
+        tab={tab}
+        isActive={activeTabIndex === i}
+        onClick={() => onClick(i)}
+      />
+    );

package/src/components/TabsLayout/TabsLayout.ui.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "tabs": {
+      "items": {
+        "icon": {
+          "ui:field": "picture"
+        }
+      }
+    }
+  }
+}

package/src/components/TabsLayout/TabsLayoutButton.tsx

@@ -0,0 +1,60 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type IconVersion } from '../../model/IconVersion';
+import { Img } from '../../ui-kit/Img/Img';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
+import { style } from '../../utils/style';
+import { type Tab } from './TabsLayoutContent';
+
+const getButtonClassNames = (isActive: boolean) => ({
+  btn: `w-96 ${
+    isActive
+      ? 'p-m border-none bg-primary-main text-white'
+      : 'p-s ease-in duration-300 bg-white text-primary-text'
+  }`,
+  title: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l',
+  desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
+  icon: isActive ? '' : 'text-primary-main',
+  iconVersion: (isActive ? 'white' : 'normal') as IconVersion,
+});
+
+interface TabsLayoutButtonProps {
+  tab: Tab;
+  className?: string;
+  onClick: (ev?: PreventableEvent) => void;
+  isActive: boolean;
+}
+
+export const TabsLayoutButton = JSX<TabsLayoutButtonProps>(
+  ({ tab, className, onClick, isActive }) => {
+    const buttonClassNames = getButtonClassNames(isActive);
+
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        aria-label={tab?.title}
+        className={style(
+          'border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs',
+          buttonClassNames.btn,
+          className,
+        )}
+      >
+        {tab?.icon ? (
+          <Img
+            className={style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon)}
+            image={{
+              ...tab?.icon,
+              iconVersion: tab?.icon?.iconVersion ?? buttonClassNames.iconVersion,
+            }}
+            width="24"
+            height="24"
+          />
+        ) : null}
+        <div className="border-0">
+          {tab?.title ? <div className={buttonClassNames.title}>{tab.title}</div> : null}
+          {tab?.description ? <div className={buttonClassNames.desc}>{tab.description}</div> : null}
+        </div>
+      </button>
+    );
+  },
+);

package/src/components/TabsLayout/TabsLayoutContent.ts

@@ -0,0 +1,26 @@
+import { type Align } from '../../model/Align';
+import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
+import { type UniBlockContent } from '../../model/JSXBlock';
+import { type LinkCommonProps } from '../../model/LinkProps';
+import { type IconProps } from '../../model/Picture';
+
+/**
+ * @title Таб
+ */
+export type Tab = TitleProps &
+  DescriptionProps &
+  IconProps &
+  LinkCommonProps & {
+    /** @title Вкладка выбрана по-умолчанию */
+    selected?: boolean;
+  };
+
+/**
+ * @title Табы
+ */
+export type TabsLayoutContent = UniBlockContent & {
+  /** @title Выравнивание табов */
+  tabAlign?: Align;
+  /** @title Список табов */
+  tabs?: Tab[];
+};

package/src/components/TabsLayout/TabsLayoutRedirectTab.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useDebouncedEffect } from '@redneckz/uni-jsx/lib/hooks/useDebouncedEffect';
+import { useLink } from '../../hooks/useLink';
+import { Shimmer } from '../../ui-kit/Shimmer/Shimmer';
+import { type Tab } from './TabsLayoutContent';
+
+const REDIRECT_DELAY = 0.5 * 1000;
+
+interface TabsLayoutRedirectTabProps {
+  tab: Tab;
+}
+
+export const TabsLayoutRedirectTab = JSX<TabsLayoutRedirectTabProps>(({ tab }) => {
+  const link = useLink();
+
+  useDebouncedEffect(
+    () => {
+      const { onClick } = link(tab);
+      onClick();
+    },
+    [tab],
+    REDIRECT_DELAY,
+  );
+
+  return <Shimmer className="col-span-12 p-xl" size={5} />;
+});

package/src/components/TabsLayout/alignTabStyle.ts

@@ -0,0 +1,7 @@
+import { type Align } from '../../model/Align';
+
+export const alignTabStyle: Record<Align, string> = {
+  start: 'text-start',
+  center: 'text-center',
+  end: 'text-end',
+};

package/src/setup-fixture.ts

@@ -48,7 +48,7 @@ handlerDecorator.setup((handler): any => (ev) => {
   const shouldNotPrevent = ev?.target?.type === 'submit';
 
   if (!shouldNotPrevent) {
-    ev.preventDefault();
+    ev?.preventDefault();
   }
 
   handler(ev);