@cyber-harbour/ui 1.0.28 → 1.0.30

package/package.json

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

package/src/Core/Box/Box.tsx

@@ -1,9 +1,14 @@
+import { createComponent, FabricComponent } from '../../Theme';
 import { styled } from 'styled-components';
 
-export const Box = styled.div(
+type BoxProps = FabricComponent<{
+  children: any;
+}>;
+
+export const Box = styled(createComponent<BoxProps>('div'))(
   ({ theme }) => `
       padding: ${theme.box.padding};
-      border-radius: ${theme.box.border.radius};
+      border-radius: ${theme.box.borderRadius};
       background-color: ${theme.box.background};
       border-width: ${theme.box.border.width};
       border-style: ${theme.box.border.style};

package/src/Core/Button/Button.tsx

@@ -7,9 +7,11 @@ import {
   getButtonStyles,
   getButtonSizeStyles,
   ButtonElementStyle,
+  createComponent,
+  FabricComponent,
 } from '../../Theme';
 
-interface BaseButtonProps {
+type BaseButtonProps = FabricComponent<{
   children?: any;
   variant?: ButtonVariant;
   color?: ButtonColor;
@@ -19,7 +21,8 @@ interface BaseButtonProps {
   className?: string;
   icon?: any;
   iconPosition?: 'left' | 'right';
-}
+  iconVariant?: 'filled' | 'empty';
+}>;
 
 export type ButtonProps = (
   | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'>
@@ -34,26 +37,54 @@ const getCss = (styles: ButtonElementStyle) => `
     box-shadow: ${styles.boxShadow};
   `;
 
+const getIconStyles = (styles: ButtonElementStyle) =>
+  styles.filledIcon
+    ? `
+    color: ${styles.filledIcon.color};
+    background: ${styles.filledIcon.background};
+  `
+    : '';
+
 // Створюємо стилізований компонент, що використовує уніфіковану палітру
-const StyledButton = styled.button<{
+const ButtonTextContainer = styled.div`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const StyledIconWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const StyledButton = styled(createComponent('button'))<{
   $variant: ButtonVariant;
   $color: ButtonColor;
   $size: ButtonSize;
   $disabled: boolean;
   $fullWidth: boolean;
   $iconPosition: 'left' | 'right';
+  $iconVariant: 'filled' | 'empty';
 }>`
-  ${({ $variant, $color, $size, $disabled, $fullWidth, $iconPosition, theme }) => {
+  ${({ $variant, $color, $size, $disabled, $fullWidth, $iconPosition, $iconVariant, theme, ...props }) => {
     const sizes = getButtonSizeStyles(theme, $size);
     return `
       ${getCss(getButtonStyles(theme, $variant, $color, 'default'))}
       font-size: ${sizes.fontSize};
       gap: ${sizes.gap};
-      padding-block: ${sizes.paddingBlock};
-      padding-inline: ${sizes.paddingInline};
+      ${
+        $variant !== 'empty'
+          ? `
+            ${!props.py ? `padding-block: ${sizes.paddingBlock};` : ''}
+            ${!props.px ? `padding-inline: ${sizes.paddingInline};` : ''}
+          `
+          : ''
+      }
       border-radius: ${sizes.borderRadius};
       border-width: ${sizes.borderWidth};
       border-style: solid;
+      max-width: 100%;
       width: ${$fullWidth ? '100%' : 'auto'};
       cursor: ${$disabled ? 'not-allowed' : 'pointer'};
       font-weight: 500;
@@ -78,10 +109,41 @@ const StyledButton = styled.button<{
         ${getCss(getButtonStyles(theme, $variant, $color, 'disabled'))}
       }
 
-      svg {
+      ${StyledIconWrapper} svg {
         width: ${sizes.iconSize};
         height: ${sizes.iconSize};
       }
+
+        ${
+          $iconVariant === 'filled'
+            ? `
+             ${StyledIconWrapper} {
+                width: 24px;
+                height: 24px;
+                border-radius: ${sizes.borderRadius};
+                transition: all 0.2s ease;
+                ${getIconStyles(getButtonStyles(theme, $variant, $color, 'default'))}
+              }
+              &:hover {
+                ${StyledIconWrapper} {
+                  ${getIconStyles(getButtonStyles(theme, $variant, $color, 'hover'))}
+                }
+              }
+
+              &:active {
+                ${StyledIconWrapper} {
+                  ${getIconStyles(getButtonStyles(theme, $variant, $color, 'active'))}
+                }
+              }
+
+               &:disabled {
+                ${StyledIconWrapper} {
+                  ${getIconStyles(getButtonStyles(theme, $variant, $color, 'disabled'))}
+                }
+              }
+            `
+            : ``
+        }
     `;
   }}
 `;
@@ -96,6 +158,7 @@ export const Button = ({
   className,
   icon,
   iconPosition = 'left',
+  iconVariant = 'empty',
   ...props
 }: ButtonProps) => {
   return (
@@ -107,12 +170,13 @@ export const Button = ({
       $disabled={disabled}
       $fullWidth={fullWidth}
       $iconPosition={iconPosition}
+      $iconVariant={iconVariant}
       disabled={disabled}
       className={className}
       {...props}
     >
-      {icon}
-      <div>{children}</div>
+      {!!icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
+      {!!children && <ButtonTextContainer>{children}</ButtonTextContainer>}
     </StyledButton>
   );
 };

package/src/Core/Flex/FlexContainer.tsx

@@ -69,6 +69,8 @@ interface StyledFlexContainerProps {
 const StyledFlexContainer = styled.div<StyledFlexContainerProps>`
   ${({ $direction, $wrap, $justify, $align, $alignContent, $gap, $rowGap, $columnGap }) => `
     display: flex;
+    width: 100%;
+    min-width: 0;
     flex-direction: ${$direction};
     flex-wrap: ${$wrap};
     justify-content: ${$justify};

package/src/Core/Flex/FlexItem.tsx

@@ -55,6 +55,7 @@ interface StyledFlexItemProps {
 
 const StyledFlexItem = styled.div<StyledFlexItemProps>`
   ${({ $grow, $shrink, $basis, $align, $order }) => `
+    min-width: 0;
     ${$grow !== undefined ? `flex-grow: ${$grow};` : ''}
     ${$shrink !== undefined ? `flex-shrink: ${$shrink};` : ''}
     ${$basis !== undefined ? `flex-basis: ${typeof $basis === 'number' ? `${$basis}px` : $basis};` : ''}

package/src/Core/IconComponents/MaximizeIcon.tsx

@@ -0,0 +1,28 @@
+import { SVGProps } from 'react';
+
+interface MaximizeIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const MaximizeIcon = ({ fill = 'currentColor', ...props }: MaximizeIconProps) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M14 6.5C13.7267 6.5 13.5 6.27333 13.5 6V2.5H10C9.72667 2.5 9.5 2.27333 9.5 2C9.5 1.72667 9.72667 1.5 10 1.5H14C14.2733 1.5 14.5 1.72667 14.5 2V6C14.5 6.27333 14.2733 6.5 14 6.5Z"
+        fill={fill}
+      />
+      <path
+        d="M6 14.5H2C1.72667 14.5 1.5 14.2733 1.5 14V10C1.5 9.72667 1.72667 9.5 2 9.5C2.27333 9.5 2.5 9.72667 2.5 10V13.5H6C6.27333 13.5 6.5 13.7267 6.5 14C6.5 14.2733 6.27333 14.5 6 14.5Z"
+        fill={fill}
+      />
+      <path
+        d="M8.9998 7.50224C8.87313 7.50224 8.74646 7.45557 8.64646 7.35557C8.45313 7.16224 8.45313 6.84224 8.64646 6.64891L13.6465 1.64891C13.8398 1.45557 14.1598 1.45557 14.3531 1.64891C14.5465 1.84224 14.5465 2.16224 14.3531 2.35557L9.35313 7.35557C9.25313 7.45557 9.12646 7.50224 8.9998 7.50224Z"
+        fill={fill}
+      />
+      <path
+        d="M1.9998 14.5022C1.87313 14.5022 1.74646 14.4556 1.64646 14.3556C1.45313 14.1622 1.45313 13.8422 1.64646 13.6489L6.64646 8.64891C6.8398 8.45557 7.1598 8.45557 7.35313 8.64891C7.54646 8.84224 7.54646 9.16224 7.35313 9.35557L2.35313 14.3556C2.25313 14.4556 2.12646 14.5022 1.9998 14.5022Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/SearchIcon.tsx

@@ -0,0 +1,14 @@
+import { SVGProps } from 'react';
+
+interface SearchIconProps extends SVGProps<SVGSVGElement> {
+  stroke?: string;
+}
+
+export const SearchIcon = ({ stroke = 'currentColor', ...props }: SearchIconProps) => {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <ellipse cx="5.80004" cy="5.80062" rx="4.80004" ry="4.80062" stroke={stroke} />
+      <path d="M9.00012 9.80078L13.0002 12.9997" stroke={stroke} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -28,6 +28,7 @@ export { PrintIcon } from './PrintIcon';
 export { Profiler2Icon } from './Profiler2Icon';
 export { ProfilerIcon } from './ProfilerIcon';
 export { SandBoxIcon } from './SandBoxIcon';
+export { SearchIcon } from './SearchIcon';
 export { StatisticIcon } from './StatisticIcon';
 export { SunIcon } from './SunIcon';
 export { UpRightArrowCircleIcon } from './UpRightArrowCircleIcon';
@@ -41,3 +42,4 @@ export { UsersIcon } from './Users';
 export { InfoCircleFilledIcon } from './InfoCircleFilled';
 export { UnfoldIcon } from './Unfold';
 export { CrossIcon } from './Cross';
+export { MaximizeIcon } from './MaximizeIcon';

package/src/Core/Line/Line.tsx

@@ -0,0 +1,24 @@
+import { createComponent, FabricComponent, pxToRem } from '../../Theme';
+import { styled } from 'styled-components';
+
+type LineProps = FabricComponent<
+  {
+    direction?: 'horizontal' | 'vertical';
+  } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>
+>;
+
+export const Line = ({ direction = 'horizontal', ...props }: LineProps) => {
+  return <StyledLine {...props} $direction={direction} />;
+};
+
+interface StyledLineProps {
+  $direction: 'horizontal' | 'vertical';
+}
+
+const StyledLine = styled(createComponent('div'))<StyledLineProps>(
+  ({ theme, $direction }) => `
+    width: ${$direction === 'horizontal' ? '100%' : theme.line.size};
+    height: ${$direction === 'vertical' ? '100%' : theme.line.size};
+    background-color: ${theme.line.color};
+`
+);

package/src/Core/Line/index.ts

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

package/src/Core/Typography/Typography.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
-import { CSSProperties, ElementType, ReactNode } from 'react';
-import { ColorVariant, TypographyVariant } from '../../Theme';
+import { CSSProperties, ElementType } from 'react';
+import { ColorVariant, createComponent, FabricComponent, TypographyVariant } from '../../Theme';
 import { resolveThemeColor } from '../../Theme/utils';
 
-export interface TypographyProps {
+type TypographyProps = FabricComponent<{
   style?: CSSProperties;
   variant?: TypographyVariant;
   element?: ElementType;
@@ -12,10 +12,10 @@ export interface TypographyProps {
   fontStyle?: CSSProperties['fontStyle'];
   color?: ColorVariant | string;
   className?: string;
-}
+}>;
 
 // Create a styled component that can be dynamically rendered as different HTML elements
-const StyledTypography = styled.div<{
+const StyledTypography = styled(createComponent('div'))<{
   $variant: TypographyVariant;
   $weight?: CSSProperties['fontWeight'];
   $style?: CSSProperties['fontStyle'];
@@ -40,6 +40,7 @@ export const Typography = ({
   color,
   className,
   style,
+  ...props
 }: TypographyProps) => {
   // Determine which HTML element to render based on the variant if not explicitly specified
   const Element = element || (variant.startsWith('h') ? variant : 'p');
@@ -53,6 +54,7 @@ export const Typography = ({
       $color={color}
       className={className}
       style={style}
+      {...props}
     >
       {children}
     </StyledTypography>

package/src/Core/Typography/index.ts

@@ -1,2 +1 @@
-export { Typography } from './Typography';
-export type { TypographyProps } from './Typography';
+export * from './Typography';

package/src/Core/index.ts

@@ -12,3 +12,4 @@ export * from './RowActionsMenu';
 export * from './Input';
 export * from './Flex';
 export * from './Box';
+export * from './Line';

package/src/FullscreenCard/FullscreenCard.tsx

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+interface FullscreenCardProps {
+  children: any;
+  position: 'absolute' | 'fixed';
+  isActive: boolean;
+}
+
+export const FullscreenCard = ({ isActive, position, ...props }: FullscreenCardProps) => {
+  return <StyledContainer $isActive={isActive} $position={position} {...props} />;
+};
+
+const StyledContainer = styled.div<{ $isActive: boolean; $position: 'absolute' | 'fixed' }>(
+  ({ $isActive, $position }) => `
+${
+  $isActive
+    ? `
+      position: ${$position};
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      z-index: 1000;
+    `
+    : ''
+}
+
+  min-width: 0;
+  `
+);

package/src/FullscreenCard/index.ts

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

package/src/Layouts/Container/Container.tsx

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

package/src/Layouts/Container/index.ts

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

package/src/Layouts/index.ts

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

package/src/Theme/ThemeProvider.tsx

@@ -1,12 +1,21 @@
-import { ThemeProvider as ThemeProviderStyled } from 'styled-components';
+import { StyleSheetManager, ThemeProvider as ThemeProviderStyled, WebTarget } from 'styled-components';
 import { lightTheme } from './theme';
 import { GlobalStyle } from './GlobalStyle';
 
 export const ThemeProvider = ({ children }: { children: any }) => {
   return (
-    <ThemeProviderStyled theme={lightTheme}>
-      <GlobalStyle />
-      {children}
-    </ThemeProviderStyled>
+    <StyleSheetManager shouldForwardProp={shouldForwardProp}>
+      <ThemeProviderStyled theme={lightTheme}>
+        <GlobalStyle />
+        {children}
+      </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.ts

@@ -0,0 +1,70 @@
+import styled, { css, WebTarget } from 'styled-components';
+
+type MarginProps = {
+  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
+};
+
+export type FabricComponent<T = object> = T & MarginProps;
+
+const marginStyles = css<FabricComponent>((props) => {
+  return `
+      ${props.m ? `margin: ${typeof props.m === 'number' ? `${props.m}px` : props.m};` : ''}
+      ${props.mt ? `margin-top: ${typeof props.mt === 'number' ? `${props.mt}px` : props.mt};` : ''}
+      ${props.mr ? `margin-right: ${typeof props.mr === 'number' ? `${props.mr}px` : props.mr};` : ''}
+      ${props.mb ? `margin-bottom: ${typeof props.mb === 'number' ? `${props.mb}px` : props.mb};` : ''}
+      ${props.ml ? `margin-left: ${typeof props.ml === 'number' ? `${props.ml}px` : props.ml};` : ''}
+      ${
+        props.mx
+          ? `margin-left: ${typeof props.mx === 'number' ? `${props.mx}px` : props.mx}; margin-right: ${
+              typeof props.mx === 'number' ? `${props.mx}px` : props.mx
+            };`
+          : ''
+      }
+      ${
+        props.my
+          ? `margin-top: ${typeof props.my === 'number' ? `${props.my}px` : props.my}; margin-bottom: ${
+              typeof props.my === 'number' ? `${props.my}px` : props.my
+            };`
+          : ''
+      }
+      ${props.p ? `padding: ${typeof props.p === 'number' ? `${props.p}px` : props.p};` : ''}
+      ${props.pt ? `padding-top: ${typeof props.pt === 'number' ? `${props.pt}px` : props.pt};` : ''}
+      ${props.pr ? `padding-right: ${typeof props.pr === 'number' ? `${props.pr}px` : props.pr};` : ''}
+      ${props.pb ? `padding-bottom: ${typeof props.pb === 'number' ? `${props.pb}px` : props.pb};` : ''}
+      ${props.pl ? `padding-left: ${typeof props.pl === 'number' ? `${props.pl}px` : props.pl};` : ''}
+      ${
+        props.px
+          ? `padding-left: ${typeof props.px === 'number' ? `${props.px}px` : props.px}; padding-right: ${
+              typeof props.px === 'number' ? `${props.px}px` : props.px
+            };`
+          : ''
+      }
+      ${
+        props.py
+          ? `padding-top: ${typeof props.py === 'number' ? `${props.py}px` : props.py}; padding-bottom: ${
+              typeof props.py === 'number' ? `${props.py}px` : props.py
+            };`
+          : ''
+      }
+
+    `;
+});
+
+export const createComponent = <T = object>(element: WebTarget) => {
+  return styled(element)<FabricComponent<T>>`
+    ${marginStyles};
+  `;
+};

package/src/Theme/index.ts

@@ -3,3 +3,4 @@ export * from './ThemeProvider';
 export * from './utils';
 export * from './types';
 export * from './theme';
+export * from './componentFabric';

package/src/Theme/theme.ts

@@ -74,6 +74,10 @@ export const lightThemePx: Theme = {
     popover: 1060,
     tooltip: 1070,
   },
+  line: {
+    size: 1,
+    color: '#EBEBEB',
+  },
   button: {
     // Варіанти кнопок з кольорами
     fill: {
@@ -332,24 +336,40 @@ export const lightThemePx: Theme = {
           text: '#0042EC',
           border: 'transparent',
           boxShadow: 'none',
+          filledIcon: {
+            background: '#E5ECFD',
+            color: '#0042EC',
+          },
         },
         hover: {
           background: 'transparent',
           text: '#80A0F5',
           border: 'transparent',
           boxShadow: 'none',
+          filledIcon: {
+            background: '#0042EC',
+            color: '#ffffff',
+          },
         },
         active: {
           background: 'transparent',
           text: '#80A0F5',
           border: 'transparent',
           boxShadow: 'none',
+          filledIcon: {
+            background: '#0042EC',
+            color: '#ffffff',
+          },
         },
         disabled: {
           background: 'transparent',
           text: '#99989C',
           border: 'transparent',
           boxShadow: 'none',
+          filledIcon: {
+            background: '#BEBEBE',
+            color: '#99989C',
+          },
         },
       },
       //default as secondary
@@ -635,8 +655,8 @@ export const lightThemePx: Theme = {
   },
   box: {
     padding: 20,
+    borderRadius: 8,
     border: {
-      radius: 8,
       width: 1,
       style: 'solid',
       color: '#EBEBEB',

package/src/Theme/types.ts

@@ -19,6 +19,10 @@ export type ButtonElementStyle = {
   text: string;
   border: string;
   boxShadow: string;
+  filledIcon?: {
+    background: string;
+    color: string;
+  };
 };
 
 // Тип для розмірів кнопок
@@ -81,6 +85,10 @@ export type Theme = {
     warning: string;
     info: string;
   };
+  line: {
+    size: string | number;
+    color: string;
+  };
   typography: {
     fontFamily: string;
     lineHeight: number;
@@ -188,8 +196,8 @@ export type Theme = {
   box: {
     padding: number | string;
     background: string;
+    borderRadius: number | string;
     border: {
-      radius: number | string;
       width: number | string;
       style: string;
       color: string;

package/src/index.ts

@@ -2,3 +2,4 @@ export * from './Core';
 export * from './Layouts';
 export * from './Theme';
 export * from './Graph2D';
+export * from './FullscreenCard';

package/tsconfig.paths.json

@@ -1,11 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"],
-      "@core/*": ["src/Core/*"],
-      "@theme/*": ["src/Theme/*"],
-      "@layouts/*": ["src/Layouts/*"]
-    }
+    "baseUrl": "."
   }
 }

package/tsup.config.ts

@@ -21,13 +21,6 @@ export default defineConfig({
   esbuildOptions(options) {
     options.drop = ['console', 'debugger'];
     options.pure = ['console.log', 'console.info', 'console.debug', 'console.warn'];
-    // Налаштування розв'язання шляхів для esbuild
-    options.alias = {
-      '@': resolve(__dirname, './src'),
-      '@core': resolve(__dirname, './src/Core'),
-      '@theme': resolve(__dirname, './src/Theme'),
-      '@layouts': resolve(__dirname, './src/Layouts'),
-    };
   },
   shims: true,
   keepNames: true,