@cyber-harbour/ui 1.0.74 → 1.0.75

package/src/Graph2D/types.ts

@@ -1,122 +0,0 @@
-export interface Graph2DRef {
-  /**
-   * Масштабирует график так, чтобы все узлы были видны
-   * @param duration Длительность анимации масштабирования в миллисекундах
-   * @param padding Отступ от краев в пикселях
-   */
-  zoomToFit: (duration?: number, padding?: number) => void;
-
-  /**
-   * Добавляет новые узлы и связи на график
-   * @param newNodes Массив новых узлов для добавления
-   * @param newLinks Массив новых связей для добавления
-   * @param options Опции для настройки поведения при добавлении
-   *   - smoothAppearance: если true, существующие узлы не будут двигаться,
-   *     а новые появятся плавно рядом со связанными узлами
-   *   - transitionDuration: длительность анимации появления новых узлов в миллисекундах
-   */
-  addNodes: (
-    newNodes: NodeObject[],
-    newLinks?: LinkObject[],
-    options?: {
-      smoothAppearance?: boolean;
-      transitionDuration?: number;
-    }
-  ) => void;
-
-  /**
-   * Удаляет узлы и связанные с ними связи из графа
-   * @param nodeIds Массив идентификаторов узлов для удаления
-   */
-  removeNodes: (nodeIds: (string | number)[]) => void;
-}
-
-/**
- * Интерфейс для внутреннего состояния компонента Graph2D
- */
-export interface GraphState {
-  /** Трансформация графа (позиционирование и масштаб) */
-  transform: { x: number; y: number; k: number };
-  /** Флаг режима панорамирования */
-  isPanning: boolean;
-  /** Узел, над которым находится курсор */
-  hoveredNode: NodeObject | null;
-  /** Связь, над которой находится курсор */
-  hoveredLink: LinkObject | null;
-  /** Узел, который в данный момент перетаскивается */
-  draggedNode: NodeObject | null;
-  /** Выбранный узел */
-  selectedNode: NodeObject | null;
-  /** Индекс кнопки, над которой находится курсор */
-  hoveredButtonIndex: number | null;
-  /** Набор узлов, которые должны быть подсвечены */
-  highlightNodes: Set<NodeObject>;
-  /** Набор связей, которые должны быть подсвечены */
-  highlightLinks: Set<any>;
-  /** Последняя позиция курсора */
-  lastMousePos: { x: number; y: number };
-  /** Флаг необходимости остановки распространения события */
-  mustBeStoppedPropagation: boolean;
-  /** Начальная позиция курсора при начале перетаскивания */
-  mouseStartPos: { x: number; y: number } | null;
-  /** Флаг режима перетаскивания */
-  isDragging: boolean;
-  width: number;
-  height: number;
-  /** Поточна анімація */
-  animation: {
-    id: number | null;
-    buttonIndex: number | null;
-  };
-  /** Кут оберту спінера */
-  spinnerAngle: number;
-}
-
-export interface Graph2DProps {
-  graphData: GraphData;
-  loading?: boolean;
-
-  // Container layout
-  width: number;
-  height: number;
-
-  // Button controls
-  buttons?: NodeButton[];
-
-  // Event handlers
-  onNodeClick?: (node: NodeObject) => void;
-  onBackgroundClick?: () => void;
-  onNodeHover?: (node: NodeObject | null) => void;
-  onLinkHover?: (link: LinkObject | null) => void;
-  onLinkClick?: (link: LinkObject) => void;
-}
-
-export interface NodeButton {
-  img: string;
-  hoverImg: string;
-  loading?: boolean;
-  getCount?: (node: NodeObject) => number;
-  onClick: (node: NodeObject) => void;
-}
-
-export type GraphData<NodeType = {}, LinkType = {}> = {
-  nodes: NodeObject<NodeType>[];
-  links: LinkObject<NodeType, LinkType>[];
-};
-
-export type NodeObject<NodeType = {}> = NodeType & {
-  id?: string | number;
-  x?: number;
-  y?: number;
-  vx?: number;
-  vy?: number;
-  fx?: number;
-  fy?: number;
-  [others: string]: any;
-};
-
-export type LinkObject<NodeType = {}, LinkType = {}> = LinkType & {
-  source: string | number | NodeObject<NodeType>;
-  target: string | number | NodeObject<NodeType>;
-  [others: string]: any;
-};

package/src/Layouts/Container/Container.tsx

@@ -1,33 +0,0 @@
-import {
-  createComponent,
-  createStyledComponent,
-  FabricComponent,
-  generatePropertySpaceStyle,
-  pxToRem,
-} from '../../Theme';
-import { styled } from 'styled-components';
-
-type ContainerProps = {
-  children: any;
-  maxWidth?: string | number;
-};
-
-type StyledContainerProps = {
-  $maxWidth?: string | number;
-};
-
-export const Container = createComponent<ContainerProps>(({ maxWidth, ...props }) => {
-  return <StyledContainer {...props} $maxWidth={maxWidth} />;
-});
-
-const StyledContainer = createStyledComponent<FabricComponent<StyledContainerProps>>(
-  styled.div(({ theme, $maxWidth, px = 20 }) => {
-    return `
-   ${generatePropertySpaceStyle(theme, 'padding-inline', px)}
-    width: 100%;
-    min-width: 0;
-    max-width: ${typeof $maxWidth === 'number' ? pxToRem($maxWidth, theme.baseSize) : $maxWidth || '100%'};
-  `;
-  }),
-  { ignoreStyles: ['padding-inline'] }
-);

package/src/Layouts/Container/index.ts

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

package/src/Layouts/PageLayout/PageLayout.tsx

@@ -1,63 +0,0 @@
-import { ReactElement } from 'react';
-import { styled } from 'styled-components';
-
-interface PageLayoutProps {
-  header?: any;
-  sidebar?: any;
-  children?: any;
-  className?: string;
-}
-
-export const PageLayout = ({ children, header, sidebar, className }: PageLayoutProps) => {
-  return (
-    <StyledContainer className={className} $withHeader={!!header} $withSidebar={!!sidebar}>
-      {header}
-      {sidebar}
-      <StyledMain>{children}</StyledMain>
-    </StyledContainer>
-  );
-};
-
-interface StyledContainerProps {
-  $withHeader?: boolean;
-  $withSidebar?: boolean;
-}
-
-export const StyledContainer = styled.div<StyledContainerProps>(
-  ({ $withHeader, $withSidebar }) => `
-  display: grid;
-  min-height: 100dvh;
-  position: relative;
-  grid-template-columns: ${$withSidebar ? 'auto 1fr' : '1fr'};
-  grid-template-rows: ${$withHeader ? 'auto 1fr' : '1fr'};
-  grid-template-areas: ${
-    $withHeader
-      ? $withSidebar
-        ? `'sidebar header' 'sidebar content'`
-        : `'header' 'content'`
-      : $withSidebar
-      ? `'sidebar content'`
-      : `'content'`
-  };
-
-  & > header {
-    grid-area: header;
-  }
-
-  & > aside {
-    grid-area: sidebar;
-    max-height: 100dvh;
-  }
-
-  & > main {
-    grid-area: content;
-  }
-`
-);
-
-const StyledMain = styled.main(
-  ({ theme }) => `
-    min-width: 0;
-    background: ${theme.colors.backgroundBase};
-  `
-);

package/src/Layouts/PageLayout/index.ts

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

package/src/Layouts/index.ts

@@ -1,2 +0,0 @@
-export * from './PageLayout';
-export * from './Container';

package/src/Theme/Breakpoint.tsx

@@ -1,50 +0,0 @@
-import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
-import { Theme } from './types';
-import { useTheme } from 'styled-components';
-import { breakpoints } from './themes/config';
-
-type Breakpoint = keyof Theme['breakpoints'];
-
-const getBreakpoint = (breakpoints: Theme['breakpoints']): Breakpoint => {
-  if (window !== undefined) {
-    const width = window.innerWidth;
-    for (const [key, value] of Object.entries(breakpoints)) {
-      if (width < value) {
-        return key as Breakpoint;
-      }
-    }
-  }
-  const keys = Object.keys(breakpoints) as Breakpoint[];
-
-  return keys[keys.length - 1];
-};
-
-const BreakpointContext = createContext<Breakpoint>(getBreakpoint(breakpoints));
-
-export const BreakpointProvider = ({ children }: { children: any }) => {
-  const theme = useTheme();
-  const [breakpoint, setBreakpoint] = useState<Breakpoint>(getBreakpoint(theme.breakpoints));
-
-  useEffect(() => {
-    const handleResize = () => {
-      const newBreakpoint = getBreakpoint(theme.breakpoints);
-      if (newBreakpoint !== breakpoint) {
-        setBreakpoint(newBreakpoint);
-      }
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [breakpoint]);
-
-  return <BreakpointContext.Provider value={breakpoint}>{children}</BreakpointContext.Provider>;
-};
-
-export const useBreakpoint = () => {
-  const currentBreakpoint = useContext(BreakpointContext);
-  const theme = useTheme();
-  const breakpointsOrder = useMemo(() => Object.keys(theme.breakpoints) as Breakpoint[], [theme.breakpoints]);
-  return { currentBreakpoint, breakpointsOrder: breakpointsOrder };
-};

package/src/Theme/GlobalStyle.tsx

@@ -1,18 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-export const GlobalStyle = createGlobalStyle(
-  ({ theme }) => `
-  *, *::before, *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-
-  body, html {
-    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,30 +0,0 @@
-import { StyleSheetManager, ThemeProvider as ThemeProviderStyled, WebTarget } from 'styled-components';
-import { lightTheme, darkTheme } from './themes';
-import { GlobalStyle } from './GlobalStyle';
-import { BreakpointProvider } from './Breakpoint';
-
-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={mode == 'light' || mode === 'LIGHT' ? lightTheme : darkTheme}>
-        <BreakpointProvider>
-          <GlobalStyle />
-          {children}
-        </BreakpointProvider>
-      </ThemeProviderStyled>
-    </StyleSheetManager>
-  );
-};
-
-function shouldForwardProp(propName: any, target: WebTarget) {
-  if (typeof target === 'string') {
-    return !['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].includes(propName);
-  }
-  return true;
-}

package/src/Theme/componentFabric.tsx

@@ -1,159 +0,0 @@
-import styled, { css, DefaultTheme } from 'styled-components';
-import { pxToRem } from './utils';
-import React, { useMemo } from 'react';
-import { useBreakpoint } from './Breakpoint';
-import { Breakpoint } from './types';
-import { breakpoints } from './themes/config';
-
-type SpaceProps = {
-  m?: string | number; // margin
-  mt?: string | number; // margin-top
-  mr?: string | number; // margin-right
-  mb?: string | number; // margin-bottom
-  ml?: string | number; // margin-left
-  mx?: string | number; // margin-left + margin-right
-  my?: string | number; // margin-top + margin-bottom
-  p?: string | number; // padding
-  pt?: string | number; // padding-top
-  pr?: string | number; // padding-right
-  pb?: string | number; // padding-bottom
-  pl?: string | number; // padding-left
-  px?: string | number; // padding-left + padding-right
-  py?: string | number; // padding-top + padding-bottom
-};
-
-type GeneratedFabricMarginProperties =
-  | 'margin'
-  | 'margin-top'
-  | 'margin-right'
-  | 'margin-bottom'
-  | 'margin-left'
-  | 'margin-inline'
-  | 'margin-block'
-  | 'padding'
-  | 'padding-top'
-  | 'padding-right'
-  | 'padding-bottom'
-  | 'padding-left'
-  | 'padding-inline'
-  | 'padding-block';
-
-type MediaProps<T = object> = {
-  media?: {
-    [key in Breakpoint]?: Partial<T>;
-  };
-};
-
-type FabricStyledComponentOptions = {
-  ignoreStyles?: GeneratedFabricMarginProperties[] | undefined; // Ignore margin styles
-};
-
-type CreatedFabricComponent<T extends FabricComponent> =
-  | React.ComponentType<Omit<T, 'media'>>
-  | React.ForwardRefExoticComponent<Omit<T, 'media'>>;
-export type FabricComponent<T = object> = T & SpaceProps & MediaProps<T>;
-export type StyledFabricComponent<T = object> = T & SpaceProps;
-
-const marginStyles = ({ ignoreStyles }: FabricStyledComponentOptions = {}) =>
-  css<FabricComponent>(({ theme, ...props }) => {
-    return `
-      ${generatePropertySpaceStyle(theme, 'margin', props.m, ignoreStyles)}
-      ${generatePropertySpaceStyle(theme, 'margin-top', props.mt, ignoreStyles)}
-      ${generatePropertySpaceStyle(theme, 'margin-right', props.mr, ignoreStyles)}
-      ${generatePropertySpaceStyle(theme, 'margin-bottom', props.mb, ignoreStyles)}
-      ${generatePropertySpaceStyle(theme, 'margin-left', props.ml, ignoreStyles)}
-      ${generatePropertySpaceStyle(theme, 'margin-inline', props.mx, ignoreStyles)}
-      ${generatePropertySpaceStyle(theme, 'margin-block', props.my, ignoreStyles)}
-    `;
-  });
-
-const paddingStyles = ({ ignoreStyles }: FabricStyledComponentOptions = {}) =>
-  css<FabricComponent>(({ theme, ...props }) => {
-    return `
-      ${generatePropertySpaceStyle(theme, 'padding', props.p, ignoreStyles)}
-      ${generatePropertySpaceStyle(theme, 'padding-top', props.pt, ignoreStyles)}
-      ${generatePropertySpaceStyle(theme, 'padding-right', props.pr, ignoreStyles)}
-      ${generatePropertySpaceStyle(theme, 'padding-bottom', props.pb, ignoreStyles)}
-      ${generatePropertySpaceStyle(theme, 'padding-left', props.pl, ignoreStyles)}
-      ${generatePropertySpaceStyle(theme, 'padding-inline', props.px, ignoreStyles)}
-      ${generatePropertySpaceStyle(theme, 'padding-block', props.py, ignoreStyles)}
-    `;
-  });
-
-export const destructSpaceProps = <T extends FabricComponent>(props: T): SpaceProps => {
-  const rest: SpaceProps = {};
-  ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].forEach((key) => {
-    if (key in props) {
-      rest[key as keyof SpaceProps] = props[key as keyof SpaceProps];
-      delete props[key as keyof SpaceProps];
-    }
-  });
-
-  return rest;
-};
-
-export const generatePropertySpaceStyle = (
-  theme: DefaultTheme,
-  property: GeneratedFabricMarginProperties,
-  value?: string | number,
-  ignoredOptions?: GeneratedFabricMarginProperties[]
-) => {
-  if (ignoredOptions && ignoredOptions.includes(property)) {
-    return '';
-  }
-  if (value !== undefined) {
-    const t = typeof value === 'number';
-    return `${property}: ${typeof value === 'number' ? `${pxToRem(value, theme.baseSize)}` : value};`;
-  }
-  return '';
-};
-
-export function getResponsiveProps<T = object>(
-  { media, ...props }: T & MediaProps<T>,
-  currentBreakpoint: Breakpoint,
-  breakpointOrder: Breakpoint[]
-) {
-  if (!media) {
-    return props;
-  }
-
-  // Отримуємо індекс поточного breakpoint
-  const currentIndex = breakpointOrder.indexOf(currentBreakpoint);
-
-  // Створюємо результуючий об'єкт, починаючи з базових props
-  let result = { ...props };
-
-  // Застосовуємо стилі від найменшого breakpoint до поточного (mobile-first)
-  for (let i = 0; i <= currentIndex; i++) {
-    const breakpoint = breakpointOrder[i];
-    if (media[breakpoint]) {
-      result = {
-        ...result,
-        ...media[breakpoint],
-      };
-    }
-  }
-
-  return result;
-}
-
-export const createComponent = <T extends FabricComponent, R = unknown>(Component: CreatedFabricComponent<T>) => {
-  return React.forwardRef<R, FabricComponent<T>>((props, ref) => {
-    const { currentBreakpoint, breakpointsOrder } = useBreakpoint();
-    const responsiveProps = useMemo(
-      () => getResponsiveProps<T>(props as T & MediaProps<T>, currentBreakpoint, breakpointsOrder),
-      [props, currentBreakpoint]
-    );
-    return <Component {...responsiveProps} ref={ref} />;
-  });
-};
-
-export const createStyledComponent = <T extends object = StyledFabricComponent>(
-  component: React.ComponentType<T>,
-  options?: FabricStyledComponentOptions
-) => {
-  return styled(component)<StyledFabricComponent<T>>`
-    ${marginStyles(options)}
-    ${paddingStyles(options)}
-  `;
-};

package/src/Theme/index.ts

@@ -1,8 +0,0 @@
-export * from './GlobalStyle';
-export * from './ThemeProvider';
-export * from './utils';
-export * from './types';
-export * from './themes';
-export * from './componentFabric';
-export * from './useTheme';
-export * from './Breakpoint';

package/src/Theme/styled.d.ts

@@ -1,7 +0,0 @@
-import 'styled-components';
-import { Palette } from './palette';
-import { Theme } from './types';
-
-declare module 'styled-components' {
-  export interface DefaultTheme extends Theme {}
-}

package/src/Theme/themes/config.ts

@@ -1,41 +0,0 @@
-// Індексні шари (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,
-    },
-  },
-};