@redneckz/wildless-cms-uni-blocks 0.10.10 → 0.11.0

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,98 +1,75 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import { style } from '../../utils/style';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
-import type { ProductGalleryContent } from './ProductGalleryContent';
+import type { ProductGalleryContent, ProductSlide } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-interface NavButtonProps {
-  slide?: HeadlineCommonProps;
-  i: number;
-  isActive: boolean;
-  onClick: () => void;
-}
-
 export const ProductGallery = JSX<ProductGalleryProps>(
   ({ className = '', slides = [], ...rest }) => {
-    const galleryNav = slides.map((s) => s.nav);
-    const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-    const handleActiveSlideIndex = useCallback((_: number) => setActiveSlideIndex(_), []);
 
     return (
-      <BlockWrapper
-        className={`box-border pt-12 overflow-hidden relative w-100 mb-6 ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={style('box-border py-default overflow-hidden', className)} {...rest}>
         <div
-          className="flex duration-1000 pb-14"
-          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          className="flex duration-1000"
+          style={{ transform: `translateX(-${activeSlideIndex * 100}%)` }}
           role="list"
         >
-          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i))}
+          {slides.map(({ productBlock }, i) => (
+            <div key={String(i)} className="box-border grow-0 shrink-0 basis-full" role="listitem">
+              <ProductBlockInner
+                className="pl-default h-full"
+                headlineVersion="XXL"
+                {...productBlock}
+                {...rest}
+              />
+            </div>
+          ))}
         </div>
-
-        <div className="flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28">
-          {galleryNav.map((slide, i) =>
-            renderNavButton({
-              slide,
-              i,
-              isActive: Boolean(i === activeSlideIndex),
-              onClick: () => handleActiveSlideIndex(i),
-            }),
-          )}
+        <div className="h-28 px-6 mt-6 -mb-6 flex items-center gap-2 box-border">
+          {slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex }))}
         </div>
       </BlockWrapper>
     );
   },
 );
 
-function renderProductBlock(block: ProductBlockInnerContent, i: number) {
-  return (
-    <section
-      key={String(i)}
-      className="box-border relative flex grow-0 shrink-0 basis-full"
-      role="listitem"
-    >
-      <div className="flex grow">
-        <ProductBlockInner
-          className="pl-12 z-10 group-data-secondary:text-white"
-          textBlockClassName="mb-[154px]"
-          headlineVersion="XXL"
-          {...block}
-        />
-      </div>
-    </section>
-  );
+interface NavButtonProps {
+  activeSlideIndex: number;
+  onClick: (i: number) => void;
 }
 
-function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
-  const btnClassName = isActive
-    ? 'bg-white shadow-dark-blue min-w-[350px] border-none p-6'
-    : 'min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur';
-  const btnTitleClassName = isActive
-    ? 'text-primary-text !text-h6 p-2'
-    : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
-  const btnDescClassName = isActive
-    ? 'text-secondary-text text-l-light'
-    : 'text-m-light text-secondary-text group-data-secondary:text-white/80';
+const renderNavButton =
+  ({ activeSlideIndex, onClick }: NavButtonProps) =>
+  ({ nav }: ProductSlide, i: number) => {
+    const isActive = i === activeSlideIndex;
+    const btnClassName = isActive
+      ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
+      : 'min-w-[290px] ease-in duration-300 bg-white/10 px-6 py-5 hover:py-6 backdrop-blur';
+    const btnTitleClassName = isActive
+      ? 'text-primary-text text-h6 py-2'
+      : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
+    const btnDescClassName = isActive
+      ? 'text-secondary-text text-l-light'
+      : 'text-m-light text-secondary-text group-data-secondary:text-white/80';
 
-  return (
-    <button
-      type="button"
-      key={String(i)}
-      onClick={onClick}
-      aria-label={slide?.title}
-      className={`relative box-border overflow-hidden cursor-pointer text-left mx-1 grow basis-0 border border-gray group-data-secondary:border-white/50 ${btnClassName}`}
-    >
-      <div className="border-0 px-6">
-        <div className={`last:pb-0 ${btnTitleClassName}`}>{slide?.title}</div>
-        <div className={`text-secondary-text ${btnDescClassName}`}>{slide?.description}</div>
-      </div>
-    </button>
-  );
-}
+    return (
+      <button
+        type="button"
+        key={String(i)}
+        onClick={() => onClick(i)}
+        aria-label={nav?.title}
+        className={style(
+          'relative px-6 box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50',
+          btnClassName,
+        )}
+      >
+        <div className={btnTitleClassName}>{nav?.title}</div>
+        <div className={btnDescClassName}>{nav?.description}</div>
+      </button>
+    );
+  };

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

@@ -3,8 +3,9 @@ import '../../setup-fixture';
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { BlockDef } from '../../model/ContentPageDef';
 import { Blocks } from '../Blocks.mobile';
+import type { Picture } from '../../model/Picture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture.mobile';
-import { RollupItem } from './RollupItem.mobile';
+import { RollupItem } from './RollupItem';
 
 const options = {
   blocksRegistry: Blocks,
@@ -14,7 +15,6 @@ export const ROLLUP_ITEM: BlockDef = {
   type: 'RollupItem',
   content: {
     label: 'RollupItem label 1',
-    labelIcon: { icon: 'CardIcon' },
     isExpanded: true,
   },
   blocks: [
@@ -22,13 +22,33 @@ export const ROLLUP_ITEM: BlockDef = {
     { type: 'TextBlock', content: TEXT_BLOCK },
   ],
 };
+const labelIcon: Picture = { icon: 'BriefcaseIcon' };
 
 export default {
   default: (
     <div>
       <div className="list-none m-0 p-0">
+        <RollupItem
+          {...ROLLUP_ITEM.content}
+          version="secondary"
+          block={ROLLUP_ITEM}
+          options={options}
+        />
         <RollupItem {...ROLLUP_ITEM.content} block={ROLLUP_ITEM} options={options} />
       </div>
     </div>
   ),
+  labelIcon: (
+    <div>
+      <div className="list-none m-0 p-0">
+        <RollupItem
+          label="RollupItem label 1"
+          labelIcon={labelIcon}
+          isExpanded={true}
+          block={ROLLUP_ITEM}
+          options={options}
+        />
+      </div>
+    </div>
+  ),
 };

package/src/components/RollupItem/RollupItem.tsx

@@ -2,15 +2,23 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName, IconProps } from '../../ui-kit/Icon/IconProps';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
 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 { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
+import { rollupItemStyles } from './rollupItemStyles';
 
 export interface RollupItemProps extends RollupItemContent, UniBlockProps {}
 
@@ -18,31 +26,37 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
   ({
     className = '',
     label = 'Развернуть',
+    labelIcon,
     isExpanded,
     isFoldButtonOnTop = true,
     version = 'primary',
     ...rest
-  }) => (
-    <BlockWrapper
-      className={`w-full border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`}
-      tag="div"
-      version="transparent"
-      {...rest}
-    >
-      <Foldable
-        isFoldButtonOnTop={isFoldButtonOnTop}
-        unfoldedByDefault={isExpanded}
-        renderFoldableSection={({ isUnfolded }) => (
-          <FoldableSection className={`grid grid-cols-12 gap-5 [&>*]:p-0`} isUnfolded={isUnfolded}>
-            {renderChildren(rest)}
-          </FoldableSection>
-        )}
-        renderFoldButton={({ isUnfolded, onToggle }) =>
-          renderFoldButton({ version, label, isUnfolded, onToggle })
-        }
-      />
-    </BlockWrapper>
-  ),
+  }) => {
+    return (
+      <BlockWrapper
+        className={style('w-full', rollupItemStyles, className)}
+        tag="div"
+        version="transparent"
+        {...rest}
+      >
+        <Foldable
+          isFoldButtonOnTop={isFoldButtonOnTop}
+          unfoldedByDefault={isExpanded}
+          renderFoldableSection={({ isUnfolded }) => (
+            <FoldableSection
+              className={style('gap-5 [&>*]:p-0', foldableSectionStyles)}
+              isUnfolded={isUnfolded}
+            >
+              {renderChildren(rest)}
+            </FoldableSection>
+          )}
+          renderFoldButton={({ isUnfolded, onToggle }) =>
+            renderFoldButton({ version, label, labelIcon, isUnfolded, onToggle })
+          }
+        />
+      </BlockWrapper>
+    );
+  },
 );
 
 RollupItem.childrenTypes = {
@@ -52,12 +66,14 @@ RollupItem.childrenTypes = {
 interface FoldButtonProps extends FoldablePartProps {
   version?: BlockVersion;
   label?: string;
+  labelIcon?: IconProps;
   isPadding?: boolean;
 }
 
 const renderFoldButton = ({
   version,
   label: defaultLabel,
+  labelIcon,
   isUnfolded,
   onToggle,
 }: FoldButtonProps) => {
@@ -66,7 +82,8 @@ const renderFoldButton = ({
   return version === 'primary' ? (
     renderPrimaryFoldButton({
       label,
-      icon: isUnfolded ? 'MinusIcon' : 'PlusIcon',
+      labelIcon,
+      icon: getIconName(isUnfolded),
       onToggle,
     })
   ) : (
@@ -82,16 +99,38 @@ interface PrimaryFoldButtonProps {
   label?: string;
   icon?: IconName;
   onToggle?: () => void;
+  labelIcon?: Picture;
 }
 
-const renderPrimaryFoldButton = ({ label, icon, onToggle }: PrimaryFoldButtonProps) => (
-  <button
-    className={`border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer`}
-    onClick={onToggle}
-  >
-    <Text size="text-xl" font="font-medium">
-      {label}
-    </Text>
-    {icon ? <Icon name={icon} width="24" height="24" /> : null}
-  </button>
-);
+const renderPrimaryFoldButton = ({ label, icon, onToggle, labelIcon }: PrimaryFoldButtonProps) => {
+  const iconWidth = String(labelIcon?.size?.width || 24);
+  const iconHeight = String(labelIcon?.size?.height || 24);
+  const iconName = labelIcon?.icon;
+
+  return (
+    <button
+      className={style(
+        'border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button',
+        iconName ? 'py-2' : 'py-5',
+      )}
+      onClick={onToggle}
+    >
+      <div className="flex items-center group-hover/button:text-primary-main">
+        {iconName ? (
+          <RoundedIcon
+            name={iconName}
+            width={iconWidth}
+            height={iconHeight}
+            iconVersion={labelIcon?.iconVersion}
+          />
+        ) : null}
+        {label ? (
+          <Text size={labelSize} font="font-normal">
+            {label}
+          </Text>
+        ) : null}
+      </div>
+      {icon ? <Icon name={icon} iconVersion={rollupIconVersion} width="24" height="24" /> : null}
+    </button>
+  );
+};

package/src/components/RollupItem/RollupItemContent.ts

@@ -1,5 +1,6 @@
 import type { LabelProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
+import type { IconProps } from '../../ui-kit/Icon/IconProps';
 
 /**
  * @title Сворачивающаяся секция
@@ -10,4 +11,5 @@ export type RollupItemContent = UniBlockContent &
     isExpanded?: boolean;
     /** @title Кнопка сверху */
     isFoldButtonOnTop?: boolean;
+    labelIcon?: IconProps; // TODO: только для мобильной версии
   };

package/src/components/RollupItem/foldableSectionStyles.mobile.ts

@@ -0,0 +1 @@
+export const foldableSectionStyles = 'flex flex-wrap group-last:last:pb-0';

package/src/components/RollupItem/foldableSectionStyles.ts

@@ -0,0 +1 @@
+export const foldableSectionStyles = 'grid grid-cols-12 [&>*]:pb-4';

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

@@ -0,0 +1,2 @@
+export const getIconName = (isUnfolded?: boolean) =>
+  isUnfolded ? 'ArrowUpSolidIcon' : 'ArrowDownSolidIcon';

package/src/components/RollupItem/getIconName.tsx

@@ -0,0 +1 @@
+export const getIconName = (isUnfolded?: boolean) => (isUnfolded ? 'MinusIcon' : 'PlusIcon');

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

@@ -0,0 +1 @@
+export const labelSize = 'text-l';

package/src/components/RollupItem/labelSize.tsx

@@ -0,0 +1 @@
+export const labelSize = 'text-h6';

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

@@ -0,0 +1 @@
+export const rollupIconVersion = 'normal';

package/src/components/RollupItem/rollupIconVersion.tsx

@@ -0,0 +1 @@
+export const rollupIconVersion = 'color';

package/src/components/RollupItem/rollupItemStyles.mobile.ts

@@ -0,0 +1 @@
+export const rollupItemStyles = '';

package/src/components/RollupItem/rollupItemStyles.ts

@@ -0,0 +1,2 @@
+export const rollupItemStyles =
+  'border-0 border-b border-solid border-main-divider last:border-b-0';

package/src/components/Tile/Tile.tsx

@@ -7,11 +7,11 @@ import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Tags } from '../../ui-kit/Tags/Tags';
+import { style } from '../../utils/style';
 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 {}
 
@@ -66,13 +66,7 @@ export const Tile = JSX<TileProps>(
             </div>
           ) : null}
           {children}
-          <List
-            className="mt-2.5"
-            itemClassName="mb-1.5"
-            items={items}
-            isDotted={isDotted}
-            listItemSize={listItemSize}
-          />
+          <List className="mt-2.5" items={items} isDotted={isDotted} listItemSize={listItemSize} />
           {tags?.length ? <Tags tags={tags} className="mt-5" /> : null}
         </div>
       </BaseTile>

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

@@ -4,13 +4,24 @@ import { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import type { Picture } from '../../model/Picture';
 import { Blocks } from '../Blocks';
 import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { RICH_TEXT_SEPARATOR } from '../RichTextBlock/RichTextBlock.fixture';
 import type { TextBlockContent } from '../TextBlock/TextBlockContent';
-import { VerticalLayout } from '../VerticalLayout/VerticalLayout';
+import { VerticalLayout } from './VerticalLayout';
+import type { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
 
 const options = {
   blocksRegistry: Blocks,
 } as BlockRendererOptions;
 
+const linkDocsExample: LinkDocsContent = {
+  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' },
+  ],
+};
+
 const image: Picture = {
   src: 'bank-card.png',
   format: 'webp',
@@ -88,4 +99,61 @@ export default {
       />
     </div>
   ),
+  rollup: (
+    <div className="container grid grid-cols-12">
+      <VerticalLayout
+        align="left"
+        className="col-span-12"
+        version="primary"
+        isPadding={true}
+        block={{
+          type: 'VerticalLayout',
+          blocks: [
+            {
+              type: 'RollupItem',
+              content: {
+                label: 'Rollup button 1',
+              },
+              blocks: [
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+              ],
+            },
+            {
+              type: 'RollupItem',
+              content: {
+                label: 'Rollup button 2',
+                isExpanded: true,
+              },
+              blocks: [{ type: 'LinkDocs', content: linkDocsExample }],
+            },
+            {
+              type: 'RollupItem',
+              content: {
+                label: 'Rollup button 2',
+                isExpanded: true,
+              },
+              blocks: [{ type: 'LinkDocs', content: linkDocsExample }],
+            },
+
+            {
+              type: 'RollupItem',
+              content: {
+                label: 'Rollup button 3 RichText',
+                labelIcon: { icon: 'BriefcaseIcon' },
+                isExpanded: true,
+              },
+              blocks: [
+                {
+                  type: 'RichTextBlock',
+                  content: RICH_TEXT_SEPARATOR,
+                },
+              ],
+            },
+          ],
+        }}
+        options={options}
+      />
+    </div>
+  ),
 };

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

@@ -8,7 +8,7 @@ import { RICH_TEXT_SEPARATOR } from '../RichTextBlock/RichTextBlock.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import { VerticalLayout } from './VerticalLayout';
 
-export const linkDocsExample: LinkDocsContent = {
+const linkDocsExample: LinkDocsContent = {
   description: 'Ответы на часто задаваемые вопросы',
   documents: [
     { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },

package/src/content-page-repository/transformContentPage.ts

@@ -1,9 +1,12 @@
 import fs from 'fs';
+import path from 'path';
 import util from 'util';
 import type { ContentPageDef } from '../model/ContentPageDef';
+import { LinkProps } from '../model/LinkProps';
 import type { Picture } from '../model/Picture';
 import { mapJSON } from './mapJSON';
 import type { TransformationOptions } from './TransformationOptions';
+import { transformDocumentLink } from './transformDocumentLink';
 import { transformHTML } from './transformHTML';
 import { transformMarkdown } from './transformMarkdown';
 import { transformPicture } from './transformPicture';
@@ -13,6 +16,8 @@ const writeFile = util.promisify(fs.writeFile);
 
 const OUTPUT_SUFFIX = '.static';
 
+const DOCUMENT_EXT_LIST = ['.txt', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf'];
+
 export async function transformContentPage(
   pagePath: string,
   options: TransformationOptions,
@@ -21,14 +26,13 @@ export async function transformContentPage(
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   const result = await mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
-    const isMarkdown = isString(value) && key?.endsWith('__md');
-    const isHTML = isString(value) && key?.endsWith('__html');
-
     try {
-      if (isMarkdown) {
-        return await transformMarkdown(value);
-      } else if (isHTML) {
-        return await transformHTML(value);
+      if (isMarkdown(key, value)) {
+        return await transformMarkdown(value as string);
+      } else if (isHTML(key, value)) {
+        return await transformHTML(value as string);
+      } else if (isDocumentLink(value)) {
+        return await transformDocumentLink(value, pagePath, options);
       } else if (isPicture(value)) {
         return await transformPicture(value, pagePath, options);
       }
@@ -47,6 +51,14 @@ export async function transformContentPage(
 
 export const generatedPagePath = (pagePath: string) => `${pagePath}${OUTPUT_SUFFIX}`;
 
+const isMarkdown = (key: string, value: any): value is string =>
+  isString(value) && key?.endsWith('__md');
+const isHTML = (key: string, value: any): value is string =>
+  isString(value) && key?.endsWith('__html');
+const isDocumentLink = (_: any): _ is LinkProps =>
+  Boolean(_ && isLocalPath(_?.href) && isDocumentExt(path.extname(_?.href as string)));
+const isDocumentExt = (input: string) =>
+  DOCUMENT_EXT_LIST.some((ext) => input.toLowerCase().endsWith(ext));
 const isPicture = (_: any): _ is Picture => Boolean(_ && isLocalPath(_?.src));
 const isLocalPath = (_: any): boolean => isString(_) && _.length < 1024 && !isURL(_);
 const isURL = (src: string) => ['data:', 'https:', 'http:'].some((proto) => src.startsWith(proto));

package/src/content-page-repository/transformDocumentLink.ts

@@ -0,0 +1,37 @@
+import fs from 'fs';
+import path from 'path';
+import util from 'util';
+import type { LinkProps } from '../model/LinkProps';
+import type { TransformationOptions } from './TransformationOptions';
+
+const copyFile = util.promisify(fs.copyFile);
+
+export async function transformDocumentLink(
+  link: LinkProps,
+  pagePath: string,
+  options: TransformationOptions,
+): Promise<LinkProps> {
+  if (!link?.href) {
+    return link;
+  }
+
+  const { contentDir, publicDir } = options;
+  const input = path.join(path.dirname(pagePath), link.href);
+  const docRelativePath = path.relative(contentDir, input);
+  const output = path.join(publicDir, docRelativePath);
+
+  try {
+    await copyFile(input, output);
+  } catch (e) {
+    console.error(e);
+
+    return link;
+  }
+
+  const href = path.join('/', docRelativePath);
+
+  return {
+    ...link,
+    href,
+  };
+}

package/src/icons/ArrowDownSolidIcon.svg

@@ -0,0 +1 @@
+<svg title="Стрелка сплошная 'Вниз'" isInverse="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 25"><path fill="#C8CCD0" d="M6.293 9.457a1 1 0 0 1 1.414 0L12 13.75l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 0-1.414Z"/></svg>

package/src/icons/ArrowUpSolidIcon.svg

@@ -0,0 +1 @@
+<svg title="Стрелка сплошная 'Вверх'" isInverse="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 25"><path fill="#C8CCD0" d="M17.707 14.871a1 1 0 0 1-1.414 0L12 10.578l-4.293 4.293a1 1 0 0 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414Z"/></svg>

package/src/icons/BagIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" title="Сумка" viewBox="0 0 24 25" fill="none"><path stroke="#1C1C1C" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="m21.37 14.164.34-3.57c.26-2.44-.44-4.43-4.71-4.43H7c-4.27 0-4.97 1.99-4.7 4.43l.75 8c.21 1.96.93 3.57 4.95 3.57h8c4.02 0 4.74-1.61 4.95-3.57M8 6.164v-.8c0-1.77 0-3.2 3.2-3.2h1.6c3.2 0 3.2 1.43 3.2 3.2v.8"/><path stroke="#1C1C1C" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M14 13.164v1.02c0 1.09-.01 1.98-2 1.98-1.98 0-2-.88-2-1.97v-1.03c0-1 0-1 1-1h2c1 0 1 0 1 1Z"/><path stroke="#1C1C1C" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M21.65 11.164a16.484 16.484 0 0 1-7.65 3.02M2.62 11.438c2.25 1.54 4.79 2.47 7.38 2.76"/></svg>

package/src/icons/BriefcaseIcon.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.3708 14L21.7108 10.43C21.9708 7.99 21.2708 6 17.0008 6H7.0008C2.7308 6 2.0308 7.99 2.3008 10.43L3.0508 18.43C3.2608 20.39 3.9808 22 8.0008 22H16.0008C20.0208 22 20.7408 20.39 20.9508 18.43" stroke="#1C1C1C" 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="#1C1C1C" 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="#1C1C1C" 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="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.61719 11.2695C4.86719 12.8095 7.40719 13.7395 9.99719 14.0295" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>