@cyber-harbour/ui 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "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,131 @@
+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}
+      containerStyle={{
+        backgroundColor: theme.colors.background,
+        border: `1px solid ${theme.colors.stroke.light}`,
+        boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.25)',
+        borderRadius: '5px',
+        overflow: 'auto',
+        maxHeight: '500px',
+        zIndex: `${9999}`,
+      }}
+    >
+      <StyledButton
+        ref={buttonRef}
+        onClick={onClick}
+        $disabled={disabled}
+        $fullWidth={fullWidth}
+        $size={size}
+        className={className}
+        type="button"
+        disabled={disabled}
+      >
+        <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: ${$fullWidth ? 'space-between' : '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};
+        }
+
+    `;
+  }}
+`;

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/Plus.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from 'react';
+
+interface PrintIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const PlusIcon = ({ fill = 'currentColor', ...props }: PrintIconProps) => {
+  return (
+    <svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M9.21053 5.78952H0.789474C0.357895 5.78952 0 5.43162 0 5.00005C0 4.56847 0.357895 4.21057 0.789474 4.21057H9.21053C9.64211 4.21057 10 4.56847 10 5.00005C10 5.43162 9.64211 5.78952 9.21053 5.78952Z"
+        fill={fill}
+      />
+      <path
+        d="M5.00041 10C4.56883 10 4.21094 9.64211 4.21094 9.21053V0.789474C4.21094 0.357895 4.56883 0 5.00041 0C5.43199 0 5.78988 0.357895 5.78988 0.789474V9.21053C5.78988 9.64211 5.43199 10 5.00041 10Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -36,3 +36,4 @@ export { BallsMenu } from './BallsMenu';
 export { CheckIcon } from './Check';
 export { ChevronDownIcon } from './ChevronDown';
 export { ChevronUpIcon } from './ChevronUp';
+export { PlusIcon } from './Plus';

package/src/Core/Select/Select.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useState } from 'react';
+import { PopoverAlign, PopoverPosition } from 'react-tiny-popover';
+import { ContextMenu } from '../ContextMenu';
+import { ButtonSize, getButtonSizeStyles } from '@/Theme';
+import { styled } from 'styled-components';
+
+interface SelectProps<T extends string | number> {
+  selected?: T;
+  options: { value: T; inputDisplay?: string }[];
+  handleSelect: (id: T) => void;
+  placeholder: string;
+  disabled?: boolean;
+  positions?: PopoverPosition[] | PopoverPosition;
+  align?: PopoverAlign;
+  size?: ButtonSize;
+}
+
+export const Select = <T extends string | number>({
+  options,
+  selected,
+  handleSelect,
+  placeholder,
+  disabled = false,
+  positions = ['bottom'],
+  align = 'start',
+  size = 'small',
+}: SelectProps<T>) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const handleToggle = useCallback(() => {
+    if (!disabled) setIsOpen((prev) => !prev);
+  }, []);
+
+  return (
+    <ContextMenu
+      isOpen={isOpen}
+      onClickOutside={() => setIsOpen(false)}
+      onClick={handleToggle}
+      disabled={disabled}
+      anchor={!selected ? placeholder : options.find((option) => option.value === selected)?.inputDisplay || selected}
+      fullWidth
+      positions={positions}
+      align={align}
+      size={size}
+    >
+      <StyledWrapper>
+        {options.map((item) => (
+          <StyledItem
+            onClick={() => {
+              handleSelect(item.value);
+              setIsOpen(false);
+            }}
+            type="button"
+            $selected={item.value === selected}
+            key={item.value}
+            disabled={disabled}
+            $size={size}
+          >
+            {item.inputDisplay || item.value}
+          </StyledItem>
+        ))}
+      </StyledWrapper>
+    </ContextMenu>
+  );
+};
+
+const StyledWrapper = styled.div`
+  padding-block: 7px;
+  padding-inline: 5px;
+  button:not(:last-of-type) {
+    margin-bottom: 4px;
+  }
+`;
+
+const StyledItem = styled.button<{ $size: ButtonSize; $selected: boolean }>`
+  ${({ theme, $size, $selected }) => {
+    const sizes = getButtonSizeStyles(theme, $size);
+    return `
+        background: ${theme.select.item.default.background};
+        color: ${theme.select.item.default.text};
+        font-size: ${sizes.fontSize};
+        gap: ${sizes.gap};
+        padding-block: ${sizes.paddingBlock};
+        padding-inline: ${sizes.paddingInline};
+        border-radius: ${sizes.borderRadius};
+        border-width: ${sizes.borderWidth};
+        border: none;
+        width: 100%;
+        cursor: pointer;
+        font-weight: 400;
+        display: inline-flex;
+        align-items: center;
+        justify-content: flex-start;
+        text-decoration: none;
+        transition: all 0.2s ease;
+        outline: none;
+        flex-direction: row;
+
+        &:hover {
+          background-color: ${theme.select.item.hover.background};
+          color: ${theme.select.item.hover.text};
+        }
+
+         ${
+           $selected &&
+           `background: ${theme.select.item.active.background};
+          color: ${theme.select.item.active.text};`
+         }
+
+        &:disabled {
+          background: ${theme.select.item.disabled.background};
+          color: ${theme.select.item.disabled.text};
+          cursor: not-allowed;
+        }
+    `;
+  }}
+`;

package/src/Core/Select/index.ts

@@ -0,0 +1 @@
+export * from './Select';

package/src/Core/index.ts

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

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';