@cyber-harbour/ui 1.0.18 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -27,6 +27,8 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "react-force-graph-2d": "^1.27.1",
+    "react-tiny-popover": "^8.1.6",
     "styled-components": "^6.1.18"
   },
   "devDependencies": {

package/src/Core/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,122 @@
+import { ButtonSize, getButtonSizeStyles } from '../../Theme';
+import { useRef } from 'react';
+import { Popover, PopoverAlign, PopoverPosition } from 'react-tiny-popover';
+import { styled, useTheme } from 'styled-components';
+import { ChevronDownIcon, ChevronUpIcon } from '../IconComponents';
+
+interface ContextMenuProps {
+  isOpen: boolean;
+  onClick: () => void;
+  onClickOutside: (e: MouseEvent) => void;
+  size?: ButtonSize;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  className?: string;
+  children?: any;
+  anchor?: any;
+  positions?: PopoverPosition[] | PopoverPosition;
+  align?: PopoverAlign;
+}
+
+export const ContextMenu = ({
+  isOpen,
+  onClickOutside,
+  onClick,
+  anchor,
+  size = 'medium',
+  disabled,
+  fullWidth,
+  className,
+  positions = ['bottom'],
+  align = 'start',
+  children,
+}: ContextMenuProps) => {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  const theme = useTheme();
+
+  return (
+    <Popover
+      padding={theme.contextMenu.padding}
+      isOpen={isOpen}
+      positions={positions}
+      align={align}
+      onClickOutside={onClickOutside}
+      content={children}
+    >
+      <StyledButton
+        ref={buttonRef}
+        onClick={onClick}
+        $disabled={disabled}
+        $fullWidth={fullWidth}
+        $size={size}
+        className={className}
+      >
+        <div>{anchor}</div>
+        {isOpen ? (
+          <ChevronUpIcon width={theme.contextMenu.icon.size} height={theme.contextMenu.icon.size} />
+        ) : (
+          <ChevronDownIcon width={theme.contextMenu.icon.size} height={theme.contextMenu.icon.size} />
+        )}
+      </StyledButton>
+    </Popover>
+  );
+};
+
+// Створюємо стилізований компонент, що використовує уніфіковану палітру
+const StyledButton = styled.button<{
+  $size: ButtonSize;
+  $disabled?: boolean;
+  $fullWidth?: boolean;
+}>`
+  ${({ $size, $disabled, $fullWidth, theme }) => {
+    const sizes = getButtonSizeStyles(theme, $size);
+    return `
+        background: ${theme.contextMenu.button.default.background};
+        color: ${theme.contextMenu.button.default.text};
+        border-color: ${theme.contextMenu.button.default.border};
+        box-shadow: ${theme.contextMenu.button.default.boxShadow};
+        font-size: ${sizes.fontSize};
+        gap: ${sizes.gap};
+        padding-block: ${sizes.paddingBlock};
+        padding-inline: ${sizes.paddingInline};
+        border-radius: ${sizes.borderRadius};
+        border-width: ${sizes.borderWidth};
+        border-style: solid;
+        width: ${$fullWidth ? '100%' : 'auto'};
+        cursor: ${$disabled ? 'not-allowed' : 'pointer'};
+        font-weight: 500;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+        transition: all 0.2s ease;
+        outline: none;
+        flex-direction: row;
+
+        &:hover {
+          background: ${theme.contextMenu.button.hover.background};
+          color: ${theme.contextMenu.button.hover.text};
+          border-color: ${theme.contextMenu.button.hover.border};
+          box-shadow: ${theme.contextMenu.button.hover.boxShadow};
+        }
+
+        &:active {
+          background: ${theme.contextMenu.button.active.background};
+          color: ${theme.contextMenu.button.active.text};
+          border-color: ${theme.contextMenu.button.active.border};
+          box-shadow: ${theme.contextMenu.button.active.boxShadow};
+        }
+
+        &:disabled {
+          background: ${theme.contextMenu.button.disabled.background};
+          color: ${theme.contextMenu.button.disabled.text};
+          border-color: ${theme.contextMenu.button.disabled.border};
+          box-shadow: ${theme.contextMenu.button.disabled.boxShadow};
+        }
+
+    `;
+  }}
+`;
+
+const StyledContainer = styled.div``;

package/src/Core/ContextMenu/ContextMenuDelimiter.tsx

@@ -0,0 +1,13 @@
+import { styled } from 'styled-components';
+
+interface StyledProps {}
+
+export const ContextMenuDelimiter = styled.div<StyledProps>(
+  ({ theme }) => `
+    margin-inline: ${theme.contextMenu.delimeter.marginInline};
+    margin-block: ${theme.contextMenu.delimeter.marginBlock};
+    border-top-width: ${theme.contextMenu.delimeter.thickness};
+    border-top-style: ${theme.contextMenu.delimeter.style};
+    border-top-color: ${theme.contextMenu.delimeter.color};
+  `
+);

package/src/Core/ContextMenu/index.ts

@@ -0,0 +1,3 @@
+export * from './ContextMenu';
+export * from './ContextMenuDelimiter';
+export * from './useContextMenuControl';

package/src/Core/ContextMenu/useContextMenuControl.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+export const useContextMenuControl = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsOpen((prev) => !prev);
+  };
+  const closeMenu = () => {
+    setIsOpen(false);
+  };
+  const openMenu = () => {
+    setIsOpen(true);
+  };
+  return {
+    isOpen,
+    toggleMenu,
+    closeMenu,
+    openMenu,
+  };
+};

package/src/Core/IconComponents/BallsMenu.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from 'react';
+
+interface InfoCircleIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const BallsMenu = ({ fill = 'currentColor', ...props }: InfoCircleIconProps) => {
+  return (
+    <svg viewBox="0 0 16 3" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <ellipse cx="1.56746" cy="1.5" rx="1.53633" ry="1.5" fill={fill} />
+      <ellipse cx="7.71278" cy="1.5" rx="1.53633" ry="1.5" fill={fill} />
+      <ellipse cx="13.8581" cy="1.5" rx="1.53633" ry="1.5" fill={fill} />
+    </svg>
+  );
+};

package/src/Core/IconComponents/Check.tsx

@@ -0,0 +1,13 @@
+import { SVGProps } from 'react';
+
+interface InfoCircleIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const CheckIcon = ({ fill = 'currentColor', ...props }: InfoCircleIconProps) => {
+  return (
+    <svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M14.4983 1L5.34428 11L1.18338 6.45455" stroke={fill} stroke-width="1.5" stroke-linejoin="round" />;
+    </svg>
+  );
+};

package/src/Core/IconComponents/ChevronDown.tsx

@@ -0,0 +1,18 @@
+import { SVGProps } from 'react';
+
+interface ChevronRightIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const ChevronDownIcon = ({ fill = 'currentColor', ...props }: ChevronRightIconProps) => {
+  return (
+    <svg viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.4517 5.77798L16.4067 6.79197L10.8447 12.1899C10.0753 12.9367 8.82791 12.9367 8.05853 12.1899L2.49647 6.79197L1.45166 5.77798L3.54128 3.75L4.58609 4.76399L9.45161 9.48599L14.3172 4.76399L15.362 3.75L17.4517 5.77798Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/ChevronUp.tsx

@@ -0,0 +1,18 @@
+import { SVGProps } from 'react';
+
+interface ChevronRightIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const ChevronUpIcon = ({ fill = 'currentColor', ...props }: ChevronRightIconProps) => {
+  return (
+    <svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0.20166 10.722L1.24661 9.70803L6.80863 4.31012C7.57801 3.56329 8.82541 3.56329 9.59479 4.31012L15.1569 9.70803L16.2017 10.722L14.112 12.75L13.0672 11.736L8.20171 7.01401L3.33611 11.736L2.29136 12.75L0.20166 10.722Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -32,3 +32,7 @@ export { StatisticIcon } from './StatisticIcon';
 export { SunIcon } from './SunIcon';
 export { UpRightArrowCircleIcon } from './UpRightArrowCircleIcon';
 export { VectorIcon } from './VectorIcon';
+export { BallsMenu } from './BallsMenu';
+export { CheckIcon } from './Check';
+export { ChevronDownIcon } from './ChevronDown';
+export { ChevronUpIcon } from './ChevronUp';

package/src/Core/ListMenu/ListMenuSection.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { styled } from 'styled-components';
 
 export interface ListMenuSectionProps {
-  items: ReactNode | ReactNode[];
+  items: any;
   title?: string;
 }
 export const ListMenuSection = ({ title, items }: ListMenuSectionProps) => {

package/src/Core/Pagination/Pagination.tsx

@@ -16,7 +16,7 @@ const VISIBLE_GROUPE = 5;
 const STEP = 1;
 const ELLIPSIS = '...';
 
-export const Pagination: FC<PaginationProps> = ({ total_items, limit, offset, onChangePage }) => {
+export const Pagination = ({ total_items, limit, offset, onChangePage }: PaginationProps) => {
   const currentPage = useMemo(() => (offset ? offset / limit + 1 : 1), [limit, offset]);
   const pages = Math.ceil(total_items / limit);
   const paginationItems: (number | string)[] = useMemo(() => {

package/src/Core/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useMemo, CSSProperties } from 'react';
+import { ReactNode, useMemo, CSSProperties } from 'react';
 import { styled } from 'styled-components';
 import { Row } from './Row';
 import { Cell, HeadCell } from './Cell';
@@ -24,12 +24,12 @@ export type RenderHeaderCellProps<T = string> = {
 interface TableProps {
   columns: ColumnTable[];
   rowCount: number;
-  renderCell: (props: RenderCellProps<any>) => ReactNode;
-  renderHeaderCell: (props: RenderHeaderCellProps<any>) => ReactNode;
+  renderCell: (props: RenderCellProps<any>) => any;
+  renderHeaderCell: (props: RenderHeaderCellProps<any>) => any;
   rowIds?: string[];
 }
 
-export const Table: FC<TableProps> = ({ columns, rowCount, renderCell, renderHeaderCell, rowIds }) => {
+export const Table = ({ columns, rowCount, renderCell, renderHeaderCell, rowIds }: TableProps) => {
   const cellCount = columns.length;
 
   const data = useMemo(() => {
@@ -49,7 +49,7 @@ export const Table: FC<TableProps> = ({ columns, rowCount, renderCell, renderHea
 
   return (
     <StyledTable>
-      <thead>
+      <StyledHead>
         <Row>
           {columns.map(({ id, title, width }) => (
             <HeadCell
@@ -62,7 +62,7 @@ export const Table: FC<TableProps> = ({ columns, rowCount, renderCell, renderHea
             </HeadCell>
           ))}
         </Row>
-      </thead>
+      </StyledHead>
       <tbody>
         {data.map((cells, rowIndex) => (
           <Row key={`row-${rowIndex}`} id={rowIds ? rowIds[rowIndex] : `row-${rowIndex}`}>
@@ -83,3 +83,12 @@ const StyledTable = styled.table`
   border-spacing: 0;
   table-layout: fixed;
 `;
+
+const StyledHead = styled.thead(
+  ({ theme }) => `
+  background-color: ${theme.colors.background};
+  position: sticky;
+  top: 0;
+  z-index: 1;
+`
+);

package/src/Core/index.ts

@@ -6,3 +6,4 @@ export * from './ListMenu';
 export * from './Header';
 export * from './Table';
 export * from './Pagination';
+export * from './ContextMenu';

package/src/Graph2D/Graph2D.tsx

@@ -0,0 +1,186 @@
+import ForceGraph2D, { ForceGraphMethods } from 'react-force-graph-2d';
+import { Graph2DProps } from './types';
+import { useEffect, useRef, MutableRefObject } from 'react';
+
+export const Graph2D = ({
+  graphData,
+  width,
+  height,
+  linkTarget,
+  linkSource,
+  config = {
+    nodeSizeFactor: 2, // Множник для розміру вузла
+    fontSize: 14, // Базовий розмір шрифту
+    nodeSizeBase: 5, // Базовий розмір вузла (перед застосуванням множника)
+    textPaddingFactor: 0.95, // Скільки разів текст може бути ширший за розмір вузла
+  },
+  onNodeClick,
+  onLinkClick,
+}: Graph2DProps) => {
+  // Максимальний рівень зуму
+  const MAX_ZOOM = 4;
+  // Максимальний розмір шрифту при максимальному зумі
+  const MAX_FONT_SIZE = 8;
+
+  // Функція для реверсивного масштабування тексту
+  // При максимальному зумі текст має розмір MAX_FONT_SIZE
+  // При зменшенні зуму текст також зменшується
+  const calculateFontSize = (scale: number): number => {
+    // Обмежуємо масштаб до MAX_ZOOM
+    const limitedScale = Math.min(scale, MAX_ZOOM);
+
+    // Обчислюємо коефіцієнт масштабування: при максимальному зумі = 1, при мінімальному - менше
+    const fontSizeRatio = limitedScale / MAX_ZOOM;
+
+    // Розраховуємо розмір шрифту в діапазоні від (MAX_FONT_SIZE / MAX_ZOOM) до MAX_FONT_SIZE
+    return Math.max(MAX_FONT_SIZE * fontSizeRatio, MAX_FONT_SIZE / MAX_ZOOM);
+  };
+
+  const fgRef = useRef<ForceGraphMethods>(null) as MutableRefObject<ForceGraphMethods | undefined>;
+
+  useEffect(() => {
+    fgRef.current?.d3Force('link')?.distance(() => {
+      return 100; // Set a constant distance of 100 for all links
+      // Or use a function for dynamic distance based on link properties:
+      // return link.value * 50;
+    });
+  }, [graphData]);
+
+  return (
+    <ForceGraph2D
+      ref={fgRef}
+      width={width}
+      height={height}
+      graphData={graphData}
+      linkTarget={linkTarget}
+      linkSource={linkSource}
+      onNodeClick={onNodeClick}
+      onLinkClick={onLinkClick}
+      nodeLabel={(node: any) => `${node.label}`} // Показуємо повний текст у тултіпі
+      linkLabel={(link: any) => link.label}
+      nodeAutoColorBy="label"
+      linkDirectionalArrowLength={3.5}
+      linkDirectionalArrowRelPos={1}
+      linkCurvature={0}
+      // Обмеження максимального зуму
+      maxZoom={MAX_ZOOM}
+      linkCanvasObjectMode={() => 'after'}
+      linkCanvasObject={(link: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
+        // Отримуємо позиції початку і кінця зв'язку
+        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 middleX = start.x + (end.x - start.x) / 2;
+        const middleY = start.y + (end.y - start.y) / 2;
+
+        // Використовуємо реверсивне масштабування для тексту
+        const scaledFontSize = calculateFontSize(globalScale);
+        ctx.font = `${scaledFontSize}px Sans-Serif`;
+        ctx.fillStyle = '#666'; // Колір тексту
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+
+        // Визначення кута нахилу лінії для повороту тексту
+        const angle = Math.atan2(end.y - start.y, end.x - start.x);
+
+        // Збереження поточного стану контексту
+        ctx.save();
+
+        // Переміщення до центру лінії та поворот тексту
+        ctx.translate(middleX, middleY);
+
+        // Якщо кут близький до вертикального або перевернутий, коригуємо його
+        if (Math.abs(angle) > Math.PI / 2) {
+          ctx.rotate(angle + Math.PI);
+          ctx.textAlign = 'center';
+        } else {
+          ctx.rotate(angle);
+          ctx.textAlign = 'center';
+        }
+
+        // Рисуємо фон для тексту для кращої читаємості
+        const textWidth = ctx.measureText(label).width;
+        const padding = 2;
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+        ctx.fillRect(
+          -textWidth / 2 - padding,
+          -scaledFontSize / 2 - padding,
+          textWidth + padding * 2,
+          scaledFontSize + padding * 2
+        );
+
+        // Малюємо текст
+        ctx.fillStyle = '#666';
+        ctx.fillText(label, 0, 0);
+
+        // Відновлення стану контексту
+        ctx.restore();
+      }}
+      nodeCanvasObject={(node: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
+        // Отримуємо дані вузла та конфігурацію
+        const { x, y, color, label } = node;
+
+        // Розраховуємо розмір вузла
+        const nodeSize = config.nodeSizeBase * config.nodeSizeFactor;
+
+        // Малюємо коло
+        ctx.beginPath();
+        ctx.arc(x, y, nodeSize, 0, 2 * Math.PI);
+        ctx.fillStyle = color;
+        ctx.fill();
+
+        // Зберігаємо стан контексту перед поворотом
+        ctx.save();
+        // Переміщуємось до позиції вузла
+        ctx.translate(x, y);
+
+        // Функція для обрізання тексту з трикрапкою (аналог text-overflow: ellipsis)
+        const truncateText = (text: string, maxWidth: number): string => {
+          if (!text) return '';
+
+          // Вимірюємо ширину тексту
+          const textWidth = ctx.measureText(text).width;
+
+          // Якщо текст коротший за максимальну ширину, повертаємо як є
+          if (textWidth <= maxWidth) return text;
+
+          // Інакше обрізаємо текст і додаємо трикрапку
+          let truncated = text;
+          const ellipsis = '...';
+
+          // Поступово скорочуємо текст, поки він не поміститься
+          while (ctx.measureText(truncated + ellipsis).width > maxWidth && truncated.length > 0) {
+            truncated = truncated.slice(0, -1);
+          }
+
+          return truncated + ellipsis;
+        };
+
+        // Використовуємо реверсивне масштабування для тексту вузлів
+        const scaledFontSize = calculateFontSize(globalScale);
+        ctx.font = `${scaledFontSize}px Sans-Serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillStyle = 'black';
+
+        // Розрахунок максимальної ширини тексту на основі розміру вузла
+        // Ширина тексту = діаметр вузла * коефіцієнт розширення
+        // Використовуємо globalScale для визначення пропорцій тексту
+        const maxWidth = (nodeSize * config.textPaddingFactor) / globalScale;
+
+        // Малюємо тип вузла з обрізанням (з меншою шириною)
+        ctx.font = `${scaledFontSize * 0.8}px Sans-Serif`;
+        const truncatedLabel = truncateText(label, maxWidth);
+        ctx.fillText(truncatedLabel, 0, 0);
+
+        // Відновлюємо стан контексту
+        ctx.restore();
+      }}
+    />
+  );
+};

package/src/Graph2D/index.ts

@@ -0,0 +1,2 @@
+export * from './Graph2D';
+export * from './types';