@cyber-harbour/ui 1.0.36 → 1.0.38

package/package.json

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

package/src/Core/Flex/FlexContainer.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, forwardRef } from 'react';
 import styled from 'styled-components';
 
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
@@ -22,20 +22,23 @@ export interface FlexContainerProps {
   as?: any; // TODO: fix type to styled component or intrinsic element
 }
 
-export const FlexContainer = ({
-  children,
-  direction = 'row',
-  wrap = 'nowrap',
-  justify = 'flex-start',
-  align = 'stretch',
-  alignContent,
-  gap,
-  rowGap,
-  columnGap,
-  className,
-  style,
-  as = 'div',
-}: FlexContainerProps) => {
+export const FlexContainer: any = forwardRef<HTMLElement, FlexContainerProps>(function FlexContainer(
+  {
+    children,
+    direction = 'row',
+    wrap = 'nowrap',
+    justify = 'flex-start',
+    align = 'stretch',
+    alignContent,
+    gap,
+    rowGap,
+    columnGap,
+    className,
+    style,
+    as = 'div',
+  },
+  ref
+) {
   return (
     <StyledFlexContainer
       as={as}
@@ -49,11 +52,12 @@ export const FlexContainer = ({
       $columnGap={columnGap}
       className={className}
       style={style}
+      ref={ref}
     >
       {children}
     </StyledFlexContainer>
   );
-};
+});
 
 interface StyledFlexContainerProps {
   $direction: FlexDirection;

package/src/Core/Sidebar/Sidebar.tsx

@@ -59,7 +59,7 @@ const StyledContainer = styled.aside<StyledProps>(
       width: 100%;
       height: 25dvh;
       transform: translateY(-100%);
-      background: ${theme.colors.background};
+      background: ${theme.sidebar.background};
       border-right: 1px solid ${theme.sidebar.border};
 
       width: ${theme.sidebar.width};

package/src/Core/Sidebar/SidebarItem.tsx

@@ -84,15 +84,15 @@ const StyledItem = styled.a<StyledProps>(
     cursor: pointer;
     text-decoration: none;
     border-radius: 8px;
-    color: ${theme.colors.text.light};
-    background: ${theme.colors.background};
+    color: ${theme.sidebar.text.default};
+    background: ${theme.sidebar.item.default.background};
     transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
     position: relative;
     ${
       $active
         ? `
-        background: ${theme.colors.primary.lighter};
-        color: ${theme.colors.primary.main};
+        background: ${theme.sidebar.item.active.background};
+        color: ${theme.sidebar.text.active};
        `
         : ''
     }
@@ -101,8 +101,8 @@ const StyledItem = styled.a<StyledProps>(
 
 
     &:hover {
-      background: ${theme.colors.primary.lightest};
-      color: ${theme.colors.primary.main};
+      background: ${theme.sidebar.item.hover.background};
+      color: ${theme.sidebar.text.hover};
     }
 
     &:before {
@@ -114,12 +114,12 @@ const StyledItem = styled.a<StyledProps>(
       width: 0px;
       border-top-right-radius: 5px;
       border-bottom-right-radius: 5px;
-      background: rgaba(0, 0, 0, 0);
+      background: rgba(0, 0, 0, 0);
       transition: background 0.4s ease-in-out, width 0.3s ease-in-out;
       ${
         $active
           ? `
-        background: ${theme.colors.primary.main};
+        background: ${theme.sidebar.text.active};
         width: 5px;
         `
           : ''

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, useLayoutEffect } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { forceCollide } from 'd3-force';
 import { styled, useTheme } from 'styled-components';
 import eyeLightIcon from './eye_light.png';
@@ -11,16 +11,16 @@ import GraphLoader from './GraphLoader';
 
 // Створюємо та налаштовуємо об'єкти зображень
 const imgEyeLightIcon = new Image();
-imgEyeLightIcon.src = eyeLightIcon;
+imgEyeLightIcon.src = eyeLightIcon.replace('./', '/');
 
 const imgEyeLightHoverIcon = new Image();
-imgEyeLightHoverIcon.src = eyeLightHoverIcon;
+imgEyeLightHoverIcon.src = eyeLightHoverIcon.replace('./', '/');
 
 const imgGroupLightIcon = new Image();
-imgGroupLightIcon.src = groupLightIcon;
+imgGroupLightIcon.src = groupLightIcon.replace('./', '/');
 
 const imgGroupLightHoverIcon = new Image();
-imgGroupLightHoverIcon.src = groupLightHoverIcon;
+imgGroupLightHoverIcon.src = groupLightHoverIcon.replace('./', '/');
 
 export const Graph2D = ({
   graphData,
@@ -274,9 +274,9 @@ export const Graph2D = ({
       const iconSize = buttonRadius * 0.3; // Розмір іконки відносно радіуса кнопки (зменшено вдвічі)
 
       // Вибір іконки в залежності від стану наведення для верхньої кнопки (сховати)
-      const groupIcon = hoverTopButton ? imgGroupLightHoverIcon : imgGroupLightIcon;
+      const groupIcon = hoverBottomButton ? imgGroupLightHoverIcon : imgGroupLightIcon;
       // Додаємо іконку ока для кнопки "згорнути дочірні вузли"
-      const eyeIcon = hoverBottomButton ? imgEyeLightHoverIcon : imgEyeLightIcon;
+      const eyeIcon = hoverTopButton ? imgEyeLightHoverIcon : imgEyeLightIcon;
 
       const renderEyeIcon = () => {
         try {
@@ -308,17 +308,17 @@ export const Graph2D = ({
         }
       };
       // Використовуємо безпосередньо зображення, якщо воно вже завантажене
-      if (eyeIcon.complete) {
+      if (groupIcon.complete) {
         // Розміщуємо іконку в центрі нижньої половини кнопки
 
         renderGroupIcon();
       } else {
         // Якщо зображення ще не завантажене, додаємо обробник завершення завантаження
-        eyeIcon.onload = () => {
+        groupIcon.onload = () => {
           renderGroupIcon();
         };
 
-        eyeIcon.onerror = () => {
+        groupIcon.onerror = () => {
           console.warn('Error loading eye icon image');
         };
       }
@@ -560,7 +560,7 @@ export const Graph2D = ({
   };
 
   const renderGrid = (ctx: CanvasRenderingContext2D, globalScale: number) => {
-    if (isRendering) return; // Не малюємо сітку під час рендерингу
+    if (isRendering || loading) return; // Не малюємо сітку під час рендерингу
     // This will be called before each rendering frame
     ctx.getTransform();
     ctx.save();

package/src/Graph2D/GraphLoader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ContentLoader from 'react-content-loader';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 const LoaderWrapper = styled.div`
   position: absolute;
@@ -21,29 +21,17 @@ interface GraphLoaderProps {
 
 const GraphLoader: React.FC<GraphLoaderProps> = ({ width = 280, height = 280 }) => {
   // Helper function to create a rect from line coordinates
-  const lineToRect = (x1: number, y1: number, x2: number, y2: number, thickness: number = 1) => {
-    // Calculate length and angle of the line
-    const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-    const angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI;
-
-    // Calculate center point of the line
-    const centerX = (x1 + x2) / 2;
-    const centerY = (y1 + y2) / 2;
-
-    return (
-      <rect
-        x={centerX - length / 2}
-        y={centerY - thickness / 2}
-        width={length}
-        height={thickness}
-        transform={`rotate(${angle}, ${centerX}, ${centerY})`}
-      />
-    );
-  };
+  const theme = useTheme();
 
   return (
     <LoaderWrapper>
-      <ContentLoader width={width} height={height} viewBox="0 0 280 280">
+      <ContentLoader
+        foregroundColor={theme.contentLoader.foreground}
+        backgroundColor={theme.contentLoader.background}
+        width={width}
+        height={height}
+        viewBox="0 0 280 280"
+      >
         <path d="m55 38-0.97266 0.22852 7.0801 30.092-18.355-20.979-0.75195 0.6582 19.596 22.395 0.43164 1.834 0.97266-0.22852 0.75195-0.6582-0.37695-0.42969 9.625-27.912-0.94531-0.32617-9.4375 27.371-0.10547-0.12109zm8 34-0.78516 0.61914 0.0957 0.12305-12.311 13.258 0.73242 0.67969 12.205-13.145 14.277 18.084 0.78516-0.61914-14.373-18.207 0.10547-0.11328zm15 19-0.48438 0.875 46.992 25.996 8e-3 4e-3 20.506 11.592-28.182 4.5449 0.15998 0.98819 29.418-4.7441 0.25 0.14062-12.555 24.143 0.88672 0.46094 13-25 15 25 26 30v18l-11 18 0.85352 0.52148 9.8008-16.039-4.6543 33.518 0.99023 0.13867 4.7793-34.408 7.2305 16.27 0.91406-0.40625-7.9141-17.807v-17.104l18 12.316 0.56445-0.82617-18.896-12.928-25.855-29.836-14.633-24.387 0.01562-0.02344h23.805v-1h-23.152l13.848-21.234 55.201-28.791-0.45898-0.88476 0.77734 0.62305 11.402-14.25 16.668-11.842-0.58008-0.81641-16.785 11.928-11.486 14.355-55.434 28.912-14.277 21.893-7.7617-27.166-0.96094 0.27344 7.7227 27.031-1.1191 0.17969-21.604-12.211zm140.43-12.912-6.957-17.338-0.92773 0.37305 6.957 17.338zm-6.957-17.338 0.72266 0.69336 16.232-16.896-0.7207-0.69336zm-3.4766 137.25 5 15 0.94922-0.31641-5-15zm-91-63-0.48047-0.87695-31 17 0.48047 0.87695zm-31 17 5 18 0.96289-0.26758-5-18zm0 0-0.70703-0.70703-12.898 12.898-17.881 9.9336 0.48633 0.875 18-10zm5 18-0.64062-0.76758-18 15 0.64062 0.76758z" />
         <circle cx="229.92" cy="63.7318" r="5" transform="rotate(173.661 229.92 63.7318)" />
         <circle cx="227.711" cy="43.8541" r="5" transform="rotate(173.661 227.711 43.8541)" />

package/src/Theme/GlobalStyle.tsx

@@ -1,6 +1,7 @@
 import { createGlobalStyle } from 'styled-components';
 
-export const GlobalStyle = createGlobalStyle`
+export const GlobalStyle = createGlobalStyle(
+  ({ theme }) => `
   *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
@@ -8,5 +9,10 @@ export const GlobalStyle = createGlobalStyle`
   }
 
   body, html {
-  font-size: 14px;}
-`;
+    background: ${theme.colors.backgroundBase};
+    color: ${theme.colors.text.main};
+    font-family: ${theme.typography.fontFamily};
+    font-size: ${theme.baseSize}px;
+  }
+`
+);