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

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,18 +31,20 @@ const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
 };
 
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
-  ({ className = '', children, gap = '', align = 'left', version = 'transparent', ...rest }) => (
+  ({ className = '', gap = '', align, version = 'transparent', ...rest }) => (
     <BlockWrapper
       className={[
         'flex flex-col',
         gapStyleMap[gap],
-        alignStyle[align],
+        align && alignStyle[align],
         backgroundStyleMap[version],
         className,
-      ].join(' ')}
+      ]
+        .filter(Boolean)
+        .join(' ')}
       {...rest}
     >
-      {children}
+      {renderChildren(rest)}
     </BlockWrapper>
   ),
 );

package/src/components/Video/Video.fixture.tsx

@@ -0,0 +1,33 @@
+import { Video } from './Video';
+import { VideoContent } from './VideoContent';
+
+const VIDEO_CONTENT: VideoContent = {
+  title: 'Посмотрите короткое видео, как войти в ЛК',
+  previewImg: {
+    src: 'video-preview.png',
+  },
+  src: 'rshb.webm',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Video className="col-span-12" {...VIDEO_CONTENT} />
+    </div>
+  ),
+  'col-span-10': (
+    <div className="container grid grid-cols-12">
+      <Video className="col-span-10" {...VIDEO_CONTENT} />
+    </div>
+  ),
+  'col-span-8': (
+    <div className="container grid grid-cols-12">
+      <Video className="col-span-8" {...VIDEO_CONTENT} />
+    </div>
+  ),
+  'col-span-6': (
+    <div className="container grid grid-cols-12">
+      <Video className="col-span-6" {...VIDEO_CONTENT} />
+    </div>
+  ),
+};

package/src/components/Video/Video.tsx

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Headline } from '../Headline/Headline';
+import { getPaddings } from './getPaddings';
+import type { VideoContent } from './VideoContent';
+
+interface VideoProps extends VideoContent, UniBlockProps {}
+
+export const Video = JSX<VideoProps>((props) => {
+  const { title, src, previewImg, className = '', ...rest } = props;
+
+  return (
+    <BlockWrapper className={`bg-white ${getPaddings(className)} ${className}`} {...rest}>
+      <Headline title={title} headlineVersion="M" />
+      {src ? (
+        <video
+          className="m-auto w-full object-fill"
+          preload="metadata"
+          poster={previewImg?.src}
+          style={{ maxHeight: 524 }}
+          controls
+        >
+          <source src={src} />
+        </video>
+      ) : null}
+    </BlockWrapper>
+  );
+});

package/src/components/Video/Video.ui.json

@@ -0,0 +1,12 @@
+{
+  "content": {
+    "previewImg": {
+      "ui:field": "picture"
+    }
+  },
+  "style": {
+    "ui:options": {
+      "minCols": 6
+    }
+  }
+}

package/src/components/Video/VideoContent.ts

@@ -0,0 +1,9 @@
+import type { TitleProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+
+export interface VideoContent extends TitleProps {
+  /** @title URL */
+  src?: string;
+  /** @title Заставка */
+  previewImg?: Picture;
+}

package/src/components/Video/getPaddings.ts

@@ -0,0 +1,6 @@
+import { getColSpan } from '../../utils/getColSpan';
+
+const MIN_COL_SPAN = 10;
+
+export const getPaddings = (className: string) =>
+  getColSpan(className) < MIN_COL_SPAN ? 'py-6 px-11' : 'py-12 px-32';