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

package/src/components/Carousel/Carousel.fixture.tsx

@@ -81,9 +81,10 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={3}
+        visibleItemCount={0}
         isBlur={true}
         isCyclic={false}
+        isAlignCenter={true}
         block={{
           type: 'Carousel',
           blocks: new Array(6)

package/src/components/Carousel/Carousel.tsx

@@ -5,11 +5,11 @@ import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
-import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -28,6 +28,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     arrowsPadded = true,
     isPadding = true,
     showDots = false,
+    isAlignCenter = false,
     ...rest
   }) => {
     const { blocks: childBlocks = [] } = rest.block || {};
@@ -53,7 +54,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
         )}
         {...rest}
       >
-        <div className="relative max-w-full">
+        <div className={style(getAlignStyle(isAlignCenter), 'relative max-w-full')}>
           <SwipeListContainer
             containerRef={containerRef}
             visibleItemCount={visibleItemCount}
@@ -105,6 +106,9 @@ Carousel.childrenTypes = [
 
 const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-12' : '');
 
+const getAlignStyle = (isAlignCenter: boolean): string =>
+  isAlignCenter ? 'flex justify-center' : '';
+
 const renderDots = (
   containerRef: { current: HTMLDivElement | null },
   dotsActiveIndex: number,

package/src/components/Carousel/CarouselContent.ts

@@ -17,4 +17,6 @@ export type CarouselContent = UniBlockContent & {
   isCyclic?: boolean;
   /** @title Внутренний отступ  */
   isPadding?: boolean;
+  /** @title Выравнивать по центру  */
+  isAlignCenter?: boolean;
 };

package/src/components/CarouselRichTextCard/CarouselRichTextCard.tsx

@@ -8,14 +8,9 @@ import type { CarouselRichTextCardContent } from './CarouselRichTextCardContent'
 export interface CarouselRichTextCardProps extends CarouselRichTextCardContent, UniBlockProps {}
 
 export const CarouselRichTextCard = JSX<CarouselRichTextCardProps>(
-  ({ className = '', __html, richVersion = 'striped', ...rest }) => {
-    return (
-      <BlockWrapper
-        className={style('p-9 border border-gray min-w-96', richVersion, className)}
-        {...rest}
-      >
-        <RichText __html={__html} />
-      </BlockWrapper>
-    );
-  },
+  ({ className = '', __html, richVersion = 'striped', ...rest }) => (
+    <BlockWrapper className={style('p-9 border border-gray min-w-96', className)} {...rest}>
+      <RichText __html={__html} richVersion={richVersion} />
+    </BlockWrapper>
+  ),
 );

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -54,9 +54,11 @@ export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {
   isHighlighting: true,
 };
 
-const CAROUSEL_TARIFFS_CARD = <CarouselTariffsCard {...TARIFFS_CARD} />;
+const CAROUSEL_TARIFFS_CARD = <CarouselTariffsCard className="col-span-4" {...TARIFFS_CARD} />;
 
-const CAROUSEL_TARIFFS_CARD_HIT = <CarouselTariffsCard {...TARIFFS_CARD_HIT} />;
+const CAROUSEL_TARIFFS_CARD_HIT = (
+  <CarouselTariffsCard className="col-span-4" {...TARIFFS_CARD_HIT} />
+);
 
 export default {
   default: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD}</div>,

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -29,7 +29,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     return (
       <BlockWrapper
         className={style(
-          'relative border border-gray min-w-[322px] p-8 flex flex-col',
+          'relative border border-gray p-8 flex flex-col',
           getHitStyle(isHighlighting),
           className,
         )}
@@ -63,7 +63,7 @@ const renderIconBlock = (icon?: Picture) => (
 );
 
 const getHitStyle = (isHighlighting?: boolean): string =>
-  isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-7';
+  isHighlighting ? 'mt-8 pt-20' : 'mt-20 pt-8';
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button

package/src/components/ExchangeRateOffice/Currencies.ts

@@ -0,0 +1,8 @@
+export enum Currencies {
+  EUR = 'EUR',
+  USD = 'USD',
+  GBP = 'GBP',
+  AUD = 'AUD',
+  CNY = 'CNY',
+  RUB = 'RUB',
+}

package/src/components/ExchangeRateOffice/ExchangeRateOffice.example.json

@@ -0,0 +1,32 @@
+{
+  "content": {
+    "officeName": "Московский региональный филиал ЦРМБ",
+    "currencies": [
+      {
+        "id": 1,
+        "title": "USD",
+        "buyPrice": 104.0741,
+        "sellPrice": 103.1618,
+        "buyDifference": -3.74,
+        "sellDifference": -0.31,
+        "buyOfficeName": "Моковский региональный филиал ЦРМБ",
+        "buyBonusOfficeName": "Дополнительный офис г. Москва (ул. Арбат)",
+        "sellOfficeName": "Дополнительный офис г. Москва (ул. Новоясеньская)",
+        "sellBonusOfficeName": "Дополнительный офис г. Москва (Волгоградский проспект)"
+      },
+      {
+        "id": 2,
+        "title": "EUR",
+        "buyPrice": 114.7833,
+        "sellPrice": 113.2613,
+        "buyDifference": 1.65,
+        "sellDifference": -0.41,
+        "buyOfficeName": "Моковский региональный филиал ЦРМБ",
+        "buyBonusOfficeName": "Дополнительный офис г. Москва (ул. Арбат)",
+        "sellOfficeName": "Дополнительный офис г. Москва (ул. Новоясеньская)",
+        "sellBonusOfficeName": "Дополнительный офис г. Москва (Волгоградский проспект)"
+      }
+    ],
+    "actuality": "Актуально на 12:36, 12 июля 2022"
+  }
+}

package/src/components/ExchangeRateOffice/ExchangeRateOffice.fixture.tsx

@@ -0,0 +1,78 @@
+import '../../setup-fixture';
+import { ExchangeRateOffice } from './ExchangeRateOffice';
+import type { ExchangeRateOfficeContent } from './ExchangeRateOfficeContent';
+
+const EXCHANGE_RATE: ExchangeRateOfficeContent = {
+  officeName: 'Московский региональный филиал ЦРМБ',
+  currencies: [
+    {
+      id: 1,
+      title: 'USD',
+      buyPrice: 104.0741,
+      sellPrice: 103.1618,
+      buyDifference: -3.74,
+      sellDifference: -0.31,
+      buyOfficeName: 'Моковский региональный филиал ЦРМБ',
+      buyBonusOfficeName: 'Дополнительный офис г. Москва (ул. Арбат)',
+      sellOfficeName: 'Дополнительный офис г. Москва (ул. Новоясеньская)',
+      sellBonusOfficeName: 'Дополнительный офис г. Москва (Волгоградский проспект)',
+    },
+    {
+      id: 2,
+      title: 'EUR',
+      buyPrice: 114.7833,
+      sellPrice: 113.2613,
+      buyDifference: 1.65,
+      sellDifference: -0.41,
+      buyOfficeName: 'Моковский региональный филиал ЦРМБ',
+      buyBonusOfficeName: 'Дополнительный офис г. Москва (ул. Арбат)',
+      sellOfficeName: 'Дополнительный офис г. Москва (ул. Новоясеньская)',
+      sellBonusOfficeName: 'Дополнительный офис г. Москва (Волгоградский проспект)',
+    },
+    {
+      id: 3,
+      title: 'GBP',
+      buyPrice: 114.7833,
+      sellPrice: 113.2613,
+      buyDifference: -1.65,
+      sellDifference: -0.41,
+      buyOfficeName: 'Моковский региональный филиал ЦРМБ',
+      buyBonusOfficeName: 'Дополнительный офис г. Москва (ул. Арбат)',
+      sellOfficeName: 'Дополнительный офис г. Москва (ул. Новоясеньская)',
+      sellBonusOfficeName: 'Дополнительный офис г. Москва (Волгоградский проспект)',
+    },
+    {
+      id: 4,
+      title: 'AUD',
+      buyPrice: 114.7833,
+      sellPrice: 113.2613,
+      buyDifference: -1.65,
+      sellDifference: -0.41,
+      buyOfficeName: 'Моковский региональный филиал ЦРМБ',
+      buyBonusOfficeName: 'Дополнительный офис г. Москва (ул. Арбат)',
+      sellOfficeName: 'Дополнительный офис г. Москва (ул. Новоясеньская)',
+      sellBonusOfficeName: 'Дополнительный офис г. Москва (Волгоградский проспект)',
+    },
+    {
+      id: 5,
+      title: 'CNY',
+      buyPrice: 114.7833,
+      sellPrice: 113.2613,
+      buyDifference: 1.65,
+      sellDifference: -0.41,
+      buyOfficeName: 'Моковский региональный филиал ЦРМБ',
+      buyBonusOfficeName: 'Дополнительный офис г. Москва (ул. Арбат)',
+      sellOfficeName: 'Дополнительный офис г. Москва (ул. Новоясеньская)',
+      sellBonusOfficeName: 'Дополнительный офис г. Москва (Волгоградский проспект)',
+    },
+  ],
+  actuality: 'Актуально на 12:36, 12 июля 2022',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ExchangeRateOffice className="col-span-12" {...EXCHANGE_RATE} />
+    </div>
+  ),
+};

package/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/src/components/ExchangeRateOffice/ExchangeRateOffice.ui.json

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

package/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/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/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/src/components/RichTextBlock/RichTextBlock.fixture.tsx

@@ -1,5 +1,6 @@
 import '../../setup-fixture';
 import { RichTextBlock } from './RichTextBlock';
+import type { RichTextBlockContent } from './RichTextBlockContent';
 
 const HTML = `
   <p class="h1">Заголовок 1</p>
@@ -20,10 +21,31 @@ const HTML = `
   </ol>
 `;
 
+export const RICH_TEXT_SEPARATOR: RichTextBlockContent = {
+  __html:
+    '<table>' +
+    '<thead><tr><th><p>Полное наименование организации</p></th><th><p>Адрес (место нахождения)</p></th><th><p>Доля участия</p></th></tr></thead>' +
+    '<tbody>' +
+    '<tr><td><p><a href="rshb.ru">Акционерное общество «Национальное бюро кредитных историй»</p></a></td>' +
+    '<td><p>Россия, г. Москва, Скатертный пер., д. 20, стр.1</p></td><td><p>0,5%</p></td></tr>' +
+    '<tr><td><p><a href="rshb.ru">Акционерное общество\n' +
+    '«Негосударственный пенсионный фонд\n' +
+    '«Первый национальный пенсионный фонд»</p></td><td><p>Россия, г. Москва, ул. Большая Дмитровка,\n' +
+    'д. 23, стр.1</a></p></td><td><p>2,2%</p></td></tr>' +
+    '</tbody>' +
+    '</table>',
+  richVersion: 'horizontal-separator',
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <RichTextBlock className="col-span-12" __html={HTML} />
     </div>
   ),
+  'horizontal-separator': (
+    <div className="container grid grid-cols-12">
+      <RichTextBlock className="col-span-12" {...RICH_TEXT_SEPARATOR} />
+    </div>
+  ),
 };

package/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/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -24,10 +24,7 @@ interface TableCellDataProps extends TableInnerButtonProps {
   displayTable: (props: TariffsTableInnerContent) => void;
 }
 
-const renderButtonsCellData = ({ buttons }: ButtonContent) =>
-  renderButtonsSection(buttons, {
-    buttonClassName: 'w-12 h-12',
-  });
+const renderButtonsCellData = ({ buttons }: ButtonContent) => renderButtonsSection(buttons);
 
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
   const labelClassName = `text-h6 m-0 ${description ? 'mb-1' : ''}`;

package/src/components/VerticalLayout/VerticalLayout.fixture.tsx

@@ -3,6 +3,7 @@ import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { RICH_TEXT_SEPARATOR } from '../RichTextBlock/RichTextBlock.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import { VerticalLayout } from './VerticalLayout';
 
@@ -136,6 +137,19 @@ export default {
               },
               blocks: [{ type: 'LinkDocs', content: linkDocsExample }],
             },
+            {
+              type: 'RollupItem',
+              content: {
+                label: 'Rollup button 3 RichText',
+                isExpanded: true,
+              },
+              blocks: [
+                {
+                  type: 'RichTextBlock',
+                  content: RICH_TEXT_SEPARATOR,
+                },
+              ],
+            },
           ],
         }}
         options={options}

package/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/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/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/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/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'
+} `;

package/bundle/components/ApplicationForm/normalizeSelectedRegion.d.ts

@@ -1,2 +0,0 @@
-import { Region } from '../../hooks/useRegions';
-export declare const normalizeSelectedRegion: (selectedRegion: string, regions?: Region[]) => string;

package/bundle/components/ApplicationForm/renderDataOrganization.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import type { CreditFormState } from './ApplicationFormCredit';
-import type { HandleFormStateChange } from './models';
-interface RenderDataOrganizationProps {
-    fullName: string;
-    inn: string;
-    name: string;
-    phone: string;
-    mail: string;
-    annualRevenue: string;
-    handleChange: HandleFormStateChange<CreditFormState>;
-}
-export declare const renderDataOrganization: ({ fullName, inn, name, phone, mail, annualRevenue, handleChange, }: RenderDataOrganizationProps) => JSX.Element;
-export {};

package/bundle/components/ApplicationForm/useFormHandlers.d.ts

@@ -1,9 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import type { HandleFormStateChange } from './models';
-interface UseFormHandlersProps<T> {
-    setFormState: Dispatch<SetStateAction<T>>;
-}
-export declare const useFormHandlers: <T>({ setFormState }: UseFormHandlersProps<T>) => {
-    handleChange: HandleFormStateChange<T>;
-};
-export {};