@redneckz/wildless-cms-uni-blocks 0.3.54 → 0.3.56

package/mobile/src/components/OtherProducts/OtherProducts.tsx

@@ -6,16 +6,18 @@ import { OtherProductsItem } from './OtherProductsItem';
 export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
 
 export const OtherProducts = JSX<OtherProductsProps>(
-  ({ blockItems, colorPalette, context, className = "" }) => {
+  ({ blockItems, colorPalette, context, className = '' }) => {
     return (
-      <section
-        data-theme={colorPalette || null}
-        className={`font-sans bg-white text-primary-text ${className}`}
-      >
+      <section className={`font-sans bg-white text-primary-text ${className}`}>
         {blockItems?.length ? (
           <div className="list-none m-0 p-0">
             {blockItems.map((item, i) => (
-              <OtherProductsItem key={`BlockItem${i}`} {...item} context={context} />
+              <OtherProductsItem
+                key={`BlockItem${i}`}
+                {...item}
+                dataTheme={colorPalette}
+                context={context}
+              />
             ))}
           </div>
         ) : null}

package/mobile/src/components/OtherProducts/OtherProductsItem.tsx

@@ -4,11 +4,14 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import type { BlockItemCommonProps } from './OtherProductsContent';
 import { OtherProductsItemInner } from './OtherProductsItemInner';
 import { useActiveHandler } from './useActiveHandler';
+import { ColorPalette } from '../../types';
 
-export interface BlockItemProps extends BlockItemCommonProps, UniBlockProps {}
+export interface BlockItemProps extends BlockItemCommonProps, UniBlockProps {
+  dataTheme?: ColorPalette;
+}
 
 export const OtherProductsItem = JSX<BlockItemProps>(
-  ({ label, isExpanded, blocks, columns, context }) => {
+  ({ label, isExpanded, blocks, columns, dataTheme = null, context }) => {
     const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
       context,
       blocks,
@@ -27,6 +30,7 @@ export const OtherProductsItem = JSX<BlockItemProps>(
         ) : null}
         <button
           className="border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer"
+          data-theme={dataTheme}
           onClick={handleToggle}
         >
           <span className="pr-3">{isActive ? 'Скрыть' : label}</span>

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

@@ -12,7 +12,9 @@
     "size": {
       "width": 234,
       "height": 234
-    }
+    },
+    "alt": "",
+    "title": ""
   },
   "items": [
     "Элемент списка 1",
@@ -23,7 +25,12 @@
   "buttons": [
     {
       "text": "Кнопка",
-      "version": "secondary"
+      "version": "secondary",
+      "target": "",
+      "icon": {
+        "alt": "",
+        "title": ""
+      }
     }
   ],
   "version": "primary",

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

@@ -26,7 +26,8 @@
   "buttons": [
     {
       "text": "Кнопка",
-      "version": "primary"
+      "version": "primary",
+      "target": ""
     }
   ]
 }

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -57,7 +57,9 @@ export const ProductTile = JSX<ProductTileProps>(
           }
           image={image?.src && <Img className="mt-auto ml-7" image={image} />}
         >
-          {description && <Description className="mt-4 max-w-[600px]" description={description} />}
+          {description ? (
+            <Description className="mt-4 max-w-[600px]" description={description} />
+          ) : null}
           <div className="flex mt-5 mb-1">
             {benefits?.length ? (
               <div className="mr-8">{benefits.map(renderBenefitLabel)}</div>

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

@@ -6,7 +6,8 @@
     {
       "text": "Все акции",
       "href": "/credits",
-      "version": "secondary"
+      "version": "secondary",
+      "target": ""
     }
   ],
   "version": "secondary"

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

@@ -34,7 +34,7 @@ const renderCellInner = (
     {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 ? renderList(list) : null}
-    {image && <Img image={image} />}
+    {image ? <Img image={image} /> : null}
     {buttons?.length ? renderButtons(buttons) : null}
   </div>
 );

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

@@ -33,7 +33,7 @@ const renderCellInner = (
       <div className="text-m-sm text-secondary-text mt-[3px]">{description}</div>
     ) : null}
     {list?.items?.length ? renderList(list) : null}
-    {image && <Img image={{ ...image, className: 'm-0' }} />}
+    {image ? <Img image={{ ...image, className: 'm-0' }} /> : null}
     {buttons?.length ? renderButtons(buttons) : null}
   </div>
 );

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

@@ -7,13 +7,20 @@
     "format": "webp",
     "size": {
       "width": 445
-    }
+    },
+    "alt": "",
+    "title": ""
   },
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
     {
       "text": "Кнопка",
-      "version": "primary"
+      "version": "primary",
+      "target": "",
+      "icon": {
+        "alt": "",
+        "title": ""
+      }
     }
   ],
   "version": "primary"

package/mobile/src/types.ts

@@ -44,10 +44,16 @@ export interface ContentPageMeta {
   jsonLd?: string;
 }
 
+export interface CustomPageTemplate {
+  content?: Record<string, any>;
+  type?: string;
+}
+
 export interface ContentPageDef extends ContentPageMeta {
   style?: string[];
-  blocks?: BlockDef[]; //! for compatibility
+  blocks?: BlockDef[];
   slots?: SlotsMap;
+  customPageTmpl?: CustomPageTemplate;
   likeControl?: boolean;
   colorPalette?: ColorPalette;
 }

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -31,7 +31,7 @@ export const ListItem = JSX<ListItemProps>(
   ({ className = '', isDotted = true, children, version = 'primary' }) => {
     return (
       <div className={`font-sans flex items-start ${className}`} role="listitem">
-        {isDotted && <div className={getListStyle(version)} />}
+        {isDotted ? <div className={getListStyle(version)} /> : null}
         <span>{children}</span>
       </div>
     );

package/mobile/src/utils/style2className.ts

@@ -0,0 +1,2 @@
+export const style2className = (style: string[] | undefined | null): string =>
+  style ? style.join(' ') : '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.54",
+  "version": "0.3.56",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -29,7 +29,9 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
       />
     )}
     {image?.src && <Img className="mb-[18px]" image={image} />}
-    {title && <Heading headingType="h4" as="h3" className="text-center text-white" title={title} />}
+    {title ? (
+      <Heading headingType="h4" as="h3" className="text-center text-white" title={title} />
+    ) : null}
     {link?.text && (
       <div className="mt-auto w-full">
         <Button

package/src/components/ContentPage/ContentPage.tsx

@@ -2,6 +2,7 @@ import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
 import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
 import { changeHashOnScroll } from '../../utils/changeHashOnScroll';
 import { isSSR } from '../../utils/isSSR';
+import { style2className } from '../../utils/style2className';
 import type { BlockContent } from '../BlockContent';
 import { LikeControl } from '../LikeControl/LikeControl';
 import { Placeholder } from '../Placeholder/Placeholder';
@@ -128,7 +129,3 @@ function renderBlock(
     `block-${i}`,
   );
 }
-
-function style2className(style: string[] | undefined | null): string {
-  return style ? style.join(' ') : '';
-}

package/src/components/ContentPage/ContentPageHead.tsx

@@ -13,13 +13,13 @@ export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data,
     <HeadComponent>
       <title>{title}</title>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
-      {description && <meta name="description" content={description} />}
-      {keywords && <meta name="keywords" content={keywords.join(',')} />}
-      {robots && <meta name="robots" content={robots.join(',')} />}
+      {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} />}
-      {jsonLd && <script type="application/ld+json">{jsonLd}</script>}
+      {canonical ? <link rel="canonical" href={canonical} /> : null}
+      {jsonLd ? <script type="application/ld+json">{jsonLd}</script> : null}
       {children}
     </HeadComponent>
   );

package/src/components/ContentPage/CustomContentPage.tsx

@@ -0,0 +1,82 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ContentPageDef, CustomPageTemplate, UniBlockProps } from '../../types';
+import { style2className } from '../../utils/style2className';
+import { ContentPageContext } from './ContentPageContext';
+
+interface PageDecoratorProps<VNode> {
+  pageClassName: string;
+  pageTemplate: CustomPageTemplate;
+  render: (props: { pageClassName: string; pageTemplate: CustomPageTemplate }) => VNode;
+}
+
+export type PageDecorator<VNode = any> = (
+  props: PageDecoratorProps<VNode>,
+  index?: number | string,
+) => any;
+
+export interface PageTemplate {
+  name: string;
+  template: any;
+}
+
+export type PageTemplatesRegistry = Record<string, PageTemplate>;
+
+export interface CustomContentPageProps extends UniBlockProps {
+  pageTemplatesRegistry: PageTemplatesRegistry;
+  data: ContentPageDef;
+  pageDecorator?: PageDecorator;
+}
+
+export interface RenderPageFunc {
+  pageTemplate: CustomPageTemplate;
+  pageClassName: string;
+  pageDecorator: PageDecorator;
+  pageTemplatesRegistry: PageTemplatesRegistry;
+  context: ContentPageContext;
+}
+
+const defaultPageDecorator: PageDecorator = ({ pageClassName, pageTemplate, render }) =>
+  render({ pageClassName, pageTemplate });
+
+export const CustomContentPage = JSX<CustomContentPageProps>(
+  ({
+    className = '',
+    context,
+    pageTemplatesRegistry,
+    data: { style: pageStyle, customPageTmpl: pageTemplate },
+    pageDecorator = defaultPageDecorator,
+  }) => {
+    return pageTemplate
+      ? renderPage({
+          pageTemplate,
+          pageClassName: `${style2className(pageStyle)} ${className}`,
+          pageDecorator,
+          pageTemplatesRegistry,
+          context,
+        })
+      : null;
+  },
+);
+
+function renderPage({
+  pageTemplate,
+  pageClassName,
+  pageDecorator,
+  pageTemplatesRegistry,
+  context,
+}: RenderPageFunc) {
+  const { type } = pageTemplate;
+  if (!(type && type in pageTemplatesRegistry) || !pageTemplatesRegistry[type].template) {
+    throw new Error(`No page template with "${type}" is registered`);
+  }
+
+  const { template: PageComponent } = pageTemplatesRegistry[type];
+  return pageDecorator({
+    pageClassName,
+    pageTemplate,
+    render: (props) => {
+      const { content } = props.pageTemplate;
+      return <PageComponent className={props.pageClassName} context={context} {...content} />;
+    },
+  });
+}

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

@@ -98,7 +98,7 @@ function renderItems(items: GalleryItem[], version: BlockVersion = 'primary', is
     <section className="mt-3">
       {items.map((item, i) => (
         <div key={String(i)}>
-          {isDotted && <div className={getListStyle(version)} />}
+          {isDotted ? <div className={getListStyle(version)} /> : null}
           <span className="text-m-md font-medium">{item.title}</span>
           <span className={`text-m-sm pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`}>
             {item.text}

package/src/components/Headline/Headline.example.json

@@ -8,6 +8,8 @@
     "size": {
       "width": 180,
       "height": 180
-    }
+    },
+    "alt": "",
+    "title": ""
   }
 }

package/src/components/OtherProducts/OtherProducts.tsx

@@ -6,16 +6,18 @@ import { OtherProductsItem } from './OtherProductsItem';
 export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
 
 export const OtherProducts = JSX<OtherProductsProps>(
-  ({ blockItems, colorPalette, context, className = "" }) => {
+  ({ blockItems, colorPalette, context, className = '' }) => {
     return (
-      <section
-        data-theme={colorPalette || null}
-        className={`font-sans bg-white text-primary-text ${className}`}
-      >
+      <section className={`font-sans bg-white text-primary-text ${className}`}>
         {blockItems?.length ? (
           <div className="list-none m-0 p-0">
             {blockItems.map((item, i) => (
-              <OtherProductsItem key={`BlockItem${i}`} {...item} context={context} />
+              <OtherProductsItem
+                key={`BlockItem${i}`}
+                {...item}
+                dataTheme={colorPalette}
+                context={context}
+              />
             ))}
           </div>
         ) : null}

package/src/components/OtherProducts/OtherProductsItem.tsx

@@ -4,11 +4,14 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import type { BlockItemCommonProps } from './OtherProductsContent';
 import { OtherProductsItemInner } from './OtherProductsItemInner';
 import { useActiveHandler } from './useActiveHandler';
+import { ColorPalette } from '../../types';
 
-export interface BlockItemProps extends BlockItemCommonProps, UniBlockProps {}
+export interface BlockItemProps extends BlockItemCommonProps, UniBlockProps {
+  dataTheme?: ColorPalette;
+}
 
 export const OtherProductsItem = JSX<BlockItemProps>(
-  ({ label, isExpanded, blocks, columns, context }) => {
+  ({ label, isExpanded, blocks, columns, dataTheme = null, context }) => {
     const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
       context,
       blocks,
@@ -27,6 +30,7 @@ export const OtherProductsItem = JSX<BlockItemProps>(
         ) : null}
         <button
           className="border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer"
+          data-theme={dataTheme}
           onClick={handleToggle}
         >
           <span className="pr-3">{isActive ? 'Скрыть' : label}</span>

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

@@ -12,7 +12,9 @@
     "size": {
       "width": 234,
       "height": 234
-    }
+    },
+    "alt": "",
+    "title": ""
   },
   "items": [
     "Элемент списка 1",
@@ -23,7 +25,12 @@
   "buttons": [
     {
       "text": "Кнопка",
-      "version": "secondary"
+      "version": "secondary",
+      "target": "",
+      "icon": {
+        "alt": "",
+        "title": ""
+      }
     }
   ],
   "version": "primary",

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

@@ -26,7 +26,8 @@
   "buttons": [
     {
       "text": "Кнопка",
-      "version": "primary"
+      "version": "primary",
+      "target": ""
     }
   ]
 }

package/src/components/ProductTile/ProductTile.tsx

@@ -57,7 +57,9 @@ export const ProductTile = JSX<ProductTileProps>(
           }
           image={image?.src && <Img className="mt-auto ml-7" image={image} />}
         >
-          {description && <Description className="mt-4 max-w-[600px]" description={description} />}
+          {description ? (
+            <Description className="mt-4 max-w-[600px]" description={description} />
+          ) : null}
           <div className="flex mt-5 mb-1">
             {benefits?.length ? (
               <div className="mr-8">{benefits.map(renderBenefitLabel)}</div>

package/src/components/PromoTile/PromoTile.example.json

@@ -6,7 +6,8 @@
     {
       "text": "Все акции",
       "href": "/credits",
-      "version": "secondary"
+      "version": "secondary",
+      "target": ""
     }
   ],
   "version": "secondary"

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -34,7 +34,7 @@ const renderCellInner = (
     {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 ? renderList(list) : null}
-    {image && <Img image={image} />}
+    {image ? <Img image={image} /> : null}
     {buttons?.length ? renderButtons(buttons) : null}
   </div>
 );

package/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -33,7 +33,7 @@ const renderCellInner = (
       <div className="text-m-sm text-secondary-text mt-[3px]">{description}</div>
     ) : null}
     {list?.items?.length ? renderList(list) : null}
-    {image && <Img image={{ ...image, className: 'm-0' }} />}
+    {image ? <Img image={{ ...image, className: 'm-0' }} /> : null}
     {buttons?.length ? renderButtons(buttons) : null}
   </div>
 );

package/src/components/Tile/Tile.example.json

@@ -7,13 +7,20 @@
     "format": "webp",
     "size": {
       "width": 445
-    }
+    },
+    "alt": "",
+    "title": ""
   },
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
     {
       "text": "Кнопка",
-      "version": "primary"
+      "version": "primary",
+      "target": "",
+      "icon": {
+        "alt": "",
+        "title": ""
+      }
     }
   ],
   "version": "primary"

package/src/types.ts

@@ -44,10 +44,16 @@ export interface ContentPageMeta {
   jsonLd?: string;
 }
 
+export interface CustomPageTemplate {
+  content?: Record<string, any>;
+  type?: string;
+}
+
 export interface ContentPageDef extends ContentPageMeta {
   style?: string[];
-  blocks?: BlockDef[]; //! for compatibility
+  blocks?: BlockDef[];
   slots?: SlotsMap;
+  customPageTmpl?: CustomPageTemplate;
   likeControl?: boolean;
   colorPalette?: ColorPalette;
 }

package/src/ui-kit/Button/Button.tsx

@@ -60,7 +60,6 @@ export const RegularButton = JSX<ButtonCommonProps>(
         onClick={onClick}
         aria-label={ariaLabel}
         role={href ? 'link' : 'button'}
-        data-theme={getColorPalette()}
         {...rest}
       >
         {children}
@@ -80,15 +79,9 @@ const DisabledButton = JSX<ButtonCommonProps>(
         className={`inline-block ${buttonStyle} ${buttonDisabledStyleMap[version] || ''} ${
           rounded ? 'rounded-full' : 'rounded-md'
         } ${className || ''}`}
-        data-theme={getColorPalette()}
       >
         {children}
       </div>
     );
   },
 );
-
-const getColorPalette = () => {
-  const currentTheme = globalThis?.document?.querySelector('[data-theme]');
-  return currentTheme?.getAttribute('data-theme') || 'pc';
-};

package/src/ui-kit/List/ListItem.tsx

@@ -31,7 +31,7 @@ export const ListItem = JSX<ListItemProps>(
   ({ className = '', isDotted = true, children, version = 'primary' }) => {
     return (
       <div className={`font-sans flex items-start ${className}`} role="listitem">
-        {isDotted && <div className={getListStyle(version)} />}
+        {isDotted ? <div className={getListStyle(version)} /> : null}
         <span>{children}</span>
       </div>
     );

package/src/utils/style2className.ts

@@ -0,0 +1,2 @@
+export const style2className = (style: string[] | undefined | null): string =>
+  style ? style.join(' ') : '';