@cyber-harbour/ui 1.0.26 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/Box/Box.tsx

@@ -0,0 +1,12 @@
+import { styled } from 'styled-components';
+
+export const Box = styled.div(
+  ({ theme }) => `
+      padding: ${theme.box.padding};
+      border-radius: ${theme.box.border.radius};
+      background-color: ${theme.box.background};
+      border-width: ${theme.box.border.width};
+      border-style: ${theme.box.border.style};
+      border-color: ${theme.box.border.color};
+  `
+);

package/src/Core/Box/index.ts

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

package/src/Core/Button/Button.tsx

@@ -21,8 +21,11 @@ interface BaseButtonProps {
   iconPosition?: 'left' | 'right';
 }
 
-export type ButtonProps = BaseButtonProps &
-  (React.AnchorHTMLAttributes<HTMLAnchorElement> | React.ButtonHTMLAttributes<HTMLButtonElement>);
+export type ButtonProps = (
+  | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'>
+  | Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>
+) &
+  BaseButtonProps;
 
 const getCss = (styles: ButtonElementStyle) => `
     background: ${styles.background};

package/src/Core/Flex/FlexContainer.tsx

@@ -0,0 +1,81 @@
+import { CSSProperties, ReactNode } from 'react';
+import styled from 'styled-components';
+
+export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type FlexJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+export type FlexGap = string | number;
+
+export interface FlexContainerProps {
+  children: any;
+  direction?: FlexDirection;
+  wrap?: FlexWrap;
+  justify?: FlexJustify;
+  align?: FlexAlign;
+  alignContent?: FlexAlign;
+  gap?: FlexGap;
+  rowGap?: FlexGap;
+  columnGap?: FlexGap;
+  className?: string;
+  style?: CSSProperties;
+  as?: any; // TODO: fix type to styled component or intrinsic element
+}
+
+export const FlexContainer = ({
+  children,
+  direction = 'row',
+  wrap = 'nowrap',
+  justify = 'flex-start',
+  align = 'stretch',
+  alignContent,
+  gap,
+  rowGap,
+  columnGap,
+  className,
+  style,
+  as = 'div',
+}: FlexContainerProps) => {
+  return (
+    <StyledFlexContainer
+      as={as}
+      $direction={direction}
+      $wrap={wrap}
+      $justify={justify}
+      $align={align}
+      $alignContent={alignContent}
+      $gap={gap}
+      $rowGap={rowGap}
+      $columnGap={columnGap}
+      className={className}
+      style={style}
+    >
+      {children}
+    </StyledFlexContainer>
+  );
+};
+
+interface StyledFlexContainerProps {
+  $direction: FlexDirection;
+  $wrap: FlexWrap;
+  $justify: FlexJustify;
+  $align: FlexAlign;
+  $alignContent?: FlexAlign;
+  $gap?: FlexGap;
+  $rowGap?: FlexGap;
+  $columnGap?: FlexGap;
+}
+
+const StyledFlexContainer = styled.div<StyledFlexContainerProps>`
+  ${({ $direction, $wrap, $justify, $align, $alignContent, $gap, $rowGap, $columnGap }) => `
+    display: flex;
+    flex-direction: ${$direction};
+    flex-wrap: ${$wrap};
+    justify-content: ${$justify};
+    align-items: ${$align};
+    ${$alignContent ? `align-content: ${$alignContent};` : ''}
+    ${$gap !== undefined ? `gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};` : ''}
+    ${$rowGap !== undefined ? `row-gap: ${typeof $rowGap === 'number' ? `${$rowGap}px` : $rowGap};` : ''}
+    ${$columnGap !== undefined ? `column-gap: ${typeof $columnGap === 'number' ? `${$columnGap}px` : $columnGap};` : ''}
+  `}
+`;

package/src/Core/Flex/FlexItem.tsx

@@ -0,0 +1,64 @@
+import { CSSProperties, ReactNode } from 'react';
+import { styled } from 'styled-components';
+
+export type FlexItemGrow = number;
+export type FlexItemShrink = number;
+export type FlexItemBasis = string | number;
+export type FlexItemAlign = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+
+export interface FlexItemProps {
+  children?: any;
+  grow?: FlexItemGrow;
+  shrink?: FlexItemShrink;
+  basis?: FlexItemBasis;
+  align?: FlexItemAlign;
+  order?: number;
+  className?: string;
+  style?: CSSProperties;
+  as?: any; //TODO: fix type to styled component or intrinsic element
+}
+
+export const FlexItem = ({
+  children,
+  grow,
+  shrink,
+  basis,
+  align,
+  order,
+  className,
+  style,
+  as = 'div',
+}: FlexItemProps) => {
+  return (
+    <StyledFlexItem
+      as={as}
+      $grow={grow}
+      $shrink={shrink}
+      $basis={basis}
+      $align={align}
+      $order={order}
+      className={className}
+      style={style}
+    >
+      {children}
+    </StyledFlexItem>
+  );
+};
+
+interface StyledFlexItemProps {
+  $grow?: FlexItemGrow;
+  $shrink?: FlexItemShrink;
+  $basis?: FlexItemBasis;
+  $align?: FlexItemAlign;
+  $order?: number;
+}
+
+const StyledFlexItem = styled.div<StyledFlexItemProps>`
+  ${({ $grow, $shrink, $basis, $align, $order }) => `
+    ${$grow !== undefined ? `flex-grow: ${$grow};` : ''}
+    ${$shrink !== undefined ? `flex-shrink: ${$shrink};` : ''}
+    ${$basis !== undefined ? `flex-basis: ${typeof $basis === 'number' ? `${$basis}px` : $basis};` : ''}
+    ${$align ? `align-self: ${$align};` : ''}
+    ${$order !== undefined ? `order: ${$order};` : ''}
+  `}
+`;

package/src/Core/Flex/index.ts

@@ -0,0 +1,4 @@
+import { FlexContainer } from './FlexContainer';
+import { FlexItem } from './FlexItem';
+
+export { FlexContainer, FlexItem };

package/src/Core/Typography/Typography.tsx

@@ -4,11 +4,12 @@ import { ColorVariant, TypographyVariant } from '../../Theme';
 import { resolveThemeColor } from '../../Theme/utils';
 
 export interface TypographyProps {
+  style?: CSSProperties;
   variant?: TypographyVariant;
   element?: ElementType;
   children: any;
   weight?: CSSProperties['fontWeight'];
-  style?: CSSProperties['fontStyle'];
+  fontStyle?: CSSProperties['fontStyle'];
   color?: ColorVariant | string;
   className?: string;
 }
@@ -35,9 +36,10 @@ export const Typography = ({
   element,
   children,
   weight,
-  style,
+  fontStyle,
   color,
   className,
+  style,
 }: TypographyProps) => {
   // Determine which HTML element to render based on the variant if not explicitly specified
   const Element = element || (variant.startsWith('h') ? variant : 'p');
@@ -47,9 +49,10 @@ export const Typography = ({
       as={Element}
       $variant={variant}
       $weight={weight}
-      $style={style}
+      $style={fontStyle}
       $color={color}
       className={className}
+      style={style}
     >
       {children}
     </StyledTypography>

package/src/Core/index.ts

@@ -10,3 +10,5 @@ export * from './ContextMenu';
 export * from './Select';
 export * from './RowActionsMenu';
 export * from './Input';
+export * from './Flex';
+export * from './Box';

package/src/Graph2D/Graph2D.tsx

@@ -241,7 +241,11 @@ export const Graph2D = ({
       // Вибір іконки в залежності від стану наведення для верхньої кнопки (сховати)
       const crossIcon = hoverTopButton ? imgCrossLightHoverIcon : imgCrossLightIcon;
       const renderCrossIcon = () => {
-        ctx.drawImage(crossIcon, x - iconSize / 2, y - (buttonRadius * 2) / 4 - iconSize - 1, iconSize, iconSize);
+        try {
+          ctx.drawImage(crossIcon, x - iconSize / 2, y - (buttonRadius * 2) / 4 - iconSize - 1, iconSize, iconSize);
+        } catch (error) {
+          console.log('Error rendering cross icon:', error);
+        }
       };
       // Використовуємо безпосередньо зображення, якщо воно вже завантажене
       if (crossIcon.complete) {
@@ -252,22 +256,35 @@ export const Graph2D = ({
         crossIcon.onload = () => {
           renderCrossIcon();
         };
+
+        crossIcon.onerror = () => {
+          console.log('Error loading cross icon image');
+        };
       }
 
       // Додаємо іконку ока для кнопки "згорнути дочірні вузли"
       const eyeIcon = hoverBottomButton ? imgEyeLightHoverIcon : imgEyeLightIcon;
       const renderEyeIcon = () => {
-        ctx.drawImage(eyeIcon, x - iconSize / 2, y + (buttonRadius * 2) / 4 + 1, iconSize, iconSize);
+        try {
+          ctx.drawImage(eyeIcon, x - iconSize / 2, y + (buttonRadius * 2) / 4 + 1, iconSize, iconSize);
+        } catch (error) {
+          console.log('Error rendering eye icon:', error);
+        }
       };
       // Використовуємо безпосередньо зображення, якщо воно вже завантажене
       if (eyeIcon.complete) {
         // Розміщуємо іконку в центрі нижньої половини кнопки
+
         renderEyeIcon();
       } else {
         // Якщо зображення ще не завантажене, додаємо обробник завершення завантаження
         eyeIcon.onload = () => {
           renderEyeIcon();
         };
+
+        eyeIcon.onerror = () => {
+          console.log('Error loading eye icon image');
+        };
       }
 
       ctx.restore();

package/src/Theme/theme.ts

@@ -633,6 +633,16 @@ export const lightThemePx: Theme = {
       },
     },
   },
+  box: {
+    padding: 20,
+    border: {
+      radius: 8,
+      width: 1,
+      style: 'solid',
+      color: '#EBEBEB',
+    },
+    background: '#FFFFFF',
+  },
 };
 
 // Конвертуємо всі розміри з px в rem

package/src/Theme/types.ts

@@ -184,6 +184,17 @@ export type Theme = {
     sizes: Record<InputSize, InputSizeStyle>;
     outlined: Record<InputState, InputElementStyle>;
   };
+  //Box
+  box: {
+    padding: number | string;
+    background: string;
+    border: {
+      radius: number | string;
+      width: number | string;
+      style: string;
+      color: string;
+    };
+  };
 };
 
 //TODO check and refactoring