@redneckz/wildless-cms-uni-blocks 0.15.341 → 0.16.1

package/mobile/src/components/TariffsTable/dataFixture.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable max-lines */
 import { type Picture } from '../../model/Picture';
 import {
   type InnerTableBlockDef,
   type LabelDescriptionCellDef,
-  type ListBlockDef,
+  type RichTextDef,
   type TariffsTableColumn,
   type TariffsTableContent,
   type TariffsTableRowHeader,
@@ -35,7 +36,7 @@ const LABEL_DESCRIPTION_BLOCK: LabelDescriptionCellDef = {
 
 const TABLE_BLOCK: InnerTableBlockDef = {
   tableCellType: 'Table',
-  dataUrl: 'tariffs-inner-table-data',
+  tableSource: { $ref: '/wcms-resources/tariffs-inner-table-data.json' },
   pdfUrl: '#',
 };
 
@@ -44,10 +45,15 @@ const DESCRIPTION_BLOCK: LabelDescriptionCellDef = {
   description: 'Описание без заголовка',
 };
 
-const LIST_BLOCK: ListBlockDef = {
-  tableCellType: 'List',
+const RICHTEXT_BLOCK: RichTextDef = {
+  tableCellType: 'RichText',
+  __html: `
+    <ul>
+      <li>Элемент списка 1</li>
+      <li>Элемент списка 2</li>
+      <li>Элемент списка 3</li>
+    </ul>`,
   isDotted: true,
-  items: ['Элемент списка 1', 'Элемент списка 2', 'Элемент списка 3'],
 };
 
 const rowHeaders: TariffsTableRowHeader[] = [
@@ -66,7 +72,7 @@ const rowHeaders: TariffsTableRowHeader[] = [
 export const columns: TariffsTableColumn[] = [
   {
     data: [
-      [LABEL_BLOCK, LIST_BLOCK, LABEL_DESCRIPTION_BLOCK, LIST_BLOCK],
+      [LABEL_BLOCK, RICHTEXT_BLOCK, LABEL_DESCRIPTION_BLOCK, RICHTEXT_BLOCK],
       [
         {
           label: 'Бесплатно',
@@ -139,9 +145,9 @@ export const columns: TariffsTableColumn[] = [
 export const columnsTable: TariffsTableColumn[] = [
   {
     data: [
-      [LABEL_BLOCK, LIST_BLOCK],
+      [LABEL_BLOCK, RICHTEXT_BLOCK],
       [TABLE_BLOCK, DESCRIPTION_BLOCK],
-      [LIST_BLOCK, DESCRIPTION_BLOCK],
+      [RICHTEXT_BLOCK, DESCRIPTION_BLOCK],
       [TABLE_BLOCK],
     ],
   },

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -10,7 +10,7 @@ import { type TextBlockContent } from './TextBlockContent';
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
 export const TextBlock = JSX<TextBlockProps>(
-  ({ className = '', title, description, iconVersion, __html, ...rest }) => (
+  ({ className = '', title, description, iconVersion, __html, richVersion, ...rest }) => (
     <BlockWrapper
       className={style(
         'flex gap-s sm:gap-m bg-white group-data-secondary:bg-primary-main/10',
@@ -30,7 +30,7 @@ export const TextBlock = JSX<TextBlockProps>(
           </Text>
         ) : null}
         {description ? renderDescription(description) : null}
-        {__html ? <RichText __html={__html} /> : null}
+        {__html ? <RichText richVersion={richVersion} __html={__html} /> : null}
       </div>
     </BlockWrapper>
   ),

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

@@ -20,48 +20,16 @@
     },
     {
       "content": {
-        "isBlur": false,
-        "visibleItemCount": 3,
-        "isCycle": false
+        "visibleItemCount": 3
       },
       "style": ["col-span-12"],
       "type": "Carousel",
       "blocks": [
         {
           "content": {
-            "image": {
-              "size": {
-                "width": 230,
-                "height": 230
-              },
-              "alt": "",
-              "title": "",
-              "iconVersion": "normal",
-              "format": "webp"
-            },
             "button": {
               "text": "Подробнее",
-              "icon": {
-                "format": "webp",
-                "size": {
-                  "width": 24,
-                  "height": 24
-                },
-                "alt": "",
-                "title": "",
-                "iconVersion": "normal"
-              },
               "version": "primary",
-              "iconRight": {
-                "format": "webp",
-                "size": {
-                  "width": 24,
-                  "height": 24
-                },
-                "alt": "",
-                "title": "",
-                "iconVersion": "normal"
-              },
               "target": "_self",
               "href": ""
             },
@@ -73,39 +41,9 @@
         },
         {
           "content": {
-            "image": {
-              "size": {
-                "width": 230,
-                "height": 230
-              },
-              "alt": "",
-              "title": "",
-              "iconVersion": "normal",
-              "format": "webp"
-            },
             "button": {
               "text": "Подробнее",
-              "icon": {
-                "format": "webp",
-                "size": {
-                  "width": 24,
-                  "height": 24
-                },
-                "alt": "",
-                "title": "",
-                "iconVersion": "normal"
-              },
               "version": "primary",
-              "iconRight": {
-                "format": "webp",
-                "size": {
-                  "width": 24,
-                  "height": 24
-                },
-                "alt": "",
-                "title": "",
-                "iconVersion": "normal"
-              },
               "target": "_self",
               "href": ""
             },
@@ -117,39 +55,9 @@
         },
         {
           "content": {
-            "image": {
-              "size": {
-                "width": 230,
-                "height": 230
-              },
-              "alt": "",
-              "title": "",
-              "iconVersion": "normal",
-              "format": "webp"
-            },
             "button": {
               "text": "Подробнее",
-              "icon": {
-                "format": "webp",
-                "size": {
-                  "width": 24,
-                  "height": 24
-                },
-                "alt": "",
-                "title": "",
-                "iconVersion": "normal"
-              },
               "version": "primary",
-              "iconRight": {
-                "format": "webp",
-                "size": {
-                  "width": 24,
-                  "height": 24
-                },
-                "alt": "",
-                "title": "",
-                "iconVersion": "normal"
-              },
               "target": "_self",
               "href": ""
             },

package/mobile/src/data/CommonData.ts

@@ -0,0 +1,13 @@
+import { type AspectsProps } from '../model/AspectsProps';
+import { type LogoType } from '../model/LogoType';
+
+export type SearchHeaderProps = AspectsProps & { placeholder: string; ariaLabel: string };
+
+export interface CommonData {
+  logo?: LogoType;
+  search?: SearchHeaderProps;
+  dropdownMenuAriaLabel?: string;
+  chatBotAriaLabel?: string;
+  backwardButton?: string;
+  title?: string;
+}

package/mobile/src/data/HeaderData.ts

@@ -0,0 +1,29 @@
+import { type AspectsDef } from '../model/AspectsProps';
+import { type LinkProps } from '../model/LinkProps';
+import { type IconProps } from '../model/Picture';
+
+/**
+ * @title Представительства за рубежом
+ * @required ["text", "href"]
+ */
+export type ForeignOfficeProps = LinkProps & IconProps;
+
+/**
+ * @title Филиалы
+ */
+export type BranchesHeader = {
+  /** @title Филиал по-умолчанию */
+  default?: string;
+  /** @title Отображать выбор филиалов */
+  visible?: boolean;
+  /** @title Дополнительные атрибуты для слика по региону*/
+  dataClick?: AspectsDef[];
+  /** @title Дополнительные атрибуты для выбора региона*/
+  dataSelect?: AspectsDef[];
+};
+
+export interface HeaderData {
+  foreignOffices?: ForeignOfficeProps[];
+  branches?: BranchesHeader;
+  officesAtms?: LinkProps;
+}

package/mobile/src/data/NavigationData.ts

@@ -0,0 +1,28 @@
+import { type AspectsDef } from '../model/AspectsProps';
+import { type LinkProps } from '../model/LinkProps';
+import { type IconProps } from '../model/Picture';
+
+export interface NavigationLinkProps extends LinkProps {
+  displayArea?: string;
+  dataHeader?: AspectsDef[];
+  dataFooter?: AspectsDef[];
+}
+
+/**
+ * @title Ссылка
+ * @required ["text", "href"]
+ */
+export interface TopMenuItemProps extends LinkProps, IconProps {
+  /** @hidden */
+  items?: NavigationLinkProps[];
+  /** @hidden */
+  displayArea?: string;
+  /** @hidden */
+  dataHeader?: AspectsDef[];
+  /** @hidden */
+  dataFooter?: AspectsDef[];
+}
+
+export interface NavigationData {
+  navigationItems?: TopMenuItemProps[];
+}

package/mobile/src/data/PortalData.ts

@@ -1,3 +1,5 @@
+import { type InternetButtonProps } from '../components/Header/HeaderProps';
+
 export interface PortalData {
-  internetBankUrl?: string;
+  internetBankButton?: InternetButtonProps;
 }

package/mobile/src/data/StickyMobileData.ts

@@ -1,15 +1,16 @@
-import { type TitleProps } from '../model/HeadlineType';
+import { type DescriptionProps, type TitleProps } from '../model/HeadlineType';
 import { type Picture } from '../model/Picture';
 
 /**
  * @title Пункт меню
  */
-export type StickyMenuItem = TitleProps & {
-  /** @title Адрес страницы меню */
-  src?: string;
-  /** @title Иконка */
-  icon?: Picture;
-};
+export type StickyMenuItem = TitleProps &
+  DescriptionProps & {
+    /** @title Адрес страницы меню */
+    src?: string;
+    /** @title Иконка */
+    icon?: Picture;
+  };
 
 export interface StickyMobileData {
   menuItems?: StickyMenuItem[];

package/mobile/src/hooks/initialMobileMode.ts

@@ -0,0 +1 @@
+export const INITIAL_MOBILE_MODE = true;

package/mobile/src/hooks/useActiveRoute.ts

@@ -1,11 +1,38 @@
-import { isTopItemActive } from '../components/Header/isTopItemActive';
+import { env } from '../Env';
+import { type Router } from '../hooks/useRouter';
+import { type LinkProps } from '../model/LinkProps';
+import { getBasePath } from '../utils/getBasePath';
+import { isURL, joinPath, withoutQuery } from '../utils/url';
 import { useRouter } from './useRouter';
 
-export function useActiveRoute<T extends { href?: string }>(
-  items: T[] | undefined = [],
-): [number, T] {
+export function useActiveRoute<T extends LinkProps>(items: T[] | undefined = []): [number, T] {
   const router = useRouter();
-  const activeIndex = items.findIndex(isTopItemActive(router.pathname));
 
-  return [activeIndex, items[activeIndex]];
+  const filteredItems = Array.from(items.entries()).filter(([, href]) =>
+    isHrefActive(router)(href),
+  );
+
+  return (
+    filteredItems.find(([, href]) => isHrefActive(router, true)(href)) ??
+    filteredItems[filteredItems.length - 1] ??
+    []
+  );
 }
+
+const isHrefActive =
+  (router: Router, strict = false) =>
+  ({ href }: { href?: string }): boolean => {
+    if (!href) {
+      return false;
+    }
+
+    const routerHref = withoutQuery(getRouterHref(router)(href));
+
+    return strict ? routerHref === withoutQuery(href) : routerHref.startsWith(withoutQuery(href));
+  };
+
+const getRouterHref = (router: Router) => (href?: string) => {
+  const basePath = getBasePath(env.SITE_URL);
+
+  return isURL(href) ? globalThis?.location?.href : joinPath(basePath, router.pathname);
+};

package/mobile/src/hooks/useForm.ts

@@ -1,7 +1,7 @@
-import { useCallback, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { type ControlProps } from '../ui-kit/ControlProps';
 import { type PreventableEvent, type PreventableEventWithTarget } from '../ui-kit/PreventableEvent';
-import { identity } from '../utils/identity';
+import { identity } from '../utils/fp/identity';
 
 export interface FieldProps<V> extends ControlProps<V> {
   isDirty?: boolean;
@@ -25,45 +25,59 @@ export interface FormOperatorProps<FormState extends Record<string, any>> {
   onSubmit?: (ev: PreventableEvent) => void;
 }
 
+// eslint-disable-next-line max-lines-per-function
 export const useForm = <FormState extends Record<string, any>>(
   initialState: FormState,
   {
     resetOnSubmit,
     onSubmit,
+    normalize,
   }: {
     resetOnSubmit?: boolean;
     onSubmit?: (_: FormState, ev: PreventableEventWithTarget) => void;
+    normalize?: (_: FormState) => FormState;
   } = {},
 ): [FormState, FormOperatorProps<FormState>] => {
-  const [formState, setFormState] = useState<FormState>(initialState);
-
+  const [formState, setFormStateUnsafe] = useState<FormState>(initialState);
+  const setFormState = useCallback(
+    normalize
+      ? (_: FormState | ((prev: FormState) => FormState)) =>
+          setFormStateUnsafe(
+            _ instanceof Function
+              ? (prev) => {
+                  const _normalize = normalize(_(prev));
+
+                  return shellowCompare(prev, _normalize) ? prev : _normalize;
+                }
+              : normalize(_),
+          )
+      : setFormStateUnsafe,
+    [normalize],
+  );
+  useEffect(() => {
+    if (normalize) {
+      setFormStateUnsafe(normalize);
+    }
+  }, [normalize]);
   const [isDirtyForm, setDirtyForm] = useState(false);
   const [dirtyFieldsMap, setDirtyFieldsMap] = useState<Partial<Record<keyof FormState, boolean>>>(
     {},
   );
 
-  const handlersMap = useRef<Partial<Record<keyof FormState, (value: any) => void>>>({});
-
   const field: FormFieldRegisterer<FormState> = useCallback(
     (fieldName, options) => {
       const { parse = identity, format = identity } = options || {};
 
-      if (!handlersMap.current) {
-        handlersMap.current = {};
-      }
-
-      handlersMap.current[fieldName] ||= (value) => {
-        setFormState((prev) => ({ ...prev, [fieldName]: parse(value) }));
-        setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
-      };
-
       return {
         value: format(formState[fieldName]) as any,
         isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
-        onChange: handlersMap.current[fieldName],
+        onChange: (value) => {
+          setFormState((prev) => ({ ...prev, [fieldName]: parse(value) }));
+          setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
+        },
       };
     },
-    [formState, isDirtyForm, dirtyFieldsMap],
+    [setFormState, isDirtyForm, dirtyFieldsMap],
   );
 
   const update = useCallback((_: FormState) => {
@@ -99,3 +113,6 @@ export const useForm = <FormState extends Record<string, any>>(
     },
   ];
 };
+
+const shellowCompare = (a: Record<string, any>, b: Record<string, any>): boolean =>
+  a && b && Object.keys({ ...a, ...b }).every((key) => a[key] === b[key]);

package/mobile/src/hooks/useJSONRef/fetchRefs.ts

@@ -1,4 +1,4 @@
-import { type JSONNode } from '@redneckz/json-ref';
+import { type JSONNode } from '@redneckz/json-op';
 import { fetchJSONUnsafe } from '../../utils/fetchJSON';
 import { unique } from '../../utils/unique';
 

package/mobile/src/hooks/useJSONRef/resolveBlockProps.ts

@@ -1,4 +1,5 @@
-import { resolveRefSync, type JSONNode } from '@redneckz/json-ref';
+import { type JSONNode } from '@redneckz/json-op';
+import { resolveRefSync } from '@redneckz/json-ref';
 
 export const resolveBlockProps = <C>(content: C, fallback?: Record<string, unknown>): C =>
   resolveRefSync(content as JSONNode, (_) => fallback?.[_] as JSONNode) as C;

package/mobile/src/hooks/useJSONRef/useJSONRef.ts

@@ -1,4 +1,5 @@
-import { collectRef, type JSONNode } from '@redneckz/json-ref';
+import { type JSONNode } from '@redneckz/json-op';
+import { collectRef } from '@redneckz/json-ref';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { fetchRefs } from './fetchRefs';
 import { resolveBlockProps } from './resolveBlockProps';

package/mobile/src/hooks/useLink.ts

@@ -1,8 +1,11 @@
+import { env } from '../Env';
 import { type LinkProps } from '../model/LinkProps';
 import { useDialogManager } from '../ui-kit/DialogManager/useDialogManager';
 import { type PreventableEvent } from '../ui-kit/PreventableEvent';
+import { adjustBase } from '../utils/adjustBase';
 import { adjustHref } from '../utils/adjustHref';
-import { isLocalURL } from '../utils/url';
+import { getBasePath } from '../utils/getBasePath';
+import { hasPrefix, isLocalURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
 import { useRouter } from './useRouter';
 
@@ -10,38 +13,39 @@ interface Clickable {
   onClick(ev?: PreventableEvent): void;
 }
 
-interface UseLinkParams {
-  isRemote?: boolean;
-  basePath?: string;
-}
-
-export function useLink(params: UseLinkParams = {}) {
-  const { isRemote, basePath } = params;
+export function useLink() {
+  const basePath = getBasePath(env.SITE_URL);
 
   const router = useRouter();
   const { closeAll } = useDialogManager();
 
-  return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => ({
-    ...props,
-    href: isRemote && !basePath ? props.href : adjustHref(router)(props.href, basePath),
-    'aria-label': props.text,
-    onClick: handlerDecorator(handleHref(props)),
-  });
+  return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => {
+    const href = adjustHref(router)(props.href);
+
+    return {
+      ...props,
+      href,
+      'aria-label': props.text,
+      onClick: handlerDecorator(handleHref({ ...props, href })),
+    };
+  };
 
   function handleHref({ href, target, onClick }: Partial<LinkProps & Clickable>) {
     return (ev?: PreventableEvent) => {
       onClick && onClick(ev);
 
+      const isRemote = !hasPrefix(href, basePath || '/');
+
       if (!href || isRemote || !isLocalURL(href, target)) {
-        // Default routing
+        //? Default routing
         return;
       }
 
       closeAll();
 
-      // Client routing
+      //? Client routing
       ev?.preventDefault();
-      router.push(href);
+      router.push(adjustBase(href, basePath));
     };
   }
 }

package/mobile/src/hooks/useLocalStorage.ts

@@ -0,0 +1,17 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+export function useLocalStorage<T>(key: string): [T | null, (value: T) => void] {
+  const [storedValue, setStoredValue] = useState<T | null>(
+    JSON.parse(globalThis.localStorage?.getItem(key) || 'null') as T | null,
+  );
+
+  const setValue = useCallback(
+    (value: T) => {
+      globalThis.localStorage?.setItem(key, JSON.stringify(value));
+      setStoredValue(value);
+    },
+    [key, globalThis.localStorage],
+  );
+
+  return [storedValue, setValue];
+}

package/mobile/src/hooks/useMobileMode.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { INITIAL_MOBILE_MODE } from './initialMobileMode';
+
+export const useMobileMode = () => {
+  const mq = `(max-width: 1024px)`;
+
+  const [isMobileMode, setIsMobileMode] = useState(INITIAL_MOBILE_MODE);
+
+  useEffect(() => {
+    const mqList = globalThis.matchMedia?.(mq);
+    const mqHandler = () => {
+      setIsMobileMode(Boolean(mqList?.matches));
+    };
+
+    mqList?.addEventListener('change', mqHandler);
+
+    if (mqList?.matches) {
+      setIsMobileMode(Boolean(mqList.matches));
+    }
+
+    return () => {
+      mqList?.removeEventListener('change', mqHandler);
+    };
+  }, []);
+
+  return isMobileMode;
+};

package/mobile/src/hooks/useRegions.ts

@@ -8,10 +8,11 @@ export interface Region {
   code?: string;
   name?: string;
   slug?: string;
+  localities?: string[];
 }
 
-export function useRegions(): Region[] {
-  const { data } = useAsyncData(REGIONS_URL, fetchJSONUnsafe as FetchJSONUnsafeType<Region[]>);
+export function useRegions(url: string = REGIONS_URL): Region[] {
+  const { data } = useAsyncData(url, fetchJSONUnsafe as FetchJSONUnsafeType<Region[]>);
 
   return Array.isArray(data) ? data : [];
 }

package/mobile/src/icons/AlarmIcon.svg

@@ -0,0 +1,3 @@
+<svg title="Предупреждение" viewBox="0 0 96 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M95.0082 68.229L53.7619 3.11976C51.1336 -1.03992 44.8654 -1.03992 42.2371 3.11976L0.990576 68.229C-1.73915 72.486 1.49549 78 6.75258 78H89.3466C94.503 78 97.7382 72.486 95.0082 68.229ZM47.9995 68.4222C44.9665 68.4222 42.4391 66.0036 42.4391 63.1008C42.4391 60.1986 44.9665 57.7797 47.9995 57.7797C51.0325 57.7797 53.5598 60.1986 53.5598 63.1008C53.5598 66.0036 51.0325 68.4222 47.9995 68.4222ZM51.9422 49.46C51.8413 51.2983 50.0212 52.6526 47.9995 52.6526C45.8761 52.6526 44.1577 51.2982 44.0568 49.46L42.0351 25.564C41.8327 22.5652 44.5625 19.9529 47.9995 19.9529C51.4365 19.9529 54.1663 22.5652 53.9639 25.564L51.9422 49.46Z" fill="#FFCB05"/>
+</svg>

package/mobile/src/icons/BriefcaseIcon.svg

@@ -1,6 +1,6 @@
 <svg title="Портфель" isInverse="true" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.3698 14L21.7098 10.43C21.9698 7.99 21.2698 6 16.9998 6H6.99983C2.72983 6 2.02983 7.99 2.29983 10.43L3.04983 18.43C3.25983 20.39 3.97983 22 7.99983 22H15.9998C20.0198 22 20.7398 20.39 20.9498 18.43" stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 6V5.2C8 3.43 8 2 11.2 2H12.8C16 2 16 3.43 16 5.2V6" stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.3698 14L21.7098 10.43C21.9698 7.99 21.2698 6 16.9998 6H6.99983C2.72983 6 2.02983 7.99 2.29983 10.43L3.04983 18.43C3.25983 20.39 3.97983 22 7.99983 22H15.9998C20.0198 22 20.7398 20.39 20.9498 18.43" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 6V5.2C8 3.43 8 2 11.2 2H12.8C16 2 16 3.43 16 5.2V6" stroke="currentColor"  stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M14 13V14C14 14.01 14 14.01 14 14.02C14 15.11 13.99 16 12 16C10.02 16 10 15.12 10 14.03V13C10 12 10 12 11 12H13C14 12 14 12 14 13Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M21.65 11C19.34 12.68 16.7 13.68 14 14.02" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M2.62012 11.27C4.87012 12.81 7.41012 13.74 10.0001 14.03" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>