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

package/mobile/src/components/Accordion/Accordion.example.json

@@ -1,66 +1,4 @@
 {
   "title": "Аккордеон",
-  "accordionAlignTitle": "center",
-  "accordionItems": [
-    {
-      "label": "Аккордеон 1",
-      "labelIcon": {
-        "icon": "CardIcon"
-      },
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    },
-    {
-      "label": "Аккордеон 2",
-      "labelIcon": {
-        "icon": "CardIcon"
-      },
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-6"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-6"]
-        }
-      ]
-    },
-    {
-      "label": "Аккордеон 3",
-      "labelIcon": {
-        "icon": "CardIcon"
-      },
-      "blocks": [
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок",
-          "description": "Описание текстового блока",
-          "style": ["col-span-12"]
-        },
-        {
-          "blockListType": "TextBlock",
-          "title": "Текстовый блок №2",
-          "description": "Описание текстового блока №2",
-          "style": ["col-span-12"]
-        }
-      ]
-    }
-  ]
+  "accordionAlignTitle": "center"
 }

package/mobile/src/components/Accordion/Accordion.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/mobile/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/mobile/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/mobile/src/components/AccordionItem/AccordionItem.example.json

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

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

@@ -0,0 +1,73 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { getParentBlockContent } from '../../model/getParentBlockContent';
+import type { JSXBlock } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
+import type { AccordionContent } from '../Accordion/AccordionContent';
+import type { AccordionItemProps } from './AccordionItemProps';
+
+const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
+
+export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProps>(
+  ({ className = '', ancestors, label = '', labelIcon, isExpanded, children }) => {
+    const { bordered } = getParentBlockContent(ancestors, {} as AccordionContent);
+
+    return (
+      <li
+        className={`${
+          bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'
+        } border-solid border-main-divider ${className}`}
+      >
+        <Foldable
+          isFoldButtonOnTop={true}
+          unfoldedByDefault={isExpanded}
+          renderFoldableSection={({ isUnfolded }) => (
+            <FoldableSection
+              className="flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0"
+              isUnfolded={isUnfolded}
+            >
+              {children}
+            </FoldableSection>
+          )}
+          renderFoldButton={({ isUnfolded, onToggle }) => (
+            <FoldButton
+              className={bordered ? '' : 'py-[14px] px-0'}
+              label={label}
+              icon={icons[Number(isUnfolded)]}
+              primaryIcon={labelIcon}
+              onClick={onToggle}
+            />
+          )}
+        />
+      </li>
+    );
+  },
+);
+
+AccordionItem.childrenTypes = [];
+
+interface FoldButtonProps {
+  className?: string;
+  label: string;
+  icon: IconName;
+  primaryIcon?: Picture;
+  onClick?: () => void;
+}
+
+const FoldButton = JSX<FoldButtonProps>(({ className, icon, label, primaryIcon, onClick }) => (
+  <button
+    className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text group cursor-pointer ${className}`}
+    onClick={onClick}
+  >
+    <span className="text-m-title-xs font-medium pr-2.5 flex group-hover:text-primary-main">
+      {primaryIcon ? (
+        <Img image={primaryIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
+      ) : null}
+      {label}
+    </span>
+    <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
+  </button>
+));

package/mobile/src/components/AccordionItem/AccordionItem.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "labelIcon": {
+      "ui:field": "icon"
+    }
+  }
+}

package/mobile/src/components/AccordionItem/AccordionItemContent.ts

@@ -0,0 +1,15 @@
+import type { Picture } from '../../model/Picture';
+
+/**
+ * @title Элемент аккордиона
+ */
+export interface AccordionItemContent {
+  /**
+   * @title Название
+   * @default Список
+   */
+  label?: string;
+  /** @title Отображать в раскрытом виде */
+  isExpanded?: boolean;
+  labelIcon?: Picture; // TODO: только для мобильной версии
+}

package/mobile/src/components/AccordionItem/AccordionItemProps.ts

@@ -0,0 +1,4 @@
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { AccordionItemContent } from './AccordionItemContent';
+
+export interface AccordionItemProps extends AccordionItemContent, UniBlockProps {}

package/mobile/src/components/BaseTile/BaseTile.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { BaseTileCommonProps } from './BaseTileProps';
 
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';

package/mobile/src/components/Blocks.ts

@@ -1,4 +1,5 @@
 import { Accordion } from './Accordion/Accordion';
+import { AccordionItem } from './AccordionItem/AccordionItem';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
@@ -16,6 +17,7 @@ import { TextBlock } from './TextBlock/TextBlock';
 
 export const Blocks = {
   Accordion,
+  AccordionItem,
   ComparisonTable,
   Footer,
   Gallery,

package/mobile/src/components/Bonus/Bonus.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,15 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { Headline } from '../Headline/Headline';
-import type { BonusBenefit, BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
-import { getElementsColsValue } from './getElementsColsValue';
+import type {
+  BonusBenefit,
+  BonusBenefitsBlockContent,
+  ColumnsCount,
+} from './BonusBenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ context, className = '', title, subtitle, bonusBenefits, ...rest }) => (
+  ({ context, className = '', title, subtitle, bonusBenefits, columnsCount = '4', ...rest }) => (
     <BlockWrapper
       className={`font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`}
       context={context}
@@ -24,7 +27,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
         align="center"
       />
       {bonusBenefits?.length ? (
-        <div className={`grid gap-1 mt-8 ${getElementsColsValue(className)}`}>
+        <div className={`grid gap-1 mt-8 ${getElementsColsValue(columnsCount)}`}>
           {bonusBenefits.map(renderBonusBenefit)}
         </div>
       ) : null}
@@ -49,3 +52,6 @@ const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
     </div>
   );
 };
+
+const getElementsColsValue = (colValue: ColumnsCount) =>
+  colValue === '4' ? 'grid-cols-4' : 'grid-cols-5';

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlock.ui.json

@@ -7,5 +7,10 @@
         }
       }
     }
+  },
+  "style": {
+    "ui:options": {
+      "minCols": 12
+    }
   }
 }

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlockContent.ts

@@ -1,5 +1,13 @@
-import type { IconProps } from '../../model/Picture';
 import type { LabelProps, TitleProps } from '../../model/HeadlineType';
+import type { IconProps } from '../../model/Picture';
+/**
+ * @title Количество элементов в строке
+ * @enumNames [
+ *   "Четыре колонки",
+ *   "Пять колонок",
+ *  ]
+ */
+export type ColumnsCount = '4' | '5';
 
 /**
  * @title Бонус и преимущество
@@ -14,4 +22,5 @@ export type BonusBenefitsBlockContent = TitleProps & {
   subtitle?: string;
   /** @title Список бонусов */
   bonusBenefits?: BonusBenefit[];
+  columnsCount?: ColumnsCount;
 };

package/mobile/src/components/Calculator/BonusCalculatorForm.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_REST_MIN_SUM, DEFAULT_TRAVEL_MIN_SUM } from './constants';

package/mobile/src/components/Calculator/Calculator.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';

package/mobile/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
@@ -88,7 +88,8 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             value={calculatorParams.monthlyPayment}
             postfix="₽"
           />
-          {renderPaymentTypeSelector(context, {
+          {renderPaymentTypeSelector({
+            context,
             items: paymentTypeItems,
             checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL,
             onChange: (text: string) => toggleIsAnnuity(text === ANNUITY),

package/mobile/src/components/Calculator/DepositCalculatorForm.tsx

@@ -2,7 +2,7 @@
 
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import {
@@ -78,7 +78,8 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           {finallySum ? (
             <CalculatorValueBlock title="Сумма в конце срока" value={finallySum} postfix="₽" />
           ) : null}
-          {renderPaymentTypeSelector(context, {
+          {renderPaymentTypeSelector({
+            context,
             items: depositTypeItems,
             checkedItem: isEveryMonth ? EVERY_MONTH : AT_END_TERM,
             onChange: (text: string) => toggleIsEveryMonth(text === EVERY_MONTH),

package/mobile/src/components/Calculator/renderButtonSection.tsx

@@ -1,6 +1,8 @@
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 
-export function renderButtonSection(context, buttons) {
+export function renderButtonSection(context: ContentPageContext, buttons?: ButtonWithIconProps[]) {
   return buttons?.length ? (
     <ButtonSection context={context} buttons={buttons} className="flex flex-col mt-7 gap-2" />
   ) : null;

package/mobile/src/components/Calculator/renderCalculatorBlock.tsx

@@ -1,4 +1,4 @@
-import type { JSXBlock } from '../../model/BlocksRegistry';
+import type { JSXBlock } from '../../model/JSXBlock';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { CalculatorBlockDef } from './CalculatorContent';
 import { EmbeddableCalcBlocks, EmbeddableCalcProps } from './EmbeddableCalcBlocks';

package/mobile/src/components/Calculator/renderFootnote.tsx

@@ -1,2 +1,2 @@
-export const renderFootnote = (text) =>
+export const renderFootnote = (text?: string) =>
   text ? <p className="text-s-light text-secondary-text mt-7">{text}</p> : null;

package/mobile/src/components/Calculator/renderInitialFeeInput.tsx

@@ -9,7 +9,11 @@ interface RenderWantedSumInputParams {
   moneyValue: number;
 }
 
-export function renderInitialFeeInput(title, props: RenderWantedSumInputParams, callback) {
+export function renderInitialFeeInput(
+  props: RenderWantedSumInputParams,
+  title?: string,
+  callback?: (value: number) => void,
+) {
   const { moneyValue } = props;
 
   const minSum = DEFAULT_MIN_SUM;

package/mobile/src/components/Calculator/renderMonthsInput.tsx

@@ -9,9 +9,13 @@ interface RenderMonthsInputParams {
   monthsValue: number;
 }
 
-export function renderMonthsInput(title: string, params: RenderMonthsInputParams, callback) {
+export function renderMonthsInput(
+  title: string,
+  params: RenderMonthsInputParams,
+  callback?: (value: number) => void,
+) {
   const { minMonths, maxMonths, monthsValue } = params;
-  const monthText = (month) => {
+  const monthText = (month: number) => {
     const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
 
     return `${month} ${text}`;

package/mobile/src/components/Calculator/renderPaymentTypeSelector.tsx

@@ -1,12 +1,14 @@
+import type { RadioButtonItem } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 
-export function renderPaymentTypeSelector(context, { items, checkedItem, onChange }) {
-  return (
-    <RadioButtonGroup
-      context={context}
-      items={items}
-      checkedItem={checkedItem}
-      onChangeCheckedItem={onChange}
-    />
-  );
+interface RenderPaymentTypeSelectorProps {
+  context: ContentPageContext;
+  items: RadioButtonItem[];
+  checkedItem?: string;
+  onChange: (id: string) => void;
+}
+
+export function renderPaymentTypeSelector({ onChange, ...rest }: RenderPaymentTypeSelectorProps) {
+  return <RadioButtonGroup onChangeCheckedItem={onChange} {...rest} />;
 }

package/mobile/src/components/Calculator/renderRealEstateValue.tsx

@@ -9,7 +9,11 @@ interface RenderRealEstateValueInputProps {
   moneyValue: number;
 }
 
-export function renderRealEstateValue(title, props: RenderRealEstateValueInputProps, callback) {
+export function renderRealEstateValue(
+  props: RenderRealEstateValueInputProps,
+  title?: string,
+  callback?: (value: number) => void,
+) {
   const { moneyValue } = props;
 
   const minSum = DEFAULT_MIN_SUM;

package/mobile/src/components/Calculator/renderWantedSumInput.tsx

@@ -13,7 +13,11 @@ interface RenderWantedSumParams {
   isShowItems?: boolean;
 }
 
-export function renderWantedSumInput(title: string, params: RenderWantedSumParams, callback) {
+export function renderWantedSumInput(
+  title: string,
+  params: RenderWantedSumParams,
+  callback?: (value: number) => void,
+) {
   const { moneyValue, minSum, maxSum, step = DEFAULT_MONEY_STEP, isShowItems = true } = params;
 
   const items = [