@cyber-harbour/ui 1.0.35 → 1.0.37

package/package.json

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

package/src/Core/Header/Header.tsx

@@ -20,7 +20,7 @@ const StyledContainer = styled.header(
     padding-right: 20px;
     height: 56px;
     background-color: ${theme.colors.background};
-    border-bottom: 1px solid ${theme.colors.stroke.main};
+    border-bottom: 1px solid ${theme.colors.stroke.light};
 
     &:before {
       content: '';

package/src/Core/Sidebar/Sidebar.tsx

@@ -40,8 +40,8 @@ const StyledContainer = styled.aside<StyledProps>(
     width: ${theme.sidebar.width};
     padding: 12px;
     height: 100%;
-    border-right: 1px solid ${theme.colors.stroke.light};
-    background: ${theme.colors.background};
+    border-right: 1px solid ${theme.sidebar.border};
+    background: ${theme.sidebar.background};
     ${
       $collapsed
         ? `
@@ -59,8 +59,8 @@ const StyledContainer = styled.aside<StyledProps>(
       width: 100%;
       height: 25dvh;
       transform: translateY(-100%);
-      background: ${theme.colors.background};
-      border-right: 1px solid ${theme.colors.stroke.light};
+      background: ${theme.sidebar.background};
+      border-right: 1px solid ${theme.sidebar.border};
 
       width: ${theme.sidebar.width};
       ${

package/src/Core/Sidebar/SidebarDelimeter.tsx

@@ -16,7 +16,7 @@ const StyledDelimeter = styled.div<StyledProps>(
         min-width: 32px;
         width: 0;
 
-        border-bottom: 1px dashed ${theme.colors.stroke.main};
+        border-bottom: 1px dashed ${theme.sidebar.delimeter.color};
         margin-block: 8px;
         margin-left: 4px;
 

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

@@ -2,7 +2,7 @@ import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from 'react-f
 import { Graph2DProps } from './types';
 import { useEffect, useRef, useState, useCallback, useLayoutEffect } from 'react';
 import { forceCollide } from 'd3-force';
-import { styled } from 'styled-components';
+import { styled, useTheme } from 'styled-components';
 import eyeLightIcon from './eye_light.png';
 import eyeLightHoverIcon from './eye_light_hover.png';
 import groupLightIcon from './group_light.png';
@@ -44,6 +44,8 @@ export const Graph2D = ({
   onLinkClick,
   onBackgroundClick,
 }: Graph2DProps) => {
+  const theme = useTheme();
+
   // Стан для підсвічування вузлів і зв'язків
   const [highlightNodes, setHighlightNodes] = useState(new Set());
   const [highlightLinks, setHighlightLinks] = useState(new Set());
@@ -227,7 +229,7 @@ export const Graph2D = ({
       // Малюємо кільце навколо вузла
       ctx.beginPath();
       ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI, false);
-      ctx.fillStyle = 'rgba(255, 165, 0, 0.3)';
+      ctx.fillStyle = theme.graph2D.ring.highlightFill;
       ctx.fill();
     },
     [config]
@@ -246,9 +248,9 @@ export const Graph2D = ({
       ctx.beginPath();
       ctx.arc(x, y, buttonRadius, Math.PI, Math.PI * 2, false);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = '#e5e5e5';
+      ctx.strokeStyle = theme.graph2D.button.stroke;
       ctx.stroke();
-      ctx.fillStyle = hoverTopButton ? 'rgba(230, 230, 230, 0.9)' : 'rgba(255, 255, 255, 0.8)';
+      ctx.fillStyle = hoverTopButton ? theme.graph2D.button.hoverFill : theme.graph2D.button.normalFill;
       ctx.fill();
 
       // Лінія розділення між кнопками
@@ -256,16 +258,16 @@ export const Graph2D = ({
       ctx.moveTo(x - buttonRadius, y);
       ctx.lineTo(x + buttonRadius, y);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = '#e5e5e5';
+      ctx.strokeStyle = theme.graph2D.button.stroke;
       ctx.stroke();
 
       // Кнопка "згорнути" (нижня частина кільця)
       ctx.beginPath();
       ctx.arc(x, y, buttonRadius, Math.PI * 2, Math.PI, false);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = '#e5e5e5';
+      ctx.strokeStyle = theme.graph2D.button.stroke;
       ctx.stroke();
-      ctx.fillStyle = hoverBottomButton ? 'rgba(230, 230, 230, 0.9)' : 'rgba(255, 255, 255, 0.8)';
+      ctx.fillStyle = hoverBottomButton ? theme.graph2D.button.hoverFill : theme.graph2D.button.normalFill;
       ctx.fill();
 
       // Додаємо іконку хрестика для кнопки "сховати вузол"
@@ -571,7 +573,7 @@ export const Graph2D = ({
     const gridSpacing = config.gridSpacing;
     const dotSize = config.dotSize;
 
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillStyle = theme.graph2D.grid.dotColor;
 
     for (let x = 0; x < width; x += gridSpacing) {
       for (let y = 0; y < height; y += gridSpacing) {
@@ -690,7 +692,7 @@ export const Graph2D = ({
     };
 
     // Малюємо лінію зв'язку з урахуванням місця для тексту, якщо він є
-    const lineColor = highlightLinks.has(link) ? '#ff9900' : '#999';
+    const lineColor = highlightLinks.has(link) ? theme.graph2D.link.highlighted : theme.graph2D.link.normal;
     const lineWidth = highlightLinks.has(link) ? 1.5 : 0.5;
 
     if (label) {
@@ -763,7 +765,7 @@ export const Graph2D = ({
     ctx.lineTo(-arrowHeadLength, -arrowHeadWidth);
     ctx.closePath();
 
-    ctx.fillStyle = highlightLinks.has(link) ? '#ff9900' : '#999';
+    ctx.fillStyle = highlightLinks.has(link) ? theme.graph2D.link.highlighted : theme.graph2D.link.normal;
     ctx.fill();
     ctx.restore();
 
@@ -777,7 +779,7 @@ export const Graph2D = ({
     // Використовуємо реверсивне масштабування для тексту
     const scaledFontSize = calculateFontSize(globalScale);
     ctx.font = `${scaledFontSize}px Sans-Serif`;
-    ctx.fillStyle = '#666'; // Колір тексту
+    ctx.fillStyle = theme.graph2D.link.textColor; // Колір тексту
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
 
@@ -797,7 +799,9 @@ export const Graph2D = ({
     // Рисуємо фон для тексту для кращої читаємості
     const textWidth = ctx.measureText(label).width;
     const padding = 2;
-    ctx.fillStyle = highlightLinks.has(link) ? 'rgba(255, 230, 204, 0.9)' : 'rgba(255, 255, 255, 0.8)';
+    ctx.fillStyle = highlightLinks.has(link)
+      ? theme.graph2D.link.highlightedTextBgColor
+      : theme.graph2D.link.textBgColor;
     ctx.fillRect(
       -textWidth / 2 - padding,
       -scaledFontSize / 2 - padding,
@@ -806,7 +810,7 @@ export const Graph2D = ({
     );
 
     // Малюємо текст
-    ctx.fillStyle = highlightLinks.has(link) ? '#663300' : '#666';
+    ctx.fillStyle = highlightLinks.has(link) ? theme.graph2D.link.highlightedTextColor : theme.graph2D.link.textColor;
     ctx.fillText(label, 0, 0);
 
     // Відновлення стану контексту
@@ -945,7 +949,9 @@ export const Graph2D = ({
         d3AlphaDecay={0.038}
         // Виділення зв'язків при наведенні
         linkWidth={(link: any) => (highlightLinks.has(link) ? 3 : 1)}
-        linkColor={(link: any) => (highlightLinks.has(link) ? '#ff9900' : '#999')}
+        linkColor={(link: any) =>
+          highlightLinks.has(link) ? theme.graph2D.link.highlighted : theme.graph2D.link.normal
+        }
         onRenderFramePre={renderGrid}
         nodePointerAreaPaint={renderNodePointerAreaPaint}
         nodeCanvasObject={renderNodeCanvasObject}

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/Layouts/PageLayout/PageLayout.tsx

@@ -54,6 +54,9 @@ export const StyledContainer = styled.div<StyledContainerProps>(
 `
 );
 
-const StyledMain = styled.main`
-  min-width: 0;
-`;
+const StyledMain = styled.main(
+  ({ theme }) => `
+    min-width: 0;
+    background: ${theme.colors.backgroundBase};
+  `
+);

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;
+  }
+`
+);

package/src/Theme/ThemeProvider.tsx

@@ -1,11 +1,17 @@
 import { StyleSheetManager, ThemeProvider as ThemeProviderStyled, WebTarget } from 'styled-components';
-import { lightTheme } from './theme';
+import { lightTheme, darkTheme } from './themes';
 import { GlobalStyle } from './GlobalStyle';
 
-export const ThemeProvider = ({ children }: { children: any }) => {
+interface ThemeProviderProps {
+  children: any;
+  mode?: 'light' | 'LIGHT' | 'dark' | 'DARK';
+}
+
+export type ThemeMode = 'light' | 'LIGHT' | 'dark' | 'DARK';
+export const ThemeProvider = ({ children, mode }: ThemeProviderProps) => {
   return (
     <StyleSheetManager shouldForwardProp={shouldForwardProp}>
-      <ThemeProviderStyled theme={lightTheme}>
+      <ThemeProviderStyled theme={mode == 'light' || mode === 'LIGHT' ? lightTheme : darkTheme}>
         <GlobalStyle />
         {children}
       </ThemeProviderStyled>

package/src/Theme/index.ts

@@ -2,5 +2,5 @@ export * from './GlobalStyle';
 export * from './ThemeProvider';
 export * from './utils';
 export * from './types';
-export * from './theme';
+export * from './themes';
 export * from './componentFabric';

package/src/Theme/themes/config.ts

@@ -0,0 +1,41 @@
+// Індексні шари (z-index) для різних компонентів
+export const zIndex = {
+  dropdown: 1000,
+  sticky: 1020,
+  fixed: 1030,
+  backdrop: 1040,
+  modal: 1050,
+  popover: 1060,
+  tooltip: 1070,
+};
+
+// Розміри брейкпоінтів
+export const breakpoints = {
+  xs: 320,
+  s: 576,
+  m: 768,
+  l: 992,
+  xl: 1200,
+};
+
+// Типографія
+export const typography = {
+  fontFamily:
+    'Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;',
+  lineHeight: 1.49,
+  // Розміри текстових елементів
+  variants: {
+    h1: {
+      fontSize: 22,
+    },
+    h2: {
+      fontSize: 16,
+    },
+    h3: {
+      fontSize: 14,
+    },
+    body: {
+      fontSize: 12,
+    },
+  },
+};