@cyber-harbour/ui 1.0.74 → 1.0.76

package/src/Theme/types.ts

@@ -1,362 +0,0 @@
-import { CSSProperties } from 'styled-components';
-
-// Типи для компонентної палітри
-export type ButtonVariant = 'fill' | 'outlined' | 'empty';
-export type ButtonColor = 'default' | 'primary' | 'secondary' | 'error' | 'soft' | 'light';
-export type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
-export type ButtonSize = 'small' | 'medium';
-
-export type InputVariant = 'outlined' | 'empty';
-export type InputState = 'default' | 'focus' | 'error' | 'disabled';
-export type InputSize = 'empty' | 'small' | 'medium';
-
-export type TagVariant = 'fill' | 'outlined';
-export type TagColor =
-  | 'default'
-  | 'primary'
-  | 'error'
-  | 'warning'
-  | 'success'
-  | 'disabled'
-  | 'text'
-  | 'orange'
-  | string;
-
-export type LabelSize = 'small' | 'medium';
-export type LabelSizeStyle = {
-  fontSize: number | string;
-  gap: number | string;
-  marginBottom: number | string;
-  helpText: { fontSize: number | string; marginTop: number | string };
-};
-
-export type SwitchState = 'default' | 'checked' | 'disabled';
-// Типи для spacing та breakpoints
-export type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
-
-// Тип для стилів елементів кнопок
-export type ButtonElementStyle = {
-  background: string;
-  text: string;
-  border: string;
-  boxShadow: string;
-  filledIcon?: {
-    background: string;
-    color: string;
-  };
-};
-
-// Тип для розмірів кнопок
-export type ButtonSizeStyle = {
-  fontSize: number | string;
-  paddingInline: number | string;
-  paddingBlock: number | string;
-  borderRadius: number | string;
-  borderWidth: number | string;
-  gap: number | string;
-  iconSize: number | string;
-};
-
-// Тип для стилів елементів інпута
-export type InputElementStyle = {
-  background: string;
-  text: string;
-  placeholder: string;
-  border: string;
-  boxShadow: string;
-  icon: string;
-};
-
-// Тип для розмірів інпута
-export type InputSizeStyle = {
-  fontSize: number | string;
-  paddingInline: number | string;
-  paddingBlock: number | string;
-  borderRadius: number | string;
-  iconSize: number | string;
-  height: number | string;
-  lineHeight: number;
-};
-
-export type TagElementStyle = {
-  paddingInline: number | string;
-  paddingBlock: number | string;
-  borderRadius: number | string;
-  borderWidth: number | string;
-  color: Record<TagColor, string>;
-};
-
-// Тип для палітри
-export type Theme = {
-  mode: 'light' | 'dark';
-  baseSize: number;
-  colors: {
-    background: string;
-    backgroundBase: string;
-    primary: {
-      main: string;
-      light: string;
-      lighter: string;
-      lightest: string;
-      lightest2: string;
-    };
-    text: {
-      main: string;
-      light: string;
-      lighter: string;
-      invert: string;
-      success: string;
-      error: string;
-    };
-    stroke: {
-      main: string;
-      light: string;
-      lighter: string;
-    };
-    disable: string;
-    success: string;
-    error: string;
-    warning: string;
-    info: string;
-  };
-  line: {
-    size: string | number;
-    color: string;
-  };
-  typography: {
-    fontFamily: string;
-    lineHeight: number;
-    variants: {
-      h1: { fontSize: number | string };
-      h2: { fontSize: number | string };
-      h3: { fontSize: number | string };
-      body: { fontSize: number | string };
-    };
-  };
-  breakpoints: Record<Breakpoint, number>;
-  zIndex: {
-    dropdown: number;
-    sticky: number;
-    fixed: number;
-    backdrop: number;
-    modal: number;
-    popover: number;
-    tooltip: number;
-  };
-  button: {
-    fill: Record<ButtonColor, Record<ButtonState, ButtonElementStyle>>;
-    outlined: Record<ButtonColor, Record<ButtonState, ButtonElementStyle>>;
-    empty: Record<ButtonColor, Record<ButtonState, ButtonElementStyle>>;
-    sizes: Record<ButtonSize, ButtonSizeStyle>;
-  };
-  sidebar: {
-    background: string;
-    border: string;
-    width: number;
-    collapsedWidth: number;
-    text: {
-      default: string;
-      active: string;
-      hover: string;
-    };
-    item: {
-      default: {
-        background: string;
-        border: string;
-        padding: string;
-        height: number;
-      };
-      active: {
-        background: string;
-        borderLeft: string;
-        padding: string;
-        height: number;
-      };
-      hover: {
-        background: string;
-        border: string;
-        padding: string;
-        height: number;
-      };
-    };
-    section: {
-      background: string;
-      padding: string;
-      title: {
-        color: string;
-        fontSize: string;
-        fontWeight: number;
-      };
-    };
-    delimeter: {
-      color: string;
-      thickness: number;
-      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>;
-    paddingBlock: string | number;
-    paddingInline: string | number;
-    margin: string | number;
-    padding: string | number;
-  };
-  // RowActionsMenu
-  rowActionsMenu: {
-    button: Record<ButtonState, ButtonElementStyle>;
-    delimiterColor: string;
-    icon: {
-      size: number | string;
-    };
-  };
-  //Input
-  input: {
-    sizes: Record<InputSize, InputSizeStyle>;
-    outlined: Record<InputState, InputElementStyle>;
-    empty: Record<InputState, InputElementStyle>;
-  };
-  //Box
-  box: {
-    padding: number | string;
-    background: string;
-    borderRadius: number | string;
-    border: {
-      width: number | string;
-      style: string;
-      color: string;
-    };
-  };
-  // Graph2D component
-  graph2D: {
-    ring: {
-      highlightFill: string;
-      selectionFill: string;
-    };
-    button: {
-      stroke: string;
-      normalFill: string;
-      hoverFill: string;
-      textColor: string;
-      spinnerColor: string;
-    };
-    grid: {
-      dotColor: string;
-    };
-    link: {
-      normal: string;
-      highlighted: string;
-      textColor: string;
-      highlightedTextColor: string;
-      textBgColor: string;
-      highlightedTextBgColor: string;
-    };
-  };
-  contentLoader: {
-    foreground: string;
-    background: string;
-  };
-  tag: Record<TagVariant, TagElementStyle>;
-  alert: {
-    paddingBlock: number | string;
-    paddingLeft: number | string;
-    paddingRight: number | string;
-    borderRadius: number | string;
-    fontSize: number | string;
-    gap: number | string;
-    icon: {
-      width: number | string;
-      height: number | string;
-      paddingTop: number | string;
-    };
-    color: {
-      icon: string;
-      text: string;
-      background: string;
-    };
-  };
-  label: {
-    sizes: Record<LabelSize, LabelSizeStyle>;
-    color: string;
-    helpTextColor: string;
-  };
-  leanerProgress: {
-    background: string;
-    progressColor: string;
-  };
-  switch: Record<
-    SwitchState,
-    {
-      background: string;
-      color: string;
-    }
-  >;
-  drawer: {
-    padding: string | number;
-    width: number;
-    shadow: string;
-  };
-  tooltip: {
-    fontSize: string | number;
-    padding: string | number;
-    maxWidth: string | number;
-    borderRadius: string | number;
-    shadow: string;
-    color: string;
-    background: string;
-  };
-  pagination: {
-    fontSize: string | number;
-    paddingBlock: string | number;
-    paddingInline: string | number;
-    borderRadius: string | number;
-    gap: string | number;
-    height: string | number;
-    iconSize: string | number;
-  };
-  overlay: {
-    paddingBlock: string | number;
-    background: string;
-    gap: string | number;
-  };
-  modal: {
-    padding: string | number;
-    width: number;
-    shadow: string;
-    borderColor: string;
-    background: string;
-    borderRadius: string | number;
-  };
-};
-
-//TODO check and refactoring
-
-type ThemeColors = Theme['colors'];
-type ColorCategory = keyof ThemeColors;
-
-export type NestedColorPaths =
-  | keyof Pick<ThemeColors, 'background' | 'disable'>
-  | `${Extract<ColorCategory, 'primary'>}.${keyof ThemeColors['primary']}`
-  | `${Extract<ColorCategory, 'text'>}.${keyof ThemeColors['text']}`
-  | `${Extract<ColorCategory, 'stroke'>}.${keyof ThemeColors['stroke']}`;
-
-export type ColorVariant = NestedColorPaths;
-
-// Typography variants type
-export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body';

package/src/Theme/useTheme.tsx

@@ -1,7 +0,0 @@
-import { useTheme as useStyledTheme } from 'styled-components';
-import { Theme } from './types';
-export const useTheme = () => {
-  const theme: Theme = useStyledTheme();
-
-  return theme;
-};

package/src/Theme/utils.ts

@@ -1,205 +0,0 @@
-import { DefaultTheme } from 'styled-components';
-import { Breakpoint, ButtonColor, ButtonSize, ButtonState, ButtonVariant, InputState, InputVariant } from './types';
-
-/**
- * Helper function to resolve nested color paths from theme
- * Supports formats like 'primary.main', 'text.lightest', 'background'
- *
- * @param theme - The styled-components theme object
- * @param colorPath - A dot-notation path to the color in the theme, e.g. 'primary.main'
- * @returns The resolved color value or undefined if not found
- */
-export const resolveThemeColor = (theme: DefaultTheme, colorPath: string | undefined): string | undefined => {
-  // Skip processing if not a string or empty
-  if (!colorPath || typeof colorPath !== 'string') {
-    return undefined;
-  }
-
-  // Check if it's a color path (contains dot) or a top-level theme color property
-  const isThemeColorPath = colorPath.includes('.') || theme.colors.hasOwnProperty(colorPath);
-
-  // Return early if it's not a theme color path
-  if (!isThemeColorPath) {
-    return colorPath; // Return as-is if it's not a theme color path
-  }
-
-  const parts = colorPath.split('.');
-
-  if (parts.length === 1) {
-    // For simple color keys like 'background', 'disable'
-    return theme.colors[parts[0] as keyof typeof theme.colors] as string;
-  } else if (parts.length === 2) {
-    // For nested color keys like 'primary.main', 'text.light'
-    const [category, variant] = parts;
-    const colorCategory = theme.colors[category as keyof typeof theme.colors];
-
-    if (colorCategory && typeof colorCategory === 'object') {
-      return colorCategory[variant as keyof typeof colorCategory] as string;
-    }
-  }
-
-  return undefined;
-};
-
-/**
- * Converts a pixel value to rem units
- *
- * @param pxValue - The pixel value to convert. Can be a number or a string with 'px' suffix
- * @param baseSize - Base font size in pixels. Default is 16px (browser default)
- * @returns The value in rem units as a string (e.g., "1.25rem")
- */
-export const pxToRem = (pxValue: number | string, baseSize: number = 16): string => {
-  // If pxValue is a string with 'px' suffix, extract the numeric value
-  const numericValue = typeof pxValue === 'string' ? parseFloat(pxValue.replace('px', '')) : pxValue;
-
-  // Handle invalid values
-  if (isNaN(numericValue)) {
-    console.warn(`Invalid pixel value: ${pxValue}`);
-    return '0';
-  }
-
-  // Convert to rem and round to 4 decimal places for precision
-  const remValue = (numericValue / baseSize).toFixed(4).replace(/\.?0+$/, '');
-
-  return `${remValue}rem`;
-};
-
-export const remToPx = (remValue: number | string, baseSize: number = 16): number => {
-  // If remValue is a string with 'rem' suffix, extract the numeric value
-  const numericValue = typeof remValue === 'string' ? parseFloat(remValue.replace('rem', '')) : remValue;
-  if (isNaN(numericValue)) {
-    return 0;
-  }
-
-  return numericValue * baseSize;
-};
-
-const IGNORE_CONVERT_KEYS: Record<string, string[] | boolean> = {
-  contextMenu: ['padding'],
-  baseSize: true,
-};
-
-/**
- * Converts a prop value to rem units if needed
- *
- * @param value - The pixel value to convert. Can be a number or a string with 'px' suffix
- * @param baseSize - Base font size in pixels. Default is 16px (browser default)
- * @returns The value in rem units as a string (e.g., "1.25rem")
- */
-export const propToRem = (value: number | string, baseSize: number = 16): string => {
-  // Check if value ends with units that should not be converted to rem
-  if (typeof value === 'string' && /(%|d?vh|d?vw|d?rem)$/.test(value.trim())) {
-    return value; // Return percentage, viewport and rem values as-is
-  }
-
-  const numericValue = typeof value === 'string' ? parseFloat(value) : value;
-
-  // Handle invalid values
-  if (isNaN(numericValue)) {
-    return `${value}`;
-  }
-
-  // Convert to rem and round to 4 decimal places for precision
-  const remValue = (numericValue / baseSize).toFixed(4).replace(/\.?0+$/, '');
-
-  return `${remValue}rem`;
-};
-/**
- * Recursively converts all pixel values in an object to rem units
- *
- * @param obj - The object containing values to convert
- * @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,
-  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, key);
-    }
-    // If value is a string and contains 'px', convert it to rem
-    else if (typeof value === 'string' && /^\d+(\.\d+)?px$/.test(value.trim())) {
-      result[key] = pxToRem(value, baseSize);
-    }
-    // Handle numeric values that represent pixels for specific properties
-    else if (
-      typeof value === 'number' &&
-      ['fontSize', 'width', 'height', 'padding', 'margin', 'gap', 'borderRadius', 'size'].some((prop) =>
-        key.toLowerCase().includes(prop.toLowerCase())
-      )
-    ) {
-      if (
-        !(parentKey && Array.isArray(IGNORE_CONVERT_KEYS[parentKey]) && IGNORE_CONVERT_KEYS[parentKey].includes(key)) &&
-        !IGNORE_CONVERT_KEYS[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 {
-      result[key] = value;
-    }
-  });
-
-  return result;
-};
-
-// Вспоміжні функції для роботи з палітрою
-/**
- * Функція для отримання стилів кнопки за варіантом, кольором, станом та розміром
- */
-export const getButtonStyles = <V extends ButtonVariant>(
-  theme: DefaultTheme,
-  variant: ButtonVariant,
-  color: ButtonColor,
-  state: ButtonState
-) => {
-  return theme.button[variant][color][state];
-};
-
-export const getButtonSizeStyles = (theme: DefaultTheme, size: ButtonSize) => {
-  return theme.button.sizes[size];
-};
-
-/**
- * Функція для отримання стилів інпута за варіантом та станом
- */
-export const getInputStyles = (theme: DefaultTheme, variant: InputVariant, state: InputState) => {
-  return theme.input[variant][state];
-};
-
-/**
- * Функція для отримання типографічних стилів
- */
-export const getTypographyStyles = (theme: DefaultTheme, variant: string = 'body') => {
-  return theme.typography.variants[variant as keyof typeof theme.typography.variants] || theme.typography.variants.body;
-};
-
-/**
- * Функція для отримання медіа-запитів для breakpoints
- */
-export const getBreakpoint = (theme: DefaultTheme, size: Breakpoint = 'm') => {
-  return `@media (min-width: ${theme.breakpoints[size]}px)`;
-};
-
-/**
- * Функція для отримання rgba кольору з hex формату
- */
-export const hexToRgba = (hex: string, alpha: number): string => {
-  try {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-  } catch {
-    return hex;
-  }
-};

package/src/custom.d.ts

@@ -1,19 +0,0 @@
-declare module '*.png' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.jpg' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.jpeg' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.gif' {
-  const content: string;
-  export default content;
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from './Core';
-export * from './Layouts';
-export * from './Theme';
-export * from './Graph2D';
-export * from './FullscreenCard';

package/src/utils.ts

@@ -1,30 +0,0 @@
-import { useEffect } from 'react';
-
-/**
- * Hook для блокування скролу body та збереження позиції контенту
- * Додає padding-right замість скролбару щоб уникнути стрибків контенту
- *
- * @param isLocked - чи заблоковано скрол
- */
-export const useBodyScrollLock = (isLocked: boolean) => {
-  useEffect(() => {
-    if (!isLocked) return;
-
-    const originalStyle = window.getComputedStyle(document.body);
-    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
-
-    // Зберігаємо оригінальні стилі
-    const originalPaddingRight = originalStyle.paddingRight;
-    const originalOverflow = originalStyle.overflow;
-
-    // Блокуємо скрол та додаємо падінг замість скролбару
-    document.body.style.overflow = 'hidden';
-    document.body.style.paddingRight = `${parseInt(originalPaddingRight) + scrollBarWidth}px`;
-
-    return () => {
-      // Відновлюємо оригінальні стилі
-      document.body.style.overflow = originalOverflow;
-      document.body.style.paddingRight = originalPaddingRight;
-    };
-  }, [isLocked]);
-};

package/tsconfig.paths.json

@@ -1,5 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "."
-  }
-}

package/tsup.config.ts

@@ -1,30 +0,0 @@
-import { defineConfig } from 'tsup';
-import { resolve } from 'path';
-
-export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['esm', 'cjs'],
-  dts: true,
-  outDir: 'dist',
-  clean: true,
-  treeshake: {
-    preset: 'recommended',
-  },
-  splitting: true,
-  minify: process.env.NODE_ENV === 'production',
-  sourcemap: true,
-  external: ['react', 'react-dom', 'styled-components'],
-  noExternal: [],
-  target: 'es2020',
-  platform: 'browser',
-  skipNodeModulesBundle: true,
-  esbuildOptions(options) {
-    if (process.env.NODE_ENV === 'development') {
-      options.drop = ['console', 'debugger'];
-      options.pure = ['console.log', 'console.info', 'console.debug', 'console.warn'];
-    }
-  },
-  shims: true,
-  keepNames: true,
-  injectStyle: true, // Додаємо підтримку для CSS/SCSS
-});

package/tsup.dev.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from 'tsup';
-import baseConfig from './tsup.config';
-
-// Розширюємо основну конфігурацію з оптимізаціями для розробки
-export default defineConfig({
-  ...baseConfig,
-  minify: false, // Пришвидшення збірки
-  sourcemap: 'inline', // Вбудовані source maps для зручності
-  watch: true, // Автоматична перезбірка при змінах
-});