@cyber-harbour/ui 1.0.19 → 1.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +64 -3
- package/dist/index.d.ts +64 -3
- package/dist/index.js +111 -56
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +126 -71
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -1
- package/src/Core/ContextMenu/ContextMenu.tsx +122 -0
- package/src/Core/ContextMenu/ContextMenuDelimiter.tsx +13 -0
- package/src/Core/ContextMenu/index.ts +3 -0
- package/src/Core/ContextMenu/useContextMenuControl.ts +21 -0
- package/src/Core/index.ts +1 -0
- package/src/Graph2D/Graph2D.tsx +186 -0
- package/src/Graph2D/index.ts +2 -0
- package/src/Graph2D/json_test.json +3685 -0
- package/src/Graph2D/types.ts +22 -0
- package/src/Theme/GlobalStyle.tsx +3 -0
- package/src/Theme/theme.ts +42 -0
- package/src/Theme/types.ts +18 -0
- package/src/Theme/utils.ts +15 -3
- package/src/index.ts +1 -0
package/dist/index.d.mts
CHANGED
|
@@ -2,9 +2,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
import react__default, { SVGProps, ElementType, CSSProperties as CSSProperties$1 } from 'react';
|
|
4
4
|
import * as styled_components from 'styled-components';
|
|
5
|
-
import {
|
|
5
|
+
import { CSSProperties, DefaultTheme } from 'styled-components';
|
|
6
|
+
import { PopoverPosition, PopoverAlign } from 'react-tiny-popover';
|
|
6
7
|
import * as styled_components_dist_types from 'styled-components/dist/types';
|
|
7
8
|
import { DefaultTheme as DefaultTheme$1 } from 'styled-components/dist/types';
|
|
9
|
+
import { GraphData } from 'react-force-graph-2d';
|
|
8
10
|
|
|
9
11
|
declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
|
|
10
12
|
|
|
@@ -141,6 +143,21 @@ type Theme = {
|
|
|
141
143
|
margin: string;
|
|
142
144
|
};
|
|
143
145
|
};
|
|
146
|
+
contextMenu: {
|
|
147
|
+
button: Record<ButtonState, ButtonElementStyle>;
|
|
148
|
+
padding: number;
|
|
149
|
+
delimeter: {
|
|
150
|
+
style: CSSProperties['borderStyle'];
|
|
151
|
+
color: string;
|
|
152
|
+
thickness: number;
|
|
153
|
+
marginInline: number | string;
|
|
154
|
+
marginBlock: number | string;
|
|
155
|
+
};
|
|
156
|
+
shadow: string;
|
|
157
|
+
icon: {
|
|
158
|
+
size: number | string;
|
|
159
|
+
};
|
|
160
|
+
};
|
|
144
161
|
};
|
|
145
162
|
type ThemeColors = Theme['colors'];
|
|
146
163
|
type ColorCategory = keyof ThemeColors;
|
|
@@ -172,7 +189,7 @@ declare const pxToRem: (pxValue: number | string, baseSize?: number) => string;
|
|
|
172
189
|
* @param baseSize - Base font size in pixels. Default is 16px
|
|
173
190
|
* @returns A new object with pixel values converted to rem
|
|
174
191
|
*/
|
|
175
|
-
declare const convertPaletteToRem: (obj: Record<string, any>, baseSize?: number) => Record<string, any>;
|
|
192
|
+
declare const convertPaletteToRem: (obj: Record<string, any>, baseSize?: number, parentKey?: string) => Record<string, any>;
|
|
176
193
|
/**
|
|
177
194
|
* Функція для отримання стилів кнопки за варіантом, кольором, станом та розміром
|
|
178
195
|
*/
|
|
@@ -535,6 +552,32 @@ interface PaginationProps {
|
|
|
535
552
|
}
|
|
536
553
|
declare const Pagination: ({ total_items, limit, offset, onChangePage }: PaginationProps) => react_jsx_runtime.JSX.Element;
|
|
537
554
|
|
|
555
|
+
interface ContextMenuProps {
|
|
556
|
+
isOpen: boolean;
|
|
557
|
+
onClick: () => void;
|
|
558
|
+
onClickOutside: (e: MouseEvent) => void;
|
|
559
|
+
size?: ButtonSize;
|
|
560
|
+
disabled?: boolean;
|
|
561
|
+
fullWidth?: boolean;
|
|
562
|
+
className?: string;
|
|
563
|
+
children?: any;
|
|
564
|
+
anchor?: any;
|
|
565
|
+
positions?: PopoverPosition[] | PopoverPosition;
|
|
566
|
+
align?: PopoverAlign;
|
|
567
|
+
}
|
|
568
|
+
declare const ContextMenu: ({ isOpen, onClickOutside, onClick, anchor, size, disabled, fullWidth, className, positions, align, children, }: ContextMenuProps) => react_jsx_runtime.JSX.Element;
|
|
569
|
+
|
|
570
|
+
interface StyledProps {
|
|
571
|
+
}
|
|
572
|
+
declare const ContextMenuDelimiter: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
|
|
573
|
+
|
|
574
|
+
declare const useContextMenuControl: () => {
|
|
575
|
+
isOpen: boolean;
|
|
576
|
+
toggleMenu: () => void;
|
|
577
|
+
closeMenu: () => void;
|
|
578
|
+
openMenu: () => void;
|
|
579
|
+
};
|
|
580
|
+
|
|
538
581
|
interface PageLayoutProps {
|
|
539
582
|
header?: any;
|
|
540
583
|
sidebar?: any;
|
|
@@ -547,4 +590,22 @@ interface StyledContainerProps {
|
|
|
547
590
|
}
|
|
548
591
|
declare const StyledContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContainerProps>> & string;
|
|
549
592
|
|
|
550
|
-
|
|
593
|
+
interface Graph2DProps {
|
|
594
|
+
graphData?: GraphData;
|
|
595
|
+
linkSource?: string;
|
|
596
|
+
linkTarget?: string;
|
|
597
|
+
width?: number;
|
|
598
|
+
height?: number;
|
|
599
|
+
config?: {
|
|
600
|
+
nodeSizeFactor: number;
|
|
601
|
+
fontSize: number;
|
|
602
|
+
nodeSizeBase: number;
|
|
603
|
+
textPaddingFactor: number;
|
|
604
|
+
};
|
|
605
|
+
onNodeClick?: (node: any) => void;
|
|
606
|
+
onLinkClick?: (link: any) => void;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
declare const Graph2D: ({ graphData, width, height, linkTarget, linkSource, config, onNodeClick, onLinkClick, }: Graph2DProps) => react_jsx_runtime.JSX.Element;
|
|
610
|
+
|
|
611
|
+
export { AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, ContextMenu, ContextMenuDelimiter, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EnableVisibleIcon, EnterArrowLeftIcon, FiltersIcon, GlobalStyle, Graph2D, type Graph2DProps, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleIcon, type InputSize, type InputState, type InputVariant, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MoonIcon, type NestedColorPaths, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, SandBoxIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type Theme, ThemeProvider, Typography, type TypographyProps, type TypographyVariant, UpRightArrowCircleIcon, VectorIcon, convertPaletteToRem, darkTheme, getBreakpoint, getButtonSizeStyles, getButtonStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, resolveThemeColor, useContextMenuControl };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,9 +2,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
import react__default, { SVGProps, ElementType, CSSProperties as CSSProperties$1 } from 'react';
|
|
4
4
|
import * as styled_components from 'styled-components';
|
|
5
|
-
import {
|
|
5
|
+
import { CSSProperties, DefaultTheme } from 'styled-components';
|
|
6
|
+
import { PopoverPosition, PopoverAlign } from 'react-tiny-popover';
|
|
6
7
|
import * as styled_components_dist_types from 'styled-components/dist/types';
|
|
7
8
|
import { DefaultTheme as DefaultTheme$1 } from 'styled-components/dist/types';
|
|
9
|
+
import { GraphData } from 'react-force-graph-2d';
|
|
8
10
|
|
|
9
11
|
declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
|
|
10
12
|
|
|
@@ -141,6 +143,21 @@ type Theme = {
|
|
|
141
143
|
margin: string;
|
|
142
144
|
};
|
|
143
145
|
};
|
|
146
|
+
contextMenu: {
|
|
147
|
+
button: Record<ButtonState, ButtonElementStyle>;
|
|
148
|
+
padding: number;
|
|
149
|
+
delimeter: {
|
|
150
|
+
style: CSSProperties['borderStyle'];
|
|
151
|
+
color: string;
|
|
152
|
+
thickness: number;
|
|
153
|
+
marginInline: number | string;
|
|
154
|
+
marginBlock: number | string;
|
|
155
|
+
};
|
|
156
|
+
shadow: string;
|
|
157
|
+
icon: {
|
|
158
|
+
size: number | string;
|
|
159
|
+
};
|
|
160
|
+
};
|
|
144
161
|
};
|
|
145
162
|
type ThemeColors = Theme['colors'];
|
|
146
163
|
type ColorCategory = keyof ThemeColors;
|
|
@@ -172,7 +189,7 @@ declare const pxToRem: (pxValue: number | string, baseSize?: number) => string;
|
|
|
172
189
|
* @param baseSize - Base font size in pixels. Default is 16px
|
|
173
190
|
* @returns A new object with pixel values converted to rem
|
|
174
191
|
*/
|
|
175
|
-
declare const convertPaletteToRem: (obj: Record<string, any>, baseSize?: number) => Record<string, any>;
|
|
192
|
+
declare const convertPaletteToRem: (obj: Record<string, any>, baseSize?: number, parentKey?: string) => Record<string, any>;
|
|
176
193
|
/**
|
|
177
194
|
* Функція для отримання стилів кнопки за варіантом, кольором, станом та розміром
|
|
178
195
|
*/
|
|
@@ -535,6 +552,32 @@ interface PaginationProps {
|
|
|
535
552
|
}
|
|
536
553
|
declare const Pagination: ({ total_items, limit, offset, onChangePage }: PaginationProps) => react_jsx_runtime.JSX.Element;
|
|
537
554
|
|
|
555
|
+
interface ContextMenuProps {
|
|
556
|
+
isOpen: boolean;
|
|
557
|
+
onClick: () => void;
|
|
558
|
+
onClickOutside: (e: MouseEvent) => void;
|
|
559
|
+
size?: ButtonSize;
|
|
560
|
+
disabled?: boolean;
|
|
561
|
+
fullWidth?: boolean;
|
|
562
|
+
className?: string;
|
|
563
|
+
children?: any;
|
|
564
|
+
anchor?: any;
|
|
565
|
+
positions?: PopoverPosition[] | PopoverPosition;
|
|
566
|
+
align?: PopoverAlign;
|
|
567
|
+
}
|
|
568
|
+
declare const ContextMenu: ({ isOpen, onClickOutside, onClick, anchor, size, disabled, fullWidth, className, positions, align, children, }: ContextMenuProps) => react_jsx_runtime.JSX.Element;
|
|
569
|
+
|
|
570
|
+
interface StyledProps {
|
|
571
|
+
}
|
|
572
|
+
declare const ContextMenuDelimiter: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
|
|
573
|
+
|
|
574
|
+
declare const useContextMenuControl: () => {
|
|
575
|
+
isOpen: boolean;
|
|
576
|
+
toggleMenu: () => void;
|
|
577
|
+
closeMenu: () => void;
|
|
578
|
+
openMenu: () => void;
|
|
579
|
+
};
|
|
580
|
+
|
|
538
581
|
interface PageLayoutProps {
|
|
539
582
|
header?: any;
|
|
540
583
|
sidebar?: any;
|
|
@@ -547,4 +590,22 @@ interface StyledContainerProps {
|
|
|
547
590
|
}
|
|
548
591
|
declare const StyledContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContainerProps>> & string;
|
|
549
592
|
|
|
550
|
-
|
|
593
|
+
interface Graph2DProps {
|
|
594
|
+
graphData?: GraphData;
|
|
595
|
+
linkSource?: string;
|
|
596
|
+
linkTarget?: string;
|
|
597
|
+
width?: number;
|
|
598
|
+
height?: number;
|
|
599
|
+
config?: {
|
|
600
|
+
nodeSizeFactor: number;
|
|
601
|
+
fontSize: number;
|
|
602
|
+
nodeSizeBase: number;
|
|
603
|
+
textPaddingFactor: number;
|
|
604
|
+
};
|
|
605
|
+
onNodeClick?: (node: any) => void;
|
|
606
|
+
onLinkClick?: (link: any) => void;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
declare const Graph2D: ({ graphData, width, height, linkTarget, linkSource, config, onNodeClick, onLinkClick, }: Graph2DProps) => react_jsx_runtime.JSX.Element;
|
|
610
|
+
|
|
611
|
+
export { AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, ContextMenu, ContextMenuDelimiter, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EnableVisibleIcon, EnterArrowLeftIcon, FiltersIcon, GlobalStyle, Graph2D, type Graph2DProps, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleIcon, type InputSize, type InputState, type InputVariant, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MoonIcon, type NestedColorPaths, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, SandBoxIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type Theme, ThemeProvider, Typography, type TypographyProps, type TypographyVariant, UpRightArrowCircleIcon, VectorIcon, convertPaletteToRem, darkTheme, getBreakpoint, getButtonSizeStyles, getButtonStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, resolveThemeColor, useContextMenuControl };
|