@redneckz/wildless-cms-uni-blocks 0.6.36 → 0.6.38

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
@@ -19,8 +19,15 @@ export interface TariffsTableRowProps extends UniBlockProps {
 export const TariffsTableRow = JSX<TariffsTableRowProps>(
   ({ row: { header, data }, activeIndex, rowIdx, ...rest }) => {
     const [tableInner, setTableInner] = useState<TariffsTableInnerContent | undefined>(undefined);
+    const handleSetTableInner = useCallback(
+      (_: TariffsTableInnerContent | undefined) => setTableInner(_),
+      [],
+    );
     const [openTableInnerIdx, setOpenTableInnerIdx] = useState<number | undefined>(undefined);
-
+    const handleOpenTableInnerIdx = useCallback(
+      (_: number | undefined) => setOpenTableInnerIdx(_),
+      [],
+    );
     const onHideContentClick = () => setTableInner(undefined);
 
     return (
@@ -33,7 +40,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
           <div className="flex items-center text-primary-text" role="cell">
             {header?.icon ? (
               <Img
-                className="mr-[14px] max-w-6 max-h-6"
+                className="mr-3.5 max-w-6 max-h-6"
                 image={getIconWithVersion(header.icon)}
                 width="24px"
                 height="24px"
@@ -55,10 +62,10 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
                 cells={cells}
                 rowIdx={rowIdx}
                 cellIdx={i}
-                setTableInner={setTableInner}
+                setTableInner={handleSetTableInner}
                 tableInner={tableInner}
                 openTableInnerIdx={openTableInnerIdx}
-                setOpenTableInnerIdx={setOpenTableInnerIdx}
+                setOpenTableInnerIdx={handleOpenTableInnerIdx}
                 {...rest}
               />
             ))}

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

@@ -29,7 +29,7 @@ export default {
   'private clients': (
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
-        <div className="flex flex-col gap-[6px]" data-theme="pc">
+        <div className="flex flex-col gap-1.5" data-theme="pc">
           <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
           <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="big" image={image} />
           <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
@@ -65,7 +65,7 @@ export default {
   'business clients': (
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
-        <div className="flex flex-col gap-[6px]" data-theme="bc">
+        <div className="flex flex-col gap-1.5" data-theme="bc">
           <TextBlock
             className="flex flex-col"
             {...TEXT_BLOCK}
@@ -81,7 +81,7 @@ export default {
   'ecosystem own': (
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
-        <div className="flex flex-col gap-[6px]" data-theme="eo">
+        <div className="flex flex-col gap-1.5" data-theme="eo">
           <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="primary" />
           <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary" />
           <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary-light" />

package/src/components/Video/VideoContent.ts

@@ -1,6 +1,7 @@
 import type { TitleProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 
+/** @title Блок Видео */
 export interface VideoContent extends TitleProps {
   /** @title URL */
   src?: string;

package/src/hooks/useLink.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from '../model/LinkProps';
+import { useBlockRouter } from '../services/BlockRouter/useBlockRouter';
 import { adjustHref } from '../utils/adjustHref';
 import { isHash, isURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
@@ -12,6 +13,7 @@ export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
   props: L,
 ) => L & ClickHandler {
   const router = useRouter();
+  const blockRouter = useBlockRouter();
 
   return (props) => {
     const href = adjustHref(props.href, router);
@@ -22,10 +24,19 @@ export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
       'aria-label': props.text,
       onClick: handlerDecorator((ev?: { preventDefault: () => void }) => {
         props.onClick && props.onClick(ev);
+
         const isLocalHref = href && !isURL(href);
         const isLocalTarget = !props.target || props.target === '_self';
-        if (isLocalHref && isLocalTarget && !isHash(href)) {
-          ev?.preventDefault();
+
+        if (!isLocalHref || !isLocalTarget) {
+          // Default handle
+          return;
+        }
+
+        ev?.preventDefault();
+        if (isHash(href)) {
+          blockRouter.goto(href);
+        } else {
           router.push(href);
         }
       }, props),

package/src/services/BlockRouter/BlockIntersection.ts

@@ -0,0 +1,3 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+
+export type BlockIntersection = [BlockDef, IntersectionObserverEntry];

package/src/services/BlockRouter/BlockRouter.ts

@@ -0,0 +1,51 @@
+import { EventBus } from '../../EventBus/EventBus';
+import type { BlockDef } from '../../model/ContentPageDef';
+
+export interface GotoAnchorEvent {
+  anchor: string;
+}
+
+export interface BlockIntersectionEvent {
+  block: BlockDef;
+  intersection: IntersectionObserverEntry;
+}
+
+interface EventMap {
+  goto: GotoAnchorEvent;
+  intersection: BlockIntersectionEvent;
+}
+
+const normalizeAnchor = (rawAnchor?: string) => rawAnchor?.replace('#', '');
+
+export class BlockRouter {
+  public static readonly inst = new BlockRouter();
+
+  readonly eventBus = new EventBus<EventMap>();
+
+  constructor() {
+    const anchor = normalizeAnchor(globalThis.location?.hash);
+    if (anchor) {
+      this.eventBus.subject('goto', { anchor });
+    }
+  }
+
+  goto(rawAnchor: string) {
+    const anchor = normalizeAnchor(rawAnchor);
+    if (anchor) {
+      this.push(anchor);
+      this.eventBus.fire('goto', { anchor });
+    }
+  }
+
+  push(rawAnchor: string) {
+    globalThis.history?.pushState(null, '', `#${normalizeAnchor(rawAnchor)}`);
+  }
+
+  replace(rawAnchor: string) {
+    globalThis.history?.replaceState(null, '', `#${normalizeAnchor(rawAnchor)}`);
+  }
+
+  reset() {
+    globalThis.history?.replaceState(null, '', '#');
+  }
+}

package/src/services/BlockRouter/findActiveBlock.ts

@@ -0,0 +1,20 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+import { minBy } from '../../utils/minBy';
+import type { BlockIntersection } from './BlockIntersection';
+
+const SPECIAL_BLOCK_TYPES = ['Header', 'Footer'];
+const EPS = 0.01;
+
+const topLineDelta = ([, { target }]: BlockIntersection) =>
+  Math.abs(target.getBoundingClientRect().top);
+
+export function findActiveBlock(intersections: BlockIntersection[]): BlockDef | undefined {
+  const visibleIntersections = intersections
+    .filter(([block]) => !SPECIAL_BLOCK_TYPES.includes(block.type || ''))
+    .filter(([, { intersectionRatio }]) => intersectionRatio > EPS);
+
+  const [activeBlock] =
+    visibleIntersections.length > 0 ? minBy(topLineDelta)(visibleIntersections) : [];
+
+  return activeBlock;
+}

package/src/services/BlockRouter/useBlockIntersectionObserver.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+import type { BlockDef } from '../../model/ContentPageDef';
+import { BlockRouter } from './BlockRouter';
+
+export function useBlockIntersectionObserver(
+  block?: BlockDef,
+  router: BlockRouter = BlockRouter.inst,
+) {
+  const observerCallback = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      if (!block || !entries?.length) {
+        return;
+      }
+
+      const intersection = entries[entries.length - 1];
+      router.eventBus.fire('intersection', { block, intersection });
+    },
+    [block, router],
+  );
+
+  const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
+
+  useEffect(() => {
+    if (!ref.current) {
+      return undefined;
+    }
+
+    return router.eventBus.subscribe('goto', ({ anchor }) => {
+      if (ref.current && block?.anchor === anchor) {
+        ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    });
+  }, [block, router]);
+
+  return ref;
+}

package/src/services/BlockRouter/useBlockRouter.ts

@@ -0,0 +1,5 @@
+import { BlockRouter } from './BlockRouter';
+
+export function useBlockRouter(): BlockRouter {
+  return BlockRouter.inst;
+}

package/src/services/BlockRouter/useBlockRouterProvider.ts

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import type { BlockDef } from '../../model/ContentPageDef';
+import { debounce } from '../../utils/debounce';
+import { BlockRouter } from './BlockRouter';
+import { findActiveBlock } from './findActiveBlock';
+
+const isScrolledEnough = () => globalThis.scrollY > (globalThis.innerHeight * 3) / 4;
+
+export function useBlockRouterProvider(
+  router: BlockRouter = BlockRouter.inst,
+  scrollTarget: EventTarget = globalThis,
+) {
+  const intersectionsMapRef = useRef<Map<BlockDef, IntersectionObserverEntry>>(new Map());
+
+  useEffect(
+    () =>
+      router.eventBus.subscribe('intersection', ({ block, intersection }) => {
+        if (intersectionsMapRef.current) {
+          intersectionsMapRef.current.set(block, intersection);
+        }
+      }),
+    [router],
+  );
+
+  useEffect(() => {
+    const handleScroll = debounce(() => {
+      if (!isScrolledEnough()) {
+        router.reset();
+
+        return;
+      }
+
+      const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
+
+      if (activeBlock?.anchor) {
+        router.replace(activeBlock.anchor);
+      } else if (!activeBlock) {
+        router.reset();
+      }
+    }, 100);
+
+    scrollTarget.addEventListener('scroll', handleScroll);
+
+    return () => {
+      handleScroll.dispose();
+      scrollTarget.removeEventListener('scroll', handleScroll);
+    };
+  }, [router, scrollTarget]);
+}

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

@@ -55,5 +55,5 @@ function getBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVersi
     bgColorStyle = 'bg-secondary-light text-primary-main';
   }
 
-  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
+  return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
 }

package/src/ui-kit/BlockWrapper.tsx

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../EventBus/EventBus';
-import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
 import type { UniBlockProps } from '../model/JSXBlock';
-import { changeHashOnObserve } from '../utils/changeHashOnObserve';
+import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
 
 interface BlockWrapperProps extends UniBlockProps {
   tag?: keyof HTMLElementTagNameMap;
@@ -15,49 +13,28 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   ({ className, block, tag = 'section', role, children }) => {
     const Tag: any = tag;
 
-    const { anchor, labels } = block || {};
+    const ref = useBlockIntersectionObserver(block);
 
     const [isVisible, setVisible] = useState(true);
-    const anchorClickRef = useRef<AnchorClickScrollingEvent>({});
-
-    const observerCallback = useMemo(
-      () => changeHashOnObserve({ anchor, anchorClickRef }),
-      [anchor],
-    );
-    const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
-
-    useEffect(
-      () =>
-        EventBus.inst.subscribe('anchorClick', (e) => {
-          setVisible(true);
-          anchorClickRef.current = e;
-        }),
-      [],
-    );
     useEffect(
       () =>
         EventBus.inst.subscribe('tab', (event) => {
           if (event.type === 'group') {
-            const hasSettings = labels?.length || block?.anchor;
-            setVisible(event.label ? !hasSettings || Boolean(labels?.includes(event.label)) : true);
+            const hasSettings = block?.labels?.length || block?.anchor;
+            setVisible(
+              event.label ? !hasSettings || Boolean(block?.labels?.includes(event.label)) : true,
+            );
           } else {
-            changeHash(event.label);
             setVisible(true);
           }
         }),
-      [],
+      [block],
     );
 
     return isVisible ? (
-      <Tag className={className} role={role} {...(anchor ? { id: anchor, ref } : {})}>
+      <Tag className={className} role={role} {...(block?.anchor ? { id: block.anchor, ref } : {})}>
         {children}
       </Tag>
     ) : null;
   },
 );
-
-function changeHash(label?: string) {
-  if (label) {
-    globalThis.document.location.hash = label;
-  }
-}

package/src/ui-kit/HeaderItem/HeaderItem.mobile.tsx

@@ -5,7 +5,7 @@ import type { TopItemProps } from '../TopItem/TopItem';
 export type HeaderItemProps = TopItemProps;
 
 const TEXT_CLASSES = 'font-sans text-s';
-const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
+const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-0.5';
 
 export const HeaderItem = JSX<HeaderItemProps>(
   ({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {

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

@@ -4,7 +4,7 @@ import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { TopItemProps } from '../TopItem/TopItem';
 
 const TEXT_CLASSES = 'font-sans text-l-light';
-const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
+const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-0.5';
 
 export const HeaderItem = JSX<TopItemProps>(
   ({ className = '', active, bgColor = 'bg-white', dataItemName, children, ...rest }) => {

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

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useTariffsInnerTableData } from './useTariffsInnerTableData';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { InnerTableBody } from './InnerTableBody';
 import { TableInnerButton } from './InnerTableButton';
 import { InnerTableHeader } from './InnerTableHeader';
 import type { TableFetchData, TariffsTableInnerContent } from './InnerTableProps';
+import { useTariffsInnerTableData } from './useTariffsInnerTableData';
 
 export interface InnerTableProps extends TariffsTableInnerContent {
   onClick?: () => void;
@@ -14,10 +14,9 @@ const EMPTY_DATA = 'Данных нет';
 
 export const InnerTable = JSX<InnerTableProps>(({ dataUrl, pdfUrl, onClick }) => {
   const { tableData }: TableFetchData = useTariffsInnerTableData(dataUrl);
-
   const [activeTabIndex, setActiveTabIndex] = useState(0);
+  const handleActiveTabIndex = useCallback((_: number) => setActiveTabIndex(_), []);
   const items = tableData?.[activeTabIndex]?.items ?? [];
-
   const currencies = tableData?.map((item) => item.currency ?? '');
 
   return tableData ? (
@@ -25,7 +24,7 @@ export const InnerTable = JSX<InnerTableProps>(({ dataUrl, pdfUrl, onClick }) =>
       <InnerTableHeader
         currencies={currencies}
         activeTabIndex={activeTabIndex}
-        setActiveTabIndex={setActiveTabIndex}
+        setActiveTabIndex={handleActiveTabIndex}
         linkToPDF={pdfUrl} //TODO: need link to service
       />
       <InnerTableBody activeTabIndex={activeTabIndex} items={items} />

package/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Img } from '../Img/Img';
 import { InnerTableBodyItem } from './InnerTableBodyItem';
 import type { DataItem } from './InnerTableProps';
@@ -12,9 +12,10 @@ export interface InnerTableBodyProps {
 export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items }) => {
   const [hiddenTables, setHiddenTables] = useState<Record<string, boolean>>({});
 
-  const toggleTable = (key: string) => {
-    setHiddenTables((oldState) => ({ ...oldState, [key]: !oldState[key] }));
-  };
+  const toggleTables = useCallback(
+    (key) => setHiddenTables((oldState) => ({ ...oldState, [key]: !oldState[key] })),
+    [],
+  );
 
   return (
     <div>
@@ -25,7 +26,7 @@ export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items
           <div key={key} className="w-full">
             <div
               className="flex p-4 bg-main-stroke text-xl-light text-center justify-center cursor-pointer relative"
-              onClick={() => toggleTable(key)}
+              onClick={() => toggleTables(key)}
             >
               {_.title}
               <Img

package/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -1,9 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
-import type { TariffsTableInnerEvent } from './InnerTableProps';
+import type { TariffsTableInnerContent } from './InnerTableProps';
 
-export interface TableInnerButtonProps extends TariffsTableInnerEvent {
+export interface TableInnerButtonProps
+  extends Partial<TariffsTableCellIndexProps>,
+    TariffsTableInnerContent {
   onClick?: () => void;
   isOpen?: boolean;
 }

package/src/ui-kit/InnerTable/InnerTableProps.ts

@@ -1,5 +1,3 @@
-import type { TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
-
 export type RowsData = {
   data?: string;
   cols?: string[];
@@ -25,7 +23,3 @@ export interface TariffsTableInnerContent {
   /** @title Ссылка PDF-файл */
   pdfUrl?: string;
 }
-
-export interface TariffsTableInnerEvent
-  extends Partial<TariffsTableCellIndexProps>,
-    TariffsTableInnerContent {}

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

@@ -1,12 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { FontWeight, TextAlign, TextColor, TextSize } from '../Text/Text';
-
-interface ParagraphProps {
-  size?: TextSize;
-  color?: TextColor;
-  align?: TextAlign;
-  font?: FontWeight;
-}
+import type { ParagraphProps } from './ParagraphProps';
 
 export const Paragraph = JSX<ParagraphProps>((props) => {
   const { size = '', color = '', align = '', font = '', children } = props;

package/src/ui-kit/Paragraph/ParagraphProps.ts

@@ -0,0 +1,8 @@
+import type { FontWeight, TextAlign, TextColor, TextSize } from '../Text/TextProps';
+
+export interface ParagraphProps {
+  size?: TextSize;
+  color?: TextColor;
+  align?: TextAlign;
+  font?: FontWeight;
+}

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

@@ -12,7 +12,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
         value={value}
         name={name}
         checked={checked}
-        onChange={onChange}
+        onChange={(_) => onChange(_.target.value)}
       />
       {text ? <span className="text-primary-text ml-3 cursor-pointer">{text}</span> : null}
     </label>

package/src/ui-kit/Radio/RadioProps.ts

@@ -3,6 +3,6 @@ export interface RadioProps {
   text?: string;
   value: string;
   checked: boolean;
-  onChange: (value: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
   className?: string;
 }

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

@@ -22,7 +22,6 @@ export const Select = JSX<SelectProps>(
   ({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '' }) => {
     const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
     const [isOpen, setIsOpen] = useState(false);
-
     const handleClickOutside = useCallback(() => setIsOpen(false), []);
     const wrapperRef = useOutsideClick<HTMLDivElement>(handleClickOutside);
 
@@ -47,7 +46,7 @@ export const Select = JSX<SelectProps>(
             ${getBorderStyle(isBorder)}`}
             onClick={() => setIsOpen(!isOpen)}
           >
-            <p className="p-4 pr-8 h-[56px] overflow-hidden text-ellipsis whitespace-nowrap">
+            <p className="p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap">
               {selectedItem?.text || placeholder}
             </p>
             <Icon
@@ -60,7 +59,7 @@ export const Select = JSX<SelectProps>(
           {options?.length ? (
             <div className={`h-0 ${renderOptionsStyle(isOpen)}`}>
               <div
-                className={`bg-white text-l max-h-[256px] overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`}
+                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(choiceOption, isOpen, isSelected))}
               </div>

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

@@ -1,67 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-
-/**
- * @title Размер текста
- */
-export type TextSize =
-  | ''
-  | 'text-xs-light'
-  | 'text-s-light'
-  | 'text-s'
-  | 'text-m-light'
-  | 'text-m'
-  | 'text-l-light'
-  | 'text-l'
-  | 'text-xl-light'
-  | 'text-xl';
-
-/**
- * @title Размер текста
- */
-export type TitleSize =
-  | ''
-  | 'text-h6'
-  | 'text-h5'
-  | 'text-h5-light'
-  | 'text-h4'
-  | 'text-h3'
-  | 'text-h2'
-  | 'text-h1'
-  | 'text-h0'
-  | 'text-m-title'
-  | 'text-m-title-xs'
-  | 'title-extra'
-  | 'title-huge';
-
-/**
- * @title Цвет текста
- */
-export type TextColor =
-  | ''
-  | 'text-main'
-  | 'text-primary-text'
-  | 'text-primary-main'
-  | 'text-secondary-text'
-  | 'text-secondary-light'
-  | 'text-error'
-  | 'text-white'
-  | 'text-green';
-
-/**
- * @title Выравнивание
- * @enumNames [
- *    "По умолчанию",
- *    "По левому краю",
- *    "По центру",
- *    "По правому краю"
- * ]
- */
-export type TextAlign = '' | 'text-left' | 'text-center' | 'text-right';
-
-/**
- * @title Насыщенность шрифта
- */
-export type FontWeight = '' | 'font-light' | 'font-normal' | 'font-medium';
+import type { FontWeight, TextAlign, TextColor, TextSize, TitleSize } from './TextProps';
 
 interface TextProps {
   size?: TextSize | TitleSize;