@redneckz/wildless-cms-uni-blocks 0.10.10 → 0.11.1

package/src/components/{Filtration/Filtration.fixture.tsx → MortgageFiltration/MortgageFiltration.fixture.tsx}

@@ -3,8 +3,8 @@ import '../../setup-fixture';
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { Blocks } from '../Blocks';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
-import { Filtration } from './Filtration';
-import type { FiltrationContent } from './FiltrationContent';
+import { MortgageFiltration } from './MortgageFiltration';
+import type { MortgageFiltrationContent } from './MortgageFiltrationContent';
 
 const PROPERTY_APARTMENT = {
   propertyType: 'apartment',
@@ -48,7 +48,7 @@ const generateBlock = (...presets: any[]) => ({
   content: { ...presets.reduce((acc, p) => ({ ...acc, ...p })) },
 });
 
-const SCHEMA: FiltrationContent['filtrationSchema'] = {
+const SCHEMA: MortgageFiltrationContent['filtrationSchema'] = {
   propertyType: {
     title: 'Тип недвижимости',
     type: 'array',
@@ -101,7 +101,7 @@ const options = {
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Filtration
+      <MortgageFiltration
         className="col-span-12"
         label="Другие ипотечные программы"
         filtrationSchema={SCHEMA}
@@ -112,7 +112,7 @@ export default {
           description: 'Попробуйте очистить фильтры',
         }}
         block={{
-          type: 'Filtration',
+          type: 'MortgageFiltration',
           blocks: [
             generateBlock(
               PRODUCT_TILE,

package/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useForm } from '../../hooks/useForm';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
+import { renderFiltrationForm } from '../../ui-kit/BaseFiltration/renderFiltrationForm';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
+import type { MortgageFiltrationContent } from './MortgageFiltrationContent';
+
+interface MortgageFiltrationProps extends MortgageFiltrationContent, UniBlockProps {}
+
+const initialFiltrationState = {};
+
+export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<MortgageFiltrationProps>(
+  ({ className, filtrationSchema = {}, resetButton, ...rest }) => {
+    const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
+
+    return (
+      <BlockWrapper className={style(className)} version="transparent" {...rest}>
+        {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}
+        <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
+      </BlockWrapper>
+    );
+  },
+);
+
+MortgageFiltration.childrenTypes = ['ProductTile'];
+MortgageFiltration.childSchema = (content?: MortgageFiltrationContent) =>
+  content?.filtrationSchema || {};

package/src/components/MortgageFiltration/MortgageFiltrationContent.ts

@@ -0,0 +1,23 @@
+import type {
+  BaseFiltrationInnerContent,
+  StringArray,
+} from '../../ui-kit/BaseFiltration/BaseFiltrationContent';
+
+export type MortgageFiltrationSchema = {
+  /** @title Тип недвижимости */
+  propertyType?: StringArray;
+  /** @title Этап строительства */
+  stage?: StringArray;
+  /** @title Категории */
+  categories?: StringArray;
+  /** @title Дополнительно */
+  extraOptions?: StringArray;
+};
+
+/**
+ * @title Подборщик ипотек
+ */
+export interface MortgageFiltrationContent extends BaseFiltrationInnerContent {
+  /** @title Параметры фильтрации */
+  filtrationSchema?: MortgageFiltrationSchema;
+}

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

@@ -83,7 +83,6 @@ const PRODUCT_BLOCK_WITH_BACK_BUTTON: ProductBlockContent = {
   title: 'Потребительский кредит наличными',
   description:
     'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
-  benefitsCountOfRow: 2,
   benefits,
   benefitsVersion: 'normal',
   buttons,
@@ -98,9 +97,9 @@ export default {
         headlineVersion="L"
         title="Потребительский кредит наличными"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        benefitsCountOfRow={2}
         benefits={benefits}
         benefitsVersion="normal"
+        backwardButton={backwardButton}
         buttons={buttons}
         image={image}
       />

package/src/components/ProductBlock/ProductBlock.tsx

@@ -1,8 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Breadcrumb } from '../../ui-kit/Breadcrumb';
-import { joinList } from '../../utils/joinList';
 import { style } from '../../utils/style';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
@@ -10,32 +8,17 @@ import { renderBackwardButton } from './renderBackwardButton';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
-const breadcrumbStyle = 'text-secondary-text group-data-secondary:text-white/80';
-
-export const ProductBlock = JSX<ProductBlockProps>((props) => {
-  const { className = '', breadcrumbs, backwardButton, version = 'primary', ...rest } = props;
-  const buttonVersion = version === 'primary' ? version : 'white';
-
-  return (
-    <BlockWrapper
-      className={style(
-        'overflow-hidden p-default flex flex-col box-border min-h-[454px]',
-        className,
-      )}
-      version={version}
-      {...rest}
-    >
-      {backwardButton?.text ? renderBackwardButton(backwardButton, buttonVersion) : null}
-      {breadcrumbs?.length ? (
-        <div className="text-xs-light mb-6">
-          {joinList(<span className={style('mx-2', breadcrumbStyle)}>/</span>)(
-            breadcrumbs.map((breadcrumb, i) => (
-              <Breadcrumb key={String(i)} className={breadcrumbStyle} {...breadcrumb} />
-            )),
-          )}
-        </div>
-      ) : null}
-      <ProductBlockInner className="mt-10" version={version} {...rest} />
-    </BlockWrapper>
-  );
-});
+export const ProductBlock = JSX<ProductBlockProps>(({ className, backwardButton, ...rest }) => (
+  <BlockWrapper
+    className={style('overflow-hidden p-default flex flex-col gap-10 box-border', className)}
+    {...rest}
+  >
+    {backwardButton?.text
+      ? renderBackwardButton(
+          backwardButton,
+          !rest.version || rest.version === 'primary' ? 'primary' : 'white',
+        )
+      : null}
+    <ProductBlockInner className="grow" {...rest} />
+  </BlockWrapper>
+));

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -2,7 +2,6 @@ import type { BulletsProps } from '../../model/Bullets';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { LinkProps } from '../../model/LinkProps';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { BackwardButtonProps, ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -15,11 +14,6 @@ export type ProductBlockInnerContent = HeadlineProps &
   ButtonContent &
   ImageContent &
   BulletsProps & {
-    /**
-     * @title Количество преимуществ в строке
-     * @enumNames ["2", "3"]
-     */
-    benefitsCountOfRow?: 2 | 3;
     /**
      * @title Список преимуществ
      * @minItems 2
@@ -29,11 +23,6 @@ export type ProductBlockInnerContent = HeadlineProps &
     benefitsVersion?: IconVersion;
     /** @title Лейбл (моб.) */
     label?: string;
-    /**
-     * @title Стиль для текстовой части
-     * @hidden
-     */
-    textBlockClassName?: string;
     /** @title Картинка справа/текст слева */
     directionRight?: boolean;
   };
@@ -43,8 +32,6 @@ export type ProductBlockInnerContent = HeadlineProps &
  */
 export type ProductBlockContent = UniBlockContent &
   ProductBlockInnerContent & {
-    /** @title Хлебные крошки */
-    breadcrumbs?: LinkProps[];
     /** @title Кнопка возврата */
     backwardButton?: BackwardButtonProps;
   };

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -4,7 +4,6 @@ import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { RichText } from '../../ui-kit/RichText/RichText';
-import { style } from '../../utils/style';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { Headline } from '../Headline/Headline';
 import type { ProductBlockInnerContent } from './ProductBlockContent';
@@ -14,67 +13,51 @@ export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({
-    className = '',
-    title,
+    className,
+    version = 'primary',
     headlineVersion = 'L',
+    title,
     description,
-    benefitsCountOfRow = 3,
     benefits,
     benefitsVersion,
-    buttons,
-    image,
-    __html,
     items,
-    version = 'primary',
     isDotted = true,
-    textBlockClassName = '',
+    __html,
+    buttons,
+    image,
     directionRight = true,
   }) => {
-    const benefitsCount = benefits?.filter((_) => _.label)?.length;
-    const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
+    const benefitsWithLabel = benefits?.filter((_) => _.label);
+    const img = image?.src ? <Img className="mt-[-50px]" image={image} /> : null;
 
     return (
-      <div className={style('flex grow justify-between items-stretch h-full', className)}>
-        {image?.src ? (
-          <Img className={style('mt-[-50px]', directionRight ? 'order-2' : '')} image={image} />
-        ) : null}
-        <div className={style('flex flex-col', textBlockClassName)}>
+      <BaseTile
+        className={className}
+        insetTitle={
           <Headline
-            className="!p-0 max-w-[600px]"
+            className="max-w-[600px] xl:max-w-[728px]"
             title={title}
             description={description}
             headlineVersion={headlineVersion}
             align="text-left"
+            isPadding={false}
           />
-          <BaseTile buttons={renderButtonsSection(buttons)}>
-            {benefitsCount ? (
-              <div className={benefitsContainerStyles}>
-                {benefits?.map(renderBenefit(version, benefitsVersion))}
-              </div>
-            ) : null}
-            {__html ? (
-              <div className="mt-5">
-                <RichText __html={__html} />
-              </div>
-            ) : null}
-            {items?.length ? (
-              <List
-                className="mt-5 text-h6"
-                items={items}
-                itemClassName="mb-[7px]"
-                isDotted={isDotted}
-              />
-            ) : null}
-          </BaseTile>
-        </div>
-      </div>
+        }
+        {...(directionRight ? { rightImage: img } : { leftImage: img })}
+        buttons={renderButtonsSection(buttons)}
+      >
+        {benefitsWithLabel?.length ? (
+          <div className="flex flex-wrap gap-6">
+            {benefitsWithLabel.map(renderBenefit(version, benefitsVersion))}
+          </div>
+        ) : null}
+        {__html ? (
+          <div className="mt-5">
+            <RichText __html={__html} />
+          </div>
+        ) : null}
+        {items?.length ? <List className="mt-5" items={items} isDotted={isDotted} /> : null}
+      </BaseTile>
     );
   },
 );
-
-const getBenefitsContainerStyles = (benefitsCountOfRow = 2) =>
-  `gap-6 mt-6 ${
-    benefitsCountOfRow > 2
-      ? 'inline-grid grid-cols-[auto_auto_auto]'
-      : 'inline-grid grid-cols-[auto_auto]'
-  }`;

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -2,35 +2,32 @@ import type { ButtonVersion } from '../../model/ButtonVersion';
 import { Button } from '../../ui-kit/Button/Button';
 import type { BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
-import { style } from '../../utils/style';
 
 export function renderBackwardButton(
-  button: BackwardButtonProps,
+  { text, href, target, icon }: BackwardButtonProps,
   version: ButtonVersion,
-  className?: string,
 ) {
-  const { text, href, target } = button;
   const iconVersion = version === 'primary' ? 'white' : 'black';
-  const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
+  const commonProps = { text, href, target, ariaLabel: text };
 
   return (
-    <div className={style('flex items-center', className)}>
+    <div className="flex items-center gap-3">
       <Button
+        className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center"
         version={version}
         rounded
-        className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3"
-        ariaLabel={text}
-        href={href}
-        target={target}
+        {...commonProps}
       >
         <Img
           className="w-4 h-4"
-          image={{ ...backwardIcon, iconVersion: backwardIcon.iconVersion || iconVersion }}
+          image={{
+            ...icon,
+            icon: icon?.icon || 'ArrowLeftIcon',
+            iconVersion: icon?.iconVersion || iconVersion,
+          }}
         />
       </Button>
-      {text ? (
-        <Button version="link" text={text} href={href} target={target} ariaLabel={text} />
-      ) : null}
+      <Button version="link" {...commonProps} />
     </div>
   );
 }

package/src/components/ProductBlock/renderBenefit.tsx

@@ -1,18 +1,9 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { IconVersion } from '../../model/IconVersion';
 import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 
 export const renderBenefit =
   (version: BlockVersion = 'primary', benefitsVersion: IconVersion = 'normal') =>
-  ({ icon, label, description }: BenefitItemProps, i: number) =>
-    (
-      <BenefitItem
-        key={String(i)}
-        icon={icon}
-        label={label}
-        description={description}
-        version={version}
-        benefitsVersion={benefitsVersion}
-      />
-    );
+  (props: BenefitItemProps, i: number) =>
+    <BenefitItem key={String(i)} version={version} benefitsVersion={benefitsVersion} {...props} />;

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,98 +1,75 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import { style } from '../../utils/style';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
-import type { ProductGalleryContent } from './ProductGalleryContent';
+import type { ProductGalleryContent, ProductSlide } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-interface NavButtonProps {
-  slide?: HeadlineCommonProps;
-  i: number;
-  isActive: boolean;
-  onClick: () => void;
-}
-
 export const ProductGallery = JSX<ProductGalleryProps>(
   ({ className = '', slides = [], ...rest }) => {
-    const galleryNav = slides.map((s) => s.nav);
-    const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-    const handleActiveSlideIndex = useCallback((_: number) => setActiveSlideIndex(_), []);
 
     return (
-      <BlockWrapper
-        className={`box-border pt-12 overflow-hidden relative w-100 mb-6 ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={style('box-border py-default overflow-hidden', className)} {...rest}>
         <div
-          className="flex duration-1000 pb-14"
-          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          className="flex duration-1000"
+          style={{ transform: `translateX(-${activeSlideIndex * 100}%)` }}
           role="list"
         >
-          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i))}
+          {slides.map(({ productBlock }, i) => (
+            <div key={String(i)} className="box-border grow-0 shrink-0 basis-full" role="listitem">
+              <ProductBlockInner
+                className="pl-default h-full"
+                headlineVersion="XXL"
+                {...productBlock}
+                {...rest}
+              />
+            </div>
+          ))}
         </div>
-
-        <div className="flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28">
-          {galleryNav.map((slide, i) =>
-            renderNavButton({
-              slide,
-              i,
-              isActive: Boolean(i === activeSlideIndex),
-              onClick: () => handleActiveSlideIndex(i),
-            }),
-          )}
+        <div className="h-28 px-6 mt-6 -mb-6 flex items-center gap-2 box-border">
+          {slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex }))}
         </div>
       </BlockWrapper>
     );
   },
 );
 
-function renderProductBlock(block: ProductBlockInnerContent, i: number) {
-  return (
-    <section
-      key={String(i)}
-      className="box-border relative flex grow-0 shrink-0 basis-full"
-      role="listitem"
-    >
-      <div className="flex grow">
-        <ProductBlockInner
-          className="pl-12 z-10 group-data-secondary:text-white"
-          textBlockClassName="mb-[154px]"
-          headlineVersion="XXL"
-          {...block}
-        />
-      </div>
-    </section>
-  );
+interface NavButtonProps {
+  activeSlideIndex: number;
+  onClick: (i: number) => void;
 }
 
-function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
-  const btnClassName = isActive
-    ? 'bg-white shadow-dark-blue min-w-[350px] border-none p-6'
-    : 'min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur';
-  const btnTitleClassName = isActive
-    ? 'text-primary-text !text-h6 p-2'
-    : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
-  const btnDescClassName = isActive
-    ? 'text-secondary-text text-l-light'
-    : 'text-m-light text-secondary-text group-data-secondary:text-white/80';
+const renderNavButton =
+  ({ activeSlideIndex, onClick }: NavButtonProps) =>
+  ({ nav }: ProductSlide, i: number) => {
+    const isActive = i === activeSlideIndex;
+    const btnClassName = isActive
+      ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
+      : 'min-w-[290px] ease-in duration-300 bg-white/10 px-6 py-5 hover:py-6 backdrop-blur';
+    const btnTitleClassName = isActive
+      ? 'text-primary-text text-h6 py-2'
+      : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
+    const btnDescClassName = isActive
+      ? 'text-secondary-text text-l-light'
+      : 'text-m-light text-secondary-text group-data-secondary:text-white/80';
 
-  return (
-    <button
-      type="button"
-      key={String(i)}
-      onClick={onClick}
-      aria-label={slide?.title}
-      className={`relative box-border overflow-hidden cursor-pointer text-left mx-1 grow basis-0 border border-gray group-data-secondary:border-white/50 ${btnClassName}`}
-    >
-      <div className="border-0 px-6">
-        <div className={`last:pb-0 ${btnTitleClassName}`}>{slide?.title}</div>
-        <div className={`text-secondary-text ${btnDescClassName}`}>{slide?.description}</div>
-      </div>
-    </button>
-  );
-}
+    return (
+      <button
+        type="button"
+        key={String(i)}
+        onClick={() => onClick(i)}
+        aria-label={nav?.title}
+        className={style(
+          'relative px-6 box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50',
+          btnClassName,
+        )}
+      >
+        <div className={btnTitleClassName}>{nav?.title}</div>
+        <div className={btnDescClassName}>{nav?.description}</div>
+      </button>
+    );
+  };

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

@@ -3,8 +3,9 @@ import '../../setup-fixture';
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { BlockDef } from '../../model/ContentPageDef';
 import { Blocks } from '../Blocks.mobile';
+import type { Picture } from '../../model/Picture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture.mobile';
-import { RollupItem } from './RollupItem.mobile';
+import { RollupItem } from './RollupItem';
 
 const options = {
   blocksRegistry: Blocks,
@@ -14,7 +15,6 @@ export const ROLLUP_ITEM: BlockDef = {
   type: 'RollupItem',
   content: {
     label: 'RollupItem label 1',
-    labelIcon: { icon: 'CardIcon' },
     isExpanded: true,
   },
   blocks: [
@@ -22,13 +22,33 @@ export const ROLLUP_ITEM: BlockDef = {
     { type: 'TextBlock', content: TEXT_BLOCK },
   ],
 };
+const labelIcon: Picture = { icon: 'BriefcaseIcon' };
 
 export default {
   default: (
     <div>
       <div className="list-none m-0 p-0">
+        <RollupItem
+          {...ROLLUP_ITEM.content}
+          version="secondary"
+          block={ROLLUP_ITEM}
+          options={options}
+        />
         <RollupItem {...ROLLUP_ITEM.content} block={ROLLUP_ITEM} options={options} />
       </div>
     </div>
   ),
+  labelIcon: (
+    <div>
+      <div className="list-none m-0 p-0">
+        <RollupItem
+          label="RollupItem label 1"
+          labelIcon={labelIcon}
+          isExpanded={true}
+          block={ROLLUP_ITEM}
+          options={options}
+        />
+      </div>
+    </div>
+  ),
 };