@redneckz/wildless-cms-uni-blocks 0.3.10 → 0.3.13

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

@@ -16,18 +16,17 @@ import { HeaderTop } from './HeaderTop';
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, burgerSubMenu }) => {
+  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems }) => {
     const router = context.useRouter();
     const sitemap = useSitemap(context.useAsyncData);
+    const dispositions = sitemap?.dispositions
     const { handlerDecorator } = context;
 
     const mergedItems = mergeTopItems(sitemap.topItems, topItems);
     const activeTopItem = mergedItems.find(isTopItemActive(router));
     const subItems = activeTopItem?.items;
     const activeSubItem = findActiveSubItem(router)(subItems);
-
     const [burgerMenuShow, setBurgerMenuShow] = context.useState(false);
-
     const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
 
     return (
@@ -35,7 +34,7 @@ export const Header = JSX<HeaderProps>(
         <div className="container px-4 py-0 box-border">
           <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
           <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
-            <div className="flex">
+            <div className="flex no-scrollbar horizontal-list h-full items-center">
               {subItems?.map((_, i) =>
                 renderSubItem(
                   {
@@ -53,13 +52,13 @@ export const Header = JSX<HeaderProps>(
           <HeaderBurger
             context={context}
             onClick={toggleBurgerMenu}
-            burgerSubMenu={burgerSubMenu}
+            burgerSubMenu={dispositions}
             defaultLocation={defaultLocation}
           >
             <Accordion
               context={context}
-              accordionItems={getAccordionItems(topItems)}
-              className="p-0 pt-0 pb-0 mb-4"
+              accordionItems={getAccordionItems(sitemap.topItems)}
+              className="!p-0 mb-4"
             />
           </HeaderBurger>
         ) : null}

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

@@ -2,12 +2,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import type { SubMenuItem } from './HeaderContent';
+import type { DispositionItem } from './HeaderContent';
 
 export interface HeaderBurgerProps {
   context: ContentPageContext;
   onClick: () => void;
-  burgerSubMenu?: SubMenuItem[];
+  burgerSubMenu?: DispositionItem[];
   defaultLocation?: string;
   children?: any;
 }
@@ -15,13 +15,18 @@ export interface HeaderBurgerProps {
 export const HeaderBurger = JSX<HeaderBurgerProps>(
   ({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
     const [city, getCity] = context.useGeolocation(defaultLocation);
-
     return (
       <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">
-        <button className="absolute top-4 right-4 border-none bg-transparent cursor-pointer" onClick={onClick}>
+        <button
+          className="absolute top-4 right-4 border-none bg-transparent cursor-pointer"
+          onClick={onClick}
+        >
           <Icon name="CloseIcon" width="24" height="24" asSVG />
         </button>
-        <button onClick={getCity} className="flex items-center text-sm text-secondary-text mb-4 bg-transparent cursor-pointer">
+        <button
+          onClick={getCity}
+          className="flex items-center text-sm text-secondary-text p-0 mb-4 bg-transparent cursor-pointer"
+        >
           <Icon
             name="GeolocationIcon"
             width="20"
@@ -39,7 +44,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
   },
 );
 
-const renderBurgerSubMenuItem = (menu: SubMenuItem, i: number) => {
+const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
   const { icon, href, text } = menu;
   return (
     <a key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4 hover:text-primary-main">

package/mobile/src/components/Header/HeaderContent.ts

@@ -1,7 +1,7 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../icons/IconName';
 
 /**
  * @title Пункт подменю
@@ -9,8 +9,18 @@ import type { IconName } from '../../ui-kit/Icon/IconProps';
 export interface SubMenuItem extends LinkProps {
   icon?: IconName;
 }
+
+/**
+ * @title Ссылка дополнительного меню
+ * @required ["text", "href"]
+ */
+export interface DispositionItem extends LinkProps {
+  /** @hidden */
+  icon?: IconName;
+}
+
 /**
- * @title Шапка
+ * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  * @required ["defaultLocation", "topItems"]
  */
 export interface HeaderContent extends SitemapProps {
@@ -25,6 +35,4 @@ export interface HeaderContent extends SitemapProps {
    * @default white
    */
   bgColor?: BgColorVersion;
-  /** @title Подменю */
-  burgerSubMenu?: SubMenuItem[]; // TODO: для мобильной версии
 }

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

@@ -11,7 +11,11 @@ export interface HeaderTopProps {
 export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
   <div className="flex items-center justify-between border-0 border-b border-main-divider h-[50px]">
     <div className="flex items-center">
-      <button className="pr-4 border-0 bg-transparent cursor-pointer" onClick={onClick} aria-label="Открыть меню">
+      <button
+        className="pl-0 pr-4 border-0 bg-transparent cursor-pointer"
+        onClick={onClick}
+        aria-label="Открыть меню"
+      >
         <Icon
           name={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
           width="24"

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

@@ -11,7 +11,8 @@
         }
       },
       "title": "Заголовок 1",
-      "description": "Описание 1"
+      "description": "Описание 1",
+      "version": "primary"
     },
     {
       "image": {
@@ -22,7 +23,8 @@
         }
       },
       "title": "Заголовок 2",
-      "description": "Описание 2"
+      "description": "Описание 2",
+      "version": "primary"
     },
     {
       "image": {
@@ -33,7 +35,8 @@
         }
       },
       "title": "Заголовок 3",
-      "description": "Описание 3"
+      "description": "Описание 3",
+      "version": "primary"
     },
     {
       "image": {
@@ -44,7 +47,8 @@
         }
       },
       "title": "Заголовок 4",
-      "description": "Описание 4"
+      "description": "Описание 4",
+      "version": "primary"
     }
   ]
 }

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

@@ -14,5 +14,15 @@
       "version": "secondary"
     }
   ],
-  "version": "primary"
+  "version": "primary",
+  "benefits": [
+    {
+      "label": "Преимущество №1",
+      "icon": "ClockIcon"
+    },
+    {
+      "label": "Преимущество №2",
+      "icon": "SignDocsIcon"
+    }
+  ]
 }

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -20,6 +20,7 @@ export type ProductBlockInnerContent = HeadingContent &
      */
     benefits?: Benefit[];
     version?: BlockVersion;
+    buttons?: ButtonContent[];
   };
 
 /**

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

@@ -34,7 +34,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
                 <Heading
                   headingType={headingType}
                   title={title}
-                  className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}`}
+                  className="whitespace-pre-wrap max-w-[600px]"
                 />
               )
             }
@@ -48,11 +48,11 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               ) : null
             }
           >
-            {description ? <Description className="mb-5" description={description} /> : null}
-            {benefits?.length ? (
-              <div className="mt-5">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
+            {description ? <Description className="mt-3" description={description} /> : null}
+            {benefits?.filter((items) => items.label)?.length ? (
+              <div className="mt-3">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
             ) : null}
-            {items?.length ? <List items={items} /> : null}
+            {items?.length ? <List className="mt-3" items={items} /> : null}
           </BaseTile>
         </div>
         {renderImage(image)}

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

@@ -14,7 +14,8 @@
           }
         },
         "description": "Описание",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+        "version": "primary"
       }
     }
   ]

package/mobile/src/components/ProductGallery/ProductGalleryContent.ts

@@ -19,7 +19,7 @@ export interface ProductSlide {
 }
 
 /**
- * @title Продуктовая галерея
+ * @title Продуктовая галерея (для мобильных горизонтальная прокрутка shift+mouseScroll)
  */
 export interface ProductGalleryContent {
   /**

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

@@ -7,6 +7,7 @@
       "width": 300
     }
   },
+  "version": "primary",
   "benefits": [
     {
       "label": "Преимущество 1",

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

@@ -0,0 +1,15 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { TariffsTableRowHeader } from './TariffsTableContent';
+
+export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => {
+  return (
+    <div className="flex gap-2.5 mb-2">
+      {title ? <Heading headingType="h3" className="font-medium" title={title} /> : null}
+      {icon ? (
+        <Icon className="ml-auto max-w-6 max-h-6" name={icon} width="24px" height="24px" />
+      ) : null}
+    </div>
+  );
+});

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

@@ -1,5 +1,7 @@
 {
   "title": "Заголовок",
+  "description": "Описание",
+  "orientation": "vertical",
   "rowHeaders": [
     {
       "title": "Параметр 1",
@@ -73,7 +75,11 @@
           },
           {
             "list": {
-              "items": ["item 1", "item 2", "item 3"]
+              "items": [
+                "item 1",
+                "item 2",
+                "item 3"
+              ]
             }
           }
         ]

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

@@ -1,78 +1,54 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
 import type { UniBlockProps } from '../../types';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import type {
+  TariffsTableCellData,
+  TariffsTableColumn,
+  TariffsTableContent,
+  TariffsTableRowHeader,
+} from './TariffsTableContent';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { COLS_LENGTH_FOR_SCROLL } from './constants';
-import type { TariffsTableContent } from './TariffsTableContent';
-import { TariffsTableRow } from './TariffsTableRow';
+import { TariffsTableVertical } from './TariffsTableVertical';
+import { TariffsTableHorizontal } from './TariffsTableHorizontal';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 export const TariffsTable = JSX<TariffsTableProps>(
-  ({ className, context, title, rowHeaders, columns }) => {
-    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
-
-    const colData = columns?.map(({ data }) => data) || [];
-    const rowData = rowHeaders?.map((header, i) => ({
-      header,
-      data: colData.map((col) => col?.[i] || [{}]),
-    }));
-
-    const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
-      useComparisonTableScroll({
-        colData,
-        colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
-        activeCardIndex,
-        setActiveCardIndex,
-      });
+  ({ className, context, title, description, columns, rowHeaders, orientation = 'vertical' }) => {
+    const colData = getColData(columns);
+    const tiles = getTiles(rowHeaders, colData);
 
     return (
-      <section
-        className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
-          className || ''
-        }`}
-      >
-        <Heading
-          headingType="h2"
-          className="max-w-[47rem] text-center mb-9 mx-auto"
-          title={title}
-        />
-        <div role="table">
-          {rowData?.length ? (
-            <div className="relative">
-              {rowData.map((row, i, { length }) => (
-                <TariffsTableRow
-                  key={String(i)}
-                  row={row}
-                  isLastRow={i + 1 === length}
-                  activeCardIndex={activeCardIndex}
-                />
-              ))}
-              {isScrollAvailable ? (
-                <div>
-                  <div className="absolute top-7 right-7 z-10">
-                    <ArrowButton
-                      onClick={nextClick}
-                      disabled={!showNextButton}
-                      ariaLabel="Пролистать вправо"
-                    />
-                    <ArrowButton
-                      className="mt-4 rotate-180"
-                      onClick={prevClick}
-                      disabled={!showPrevButton}
-                      ariaLabel="Пролистать влево"
-                    />
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          ) : null}
-          {isScrollAvailable ? (
-            <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
-          ) : null}
-        </div>
+      <section className={`px-4 py-6 bg-white font-sans text-primary-text ${className}`}>
+        {title ? (
+          <Heading
+            headingType="h2"
+            className={`text-center ${description ? 'mb-2' : 'mb-5'}`}
+            title={title}
+          />
+        ) : null}
+        {description ? <div className="mb-5 text-center text-m-md">{description}</div> : null}
+        {tiles?.length ? renderOrientationTable(orientation, tiles, context) : null}
       </section>
     );
   },
 );
+
+function renderOrientationTable(orientation, tiles, context) {
+  return orientation === 'vertical' ? (
+    <TariffsTableVertical tiles={tiles} />
+  ) : (
+    <TariffsTableHorizontal context={context} tiles={tiles} />
+  );
+}
+
+const getColData = (columns: TariffsTableColumn[] | undefined) =>
+  columns?.[0].data ? columns[0].data : [];
+
+const getTiles = (
+  rowHeaders: TariffsTableRowHeader[] | undefined,
+  colData: TariffsTableCellData[][],
+) =>
+  rowHeaders?.map((header, i) => ({
+    header,
+    data: colData?.[i] || [{}],
+  }));

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

@@ -17,7 +17,7 @@ export const TariffsTableCell = JSX<TariffsTableCellProps>(({ cell, isLastRow })
 
   return (
     <div className={cellWrapperClasses} role="cell">
-      <div>{cell.map((item, i) => renderCellInner(item, i))}</div>
+      <div>{cell.map(renderCellInner)}</div>
     </div>
   );
 });
@@ -30,8 +30,8 @@ const renderCellInner = (
     {i > 0 && (
       <div className="border-main-divider border border-solid border-t-0 border-x-0 my-4" />
     )}
-    {label && <div className="text-xl font-medium m-0">{label}</div>}
-    {description && <div className="text-sm text-secondary-text">{description}</div>}
+    {label ? <div className="text-xl font-medium m-0">{label}</div> : null}
+    {description ? <div className="text-sm text-secondary-text">{description}</div> : null}
     {list?.items?.length ? (
       <div className="flex flex-col justify-between items-start">
         <div role="list">

package/mobile/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,7 +1,11 @@
 import type { IconName } from '../../icons/IconName';
-import type { Picture } from '../../model/Picture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { CellData, RowHeader } from '../ComparisonTable/ComparisonTableContent';
+import type { CellData } from '../ComparisonTable/ComparisonTableContent';
+import type { ListOrientation } from '../../model/ListOrientation';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 
 /**
  * @title Ряд
@@ -22,38 +26,42 @@ export interface TariffsTableColumn {
 /**
  * @title Список
  */
-export interface TariffsTableList {
+export type TariffsTableList = ListContent & {
   /** @title Маркеры */
   isDotted?: boolean;
-  /** @title Элементы списка */
-  items?: string[];
-}
+};
 
 /**
  * @title Ячейка
  */
-export interface TariffsTableCellData extends CellData {
-  list?: TariffsTableList;
-  image?: Picture;
-  /** @title Кнопки */
-  buttons?: ButtonWithIconProps[];
-}
+export type TariffsTableCellData = CellData &
+  ImageContent &
+  ButtonContent & {
+    list?: TariffsTableList;
+  };
 
 /**
  * @title Параметр
  */
-export interface TariffsTableRowHeader extends RowHeader {
+export type TariffsTableRowHeader = HeadingContent & {
   icon?: IconName;
-}
+};
 
 /**
  * @title Таблица тарифов
  */
-export interface TariffsTableContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Колонки */
-  columns?: TariffsTableColumn[];
-  /** @title Параметры */
-  rowHeaders?: TariffsTableRowHeader[];
-}
+export type TariffsTableContent = HeadingContent &
+  DescriptionContent & {
+    /** @title Колонки */
+    columns?: TariffsTableColumn[];
+    /** @title Параметры */
+    rowHeaders?: TariffsTableRowHeader[];
+    /** @title Направление таблицы (моб.) */
+    orientation?: ListOrientation;
+  };
+
+/** @hidden */
+export type TariffsTableTileCellProps = {
+  header: TariffsTableRowHeader;
+  data: TariffsTableCellData[];
+};

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

@@ -0,0 +1,16 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import { TariffsTableTileCell } from './TariffsTableTileCell';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import type { TariffsTableTileCellProps } from './TariffsTableContent';
+
+export const TariffsTableHorizontal = JSX<{
+  context: ContentPageContext;
+  tiles: TariffsTableTileCellProps[];
+}>(({ tiles, context }) => (
+  <SwipeListControl context={context}>
+    {tiles.map((tile, i) => (
+      <TariffsTableTileCell key={String(i)} {...tile} />
+    ))}
+  </SwipeListControl>
+));

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

@@ -0,0 +1,61 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { TableTileHeader } from './TableTileHeader';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Img } from '../../ui-kit/Img/Img';
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { TariffsTableCellData, TariffsTableTileCellProps } from './TariffsTableContent';
+
+export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ header, data }) => {
+  return (
+    <div className="rounded-md border-main-stroke h-full box-border border p-4">
+      <TableTileHeader {...header} />
+      {data?.length ? data.map(renderCellInner) : null}
+    </div>
+  );
+});
+
+const renderCellInner = (
+  { label, description, list, image, buttons }: TariffsTableCellData,
+  i: number,
+) => (
+  <div key={String(i)}>
+    {i > 0 && (
+      <div className="border-main-divider border border-solid border-t-0 border-x-0 my-2" />
+    )}
+    {label ? <div className="text-m-sm m-0">{label}</div> : null}
+    {description ? (
+      <div className="text-m-sm text-secondary-text mt-[3px]">{description}</div>
+    ) : null}
+    {list?.items?.length ? (
+      <div className="flex flex-col justify-between items-start">
+        <div role="list">
+          {list.items.map((text, idx) => (
+            <BlockItem
+              className="text-m-sm"
+              key={String(idx)}
+              text={text}
+              version="gray"
+              isDotted={list.isDotted ?? true}
+            />
+          ))}
+        </div>
+      </div>
+    ) : null}
+    {image && <Img image={{ ...image, className: 'm-0' }} />}
+    {buttons?.length ? (
+      <div>
+        {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
+          <Button
+            className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
+            key={String(idx)}
+            rounded={rounded}
+            appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
+            {...buttonProps}
+            aria-label={icon}
+          />
+        ))}
+      </div>
+    ) : null}
+  </div>
+);

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

@@ -0,0 +1,11 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { TariffsTableTileCell } from './TariffsTableTileCell';
+import type { TariffsTableTileCellProps } from './TariffsTableContent';
+
+export const TariffsTableVertical = JSX<{ tiles: TariffsTableTileCellProps[] }>(({ tiles }) => (
+  <div className="flex flex-col gap-3.5">
+    {tiles.map((tile, i) => (
+      <TariffsTableTileCell key={String(i)} {...tile} />
+    ))}
+  </div>
+));

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -55,10 +55,10 @@ export const TextBlock = JSX<TextBlockProps>(
           ) : null}
           {items?.length ? (
             <List
+              className="mt-1"
               items={items}
               isDotted={isDotted}
-              version="gray"
-              className="mt-1 text-m-sm text-secondary-text"
+              version={blockVersion.indexOf('secondary') !== -1 ? 'secondary' : 'gray'}
             />
           ) : null}
         </div>

package/mobile/src/hooks/useCreditCalculatorData.ts

@@ -5,16 +5,12 @@ export function useCreditCalculatorData(
   useAsyncData: AsyncDataHook,
   directoryName: string | undefined,
 ): CreditCalculatorData {
-  const { data } = useAsyncData(creditCalculatorUrl(directoryName), () =>
-    fetchCreditCalculatorData(directoryName),
-  );
+  const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
   return data || {};
 }
 
-async function fetchCreditCalculatorData(
-  directoryName: string | undefined,
-): Promise<CreditCalculatorData> {
-  const response = await fetch(creditCalculatorUrl(directoryName));
+async function fetchCreditCalculatorData(url: string): Promise<CreditCalculatorData> {
+  const response = await fetch(url);
   return await response.json();
 }