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

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>
   ),
 );

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';

package/src/hooks/useCarouselControls.ts

@@ -5,39 +5,35 @@ export interface CarouselControls {
   dec: () => void;
   canInc: boolean;
   canDec: boolean;
+  isScrollAvailable: boolean;
 }
 
-interface CarouselProps {
-  itemsCount: number;
+interface CarouselControlsProps {
+  itemCount: number;
   visibleItemCount?: number;
   isCyclic?: boolean;
+  container?: HTMLDivElement | null;
 }
 
-export const useCarouselControls = ({
-  itemsCount,
-  visibleItemCount = itemsCount,
-  isCyclic,
-}: CarouselProps): [number, CarouselControls] => {
+export const useCarouselControls = (props: CarouselControlsProps): [number, CarouselControls] => {
+  const { itemCount, visibleItemCount, isCyclic } = props;
+
   const [activeIndex, setActiveIndex] = useState(0);
 
   const inc = useCallback(
-    () =>
-      setActiveIndex((_) => (isCyclic ? (_ + 1) % itemsCount : Math.min(_ + 1, itemsCount - 1))),
-    [isCyclic, itemsCount],
+    () => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemCount : Math.min(_ + 1, itemCount - 1))),
+    [isCyclic, itemCount],
   );
   const dec = useCallback(
-    () =>
-      setActiveIndex((_) => (isCyclic ? (itemsCount + _ - 1) % itemsCount : Math.max(_ - 1, 0))),
-    [isCyclic, itemsCount],
+    () => setActiveIndex((_) => (isCyclic ? (itemCount + _ - 1) % itemCount : Math.max(_ - 1, 0))),
+    [isCyclic, itemCount],
   );
 
-  const isScrollAvailable = itemsCount > visibleItemCount;
-  const isCyclicAndScrollAvailable = isCyclic && isScrollAvailable;
-
   const canInc =
-    isCyclicAndScrollAvailable ||
-    (isScrollAvailable && itemsCount - activeIndex > visibleItemCount);
-  const canDec = isCyclicAndScrollAvailable || Boolean(isScrollAvailable && activeIndex > 0);
+    isCyclic ||
+    (isScrollable(activeIndex, props) && activeIndex < itemCount - (visibleItemCount || 1));
+  const canDec = isCyclic || activeIndex > 0;
+  const isScrollAvailable = canDec || canInc;
 
   return [
     activeIndex,
@@ -46,6 +42,24 @@ export const useCarouselControls = ({
       dec,
       canInc,
       canDec,
+      isScrollAvailable,
     },
   ];
 };
+
+function isScrollable(
+  activeIndex: number,
+  { itemCount, visibleItemCount, container }: CarouselControlsProps,
+): boolean {
+  if (visibleItemCount) {
+    return itemCount > visibleItemCount;
+  }
+
+  if (container) {
+    const scrollLeft = (container.scrollWidth * activeIndex) / itemCount;
+
+    return scrollLeft + container.clientWidth < container.scrollWidth;
+  }
+
+  return false;
+}

package/src/model/JSXBlock.ts

@@ -1,14 +1,13 @@
 import type { UNIComponent } from '@redneckz/uni-jsx';
-import type { BlockAncestors, SlotName } from './BlockDecorator';
-import type { BlockDef, ContentPageDef } from './ContentPageDef';
+import type { BlockRendererOptions } from '../BlockRenderer/BlockRendererOptions';
+import type { SlotName } from './BlockDecorator';
+import type { BlockDef } from './ContentPageDef';
 import type { VNode } from './VNode';
 
 export interface UniBlockProps {
   className?: string;
-  page?: ContentPageDef;
   block?: BlockDef;
-  ancestors?: BlockAncestors;
-  slots?: Record<string, VNode>;
+  options?: BlockRendererOptions;
 }
 
 export type JSXBlock<BlockProps extends UniBlockProps = UniBlockProps> = UNIComponent<

package/src/model/LinkProps.ts

@@ -13,6 +13,7 @@ export type Target = '' | '_self' | '_blank' | '_parent' | '_top';
 export interface LinkCommonProps {
   /** @title URL (href) */
   href?: string;
+  /** @default "" */
   target?: Target;
 }
 

package/src/model/Picture.ts

@@ -33,9 +33,15 @@ export type ImgAlignment =
 export interface Img {
   /** @title Картинка */
   src?: string;
-  /** @title Альтернативный текст (alt) */
+  /**
+   * @title Альтернативный текст (alt)
+   * @default ""
+   */
   alt?: string;
-  /** @title Текст подсказки (title) */
+  /**
+   * @title Текст подсказки (title)
+   * @default ""
+   */
   title?: string;
 }
 

package/{mobile/src/react → src}/setup-fixture.ts

@@ -1,9 +1,9 @@
 import '@redneckz/uni-jsx/lib/setup.react';
 import { useState } from 'react';
-import { handlerDecorator } from '../hooks/handlerDecorator';
-import { useRouter } from '../hooks/useRouter';
-import { projectSettings } from '../ProjectSettings';
-import wlc from '../wlc.json';
+import { handlerDecorator } from './hooks/handlerDecorator';
+import { useRouter } from './hooks/useRouter';
+import { projectSettings } from './ProjectSettings';
+import wlc from './wlc.json';
 
 projectSettings.setup(wlc);
 

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

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { Img } from '../Img/Img';
 import { Button } from './Button';
 

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

@@ -1,40 +1,45 @@
 import { ArrowButton } from './ArrowButton';
 
-export type renderArrowsProps = {
-  handler: [() => void, () => void];
-  isShown: [boolean, boolean];
+export type RenderArrowsProps = {
+  dec: () => void;
+  inc: () => void;
+  canInc: boolean;
+  canDec: boolean;
   btnClass: [string, string];
   className?: string;
   isDisabled?: boolean;
 };
 
 export function renderArrows({
-  handler,
-  isShown,
+  dec,
+  inc,
+  canDec,
+  canInc,
   btnClass,
   className = '',
-  isDisabled = false,
-}: renderArrowsProps) {
-  return (
+}: RenderArrowsProps) {
+  const isVisible = canDec || canInc;
+
+  return isVisible ? (
     <div>
-      {isShown[0] || isDisabled ? (
+      {canDec ? (
         <ArrowButton
-          className={`absolute z-10 ${btnClass[0]} ${className}`}
-          onClick={handler[0]}
+          className={`absolute z-50 ${btnClass[0]} ${className}`}
+          onClick={dec}
           ariaLabel="Пролистать влево"
           data-block-control="scroll-left"
-          disabled={!isShown[0]}
+          disabled={!canDec}
         />
       ) : null}
-      {isShown[1] || isDisabled ? (
+      {canInc ? (
         <ArrowButton
-          className={`absolute z-10 rotate-180 ${btnClass[1]} ${className}`}
-          onClick={handler[1]}
+          className={`absolute z-50 rotate-180 ${btnClass[1]} ${className}`}
+          onClick={inc}
           ariaLabel="Пролистать вправо"
           data-block-control="scroll-right"
-          disabled={!isShown[1]}
+          disabled={!canInc}
         />
       ) : null}
     </div>
-  );
+  ) : null;
 }

package/src/ui-kit/HeaderItem/HeaderItem.fixture.tsx

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

package/src/ui-kit/Icon/Icon.fixture.tsx

@@ -1,5 +1,5 @@
 import { IconMap } from '../../icons/IconName';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { Icon } from './Icon';
 
 export default {

package/src/ui-kit/InnerTable/InnerTableBodyItem.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 { renderArrows } from '../Button/renderArrows';
 import type { RowsData } from './InnerTableProps';
 
@@ -10,23 +10,19 @@ export interface InnerTableBodyItemProps {
 }
 
 export const InnerTableBodyItem = JSX<InnerTableBodyItemProps>(({ rows }) => {
-  const [activeColumnIndex, setActiveColumnIndex] = useState(0);
-
-  const handleNextClick = () => setActiveColumnIndex(activeColumnIndex + 1);
-  const handlePrevClick = () => setActiveColumnIndex(activeColumnIndex - 1);
-
   const rowsLength = rows?.[0]?.length ?? 0;
-  const showNextButton = rowsLength > 3 && rowsLength > activeColumnIndex + 4;
-
-  const showPrevButton = activeColumnIndex > 0;
+  const CARD_VIEW_COUNT = 5;
+  const [activeIndex, controls] = useCarouselControls({
+    itemCount: rowsLength,
+    visibleItemCount: CARD_VIEW_COUNT,
+  });
 
   return (
     <div>
-      {rows?.map(renderRow(activeColumnIndex))}
+      {rows?.map(renderRow(activeIndex))}
       {renderArrows({
-        handler: [handlePrevClick, handleNextClick],
-        isShown: [showPrevButton, showNextButton],
-        btnClass: ['right-3 top-24', 'right-3 top-2'],
+        ...controls,
+        btnClass: ['left-3 top-20', 'right-3 top-20'],
         className: '',
       })}
     </div>

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

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { List } from './List';
 
 const items = ['List Item #1', 'List Item #2', 'List Item #3', 'List Item #4'];

package/src/ui-kit/Logo/Logo.fixture.tsx

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

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

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { FontWeight, TextAlign, TextColor, TextSize } from '../Text/Text';
+
+interface ParagraphProps {
+  size?: TextSize;
+  color?: TextColor;
+  align?: TextAlign;
+  font?: FontWeight;
+}
+
+export const Paragraph = JSX<ParagraphProps>((props) => {
+  const { size = '', color = '', align = '', font = '', children } = props;
+
+  const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
+
+  return <p className={textClasses}>{children}</p>;
+});

package/src/ui-kit/RadioButtonGroup/RadioButtonGroup.fixture.tsx

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