@redneckz/wildless-cms-uni-blocks 0.12.7 → 0.12.9

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

@@ -5,43 +5,7 @@ import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import { buttonStylesWithText } from './buttonStylesWithText';
-
-const ICONS_MAP: Array<{
-  origins: string[];
-  iconMapped: Picture;
-  label: string;
-}> = [
-  {
-    origins: ['t.me', 'telegram.org'],
-    iconMapped: { icon: 'TelegramIcon' },
-    label: 'Телеграм',
-  },
-  {
-    origins: ['vk.com'],
-    iconMapped: { icon: 'VKIcon' },
-    label: 'ВКонтакте',
-  },
-  {
-    origins: ['ok.ru'],
-    iconMapped: { icon: 'OkIcon' },
-    label: 'Одноклассники',
-  },
-  {
-    origins: ['apps.apple.com'],
-    iconMapped: { icon: 'AppleIcon' },
-    label: 'App Store',
-  },
-  {
-    origins: ['play.google.com'],
-    iconMapped: { icon: 'PlayMarketIcon' },
-    label: 'Google Play',
-  },
-  {
-    origins: ['youtube.com'],
-    iconMapped: { icon: 'YoutubeIcon' },
-    label: 'Youtube',
-  },
-];
+import { findIconByHref } from './findIconByHref';
 
 export type ButtonSize = 'default' | 'small';
 
@@ -53,8 +17,7 @@ export const MediaButton = JSX<MediaButtonProps>(
   ({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
     const { href, version, text = '' } = rest;
 
-    const { iconMapped, label } =
-      ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+    const { iconMapped, label } = findIconByHref(href);
 
     const iconCustom = getFilteredIcon(icon) ?? iconMapped;
 

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

@@ -0,0 +1,4 @@
+import { IconsMapItem, ICONS_MAP } from './iconsMap';
+
+export const findIconByHref = (href?: string): IconsMapItem =>
+  ICONS_MAP.find(({ origins }) => origins?.some((_) => href?.includes(_))) || {};

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

@@ -0,0 +1,40 @@
+import { LabelProps } from '../../model/HeadlineType';
+import { Picture } from '../../model/Picture';
+
+export type IconsMapItem = LabelProps & {
+  origins?: string[];
+  iconMapped?: Picture;
+};
+
+export const ICONS_MAP: Array<IconsMapItem> = [
+  {
+    origins: ['t.me', 'telegram.org'],
+    iconMapped: { icon: 'TelegramIcon' },
+    label: 'Телеграм',
+  },
+  {
+    origins: ['vk.com'],
+    iconMapped: { icon: 'VKIcon' },
+    label: 'ВКонтакте',
+  },
+  {
+    origins: ['ok.ru'],
+    iconMapped: { icon: 'OkIcon' },
+    label: 'Одноклассники',
+  },
+  {
+    origins: ['apps.apple.com'],
+    iconMapped: { icon: 'AppleIcon' },
+    label: 'App Store',
+  },
+  {
+    origins: ['play.google.com'],
+    iconMapped: { icon: 'PlayMarketIcon' },
+    label: 'Google Play',
+  },
+  {
+    origins: ['youtube.com'],
+    iconMapped: { icon: 'YoutubeIcon' },
+    label: 'Youtube',
+  },
+];

package/mobile/src/components/Header/Header.tsx

@@ -18,12 +18,7 @@ const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
 };
 
 export const Header = JSX<HeaderMobileProps>(
-  ({
-    bgColor = 'bg-white',
-    version = BG_COLOR_TO_BLOCK_VERSION[bgColor],
-    mobileHeaderType = 'none',
-    ...rest
-  }) => {
+  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
     const fallback: Fallback | undefined = rest.options?.page?.fallback;
     const { logo, internetBankUrl } = useSWRResource<SitemapData>(
       projectSettings.SITEMAP || 'sitemap',
@@ -38,7 +33,6 @@ export const Header = JSX<HeaderMobileProps>(
             logo={logo}
             internetBankUrl={internetBankUrl}
             version={version}
-            mobileHeaderType={mobileHeaderType}
             {...rest}
           />
         </div>

package/mobile/src/components/Header/HeaderContent.ts

@@ -25,24 +25,10 @@ export type Logo = ImageContent & {
   title?: string;
 };
 
-/**
- * @title Мобильный тип шапки
- * @enumNames ["Не выбрано", "Название", "Кнопка возврата"]
- */
-export type MobileHeaderType = 'none' | 'withTitle' | 'backwardButton';
-
-export interface MobileHeaderProps {
-  mobileHeaderType?: MobileHeaderType;
-  /** @title Название (мобильная версия) */
-  mobileTitle?: string;
-  /** @title Кнопка возврата (мобильная версия) */
-  mobileBackwardButtonTitle?: string;
-}
-
 /**
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  */
-export interface HeaderContent extends MobileHeaderProps {
+export interface HeaderContent {
   /** @hidden */
   showSubMenu?: boolean;
   /** @hidden */

package/mobile/src/components/Header/HeaderTop.tsx

@@ -5,15 +5,15 @@ import { Logo } from '../../ui-kit/Logo/Logo';
 import { Button } from '../../ui-kit/Button/Button';
 import { style } from '../../utils/style';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { MobileHeaderProps, MobileHeaderType } from './HeaderContent';
 import { Img } from '../../ui-kit/Img/Img';
+import { useRouter } from '../../hooks/useRouter';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 
-export interface HeaderTopProps extends MobileHeaderProps {
+export interface HeaderTopProps {
   bgColor?: BgColorVersion;
   logo?: LogoType;
   internetBankUrl?: string;
   version?: BlockVersion;
-  mobileHeaderType?: MobileHeaderType;
 }
 
 const BUTTON_STYLE = {
@@ -21,51 +21,42 @@ const BUTTON_STYLE = {
   transparent: 'text-white hover:text-primary-hover',
 };
 
-export const HeaderTop = JSX<HeaderTopProps>(
-  ({
-    bgColor,
-    logo,
-    internetBankUrl,
-    version,
-    mobileHeaderType,
-    mobileTitle,
-    mobileBackwardButtonTitle,
-  }) => {
-    const isTypeNone = mobileHeaderType === 'none';
-    const isTypeWithTitle = mobileHeaderType === 'withTitle';
+export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl, version }) => {
+  const router = useRouter();
+  const isRootLocation = router.pathname === '/';
+  const onClick = useCallback(() => {
+    router.back();
+  }, []);
 
-    return (
-      <div className="flex items-center justify-between w-full">
-        {isTypeNone || isTypeWithTitle ? (
-          <Logo bgColor={bgColor} logo={logo} showTitle={isTypeNone} />
-        ) : null}
-        {isTypeWithTitle ? mobileTitle : null}
-        {mobileHeaderType === 'backwardButton' ? (
-          <Button className="flex items-center text-l">
-            <Img
-              className="w-6 h-6"
-              image={{
-                icon: 'ChevronLeft',
-                iconVersion: 'black',
-              }}
-            />
-            {mobileBackwardButtonTitle}
-          </Button>
-        ) : null}
-        {internetBankUrl ? (
-          <Button
-            href={internetBankUrl}
-            ariaLabel="Войти"
-            target="_blank"
-            className={style(
-              'p-3 my-1 text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
-              BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
-            )}
-          >
-            Войти
-          </Button>
-        ) : null}
-      </div>
-    );
-  },
-);
+  return (
+    <div className="flex items-center justify-between w-full">
+      {isRootLocation ? (
+        <Logo bgColor={bgColor} logo={logo} />
+      ) : (
+        <Button className="flex items-center text-l" ariaLabel="Вернуться назад" onClick={onClick}>
+          <Img
+            className="w-6 h-6"
+            image={{
+              icon: 'ChevronLeft',
+              iconVersion: 'black',
+            }}
+          />
+          Вернуться назад
+        </Button>
+      )}
+      {internetBankUrl ? (
+        <Button
+          href={internetBankUrl}
+          ariaLabel="Войти"
+          target="_blank"
+          className={style(
+            'p-3 my-1 text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
+            BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
+          )}
+        >
+          Войти
+        </Button>
+      ) : null}
+    </div>
+  );
+});

package/mobile/src/components/LinkDocs/LinkDocItem.tsx

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { VNode } from '../../model/VNode';
+import { Text } from '../../ui-kit/Text/Text';
+import type { LinkDoc } from './LinkDocsContent';
+
+export interface LinkDocItemProps extends LinkDoc {
+  icon?: VNode;
+}
+
+export const LinkDocItem = JSX<LinkDocItemProps>(({ icon, text, fileSize, ...linkProps }) => (
+  <a
+    className="flex box-border gap-3 group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+    role="link"
+    {...linkProps}
+  >
+    {icon}
+    {text ? (
+      <Text size="text-l" font="font-light">
+        {text}
+        <Text color="text-secondary-text">
+          {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
+        </Text>
+      </Text>
+    ) : null}
+  </a>
+));
+
+const formatSuffix = (ext?: string, fileSize?: string) => {
+  const prefix = ext || fileSize ? ',' : '';
+  const extension = ext ? ` ${ext}` : '';
+  const size = fileSize ? ` (${fileSize})` : '';
+
+  return prefix + extension + size;
+};
+
+const getExtFromHref = (href: string) => {
+  if (!href) {
+    return '';
+  }
+
+  const index = href.lastIndexOf('.');
+
+  return index !== -1 ? href.substring(index + 1) : '';
+};

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

@@ -14,21 +14,25 @@
     },
     "documents": [
       {
+        "docType": "Link",
         "text": "Документ №1",
         "href": "/documents/document1.doc",
         "fileSize": "123КБ"
       },
       {
+        "docType": "Link",
         "text": "Документ №2",
         "href": "/documents/document2.rtf",
         "target": "_blank"
       },
       {
+        "docType": "Link",
         "text": "Документ №3",
         "href": "/abc3/map.jpeg",
         "fileSize": "2МБ"
       },
       {
+        "docType": "Link",
         "text": "Документ №4",
         "href": "/abc/map.rar"
       }

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -1,10 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Router, useRouter } from '../../hooks/useRouter';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
+import { adjustHref } from '../../utils/adjustHref';
+import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import type { LinkDocsContent } from './LinkDocsContent';
-import { LinkDocsListItem } from './LinkDocsListItem';
+import { LinkDocItem } from './LinkDocItem';
+import type { DocBlockDef, LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
+import { linkIconStyle } from './linkIconStyle';
+
+const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
+  double: 'sm:flex-wrap sm:flex-row',
+  single: 'sm:flex-col',
+};
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
@@ -13,40 +23,59 @@ export const LinkDocs = JSX<LinkDocsProps>(
     className = '',
     title,
     description,
-    icon = { icon: 'DocDownloadIcon', iconVersion: 'black' },
+    align = 'text-center',
     documents,
-    align,
+    icon = { icon: 'DocIcon' },
+    columnsMode = 'double',
     ...rest
-  }) => (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
-      <Headline
-        isPadding={false}
-        title={title}
-        description={description}
-        align={align}
-        headlineVersion="M"
-      />
-      {documents?.length ? (
-        <div className="mt-5 flex flex-col gap-6" role="list">
-          {documents.map((doc, i) => (
-            <div key={String(i)} role="listitem">
-              <LinkDocsListItem
-                doc={doc}
-                icon={
-                  icon ? (
-                    <Img
-                      className="min-w-11 min-h-11 h-fit p-2.5 bg-main-divider rounded-md"
-                      image={icon}
-                      width="24"
-                      height="24"
-                    />
-                  ) : null
-                }
-              />
-            </div>
-          ))}
-        </div>
-      ) : null}
-    </BlockWrapper>
-  ),
+  }) => {
+    const router = useRouter();
+
+    return (
+      <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+        <Headline
+          className="!p-0"
+          title={title}
+          description={description}
+          align={align}
+          headlineVersion="M"
+          as="h2"
+        />
+        {documents?.length ? (
+          <div
+            className={style(
+              'mt-5 sm:mt-8 flex flex-col gap-6',
+              linkColumnsModeStyleMap[columnsMode],
+            )}
+            role="list"
+          >
+            {documents.map(renderLinkDocItem(router, columnsMode, icon))}
+          </div>
+        ) : null}
+      </BlockWrapper>
+    );
+  },
 );
+
+const renderLinkDocItem =
+  (router: Router, columnsMode: LinkColumnsMode, icon: Picture) =>
+  (docBlockDef: DocBlockDef, i: number) => {
+    const href =
+      docBlockDef?.docType === 'Attachment'
+        ? adjustHref(router)(docBlockDef?.attachment?.src)
+        : docBlockDef?.href;
+
+    return (
+      <div
+        key={String(i)}
+        className={columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}
+        role="listitem"
+      >
+        <LinkDocItem
+          {...docBlockDef}
+          href={href}
+          icon={icon ? <Img className={linkIconStyle} image={icon} width="24" height="24" /> : null}
+        />
+      </div>
+    );
+  };

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

@@ -2,7 +2,14 @@
   "content": {
     "documents": {
       "items": {
-        "ui:field": "document"
+        "docType": {
+          "ui:widget": "hidden"
+        },
+        "attachment": {
+          "src": {
+            "ui:widget": "FileWidget"
+          }
+        }
       }
     }
   }

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,6 +1,8 @@
+import { Attachment } from '../../model/Attachment';
+import { EmptyOption } from '../../model/EmptyOptionType';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { LinkProps } from '../../model/LinkProps';
+import type { LinkProps, Target } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
 import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
@@ -13,14 +15,40 @@ import type { TextAlign } from '../../ui-kit/Text/TextProps';
  */
 export type LinkColumnsMode = 'single' | 'double';
 
-/**
- * @title Элемент списка
- */
-export interface LinkDocsItem extends LinkProps {
+export interface LinkDoc extends LinkProps {
   /** @title размер файла */
   fileSize?: string;
 }
 
+export interface AttachmentDoc {
+  /** @title Текст */
+  text?: string;
+  /** @title */
+  attachment?: Attachment;
+  /** @title размер файла */
+  fileSize?: string;
+  /** @default "" */
+  target?: Target;
+}
+
+/**
+ * @title Ссылка на документ
+ * @default {"docType": "Link"}
+ */
+export type LinkDocDef = LinkDoc & {
+  docType: 'Link';
+};
+
+/**
+ * @title Файл
+ * @default {"docType": "Attachment"}
+ */
+export type AttachmentDocDef = AttachmentDoc & {
+  docType: 'Attachment';
+};
+
+export type DocBlockDef = EmptyOption | LinkDocDef | AttachmentDocDef;
+
 /**
  * @title Список документов
  */
@@ -28,7 +56,7 @@ export type LinkDocsContent = UniBlockContent &
   HeadlineCommonProps &
   IconProps & {
     /** @title Список */
-    documents?: LinkDocsItem[];
+    documents?: DocBlockDef[];
     columnsMode?: LinkColumnsMode;
     /** @title Выравнивание */
     align?: TextAlign;

package/mobile/src/components/LinkDocs/linkDocsContentExample.ts

@@ -4,20 +4,32 @@ export const linkDocsContentExample: LinkDocsContent = {
   title: 'Дополнительные документы',
   description: 'Ответы на часто задаваемые вопросы',
   documents: [
-    { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
-    { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
-    { text: 'GlassIcon', href: '/abc3/map.jpeg' },
-    { text: 'no icon', href: '/abc4' },
-    { text: 'документ 5', href: '/abc5' },
-    { text: 'документ 6', href: '/abc6/abc.pdf' },
-    { text: 'Text text text', href: '/abc7/yolo.png' },
     {
+      docType: 'Attachment',
+      text: 'target self',
+      attachment: { src: '/abc1/cooldoc.doc' },
+      target: '_self',
+    },
+    { docType: 'Link', text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
+    { docType: 'Link', text: 'GlassIcon', href: '/abc3/map.jpeg' },
+    { docType: 'Link', text: 'no icon', href: '/abc4' },
+    { docType: 'Link', text: 'документ 5', href: '/abc5' },
+    { docType: 'Link', text: 'документ 6', href: '/abc6/abc.pdf' },
+    { docType: 'Link', text: 'Text text text', href: '/abc7/yolo.png' },
+    {
+      docType: 'Link',
       text: 'Some more generic text to stretch item, and even more, more text, and more generic text, and even more, more text, and even more',
       href: '/abc8/archive.zip',
       fileSize: '2.3МБ',
     },
-    { text: 'И ещё немного текста', href: '/abc9/rarniw.rar', fileSize: '666МБ' },
     {
+      docType: 'Link',
+      text: 'И ещё немного текста',
+      href: '/abc9/rarniw.rar',
+      fileSize: '666МБ',
+    },
+    {
+      docType: 'Link',
       text: 'Форматируем, сортируем, смотрим как отображается...',
       href: '/abc10/',
       fileSize: '65ГБ',

package/mobile/src/components/LinkDocs/linkIconStyle.ts

@@ -0,0 +1 @@
+export const linkIconStyle = 'min-w-11 min-h-11 h-fit p-2.5 bg-main-divider rounded-md';

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -14,7 +14,6 @@ import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
 import { getIconName } from './getIconName';
-import { labelSize } from './labelSize';
 import { renderRoundedIcon } from './renderRoundedIcon';
 import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
@@ -130,10 +129,10 @@ const renderPrimaryFoldButton = ({
       )}
       onClick={onToggle}
     >
-      <div className="flex items-center group-hover/button:text-primary-main">
+      <div className="flex items-center group-hover/button:text-primary-main gap-3">
         {renderRoundedIcon(labelIcon, labelIconBgVersion)}
         {label ? (
-          <Text size={labelSize} font="font-normal">
+          <Text size="text-h6" font="font-normal">
             {label}
           </Text>
         ) : null}

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

@@ -14,16 +14,19 @@ export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 export const TextBlock = JSX<TextBlockProps>(
   ({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (
     <BlockWrapper
-      className={style('flex gap-3 bg-white group-data-secondary:bg-primary-main/10', className)}
+      className={style(
+        'flex gap-3 sm:gap-4 bg-white group-data-secondary:bg-primary-main/10',
+        className,
+      )}
       {...rest}
     >
       {iconVersion === 'small' ? <div className="mt-1">{renderIcon()}</div> : null}
       {iconVersion === 'big' ? renderImage(image) : null}
-      <div className="flex flex-col w-fit gap-3">
+      <div className="flex flex-col w-fit gap-1 sm:gap-2">
         {title ? (
           <Text
             size="text-l"
-            font="font-medium"
+            font="font-normal"
             color="text-primary-text group-data-secondary:text-white"
           >
             {title}
@@ -46,10 +49,14 @@ const renderIcon = () => (
 );
 
 const renderImage = (image?: Picture) =>
-  image?.src ? <Img className="h-fit" image={image} /> : null;
+  image?.src ? <Img className="h-fit flex-shrink-0" image={image} /> : null;
 
 const renderDescription = (description: string) => (
-  <Paragraph size="text-s" color="text-secondary-text group-data-secondary:text-white">
+  <Paragraph
+    size="text-s"
+    font="font-light"
+    color="text-secondary-text group-data-secondary:text-white"
+  >
     {description}
   </Paragraph>
 );