@redneckz/wildless-cms-uni-blocks 0.2.93 → 0.2.94

package/src/components/ContentPage/ContentPage.page.json

@@ -11,26 +11,32 @@
   "date": "2022-04-08",
   "style": ["p-20", "pt-0", "gap-5", "bg-secondary-light"],
   "likeControl": true,
-  "blocks": [
-    {
-      "type": "Header",
-      "style": ["col-span-12", "-mx-20", "mb-5", "shadow-[0_8px_32px_0px_#00000014]"],
-      "content": {
-        "defaultLocation": "Москва",
-        "topItems": [
-          {
-            "href": "https://rshb.ru/",
-            "text": "Бизнес клиентам",
-            "target": "_blank"
-          },
-          {
-            "href": "https://rshb.ru/",
-            "text": "Частным клиентам",
-            "target": "_blank"
+  "slots": {
+    "header": {
+      "blocks": [
+        {
+          "type": "Header",
+          "style": ["-mx-20", "mb-5", "shadow-[0_8px_32px_0px_#00000014]"],
+          "content": {
+            "defaultLocation": "Москва",
+            "topItems": [
+              {
+                "href": "https://rshb.ru/",
+                "text": "Бизнес клиентам",
+                "target": "_blank"
+              },
+              {
+                "href": "https://rshb.ru/",
+                "text": "Частным клиентам",
+                "target": "_blank"
+              }
+            ]
           }
-        ]
-      }
-    },
+        }
+      ]
+    }
+  },
+  "blocks": [
     {
       "type": "ProductGallery",
       "style": ["col-span-12"],
@@ -1523,11 +1529,7 @@
                 {
                   "label": "Бесплатно",
                   "list": {
-                    "items": [
-                      "item 1",
-                      "item 2",
-                      "item 3"
-                    ]
+                    "items": ["item 1", "item 2", "item 3"]
                   }
                 }
               ],
@@ -1575,11 +1577,7 @@
                 {
                   "list": {
                     "isDotted": false,
-                    "items": [
-                      "item 1",
-                      "item 2",
-                      "item 3"
-                    ]
+                    "items": ["item 1", "item 2", "item 3"]
                   }
                 }
               ],
@@ -1596,11 +1594,7 @@
                 {
                   "list": {
                     "version": "primary",
-                    "items": [
-                      "item 1",
-                      "item 2",
-                      "item 3"
-                    ]
+                    "items": ["item 1", "item 2", "item 3"]
                   }
                 }
               ],
@@ -1716,11 +1710,7 @@
                 {
                   "label": "Бесплатно",
                   "list": {
-                    "items": [
-                      "item 1",
-                      "item 2",
-                      "item 3"
-                    ]
+                    "items": ["item 1", "item 2", "item 3"]
                   }
                 }
               ],
@@ -1768,11 +1758,7 @@
                 {
                   "list": {
                     "isDotted": false,
-                    "items": [
-                      "item 1",
-                      "item 2",
-                      "item 3"
-                    ]
+                    "items": ["item 1", "item 2", "item 3"]
                   }
                 }
               ],
@@ -1789,11 +1775,7 @@
                 {
                   "list": {
                     "version": "primary",
-                    "items": [
-                      "item 1",
-                      "item 2",
-                      "item 3"
-                    ]
+                    "items": ["item 1", "item 2", "item 3"]
                   }
                 }
               ],

package/src/components/ContentPage/ContentPage.tsx

@@ -3,6 +3,7 @@ import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
 import type { BlockContent } from '../BlockContent';
 import { LikeControl } from '../LikeControl/LikeControl';
 import { Placeholder } from '../Placeholder/Placeholder';
+import { ContentPageContext } from './ContentPageContext';
 
 interface BlockDecoratorProps<VNode> {
   blockClassName: string;
@@ -20,12 +21,21 @@ export type JSXBlock = (
   context?: any,
 ) => any;
 
+export type BlocksRegistry = Record<string, JSXBlock>;
+
 export interface ContentPageProps extends UniBlockProps {
-  blocksRegistry: Record<string, JSXBlock>;
+  blocksRegistry: BlocksRegistry;
   data: ContentPageDef;
   blockDecorator?: BlockDecorator;
 }
 
+export interface RenderBlockFunc {
+  block: BlockDef;
+  blockDecorator: BlockDecorator;
+  blocksRegistry: BlocksRegistry;
+  context: ContentPageContext;
+}
+
 const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
   render({ blockClassName, block });
 
@@ -34,14 +44,32 @@ export const ContentPage = JSX<ContentPageProps>(
     className,
     context,
     blocksRegistry,
-    data: { style: pageStyle, blocks, likeControl, colorPalette = 'pc' },
+    data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' },
     blockDecorator = defaultBlockDecorator,
   }) => {
+    const { header } = slots;
+
     return (
-      <section className="relative" data-theme={colorPalette}>
-        <div className={`grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className || ''}`}>
-          {blocks?.length ? blocks.map(renderBlock) : null}
-        </div>
+      <section
+        className={`relative ${style2className(pageStyle)} ${className || ''}`}
+        data-theme={colorPalette}
+      >
+        {header?.blocks?.length ? (
+          <div className={`${style2className(header?.style)}`}>
+            {header.blocks.map((block, i) =>
+              renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+            )}
+          </div>
+        ) : null}
+
+        {blocks?.length ? (
+          <div className="container grid grid-cols-12 gap-1">
+            {blocks.map((block, i) =>
+              renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+            )}
+          </div>
+        ) : null}
+
         {likeControl && (
           <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
             <LikeControl
@@ -52,39 +80,46 @@ export const ContentPage = JSX<ContentPageProps>(
         )}
       </section>
     );
-
-    function renderBlock(block: BlockDef, i: number) {
-      const { type } = block;
-      if (!(type in blocksRegistry)) {
-        console.warn(`No block with "${type}" is registered`);
-      }
-
-      const BlockComponent = blocksRegistry[type] || Placeholder;
-      return blockDecorator(
-        {
-          blockClassName: style2className(block.style),
-          block,
-          render: (props) => {
-            const { version, content, blocks } = props.block;
-            return (
-              <BlockComponent
-                key={`${type}-${i}`}
-                className={props.blockClassName}
-                version={version}
-                context={context}
-                {...content}
-              >
-                {blocks?.length ? blocks.map(renderBlock) : null}
-              </BlockComponent>
-            );
-          },
-        },
-        `block-${i}`,
-      );
-    }
   },
 );
 
+function renderBlock(
+  { block, blockDecorator, blocksRegistry, context }: RenderBlockFunc,
+  i: number,
+) {
+  const { type } = block;
+  if (!(type in blocksRegistry)) {
+    console.warn(`No block with "${type}" is registered`);
+  }
+
+  const BlockComponent = blocksRegistry[type] || Placeholder;
+  return blockDecorator(
+    {
+      blockClassName: style2className(block.style),
+      block,
+      render: (props) => {
+        const { version, content, blocks } = props.block;
+        return (
+          <BlockComponent
+            key={`${type}-${i}`}
+            className={props.blockClassName}
+            version={version}
+            context={context}
+            {...content}
+          >
+            {blocks?.length
+              ? blocks.map((block, i) =>
+                  renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+                )
+              : null}
+          </BlockComponent>
+        );
+      },
+    },
+    `block-${i}`,
+  );
+}
+
 function style2className(style: string[] | undefined | null): string {
   return style ? style.join(' ') : '';
 }

package/src/components/ContentPage/toMobilePage.ts

@@ -1,13 +1,30 @@
 import type { BlockDef, ContentPageDef } from '../../types';
 
 export function toMobilePage(contentPage: ContentPageDef): ContentPageDef {
-  const blocks = contentPage.blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
+  const { blocks, slots } = contentPage;
+
   return {
     ...contentPage,
-    blocks,
+    blocks: getMobileBlocks(blocks),
+    slots:
+      slots &&
+      Object.keys(slots).reduce(
+        (res, key) => ({
+          ...res,
+          [key]: {
+            ...slots[key],
+            blocks: getMobileBlocks(slots[key].blocks),
+          },
+        }),
+        {},
+      ),
   };
 }
 
+function getMobileBlocks(blocks?: BlockDef[]) {
+  return blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
+}
+
 function toMobileBlock(block: BlockDef): BlockDef {
   const { mobile } = block;
   if (mobile) {

package/src/components/Header/Header.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { useSitemap } from '../../hooks/useSitemap';
 import { mergeTopItems } from '../../mergeTopItems';
 import type { UniBlockProps } from '../../types';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
-import { useLink } from '../../hooks/useLink';
-import { useSitemap } from '../../hooks/useSitemap';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { isSubItemActive } from './isSubItemActive';
@@ -43,17 +43,19 @@ export const Header = JSX<HeaderProps>(({ className, defaultLocation, context, t
 
   return (
     <header className={`pt-5 pb-8 px-20 bg-white ${className || ''}`}>
-      <div className="flex items-center">
-        <Logo className="mr-8" />
-        {topMenu}
-        <HeaderSecondaryMenu
-          context={context}
-          className="ml-auto"
-          defaultLocation={defaultLocation}
-        />
+      <div className="container">
+        <div className="flex items-center">
+          <Logo className="mr-8" />
+          {topMenu}
+          <HeaderSecondaryMenu
+            context={context}
+            className="ml-auto"
+            defaultLocation={defaultLocation}
+          />
+        </div>
+        <div className="mt-5 h-[1px] bg-main-divider" />
+        <nav className="mt-5">{subMenu}</nav>
       </div>
-      <div className="mt-5 h-[1px] bg-main-divider" />
-      <nav className="mt-5">{subMenu}</nav>
     </header>
   );
 });

package/src/components/LinkDocs/LinkDocs.example.json

@@ -0,0 +1,26 @@
+{
+  "title": "Дополнительные документы",
+  "icon": "DocIcon",
+  "documents": [
+    {
+      "text": "Документ №1",
+      "href": "/documents/document1.doc",
+      "fileSize": "123КБ"
+    },
+    {
+      "text": "Документ №2",
+      "href": "/documents/document2.rtf",
+      "target": "_blank"
+    },
+    {
+      "text": "Документ №3",
+      "href": "/abc3/map.jpeg",
+      "fileSize": "2МБ"
+    },
+    {
+      "text": "Документ №4",
+      "href": "/abc/map.rar"
+    }
+  ],
+  "columnsMode": "double"
+}

package/src/components/LinkDocs/LinkDocs.fixture.tsx

@@ -27,9 +27,9 @@ export const LINK_DOCS: LinkDocsContent = {
   ],
 };
 
-export const LINK_DOCS_TWO_COLUMNS: LinkDocsContent = {
+export const LINK_DOCS_ONE_COLUMN: LinkDocsContent = {
   ...LINK_DOCS,
-  columnsMode: 'double',
+  columnsMode: 'single',
 };
 
 export const LINK_DOCS_ANOTHER_ICON: LinkDocsContent = {
@@ -44,8 +44,8 @@ export const LINK_DOCS_NO_ICON: LinkDocsContent = {
 };
 
 export default {
-  'one column': <LinkDocs context={context} {...LINK_DOCS} />,
-  'two column': <LinkDocs context={context} {...LINK_DOCS_TWO_COLUMNS} />,
+  'two columns (default)': <LinkDocs context={context} {...LINK_DOCS} />,
+  'one column': <LinkDocs context={context} {...LINK_DOCS_ONE_COLUMN} />,
   'another icon': <LinkDocs context={context} {...LINK_DOCS_ANOTHER_ICON} />,
-  'no icon': <LinkDocs context={context} {...LINK_DOCS_NO_ICON} />,
+  'no icon and title': <LinkDocs context={context} {...LINK_DOCS_NO_ICON} />,
 };

package/src/components/LinkDocs/LinkDocs.tsx

@@ -13,7 +13,7 @@ const titleAlignStyleMap: Record<AlignType, string> = {
 
 const titleMarginsStyleMap: Record<LinkColumnsMode, string> = {
   double: 'mb-8',
-  single: '',
+  single: 'mb-[26px]',
 };
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
@@ -24,7 +24,7 @@ const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
 export const LinkDocs = JSX<LinkDocsProps>(
-  ({ className, title, align, documents, icon, columnsMode = 'single' }) => {
+  ({ className, title, align, documents, icon, columnsMode = 'double' }) => {
     const containerClasses = linkColumnsModeStyleMap[columnsMode];
 
     return (
@@ -49,7 +49,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
                   role="listitem"
                   {...linkProps}
                 >
-                  {icon && <Icon className="mr-3.5" name={icon} width="24px" height="24px" />}
+                  {icon && <Icon className="mr-2.5" name={icon} width="24px" height="24px" />}
                   <span className="self-center">
                     {text}
                     <span className="text-secondary-text group-hover:text-primary-main">

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -6,6 +6,7 @@ import type { Picture } from '../../model/Picture';
 const image: Picture = {
   src: 'money-1.png',
   format: 'webp',
+  alt: 'Потребительский кредит наличными',
   size: {
     width: 280,
     height: 280,

package/src/components/ProductBlock/ProductBlock.tsx

@@ -14,7 +14,9 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
   const { handlerDecorator } = context;
   return (
     <section
-      className={`font-sans bg-white pt-10 pl-[50px] pb-[50px] pr-[7.5rem] ${className || ''}`}
+      className={`font-sans bg-white pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${
+        className || ''
+      }`}
     >
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -43,7 +43,7 @@ function renderBenefit(benefit: Benefit, i: number) {
           height="24"
         />
       )}
-      <div className="flex gap-1 flex-col h-full">
+      <div className="flex gap-1 flex-col h-full max-w-[149px]">
         <h4 className="font-medium text-primary-text text-xl m-0">{benefit.label}</h4>
         {benefit.description && (
           <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>

package/src/types.ts

@@ -15,6 +15,15 @@ export interface BlockDef {
   };
 }
 
+export interface Slot {
+  style?: string[];
+  blocks?: BlockDef[];
+}
+
+export interface SlotsMap {
+  header?: Slot;
+}
+
 export interface ContentPageMeta {
   title: string;
   slug: string;
@@ -26,7 +35,8 @@ export interface ContentPageMeta {
 
 export interface ContentPageDef extends ContentPageMeta {
   style?: string[];
-  blocks?: BlockDef[];
+  blocks?: BlockDef[]; //! for compatibility
+  slots?: SlotsMap;
   likeControl?: boolean;
   colorPalette?: ColorPalette;
 }