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

package/src/components/InvestmentInfo/InvestmentInfo.fixture.tsx

@@ -0,0 +1,107 @@
+import { context } from '../../react/setup-fixture';
+import { InvestmentInfo } from './InvestmentInfo';
+import type { InvestmentInfoContent } from './InvestmentInfoContent';
+
+export const INVESTMENT_INFO: InvestmentInfoContent = {
+  items: [
+    'Качественные фермерские продукты напрямую от производителей',
+    'Самая большая база сельских туров по России',
+    'Площадки для создания комфортной жизни за городом',
+    'Подробная база вакансий для жителей сельской местности',
+  ],
+  investmentZeroColumn: {
+    title: 'Открытие ИИС',
+  },
+  investmentColumns: [
+    {
+      title: '1 января года, следующего за годом открытия ИИС',
+      cells: [
+        {
+          text: 'Потенциальный доход инвестиций',
+          cellColor: 'green-light',
+        },
+        {
+          text: 'Первый взнос 400 000 ₽',
+          cellColor: 'green-dark',
+          cellSize: 'S',
+        },
+      ],
+    },
+    {
+      title: '1 января второго года после открытия ИИС',
+      cells: [
+        {
+          text: 'Налоговый вычет за 1 год 52 000 ₽',
+          cellColor: 'yellow',
+        },
+        {
+          text: 'Потенциальный доход инвестиций за 2 года',
+          cellColor: 'green-light',
+          cellSize: 'S',
+        },
+        {
+          text: 'Второй взнос 400 000 ₽',
+          cellColor: 'green',
+          cellSize: 'S',
+        },
+        {
+          text: 'Первый взнос 400 000 ₽',
+          cellColor: 'green-dark',
+          cellSize: 'S',
+        },
+      ],
+    },
+    {
+      title: '1 января третьего года после открытия ИИС',
+      cells: [
+        {
+          text: 'Налоговый вычет за 2 год 52 000 ₽',
+          cellColor: 'yellow',
+        },
+        {
+          text: 'Потенциальный доход инвестиций за 3 года',
+          cellColor: 'green-light',
+          cellSize: 'M',
+        },
+        {
+          text: 'Третий взнос — 0 ₽',
+          cellColor: 'green',
+          cellSize: 'S',
+        },
+        {
+          text: 'Первый и второй взносы 800 000 ₽',
+          cellColor: 'green-dark',
+          cellSize: 'L',
+        },
+      ],
+    },
+    {
+      title: 'Возможный вывод средств, закрытие ИИС',
+      cells: [
+        {
+          text: 'Налоговый вычет за 3 года 156 000 ₽',
+          cellColor: 'yellow',
+          cellSize: 'S',
+        },
+        {
+          text: 'Потенциальный доход инвестиций за 3 года',
+          cellColor: 'green-light',
+          cellSize: 'M',
+        },
+        {
+          text: 'Сумма инвестиций за 3 года 1 200 000 ₽',
+          cellColor: 'green-dark',
+          cellSize: 'XL',
+        },
+      ],
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <InvestmentInfo className="col-span-12" context={context} {...INVESTMENT_INFO} />
+    </div>
+  ),
+};

package/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/src/components/InvestmentInfo/InvestmentInfo.ui.json

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

package/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/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": "Другие продукты"
 }

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -1,156 +1,107 @@
 import { context } from '../../react/setup-fixture';
+import { Gallery } from '../Gallery/Gallery';
 import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
+import { Headline } from '../Headline/Headline';
 import { HEADLINE } from '../Headline/Headline.fixture';
+import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { MiniGallery } from '../MiniGallery/MiniGallery';
 import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
+import { OtherProductsItem } from '../OtherProductsItem/OtherProductsItem';
+import { PictureText } from '../PictureText/PictureText';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { ProductBlock } from '../ProductBlock/ProductBlock';
 import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
+import { ProductTile } from '../ProductTile/ProductTile';
 import { PRODUCT_PENSION_TILE, PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { TextBlock } from '../TextBlock/TextBlock';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+import { Tile } from '../Tile/Tile';
 import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
-import type { OtherProductsProps } from './OtherProducts';
 import { OtherProducts } from './OtherProducts';
 
-import type {
-  GalleryBlockListDef,
-  HeadlineBlockListDef,
-  LinkDocsBlockListDef,
-  MiniGalleryBlockListDef,
-  PictureTextBlockListDef,
-  ProductBlockBlockListDef,
-  ProductTileBlockListDef,
-  TextBlockBlockListDef,
-  TileBlockListDef,
-} from '../../ui-kit/BlocksList/BlocksListProps';
+const TEXT_BLOCK_OTHER_BLOCK = (
+  <TextBlock context={context} className="col-span-12" {...TEXT_BLOCK} />
+);
 
-const TEXT_BLOCK_OTHER_BLOCK: TextBlockBlockListDef = {
-  blockListType: 'TextBlock',
-  style: ['col-span-12'],
-  ...TEXT_BLOCK,
-};
+const PRODUCT_BLOCK_OTHER_BLOCK = (
+  <ProductBlock context={context} className="col-span-6" {...PRODUCT_BLOCK} />
+);
 
-const PRODUCT_BLOCK_OTHER_BLOCK: ProductBlockBlockListDef = {
-  blockListType: 'ProductBlock',
-  style: ['col-span-6'],
-  ...PRODUCT_BLOCK,
-};
+const TILES_OTHER_BLOCK = <Tile context={context} className="col-span-12" {...TILE} />;
 
-const TILES_OTHER_BLOCK: TileBlockListDef = {
-  blockListType: 'Tile',
-  style: ['col-span-12'],
-  ...TILE,
-};
+const TILES_PREMIUM_OTHER_BLOCK = (
+  <Tile context={context} className="col-span-6" {...TILE_PREMIUM} />
+);
 
-const TILES_PREMIUM_OTHER_BLOCK: TileBlockListDef = {
-  blockListType: 'Tile',
-  style: ['col-span-6'],
-  ...TILE_PREMIUM,
-};
+const PRODUCT_TILES_OTHER_BLOCK = (
+  <ProductTile context={context} className="col-span-6" {...PRODUCT_TILE} />
+);
 
-const PRODUCT_TILES_OTHER_BLOCK: ProductTileBlockListDef = {
-  blockListType: 'ProductTile',
-  style: ['col-span-6'],
-  ...PRODUCT_TILE,
-};
+const PRODUCT_PENSION_TILES_OTHER_BLOCK = (
+  <ProductTile context={context} className="col-span-6" {...PRODUCT_PENSION_TILE} />
+);
 
-const PRODUCT_PENSION_TILES_OTHER_BLOCK: ProductTileBlockListDef = {
-  blockListType: 'ProductTile',
-  style: ['col-span-6'],
-  ...PRODUCT_PENSION_TILE,
-};
+const HEADLINE_OTHER_BLOCK = <Headline context={context} className="col-span-12" {...HEADLINE} />;
 
-const HEADLINE_OTHER_BLOCK: HeadlineBlockListDef = {
-  blockListType: 'Headline',
-  style: ['col-span-12'],
-  ...HEADLINE,
-};
+const PICTURE_TEXT_OTHER_BLOCK = (
+  <PictureText context={context} className="col-span-12" {...PICTURE_TEXT} />
+);
 
-const PICTURE_TEXT_OTHER_BLOCK: PictureTextBlockListDef = {
-  blockListType: 'PictureText',
-  style: ['col-span-12'],
-  ...PICTURE_TEXT,
-};
-
-const LINK_DOCS_OTHER_BLOCK: LinkDocsBlockListDef = {
-  blockListType: 'LinkDocs',
-  style: ['col-span-12'],
-  ...linkDocsContentExample,
-};
+const LINK_DOCS_OTHER_BLOCK = (
+  <LinkDocs context={context} className="col-span-12" {...linkDocsContentExample} />
+);
 
-const GALLERY_OTHER_BLOCK: GalleryBlockListDef = {
-  blockListType: 'Gallery',
-  style: ['col-span-12'],
-  ...GALLERY,
-};
+const GALLERY_OTHER_BLOCK = <Gallery className="col-span-12" {...GALLERY} />;
 
-const MINI_GALLERY_OTHER_BLOCK: MiniGalleryBlockListDef = {
-  blockListType: 'MiniGallery',
-  style: ['col-span-12'],
-  ...MINI_GALLERY,
-};
+const MINI_GALLERY_OTHER_BLOCK = <MiniGallery className="col-span-12" {...MINI_GALLERY} />;
 
-const propsBlock: OtherProductsProps = {
-  context,
-  colorPalette: 'pc',
-  blockItems: [
-    {
-      label: 'OtherProducts №1 Tiles',
-      blocks: [
-        TILES_PREMIUM_OTHER_BLOCK,
-        TILES_PREMIUM_OTHER_BLOCK,
-        TILES_OTHER_BLOCK,
-        TILES_OTHER_BLOCK,
-      ],
-    },
-    {
-      label: 'OtherProducts №2 Product_Tiles',
-      blocks: [
-        PRODUCT_TILES_OTHER_BLOCK,
-        PRODUCT_TILES_OTHER_BLOCK,
-        PRODUCT_PENSION_TILES_OTHER_BLOCK,
-        PRODUCT_PENSION_TILES_OTHER_BLOCK,
-      ],
-    },
-    {
-      label: 'OtherProducts №3 Product_Block',
-      blocks: [PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK],
-    },
-    {
-      label: 'OtherProducts №4 Text_Block',
-      blocks: [
-        TEXT_BLOCK_OTHER_BLOCK,
-        TEXT_BLOCK_OTHER_BLOCK,
-        TEXT_BLOCK_OTHER_BLOCK,
-        TEXT_BLOCK_OTHER_BLOCK,
-      ],
-    },
-    {
-      label: 'OtherProducts №5 Picture_Text',
-      blocks: [PICTURE_TEXT_OTHER_BLOCK],
-    },
-    {
-      label: 'OtherProducts №6 Headline',
-      blocks: [HEADLINE_OTHER_BLOCK],
-    },
-    {
-      label: 'OtherProducts №7 Link_Docs',
-      blocks: [LINK_DOCS_OTHER_BLOCK],
-    },
-    {
-      label: 'OtherProducts №8 Gallery',
-      blocks: [GALLERY_OTHER_BLOCK, GALLERY_OTHER_BLOCK],
-    },
-    {
-      label: 'OtherProducts №9 Mini_Gallery',
-      blocks: [MINI_GALLERY_OTHER_BLOCK, MINI_GALLERY_OTHER_BLOCK],
-    },
-  ],
-};
+export const OTHER_PRODUCTS_ITEM = (
+  <OtherProductsItem context={context} label="OtherProducts №1 Tiles">
+    {[TILES_PREMIUM_OTHER_BLOCK, TILES_PREMIUM_OTHER_BLOCK, TILES_OTHER_BLOCK, TILES_OTHER_BLOCK]}
+  </OtherProductsItem>
+);
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <OtherProducts className="col-span-12" {...propsBlock} />
+      <OtherProducts context={context} className="col-span-12">
+        {OTHER_PRODUCTS_ITEM}
+        <OtherProductsItem context={context} label="OtherProducts №2 Product_Tiles">
+          {[
+            PRODUCT_TILES_OTHER_BLOCK,
+            PRODUCT_TILES_OTHER_BLOCK,
+            PRODUCT_PENSION_TILES_OTHER_BLOCK,
+            PRODUCT_PENSION_TILES_OTHER_BLOCK,
+          ]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №3 Product_Block">
+          {[PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №4 Text_Block">
+          {[
+            TEXT_BLOCK_OTHER_BLOCK,
+            TEXT_BLOCK_OTHER_BLOCK,
+            TEXT_BLOCK_OTHER_BLOCK,
+            TEXT_BLOCK_OTHER_BLOCK,
+          ]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №5 Picture_Text">
+          {[PICTURE_TEXT_OTHER_BLOCK]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №6 Headline">
+          {[HEADLINE_OTHER_BLOCK]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №7 Link_Docs">
+          {[LINK_DOCS_OTHER_BLOCK]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №8 Gallery">
+          {[GALLERY_OTHER_BLOCK, GALLERY_OTHER_BLOCK]}
+        </OtherProductsItem>
+        <OtherProductsItem context={context} label="OtherProducts №9 Mini_Gallery">
+          {[MINI_GALLERY_OTHER_BLOCK, MINI_GALLERY_OTHER_BLOCK]}
+        </OtherProductsItem>
+      </OtherProducts>
     </div>
   ),
 };

package/src/components/OtherProducts/OtherProducts.tsx

@@ -1,32 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { JSXBlock } from '../../model/BlocksRegistry';
 import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { OtherProductsContent } from './OtherProductsContent';
-import { OtherProductsItem } from './OtherProductsItem';
 
 export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
 
 export const OtherProducts = JSX<OtherProductsProps>(
-  ({ blockItems, colorPalette, context, className = '', ...rest }) => {
-    return (
-      <BlockWrapper
-        context={context}
-        className={`font-sans text-primary-text ${className}`}
-        {...rest}
-      >
-        {blockItems?.length ? (
-          <div className="box-border1">
-            {blockItems.map((item, i) => (
-              <OtherProductsItem
-                key={`BlockItem${i}`}
-                {...item}
-                dataTheme={colorPalette}
-                context={context}
-              />
-            ))}
-          </div>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
-);
+  ({ context, className = '', children, ...rest }) => (
+    <BlockWrapper
+      context={context}
+      className={`font-sans text-primary-text ${className}`}
+      {...rest}
+    >
+      {children ? <div className="box-border1">{children}</div> : null}
+    </BlockWrapper>
+  ),
+) as JSXBlock<OtherProductsProps>;
+
+OtherProducts.childrenTypes = ['OtherProductsItem'];