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

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

@@ -1,59 +1,63 @@
+import type { BlockDef } from '../../model/ContentPageDef';
 import { context } from '../../react/setup-fixture';
-import type {
-  HeadlineBlockListDef,
-  LinkDocsBlockListDef,
-  TextBlockBlockListDef,
-} from '../../ui-kit/BlocksList/BlocksListProps';
+import { AccordionItem } from '../AccordionItem/AccordionItem';
+import { Headline } from '../Headline/Headline';
 import { HEADLINE } from '../Headline/Headline.fixture';
+import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { TextBlock } from '../TextBlock/TextBlock';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 
-const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockBlockListDef = {
-  blockListType: 'TextBlock',
-  ...TEXT_BLOCK,
-};
+const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock context={context} {...TEXT_BLOCK} />;
 
-const HEADLINE_ACCORDION_BLOCK: HeadlineBlockListDef = {
-  blockListType: 'Headline',
-  ...HEADLINE,
-};
+const HEADLINE_ACCORDION_BLOCK = <Headline context={context} {...HEADLINE} />;
 
-const LINK_DOCS_ACCORDION_BLOCK: LinkDocsBlockListDef = {
-  blockListType: 'LinkDocs',
-  ...linkDocsContentExample,
-  title: '',
-};
+const LINK_DOCS_ACCORDION_BLOCK = (
+  <LinkDocs context={context} {...linkDocsContentExample} title="" />
+);
 
-const propsTextBlock: AccordionProps = {
-  title: 'Accordion title',
-  description: 'Accordion description 2',
-  bordered: true,
-  context,
-  accordionItems: [
-    {
-      label: 'Accordion label 1',
-      labelIcon: {
-        icon: 'CardIcon',
-      },
-      blocks: [TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 2',
-      blocks: [HEADLINE_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 3',
-      blocks: [LINK_DOCS_ACCORDION_BLOCK],
-    },
-  ],
+const ACCORDION_BLOCK_DEF: BlockDef = {
+  type: 'Accordion',
+  content: {
+    title: 'Accordion title',
+    description: 'Accordion description 2',
+    bordered: true,
+  } as AccordionProps,
 };
 
+export const ACCORDION_ITEM = (
+  <AccordionItem
+    context={context}
+    ancestors={[null, ACCORDION_BLOCK_DEF]}
+    label="Accordion label 1"
+    labelIcon={{ icon: 'CardIcon' }}
+  >
+    {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+  </AccordionItem>
+);
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Accordion className="col-span-12" {...propsTextBlock} />
+      <Accordion className="col-span-12" context={context} {...ACCORDION_BLOCK_DEF.content}>
+        {ACCORDION_ITEM}
+        <AccordionItem
+          context={context}
+          ancestors={[null, ACCORDION_BLOCK_DEF]}
+          label="Accordion label 2"
+        >
+          {[HEADLINE_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem
+          context={context}
+          ancestors={[null, ACCORDION_BLOCK_DEF]}
+          label="Accordion label 3"
+        >
+          {[LINK_DOCS_ACCORDION_BLOCK]}
+        </AccordionItem>
+      </Accordion>
     </div>
   ),
 };

package/src/components/Accordion/Accordion.fixture.tsx

@@ -1,140 +1,105 @@
 import { context } from '../../react/setup-fixture';
-import type {
-  GalleryBlockListDef,
-  HeadlineBlockListDef,
-  LinkDocsBlockListDef,
-  MiniGalleryBlockListDef,
-  PictureTextBlockListDef,
-  ProductTileBlockListDef,
-  TextBlockBlockListDef,
-  TileBlockListDef,
-} from '../../ui-kit/BlocksList/BlocksListProps';
+import { AccordionItem } from '../AccordionItem/AccordionItem';
+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 { PictureText } from '../PictureText/PictureText';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { ProductTile } from '../ProductTile/ProductTile';
 import { 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 } from '../Tile/Tile.fixture';
-import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 
-const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockBlockListDef = {
-  blockListType: 'TextBlock',
-  style: ['col-span-12'],
-  ...TEXT_BLOCK,
-};
+const TEXT_BLOCK_ACCORDION_BLOCK = (
+  <TextBlock className="col-span-12" context={context} {...TEXT_BLOCK} />
+);
 
-const HEADLINE_ACCORDION_BLOCK: HeadlineBlockListDef = {
-  blockListType: 'Headline',
-  style: ['col-span-12'],
-  ...HEADLINE,
-};
+const HEADLINE_ACCORDION_BLOCK = (
+  <Headline className="col-span-12" context={context} {...HEADLINE} />
+);
 
-const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextBlockListDef = {
-  blockListType: 'PictureText',
-  style: ['col-span-12'],
-  ...PICTURE_TEXT,
-};
+const PICTURE_TEXT_ACCORDION_BLOCK = (
+  <PictureText className="col-span-12" context={context} {...PICTURE_TEXT} />
+);
 
-const LINK_DOCS_ACCORDION_BLOCK: LinkDocsBlockListDef = {
-  blockListType: 'LinkDocs',
-  style: ['col-span-12'],
-  ...linkDocsContentExample,
-  title: '',
-};
+const LINK_DOCS_ACCORDION_BLOCK = (
+  <LinkDocs className="col-span-12" context={context} {...linkDocsContentExample} title="" />
+);
 
-const TILES_ACCORDION_BLOCK: TileBlockListDef = {
-  blockListType: 'Tile',
-  style: ['col-span-6'],
-  ...TILE,
-};
+const TILES_ACCORDION_BLOCK = <Tile className="col-span-6" context={context} {...TILE} />;
 
-const PRODUCT_TILES_ACCORDION_BLOCK: ProductTileBlockListDef = {
-  blockListType: 'ProductTile',
-  style: ['col-span-6'],
-  ...PRODUCT_TILE,
-};
+const PRODUCT_TILES_ACCORDION_BLOCK = (
+  <ProductTile className="col-span-6" context={context} {...PRODUCT_TILE} />
+);
 
-const GALLERY_ACCORDION_BLOCK: GalleryBlockListDef = {
-  blockListType: 'Gallery',
-  style: ['col-span-12'],
-  ...GALLERY,
-};
+const GALLERY_ACCORDION_BLOCK = <Gallery className="col-span-12" {...GALLERY} />;
 
-const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryBlockListDef = {
-  blockListType: 'MiniGallery',
-  style: ['col-span-12'],
-  ...MINI_GALLERY,
-};
+const MINI_GALLERY_ACCORDION_BLOCK = <MiniGallery className="col-span-12" {...MINI_GALLERY} />;
 
-const propsDefaultBlock: AccordionProps = {
-  context,
-  title: 'Accordion title',
-  description: 'Accordion description',
-  accordionItems: [
-    {
-      label: 'Accordion label 1',
-      blocks: [TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 2',
-      blocks: [PICTURE_TEXT_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 3',
-      blocks: [HEADLINE_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 4',
-      blocks: [LINK_DOCS_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 5',
-      blocks: [TILES_ACCORDION_BLOCK, TILES_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 6',
-      blocks: [PRODUCT_TILES_ACCORDION_BLOCK, PRODUCT_TILES_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 7',
-      blocks: [GALLERY_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 8',
-      blocks: [MINI_GALLERY_ACCORDION_BLOCK],
-    },
-  ],
-};
-
-const propsRightAlignTitleBlock: AccordionProps = {
-  context,
-  title: 'Accordion title',
-  accordionAlignTitle: 'right',
-  description: 'Accordion description',
-  accordionItems: [
-    {
-      label: 'Accordion label 1',
-      blocks: [TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK],
-    },
-    {
-      label: 'Accordion label 2',
-      blocks: [PICTURE_TEXT_ACCORDION_BLOCK],
-    },
-  ],
-};
+export const ACCORDION_ITEM = (
+  <AccordionItem context={context} label="Accordion label 1">
+    {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+  </AccordionItem>
+);
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Accordion className="col-span-12" {...propsDefaultBlock} />
+      <Accordion
+        className="col-span-12"
+        context={context}
+        title="Accordion title"
+        description="Accordion description"
+      >
+        {ACCORDION_ITEM}
+        <AccordionItem context={context} label="Accordion label 2">
+          {[PICTURE_TEXT_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 3">
+          {[HEADLINE_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 4">
+          {[LINK_DOCS_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 5">
+          {[TILES_ACCORDION_BLOCK, TILES_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 6">
+          {[PRODUCT_TILES_ACCORDION_BLOCK, PRODUCT_TILES_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 7">
+          {[GALLERY_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 8">
+          {[MINI_GALLERY_ACCORDION_BLOCK]}
+        </AccordionItem>
+      </Accordion>
     </div>
   ),
   'right-align-title': (
     <div className="container grid grid-cols-12">
-      <Accordion className="col-span-12" {...propsRightAlignTitleBlock} />
+      <Accordion
+        className="col-span-12"
+        context={context}
+        title="Accordion title"
+        accordionAlignTitle="right"
+        description="Accordion description"
+      >
+        <AccordionItem context={context} label="Accordion label 1">
+          {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
+        </AccordionItem>
+        <AccordionItem context={context} label="Accordion label 2">
+          {[PICTURE_TEXT_ACCORDION_BLOCK]}
+        </AccordionItem>
+      </Accordion>
     </div>
   ),
 };

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

@@ -1,40 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
-import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
-import { AccordionItem } from './AccordionItem';
 import { AccordionItemsList } from './AccordionItemsList';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
-export const Accordion = JSX<AccordionProps>(
-  ({ title, description, accordionItems, context, className = '', bordered, ...rest }) => {
-    return (
-      <BlockWrapper
-        context={context}
-        className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}
-        {...rest}
-      >
-        {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
-        {description ? <div className="mb-5 text-m-light text-center">{description}</div> : null}
-        {accordionItems?.length ? (
-          <AccordionItemsList>
-            {accordionItems.map((item, i) => (
-              <AccordionItem
-                key={`AccordionItem_${i}`}
-                context={context}
-                bordered={bordered}
-                hasContent={Boolean(item.blocks?.length)}
-                {...item}
-              >
-                {renderBlocksList({ blocks: item.blocks, context, className: '!p-0 mb-5' })}
-              </AccordionItem>
-            ))}
-          </AccordionItemsList>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
+export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
+  ({ title, description, context, className = '', children, ...rest }) => (
+    <BlockWrapper
+      context={context}
+      className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}
+      {...rest}
+    >
+      {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
+      {description ? <div className="mb-5 text-m-light text-center">{description}</div> : null}
+      <AccordionItemsList>{children}</AccordionItemsList>
+    </BlockWrapper>
+  ),
 );
+
+Accordion.childrenTypes = ['AccordionItem'];

package/src/components/Accordion/Accordion.tsx

@@ -1,11 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignType } from '../../model/AlignType';
-import type { UniBlockProps } from '../../model/ContentPageDef';
-import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import type { AlignType } from '../../model/AlignType';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
-import { AccordionItem } from './AccordionItem';
 import { AccordionItemsList } from './AccordionItemsList';
 
 const ALIGN_TITLE: Record<AlignType, string> = {
@@ -16,46 +14,33 @@ const ALIGN_TITLE: Record<AlignType, string> = {
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
-export const Accordion = JSX<AccordionProps>(
+export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
   ({
-    title,
-    description,
-    accordionItems,
-    context,
     className = '',
+    context,
+    title,
     accordionAlignTitle = 'center',
+    description,
+    children,
     ...rest
-  }) => {
-    return (
-      <BlockWrapper
-        context={context}
-        className={`p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`}
-        {...rest}
-      >
-        {title ? (
-          <Heading
-            headingType="h3"
-            as="h2"
-            className={`mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`}
-            title={title}
-          />
-        ) : null}
-        {description ? <div className="mb-2.5 text-l">{description}</div> : null}
-        {accordionItems?.length ? (
-          <AccordionItemsList>
-            {accordionItems.map((item, i) => (
-              <AccordionItem
-                key={`AccordionItem${i}`}
-                context={context}
-                hasContent={Boolean(item.blocks?.length)}
-                {...item}
-              >
-                {renderBlocksList({ blocks: item.blocks, context, className: '!p-0 mb-5' })}
-              </AccordionItem>
-            ))}
-          </AccordionItemsList>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
+  }) => (
+    <BlockWrapper
+      context={context}
+      className={`p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`}
+      {...rest}
+    >
+      {title ? (
+        <Heading
+          headingType="h3"
+          as="h2"
+          className={`mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`}
+          title={title}
+        />
+      ) : null}
+      {description ? <div className="mb-2.5 text-l">{description}</div> : null}
+      <AccordionItemsList>{children}</AccordionItemsList>
+    </BlockWrapper>
+  ),
 );
+
+Accordion.childrenTypes = ['AccordionItem'];

package/src/components/Accordion/Accordion.ui.json

@@ -1,79 +1 @@
-{
-  "content": {
-    "accordionItems": {
-      "items": {
-        "blocks": {
-          "items": {
-            "blockListType": {
-              "ui:widget": "hidden"
-            },
-            "image": {
-              "ui:field": "picture"
-            },
-            "benefitList": {
-              "items": {
-                "description": {
-                  "benefitType": {
-                    "ui:widget": "hidden"
-                  }
-                },
-                "icon": {
-                  "ui:field": "icon"
-                }
-              }
-            },
-            "style": {
-              "ui:field": "style"
-            },
-            "benefits": {
-              "items": {
-                "icon": {
-                  "ui:field": "icon"
-                }
-              }
-            },
-            "buttons": {
-              "items": {
-                "icon": {
-                  "ui:field": "icon"
-                },
-                "iconRight": {
-                  "ui:field": "icon"
-                }
-              }
-            },
-            "icon": {
-              "ui:field": "icon"
-            },
-            "backwardButton": {
-              "icon": {
-                "ui:field": "icon"
-              },
-              "iconRight": {
-                "ui:field": "icon"
-              }
-            },
-            "cards": {
-              "items": {
-                "image": {
-                  "ui:field": "picture"
-                },
-                "button": {
-                  "icon": {
-                    "ui:field": "icon"
-                  },
-                  "iconRight": {
-                    "ui:field": "icon"
-                  }
-                }
-              }
-            }
-          }
-        },
-        "labelIcon": {
-          "ui:field": "icon"
-        }
-      }
-    }
-  }
-}
+{}

package/src/components/Accordion/AccordionContent.ts

@@ -1,32 +1,6 @@
 import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { Picture } from '../../model/Picture';
-import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
-
-export interface AccordionItemCommonProps {
-  /**
-   * @title Название
-   * @default Список
-   */
-  label?: string;
-  /** @title Отображать в раскрытом виде */
-  isExpanded?: boolean;
-  /**
-   * @title Отображать/скрывать обводку элемента
-   * @default false
-   */
-  bordered?: boolean; // TODO: только для мобильной версии
-  labelIcon?: Picture; // TODO: только для мобильной версии
-}
-
-/**
- * @title Элемент списка
- */
-export interface AccordionItem extends AccordionItemCommonProps {
-  /** @title Блоки */
-  blocks?: BlockDef[];
-}
 
 /**
  * @title Аккордеон
@@ -37,9 +11,9 @@ export type AccordionContent = HeadlineCommonProps & {
    * @default center
    */
   accordionAlignTitle?: AlignType;
+
   version?: BlockVersion;
-  /** @title Список */
-  accordionItems?: AccordionItem[];
+
   /**
    * @title Отображать/скрывать обводку у элемента списка
    * @default false

package/src/components/AccordionItem/AccordionItem.example.json

@@ -0,0 +1,7 @@
+{
+  "label": "Аккордеон 1",
+  "isExpanded": true,
+  "labelIcon": {
+    "icon": "CardIcon"
+  }
+}

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

@@ -0,0 +1,6 @@
+import { ACCORDION_ITEM } from '../Accordion/Accordion.fixture.mobile';
+import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+
+export default {
+  default: <AccordionItemsList>{ACCORDION_ITEM}</AccordionItemsList>,
+};

package/src/components/AccordionItem/AccordionItem.fixture.tsx

@@ -0,0 +1,6 @@
+import { ACCORDION_ITEM } from '../Accordion/Accordion.fixture';
+import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+
+export default {
+  default: <AccordionItemsList>{ACCORDION_ITEM}</AccordionItemsList>,
+};