@cyber-harbour/ui 1.0.19 → 1.0.21

package/src/Graph2D/types.ts

@@ -0,0 +1,22 @@
+import { GraphData } from 'react-force-graph-2d';
+
+export interface Graph2DProps {
+  graphData?: GraphData;
+  linkSource?: string;
+  linkTarget?: string;
+
+  // Container layout
+  width?: number;
+  height?: number;
+
+  //custom node rendering
+  config?: {
+    nodeSizeFactor: number;
+    fontSize: number;
+    nodeSizeBase: number;
+    textPaddingFactor: number;
+  };
+
+  onNodeClick?: (node: any) => void;
+  onLinkClick?: (link: any) => void;
+}

package/src/Layouts/PageLayout/PageLayout.tsx

@@ -12,7 +12,7 @@ export const PageLayout = ({ children, header, sidebar }: PageLayoutProps) => {
     <StyledContainer $withHeader={!!header} $withSidebar={!!sidebar}>
       {header}
       {sidebar}
-      <main>{children}</main>
+      <StyledMain>{children}</StyledMain>
     </StyledContainer>
   );
 };
@@ -53,3 +53,7 @@ export const StyledContainer = styled.div<StyledContainerProps>(
   }
 `
 );
+
+const StyledMain = styled.main`
+  min-width: 0;
+`;

package/src/Theme/GlobalStyle.tsx

@@ -6,4 +6,7 @@ export const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
   }
+
+  body, html {
+  font-size: 14px;}
 `;

package/src/Theme/theme.ts

@@ -476,8 +476,79 @@ export const lightThemePx: Theme = {
       margin: '8px 0',
     },
   },
+  contextMenu: {
+    button: {
+      default: {
+        background: 'transparent',
+        text: '#101010',
+        border: ' #EBEBEB',
+        boxShadow: 'none',
+      },
+      hover: {
+        background: 'transparent',
+        text: '#0042EC',
+        border: ' #EBEBEB',
+        boxShadow: 'none',
+      },
+      active: {
+        background: 'transparent',
+        text: '#0042EC',
+        border: ' #EBEBEB',
+        boxShadow: 'none',
+      },
+      disabled: {
+        background: '#FAFAFA',
+        text: '#99989C',
+        border: ' #EBEBEB',
+        boxShadow: 'none',
+      },
+    },
+    delimeter: {
+      color: '#EBEBEB',
+      thickness: 1,
+      marginInline: 12,
+      marginBlock: 3,
+      style: 'solid',
+    },
+    shadow: '0px 4px 16px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)',
+    padding: 5,
+    icon: {
+      size: 7,
+    },
+  },
+  // Компонент Select
+  select: {
+    item: {
+      default: {
+        background: 'transparent',
+        text: '#101010',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      hover: {
+        background: '#E5ECFD',
+        text: '#101010',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      active: {
+        background: '#E8EAEE',
+        text: '#101010',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      disabled: {
+        background: '#FAFAFA',
+        text: '#99989C',
+        border: ' none',
+        boxShadow: 'none',
+      },
+    },
+  },
 };
 
 // Конвертуємо всі розміри з px в rem
 export const lightTheme = convertPaletteToRem(lightThemePx) as DefaultTheme;
 export const darkTheme = convertPaletteToRem(lightThemePx) as DefaultTheme;
+
+console.log('Light theme:', lightTheme.contextMenu);

package/src/Theme/types.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'styled-components';
+
 // Типи для компонентної палітри
 export type ButtonVariant = 'fill' | 'outlined' | 'empty';
 export type ButtonColor = 'default' | 'primary' | 'secondary' | 'error';
@@ -129,6 +131,26 @@ export type Theme = {
       margin: string;
     };
   };
+  //ContextMenu
+  contextMenu: {
+    button: Record<ButtonState, ButtonElementStyle>;
+    padding: number;
+    delimeter: {
+      style: CSSProperties['borderStyle'];
+      color: string;
+      thickness: number;
+      marginInline: number | string;
+      marginBlock: number | string;
+    };
+    shadow: string;
+    icon: {
+      size: number | string;
+    };
+  };
+  //Select
+  select: {
+    item: Record<ButtonState, ButtonElementStyle>;
+  };
 };
 
 //TODO check and refactoring

package/src/Theme/utils.ts

@@ -64,6 +64,10 @@ export const pxToRem = (pxValue: number | string, baseSize: number = 16): string
   return `${remValue}rem`;
 };
 
+const IGNORE_CONVERT_KEYS: Record<string, string[]> = {
+  contextMenu: ['padding'],
+};
+
 /**
  * Recursively converts all pixel values in an object to rem units
  *
@@ -71,13 +75,17 @@ export const pxToRem = (pxValue: number | string, baseSize: number = 16): string
  * @param baseSize - Base font size in pixels. Default is 16px
  * @returns A new object with pixel values converted to rem
  */
-export const convertPaletteToRem = (obj: Record<string, any>, baseSize: number = 14): Record<string, any> => {
+export const convertPaletteToRem = (
+  obj: Record<string, any>,
+  baseSize: number = 14,
+  parentKey?: string
+): Record<string, any> => {
   const result: Record<string, any> = {};
 
   Object.entries(obj).forEach(([key, value]) => {
     // If the value is an object and not null, recursively convert its properties
     if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
-      result[key] = convertPaletteToRem(value, baseSize);
+      result[key] = convertPaletteToRem(value, baseSize, key);
     }
     // If value is a string and contains 'px', convert it to rem
     else if (typeof value === 'string' && value.includes('px')) {
@@ -90,7 +98,11 @@ export const convertPaletteToRem = (obj: Record<string, any>, baseSize: number =
         key.toLowerCase().includes(prop.toLowerCase())
       )
     ) {
-      result[key] = pxToRem(value, baseSize);
+      if (!(parentKey && IGNORE_CONVERT_KEYS[parentKey]?.includes(key))) {
+        result[key] = pxToRem(value, baseSize);
+      } else {
+        result[key] = value; // Keep original value if it's in the ignore list
+      }
     }
     // Keep other values unchanged
     else {

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './Core';
 export * from './Layouts';
 export * from './Theme';
+export * from './Graph2D';