@cyber-harbour/ui 1.0.17 → 1.0.18

package/src/Theme/types.ts

@@ -0,0 +1,148 @@
+// Типи для компонентної палітри
+export type ButtonVariant = 'fill' | 'outlined' | 'empty';
+export type ButtonColor = 'default' | 'primary' | 'secondary' | 'error';
+export type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
+export type ButtonSize = 'small' | 'medium';
+
+export type InputVariant = 'default' | 'outlined' | 'filled';
+export type InputState = 'default' | 'focus' | 'error' | 'disabled';
+export type InputSize = 'small' | 'medium' | 'large';
+
+// Типи для spacing та breakpoints
+export type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
+
+// Тип для стилів елементів кнопок
+export type ButtonElementStyle = {
+  background: string;
+  text: string;
+  border: string;
+  boxShadow: 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 Theme = {
+  mode: 'light' | 'dark';
+  colors: {
+    background: string;
+    primary: {
+      main: string;
+      light: string;
+      lighter: string;
+      lightest: string;
+      lightest2: string;
+    };
+    text: {
+      main: string;
+      light: string;
+      lighter: string;
+      invert: string;
+    };
+    stroke: {
+      main: string;
+      light: string;
+      lighter: string;
+    };
+    disable: string;
+    success: string;
+    error: string;
+    warning: string;
+    info: 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;
+    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;
+    };
+  };
+};
+
+//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/utils.ts

@@ -1,4 +1,5 @@
 import { DefaultTheme } from 'styled-components';
+import { Breakpoint, ButtonColor, ButtonSize, ButtonState, ButtonVariant } from './types';
 
 /**
  * Helper function to resolve nested color paths from theme
@@ -39,3 +40,111 @@ export const resolveThemeColor = (theme: DefaultTheme, colorPath: string | undef
 
   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`;
+};
+
+/**
+ * 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): 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);
+    }
+    // If value is a string and contains 'px', convert it to rem
+    else if (typeof value === 'string' && value.includes('px')) {
+      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())
+      )
+    ) {
+      result[key] = pxToRem(value, baseSize);
+    }
+    // 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 = (
+//   variant: InputVariant = 'default',
+//   state: InputState = 'default',
+//   size: InputSize = 'medium'
+// ) => {
+//   const variantStyles = theme.input[variant][state];
+//   const sizeStyles = theme.input.sizes[size];
+
+//   return {
+//     ...variantStyles,
+//     ...sizeStyles,
+//   };
+// };
+
+/**
+ * Функція для отримання типографічних стилів
+ */
+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)`;
+};