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

package/src/components/ImgBlock/ImgBlockContent.ts

@@ -0,0 +1,8 @@
+import type { Picture } from '../../model/Picture';
+
+/**
+ * @title Картинка
+ */
+export interface ImgBlockContent {
+  image?: Picture;
+}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -1,15 +1,15 @@
 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 { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
 
-interface RenderNavButtonProps {
+interface NavButtonProps {
   title?: string;
   i: number;
-  activeSlideIndex?: number;
+  isActive: boolean;
   onClick: () => void;
 }
 
@@ -18,6 +18,7 @@ export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent,
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   ({ className = '', title, insuranceTabs = [], button, ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const handleActiveSlideIndex = useCallback((_: number) => setActiveSlideIndex(_), []);
 
     return (
       <BlockWrapper
@@ -31,8 +32,8 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
               renderNavButton({
                 title: item?.title,
                 i,
-                activeSlideIndex,
-                onClick: () => setActiveSlideIndex(i),
+                isActive: Boolean(i === activeSlideIndex),
+                onClick: () => handleActiveSlideIndex(i),
               }),
             )}
           </div>
@@ -62,12 +63,8 @@ const renderInsuranceGalleries = ({ insuranceTabs, button }: InsuranceAmountBloc
     : null;
 };
 
-function renderNavButton({ title, i, activeSlideIndex, onClick }: RenderNavButtonProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
-    ? 'bg-primary-main text-white rounded-md'
-    : `text-secondary-text`;
+function renderNavButton({ title, i, isActive, onClick }: NavButtonProps) {
+  const btnClassName = isActive ? 'bg-primary-main text-white rounded-md' : `text-secondary-text`;
 
   return (
     <button

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -20,7 +20,7 @@ type InsuranceGalleryProps = {
   onClick: (index: number) => void;
 };
 
-type InsuranceSlideProps = {
+type NavButtonProps = {
   slide: CardItem;
   i: number;
   isActive: boolean;
@@ -80,7 +80,7 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
     >
       <div className={`w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`}>
         {cards.map((slide, i) =>
-          renderSlide({
+          renderNavButton({
             slide,
             i,
             isActive: Boolean(i === selectedCardIndex),
@@ -92,7 +92,7 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
   );
 }
 
-function renderSlide({ slide, i, isActive, onClick }: InsuranceSlideProps) {
+function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
   const btnClassName = isActive
     ? 'shadow-dark-blue/42 border-primary-main'
     : `ease-in duration-300 border-main-stroke`;

package/src/components/ParagraphBlock/ParagraphBlock.example.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "text": "Текст"
+  }
+}

package/src/components/ParagraphBlock/ParagraphBlock.fixture.tsx

@@ -0,0 +1,45 @@
+import '../../setup-fixture';
+import { ParagraphBlock } from './ParagraphBlock';
+
+const DEFAULT_CLASS_NAME = 'col-span-12 w-full';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера XL" size="text-xl" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера L" size="text-l" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера M" size="text-m" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера S" size="text-s" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера XS" size="text-xs" />
+    </div>
+  ),
+  colors: (
+    <div className="container grid grid-cols-12">
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-error" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-green" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-main" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-primary-main" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-primary-text" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-secondary-text" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-white" />
+    </div>
+  ),
+  alignment: (
+    <div className="container grid grid-cols-12">
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Слева" align="text-left" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Справа" align="text-right" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По центру" align="text-center" />
+    </div>
+  ),
+  font: (
+    <div className="container grid grid-cols-12">
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Тонкий" font="font-light" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Обычный" font="font-normal" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Средний" font="font-medium" />
+    </div>
+  ),
+};

package/src/components/ParagraphBlock/ParagraphBlock.tsx

@@ -0,0 +1,19 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { ParagraphBlockContent } from './ParagraphBlockContent';
+
+interface ParagraphBlockProps extends ParagraphBlockContent, UniBlockProps {}
+
+export const ParagraphBlock = JSX<ParagraphBlockProps>((props) => {
+  const { className, text, size, color, align, font, ...rest } = props;
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      <Paragraph size={size} color={color} align={align} font={font}>
+        {text}
+      </Paragraph>
+    </BlockWrapper>
+  );
+});

package/src/components/ParagraphBlock/ParagraphBlock.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/ParagraphBlock/ParagraphBlockContent.ts

@@ -0,0 +1,9 @@
+import type { ParagraphProps } from '../../ui-kit/Paragraph/ParagraphProps';
+
+/**
+ * @title Параграф
+ */
+export interface ParagraphBlockContent extends ParagraphProps {
+  /** @title Текст */
+  text?: string;
+}

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,20 +1,21 @@
 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 { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
-import type { ProductGalleryContent, ProductGalleryNav } from './ProductGalleryContent';
+import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-interface RenderNavButtonProps {
-  slide?: ProductGalleryNav;
+interface NavButtonProps {
+  slide?: HeadlineCommonProps;
   i: number;
-  activeSlideIndex?: number;
+  isActive: boolean;
   onClick: () => void;
   version: BlockVersion;
 }
@@ -34,6 +35,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
     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
@@ -54,8 +56,8 @@ export const ProductGallery = JSX<ProductGalleryProps>(
             renderNavButton({
               slide,
               i,
-              activeSlideIndex,
-              onClick: () => setActiveSlideIndex(i),
+              isActive: Boolean(i === activeSlideIndex),
+              onClick: () => handleActiveSlideIndex(i),
               version,
             }),
           )}
@@ -87,17 +89,15 @@ function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i:
   );
 }
 
-function renderNavButton({ slide, i, activeSlideIndex, onClick, version }: RenderNavButtonProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
+function renderNavButton({ slide, i, isActive, onClick, version }: NavButtonProps) {
+  const btnClassName = isActive
     ? 'bg-white shadow-dark-blue/42 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
       ${VersionStyleMap[version]}`;
-  const btnTitleClassName = isActiveBtn
+  const btnTitleClassName = isActive
     ? 'text-primary-text !text-h6 p-2'
     : `text-l pb-1 ${productBlockStyleMap[version].title}`;
-  const btnDescClassName = isActiveBtn
+  const btnDescClassName = isActive
     ? 'text-secondary-text text-l-light'
     : `text-m-light ${productBlockStyleMap[version].text}`;
 

package/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -20,31 +20,29 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     branches = [],
     selectedBranch,
     onSelectedBranch,
-  }) => {
-    return (
-      <div className="flex justify-between gap-4 mb-6">
-        <div className="max-w-[396px] w-1/2">
-          <WrapperSelect
-            data={regions}
-            fieldValue="code"
-            fieldLabel="name"
-            selected={selectedRegion}
-            setSelected={onSelectedRegion}
-            label="Регион"
-          />
-        </div>
-        <div className="max-w-[396px] w-1/2">
-          <WrapperSelect
-            data={branches}
-            fieldValue="branchCode"
-            fieldLabel="address"
-            selected={selectedBranch}
-            setSelected={onSelectedBranch}
-            label="Отделение"
-            placeholder="Выберите отделение"
-          />
-        </div>
+  }) => (
+    <div className="flex justify-between gap-4 mb-6">
+      <div className="max-w-[396px] w-1/2">
+        <WrapperSelect
+          data={regions}
+          fieldValue="code"
+          fieldLabel="name"
+          selected={selectedRegion}
+          setSelected={onSelectedRegion}
+          label="Регион"
+        />
       </div>
-    );
-  },
+      <div className="max-w-[396px] w-1/2">
+        <WrapperSelect
+          data={branches}
+          fieldValue="branchCode"
+          fieldLabel="address"
+          selected={selectedBranch}
+          setSelected={onSelectedBranch}
+          label="Отделение"
+          placeholder="Выберите отделение"
+        />
+      </div>
+    </div>
+  ),
 );

package/src/components/SafeDepositRental/RenderRadioButtons.tsx

@@ -1,11 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks/core';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks/core';
 import { Radio } from '../../ui-kit/Radio/Radio';
 
 export const RenderRadioButtons = JSX(() => {
   const [selectedOption, setSelectedOption] = useState('option2');
-
-  const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelectedOption(_.target.value);
+  const onChange = useCallback((_: string) => setSelectedOption(_), []);
 
   return (
     <div>

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -18,6 +18,7 @@ const DEFAULT_DAYS = 26;
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
   ({ title, footnote, className = '', ...rest }) => {
     const [showMap, setShowMap] = useState<boolean>(false);
+    const handleShowMap = useCallback(() => setShowMap((_) => !_), []);
     const [safeDepositState, setStateDepositState] = useState<SafeDepositRentalState>({
       selectedRegion: '',
       selectedBranch: '',
@@ -37,10 +38,6 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
       [setStateDepositState],
     );
 
-    const onShowMapToggle = () => {
-      setShowMap(!showMap);
-    };
-
     const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
 
     return (
@@ -58,7 +55,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
             regions={regions}
             branches={branches}
             data={{ ...safeDepositState, selectedRegion }}
-            onShowMapToggle={onShowMapToggle}
+            onClick={handleShowMap}
             onChange={handleChangeSafeDepositState}
           />
           {footnote ? <p className="text-s-light text-secondary-text">{footnote}</p> : null}

package/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -13,7 +13,7 @@ export interface SafeDepositRentalFieldsProps extends SafeDepositRentalState {
   safeBoxCases?: SafeBoxCase[];
   caseVolumes?: SafeBoxCaseVolume[];
   branches?: Branch[];
-  onShowMapToggle: () => void;
+  onClick: () => void;
   onChange: HandleChangeState;
 }
 
@@ -29,7 +29,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     safeBoxCases,
     caseVolumes,
     onChange,
-    onShowMapToggle,
+    onClick,
   }) => {
     return (
       <div className="flex-1 mr-9">
@@ -53,7 +53,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
         <span className="text-secondary-text text-l-light">Тип договора</span>
         <div className="flex justify-between items-center mt-5">
           <RenderRadioButtons />
-          <Button text="Офисы на карте" version="primary" onClick={onShowMapToggle} />
+          <Button text="Офисы на карте" version="primary" onClick={onClick} />
         </div>
       </div>
     );

package/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -11,12 +11,12 @@ export interface SafeDepositRentalFormProps {
   regions: Region[];
   branches: Branch[];
   data: SafeDepositRentalState;
-  onShowMapToggle: () => void;
+  onClick: () => void;
   onChange: (data: Partial<SafeDepositRentalState>) => void;
 }
 
 export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) => {
-  const { regions, data, branches, onChange, onShowMapToggle } = props;
+  const { regions, data, branches, onChange, onClick } = props;
 
   useEffect(() => {
     onChange({
@@ -41,7 +41,7 @@ export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) =>
       <SafeDepositRentalFields
         {...data}
         regions={regions}
-        onShowMapToggle={onShowMapToggle}
+        onClick={onClick}
         branches={branches}
         caseVolumes={caseVolumes}
         safeBoxCases={safeBoxCases}

package/src/components/StepsBlock/StepsBlock.tsx

@@ -67,8 +67,8 @@ export const StepsBlock = JSX<StepsBlockProps>(
 
 const renderStepIcon =
   (styleMap: StyleType, version?: BlockVersion) =>
-  ({ icon }: Step, i: number) => {
-    return (
+  ({ icon }: Step, i: number) =>
+    (
       <div key={String(i)} className="flex flex-col items-center text-center">
         <div
           className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center
@@ -82,4 +82,3 @@ const renderStepIcon =
         </div>
       </div>
     );
-  };

package/src/components/TariffsTable/TableTileHeader.tsx

@@ -3,13 +3,11 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableRowHeader } from './TariffsTableContent';
 
-export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => {
-  return (
-    <div className="flex gap-2.5 mb-2">
-      {title ? <Heading headingType="h3" className="font-medium" title={title} /> : null}
-      {icon ? (
-        <Img className="ml-auto max-w-6 max-h-6" image={icon} width="24px" height="24px" />
-      ) : null}
-    </div>
-  );
-});
+export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => (
+  <div className="flex gap-2.5 mb-2">
+    {title ? <Heading headingType="h3" className="font-medium" title={title} /> : null}
+    {icon ? (
+      <Img className="ml-auto max-w-6 max-h-6" image={icon} width="24px" height="24px" />
+    ) : null}
+  </div>
+));

package/src/components/TariffsTable/TariffsTable.tsx

@@ -16,7 +16,6 @@ export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 interface WrapperProps {
   controls: CarouselControls;
-  isScrollAvailable: boolean;
 }
 
 export const TariffsTable = JSX<TariffsTableProps>(
@@ -39,7 +38,6 @@ export const TariffsTable = JSX<TariffsTableProps>(
       itemCount: itemCount,
       visibleItemCount: COLS_LENGTH_FOR_SCROLL,
     });
-    const { isScrollAvailable } = controls;
     const rows = (rowData || []).map((row, i) => (
       <TariffsTableRow key={String(i)} row={row} activeIndex={activeIndex} rowIdx={i} {...rest} />
     ));
@@ -58,7 +56,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
         {hiddenRowsNum > 0 ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
-              <Wrapper controls={controls} isScrollAvailable={isScrollAvailable}>
+              <Wrapper controls={controls}>
                 {visibleRows}
                 <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
               </Wrapper>
@@ -66,9 +64,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
             renderFoldButton={renderDefaultFoldButton}
           />
         ) : (
-          <Wrapper controls={controls} isScrollAvailable={isScrollAvailable}>
-            {rows}
-          </Wrapper>
+          <Wrapper controls={controls}>{rows}</Wrapper>
         )}
       </BlockWrapper>
     );
@@ -89,20 +85,22 @@ function renderDescription(description?: string) {
   return description ? <div className="mb-9 text-center text-l">{description}</div> : null;
 }
 
-const Wrapper = JSX<WrapperProps>(({ children, controls, isScrollAvailable }) => (
-  <div role="table">
-    <div className="relative">
-      {children}
-      {isScrollAvailable
-        ? renderArrows({
-            ...controls,
-            btnClass: ['top-[108px]', 'top-[44px]'],
-            className: 'right-7',
-          })
-        : null}
+const Wrapper = JSX<WrapperProps>(({ children, controls }) => {
+  const { isScrollAvailable } = controls;
+
+  return (
+    <div role="table">
+      <div className="relative">
+        {children}
+        {renderArrows({
+          ...controls,
+          btnClass: ['top-[108px]', 'top-[44px]'],
+          className: 'right-7',
+        })}
+      </div>
+      {isScrollAvailable ? (
+        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+      ) : null}
     </div>
-    {isScrollAvailable ? (
-      <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
-    ) : null}
-  </div>
-));
+  );
+});

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 (
@@ -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/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/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/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;
+}