@redneckz/wildless-cms-uni-blocks 0.6.33 → 0.6.34

package/src/components/Recommendation/Recommendation.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
@@ -10,14 +10,17 @@ import { RecommendationCard } from './RecommendationCard';
 import type { RecommendationContent } from './RecommendationContent';
 
 const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-const CARD_FULL_VIEW_COUNT = 2;
+const CARD_VIEW_COUNT = 2;
 const CARD_SHIFT = 525;
 
 export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
 
 export const Recommendation = JSX<RecommendationProps>(
   ({ recommendations = [], className = '', title, version = 'primary', ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = useState(0);
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: recommendations.length,
+      visibleItemCount: CARD_VIEW_COUNT,
+    });
 
     return (
       <BlockWrapper
@@ -28,10 +31,10 @@ export const Recommendation = JSX<RecommendationProps>(
         <div>
           <div
             className="flex duration-1000 gap-3.5"
-            style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
+            style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
             role="list"
           >
-            {recommendations?.length
+            {recommendations.length
               ? recommendations.map((card, i) => (
                   <RecommendationCard
                     key={String(i)}
@@ -42,10 +45,10 @@ export const Recommendation = JSX<RecommendationProps>(
                 ))
               : null}
           </div>
-          {renderNavButtons({
-            cardsCount: recommendations.length,
-            activeCardIndex,
-            setActiveCardIndex,
+          {renderArrows({
+            ...controls,
+            btnClass: ['left-8', 'right-8'],
+            className: 'top-1/2 mt-3',
           })}
         </div>
         <div
@@ -62,30 +65,3 @@ export const Recommendation = JSX<RecommendationProps>(
     );
   },
 );
-
-const renderNavButtons = ({
-  cardsCount,
-  activeCardIndex,
-  setActiveCardIndex,
-}: {
-  cardsCount: number;
-  activeCardIndex: number;
-  setActiveCardIndex: (index: number) => void;
-}) => {
-  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
-  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
-  const showPrevButton = isUseSlider && activeCardIndex > 0;
-
-  return (
-    <div>
-      {renderArrows({
-        handler: [handlePrevClick, handleNextClick],
-        isShown: [showPrevButton, showNextButton],
-        btnClass: ['left-8', 'right-8'],
-        className: 'top-1/2 mt-3',
-      })}
-    </div>
-  );
-};

package/src/components/RollupItem/RollupItem.fixture.tsx

@@ -1,23 +1,56 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Blocks } from '../Blocks';
 import { RollupItem } from '../RollupItem/RollupItem';
-import { TextBlock } from '../TextBlock/TextBlock';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 
-const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock className="col-span-12" {...TEXT_BLOCK} />;
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
   default: (
-    <RollupItem label="Rollup button 1">
-      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-    </RollupItem>
+    <RollupItem
+      label="Rollup button 1"
+      isExpanded={true}
+      block={{
+        type: 'RollupItem',
+        blocks: [
+          { type: 'TextBlock', content: TEXT_BLOCK },
+          { type: 'TextBlock', content: TEXT_BLOCK },
+        ],
+      }}
+      options={options}
+    />
   ),
   secondary: (
-    <RollupItem label="Rollup button 2" version="secondary" isFoldButtonOnTop={false}>
-      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-    </RollupItem>
+    <RollupItem
+      label="Rollup button 2"
+      version="secondary"
+      isFoldButtonOnTop={false}
+      isExpanded={true}
+      block={{
+        type: 'RollupItem',
+        blocks: [
+          { type: 'TextBlock', content: TEXT_BLOCK },
+          { type: 'TextBlock', content: TEXT_BLOCK },
+        ],
+      }}
+      options={options}
+    />
   ),
   'secondary default-open': (
-    <RollupItem isExpanded={true} version="secondary" label="Rollup button 2">
-      {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-    </RollupItem>
+    <RollupItem
+      version="secondary"
+      label="Rollup button 2"
+      isExpanded={true}
+      block={{
+        type: 'RollupItem',
+        blocks: [
+          { type: 'TextBlock', content: TEXT_BLOCK },
+          { type: 'TextBlock', content: TEXT_BLOCK },
+        ],
+      }}
+      options={options}
+    />
   ),
 };

package/src/components/RollupItem/RollupItem.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { JSXBlock } from '../../model/JSXBlock';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
@@ -17,10 +18,10 @@ interface RollupFoldablePartProps extends FoldablePartProps {
 
 interface FoldButtonProps {
   label?: string;
-  icon: IconName;
+  icon?: IconName;
+  isUnfolded?: boolean;
   onClick?: () => void;
   onToggle?: () => void;
-  isUnfolded?: boolean;
 }
 
 export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
@@ -30,7 +31,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
     isExpanded,
     isFoldButtonOnTop = true,
     version = 'primary',
-    children,
+    ...rest
   }) => (
     <div className={`border-b border-solid border-main-divider w-full ${className}`}>
       <Foldable
@@ -42,7 +43,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
               className={`grid grid-cols-12 gap-1 border-box`}
               isUnfolded={isUnfolded}
             >
-              {children}
+              {renderChildren(rest)}
             </FoldableSection>
           </div>
         )}
@@ -57,18 +58,19 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
 RollupItem.childrenTypes = [];
 
 const renderFoldButton = ({ isUnfolded, onToggle, label, version }: RollupFoldablePartProps) => {
-  const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
+  const iconsPrimary: IconName[] = ['PlusIcon', 'MinusIcon'];
+  const iconsSecondary: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
   const labels = label ? [label, label] : ['Развернуть', 'Скрыть'];
 
   return version === 'primary' ? (
     <FoldButton
-      icon={icons[Number(isUnfolded)]}
+      icon={iconsPrimary[Number(isUnfolded)]}
       label={labels[Number(isUnfolded)]}
       onClick={onToggle}
     />
   ) : (
     <DefaultFoldButton
-      icon={icons[Number(isUnfolded)]}
+      icon={iconsSecondary[Number(isUnfolded)]}
       label={labels[Number(isUnfolded)]}
       onClick={onToggle}
     />

package/src/components/SafeDepositRental/SafeDepositRental.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { SafeDepositRental } from './SafeDepositRental';
 
 export default {

package/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -4,8 +4,4 @@ import type { TitleProps } from '../../model/HeadlineType';
 /**
  * @title Аренда сейфовых ячеек
  */
-export type SafeDepositRentalContent = Footnote &
-  TitleProps & {
-    /** @title Сноска */
-    footnote?: string;
-  };
+export type SafeDepositRentalContent = Footnote & TitleProps;

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

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { StepsBlock } from './StepsBlock';
 
 const steps = [

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { StepsBlockProps } from './StepsBlock';
 import { StepsBlock } from './StepsBlock';
 import type { Step } from './StepsBlockContent';

package/src/components/StepsBlock/StepsBlock.tsx

@@ -33,7 +33,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
         className={[
           'box-border py-[50px] font-sans',
           shortGaps ? 'px-20' : 'px-[70px]',
-          'flex flex-col items-center',
+          'flex flex-col items-center overflow-hidden',
           styleMap.background,
           styleMap.title,
           className,

package/src/components/Tabs/Tabs.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { Tabs } from './Tabs';
 
 export default {

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

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { TARIFFS_TABLE_FIXTURE_EXAMPLE } from './dataFixture';
 import { TariffsTable } from './TariffsTable';
 

package/src/components/TariffsTable/TariffsTable.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import {
   columns,
   columnsTable,

package/src/components/TariffsTable/TariffsTable.tsx

@@ -34,24 +34,14 @@ export const TariffsTable = JSX<TariffsTableProps>(
       header,
       data: colData.map((col) => col?.[i] || []),
     }));
-
-    const columnsLength = colData.length;
-
+    const itemCount = colData.length;
     const [activeIndex, controls] = useCarouselControls({
-      itemsCount: colData.length,
+      itemCount: itemCount,
       visibleItemCount: COLS_LENGTH_FOR_SCROLL,
     });
-
-    const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL;
-
+    const { isScrollAvailable } = controls;
     const rows = (rowData || []).map((row, i) => (
-      <TariffsTableRow
-        key={String(i)}
-        row={row}
-        activeCardIndex={activeIndex}
-        rowIdx={i}
-        {...rest}
-      />
+      <TariffsTableRow key={String(i)} row={row} activeIndex={activeIndex} rowIdx={i} {...rest} />
     ));
     const [visibleRows, hiddenRows] =
       hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
@@ -59,7 +49,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
     return (
       <BlockWrapper
         className={`bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${
-          columnsLength > 1 ? 'pr-0' : ''
+          itemCount > 1 ? 'pr-0' : ''
         } ${className}`}
         {...rest}
       >
@@ -99,27 +89,20 @@ function renderDescription(description?: string) {
   return description ? <div className="mb-9 text-center text-l">{description}</div> : null;
 }
 
-const Wrapper = JSX<WrapperProps>(({ children, controls, isScrollAvailable }) => {
-  const { inc, dec, canDec, canInc } = controls;
-
-  return (
-    <div role="table">
-      <div className="relative">
-        {children}
-        {isScrollAvailable ? (
-          <div>
-            {renderArrows({
-              handler: [inc, dec],
-              isShown: [canDec, canInc],
-              btnClass: ['top-[108px]', 'top-11'],
-              className: 'right-7',
-            })}
-          </div>
-        ) : null}
-      </div>
-      {isScrollAvailable ? (
-        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
-      ) : null}
+const Wrapper = JSX<WrapperProps>(({ children, controls, isScrollAvailable }) => (
+  <div role="table">
+    <div className="relative">
+      {children}
+      {isScrollAvailable
+        ? renderArrows({
+            ...controls,
+            btnClass: ['top-[108px]', 'top-[44px]'],
+            className: 'right-7',
+          })
+        : null}
     </div>
-  );
-});
+    {isScrollAvailable ? (
+      <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+    ) : null}
+  </div>
+));

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -12,12 +12,12 @@ import { TariffsTableRowContainer } from './TariffsTableRowContainer';
 
 export interface TariffsTableRowProps extends UniBlockProps {
   row: Data;
-  activeCardIndex: number;
+  activeIndex: number;
   rowIdx: number;
 }
 
 export const TariffsTableRow = JSX<TariffsTableRowProps>(
-  ({ row: { header, data }, activeCardIndex, rowIdx, ...rest }) => {
+  ({ row: { header, data }, activeIndex, rowIdx, ...rest }) => {
     const [tableInner, setTableInner] = useState<TariffsTableInnerContent | undefined>(undefined);
     const [openTableInnerIdx, setOpenTableInnerIdx] = useState<number | undefined>(undefined);
 
@@ -45,7 +45,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
         </div>
         {data?.length ? (
           <TableCarouselContainer
-            activeCardIndex={activeCardIndex}
+            activeIndex={activeIndex}
             columnWidth={COLUMN_WIDTH}
             version="tariff"
           >

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { TextBlock } from './TextBlock';
 import type { TextBlockContent } from './TextBlockContent';
 

package/src/components/TextBlock/TextBlock.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { TextBlock } from './TextBlock';
 import type { TextBlockContent } from './TextBlockContent';
 

package/src/components/Tile/Tile.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { Tile } from './Tile';
 import type { TileContent } from './TileContent';
 

package/src/components/VerticalLayout/VerticalLayout.fixture.tsx

@@ -1,15 +1,11 @@
-import '../../react/setup-fixture';
-import { LinkDocs } from '../LinkDocs/LinkDocs';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
 import { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
-import { ProductTile } from '../ProductTile/ProductTile';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
-import { RollupItem } from '../RollupItem/RollupItem';
-import { TextBlock } from '../TextBlock/TextBlock';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import { VerticalLayout } from './VerticalLayout';
 
-const PRODUCT_TILES_OTHER_BLOCK = <ProductTile {...PRODUCT_TILE} />;
-const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock className="col-span-12" {...TEXT_BLOCK} />;
 export const linkDocsExample: LinkDocsContent = {
   description: 'Ответы на часто задаваемые вопросы',
   documents: [
@@ -18,69 +14,152 @@ export const linkDocsExample: LinkDocsContent = {
     { text: 'GlassIcon', href: '/abc3/map.jpeg' },
   ],
 };
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <VerticalLayout className="col-span-12">
-        {PRODUCT_TILES_OTHER_BLOCK}
-        {PRODUCT_TILES_OTHER_BLOCK}
-      </VerticalLayout>
+      <VerticalLayout
+        className="col-span-12"
+        block={{
+          type: 'VerticalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE },
+            { type: 'ProductTile', content: PRODUCT_TILE },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
   'transparent center': (
     <div className="container grid grid-cols-12">
-      <VerticalLayout align="center" version="transparent" className="col-span-12">
-        {PRODUCT_TILES_OTHER_BLOCK}
-        {PRODUCT_TILES_OTHER_BLOCK}
-      </VerticalLayout>
+      <VerticalLayout
+        className="col-span-12"
+        align="center"
+        version="transparent"
+        block={{
+          type: 'VerticalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE },
+            { type: 'ProductTile', content: PRODUCT_TILE },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
   'secondary right': (
     <div className="container grid grid-cols-12">
-      <VerticalLayout align="right" version="secondary" className="col-span-12">
-        {PRODUCT_TILES_OTHER_BLOCK}
-        {PRODUCT_TILES_OTHER_BLOCK}
-      </VerticalLayout>
+      <VerticalLayout
+        className="col-span-12"
+        align="right"
+        version="secondary"
+        block={{
+          type: 'VerticalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE },
+            { type: 'ProductTile', content: PRODUCT_TILE },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
   'secondary gap-XL': (
     <div className="container grid grid-cols-12">
-      <VerticalLayout gap="XL" align="left" version="secondary" className="col-span-12">
-        {PRODUCT_TILES_OTHER_BLOCK}
-        {PRODUCT_TILES_OTHER_BLOCK}
-      </VerticalLayout>
+      <VerticalLayout
+        className="col-span-12"
+        gap="XL"
+        align="left"
+        version="secondary"
+        block={{
+          type: 'VerticalLayout',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE },
+            { type: 'ProductTile', content: PRODUCT_TILE },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
   rollup: (
     <div className="container grid grid-cols-12">
-      <VerticalLayout align="left" className="col-span-12" version="primary">
-        <RollupItem label="Rollup button 1">
-          {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-        </RollupItem>
-        <RollupItem isExpanded={true} label="Rollup button 1">
-          <LinkDocs className="col-span-12" {...linkDocsExample} />
-        </RollupItem>
-      </VerticalLayout>
+      <VerticalLayout
+        align="left"
+        className="col-span-12"
+        version="primary"
+        block={{
+          type: 'VerticalLayout',
+          blocks: [
+            {
+              type: 'RollupItem',
+              content: {
+                label: 'Rollup button 1',
+              },
+              blocks: [
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+              ],
+            },
+            {
+              type: 'RollupItem',
+              content: {
+                label: 'Rollup button 2',
+                isExpanded: true,
+              },
+              blocks: [{ type: 'LinkDocs', content: linkDocsExample }],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
   'rollup secondary': (
     <div className="container grid grid-cols-12">
-      <VerticalLayout gap="XS" align="left" version="transparent" className="col-span-12">
-        <RollupItem
-          label="Rollup button 1 with TEXT_BLOCK"
-          version="secondary"
-          isFoldButtonOnTop={false}
-        >
-          {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-        </RollupItem>
-        <RollupItem
-          label="Rollup button 2 with TEXT_BLOCK"
-          version="secondary"
-          isFoldButtonOnTop={false}
-        >
-          {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-        </RollupItem>
-      </VerticalLayout>
+      <VerticalLayout
+        gap="XS"
+        align="left"
+        version="transparent"
+        className="col-span-12"
+        block={{
+          type: 'VerticalLayout',
+          blocks: [
+            {
+              type: 'RollupItem',
+              content: {
+                label: 'Rollup button 1 with TEXT_BLOCK',
+                version: 'secondary',
+                isFoldButtonOnTop: false,
+                isExpanded: true,
+              },
+              blocks: [
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+              ],
+            },
+            {
+              type: 'RollupItem',
+              content: {
+                label: 'Rollup button 2 with TEXT_BLOCK',
+                version: 'secondary',
+                isFoldButtonOnTop: false,
+                isExpanded: true,
+              },
+              blocks: [
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+              ],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
 };

package/src/components/VerticalLayout/VerticalLayout.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { AlignType } from '../../model/AlignType';
 import { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
@@ -30,7 +31,7 @@ const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
 };
 
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
-  ({ className = '', children, gap = '', align = 'left', version = 'transparent', ...rest }) => (
+  ({ className = '', gap = '', align = 'left', version = 'transparent', ...rest }) => (
     <BlockWrapper
       className={[
         'flex flex-col',
@@ -41,7 +42,7 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
       ].join(' ')}
       {...rest}
     >
-      {children}
+      {renderChildren(rest)}
     </BlockWrapper>
   ),
 );