@redneckz/wildless-cms-uni-blocks 0.5.11 → 0.5.13

package/mobile/lib/ui-kit/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/Select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/Select.tsx"],"names":[],"mappings":"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"}

package/mobile/lib/utils/getSanitizedValue.d.ts

@@ -0,0 +1 @@
+export declare const getSanitizedValue: (_: string) => string;

package/mobile/lib/utils/getSanitizedValue.js

@@ -0,0 +1,2 @@
+export const getSanitizedValue = (_) => _.split(/\s+/).join('');
+//# sourceMappingURL=getSanitizedValue.js.map

package/mobile/lib/utils/getSanitizedValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSanitizedValue.js","sourceRoot":"","sources":["../../src/utils/getSanitizedValue.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAS,EAAU,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}

package/mobile/src/common.css

@@ -5,9 +5,17 @@ html {
   scroll-behavior: smooth;
 }
 
+* {
+  --color-green: 78, 190, 81;
+  --color-green-light: 131, 184, 62;
+  --color-green-dark: 66, 171, 68;
+  --color-green-more-dark: 39, 148, 41;
+  --color-yellow: 221, 182, 61;
+}
+
 /* Private clients | Green */
 [data-theme='pc'] {
-  --color-primary-main: 66, 171, 68;
+  --color-primary-main: var(--color-green-dark);
   --color-primary-hover: 36, 131, 65;
   --color-primary-active: 36, 95, 52;
   --color-secondary-hover: 36, 131, 65;
@@ -17,7 +25,7 @@ html {
 }
 /* Business clients | Light-Green */
 [data-theme='bc'] {
-  --color-primary-main: 131, 184, 62;
+  --color-primary-main: var(--color-green-light);
   --color-primary-hover: 92, 146, 29;
   --color-primary-active: 60, 94, 16;
   --color-secondary-hover: 92, 146, 29;
@@ -27,7 +35,7 @@ html {
 }
 /* Ecosystem own | Yellow */
 [data-theme='eo'] {
-  --color-primary-main: 221, 182, 61;
+  --color-primary-main: var(--color-yellow);
   --color-primary-hover: 187, 151, 39;
   --color-primary-active: 126, 99, 12;
   --color-secondary-hover: 187, 151, 39;

package/mobile/src/components/Accordion/Accordion.tsx

@@ -1,30 +1,40 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/ContentPageDef';
+import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+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 }) => {
+  ({ title, description, accordionItems, context, className = '', bordered, ...rest }) => {
     return (
-      <section className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}>
+      <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 ? (
-          <ul className="list-none m-0 p-0">
+          <AccordionItemsList>
             {accordionItems.map((item, i) => (
               <AccordionItem
                 key={`AccordionItem_${i}`}
-                {...item}
                 context={context}
                 bordered={bordered}
-              />
+                hasContent={Boolean(item.blocks?.length)}
+                {...item}
+              >
+                {renderBlocksList({ blocks: item.blocks, context, className: '!p-0 mb-5' })}
+              </AccordionItem>
             ))}
-          </ul>
+          </AccordionItemsList>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/mobile/src/components/Accordion/AccordionContent.ts

@@ -1,12 +1,9 @@
 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';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
-/**
- * @title Элемент списка
- */
 export interface AccordionItemCommonProps {
   /**
    * @title Название
@@ -15,8 +12,6 @@ export interface AccordionItemCommonProps {
   label?: string;
   /** @title Отображать в раскрытом виде */
   isExpanded?: boolean;
-  /** @title Блоки */
-  blocks?: BlockDef[];
   /**
    * @title Отображать/скрывать обводку элемента
    * @default false
@@ -25,6 +20,14 @@ export interface AccordionItemCommonProps {
   labelIcon?: Picture; // TODO: только для мобильной версии
 }
 
+/**
+ * @title Элемент списка
+ */
+export interface AccordionItem extends AccordionItemCommonProps {
+  /** @title Блоки */
+  blocks?: BlockDef[];
+}
+
 /**
  * @title Аккордеон
  */
@@ -36,7 +39,7 @@ export type AccordionContent = HeadlineCommonProps & {
   accordionAlignTitle?: AlignType;
   version?: BlockVersion;
   /** @title Список */
-  accordionItems?: AccordionItemCommonProps[];
+  accordionItems?: AccordionItem[];
   /**
    * @title Отображать/скрывать обводку у элемента списка
    * @default false

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

@@ -1,42 +1,70 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+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 { AccordionItemCommonProps } from './AccordionContent';
-import { AccordionItemInner } from './AccordionItemInner';
-import { useActiveHandler } from './useActiveHandler';
+import type { AccordionItemProps } from './AccordionItemProps';
 
-export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
+const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
 export const AccordionItem = JSX<AccordionItemProps>(
-  ({ label, labelIcon, blocks, bordered, context }) => {
-    const { hasContent, icon, handleToggle } = useActiveHandler({ blocks });
+  ({ label = '', labelIcon, bordered, children, hasContent = true }) => (
+    <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
+      <Foldable
+        isFoldButtonOnTop={true}
+        renderFoldableSection={({ isUnfolded }) => (
+          <FoldableSection className="flex flex-wrap group-last:last:pb-0" isUnfolded={isUnfolded}>
+            {children}
+          </FoldableSection>
+        )}
+        renderFoldButton={({ isUnfolded, onToggle }) => (
+          <FoldButton
+            className={bordered ? '' : 'py-[14px] px-0'}
+            label={label}
+            icon={icons[Number(isUnfolded)]}
+            primaryIcon={labelIcon}
+            hasContent={hasContent}
+            onClick={onToggle}
+          />
+        )}
+      />
+    </li>
+  ),
+);
+
+interface FoldButtonProps {
+  className?: string;
+  label: string;
+  icon: IconName;
+  primaryIcon?: Picture;
+  hasContent: boolean;
+  onClick?: () => void;
+}
 
-    return (
-      <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
-        <button
-          className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
-          ${bordered ? '' : 'py-[14px] px-0'}
-          ${hasContent ? 'group cursor-pointer' : ''}`}
-          onClick={handleToggle}
-        >
-          <span
-            className={`text-m-title-xs font-medium pr-2.5 flex ${
-              hasContent ? 'group-hover:text-primary-main' : ''
-            }`}
-          >
-            {labelIcon ? (
-              <Img image={labelIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
-            ) : null}
-            {label}
-          </span>
-          {hasContent ? (
-            <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
-          ) : null}
-        </button>
-        {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
-      </li>
-    );
-  },
+const FoldButton = JSX<FoldButtonProps>(
+  ({ className, hasContent, icon, label, primaryIcon, onClick }) => (
+    <button
+      className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
+  ${className}
+  ${hasContent ? 'group cursor-pointer' : ''}`}
+      onClick={onClick}
+    >
+      <span
+        className={`text-m-title-xs font-medium pr-2.5 flex ${
+          hasContent ? 'group-hover:text-primary-main' : ''
+        }`}
+      >
+        {primaryIcon ? (
+          <Img image={primaryIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
+        ) : null}
+        {label}
+      </span>
+      {hasContent ? (
+        <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
+      ) : null}
+    </button>
+  ),
 );
 
 function borderedLiClass(bordered?: boolean) {

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

@@ -0,0 +1,6 @@
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { AccordionItemCommonProps } from './AccordionContent';
+
+export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {
+  hasContent?: boolean;
+}

package/mobile/src/components/Accordion/AccordionItemsList.tsx

@@ -0,0 +1,5 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export const AccordionItemsList = JSX(({ children }) => (
+  <ul className="list-none m-0 p-0">{children}</ul>
+));

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

@@ -63,7 +63,7 @@ const renderBenefits = (
 };
 
 const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BlockVersion) => {
-  if (!benefitIcon.icon) {
+  if (!benefitIcon.icon || benefitIcon?.iconVersion) {
     return benefitIcon;
   }
   benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';

package/mobile/src/components/Blocks.ts

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

package/mobile/src/components/Calculator/CalculatorContent.ts

@@ -138,7 +138,7 @@ export type CalculatorNav = HeadlineCommonProps & IconProps;
 /**
  * @title Вкладка
  */
-export type CalculatorTab = TitleProps & {
+export type CalculatorTab = {
   nav?: CalculatorNav;
   calculatorBlock?: CalculatorBlockDef;
 };

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -8,6 +8,7 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { getDisabledButtonClasses } from '../../ui-kit/Button/getDisabledButtonClasses';
 import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
 import { useLink } from '../../hooks/useLink';
+import { getSanitizedValue } from '../../utils/getSanitizedValue';
 
 const AMOUNT_KEY = 'amount';
 const FORM_URL = 'https://www.rshb.ru/p2p/';
@@ -30,7 +31,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     const router = context.useRouter();
     const { handlerDecorator } = context;
     const [value, setValue] = useState<string>('');
-    const isDisabled = !Number(value);
+    const isDisabled = !Number(getSanitizedValue(value));
     const buttonStyle = isDisabled
       ? getDisabledButtonClasses({ version: button?.version })
       : getRegularButtonClasses({ className: 'text-white', version: button?.version });
@@ -47,6 +48,7 @@ export const CardTransfer = JSX<CardTransferProps>(
             name={AMOUNT_KEY}
             value={value}
             onChange={setValue}
+            valid={value === '' || !isDisabled}
             placeholder={placeholder}
             label={label}
           />

package/mobile/src/components/Catalog/Catalog.tsx

@@ -44,8 +44,8 @@ export const Catalog = JSX<CatalogProps>(
           activeCardIndex,
           setActiveCardIndex,
         })}
-        <div className={`${BLUR_BLOCK_CLASSES} left-0 ${'bg-opacity-from-white'}`} />
-        <div className={`${BLUR_BLOCK_CLASSES} right-0 ${'bg-opacity-to-white'}`} />
+        <div className={`${BLUR_BLOCK_CLASSES} left-0 bg-opacity-from-white`} />
+        <div className={`${BLUR_BLOCK_CLASSES} right-0 bg-opacity-to-white`} />
       </BlockWrapper>
     );
   },

package/mobile/src/components/Catalog/CatalogCard.tsx

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/ContentPageDef';
-import type { Picture } from '../../model/Picture';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { CatalogCardType } from './CatalogContent';
@@ -13,12 +11,6 @@ export interface CatalogCardProps extends CatalogCardType, UniBlockProps {
   version?: BlockVersion;
 }
 
-const iconVersionMap = {
-  default: 'normal',
-  primary: 'white',
-  secondary: 'black',
-};
-
 const cardStyleMap: Record<ProductColorVersion, string> = {
   black: 'bg-black',
   white: 'bg-white',
@@ -43,7 +35,7 @@ export const CatalogCard = JSX<CatalogCardProps>(
           </div>
         ) : null}
         {price ? <div className="text-h3 text-left">{price}&nbsp;₽</div> : null}
-        {button ? renderButton(button) : null}
+        {button ? <Button className="mt-5 w-full" {...button} /> : null}
       </section>
     );
   },
@@ -55,29 +47,3 @@ const renderColorOption = (color: ProductColorVersion, i: number) => (
     className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
   />
 );
-
-const renderButton = (button: ButtonWithIconProps) => {
-  const { icon, iconRight, ...other } = button;
-
-  if (!button?.text) {
-    return null;
-  }
-
-  const iconVersion = iconVersionMap[button?.version || 'default'];
-  const leftIcon = renderButtonIcon({ ...icon, iconVersion });
-  const rightIcon = renderButtonIcon({ ...iconRight, iconVersion });
-
-  return (
-    <Button className="mt-5 w-full" appendLeft={leftIcon} appendRight={rightIcon} {...other} />
-  );
-};
-
-const renderButtonIcon = (buttonIcon?: Picture) => {
-  if (!buttonIcon || (!buttonIcon?.icon && !buttonIcon?.src)) {
-    return null;
-  }
-
-  const iconWidth = buttonIcon?.size?.width ? `${buttonIcon.size.width}` : '24';
-
-  return <Img image={buttonIcon} width={iconWidth} height="24" asSVG />;
-};

package/mobile/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,143 +1,72 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/ContentPageDef';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import type { ComparisonTableContent } from './ComparisonTableContent';
+import type { CellData, ComparisonTableContent } from './ComparisonTableContent';
 import { TableColumn } from './TableColumn';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
-export const ComparisonTable = JSX<ComparisonTableProps>(
-  ({
-    className,
-    context,
-    title,
-    rowHeaders,
-    columns,
-    visibleRowLength = 0,
-    isColoredFirstColumn = false,
-    orientation = 'vertical',
-  }) => {
-    const tableData =
-      columns?.map(({ data, header }) => ({
-        header,
-        column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
-      })) || [];
+export const ComparisonTable = JSX<ComparisonTableProps>((props) => {
+  const { className, title } = props;
 
+  return (
+    <section
+      className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
+        className || ''
+      }`}
+    >
+      {title ? (
+        <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
+      ) : null}
+      <div role="table">
+        <TableInner {...props} />
+      </div>
+    </section>
+  );
+});
+
+const TableInner = JSX<ComparisonTableProps>(
+  ({ columns, rowHeaders, isColoredFirstColumn, visibleRowLength, orientation, context }) => {
     const [columnsViewState, setColumnsViewState] = useState(
       new Array<boolean>(columns?.length || 0).fill(!visibleRowLength),
     );
 
-    const handleToggleColumn = (i: number) => {
-      columnsViewState[i] = !columnsViewState[i];
-      setColumnsViewState([...columnsViewState]);
-    };
+    const handleToggleColumn = useCallback((colIndex: number) => {
+      const toggleColState = (colState: boolean, i: number) =>
+        i === colIndex ? !colState : colState;
 
-    return (
-      <section
-        className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
-          className || ''
-        }`}
-      >
-        {title ? (
-          <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
-        ) : null}
+      setColumnsViewState((_) => _.map(toggleColState));
+    }, []);
 
-        {renderColumns({
-          tableData,
-          context,
-          visibleRowLength,
-          isColoredFirstColumn,
-          columnsViewState,
-          handleToggleColumn,
-          orientation,
-          setColumnsViewState,
-        })}
-      </section>
+    const handleSlideChange = useCallback(
+      () => setColumnsViewState((_) => new Array(_.length).fill(false)),
+      [],
     );
-  },
-);
 
-const renderColumns = ({
-  context,
-  tableData,
-  visibleRowLength,
-  isColoredFirstColumn,
-  columnsViewState,
-  handleToggleColumn,
-  orientation = 'horizontal',
-  setColumnsViewState,
-}) => (
-  <div role="table">
-    {tableData?.length
-      ? renderInnerTable({
-          orientation,
-          context,
-          columnsViewState,
-          setColumnsViewState,
-          tableData,
-          visibleRowLength,
-          isColoredFirstColumn,
-          handleToggleColumn,
-        })
-      : null}
-  </div>
-);
+    const getColumnData = (cellData?: CellData[][]) =>
+      cellData?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title }));
 
-const renderInnerTable = ({
-  orientation,
-  context,
-  columnsViewState,
-  setColumnsViewState,
-  tableData,
-  visibleRowLength,
-  isColoredFirstColumn,
-  handleToggleColumn,
-}) =>
-  orientation === 'horizontal' ? (
-    <SwipeListControl
-      context={context}
-      onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
-    >
-      {tableData.map(
-        renderColumn({
-          context,
-          visibleRowLength,
-          isColoredFirstColumn,
-          columnsViewState,
-          handleToggleColumn,
-        }),
-      )}
-    </SwipeListControl>
-  ) : (
-    tableData.map(
-      renderColumn({
-        context,
-        visibleRowLength,
-        isColoredFirstColumn,
-        columnsViewState,
-        handleToggleColumn,
-      }),
-    )
-  );
-
-const renderColumn =
-  ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) =>
-  (columnData, i) =>
-    (
+    const tableColumns = columns?.map(({ data, header }, colIndex) => (
       <TableColumn
-        key={String(i)}
+        key={String(colIndex)}
         context={context}
         visibleRowLength={visibleRowLength}
-        showRow={columnsViewState[i]}
-        header={columnData.header}
-        columnData={columnData.column}
-        isFillGradient={i === 0 && isColoredFirstColumn}
-        onToggleColumn={() => handleToggleColumn(i)}
+        showRow={columnsViewState[colIndex]}
+        header={header}
+        columnData={getColumnData(data)}
+        isFillGradient={colIndex === 0 && isColoredFirstColumn}
+        onToggleColumn={() => handleToggleColumn(colIndex)}
       />
-    );
+    ));
 
-const onSlideChange = (columnsViewState, setColumnsViewState) => () => {
-  setColumnsViewState(new Array(columnsViewState.length).fill(false));
-};
+    return orientation === 'horizontal' ? (
+      <SwipeListControl context={context} onSlideChange={handleSlideChange}>
+        {tableColumns}
+      </SwipeListControl>
+    ) : (
+      tableColumns
+    );
+  },
+);