@redneckz/wildless-cms-uni-blocks 0.13.4 → 0.13.6

package/src/components/ParagraphBlock/ParagraphBlockContent.ts

@@ -1,13 +1,14 @@
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { FontWeight, TextAlign, TextSize } from '../../ui-kit/Text/TextProps';
+import type { FontWeight, TextSize } from '../../ui-kit/Text/TextProps';
+import type { AlignProps } from '../../model/HeadlineType';
 
 /**
  * @title Параграф
  */
-export type ParagraphBlockContent = UniBlockContent & {
-  size?: TextSize;
-  align?: TextAlign;
-  font?: FontWeight;
-  /** @title Текст */
-  text?: string;
-};
+export type ParagraphBlockContent = UniBlockContent &
+  AlignProps & {
+    size?: TextSize;
+    font?: FontWeight;
+    /** @title Текст */
+    text?: string;
+  };

package/src/icons/CourtHouseIcon.svg

@@ -0,0 +1 @@
+<svg title="Здание суда" isInverse="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#1C1C1C" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M2 22h20M12 2c1.6.64 3.4.64 5 0v3c-1.6.64-3.4.64-5 0V2ZM12 5v3M4 15.91V22h16V11c0-2-1-3-3-3H7c-2 0-3 1-3 3v1M4 12h15.42"/><path stroke="#1C1C1C" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M7.992 12v10M11.992 12v10M15.992 12v10"/></svg>

package/src/icons/IconName.ts

@@ -86,6 +86,7 @@ export enum IconMap {
   ClockIcon = 'ClockIcon',
   CloseIcon = 'CloseIcon',
   ComfortableCompIcon = 'ComfortableCompIcon',
+  CourtHouseIcon = 'CourtHouseIcon',
   CreditCardsIcon = 'CreditCardsIcon',
   DiscountShapeIcon = 'DiscountShapeIcon',
   DocDownloadIcon = 'DocDownloadIcon',
@@ -201,6 +202,7 @@ export enum IconTitleMap {
   ClockIcon = 'Часы',
   CloseIcon = 'Крестик',
   ComfortableCompIcon = 'Кресло',
+  CourtHouseIcon = 'Здание суда',
   CreditCardsIcon = 'Кредитные карты',
   DiscountShapeIcon = 'Скидка',
   DocDownloadIcon = 'Скачать документ',
@@ -286,7 +288,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Стрелка сплошная \'Вверх\'', 'Банкомат', 'Сумка', 'Банк', 'Белорусский флаг', 'BriefcaseIcon', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Стрелка \'Влево\'', 'Кинотеатр', 'Клиент', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'E-mail', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Телефон', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Ошибка', 'Ок', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
+ *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Стрелка сплошная \'Вверх\'', 'Банкомат', 'Сумка', 'Банк', 'Белорусский флаг', 'BriefcaseIcon', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Стрелка \'Влево\'', 'Кинотеатр', 'Клиент', 'Часы', 'Крестик', 'Кресло', 'Здание суда', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'E-mail', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Телефон', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Ошибка', 'Ок', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
  * ]
  */
 export type IconName =
@@ -325,6 +327,7 @@ export type IconName =
   | 'ClockIcon'
   | 'CloseIcon'
   | 'ComfortableCompIcon'
+  | 'CourtHouseIcon'
   | 'CreditCardsIcon'
   | 'DiscountShapeIcon'
   | 'DocDownloadIcon'

package/src/model/HeadlineType.ts

@@ -37,7 +37,7 @@ export type LabelProps = {
 };
 
 export type AlignProps = {
-  /** @title Выравнивание заголовка */
+  /** @title Выравнивание */
   align?: TextAlign;
 };
 

package/src/ui-kit/BaseTile/BaseTile.tsx

@@ -68,7 +68,7 @@ const renderImageContainer = (
   { className, imageAlign }: { className?: string; imageAlign?: Align },
 ) => {
   //TODO Спорное решение
-  const fullWidth = image?.props?.image.size?.width > 400;
+  const fullWidth = image?.props?.image?.size?.width > 400;
 
   return image ? (
     <div

package/src/ui-kit/DialogManager/DialogManager.tsx

@@ -1,49 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
-import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { useList } from '../../hooks/useList';
-import { assertUnreachable } from '../../utils/assertUnreachable';
 import { style } from '../../utils/style';
 import type { DialogOpenAction } from './DialogAction';
+import { useDialogManager } from './useDialogManager';
+import { useDialogsList } from './useDialogsList';
 
 export const DialogManager = JSX(() => {
-  const [dialogs, { push, pop, clear }] = useList<DialogOpenAction>();
-
-  const closeAll = useCallback(() => {
+  const handleCloseAll = useCallback((dialogs: DialogOpenAction[]) => {
     for (const _ of dialogs) {
-      _.onClose && _.onClose();
+      _?.onClose && _.onClose();
     }
+  }, []);
 
-    clear();
-  }, [dialogs]);
-
-  const close = useCallback(() => {
-    const _ = dialogs[dialogs.length - 1];
+  const handleClose = useCallback((_: DialogOpenAction) => {
     _?.onClose && _.onClose();
+  }, []);
 
-    pop();
-  }, [dialogs]);
+  const dialogs = useDialogsList({ onCloseAll: handleCloseAll, onClose: handleClose });
 
-  useEffect(
-    () =>
-      defaultEventBus.subscribe('dialog', (action) => {
-        switch (action.type) {
-          case 'open':
-            push(action);
-            break;
-          case 'close':
-            if (action.all) {
-              closeAll();
-            } else {
-              close();
-            }
-            break;
-          default:
-            assertUnreachable(action);
-        }
-      }),
-    [closeAll, close],
-  );
+  const { close } = useDialogManager();
 
   useEffect(() => {
     const handleEscape = ({ key }: { key: string }) => {

package/src/ui-kit/DialogManager/useDialogsList.ts

@@ -0,0 +1,50 @@
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import { useList } from '../../hooks/useList';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+import type { DialogOpenAction } from './DialogAction';
+
+interface DialogsListOptions {
+  onCloseAll?: (dialogs: DialogOpenAction[]) => void;
+  onClose?: (_: DialogOpenAction) => void;
+}
+
+export const useDialogsList = ({
+  onCloseAll,
+  onClose,
+}: DialogsListOptions = {}): DialogOpenAction[] => {
+  const [dialogs, { push, pop, clear }] = useList<DialogOpenAction>();
+
+  const closeAll = useCallback(() => {
+    onCloseAll && onCloseAll(dialogs);
+    clear();
+  }, [dialogs, onCloseAll]);
+
+  const close = useCallback(() => {
+    onClose && onClose(dialogs[dialogs.length - 1]);
+    pop();
+  }, [dialogs, onClose]);
+
+  useEffect(
+    () =>
+      defaultEventBus.subscribe('dialog', (action) => {
+        switch (action.type) {
+          case 'open':
+            push(action);
+            break;
+          case 'close':
+            if (action.all) {
+              closeAll();
+            } else {
+              close();
+            }
+            break;
+          default:
+            assertUnreachable(action);
+        }
+      }),
+    [closeAll, close],
+  );
+
+  return dialogs;
+};

package/src/ui-kit/Input/Input.tsx

@@ -21,6 +21,7 @@ export const Input = JSX<InputProps>(
     onFocus,
     onBlur,
     pattern,
+    autoFocus = false,
   }) => {
     const handleChange = useCallback(
       (e: { target?: { value?: string } }) => {
@@ -61,6 +62,7 @@ export const Input = JSX<InputProps>(
             onFocus={onFocus}
             onBlur={onBlur}
             pattern={pattern}
+            autoFocus={autoFocus}
           />
         </label>
         {children}

package/src/ui-kit/Input/InputProps.ts

@@ -14,4 +14,5 @@ export interface InputProps<V = string> extends ControlProps<V>, LabelProps {
   onBlur?: () => void;
   valid?: boolean;
   disabled?: boolean;
+  autoFocus?: boolean;
 }

package/src/ui-kit/List/List.tsx

@@ -5,12 +5,14 @@ import { ListItem } from './ListItem';
 import type { ListProps } from './ListProps';
 
 const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
+  XS: 'text-m font-light',
   S: 'text-l font-light',
   M: 'text-h6',
   L: 'text-h5',
 };
 
 const ITEM_INDENT_MAP: Record<ListItemSize, string> = {
+  XS: 'ml-2xs',
   S: 'ml-xs',
   M: 'ml-s',
   L: 'ml-m',

package/src/ui-kit/List/ListContent.ts

@@ -1,8 +1,8 @@
 /**
  * @title Размер пунктов списка
- * @enumNames ["Маленький", "Средний", "Большой"]
+ * @enumNames ["Очень маленький", "Маленький", "Средний", "Большой"]
  */
-export type ListItemSize = 'S' | 'M' | 'L';
+export type ListItemSize = 'XS' | 'S' | 'M' | 'L';
 
 export interface ListContent {
   /** @title Список */

package/src/ui-kit/List/ListItem.tsx

@@ -16,6 +16,7 @@ const DOT_SIZE_MAP = {
   L: 'w-1.5 h-1.5 mr-m', // TODO: Действительно нужен этот вариант? отличается только margin
   M: 'w-1.5 h-1.5 mr-s',
   S: 'w-1 h-1 mr-xs',
+  XS: 'w-1 h-1 mr-xs',
 };
 
 export const ListItem = JSX<ListItemProps>(

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

@@ -1,11 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '../../hooks/useBool';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { LabelProps } from '../../model/HeadlineType';
+import { jaroWinklerDistance } from '../../services/search/jaroWinklerDistance';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
+import { Input } from '../Input/Input';
 
 export interface Option {
   key: string;
@@ -20,6 +22,7 @@ export type SelectProps = LabelProps & {
   isBorder?: boolean;
   placeholder?: string;
   onChange?: (value: Option) => void;
+  isSearch?: boolean;
 };
 
 export const Select = JSX<SelectProps>(
@@ -32,13 +35,19 @@ export const Select = JSX<SelectProps>(
     isBorder = true,
     placeholder = '',
     onChange,
+    isSearch = false,
   }) => {
     const [isOpen, { setFalse: close, toggle }] = useBool();
-    const wrapperRef = useOutsideClick<HTMLDivElement>(close);
+    const [searchValue, setSearchValue] = useState('');
+    const reset = useCallback(() => {
+      close();
+      setSearchValue('');
+    }, []);
+    const wrapperRef = useOutsideClick<HTMLDivElement>(reset);
 
     const handleChange = useCallback(
       (option: Option) => {
-        close();
+        reset();
         onChange && onChange(option);
       },
       [onChange],
@@ -48,17 +57,11 @@ export const Select = JSX<SelectProps>(
 
     return (
       <div className={className} ref={wrapperRef}>
-        {label ? (
-          <div className="mb-xs">
-            <Text size="text-m" color="text-primary-text" font="font-light">
-              {label}
-            </Text>
-          </div>
-        ) : null}
+        {renderLabel(label)}
         <div className={style('relative', isOpen ? 'z-20' : 'z-10')}>
           <div
             className={style(
-              'text-l flex justify-between items-center text-primary-text cursor-pointer',
+              'text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10',
               getBorderStyle(isBorder, valid),
             )}
             onClick={toggle}
@@ -73,10 +76,13 @@ export const Select = JSX<SelectProps>(
               height="16"
             />
           </div>
+          {isSearch ? renderSearch(isOpen, searchValue, setSearchValue) : null}
           {options?.length ? (
             <div className={style('h-0', isOpen ? '' : 'overflow-hidden')}>
               <div className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
-                {options.map(renderOption(handleChange, isOpen, isSelected))}
+                {getFilteredOptions(options, searchValue).map(
+                  renderOption(handleChange, isOpen, isSelected),
+                )}
               </div>
             </div>
           ) : null}
@@ -86,6 +92,34 @@ export const Select = JSX<SelectProps>(
   },
 );
 
+const renderLabel = (label?: string) =>
+  label ? (
+    <div className="mb-xs">
+      <Text size="text-m" color="text-primary-text" font="font-light">
+        {label}
+      </Text>
+    </div>
+  ) : null;
+
+const getFilteredOptions = (options: Option[], searchValue: string) => {
+  return searchValue
+    ? options.filter(
+        (_) => jaroWinklerDistance(_.text?.toLowerCase())(searchValue.toLowerCase()) >= 0.6,
+      )
+    : options;
+};
+
+const renderSearch = (
+  isOpen: boolean,
+  searchValue: string,
+  setSearchValue: (value: string) => void,
+) =>
+  isOpen ? (
+    <div className={style('absolute top-0 w-full h-full z-20')}>
+      <Input type="text" autoFocus value={searchValue} onChange={setSearchValue} />
+    </div>
+  ) : null;
+
 const renderOption =
   (
     handleChange: (option: Option) => void,

package/bundle/components/Footer/buttonSizeStyles.mobile.d.ts

@@ -1,4 +0,0 @@
-import { ButtonSize } from './MediaButton';
-export declare const buttonSizeStyles: {
-    [key in ButtonSize]: string;
-};

package/dist/components/Footer/buttonSizeStyles.mobile.d.ts

@@ -1,4 +0,0 @@
-import { ButtonSize } from './MediaButton';
-export declare const buttonSizeStyles: {
-    [key in ButtonSize]: string;
-};

package/dist/components/Footer/buttonSizeStyles.mobile.js

@@ -1,7 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonSizeStyles = void 0;
-exports.buttonSizeStyles = {
-    default: 'w-24 h-14',
-    stretched: 'flex-1 h-14',
-};
-//# sourceMappingURL=buttonSizeStyles.mobile.js.map

package/dist/components/Footer/buttonSizeStyles.mobile.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttonSizeStyles.mobile.js","sourceRoot":"","sources":["../../../src/components/Footer/buttonSizeStyles.mobile.ts"],"names":[],"mappings":";;AAEa,QAAA,gBAAgB,GAAoC;IAC/D,OAAO,EAAE,WAAW;IACpB,SAAS,EAAE,aAAa;CACzB,CAAC"}

package/lib/components/Footer/buttonSizeStyles.mobile.d.ts

@@ -1,4 +0,0 @@
-import { ButtonSize } from './MediaButton';
-export declare const buttonSizeStyles: {
-    [key in ButtonSize]: string;
-};

package/lib/components/Footer/buttonSizeStyles.mobile.js

@@ -1,5 +0,0 @@
-export const buttonSizeStyles = {
-    default: 'w-24 h-14',
-    stretched: 'flex-1 h-14',
-};
-//# sourceMappingURL=buttonSizeStyles.mobile.js.map

package/lib/components/Footer/buttonSizeStyles.mobile.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"buttonSizeStyles.mobile.js","sourceRoot":"","sources":["../../../src/components/Footer/buttonSizeStyles.mobile.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAoC;IAC/D,OAAO,EAAE,WAAW;IACpB,SAAS,EAAE,aAAa;CACzB,CAAC"}

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

@@ -1,6 +0,0 @@
-import { ButtonSize } from './MediaButton';
-
-export const buttonSizeStyles: { [key in ButtonSize]: string } = {
-  default: 'w-24 h-14',
-  stretched: 'flex-1 h-14',
-};