@redneckz/wildless-cms-uni-blocks 0.5.10 → 0.5.12

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

@@ -1,26 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { CardTransferContent } from './CardTransferContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { GetButtonClassParams } from '../../ui-kit/Button/GetButtonClassParams';
-import { getDisabledButtonClasses } from '../../ui-kit/Button/getDisabledButtonClasses';
-import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
 import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import type { CardTransferContent } from './CardTransferContent';
+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/';
-
 const DEFAULT_TITLE = 'Укажите сумму перевода';
 const DEFAULT_LABEL = 'Сумма перевода';
 const DEFAULT_PLACEHOLDER = '1500';
-const DEFAULT_BUTTON_TEXT = 'Далее';
-
-const BUTTON_CLASS_PARAMS: GetButtonClassParams = {
-  version: 'primary',
-  className: 'w-full h-[56px] px-9 mt-6',
-};
 
 export interface CardTransferProps extends CardTransferContent, UniBlockProps {}
 
@@ -30,15 +24,22 @@ export const CardTransfer = JSX<CardTransferProps>(
     title = DEFAULT_TITLE,
     label = DEFAULT_LABEL,
     placeholder = DEFAULT_PLACEHOLDER,
-    buttonText = DEFAULT_BUTTON_TEXT,
+    button,
+    context,
     ...rest
   }) => {
+    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 });
 
     return (
       <BlockWrapper
         className={`p-[50px] flex flex-col items-center font-sans bg-white ${className}`}
+        context={context}
         {...rest}
       >
         {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
@@ -47,20 +48,20 @@ export const CardTransfer = JSX<CardTransferProps>(
             name={AMOUNT_KEY}
             value={value}
             onChange={setValue}
+            valid={value === '' || !isDisabled}
             placeholder={placeholder}
             label={label}
           />
-          <button
-            type="submit"
-            className={
-              isDisabled
-                ? getDisabledButtonClasses(BUTTON_CLASS_PARAMS)
-                : getRegularButtonClasses(BUTTON_CLASS_PARAMS)
-            }
-            disabled={isDisabled}
-          >
-            {buttonText}
-          </button>
+          {button?.text ? (
+            <button
+              type="submit"
+              className={`w-full p-4 mt-6 ${buttonStyle} `}
+              disabled={isDisabled}
+              {...useLink({ router, handlerDecorator }, button)}
+            >
+              {button.text}
+            </button>
+          ) : null}
         </form>
       </BlockWrapper>
     );

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

@@ -0,0 +1 @@
+{}

package/mobile/src/components/CardTransfer/CardTransferContent.ts

@@ -1,4 +1,5 @@
 import type { LabelProps, TitleProps } from '../../model/HeadlineType';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Перевод с карты на карту
@@ -7,6 +8,5 @@ export type CardTransferContent = LabelProps &
   TitleProps & {
     /** @title Плейсхолдер */
     placeholder?: string;
-    /** @title Текст кнопки */
-    buttonText?: string;
+    button?: ButtonProps;
   };

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/Catalog.ui.json

@@ -0,0 +1 @@
+{}

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

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

@@ -0,0 +1 @@
+{}

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

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { UniBlockProps } from '../../model/ContentPageDef';
-import type { TitleProps } from '../../model/HeadlineType';
-import type { IconProps } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
-import { CellData } from './ComparisonTableContent';
+import type { CellData, ColumnHeader } from './ComparisonTableContent';
 import { GRADIENT } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCell } from './TableCell';
@@ -14,13 +12,11 @@ export interface TableColumnData {
   cell: CellData[];
 }
 
-export type TableColumnHeader = TitleProps & IconProps;
-
 export interface TableColumnProps extends UniBlockProps {
-  header: TableColumnHeader;
-  columnData: TableColumnData[];
-  visibleRowLength: number;
-  isFillGradient: boolean;
+  header?: ColumnHeader;
+  columnData?: TableColumnData[];
+  visibleRowLength?: number;
+  isFillGradient?: boolean;
   showRow: boolean;
   onToggleColumn: () => void;
 }
@@ -48,25 +44,33 @@ export const TableColumn = JSX<TableColumnProps>(
             ))
           : null}
 
-        {showRow && renderButton({ header, buttonVersion })}
+        {showRow && header?.link ? (
+          <Button
+            href={header.link.href}
+            target={header.link.target}
+            version={buttonVersion}
+            className="text-s font-medium mt-4 py-[11px]"
+          >
+            {header.link.text}
+          </Button>
+        ) : null}
         {renderToggleButton({ onToggleColumn, isFillGradient, showRow })}
       </div>
     );
   },
 );
 
-const renderButton = ({ header, buttonVersion }) => (
-  <Button
-    href={header.link.href}
-    target={header.link.target}
-    version={buttonVersion}
-    className="text-s font-medium mt-4 py-[11px]"
-  >
-    {header.link.text}
-  </Button>
-);
+interface RenderToggleButtonProps {
+  onToggleColumn: () => void;
+  isFillGradient?: boolean;
+  showRow: boolean;
+}
 
-const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (
+const renderToggleButton = ({
+  onToggleColumn,
+  isFillGradient,
+  showRow,
+}: RenderToggleButtonProps) => (
   <div className="mt-5" role="cell">
     <a
       role="link"

package/mobile/src/components/ContentPage/ContentPage.page.json

@@ -57,6 +57,18 @@
         ]
       }
     },
+    {
+      "type": "Tabs",
+      "style": ["col-span-12"],
+      "content": {
+        "isSticky": true,
+        "tabs": [
+          { "type": "link", "href": "#placeholder", "text": "В разработке" },
+          { "type": "link", "href": "#products", "text": "Продукты" },
+          { "type": "link", "href": "#gallery", "text": "Галерея" }
+        ]
+      }
+    },
     {
       "type": "ProductGallery",
       "style": ["col-span-12"],
@@ -477,6 +489,7 @@
     {
       "type": "Placeholder",
       "style": ["col-span-12"],
+      "anchor": "placeholder",
       "content": {
         "title": "Какой то новый блок"
       }
@@ -557,6 +570,7 @@
     {
       "type": "ProductTile",
       "style": ["col-span-6"],
+      "anchor": "products",
       "content": {
         "title": "Акция! “Кредит На все, что хочется!”",
         "description": "Потребительский кредит на любые цели, без залога и поручительства",
@@ -882,6 +896,7 @@
     {
       "type": "MiniGallery",
       "style": ["col-span-12"],
+      "anchor": "gallery",
       "content": {
         "title": "Вы можете оплатить бонусными баллами",
         "description": "Удобный каталог с большим ассортиментом товаров и сервисов",
@@ -1421,7 +1436,6 @@
     {
       "type": "LinkDocs",
       "style": ["col-span-12"],
-      "anchor": "documents",
       "content": {
         "title": "Дополнительные документы",
         "description": "Ответы на часто задаваемые вопросы",

package/mobile/src/components/ContentPage/ContentPageContext.tsx

@@ -1,5 +1,3 @@
-import { VNode } from '../../model/VNode';
-
 export interface Router {
   pathname: string;
   query: Record<string, string | string[] | undefined>;
@@ -16,19 +14,7 @@ export interface Search {
   setTerm: (t: string) => void;
 }
 
-export interface IntersectionObserverTagProps {
-  tag: keyof HTMLElementTagNameMap;
-  className?: string;
-  anchor?: string;
-  children?: VNode;
-  observerCallback: IntersectionObserverCallback;
-  observerOptions?: IntersectionObserverInit;
-}
-
-export type IntersectionObserverComponent = (props: IntersectionObserverTagProps) => VNode;
-
 export interface ContentPageContext {
   useRouter: () => Router;
   handlerDecorator?: HandlerDecorator;
-  IntersectionObserverTag: IntersectionObserverComponent;
 }

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -33,9 +33,7 @@ export const ErrorBlock = JSX<ErrorBlockProps>(
         <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
         {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
         {subtitle ? (
-          <div className="font-sans text-xl-light text-left mb-7 max-w-[613px] text-center">
-            {subtitle}
-          </div>
+          <div className="font-sans text-xl-light mb-7 max-w-[613px] text-center">{subtitle}</div>
         ) : null}
         {button?.text ? (
           <Button

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

@@ -0,0 +1,12 @@
+{
+  "content": {
+    "error": {
+      "errorContentType": {
+        "ui:widget": "hidden"
+      },
+      "image": {
+        "ui:field": "picture"
+      }
+    }
+  }
+}

package/mobile/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -1,13 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/ContentPageDef';
 import { Button } from '../../ui-kit/Button/Button';
-import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { renderInput } from './renderInput';
 import { calculateResult, formatValue } from './calculateResult';
 import { callbackCurrencySelect } from './callbackCurrencySelect';
 import { Currency } from './CurrencyProps';
-import { renderInput } from './renderInput';
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
 export interface ExchangeCurrencyItem {
   code?: Currency;
   buy?: number;

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

@@ -0,0 +1 @@
+{}

package/mobile/src/components/ExchangeRateTile/renderInput.tsx

@@ -1,6 +1,6 @@
 import { Input } from '../../ui-kit/Input/Input';
-import { SelectCustom } from '../../ui-kit/SelectCustom/SelectCustom';
-import type { OptionProps } from '../../ui-kit/SelectCustom/SelectCustom';
+import { Select } from '../../ui-kit/Select/Select';
+import type { OptionProps } from '../../ui-kit/Select/Select';
 import type { Currency } from './CurrencyProps';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 
@@ -21,14 +21,14 @@ export function renderInput(props: InputProps) {
   return (
     <div className="relative flex">
       <Input
-        className="shrink-0 h-14 pl-4 pt-4 pb-4 text-l w-full appearance-none mr-[-90px]"
+        className="shrink-0 text-l w-full appearance-none mr-[-90px]"
         placeholder={placeholder}
         type="text"
         value={value}
         onChange={setValue}
       />
       {ratesOptions.length ? (
-        <SelectCustom
+        <Select
           isBorder={false}
           onChange={(_) => setSelected(_.key as Currency)}
           options={ratesOptions}

package/mobile/src/components/Footer/Contacts.tsx

@@ -28,6 +28,7 @@ export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton,
               target: '_blank',
             },
           )}
+          ariaLabel="Обратная связь"
         />
       ) : null}
     </div>

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

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "subMenu": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/mobile/src/components/Footer/FooterContent.ts

@@ -1,7 +1,7 @@
-import type { LinkProps } from '../../model/LinkProps';
-import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { IconProps } from '../../model/Picture';
 import type { DescriptionProps } from '../../model/HeadlineType';
+import type { LinkCommonProps, LinkProps } from '../../model/LinkProps';
+import type { IconProps } from '../../model/Picture';
+import type { SitemapProps } from '../../services/sitemap/SitemapProps';
 
 /**
  * @title Тип контакта
@@ -21,11 +21,6 @@ export type ContactInfo = DescriptionProps & {
   type?: ContactType;
 };
 
-/**
- * @required ["href"]
- */
-export type SocialMedia = Omit<LinkProps, 'text'>;
-
 /**
  * @title Пункт подменю
  */
@@ -43,9 +38,9 @@ export interface FooterContent extends SitemapProps {
   /** @title Контакты */
   contacts?: ContactInfo[];
   /** @title Социальные сети */
-  socialMedia?: SocialMedia[];
+  socialMedia?: LinkCommonProps[];
   /** @title Мобильные приложения */
-  mobileApps?: SocialMedia[];
+  mobileApps?: LinkCommonProps[];
   /** @title Заголовок для меню */
   horizontalNavigationTitle?: string; // TODO: для мобильной версии
   /** @title Подменю */