@redneckz/wildless-cms-uni-blocks 0.5.12 → 0.5.14

package/mobile/src/components/Accordion/AccordionItem.tsx

@@ -1,43 +1,47 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { UniBlockProps } from '../../model/ContentPageDef';
-import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import type { Picture } from '../../model/Picture';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import type { FoldButtonProps } from '../../ui-kit/Foldable/FoldButtonProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
-import type { AccordionItemCommonProps } from './AccordionContent';
-
-export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
+import type { AccordionItemProps } from './AccordionItemProps';
 
 const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
 export const AccordionItem = JSX<AccordionItemProps>(
-  ({ label = '', labelIcon, blocks, bordered, context }) => {
-    const foldableBlocks = blocks ? renderBlocksList({ context, blocks, className: '!px-0' }) : [];
-
-    return (
-      <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
-        <Foldable
-          hiddenBlocksNum={foldableBlocks.length}
-          blocks={foldableBlocks}
-          isFoldButtonOnTop
-          containerClassName="flex flex-wrap group-last:last:pb-0"
-          renderFoldButton={(props) => (
-            <FoldButton
-              className={bordered ? '' : 'py-[14px] px-0'}
-              icon={icons[Number(props.isUnfolded)]}
-              label={label}
-              primaryIcon={labelIcon}
-              hasContent={Boolean(blocks?.length)}
-              onClick={props.onToggle}
-            />
-          )}
-        />
-      </li>
-    );
-  },
+  ({ label = '', labelIcon, bordered, children, hasContent = true }) => (
+    <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
+      <Foldable
+        isFoldButtonOnTop={true}
+        renderFoldableSection={({ isUnfolded }) => (
+          <FoldableSection className="flex flex-wrap group-last:last:pb-0" isUnfolded={isUnfolded}>
+            {children}
+          </FoldableSection>
+        )}
+        renderFoldButton={({ isUnfolded, onToggle }) => (
+          <FoldButton
+            className={bordered ? '' : 'py-[14px] px-0'}
+            label={label}
+            icon={icons[Number(isUnfolded)]}
+            primaryIcon={labelIcon}
+            hasContent={hasContent}
+            onClick={onToggle}
+          />
+        )}
+      />
+    </li>
+  ),
 );
 
+interface FoldButtonProps {
+  className?: string;
+  label: string;
+  icon: IconName;
+  primaryIcon?: Picture;
+  hasContent: boolean;
+  onClick?: () => void;
+}
+
 const FoldButton = JSX<FoldButtonProps>(
   ({ className, hasContent, icon, label, primaryIcon, onClick }) => (
     <button

package/mobile/src/components/Accordion/AccordionItemProps.ts

@@ -0,0 +1,6 @@
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { AccordionItemCommonProps } from './AccordionContent';
+
+export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {
+  hasContent?: boolean;
+}

package/mobile/src/components/Accordion/AccordionItemsList.tsx

@@ -0,0 +1,5 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export const AccordionItemsList = JSX(({ children }) => (
+  <ul className="list-none m-0 p-0">{children}</ul>
+));

package/mobile/src/components/ContentPage/filterBlocks.ts

@@ -1,13 +1,11 @@
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef } from '../../model/ContentPageDef';
-import { isBlockInRegistry } from './isBlockInRegistry';
 import { normalizeBlock } from './normalizeBlock';
 
 export const filterBlocks = (blocks: BlockDef[], blocksRegistry: BlocksRegistry) =>
   blocks
     ?.filter(
       (block) =>
-        isBlockInRegistry(block?.type || block?.mobile?.type, blocksRegistry) &&
-        !block.mobile?.hidden,
+        (block?.type || block?.mobile?.type || '') in blocksRegistry && !block.mobile?.hidden,
     )
     .map(normalizeBlock);

package/mobile/src/components/ContentPage/renderBlock.tsx

@@ -1,6 +1,7 @@
-import { BlockAncestors, BlockDecorator, DEFAULT_SLOT_NAME } from '../../model/BlockDecorator';
+import { BlockAncestors, BlockDecorator, DEFAULT_ANCESTORS } from '../../model/BlockDecorator';
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
+import type { VNode } from '../../model/VNode';
 import { style2className } from '../../utils/style2className';
 import type { ContentPageContext } from './ContentPageContext';
 
@@ -12,13 +13,15 @@ interface RenderBlockOptions {
   context: ContentPageContext;
 }
 
+const defaultChildRenderer = (_: VNode) => _;
+
 export function renderBlock(
   block: BlockDef,
   options: RenderBlockOptions,
-  ancestors: BlockAncestors = [DEFAULT_SLOT_NAME], // Recursion context
+  ancestors: BlockAncestors = DEFAULT_ANCESTORS, // Recursion context
 ) {
   const { key, page, blockDecorator, blocksRegistry, context } = options;
-  const { type } = block;
+  const { type, blocks: childBlocks } = block;
 
   if (!(type && type in blocksRegistry)) {
     console.warn(`No block with "${type}" is registered`);
@@ -26,6 +29,14 @@ export function renderBlock(
 
   const BlockComponent = type && blocksRegistry[type];
 
+  const { renderChild = defaultChildRenderer } = BlockComponent || {};
+  const renderChildBlock = (_: BlockDef, j: number) =>
+    renderChild(
+      renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]),
+      j,
+    );
+  const children = childBlocks?.length ? childBlocks.map(renderChildBlock) : null;
+
   return blockDecorator(
     {
       blockClassName: `scroll-mt-12 ${style2className(block.style)}`, // TODO scroll-mt-12 ? here?
@@ -33,21 +44,15 @@ export function renderBlock(
       ancestors,
       // Adjusted by decorator block and blockClassName
       render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
-        const { version, content, anchor, labels, blocks: childBlocks } = adjustedBlock;
-
-        const children = childBlocks
-          ? childBlocks.map((_, j) =>
-              renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]),
-            )
-          : null;
+        const { version, anchor, labels, content } = adjustedBlock;
 
         return BlockComponent ? (
           <BlockComponent
             key={key}
             className={adjustedBlockClassName}
-            version={version}
             context={context}
             page={page}
+            version={version}
             anchor={anchor}
             labels={labels}
             {...content}

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.ui.json

@@ -1 +1,8 @@
-{}
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 6
+    }
+  }
+}

package/mobile/src/components/Footer/Footer.tsx

@@ -1,6 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/ContentPageDef';
-import { Accordion } from '../Accordion/Accordion';
+import type { Fallback } from '../../model/Fallback';
+import { useSitemap } from '../../services/sitemap/useSitemap';
+import { Button } from '../../ui-kit/Button/Button';
+import { Img } from '../../ui-kit/Img/Img';
+import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { AccordionItem } from '../Accordion/AccordionItem';
+import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { Contacts } from './Contacts';
 import type { FooterContent, SubMenuItem } from './FooterContent';
@@ -8,13 +15,6 @@ import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
-import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { Fallback } from '../../model/Fallback';
-import { Button } from '../../ui-kit/Button/Button';
-import { Img } from '../../ui-kit/Img/Img';
-import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import { getAccordionItems } from '../../utils/getAccordionItems';
-
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
 export const Footer = JSX<FooterProps>(
@@ -35,11 +35,13 @@ export const Footer = JSX<FooterProps>(
     return (
       <footer className={`font-sans px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
-        <Accordion
-          context={context}
-          className="!p-0 mb-4"
-          accordionItems={getAccordionItems(sitemap.topItems)}
-        />
+        <AccordionItemsList>
+          {sitemap.topItems?.map((item, i) => (
+            <AccordionItem key={String(i)} context={context} label={item.text}>
+              <LinkList context={context} documents={item.items} />
+            </AccordionItem>
+          ))}
+        </AccordionItemsList>
         <div>{dispositions?.map(renderSubMenuItem)}</div>
         <MobileAppTile
           context={context}

package/mobile/src/components/GracePeriod/GracePeriod.ui.json

@@ -11,5 +11,10 @@
         }
       }
     }
+  },
+  "style": {
+    "ui:options": {
+      "minCols": 6
+    }
   }
 }

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

@@ -2,15 +2,16 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { Fallback } from '../../model/Fallback';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { Fallback } from '../../model/Fallback';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
-import { getAccordionItems } from '../../utils/getAccordionItems';
-import { Accordion } from '../Accordion/Accordion';
+import { AccordionItem } from '../Accordion/AccordionItem';
+import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { LinkList } from '../LinkList/LinkList';
 import { HeaderBurger } from './HeaderBurger';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderTop } from './HeaderTop';
@@ -19,17 +20,19 @@ export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
   ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, page }) => {
+    const { handlerDecorator } = context;
     const router = context.useRouter();
+
     const fallback: Fallback | undefined = page?.fallback;
     const sitemap = useSitemap(fallback);
-    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] = useState(false);
+
     const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
 
     return (
@@ -55,14 +58,16 @@ export const Header = JSX<HeaderProps>(
           <HeaderBurger
             context={context}
             onClick={toggleBurgerMenu}
-            burgerSubMenu={dispositions}
+            burgerSubMenu={sitemap?.dispositions}
             defaultLocation={defaultLocation}
           >
-            <Accordion
-              context={context}
-              accordionItems={getAccordionItems(sitemap.topItems)}
-              className="!p-0 mb-4"
-            />
+            <AccordionItemsList>
+              {sitemap.topItems?.map((item, i) => (
+                <AccordionItem key={String(i)} context={context} label={item.text}>
+                  <LinkList context={context} documents={item.items} />
+                </AccordionItem>
+              ))}
+            </AccordionItemsList>
           </HeaderBurger>
         ) : null}
       </header>

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

@@ -0,0 +1,48 @@
+{
+  "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
+  "investmentZeroColumn": {
+    "title": "Название 1"
+  },
+  "investmentColumns": [
+    {
+      "title": "Название 2",
+      "cells": [
+        {
+          "text": "Ячейка 2-1",
+          "cellColor": "green-dark",
+          "cellSize": "S"
+        }
+      ]
+    },
+    {
+      "title": "Название 3",
+      "cells": [
+        {
+          "text": "Ячейка 3-1",
+          "cellColor": "green-dark",
+          "cellSize": "S"
+        }
+      ]
+    },
+    {
+      "title": "Название 4",
+      "cells": [
+        {
+          "text": "Ячейка 4-1",
+          "cellColor": "green-dark",
+          "cellSize": "L"
+        }
+      ]
+    },
+    {
+      "title": "Название 5",
+      "cells": [
+        {
+          "text": "Ячейка 5-1",
+          "cellColor": "green-dark",
+          "cellSize": "XL"
+        }
+      ]
+    }
+  ]
+}

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -0,0 +1,149 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { List } from '../../ui-kit/List/List';
+import { joinList } from '../../utils/joinList';
+import type {
+  InvestmentCell,
+  InvestmentCellColor,
+  InvestmentCellSize,
+  InvestmentColumn,
+  InvestmentInfoContent,
+  InvestmentZeroColumn,
+} from './InvestmentInfoContent';
+
+const investmentCellColorMap: Record<InvestmentCellColor, string> = {
+  yellow: 'bg-yellow',
+  green: 'bg-green',
+  'green-light': 'bg-green-light',
+  'green-dark': 'bg-green-dark',
+};
+
+const investmentCellSizeMap: Record<InvestmentCellSize, string> = {
+  XS: 'h-[40px]',
+  S: 'h-[68px]',
+  M: 'h-[102px]',
+  L: 'h-[136px]',
+  XL: 'h-[204px]',
+};
+
+export interface InvestmentInfoProps extends InvestmentInfoContent, UniBlockProps {}
+
+export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
+  const {
+    context,
+    className = '',
+    items,
+    isDotted,
+    investmentZeroColumn,
+    investmentColumns,
+    ...rest
+  } = props;
+  const colums = investmentColumns ? [...investmentColumns] : [];
+  if (investmentZeroColumn) {
+    colums.unshift(investmentZeroColumn);
+  }
+
+  return (
+    <BlockWrapper
+      className={`font-sans bg-white p-9 pb-9 ${className}`}
+      context={context}
+      {...rest}
+    >
+      <div className="container text-m-light">
+        {colums?.length ? (
+          <div>
+            <div className="flex items-end px-9 text-white">
+              {joinList(<div className="w-px h-4 bg-main-stroke" />)(
+                colums.map(renderInvestmentColumn),
+              )}
+              <div className="w-px h-4 bg-main-stroke" />
+            </div>
+            <div className="border-t border-main-stroke -mt-2 mx-9" />
+            <div className="flex justify-between mt-3 -mx-10">
+              {colums.map(renderInvestmentColumnTitle)}
+            </div>
+          </div>
+        ) : null}
+
+        {items?.length ? (
+          <List
+            className="mt-9 text-h6"
+            items={items}
+            itemClassName="mb-[7px]"
+            isDotted={isDotted}
+          />
+        ) : null}
+      </div>
+    </BlockWrapper>
+  );
+});
+
+const renderInvestmentColumn = (
+  column: InvestmentColumn | InvestmentZeroColumn,
+  i: number,
+  arr: Array<InvestmentColumn>,
+) => {
+  const isSecondColumn = i === 1;
+  const isLastColumn = i === arr.length - 1;
+
+  return (
+    <div
+      key={`column_${i}`}
+      className={`${getColumnClasses(isSecondColumn, isLastColumn, column.cells)}`}
+    >
+      {column.cells?.length ? (
+        <div className={`w-full ${isLastColumn ? 'border-4 border-green-more-dark p-1' : ''}`}>
+          {column.cells.map(renderInvestmentCell)}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+const getColumnClasses = (
+  isSecondColumn: boolean,
+  isLastColumn: boolean,
+  cells: InvestmentCell[] = [],
+): string =>
+  [
+    cells.length ? 'flex-1' : 'flex-0',
+    cells.length && !isSecondColumn && !isLastColumn ? 'pl-2.5' : '',
+    cells.length && !isLastColumn ? 'pr-2.5 pb-8' : 'pb-6',
+  ].join(' ');
+
+const renderInvestmentCell = (cell: InvestmentCell, i: number) => {
+  const cellSize = cell.cellSize || 'XS';
+  const cellColor = cell.cellColor || 'green';
+
+  return cell.text ? (
+    <div
+      key={`cell_${i}`}
+      className={`flex-1 flex items-center justify-center relative py-2 ${
+        investmentCellSizeMap[cellSize]
+      } ${investmentCellColorMap[cellColor]} ${cellSize === 'XS' ? 'px-3' : 'px-11'}`}
+    >
+      <div className="text-center">{cell.text}</div>
+    </div>
+  ) : null;
+};
+
+const renderInvestmentColumnTitle = (
+  column: InvestmentColumn | InvestmentZeroColumn,
+  i: number,
+  arr: Array<InvestmentColumn>,
+) => {
+  const isFirstColumn = i === 0;
+  const isLastColumn = i === arr.length - 1;
+
+  return (
+    <div
+      key={`title_${i}`}
+      className={`flex-1 max-w-[180px] text-center px-2 ${isFirstColumn ? 'pl-9' : ''} ${
+        isLastColumn ? 'pr-9' : ' '
+      }`}
+    >
+      {column.title}
+    </div>
+  );
+};

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

@@ -0,0 +1,16 @@
+{
+  "content": {
+    "bonusItems": {
+      "items": {
+        "bonusItemContent": {
+          "bonusType": {
+            "ui:widget": "hidden"
+          },
+          "image": {
+            "ui:field": "icon"
+          }
+        }
+      }
+    }
+  }
+}

package/mobile/src/components/InvestmentInfo/InvestmentInfoContent.ts

@@ -0,0 +1,55 @@
+import type { ListContent } from '../../ui-kit/List/ListContent';
+
+/**
+ * @title Цвет
+ * @enumNames ["Желтый", "Светло-зеленый", "Зеленый", "Тёмно-зеленый"]
+ */
+export type InvestmentCellColor = 'yellow' | 'green-light' | 'green' | 'green-dark';
+
+/**
+ * @title Высота
+ * @enumNames ["Очень большой", "Большой", "Средний", "Маленький", "Очень маленький"]
+ */
+export type InvestmentCellSize = 'XL' | 'L' | 'M' | 'S' | 'XS';
+
+/**
+ * @title Ячейка
+ */
+export type InvestmentCell = {
+  /** @title Текст */
+  text?: string;
+  cellColor?: InvestmentCellColor;
+  cellSize?: InvestmentCellSize;
+};
+
+/**
+ * @title Элемент данных 1
+ */
+export type InvestmentZeroColumn = {
+  /** @title Название */
+  title?: string;
+  /** @hidden */
+  cells?: InvestmentCell[];
+};
+
+/**
+ * @title Элемент данных
+ */
+export type InvestmentColumn = {
+  /** @title Название */
+  title?: string;
+  /** @title Ячейки */
+  cells?: InvestmentCell[];
+};
+
+/**
+ * @title Блок инвестиций
+ */
+export type InvestmentInfoContent = ListContent & {
+  /** @title Буллиты */
+  isDotted?: boolean;
+  /** @title Элемент данных 1 */
+  investmentZeroColumn?: InvestmentZeroColumn;
+  /** @title Остальные элементы данных */
+  investmentColumns?: InvestmentColumn[];
+};

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

@@ -1,56 +1,3 @@
 {
-  "title": "Другие продукты",
-  "blockItems": [
-    {
-      "label": "Другие продукты 1",
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    },
-    {
-      "label": "Другие продукты 2",
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    },
-    {
-      "label": "Другие продукты 3",
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    }
-  ]
+  "title": "Другие продукты"
 }