@redneckz/wildless-cms-uni-blocks 0.9.16 → 0.10.1

package/mobile/src/components/ExchangeRateOffice/ExchangeRateOffice.tsx

@@ -0,0 +1,60 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import type { CurrencyInformation, ExchangeRateOfficeContent } from './ExchangeRateOfficeContent';
+import { renderCurrencyRow } from './renderCurrencies';
+import { renderTableHeader } from './renderTableHeader';
+
+export interface ExchangeRateOfficeProps extends ExchangeRateOfficeContent, UniBlockProps {}
+
+export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
+  ({ className = '', currencies = [], actuality = '', officeName = '', ...rest }) => {
+    const fourRates: CurrencyInformation[] = topNRates(currencies, 4);
+
+    return (
+      <BlockWrapper
+        className={style('font-sans text-primary-text py-10 bg-white', className)}
+        {...rest}
+      >
+        <div className="flex flex-row flex-grow-0 justify-between mx-10 mb-8">
+          <Heading
+            headingType="h4"
+            title={'Курс обмена валют в ' + officeName}
+            className="whitespace-pre-wrap text-h4 mb-5"
+          />
+          <div className="pl-11">
+            <Text size="text-m-light" align="text-left" color="text-secondary-text">
+              {actuality}
+            </Text>
+          </div>
+        </div>
+        <div className="flex flex-row ml-8 mr-14 pt-4 text-left">
+          {fourRates.length > 0 ? (
+            <table className={style('h-fit w-fit', className)}>
+              <thead>
+                <tr>
+                  <th>
+                    <Text size="text-m-light" align="text-left" color="text-secondary-text">
+                      Валюта
+                    </Text>
+                  </th>
+                  {renderTableHeader('Купить')}
+                  {renderTableHeader('Продать')}
+                  {renderTableHeader('Лучшая покупка')}
+                  {renderTableHeader('Лучшая продажа')}
+                </tr>
+              </thead>
+              <tbody>{fourRates.map((item) => renderCurrencyRow(item))}</tbody>
+            </table>
+          ) : null}
+        </div>
+      </BlockWrapper>
+    );
+  },
+);
+
+const topNRates = (rates: CurrencyInformation[], n: number) =>
+  rates.sort((a, b) => Number(a.id) - Number(b.id)).slice(0, n);

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

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

package/mobile/src/components/ExchangeRateOffice/ExchangeRateOfficeContent.ts

@@ -0,0 +1,36 @@
+/**
+ * @title Информация об одной валюте
+ */
+export interface CurrencyInformation {
+  /** @title Номер */
+  id?: number;
+  /** @title Название */
+  title?: string;
+  /** @title Покупная цена */
+  buyPrice?: number;
+  /** @title Цена продажи */
+  sellPrice?: number;
+  /** @title Разница покупки */
+  buyDifference?: number;
+  /** @title Разница продажи */
+  sellDifference?: number;
+  /** @title Имя основного офиса для покупки */
+  buyOfficeName?: string;
+  /** @title Другие офисы покупки */
+  buyBonusOfficeName?: string;
+  /** @title Имя основного офиса для продажи*/
+  sellOfficeName?: string;
+  /** @title Другие офисы продажи */
+  sellBonusOfficeName?: string;
+}
+/**
+ * @title Курсы валют офиса
+ */
+export interface ExchangeRateOfficeContent {
+  /** @title Имя офиса */
+  officeName?: string;
+  /** @title Список валют */
+  currencies?: CurrencyInformation[];
+  /** @title Актуальность информации */
+  actuality?: string;
+}

package/mobile/src/components/ExchangeRateOffice/renderCurrencies.tsx

@@ -0,0 +1,73 @@
+import type { IconName } from '../../icons/IconName';
+import { Img } from '../../ui-kit/Img/Img';
+import { style } from '../../utils/style';
+import { Currencies } from './Currencies';
+import type { CurrencyInformation } from './ExchangeRateOfficeContent';
+
+const CURRENCY_ICONS_MAP: Record<keyof typeof Currencies, IconName> = {
+  USD: 'DollarIcon',
+  EUR: 'EuroIcon',
+  GBP: 'DollarIcon',
+  AUD: 'DollarIcon',
+  CNY: 'DollarIcon',
+  RUB: 'RoundRubleIcon',
+};
+
+export const renderCurrencyRow = ({
+  title,
+  buyPrice,
+  buyDifference,
+  sellPrice,
+  sellDifference,
+  buyOfficeName,
+  sellOfficeName,
+}: CurrencyInformation) => {
+  return (
+    <tr key={title} className="pb-1 text-h6">
+      <td className="pt-4">
+        <div className="flex items-center">
+          {title ? (
+            <Img image={{ icon: CURRENCY_ICONS_MAP[title] }} width="24" height="24" />
+          ) : null}
+          <span className="ml-2">{title}</span>
+        </div>
+      </td>
+      {renderCurrency(buyPrice, buyDifference)}
+      {renderCurrency(sellPrice, sellDifference)}
+      {renderOffice(buyPrice, buyOfficeName)}
+      {renderOffice(sellPrice, sellOfficeName)}
+    </tr>
+  );
+};
+
+const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');
+
+const renderCurrency = (price?: number, difference?: number) => {
+  return (
+    <td className="pt-4 pl-11">
+      <div>{formatCurrency(price)}</div>
+      <div
+        className={style(
+          'font-normal text-sm text-secondary-text',
+          (difference || 0) >= 0 ? 'text-green' : 'text-red',
+        )}
+      >
+        {formatCurrency(difference)}
+      </div>
+    </td>
+  );
+};
+
+const renderOffice = (price?: number, officeName = '') => {
+  return (
+    <td className="pt-4 pl-11">
+      <div>{formatCurrency(price)}</div>
+      <div className="font-normal text-sm text-green">{officeName}</div>
+    </td>
+  );
+};
+
+const currencyNumberFormat = new Intl.NumberFormat('ru', {
+  style: 'currency',
+  currency: Currencies.RUB,
+});

package/mobile/src/components/ExchangeRateOffice/renderTableHeader.tsx

@@ -0,0 +1,11 @@
+import { Text } from '../../ui-kit/Text/Text';
+
+export const renderTableHeader = (title: string) => {
+  return (
+    <th className="pl-11">
+      <Text size="text-m-light" align="text-left" color="text-secondary-text">
+        {title}
+      </Text>
+    </th>
+  );
+};

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

@@ -29,4 +29,4 @@ export type SubMenuItem = LinkProps & IconProps;
 /**
  * @title Подвал
  */
-export type FooterContent = UniBlockContent & {};
+export type FooterContent = UniBlockContent;

package/mobile/src/components/Headline/Headline.tsx

@@ -42,11 +42,7 @@ export const Headline = JSX<HeadlineProps>(
           />
         ) : null}
         {description ? (
-          <Paragraph
-            color="group-data-secondary:text-white/80"
-            size={versionStyle.descriptionSize as TextSize}
-            align={align}
-          >
+          <Paragraph size={versionStyle.descriptionSize as TextSize} align={align}>
             {description}
           </Paragraph>
         ) : null}

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,5 +1,4 @@
 import type { BulletsProps } from '../../model/Bullets';
-import type { Footnote } from '../../model/Footnote';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockContent } from '../../model/JSXBlock';
@@ -14,7 +13,6 @@ export type ProductBlockInnerContent = HeadlineProps &
   RichTextProps &
   ListContent &
   ButtonContent &
-  Footnote &
   ImageContent &
   BulletsProps & {
     /**

package/mobile/src/components/ProductBlock/renderBackwardButton.tsx

@@ -7,7 +7,7 @@ import { style } from '../../utils/style';
 export function renderBackwardButton(
   button: BackwardButtonProps,
   version: ButtonVersion,
-  className: string,
+  className?: string,
 ) {
   const { text, href, target } = button;
   const iconVersion = version === 'primary' ? 'white' : 'black';

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -23,18 +23,18 @@ export const ProductTile = JSX<ProductTileProps>(
     benefits = [],
     buttons,
     image,
-    isImageOnRightSide = true,
+    directionRight = true,
     ...rest
   }) => (
     <BlockWrapper
       className={style(
-        'overflow-hidden p-9 box-border relative min-h-[364px]',
+        'overflow-hidden p-9 box-border relative min-h-[364px] flex flex-col justify-between',
         getTileRightPadding(className),
         className,
       )}
       {...rest}
     >
-      <div className={style('flex flex-col', isImageOnRightSide ? '' : 'items-end')}>
+      <div className={style('flex flex-col', directionRight ? '' : 'items-end')}>
         <Headline
           className={style('!p-0 !bg-transparent z-10', title || description ? 'mb-3.5' : '')}
           title={title}
@@ -45,9 +45,11 @@ export const ProductTile = JSX<ProductTileProps>(
         />
         {renderBenefits(benefits, image)}
         {renderAdditionalDescription(additionalDescription, image)}
-        {renderButtonsSection(buttons, { className: 'mt-5 z-10 text-l' })}
       </div>
-      {renderImage(image, isImageOnRightSide)}
+      {renderButtonsSection(buttons, {
+        className: style('mt-5 text-l', directionRight ? '' : 'justify-end'),
+      })}
+      {renderImage(image, directionRight)}
     </BlockWrapper>
   ),
 );
@@ -62,7 +64,10 @@ function renderBenefits(benefits: Benefit[], image?: Picture) {
 
   return (
     <div
-      className={`z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline ${benefitsWidth}`}
+      className={style(
+        'z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline',
+        benefitsWidth,
+      )}
     >
       {benefits.length ? benefits.map(renderBenefit) : null}
     </div>

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -37,5 +37,5 @@ export type ProductTileContent = UniBlockContent &
      */
     benefits?: Benefit[];
     /** @title Картинка справа/текст слева */
-    isImageOnRightSide?: boolean;
+    directionRight?: boolean;
   };

package/mobile/src/components/ProductTile/renderImage.tsx

@@ -1,14 +1,15 @@
 import type { Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
+import { style } from '../../utils/style';
 
-export function renderImage(image?: Picture, isImageOnRightSide?: boolean) {
+export function renderImage(image?: Picture, directionRight?: boolean) {
   if (!image?.src) {
     return null;
   }
 
   return (
     <Img
-      className={`absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`}
+      className={style('absolute', directionRight ? 'right-0' : 'left-0', 'bottom-0')}
       image={image}
     />
   );

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

@@ -0,0 +1,10 @@
+{
+  "title": "Заголовок",
+  "__html": "<p>Описание</p>",
+  "button": {
+    "text": "Информация о регионе",
+    "version": "link",
+    "icon": { "format": "webp", "size": { "width": 16, "height": 16 } },
+    "iconRight": { "format": "webp", "size": { "width": 16, "height": 16 } }
+  }
+}

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -0,0 +1,82 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RepresentativeOfficeInfoContent } from './RepresentativeOfficeInfoContent';
+import type { Picture } from '../../model/Picture';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { IconName } from '../../icons/IconName';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { Text } from '../../ui-kit/Text/Text';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { style } from '../../utils/style';
+
+export interface RepresentativeOfficeInfoProps
+  extends RepresentativeOfficeInfoContent,
+    UniBlockProps {}
+
+export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
+  ({
+    address,
+    email,
+    telephone,
+    button,
+    className = '',
+    __html,
+    icon,
+    title,
+    version = 'primary',
+    ...rest
+  }) => (
+    <BlockWrapper
+      className={style('box-border text-left p-9', className)}
+      version={version}
+      {...rest}
+    >
+      <div className="w-full flex justify-between">
+        {title ? <Heading headingType="h4" as="h3" className="mb-6" title={title} /> : null}
+        {renderIconBlock(icon)}
+      </div>
+      <div className="w-full">
+        {__html ? renderDescriptionBlock(__html) : null}
+        {renderBlock('Адрес', address, 'GeolocationIcon')}
+        {renderBlock('Телефон', telephone, 'PhoneIcon')}
+        {renderBlock('E-mail', email, 'MailIcon')}
+        {button?.text
+          ? renderButtonsSection([button], {
+              className: 'mb-6',
+            })
+          : null}
+      </div>
+    </BlockWrapper>
+  ),
+);
+
+const renderIconBlock = (icon?: Picture) => (
+  <div className="self-end">
+    {icon?.src ? <Img image={icon} /> : null}
+    {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+  </div>
+);
+
+const renderDescriptionBlock = (__html?: string) => (
+  <div className="border-b border-main-divider pb-5 my-5">
+    <RichText __html={__html} />
+  </div>
+);
+
+const renderBlock = (blockName: string, data?: string, iconName?: IconName | undefined) => (
+  <div className="flex mb-4">
+    <Icon className="pr-4" iconVersion="black" name={iconName} width="24" height="24" asSVG />
+    <div className="flex flex-col first:pb-1">
+      <Text size="text-m-light">{blockName}</Text>
+      {data ? (
+        <Text size="text-h6" color="text-green">
+          {data}
+        </Text>
+      ) : null}
+    </div>
+  </div>
+);

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

@@ -0,0 +1,20 @@
+{
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    },
+    "button": {
+      "icon": {
+        "ui:field": "icon"
+      },
+      "iconRight": {
+        "ui:field": "icon"
+      }
+    }
+  },
+  "style": {
+    "ui:options": {
+      "maxCols": 6
+    }
+  }
+}

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfoContent.ts

@@ -0,0 +1,22 @@
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { IconProps } from '../../model/Picture';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
+import type { TitleProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
+
+/**
+ * @title Блок с информацией о представительстве
+ */
+export type RepresentativeOfficeInfoContent = UniBlockContent &
+  TitleProps &
+  RichTextProps &
+  IconProps & {
+    /** @title Адрес */
+    address?: string;
+    /** @title Телефон (факс) */
+    telephone?: string;
+    /** @title E-mail */
+    email?: string;
+    /** @title Кнопка */
+    button?: ButtonWithIconProps;
+  };

package/mobile/src/components/RichTextBlock/RichTextBlock.tsx

@@ -7,11 +7,11 @@ import type { RichTextBlockContent } from './RichTextBlockContent';
 interface RichTextBlockProps extends RichTextBlockContent, UniBlockProps {}
 
 export const RichTextBlock = JSX<RichTextBlockProps>((props) => {
-  const { __html, ...rest } = props;
+  const { __html, richVersion, ...rest } = props;
 
   return (
     <BlockWrapper {...rest}>
-      <RichText __html={__html} />
+      <RichText __html={__html} richVersion={richVersion} />
     </BlockWrapper>
   );
 });

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

@@ -28,6 +28,7 @@
         "version": "primary"
       }
     ],
-    "version": "primary"
+    "version": "primary",
+    "directionRight": true
   }
 }

package/mobile/src/components/Tile/Tile.tsx

@@ -11,6 +11,7 @@ import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { TileContent } from './TileContent';
+import { style } from '../../utils/style';
 
 export interface TileProps extends TileContent, UniBlockProps {}
 
@@ -27,14 +28,21 @@ export const Tile = JSX<TileProps>(
     className = '',
     tags,
     children,
+    directionRight = true,
     ...rest
   }) => (
     <BlockWrapper
-      className={`overflow-hidden p-9 pr-3 box-border ${getTileRightPadding(
+      className={style(
+        'flex grow justify-between items-stretch h-full p-9 pr-3 box-border',
+        getTileRightPadding(className),
+        getTileMinHeight(className),
         className,
-      )} ${getTileMinHeight(className)} ${className}`}
+      )}
       {...rest}
     >
+      {image?.src ? (
+        <Img className={style('mt-auto ml-7', directionRight ? 'order-2' : '')} image={image} />
+      ) : null}
       <BaseTile
         title={
           title ? (
@@ -50,22 +58,23 @@ export const Tile = JSX<TileProps>(
           className: 'mt-8',
           buttonClassName: 'min-w-[158px]',
         })}
-        image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
-        {__html ? (
-          <div className="max-w-[600px] mt-2.5">
-            <RichText __html={__html} />
-          </div>
-        ) : null}
-        {children}
-        <List
-          className="mt-2.5"
-          itemClassName="mb-1.5"
-          items={items}
-          isDotted={isDotted}
-          listItemSize={listItemSize}
-        />
-        {tags?.length ? <Tags tags={tags} className="mt-5" /> : null}
+        <div>
+          {__html ? (
+            <div className="max-w-[600px] mt-2.5">
+              <RichText __html={__html} />
+            </div>
+          ) : null}
+          {children}
+          <List
+            className="mt-2.5"
+            itemClassName="mb-1.5"
+            items={items}
+            isDotted={isDotted}
+            listItemSize={listItemSize}
+          />
+          {tags?.length ? <Tags tags={tags} className="mt-5" /> : null}
+        </div>
       </BaseTile>
     </BlockWrapper>
   ),

package/mobile/src/components/Tile/TileContent.ts

@@ -20,4 +20,6 @@ export type TileContent = UniBlockContent &
   ImageContent &
   BulletsProps & {
     listItemSize?: ListItemSize;
+    /** @title Картинка справа/текст слева */
+    directionRight?: boolean;
   };

package/mobile/src/ui-kit/Button/getRegularButtonClasses.ts

@@ -8,7 +8,7 @@ export const getRegularButtonClasses = ({
 }: GetButtonClassParams): string =>
   [
     buttonStyle,
-    'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-text focus:border',
+    'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-text focus:border h-fit',
     version ? buttonStyleMap[version] : '',
     rounded ? 'rounded-full' : 'rounded-md',
     className,

package/mobile/src/ui-kit/Button/renderButtonsSection.tsx

@@ -14,7 +14,7 @@ export const renderButtonsSection = (
   buttons?: (ButtonWithIconProps | undefined)[],
   { className = '', buttonClassName, isVertical }: ButtonsSectionOptions = {},
 ) =>
-  buttons?.length && buttons.some((_) => _?.text) ? (
+  buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (
     <div className={style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className)}>
       {buttons.map(renderButton(buttonClassName))}
     </div>
@@ -26,7 +26,7 @@ const renderButton =
     const { text, icon, iconRight, version, ...rest } = button || {};
     const iconVersion = version === 'secondary' ? 'color' : 'white';
 
-    return text ? (
+    return text || icon?.icon ? (
       <Button
         key={index ? String(index) : ''}
         className={buttonClassName}

package/mobile/src/ui-kit/RichText/RichText.tsx

@@ -1,8 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import type { RichTextProps } from './RichTextProps';
 
 export const RichText = JSX<RichTextProps>((props) => {
-  const { __html = '' } = props;
+  const { __html = '', richVersion = '' } = props;
 
-  return <div className="md-container" dangerouslySetInnerHTML={{ __html }} />;
+  return (
+    <div className={style(richVersion, 'md-container')} dangerouslySetInnerHTML={{ __html }} />
+  );
 });

package/mobile/src/ui-kit/RichText/RichTextProps.ts

@@ -5,7 +5,7 @@ export interface RichTextProps {
   __html?: HTML;
   /**
    * @title Стиль форматированного текста
-   * @enumNames ["по умолчанию", "в полоску"]
+   * @enumNames ["по умолчанию", "Строки разного цвета", "Горизонтальные разделители"]
    */
-  richVersion?: '' | 'striped';
+  richVersion?: '' | 'striped' | 'horizontal-separator';
 }

package/mobile/src/ui-kit/Select/Select.tsx

@@ -17,10 +17,22 @@ export type SelectProps = LabelProps & {
   options: OptionProps[];
   isBorder?: boolean;
   placeholder?: string;
+  valid?: boolean;
+  onValidate?: (value: string) => void;
 };
 
 export const Select = JSX<SelectProps>(
-  ({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '' }) => {
+  ({
+    className = '',
+    isBorder = true,
+    label,
+    options = [],
+    value,
+    onChange,
+    placeholder = '',
+    valid = true,
+    onValidate,
+  }) => {
     const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
     const [isOpen, setIsOpen] = useState(false);
     const handleClickOutside = useCallback(() => setIsOpen(false), []);
@@ -30,6 +42,7 @@ export const Select = JSX<SelectProps>(
       setSelectedItem(option);
       setIsOpen(false);
       onChange(option);
+      onValidate && onValidate(option.text);
     };
 
     const isSelected = (option: OptionProps) => Boolean(option.key === selectedItem.key);
@@ -50,7 +63,7 @@ export const Select = JSX<SelectProps>(
         <div className={`relative ${isOpen ? 'z-20' : 'z-10'}`}>
           <div
             className={`text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
-            ${getBorderStyle(isBorder)}`}
+            ${getBorderStyle(isBorder, valid)}`}
             onClick={() => setIsOpen(!isOpen)}
           >
             <p className="p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap">
@@ -108,5 +121,7 @@ const renderOption =
     );
   };
 
-const getBorderStyle = (isBorder: boolean) =>
-  isBorder ? 'border border-gray rounded-md hover:border-primary-hover' : '';
+const getBorderStyle = (isBorder: boolean, valid: boolean) => `
+  ${isBorder ? 'border rounded-md hover:border-primary-hover' : ''} ${
+  valid ? ' border-gray' : 'border-error'
+} `;