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

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/ContentPageDef';
-import type { CardTransferContent } from './CardTransferContent';
+import { useLink } from '../../hooks/useLink';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { getDisabledButtonClasses } from '../../ui-kit/Button/getDisabledButtonClasses';
 import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
-import { useLink } from '../../hooks/useLink';
+import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { getSanitizedValue } from '../../utils/getSanitizedValue';
+import type { CardTransferContent } from './CardTransferContent';
 
 const AMOUNT_KEY = 'amount';
 const FORM_URL = 'https://www.rshb.ru/p2p/';

package/mobile/src/components/Catalog/Catalog.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
@@ -58,7 +58,7 @@ const renderCatalogCard = (context: ContentPageContext) => (card: CatalogCardTyp
 interface RenderNavButtonsProps {
   cardsCount: number;
   activeCardIndex: number;
-  setActiveCardIndex: (number) => void;
+  setActiveCardIndex: (index: number) => void;
 }
 
 const renderNavButtons = ({

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

@@ -1 +1,11 @@
-{}
+{
+  "content": {
+    "cards": {
+      "items": {
+        "price": {
+          "ui:field": "number"
+        }
+      }
+    }
+  }
+}

package/mobile/src/components/Catalog/CatalogCard.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';

package/mobile/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { CellData, ComparisonTableContent } from './ComparisonTableContent';

package/mobile/src/components/ComparisonTable/TableColumn.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../../ui-kit/Button/Button';
 import type { CellData, ColumnHeader } from './ComparisonTableContent';
 import { GRADIENT } from './constants';

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

@@ -0,0 +1,51 @@
+{
+  "contactsBlockVersion": "secondary",
+  "info": [
+    {
+      "title": "Заголовок 1",
+      "description": "Описание 1",
+      "button": {
+        "href": "#",
+        "text": "Кнопка 1",
+        "target": "_blank",
+        "version": "secondary"
+      }
+    },
+    {
+      "title": "Заголовок 2",
+      "description": "Описание 2",
+      "button": {
+        "href": "#",
+        "text": "Кнопка 2",
+        "target": "_blank",
+        "version": "secondary"
+      }
+    }
+  ],
+  "contacts": [
+    [
+      {
+        "title": "Заголовок 3",
+        "description": "Описание 3",
+        "additionalDescription": "Доп описание 3"
+      },
+      {
+        "title": "Заголовок 4",
+        "description": "Описание 4",
+        "additionalDescription": "Доп описание 4"
+      }
+    ],
+    [
+      {
+        "title": "Заголовок 5",
+        "description": "Описание 5",
+        "additionalDescription": "Доп описание 5"
+      },
+      {
+        "title": "Заголовок 6",
+        "description": "Описание 6",
+        "additionalDescription": "Доп описание 6"
+      }
+    ]
+  ]
+}

package/mobile/src/components/ContactsBlock/ContactsBlock.tsx

@@ -0,0 +1,70 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Button } from '../../ui-kit/Button/Button';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import type { ContactItemProps, ContactsBlockContent, InfoItemProps } from './ContactsBlockContent';
+
+export interface ContactsBlockProps extends ContactsBlockContent, UniBlockProps {}
+
+interface RenderContactsColumnProps {
+  contactsColumn?: ContactItemProps[];
+  index?: number;
+}
+
+const contactsBlockStyleMap = {
+  primary: 'bg-white',
+  secondary: 'bg-primary-main text-white',
+};
+
+export const ContactsBlock = JSX<ContactsBlockProps>(
+  ({ className = '', contacts, context, info, contactsBlockVersion = 'secondary', ...rest }) => {
+    return (
+      <BlockWrapper
+        context={context}
+        className={`${contactsBlockStyleMap[contactsBlockVersion]} flex p-12 ${className}`}
+        {...rest}
+      >
+        {info ? renderInfo(info) : null}
+        {contacts ? renderContacts(contacts) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderInfo = (info: InfoItemProps[]) => (
+  <div className="flex grow basis-0 pr-11">
+    {info.map(({ title, description, button }, index) => (
+      <div className="grow basis-0 pr-11 last:pr-0" key={String(index)}>
+        <Heading as="h5" headingType="h5" title={title} className="pb-2.5" />
+        <Description className="text-l-light pb-6" description={description} />
+        {button ? <Button {...button} /> : null}
+      </div>
+    ))}
+  </div>
+);
+
+const renderContacts = (contacts: ContactItemProps[][]) => (
+  <div className="flex grow basis-0">
+    {contacts.map((contactsColumn, index) => renderContactsColumn({ contactsColumn, index }))}
+  </div>
+);
+
+const renderContactsColumn = ({ contactsColumn, index }: RenderContactsColumnProps) =>
+  contactsColumn ? (
+    <div className="flex flex-col grow basis-0 pr-11" key={String(index)}>
+      {contactsColumn.map(({ title, description, additionalDescription }, key) => (
+        <div className="pr-11 last:pr-0 last:mt-5" key={String(key)}>
+          <Heading as="h5" headingType="h5" title={title} />
+          <Description className="text-l-light mt-2.5" description={description} />
+          {additionalDescription ? (
+            <Description
+              className="text-m-light mt-1.5 opacity-80"
+              description={additionalDescription}
+            />
+          ) : null}
+        </div>
+      ))}
+    </div>
+  ) : null;

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

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

package/mobile/src/components/ContactsBlock/ContactsBlockContent.ts

@@ -0,0 +1,39 @@
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Контакты
+ */
+export interface ContactsBlockContent {
+  /**
+   * @title Данные
+   * @maxItems 2
+   * */
+  info?: InfoItemProps[];
+  /**
+   * @title Контакты
+   * @maxItems 2
+   * */
+  contacts?: ContactItemProps[][];
+  contactsBlockVersion?: 'secondary';
+}
+
+/**
+ * @title Элемент плитки
+ */
+export interface ContactItemProps {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /** @title Описание */
+  description?: string;
+  /** @title Заголовок */
+  title?: string;
+}
+
+/**
+ * @title Элемент плитки
+ */
+export interface InfoItemProps extends HeadlineCommonProps {
+  /** @title Кнопка */
+  button?: ButtonProps;
+}

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

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockAncestors, BlockDecorator } from '../../model/BlockDecorator';
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
-import type { BlockDef, ContentPageDef, UniBlockProps } from '../../model/ContentPageDef';
+import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { style2className } from '../../utils/style2className';
 import { LikeControl } from '../LikeControl/LikeControl';
 import type { ContentPageContext } from './ContentPageContext';

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

@@ -52,6 +52,7 @@ export function renderBlock(
             className={adjustedBlockClassName}
             context={context}
             page={page}
+            ancestors={ancestors}
             version={version}
             anchor={anchor}
             labels={labels}

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

@@ -0,0 +1,34 @@
+import type { ContentPageMeta } from '../../model/ContentPageDef';
+
+export function renderContentPageHead(data: ContentPageMeta) {
+  const { title, main, og, twitter, jsonLd } = data;
+  const { description, keywords, canonical, robots } = main || {};
+
+  return [
+    <title>{title}</title>,
+    <meta name="viewport" content="width=device-width, initial-scale=1" />,
+    description ? <meta name="description" content={description} /> : null,
+    keywords ? <meta name="keywords" content={keywords.join(',')} /> : null,
+    robots ? <meta name="robots" content={robots.join(',')} /> : null,
+    renderOpenGraph(og),
+    renderTwitter(twitter),
+    canonical ? <link rel="canonical" href={canonical} /> : null,
+    jsonLd ? <script type="application/ld+json">{jsonLd}</script> : null,
+  ].filter(Boolean);
+}
+
+function renderOpenGraph(og: Record<string, string> | undefined) {
+  return og
+    ? Object.entries(og).map(([key, value]) => (
+        <meta key={key} property={`og:${key}`} content={value} />
+      ))
+    : null;
+}
+
+function renderTwitter(twitter: Record<string, string> | undefined) {
+  return twitter
+    ? Object.entries(twitter).map(([key, value]) => (
+        <meta key={key} name={`twitter:${key}`} content={value} />
+      ))
+    : null;
+}

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';

package/mobile/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -1,13 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../../ui-kit/Button/Button';
-import { renderInput } from './renderInput';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { calculateResult, formatValue } from './calculateResult';
 import { callbackCurrencySelect } from './callbackCurrencySelect';
 import { Currency } from './CurrencyProps';
-import type { UniBlockProps } from '../../model/ContentPageDef';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { renderInput } from './renderInput';
 
 export interface ExchangeCurrencyItem {
   code?: Currency;

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useExchangeRates } from '../../hooks/useExchangeRates';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -30,8 +30,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`bg-white text-primary-text font-sans p-9 box-border min-h-[320px] 
-          ${className}`}
+        className={`bg-white text-primary-text font-sans p-9 box-border min-h-[320px] ${className}`}
         {...rest}
       >
         <BaseTile

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ContactInfo } from './FooterContent';
 

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

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { Fallback } from '../../model/Fallback';
+import type { UniBlockProps } from '../../model/JSXBlock';
 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 { AccordionItem } from '../AccordionItem/AccordionItem';
 import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { Contacts } from './Contacts';

package/mobile/src/components/Footer/FooterLink.ts

@@ -1,4 +1,4 @@
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 
 export interface FooterLink extends UniBlockProps {

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { TitleProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { FooterLink } from './FooterLink';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 

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

@@ -1,17 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { Fallback } from '../../model/Fallback';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import type { TopMenuItem } from '../../services/sitemap/SitemapProps';
 import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { Fallback } from '../../model/Fallback';
+import type { HandlerDecorator, Router } from '../ContentPage/ContentPageContext';
 
 export interface SitemapProps extends UniBlockProps {
   items?: TopMenuItem[];
   fallback?: Fallback;
 }
 
+interface RenderColumnProps {
+  menuItem: TopMenuItem;
+  index: number;
+  router: Router;
+  handlerDecorator?: HandlerDecorator;
+}
+
 export const Sitemap = JSX<SitemapProps>(({ className = '', items, fallback, context }) => {
   const sitemap = useSitemap(fallback);
   const mergedItems = mergeTopItems(sitemap.topItems, items);
@@ -22,13 +30,13 @@ export const Sitemap = JSX<SitemapProps>(({ className = '', items, fallback, con
 
   return (
     <div className={`flex flex-grow items-start justify-between gap-[54px] xl:gap-5 ${className}`}>
-      {mergedItems?.map((_, i) => renderColumn(_, i, linkParams))}
+      {mergedItems?.map((_, i) => renderColumn({ menuItem: _, index: i, ...linkParams }))}
     </div>
   );
 });
 
-const renderColumn = (c: TopMenuItem, index: number, { router, handlerDecorator }) => {
-  const { text, href, items, target } = c;
+const renderColumn = ({ menuItem, index, router, handlerDecorator }: RenderColumnProps) => {
+  const { text, href, items, target } = menuItem;
 
   return (
     <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-3.5">

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { MediaButton } from './MediaButton';
 

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

@@ -4,7 +4,7 @@
   "orientation": "horizontal",
   "cards": [
     {
-      "image": {
+      "icon": {
         "format": "webp",
         "size": {
           "width": 150,
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "image": {
+      "icon": {
         "format": "webp",
         "size": {
           "width": 140,

package/mobile/src/components/Gallery/Gallery.tsx

@@ -3,12 +3,15 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
 import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { ListItemVersion } from '../../ui-kit/List/ListProps';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
+import { Picture } from '../../model/Picture';
 
 export const Gallery = JSX<GalleryProps>(
   ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
@@ -32,7 +35,11 @@ export const Gallery = JSX<GalleryProps>(
   },
 );
 
-function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps[], context) {
+function renderCardsLayout(
+  orientation: ListOrientation,
+  cards: GalleryCardProps[],
+  context: ContentPageContext,
+) {
   return orientation === 'horizontal' ? (
     <SwipeListControl context={context}>{cards?.map(renderCard)}</SwipeListControl>
   ) : (
@@ -48,11 +55,7 @@ function renderCard(card: GalleryCardProps, key: number) {
       key={key}
     >
       <div>
-        {card.image?.src ? (
-          <div className="flex justify-center">
-            <Img className="mb-3.5" image={card.image} />
-          </div>
-        ) : null}
+        {renderImage(card.icon)}
         {card.title ? <h3 className={`text-m-title-xs font-medium m-0`}>{card.title}</h3> : null}
         {card.description ? renderDescription(card) : null}
         {card.items?.length ? renderItems(card.items, card.isDotted, card.version) : null}
@@ -62,14 +65,15 @@ function renderCard(card: GalleryCardProps, key: number) {
   );
 }
 
-function renderButton(button) {
-  return (
-    <Button
-      className="mt-3"
-      appendLeft={button?.icon && <Img image={button?.icon} width="24px" height="24px" asSVG />}
-      {...button}
-    />
-  );
+const renderImage = (image?: Picture) =>
+  image?.src || image?.icon ? (
+    <div className="flex justify-center">
+      <Img className="mb-3.5" image={image} />
+    </div>
+  ) : null;
+
+function renderButton(button?: ButtonWithIconProps) {
+  return <Button className="mt-3" {...button} />;
 }
 
 function renderDescription(card: GalleryCardProps) {
@@ -90,7 +94,11 @@ const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
   gray: 'bg-secondary-text',
 };
 
-function renderItems(items: GalleryItemProps[], isDotted, version: BlockVersion = 'primary') {
+function renderItems(
+  items: GalleryItemProps[],
+  isDotted?: boolean,
+  version: BlockVersion = 'primary',
+) {
   return (
     <section className="mt-3">
       {items.map((item, i) => (

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

@@ -1 +1,11 @@
-{}
+{
+  "content": {
+    "cards": {
+      "items": {
+        "additionalDescription": {
+          "ui:field": "hidden"
+        }
+      }
+    }
+  }
+}