@cyber-harbour/ui 1.0.32 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.32",
+  "version": "1.0.33",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/Box/Box.tsx

@@ -1,11 +1,17 @@
 import { createComponent, FabricComponent } from '../../Theme';
 import { styled } from 'styled-components';
 
-type BoxProps = FabricComponent<{
-  children: any;
-}>;
+type BoxProps = FabricComponent<
+  {
+    children: any;
+  } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+>;
 
-export const Box = styled(createComponent<BoxProps>('div'))(
+export const Box = ({ children, ...props }: BoxProps) => {
+  return <StyledBox {...props}>{children}</StyledBox>;
+};
+
+const StyledBox = styled(createComponent('div'))(
   ({ theme }) => `
       padding: ${theme.box.padding};
       border-radius: ${theme.box.borderRadius};

package/src/Core/Line/Line.tsx

@@ -1,4 +1,4 @@
-import { createComponent, FabricComponent, pxToRem } from '../../Theme';
+import { createComponent, FabricComponent } from '../../Theme';
 import { styled } from 'styled-components';
 
 type LineProps = FabricComponent<

package/src/Core/Typography/Typography.tsx

@@ -12,6 +12,7 @@ type TypographyProps = FabricComponent<{
   fontStyle?: CSSProperties['fontStyle'];
   color?: ColorVariant | string;
   className?: string;
+  ellipsis?: boolean;
 }>;
 
 // Create a styled component that can be dynamically rendered as different HTML elements
@@ -20,7 +21,8 @@ const StyledTypography = styled(createComponent('div'))<{
   $weight?: CSSProperties['fontWeight'];
   $style?: CSSProperties['fontStyle'];
   $color?: ColorVariant | string;
-}>(({ theme, $variant, $color, $weight = '400', $style = 'initial' }) => {
+  $ellipsis?: boolean;
+}>(({ theme, $variant, $color, $weight = '400', $style = 'initial', $ellipsis }) => {
   // Resolve color from theme if it's a theme color path, or use the direct color value
 
   return `
@@ -28,6 +30,7 @@ const StyledTypography = styled(createComponent('div'))<{
       font-weight: ${$weight};
       font-style: ${$style};
       color: ${resolveThemeColor(theme, $color) || theme.colors.text.main};
+      ${$ellipsis ? 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' : ''}
     `;
 });
 
@@ -40,6 +43,7 @@ export const Typography = ({
   color,
   className,
   style,
+  ellipsis = false,
   ...props
 }: TypographyProps) => {
   // Determine which HTML element to render based on the variant if not explicitly specified
@@ -52,6 +56,7 @@ export const Typography = ({
       $weight={weight}
       $style={fontStyle}
       $color={color}
+      $ellipsis={ellipsis}
       className={className}
       style={style}
       {...props}

package/src/Graph2D/Graph2D.tsx

@@ -1,6 +1,6 @@
 import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from 'react-force-graph-2d';
 import { Graph2DProps } from './types';
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useRef, useState, useCallback, useLayoutEffect } from 'react';
 import { forceCollide } from 'd3-force';
 import { styled } from 'styled-components';
 import eyeLightIcon from './eye_light.png';
@@ -8,6 +8,8 @@ import eyeLightHoverIcon from './eye_light_hover.png';
 import crossLightIcon from './cross_light.png';
 import crossLightHoverIcon from './cross_light_hover.png';
 
+const ALPHA_MIN = 0.5;
+
 // Створюємо та налаштовуємо об'єкти зображень
 const imgEyeLightIcon = new Image();
 imgEyeLightIcon.src = eyeLightIcon;
@@ -37,20 +39,35 @@ export const Graph2D = ({
     maxZoom: 4, // Максимальний зум
   },
   onNodeClick,
+  onNodeHover,
+  onLinkHover,
   onLinkClick,
+  onBackgroundClick,
 }: Graph2DProps) => {
   // Стан для підсвічування вузлів і зв'язків
   const [highlightNodes, setHighlightNodes] = useState(new Set());
   const [highlightLinks, setHighlightLinks] = useState(new Set());
   const [hoverNode, setHoverNode] = useState<any>(null);
+  const [selectedNode, setSelectedNode] = useState<any>(null);
+  const [unVisibleNodes, setUnVisibleNodes] = useState(new Set<string>());
   const [hiddenNodes, setHiddenNodes] = useState(new Set<string>());
   const [collapsedNodes, setCollapsedNodes] = useState(new Set<string>());
   // Стани для відстеження наведення на кнопки
   const [hoverTopButton, setHoverTopButton] = useState(false);
   const [hoverBottomButton, setHoverBottomButton] = useState(false);
+  const [isRendering, setIsRendering] = useState(true);
 
-  const fgRef = useRef<ForceGraphMethods>(null) as React.MutableRefObject<ForceGraphMethods<NodeObject, LinkObject>>;
+  const fgRef = useRef<
+    ForceGraphMethods & {
+      tick?: number;
+    }
+  >(null) as React.MutableRefObject<
+    ForceGraphMethods<NodeObject, LinkObject> & {
+      tick?: number;
+    }
+  >;
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const tickTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   // Функція для реверсивного масштабування тексту
   // При максимальному зумі текст має розмір config.fontSize
@@ -84,6 +101,8 @@ export const Graph2D = ({
       }
     }
 
+    onNodeHover?.(node);
+
     setHoverNode(node || null);
     setHighlightNodes(newHighlightNodes);
     setHighlightLinks(newHighlightLinks);
@@ -98,14 +117,42 @@ export const Graph2D = ({
       newHighlightLinks.add(link);
       newHighlightNodes.add(link.source);
       newHighlightNodes.add(link.target);
+      onLinkHover?.(link);
     }
 
     setHighlightNodes(newHighlightNodes);
     setHighlightLinks(newHighlightLinks);
   }, []);
 
+  const handleEngineTick = useCallback(() => {
+    if (isRendering)
+      if (
+        graphData &&
+        fgRef.current &&
+        fgRef.current.tick &&
+        graphData.nodes.length > 0 &&
+        graphData.nodes.length * ALPHA_MIN <= fgRef.current.tick
+      ) {
+        if (tickTimerRef.current) {
+          clearTimeout(tickTimerRef.current);
+        }
+        fgRef.current.zoomToFit(0, 20);
+        setIsRendering(false);
+      } else {
+        fgRef.current.tick = fgRef.current.tick ? (fgRef.current.tick = fgRef.current.tick + 1) : 1;
+        if (tickTimerRef.current) {
+          clearTimeout(tickTimerRef.current);
+        }
+        tickTimerRef.current = setTimeout(() => {
+          //force tick check
+          fgRef.current.zoomToFit(0, 20);
+          setIsRendering(false);
+        }, 1500);
+      }
+  }, [graphData]);
+
   // Створення взаємозв'язків між вузлами
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!graphData) return;
 
     // Прив'язка вузлів до їхніх сусідів та зв'язків
@@ -175,13 +222,10 @@ export const Graph2D = ({
           .iterations(3) // Більше ітерацій для точнішого розрахунку
           .strength(1); // Максимальна сила (1 - тверде обмеження)
 
-        fgRef.current.d3Force('collide', collideForce);
+        fgRef.current.pauseAnimation().d3Force('collide', collideForce).resumeAnimation();
       } catch (err) {
         console.error('Error setting up collision force:', err);
       }
-
-      // Перезапустити симуляцію для застосування змін
-      fgRef.current.resumeAnimation();
     }
   }, [graphData]);
 
@@ -292,15 +336,35 @@ export const Graph2D = ({
     [config, hoverTopButton, hoverBottomButton]
   );
 
-  const collapseNode = (collapsed: Set<string>, node: NodeObject) => {
-    if (node && node.id && !collapsed.has(`${node.id}`) && graphData) {
+  const hideNode = (unvisibles: Set<string>, node: NodeObject) => {
+    if (node && node.id && !unvisibles.has(`${node.id}`) && graphData) {
       // Прив'язка вузлів до їхніх сусідів та зв'язків
       const targets = graphData.links.filter((link: any) => {
         return link.source.id === node.id && link.label !== 'MATCH';
       });
       targets.forEach((link: any) => {
-        collapsed.add(`${link.target.id}`);
-        collapseNode(collapsed, link.target);
+        unvisibles.add(`${link.target.id}`);
+        hideNode(unvisibles, link.target);
+      });
+    }
+  };
+
+  const showNode = (unvisibles: Set<string>, node: NodeObject) => {
+    if (node && node.id && graphData) {
+      // Прив'язка вузлів до їхніх сусідів та зв'язків
+      const targets = graphData.links.filter((link: any) => {
+        return link.source.id === node.id && link.label !== 'MATCH';
+      });
+
+      targets.forEach((link: any) => {
+        if (unvisibles.has(`${link.target.id}`)) {
+          if (!hiddenNodes.has(`${link.target.id}`)) {
+            unvisibles.delete(`${link.target.id}`);
+            if (!collapsedNodes.has(`${link.target.id}`)) {
+              showNode(unvisibles, link.target);
+            }
+          }
+        }
       });
     }
   };
@@ -308,18 +372,31 @@ export const Graph2D = ({
   // Функція для обробки кліку на кнопку "сховати вузол"
   const handleHideNode = (node: any) => {
     const newHiddenNodes = new Set(hiddenNodes);
-    collapseNode(newHiddenNodes, node);
-    newHiddenNodes.add(node.id);
-
+    const newUnVisibleNodes = new Set(unVisibleNodes);
+    if (newHiddenNodes.has(node.id)) {
+      newHiddenNodes.delete(node.id);
+      showNode(newUnVisibleNodes, node);
+    } else {
+      newHiddenNodes.add(node.id);
+      hideNode(newUnVisibleNodes, node);
+    }
     setHiddenNodes(newHiddenNodes);
+    setUnVisibleNodes(newUnVisibleNodes);
   };
 
   // Функція для обробки кліку на кнопку "згорнути дочірні вузли"
   const handleCollapseChildren = (node: any) => {
     const newCollapsedNodes = new Set(collapsedNodes);
-
-    collapseNode(newCollapsedNodes, node);
+    const newUnVisibleNodes = new Set(unVisibleNodes);
+    if (newCollapsedNodes.has(node.id)) {
+      newCollapsedNodes.delete(node.id);
+      showNode(newUnVisibleNodes, node);
+    } else {
+      newCollapsedNodes.add(node.id);
+      hideNode(newUnVisibleNodes, node);
+    }
     setCollapsedNodes(newCollapsedNodes);
+    setUnVisibleNodes(newUnVisibleNodes);
   };
 
   // Функція для визначення, чи знаходиться точка в межах сектора кола (кнопки)
@@ -381,7 +458,6 @@ export const Graph2D = ({
         return;
       }
 
-      const nodeSize = config.nodeSizeBase;
       const buttonRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
       const zoom = fgRef.current.zoom() || 1; // Отримуємо поточний зум
 
@@ -466,6 +542,10 @@ export const Graph2D = ({
     };
   }, [hoverNode, config, isPointInButtonArea, hoverTopButton, hoverBottomButton]);
 
+  useEffect(() => {
+    if (fgRef.current) fgRef.current.zoomToFit(0, 20); // Автоматичне масштабування графа при першому рендері
+  }, [width, height]);
+
   const truncateText = (text: string, maxWidth: number, ctx: CanvasRenderingContext2D): string => {
     if (!text) return '';
 
@@ -488,6 +568,7 @@ export const Graph2D = ({
   };
 
   const renderGrid = (ctx: CanvasRenderingContext2D, globalScale: number) => {
+    if (isRendering) return; // Не малюємо сітку під час рендерингу
     // This will be called before each rendering frame
     ctx.getTransform();
     ctx.save();
@@ -521,7 +602,7 @@ export const Graph2D = ({
     globalScale: number
   ) => {
     const { x, y } = node;
-    const radius = config.nodeSizeBase;
+    const radius = selectedNode === node ? (config.nodeSizeBase * config.nodeAreaFactor) / 2 : config.nodeSizeBase / 2;
 
     ctx.beginPath();
     ctx.arc(x as number, y as number, radius, 0, 2 * Math.PI);
@@ -535,14 +616,14 @@ export const Graph2D = ({
     // Якщо вузол підсвічений, малюємо кільце
     if (highlightNodes.has(node)) {
       // Якщо це наведений вузол, малюємо кнопки
-      if (node === hoverNode) {
-        paintNodeButtons(node, ctx, globalScale);
-      } else {
-        paintRing(node, ctx, globalScale);
-      }
+      if (node !== selectedNode) paintRing(node, ctx, globalScale);
+    }
+
+    if (node === selectedNode) {
+      paintNodeButtons(node, ctx, globalScale);
     }
 
-    const { x, y, color, label } = node;
+    const { x, y, color, fontColor, label } = node;
 
     const size = config.nodeSizeBase;
     const radius = config.nodeSizeBase / 2;
@@ -550,7 +631,8 @@ export const Graph2D = ({
     // Малюємо коло
     ctx.beginPath();
     ctx.arc(x as number, y as number, radius, 0, 2 * Math.PI);
-    ctx.fillStyle = color; // Колір контуру TODO: додати прив'язку до значення label
+    ctx.fillStyle = collapsedNodes.has(node.id as string) ? `${color}50` : color; // Колір контуру з opacity для згорнутих вузлів
+
     ctx.fill();
 
     // пігтовока до малювання тексту
@@ -565,7 +647,7 @@ export const Graph2D = ({
     ctx.font = `${scaledFontSize}px Sans-Serif`;
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
-    ctx.fillStyle = 'black';
+    ctx.fillStyle = fontColor;
 
     const truncatedLabel = truncateText(label, maxWidth, ctx);
     ctx.fillText(truncatedLabel, 0, 0);
@@ -577,11 +659,127 @@ export const Graph2D = ({
     // Отримуємо позиції початку і кінця зв'язку
     const { source, target, label } = link;
 
-    if (!label) return; // Пропускаємо, якщо немає мітки
-
     // Координати початку і кінця зв'язку
     const start = { x: source.x, y: source.y };
     const end = { x: target.x, y: target.y };
+
+    // Відстань між вузлами
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    // Розмір вузла
+    const sourceSize = config.nodeSizeBase;
+    const targetSize = config.nodeSizeBase;
+
+    // Нормалізовані вектори для напрямку
+    const unitDx = dx / distance;
+    const unitDy = dy / distance;
+
+    // Скоригований початок і кінець (щоб стрілка не починалася з центру вузла і не закінчувалася в центрі вузла)
+    const startRadius = sourceSize / 2;
+    const endRadius = targetSize / 2;
+
+    // Зміщені позиції початку і кінця
+    const adjustedStart = {
+      x: start.x + unitDx * startRadius,
+      y: start.y + unitDy * startRadius,
+    };
+
+    // Для кінцевої точки віднімаємо невелику відстань, щоб стрілка не заходила в вузол
+    const arrowHeadLength = 4;
+    const adjustedEnd = {
+      x: end.x - unitDx * (endRadius + arrowHeadLength),
+      y: end.y - unitDy * (endRadius + arrowHeadLength),
+    };
+
+    // Позиція для стрілки (трохи ближче до кінцевого вузла)
+    const adjusteArrowdEnd = {
+      x: end.x - unitDx * (endRadius + 1),
+      y: end.y - unitDy * (endRadius + 1),
+    };
+
+    // Малюємо лінію зв'язку з урахуванням місця для тексту, якщо він є
+    const lineColor = highlightLinks.has(link) ? '#ff9900' : '#999';
+    const lineWidth = highlightLinks.has(link) ? 1.5 : 0.5;
+
+    if (label) {
+      // Розраховуємо ширину тексту для визначення розміру проміжку
+      const scaledFontSize = calculateFontSize(globalScale);
+      ctx.font = `${scaledFontSize}px Sans-Serif`;
+      const textWidth = ctx.measureText(label).width;
+
+      // Розраховуємо довжину проміжку вздовж лінії
+      const gapLength = Math.sqrt(textWidth * textWidth + scaledFontSize * scaledFontSize);
+
+      // Загальна довжина лінії між вузлами
+      const lineLength = distance - startRadius - endRadius - arrowHeadLength;
+
+      // Розрахунок відстані від початку до середини і від середини до кінця
+      const halfLineLength = lineLength / 2;
+      const gapHalf = gapLength / 2;
+
+      // Малюємо першу частину лінії (від початку до проміжку)
+      if (halfLineLength > gapHalf) {
+        // Розрахунок точок перед проміжком
+        const gapStart = {
+          x: adjustedStart.x + unitDx * (halfLineLength - gapHalf),
+          y: adjustedStart.y + unitDy * (halfLineLength - gapHalf),
+        };
+
+        ctx.beginPath();
+        ctx.moveTo(adjustedStart.x, adjustedStart.y);
+        ctx.lineTo(gapStart.x, gapStart.y);
+        ctx.strokeStyle = lineColor;
+        ctx.lineWidth = lineWidth;
+        ctx.stroke();
+
+        // Розрахунок точок після проміжку
+        const gapEnd = {
+          x: adjustedStart.x + unitDx * (halfLineLength + gapHalf),
+          y: adjustedStart.y + unitDy * (halfLineLength + gapHalf),
+        };
+
+        ctx.beginPath();
+        ctx.moveTo(gapEnd.x, gapEnd.y);
+        ctx.lineTo(adjustedEnd.x, adjustedEnd.y);
+        ctx.strokeStyle = lineColor;
+        ctx.lineWidth = lineWidth;
+        ctx.stroke();
+      }
+    } else {
+      // Якщо немає тексту, малюємо повну лінію
+      ctx.beginPath();
+      ctx.moveTo(adjustedStart.x, adjustedStart.y);
+      ctx.lineTo(adjustedEnd.x, adjustedEnd.y);
+      ctx.strokeStyle = lineColor;
+      ctx.lineWidth = lineWidth;
+      ctx.stroke();
+    }
+
+    // Малюємо стрілку
+    const arrowHeadWidth = 2;
+    const angle = Math.atan2(dy, dx);
+
+    ctx.save();
+    ctx.translate(adjusteArrowdEnd.x, adjusteArrowdEnd.y);
+    ctx.rotate(angle);
+
+    // Малюємо наконечник стрілки
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(-arrowHeadLength, arrowHeadWidth);
+    ctx.lineTo(-arrowHeadLength, 0); // Стрілка трохи вдавлена всередину
+    ctx.lineTo(-arrowHeadLength, -arrowHeadWidth);
+    ctx.closePath();
+
+    ctx.fillStyle = highlightLinks.has(link) ? '#ff9900' : '#999';
+    ctx.fill();
+    ctx.restore();
+
+    // Якщо немає мітки, не малюємо текст
+    if (!label) return;
+
     // Знаходимо середину лінії для розміщення тексту
     const middleX = start.x + (end.x - start.x) / 2;
     const middleY = start.y + (end.y - start.y) / 2;
@@ -594,7 +792,6 @@ export const Graph2D = ({
     ctx.textBaseline = 'middle';
 
     // Визначення кута нахилу лінії для повороту тексту
-    const angle = Math.atan2(end.y - start.y, end.x - start.x);
     ctx.save();
     // Переміщення до центру лінії та поворот тексту
     ctx.translate(middleX, middleY);
@@ -717,9 +914,13 @@ export const Graph2D = ({
       event.stopPropagation();
       return;
     }
-
     // Якщо клік не на кнопках, обробляємо клік на вузлі
-    if (onNodeClick) onNodeClick(node);
+    setSelectedNode(node);
+    onNodeClick?.(node);
+  };
+
+  const handleBackgroundClick = (event: MouseEvent) => {
+    setSelectedNode(null);
   };
 
   return (
@@ -733,39 +934,48 @@ export const Graph2D = ({
         linkSource={linkSource}
         onLinkClick={onLinkClick}
         onNodeClick={handleNodeClick}
+        onBackgroundClick={handleBackgroundClick}
         nodeLabel={(node: any) => `${node.label || ''}`} // Показуємо повний текст у тултіпі
         linkLabel={(link: any) => link.label}
         nodeAutoColorBy="label"
-        linkDirectionalArrowLength={3.5}
-        linkDirectionalArrowRelPos={1}
         linkCurvature={0}
+        // Вимикаємо вбудовані стрілки, оскільки використовуємо свою реалізацію
+        linkDirectionalArrowLength={0}
         // Обмеження максимального зуму
-        maxZoom={config.maxZoom}
-        minZoom={1}
+        //maxZoom={config.maxZoom}
+        minZoom={0.01}
         // Додавання обробників наведення
         onNodeHover={handleNodeHover}
         onLinkHover={handleLinkHover}
+        onEngineTick={handleEngineTick}
+        d3AlphaMin={ALPHA_MIN}
+        d3VelocityDecay={0.4}
+        d3AlphaDecay={0.038}
         // Виділення зв'язків при наведенні
         linkWidth={(link: any) => (highlightLinks.has(link) ? 3 : 1)}
         linkColor={(link: any) => (highlightLinks.has(link) ? '#ff9900' : '#999')}
         onRenderFramePre={renderGrid}
         nodePointerAreaPaint={renderNodePointerAreaPaint}
         nodeCanvasObject={renderNodeCanvasObject}
-        linkCanvasObjectMode={() => 'after'}
+        linkCanvasObjectMode={() => 'replace'} // 'replace' замість 'after' для повної заміни стандартного рендерингу зв'язків
         linkCanvasObject={renderLinkCanvasObject}
         linkVisibility={(link: any) => {
+          if (isRendering) return false; // Не показуємо вузол, якщо граф ще рендериться
+
           // Перевіряємо, чи вузол прихований
           if (hiddenNodes.has(link.source.id) || hiddenNodes.has(link.target.id)) return false;
           // Перевіряємо, чи вузол згорнутий
-          if (collapsedNodes.has(link.source.id) || collapsedNodes.has(link.target.id)) return false;
+          if (collapsedNodes.has(link.source.id)) return false;
+          if (unVisibleNodes.has(link.source.id) || unVisibleNodes.has(link.target.id)) return false;
 
           return true; // Показуємо вузол, якщо не прихований і не згорнутий
         }}
         nodeVisibility={(node: NodeObject) => {
+          if (isRendering) return false; // Не показуємо вузол, якщо граф ще рендериться
           // Перевіряємо, чи вузол прихований
           if (hiddenNodes.has(node.id as string)) return false;
           // Перевіряємо, чи вузол згорнутий
-          if (collapsedNodes.has(node.id as string)) return false;
+          if (unVisibleNodes.has(node.id as string)) return false;
           return true; // Показуємо вузол, якщо не прихований і не згорнутий
         }}
       />

package/src/Graph2D/types.ts

@@ -1,4 +1,4 @@
-import { GraphData } from 'react-force-graph-2d';
+import { GraphData, NodeObject } from 'react-force-graph-2d';
 
 export interface Graph2DProps {
   graphData?: GraphData;
@@ -19,7 +19,9 @@ export interface Graph2DProps {
     gridSpacing: number;
     dotSize: number;
   };
-
-  onNodeClick?: (node: any) => void;
-  onLinkClick?: (link: any) => void;
+  onNodeClick?: (node: NodeObject) => void;
+  onLinkClick?: (link: NodeObject) => void;
+  onNodeHover?: (node: NodeObject | null) => void;
+  onLinkHover?: (link: NodeObject | null) => void;
+  onBackgroundClick?: () => void;
 }

package/src/Layouts/Container/Container.tsx

@@ -6,13 +6,19 @@ type ContainerProps = FabricComponent<{
   maxWidth?: string | number;
 }>;
 
-export const Container = ({ ...props }: ContainerProps) => {
-  return <StyledContainer {...props} />;
+type StyledContainerProps = {
+  $maxWidth?: string | number;
 };
 
-const StyledContainer = styled(createComponent<ContainerProps>('div'))`
-  padding-inline: ${pxToRem(20)};
-  width: 100%;
-  min-width: 0;
-  max-width: ${({ maxWidth }) => (typeof maxWidth === 'number' ? pxToRem(maxWidth) : maxWidth || '100%')};
-`;
+export const Container = ({ maxWidth, ...props }: ContainerProps) => {
+  return <StyledContainer {...props} $maxWidth={maxWidth} />;
+};
+
+const StyledContainer = styled(createComponent<StyledContainerProps>('div'))(({ theme, $maxWidth }) => {
+  return `
+    padding-inline: ${pxToRem(20, theme.baseSize)};
+    width: 100%;
+    min-width: 0;
+    max-width: ${typeof $maxWidth === 'number' ? pxToRem($maxWidth, theme.baseSize) : $maxWidth || '100%'};
+  `;
+});

package/src/Theme/theme.ts

@@ -10,6 +10,7 @@ import { Theme } from './types';
  */
 export const lightThemePx: Theme = {
   mode: 'light',
+  baseSize: 14, // Базовий розмір шрифту для конвертації px в rem
   // Секція кольорів з теми
   colors: {
     background: '#ffffff',
@@ -708,7 +709,5 @@ export const lightThemePx: Theme = {
 };
 
 // Конвертуємо всі розміри з px в rem
-export const lightTheme = convertPaletteToRem(lightThemePx) as DefaultTheme;
-export const darkTheme = convertPaletteToRem(lightThemePx) as DefaultTheme;
-
-console.log('Light theme:', lightTheme.contextMenu);
+export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;
+export const darkTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -59,6 +59,7 @@ export type InputSizeStyle = {
 // Тип для палітри
 export type Theme = {
   mode: 'light' | 'dark';
+  baseSize: number;
   colors: {
     background: string;
     primary: {

package/src/Theme/utils.ts

@@ -73,8 +73,9 @@ export const pxToRem = (pxValue: number | string, baseSize: number = 16): string
   return `${remValue}rem`;
 };
 
-const IGNORE_CONVERT_KEYS: Record<string, string[]> = {
+const IGNORE_CONVERT_KEYS: Record<string, string[] | boolean> = {
   contextMenu: ['padding'],
+  baseSize: true,
 };
 
 /**
@@ -107,7 +108,10 @@ export const convertPaletteToRem = (
         key.toLowerCase().includes(prop.toLowerCase())
       )
     ) {
-      if (!(parentKey && IGNORE_CONVERT_KEYS[parentKey]?.includes(key))) {
+      if (
+        !(parentKey && Array.isArray(IGNORE_CONVERT_KEYS[parentKey]) && IGNORE_CONVERT_KEYS[parentKey].includes(key)) &&
+        !IGNORE_CONVERT_KEYS[key]
+      ) {
         result[key] = pxToRem(value, baseSize);
       } else {
         result[key] = value; // Keep original value if it's in the ignore list

package/tsup.config.ts

@@ -19,8 +19,10 @@ export default defineConfig({
   platform: 'browser',
   skipNodeModulesBundle: true,
   esbuildOptions(options) {
-    options.drop = ['console', 'debugger'];
-    options.pure = ['console.log', 'console.info', 'console.debug', 'console.warn'];
+    if (process.env.NODE_ENV === 'development') {
+      options.drop = ['console', 'debugger'];
+      options.pure = ['console.log', 'console.info', 'console.debug', 'console.warn'];
+    }
   },
   shims: true,
   keepNames: true,